Skip to content

Commit b0361d5

Browse files
samselikoffsamselikoff
authored
Design updates (ember-learn#247)
Design updates
1 parent 6c6d679 commit b0361d5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

73 files changed

+1615
-1154
lines changed

‎addon/components/api/x-meta-panel/component.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
44
export default Component.extend({
55
tagName: '',
66
layout: hbs`
7-
<div class="docs-px-6 docs-pt-3 docs-mt-4 docs-border docs-border-grey-light docs-rounded docs-text-sm">
7+
<div class="docs-px-6 docs-pt-3 docs-mt-4 docs-border docs-border-grey-light docs-rounded docs-text-xs">
88
{{yield (hash
99
header=(component 'api/x-meta-panel/header')
1010
)}}

‎addon/components/api/x-meta-panel/header/component.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import hbs from 'htmlbars-inline-precompile';
44
export default Component.extend({
55
tagName: '',
66
layout: hbs`
7-
<h4 class="docs-mb-2 docs-text-grey docs-font-bold docs-tracking-wide docs-uppercase docs-text-xs">
7+
<h4 class="docs-mb-2 docs-text-grey docs-font-bold docs-tracking-wide docs-uppercase docs-text-xxs">
88
{{yield}}
99
</h4>
1010
`,

‎addon/components/api/x-section/component.js

+7
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,20 @@ import Component from '@ember/component';
22
import { computed } from '@ember/object';
33
import layout from './template';
44

5+
/**
6+
@class Api/XSection
7+
@hide
8+
*/
59
export default Component.extend({
610
layout,
711
tagName: '',
812

913
/**
1014
* Params shouldn't be displayed when there are no descriptions and no subparams,
1115
* because the information is already displayed in the type signature and redundant
16+
*
17+
* @function
18+
* @hide
1219
*/
1320
shouldDisplayParams: computed('item.params.[]', function() {
1421
let params = this.get('item.params') || [];

‎addon/components/api/x-section/template.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
class="docs-h3 docs-font-mono docs-font-normal"
77
>
88
{{#if (eq item.exportType 'default')}}
9-
<span class="docs-border docs-border-grey-light docs-align-text-top docs-leading-loose docs-text-xs docs-pl-2 docs-mr-2 docs-py-1 docs-rounded">
9+
<span class="docs-border docs-border-grey-light docs-align-text-top docs-leading-loose docs-text-xxs docs-pl-2 docs-mr-2 docs-py-1 docs-rounded">
1010
Default
1111
</span>
1212
{{/if}}

‎addon/components/docs-demo/template.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
{{#each snippets as |snippet|}}
1111
<button {{action 'selectSnippet' snippet}}
1212
class='
13-
docs-mr-4 docs-text-sm docs-no-underline outline-none
13+
docs-mr-4 docs-text-xs docs-no-underline outline-none
1414
hover:docs-text-grey-darkest
1515
{{if snippet.isActive 'docs-text-grey-darkest' 'docs-text-grey-dark'}}
1616
'

‎addon/components/docs-header/component.js

+29-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import layout from './template';
33
import config from 'dummy/config/environment';
44
import { computed } from '@ember/object';
55
import { classify } from '@ember/string';
6-
import { addonLogo } from 'ember-cli-addon-docs/utils/computed';
6+
import { addonLogo, addonPrefix } from 'ember-cli-addon-docs/utils/computed';
77
import { inject as service } from '@ember/service';
88
import { reads } from '@ember/object/computed';
99

@@ -40,11 +40,38 @@ export default Component.extend({
4040

4141
didInsertElement() {
4242
this._super(...arguments);
43+
4344
this.get('projectVersion').loadAvailableVersions();
4445
},
4546

46-
logo: addonLogo(projectName),
47+
logo: classify(addonLogo(projectName)),
48+
49+
/**
50+
The prefix of your project, typically "Ember", "EmberCLI" or "EmberData".
51+
52+
By default the prefix will be autodiscovered from the `name` field of your addon's package.json.
53+
54+
```hbs
55+
{{docs-header prefix='EmberData'}}
56+
```
57+
58+
@argument prefix
59+
@type String?
60+
*/
61+
prefix: addonPrefix(projectName),
62+
63+
/**
64+
The name of your project (without the "ember", "ember-cli" or "ember-data" prefix).
65+
66+
By default the name will be autodiscovered from the `name` field of your addon's package.json.
67+
68+
```hbs
69+
{{docs-header name='MyProject'}}
70+
```
4771
72+
@argument name
73+
@type String?
74+
*/
4875
name: computed(function() {
4976
let name = projectName;
5077
name = name.replace('ember-data-', '');

‎addon/components/docs-header/link/template.hbs

+9-8
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
<a href={{href}}
44
class='
5-
docs-px-4 docs-py-3 docs-transition docs-uppercase docs-text-xs docs-font-semibold
6-
docs-text-grey-darkest docs-no-underline docs-opacity-50 hover:docs-opacity-100
5+
docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs docs-font-bold
6+
docs-text-grey-darkest docs-no-underline hover:docs-text-brand
77
{{if push 'docs-ml-auto'}}
88
'
99
data-test-id={{data-test-id}}>
@@ -15,9 +15,9 @@
1515
<a {{action on-click}}
1616
href='#'
1717
class='
18-
docs-px-4 docs-py-3 docs-transition docs-uppercase docs-text-xs docs-font-semibold
19-
docs-text-grey-darkest docs-no-underline docs-opacity-50 hover:docs-opacity-100
20-
{{if push 'ml-auto'}}
18+
docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs docs-font-bold
19+
docs-text-grey-darkest docs-no-underline hover:docs-text-brand
20+
{{if push 'docs-ml-auto'}}
2121
'
2222
data-test-id={{data-test-id}}>
2323
{{yield}}
@@ -27,9 +27,10 @@
2727

2828
{{#link-to route
2929
class=(concat
30-
'docs-px-4 docs-py-3 docs-transition docs-uppercase docs-text-xs docs-font-semibold
31-
docs-text-grey-darkest docs-no-underline '
32-
(if (and (not isActive) (not (eq route 'index'))) 'docs-opacity-50 hover:docs-opacity-100')
30+
'docs-px-4 docs-py-5 docs-transition docs-uppercase docs-text-xxs
31+
docs-font-bold docs-no-underline docs-text-grey-darkest '
32+
(if (and (not isActive) (not (eq route 'index'))) 'hover:docs-text-brand')
33+
(if (and isActive (not (eq route 'index'))) 'docs-text-brand')
3334
)
3435
data-test-id=data-test-id
3536
}}

‎addon/components/docs-header/search-box/styles.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
input[data-search-box-input]::placeholder {
2+
@extend .docs-text-black;
3+
@extend .docs-font-bold;
4+
@extend .docs-opacity-100;
5+
6+
&:focus {
7+
@extend .docs-text-grey;
8+
}
9+
}

‎addon/components/docs-header/search-box/template.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
value={{query}}
1212
type="text"
1313
disabled={{fetchProject.isRunning}}
14-
placeholder='Search'
15-
class='docs-w-24 docs-text-xs docs-p-2 docs-pl-6 docs-rounded focus:docs-bg-grey-lighter outline-none'
14+
placeholder='SEARCH'
15+
class='docs-w-24 docs-text-xxs docs-p-2 docs-pl-6 docs-rounded focus:docs-bg-grey-lighter outline-none'
1616
data-search-box-input
1717
data-test-search-box-input>
1818
</div>

‎addon/components/docs-header/template.hbs

+10-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
<header class='docs-border-b docs-shadow-sm'>
2-
<div class='docs-flex docs-items-center docs-max-w-3xl docs-mx-auto'>
1+
<header class='docs-shadow docs-relative docs-z-40 docs-bg-white'>
2+
<div class='docs-flex docs-items-center docs-max-w-site-container docs-mx-auto md:docs-px-2'>
3+
34
{{#docs-header/link 'index'}}
4-
<div class="docs-text-center docs-text-xs">
5-
{{#if logo}}
6-
<div class='docs-h-4 docs-pb-1'>
7-
{{docs-logo logo=logo}}
5+
<span class='docs-leading-none docs-font-title docs-text-large-2 docs-font-normal docs-normal-case docs-block docs-mr-6'>
6+
{{#if prefix}}
7+
<div class='docs-text-xxs'>
8+
{{prefix}}
89
</div>
910
{{/if}}
10-
<span class='docs-font-medium docs-normal-case docs-block docs--mt-2px'>{{name}}</span>
11-
</div>
11+
{{name}}
12+
</span>
1213
{{/docs-header/link}}
1314

1415
<div class='docs-flex-1 docs-flex docs-items-center docs-overflow-auto docs-overflow-momentum docs-mask-image md:docs-no-mask-image'>
@@ -48,7 +49,7 @@
4849
{{/if}}
4950

5051
{{!-- Something to take up space on mobile, so the scrolling nav isn't hugging the edge --}}
51-
<div class='docs-h-px docs-px-3 md:docs-hidden'></div>
52+
<div class='docs-h-px docs-px-3 sm:docs-hidden'></div>
5253
</div>
5354
</div>
5455
</header>

‎addon/components/docs-header/version-selector/template.hbs

+9-5
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@
44
clickOutsideToClose=true
55
onClose=(action on-close)
66
targetAttachment='bottom right'}}
7-
<ul class="docs-list-reset docs-mt-2 docs-bg-white docs-shadow-md docs-text-sm docs-rounded docs-z-10">
7+
<ul class="docs-list-reset docs-mt-2 docs-bg-white docs-shadow-md docs-text-xs docs-rounded docs-z-10">
88
{{#each sortedVersions as |version|}}
99
<li data-test-id='version'>
1010
<a {{action 'changeVersion' version}} href='#'
11-
class='docs-text-black docs-no-underline docs-flex docs-items-center
12-
docs-px-4 docs-py-3 hover:docs-bg-grey-lighter'>
11+
class={{concat
12+
'docs-text-black docs-no-underline docs-flex docs-items-center
13+
docs-px-4 docs-py-3 hover:docs-bg-brand hover:docs-text-white group '
14+
(if (eq version sortedVersions.firstObject) 'docs-rounded-t')
15+
(if (eq version sortedVersions.lastObject) 'docs-rounded-b')
16+
}}>
1317
<span class='docs-w-6 flex'>
1418
{{#if (eq version.key currentVersion.key)}}
1519
{{svg-jar 'check' height=16 width=16}}
@@ -19,14 +23,14 @@
1923
{{version.name}}
2024
</span>
2125

22-
<span class="docs-ml-auto docs-pl-8 docs-flex docs-items-center docs-opacity-50">
26+
<span class="docs-ml-auto docs-pl-8 docs-flex docs-items-center docs-opacity-50 group-hover:docs-opacity-100">
2327
{{#if (or (eq version.key latestVersionName) (eq version.key primaryBranch))}}
2428
{{svg-jar (if version.tag 'git-tag' 'git-sha') height=16 width=16}}
2529
{{else}}
2630
{{svg-jar 'git-sha' height=16 width=16}}
2731
{{/if}}
2832

29-
<span class='docs-text-xs docs-font-mono docs-pl-1'>
33+
<span class='docs-text-xxs docs-font-mono docs-pl-1'>
3034
{{#if (or (eq version.key latestVersionName) (eq version.key primaryBranch))}}
3135
{{#if version.tag}}
3236
{{version.tag}}

‎addon/components/docs-hero/component.js

+12-25
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import Component from '@ember/component';
22
import layout from './template';
3+
import { addonPrefix, unprefixedAddonName } from 'ember-cli-addon-docs/utils/computed';
4+
import config from 'dummy/config/environment';
5+
import { classify } from '@ember/string';
6+
const { projectName, projectDescription } = config['ember-cli-addon-docs'];
37

48
/**
59
A component that renders a hero banner. Useful for your docs site's homepage.
610
711
```hbs
812
{{docs-hero
9-
logo='ember'
10-
slimHeading='Super'
11-
strongHeading='Addon'
13+
prefix='Ember'
14+
headding='SuperAddon'
1215
byline='The best addon ever. Now playing in theaters.'}}
1316
```
1417
@@ -20,42 +23,26 @@ export default Component.extend({
2023
tagName: '',
2124

2225
/**
23-
The style of the header, "light" or "dark". Defaults to light.
24-
25-
@argument style
26-
@type String
27-
*/
28-
style: 'light',
29-
30-
/**
31-
The logo to show, one of: 'ember', 'ember-cli', or 'ember-data'
26+
The prefix to show, tyipcally of: 'Ember', 'EmberCLI', or 'EmberData'
3227
3328
@argument logo
3429
@type String
3530
*/
36-
logo: '',
37-
38-
/**
39-
Smaller heading for the logo
40-
41-
@argument slimHeading
42-
@type String
43-
*/
44-
slimHeading: '',
31+
prefix: addonPrefix(projectName),
4532

4633
/**
47-
Larger heading for the logo
34+
The logo's main heading
4835
49-
@argument strongHeading
36+
@argument heading
5037
@type String
5138
*/
52-
strongHeading: '',
39+
heading: classify(unprefixedAddonName(projectName)),
5340

5441
/**
5542
Byline for the logo
5643
5744
@argument byline
5845
@type String
5946
*/
60-
byline: ''
47+
byline: projectDescription
6148
});

‎addon/components/docs-hero/styles.scss

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DocsHero-background {
2+
height: 100vh;
3+
margin-top: calc(-100vh + 8rem);
4+
transform: skewY(-5deg);
5+
}

‎addon/components/docs-hero/template.hbs

+33-18
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
1-
<div class="
2-
docs-text-center docs-py-8 md:docs-py-16
3-
{{if (eq style 'light') 'docs-text-grey-darkest'}}
4-
{{if (eq style 'dark') 'docs-bg-black docs-text-white'}}
5-
">
6-
<h1 class='docs-text-5xl md:docs-text-jumbo docs-leading-none'>
7-
{{#if logo}}
8-
<div class='md:docs--mb-1 docs--mt-4 md:docs--mt-8'>
9-
<span class='docs-inline-block docs-h-6 docs-opacity-50'>
10-
{{docs-logo logo=logo}}
1+
<div class='
2+
docs-bg-brand docs-text-white
3+
docs-px-4 docs-py-16 docs-text-center
4+
'>
5+
<div class="docs-max-w-sm docs-mx-auto">
6+
<h1 class='
7+
docs-font-title docs-font-normal docs-text-jumbo-1 md:docs-text-jumbo-2 xl:docs-text-jumbo-3
8+
docs-leading-none docs-tracking-tight
9+
'>
10+
{{#if prefix}}
11+
<span class="docs-block docs-text-large-5 md:docs-text-large-6 xl:docs-text-large-7">
12+
{{prefix}}
1113
</span>
12-
</div>
13-
{{/if}}
14+
{{/if}}
1415

15-
<span class='docs-font-thin'>{{slimHeading}}</span>{{strongHeading}}
16-
</h1>
16+
{{heading}}
17+
</h1>
1718

18-
<p class='docs-opacity-75 docs-text-xl docs-mt-4 docs-w-3/4 docs-mx-auto docs-leading-tight'>
19-
{{byline}}
20-
</p>
19+
<p class='
20+
docs-mt-4 xl:docs-mt-6 docs-mb-2 docs-leading-small docs-mx-auto docs-tracking-tight
21+
docs-text-large-1 md:docs-text-large-2 xl:docs-text-large-3
22+
'>
23+
{{byline}}
24+
</p>
2125

22-
{{yield}}
26+
<div class="docs-mt-8">
27+
{{#link-to 'docs' class='
28+
docs-no-underline docs-bg-white docs-text-brand docs-text-xs docs-px-3 docs-py-2
29+
docs-rounded docs-mt-4 docs-shadow-md hover:docs-shadow-lg
30+
docs-transition hover:docs-nudge-t docs-font-bold docs-inline-block docs-uppercase
31+
'}}
32+
Read the docs
33+
{{/link-to}}
34+
</div>
35+
36+
{{yield}}
37+
</div>
2338
</div>

‎addon/components/docs-snippet/template.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{{#if title}}
2-
<div class='docs-bg-grey-lighter docs-text-sm docs-text-grey-darkest
2+
<div class='docs-bg-grey-lighter docs-text-xs docs-text-grey-darkest
33
docs-font-medium docs-py-2 docs-px-4'>
44
{{title}}
55
</div>
66
{{/if}}
77

8-
<div class='docs-text-sm docs-p-4 docs-bg-grey-lightest docs-relative' data-test-id={{name}}>
8+
<div class='docs-text-xs docs-p-4 docs-bg-grey-lightest docs-relative' data-test-id={{name}}>
99
{{#if showCopy}}
1010
{{#copy-button
1111
clipboardText=snippetText

0 commit comments

Comments
 (0)