Merge branch 'develop' into ICU-62-add-radiobuttons
This commit is contained in:
21 files changed
+2514
-772
No files matched your search
@@ -1,9 +1,11 @@
|
||||
module.exports = {
|
||||
stories: ['../stories/**/*.stories.js'],
|
||||
stories: [
|
||||
'../addon/components/**/*.stories.(js|mdx)',
|
||||
'../stories/**/*.stories.mdx',
|
||||
],
|
||||
addons: [
|
||||
'@storybook/addon-knobs',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-storysource'
|
||||
'@storybook/addon-docs',
|
||||
]
|
||||
};
|
||||
@@ -70,7 +70,7 @@ Before submitting your work, be sure to run auto-formatters
|
||||
|
||||
To build a new component, start by generating it on the command line with
|
||||
`ember g component rose/component-name`. Then manually add a Storybook story in
|
||||
`stories/component-name.stories.js`. Use the Storybook UI during component
|
||||
`component-name.stories.mdx`. Use the Storybook UI during component
|
||||
development (see Yarn commands).
|
||||
|
||||
## Running tests
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Rose|Button" component="Button" />
|
||||
|
||||
# Button
|
||||
|
||||
A simple button component that renders an HTML `<button>` element. May be used
|
||||
to trigger actions or to submit forms. Avoid using buttons as simple links to
|
||||
other routes. For accessibility, use links instead.
|
||||
|
||||
```htmlbars
|
||||
<Rose::Button @style="primary" @iconRight="chevron-right">
|
||||
Action
|
||||
</Rose::Button>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Story name="Advanced">{{
|
||||
template: hbs`
|
||||
<Rose::Button
|
||||
@submit={{submit}}
|
||||
@disabled={{disabled}}
|
||||
@style={{style}}
|
||||
@iconLeft={{iconLeft}}
|
||||
@iconRight={{iconRight}}
|
||||
{{on "click" onClick}}
|
||||
>
|
||||
{{text}}
|
||||
</Rose::Button>
|
||||
`,
|
||||
context: {
|
||||
text: text('text', 'Action'),
|
||||
submit: boolean('submit', true),
|
||||
disabled: boolean('disabled', false),
|
||||
style: select(
|
||||
'style',
|
||||
{
|
||||
primary: 'primary',
|
||||
secondary: 'secondary',
|
||||
warning: 'warning',
|
||||
ghost: 'ghost',
|
||||
'inline-link-action': 'inline-link-action',
|
||||
},
|
||||
'primary'
|
||||
),
|
||||
iconLeft: select(
|
||||
'iconLeft',
|
||||
{
|
||||
'check-circle-outline': 'check-circle-outline',
|
||||
'copy-action': 'copy-action',
|
||||
'unfold-more': 'unfold-more',
|
||||
'unfold-less': 'unfold-less',
|
||||
},
|
||||
'check-circle-outline'
|
||||
),
|
||||
iconRight: select(
|
||||
'iconRight',
|
||||
{
|
||||
'check-circle-outline': 'check-circle-outline',
|
||||
'copy-action': 'chevron-right',
|
||||
'copy-action': 'copy-action',
|
||||
'unfold-more': 'unfold-more',
|
||||
'unfold-less': 'unfold-less',
|
||||
},
|
||||
'chevron-right'
|
||||
),
|
||||
onClick: action('clicked'),
|
||||
},
|
||||
}}</Story>
|
||||
</Preview>
|
||||
|
||||
Buttons may show only an icon. You should still pass block content into the
|
||||
button in this case for accessibility.
|
||||
|
||||
<Preview>
|
||||
<Story name="Icon Only">{{
|
||||
template: hbs`
|
||||
<Rose::Button @style="secondary" @iconOnly={{iconOnly}}>
|
||||
Icon Only
|
||||
</Rose::Button>
|
||||
`,
|
||||
context: {
|
||||
iconOnly: select(
|
||||
'iconOnly',
|
||||
{
|
||||
'check-circle-outline': 'check-circle-outline',
|
||||
'copy-action': 'copy-action',
|
||||
'unfold-more': 'unfold-more',
|
||||
'unfold-less': 'unfold-less',
|
||||
},
|
||||
'check-circle-outline'
|
||||
),
|
||||
},
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Rose|Form/Checkbox" component="Form/Checkbox" />
|
||||
|
||||
# Form Checkobx
|
||||
|
||||
Renders a form input checkbox.
|
||||
|
||||
```htmlbars
|
||||
<Rose::Form::Checkbox
|
||||
@id="form-field-1"
|
||||
name="boolean-value"
|
||||
@label="Yes?"
|
||||
@checked={{false}}
|
||||
@error={{false}}
|
||||
disabled={{false}}
|
||||
/>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Story name="Basic" height="10rem">{{
|
||||
template: hbs`
|
||||
<Rose::Form::Checkbox
|
||||
@id={{id}}
|
||||
name={{name}}
|
||||
@label={{label}}
|
||||
@checked={{checked}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
label: text('text', 'Checkbox 🛎'),
|
||||
id: text('id', 'checkbox-1'),
|
||||
name: text('name', 'checkbox-1'),
|
||||
checked: boolean('checked', false),
|
||||
error: boolean('error', false),
|
||||
disabled: boolean('disabled', false),
|
||||
}
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -0,0 +1,56 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Rose|Form/Input" component="Form/Input" />
|
||||
|
||||
# Form Input
|
||||
|
||||
Renders a simple form input.
|
||||
|
||||
```htmlbars
|
||||
<Rose::Form::Input
|
||||
@type="email"
|
||||
@value="info@example.com"
|
||||
@label="Email"
|
||||
@helperText="Enter your email"
|
||||
@error={{false}}
|
||||
disabled={{false}}
|
||||
readonly={{false}}
|
||||
/>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Story name="Basic">{{
|
||||
template: hbs`
|
||||
<Rose::Form::Input
|
||||
@type={{type}}
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
readonly={{read-only}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
type: select(
|
||||
'type',
|
||||
{
|
||||
text: 'text',
|
||||
email: 'email',
|
||||
number: 'number',
|
||||
password: 'password',
|
||||
},
|
||||
'text'
|
||||
),
|
||||
value: text('value', 'Value'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
'read-only': boolean('readonly', false),
|
||||
error: boolean('error', false),
|
||||
}
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -0,0 +1,67 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Rose|Form/Select" component="Form/Select" />
|
||||
|
||||
# Form Select
|
||||
|
||||
Renders a form select element.
|
||||
|
||||
```htmlbars
|
||||
<Rose::Form::Select
|
||||
@id="select-id"
|
||||
@value="green"
|
||||
@label="Color"
|
||||
@helperText="Set your desired color"
|
||||
disabled={{false}}
|
||||
@error={{false}}
|
||||
as |select|
|
||||
>
|
||||
<select.option>Choose a color</select.option>
|
||||
<select.option @value="red">Red</select.option>
|
||||
<select.option @value="green">Green</select.option>
|
||||
<select.option @value="blue">Blue</select.option>
|
||||
</Rose::Form::Select>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Story name="Basic" height="10rem">{{
|
||||
template: hbs`
|
||||
<Rose::Form::Select
|
||||
@id={{id}}
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
disabled={{disabled}}
|
||||
@error={{error}}
|
||||
@onChange={{fn onChange}}
|
||||
as |select|
|
||||
>
|
||||
<select.option>Choose an option</select.option>
|
||||
<select.option @value="value-1">Value 1</select.option>
|
||||
<select.option @value="value-2">Value 2</select.option>
|
||||
<select.option @value="value-3">Value 3</select.option>
|
||||
</Rose::Form::Select>
|
||||
`,
|
||||
context: {
|
||||
value: select(
|
||||
'value',
|
||||
{
|
||||
null: null,
|
||||
'value-1': 'value-1',
|
||||
'value-2': 'value-2',
|
||||
'value-3': 'value-3',
|
||||
},
|
||||
null
|
||||
),
|
||||
id: text('id', 'field-id'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
error: boolean('error', false),
|
||||
onChange: action('changed'),
|
||||
}
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -0,0 +1,44 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Rose|Form/Textarea" component="Form/Textarea" />
|
||||
|
||||
# Form Textarea
|
||||
|
||||
Renders a simple form textarea.
|
||||
|
||||
```htmlbars
|
||||
<Rose::Form::Textarea
|
||||
@value="Descriptive content"
|
||||
@label="Description"
|
||||
@helperText="Enter a description"
|
||||
@error={{false}}
|
||||
disabled={{false}}
|
||||
readonly={{false}}
|
||||
/>
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Story name="Basic" height="10rem">{{
|
||||
template: hbs`
|
||||
<Rose::Form::Textarea
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
readonly={{read-only}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
value: text('value', 'Value'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
'read-only': boolean('readonly', false),
|
||||
error: boolean('error', false),
|
||||
}
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -0,0 +1,36 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Rose|Icon" component="Icon" />
|
||||
|
||||
# Icon
|
||||
|
||||
Renders a simple icon from [Structure Icons][structure-icons].
|
||||
|
||||
[structure-icons]: https://github.com/hashicorp/structure-icons
|
||||
|
||||
```htmlbars
|
||||
<Rose::Icon @name={{name}} @size={{size}} />
|
||||
```
|
||||
|
||||
<Preview>
|
||||
<Story name="Basic">{{
|
||||
template: hbs`
|
||||
<Rose::Icon @name={{name}} @size={{size}} />
|
||||
`,
|
||||
context: {
|
||||
name: select(
|
||||
'name',
|
||||
{
|
||||
'check-circle-outline': 'check-circle-outline',
|
||||
'copy-action': 'copy-action',
|
||||
'unfold-more': 'unfold-more',
|
||||
'unfold-less': 'unfold-less',
|
||||
},
|
||||
'check-circle-outline'
|
||||
),
|
||||
}
|
||||
}}</Story>
|
||||
</Preview>
|
||||
@@ -1 +1,35 @@
|
||||
@import 'rose';
|
||||
|
||||
.swatches {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.swatch {
|
||||
width: 9rem;
|
||||
//border: 1px solid var(--ui-gray-subtler-4);
|
||||
border-radius: 4px;
|
||||
margin: 0 0.5rem 0.5rem 0 !important;
|
||||
box-shadow: 0px 3px 6px rgba(var(--stark-components), var(--opacity-3));
|
||||
|
||||
code {
|
||||
display: block !important;
|
||||
font-size: 0.65rem !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
overflow-x: scroll !important;
|
||||
color: var(--ui-gray) !important;
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
.swatch-chip {
|
||||
height: 5rem;
|
||||
border: 0.5rem solid var(--subtle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.swatch-detail {
|
||||
border-top: 1px solid var(--ui-gray-subtler-4);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
@@ -36,9 +36,8 @@
|
||||
"@glimmer/tracking": "^1.0.0",
|
||||
"@hashicorp/structure-icons": "^1.8.1",
|
||||
"@storybook/addon-actions": "^5.3.18",
|
||||
"@storybook/addon-docs": "^5.3.18",
|
||||
"@storybook/addon-knobs": "^5.3.18",
|
||||
"@storybook/addon-links": "^5.3.18",
|
||||
"@storybook/addon-storysource": "^5.3.18",
|
||||
"@storybook/ember": "^5.3.18",
|
||||
"@storybook/ember-cli-storybook": "^0.2.1",
|
||||
"babel-eslint": "^10.0.3",
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Rose::Button',
|
||||
};
|
||||
|
||||
const icons = {
|
||||
none: null,
|
||||
'alert-circle-fill': 'alert-circle-fill',
|
||||
'chevron-right': 'chevron-right',
|
||||
'copy-action': 'copy-action',
|
||||
'lock-closed': 'lock-closed',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Button
|
||||
@submit={{submit}}
|
||||
@disabled={{disabled}}
|
||||
@style={{style}}
|
||||
@iconLeft={{iconLeft}}
|
||||
@iconRight={{iconRight}}
|
||||
{{on "click" onClick}}
|
||||
>
|
||||
{{text}}
|
||||
</Rose::Button>
|
||||
`,
|
||||
context: {
|
||||
text: text('text', 'Button'),
|
||||
submit: boolean('submit', false),
|
||||
disabled: boolean('disabled', false),
|
||||
style: select(
|
||||
'style',
|
||||
{
|
||||
primary: 'primary',
|
||||
secondary: 'secondary',
|
||||
warning: 'warning',
|
||||
ghost: 'ghost',
|
||||
'inline-link-action': 'inline-link-action',
|
||||
},
|
||||
'primary'
|
||||
),
|
||||
iconLeft: select('iconLeft', icons, 'copy-action'),
|
||||
iconRight: select('iconRight', icons, 'chevron-right'),
|
||||
onClick: action('clicked'),
|
||||
},
|
||||
});
|
||||
|
||||
export const IconOnly = () => ({
|
||||
template: hbs`
|
||||
<p>Icon-only buttons visually hide their text, revealing just an icon.
|
||||
It's still important to include meaningful text in the body of the
|
||||
button for accessibility purposes.</p>
|
||||
|
||||
<Rose::Button
|
||||
@style="secondary"
|
||||
@iconOnly={{iconOnly}}
|
||||
>
|
||||
{{text}}
|
||||
</Rose::Button>
|
||||
`,
|
||||
context: {
|
||||
text: text('text', 'Button'),
|
||||
iconOnly: select('iconOnly', icons, 'lock-closed'),
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,341 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Style Guide|Colors" />
|
||||
|
||||
# Colors
|
||||
|
||||
Colors are available using CSS custom properties. Find the color swatch you
|
||||
need and copy the CSS custom property variable into your stylesheet.
|
||||
Use only these properties when specifying colors instead of absolute SCSS color
|
||||
variables. This ensures consistency and dark mode compatibility.
|
||||
|
||||
**Tip**: Try it out in dark mode. Set your system to dark mode to see these
|
||||
swatches in a different light.
|
||||
|
||||
For example...
|
||||
```css
|
||||
.my-component {
|
||||
color: var(--stark);
|
||||
background-color: var(--subtle);
|
||||
}
|
||||
```
|
||||
|
||||
## Relative Poles
|
||||
|
||||
These colors depend on light or dark mode. Use these most often
|
||||
when specifying primary foreground and background colors.
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--subtle)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--subtle</code>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--stark)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--stark</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Absolute Poles
|
||||
|
||||
Some colors don't change in dark vs light mode. Use these values sparingly.
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--white)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--white</code>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--black)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--black</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
## Theme Colors
|
||||
|
||||
### Info
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-3)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-subtler-3</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--info-starker-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--info-starker-2</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Alert
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--alert-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--alert-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--alert-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--alert-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--alert)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--alert</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--alert-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--alert-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Warning
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--warning-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--warning-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--warning-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--warning-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--warning)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--warning</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--warning-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--warning-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Failure
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--failure-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--failure-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--failure-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--failure-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--failure)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--failure</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--failure-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--failure-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Success
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--success-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--success-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--success-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--success-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--success)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--success</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--success-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--success-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### Action
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--action-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--action-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--action-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--action-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--action)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--action</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--action-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--action-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### UI Border
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-border-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-border-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-border)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-border</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
### UI Border
|
||||
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-6)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-6</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-5)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-5</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-4)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-4</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-3)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-3</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-subtler-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-subtler-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-1)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-starker-1</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-2)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-starker-2</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-3)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-starker-3</code>
|
||||
</div>
|
||||
</li>
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style={{backgroundColor: "var(--ui-gray-starker-4)"}}></div>
|
||||
<div class="swatch-detail">
|
||||
<code>--ui-gray-starker-4</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -1,27 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { text, boolean } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Rose::Form::Checkbox',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Checkbox
|
||||
@id={{id}}
|
||||
name={{name}}
|
||||
@label={{label}}
|
||||
@checked={{checked}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
label: text('text', 'Checkbox 🛎'),
|
||||
id: text('id', 'checkbox-1'),
|
||||
name: text('name', 'checkbox-1'),
|
||||
checked: boolean('checked', false),
|
||||
error: boolean('error', false),
|
||||
disabled: boolean('disabled', false),
|
||||
},
|
||||
});
|
||||
@@ -1,38 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Rose::Form::Input',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Input
|
||||
@type={{type}}
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
readonly={{read-only}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
type: select(
|
||||
'type',
|
||||
{
|
||||
text: 'text',
|
||||
email: 'email',
|
||||
number: 'number',
|
||||
password: 'password',
|
||||
},
|
||||
'text'
|
||||
),
|
||||
value: text('value', 'Value'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
'read-only': boolean('readonly', false),
|
||||
error: boolean('error', false),
|
||||
},
|
||||
});
|
||||
@@ -1,45 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Rose::Form::Select',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Select
|
||||
@id={{id}}
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
disabled={{disabled}}
|
||||
@error={{error}}
|
||||
@onChange={{fn onChange}}
|
||||
as |select|
|
||||
>
|
||||
<select.option>Choose an option</select.option>
|
||||
<select.option @value="value-1">Value 1</select.option>
|
||||
<select.option @value="value-2">Value 2</select.option>
|
||||
<select.option @value="value-3">Value 3</select.option>
|
||||
</Rose::Form::Select>
|
||||
`,
|
||||
context: {
|
||||
value: select(
|
||||
'value',
|
||||
{
|
||||
null: null,
|
||||
'value-1': 'value-1',
|
||||
'value-2': 'value-2',
|
||||
'value-3': 'value-3',
|
||||
},
|
||||
null
|
||||
),
|
||||
id: text('id', 'field-id'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
error: boolean('error', false),
|
||||
onChange: action('changed'),
|
||||
},
|
||||
});
|
||||
@@ -1,27 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { text, boolean } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Rose::Form::Textarea',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Form::Textarea
|
||||
@value={{value}}
|
||||
@label={{label}}
|
||||
@helperText={{helperText}}
|
||||
@error={{error}}
|
||||
disabled={{disabled}}
|
||||
readonly={{read-only}}
|
||||
/>
|
||||
`,
|
||||
context: {
|
||||
value: text('value', 'Value'),
|
||||
label: text('label', 'Label'),
|
||||
helperText: text('helperText', 'Helper text'),
|
||||
disabled: boolean('disabled', false),
|
||||
'read-only': boolean('readonly', false),
|
||||
error: boolean('error', false),
|
||||
},
|
||||
});
|
||||
@@ -1,39 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
|
||||
export default {
|
||||
title: 'Rose::Icon',
|
||||
};
|
||||
|
||||
export const Normal = () => ({
|
||||
template: hbs`
|
||||
<Rose::Icon @name={{name}} @size={{size}} />
|
||||
|
||||
<br>
|
||||
|
||||
<p>For a full list of available icons, review the <code>dist</code> folder
|
||||
of the <code>@hashicorp/structure-icons</code> package.</p>
|
||||
`,
|
||||
context: {
|
||||
name: select(
|
||||
'name',
|
||||
{
|
||||
'check-circle-outline': 'check-circle-outline',
|
||||
'copy-action': 'copy-action',
|
||||
'unfold-more': 'unfold-more',
|
||||
'unfold-less': 'unfold-less',
|
||||
},
|
||||
'check-circle-outline'
|
||||
),
|
||||
|
||||
size: select(
|
||||
'size',
|
||||
{
|
||||
'large (24px / default)': 'large',
|
||||
'medium (16px)': 'medium',
|
||||
'small (12px)': 'small',
|
||||
},
|
||||
'large'
|
||||
),
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,93 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Style Guide|Sizing" />
|
||||
|
||||
# Sizing
|
||||
|
||||
Use sizing function for things like margins,
|
||||
padding, and borders. Sizes are returned in rem units rather than
|
||||
pixels, but have been calibrated with pixel equivalents in mind.
|
||||
|
||||
To use the rems sizing function, first import the sizing module,
|
||||
then use it in your code wherever you normally specify a size. For example...
|
||||
|
||||
```scss
|
||||
@import "variables/sizing";
|
||||
border: sizing.rems(xxxxs) solid;
|
||||
```
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="column">Name</th>
|
||||
<th scope="column" class="number-col">PX Equiv.</th>
|
||||
<th scope="column">SCSS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>xxl</code></th>
|
||||
<td class="number-col">48</td>
|
||||
<td><code>sizing.rems(xxl)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>xl</code></th>
|
||||
<td class="number-col">36</td>
|
||||
<td><code>sizing.rems(xl)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>l</code></th>
|
||||
<td class="number-col">24</td>
|
||||
<td><code>sizing.rems(l)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>m</code></th>
|
||||
<td class="number-col">16</td>
|
||||
<td><code>sizing.rems(m)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>s</code></th>
|
||||
<td class="number-col">12</td>
|
||||
<td><code>sizing.rems(s)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>xs</code></th>
|
||||
<td class="number-col">8</td>
|
||||
<td><code>sizing.rems(xs)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>off-xs</code></th>
|
||||
<td class="number-col">5</td>
|
||||
<td><code>sizing.rems(off-xs)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>xxs</code></th>
|
||||
<td class="number-col">4</td>
|
||||
<td><code>sizing.rems(xxs)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>xxxs</code></th>
|
||||
<td class="number-col">2</td>
|
||||
<td><code>sizing.rems(xxxs)</code></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row"><code>xxxxs</code></th>
|
||||
<td class="number-col">1</td>
|
||||
<td><code>sizing.rems(xxxxs)</code></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -1,442 +0,0 @@
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
|
||||
export default {
|
||||
title: 'Style Guide',
|
||||
};
|
||||
|
||||
export const Colors = () => ({
|
||||
template: hbs`
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding: 2rem;
|
||||
color: var(--stark);
|
||||
background-color: var(--subtle);
|
||||
}
|
||||
p {
|
||||
max-width: 725px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
code {
|
||||
display: block;
|
||||
font-size: 0.55rem;
|
||||
max-width: 100%;
|
||||
overflow-x: scroll;
|
||||
color: var(--ui-gray);
|
||||
}
|
||||
.side-by-side {
|
||||
display: flex;
|
||||
}
|
||||
section {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.swatches {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.swatch {
|
||||
width: 6rem;
|
||||
//border: 1px solid var(--ui-gray-subtler-4);
|
||||
border-radius: 4px;
|
||||
margin: 0 0.5rem 0.5rem 0;
|
||||
box-shadow: 0px 3px 6px rgba(var(--stark-components), var(--opacity-3));
|
||||
}
|
||||
.swatch-chip {
|
||||
height: 5rem;
|
||||
border: 0.5rem solid var(--subtle);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.swatch-detail {
|
||||
border-top: 1px solid var(--ui-gray-subtler-4);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<section>
|
||||
<h1>Colors</h1>
|
||||
<p>
|
||||
Find the color you need and copy the CSS custom property variable into
|
||||
your stylesheet.
|
||||
Use only these variables when specifying colors. This ensures
|
||||
consistency and dark mode compatibility.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="side-by-side">
|
||||
<section>
|
||||
<h2>Relative Poles</h2>
|
||||
<p>
|
||||
These colors depend on light or dark mode. Use these most often
|
||||
when specifying primary foreground and backround colors.
|
||||
</p>
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--subtle);"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--subtle)</code>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--stark);"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--stark)</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Absolute Colors</h2>
|
||||
<p>
|
||||
Colors sometimes <strong>don't change in dark mode</strong>. Use these
|
||||
values sparingly.
|
||||
</p>
|
||||
<ul class="swatches">
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--white);"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--white)</code>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--black);"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--black)</code>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>Theme Colors</h2>
|
||||
<h3>Info</h3>
|
||||
<ul class="swatches">
|
||||
{{#each colors.info as |color|}}
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--{{color}})</code>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</section>
|
||||
<div class="side-by-side">
|
||||
<section>
|
||||
<h3>Alert</h3>
|
||||
<ul class="swatches">
|
||||
{{#each colors.alert as |color|}}
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--{{color}})</code>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Warning</h3>
|
||||
<ul class="swatches">
|
||||
{{#each colors.warning as |color|}}
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--{{color}})</code>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="side-by-side">
|
||||
<section>
|
||||
<h3>Failure</h3>
|
||||
<ul class="swatches">
|
||||
{{#each colors.failure as |color|}}
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--{{color}})</code>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Success</h3>
|
||||
<ul class="swatches">
|
||||
{{#each colors.success as |color|}}
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--{{color}})</code>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<section>
|
||||
<h3>UI Border</h3>
|
||||
<ul class="swatches">
|
||||
{{#each colors.ui-border as |color|}}
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--{{color}})</code>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
<h3>UI Gray</h3>
|
||||
<ul class="swatches">
|
||||
{{#each colors.ui-gray as |color|}}
|
||||
<li class="swatch">
|
||||
<div class="swatch-chip" style="background-color: var(--{{color}});"></div>
|
||||
<div class="swatch-detail">
|
||||
<code>var(--{{color}})</code>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</section>
|
||||
`,
|
||||
context: {
|
||||
colors: {
|
||||
relative: ['subtle', 'stark'],
|
||||
absolute: ['white', 'black'],
|
||||
info: [
|
||||
'info-subtler-3',
|
||||
'info-subtler-2',
|
||||
'info-subtler-1',
|
||||
'info',
|
||||
'info-starker-1',
|
||||
'info-starker-2',
|
||||
],
|
||||
alert: ['alert-subtler-2', 'alert-subtler-1', 'alert', 'alert-starker-1'],
|
||||
warning: [
|
||||
'warning-subtler-2',
|
||||
'warning-subtler-1',
|
||||
'warning',
|
||||
'warning-starker-1',
|
||||
],
|
||||
failure: [
|
||||
'failure-subtler-2',
|
||||
'failure-subtler-1',
|
||||
'failure',
|
||||
'failure-starker-1',
|
||||
],
|
||||
success: [
|
||||
'success-subtler-2',
|
||||
'success-subtler-1',
|
||||
'success',
|
||||
'success-starker-1',
|
||||
],
|
||||
'ui-border': ['ui-border-subtler-1', 'ui-border'],
|
||||
'ui-gray': [
|
||||
'ui-gray-subtler-6',
|
||||
'ui-gray-subtler-5',
|
||||
'ui-gray-subtler-4',
|
||||
'ui-gray-subtler-3',
|
||||
'ui-gray-subtler-2',
|
||||
'ui-gray-subtler-1',
|
||||
'ui-gray',
|
||||
'ui-gray-starker-1',
|
||||
'ui-gray-starker-2',
|
||||
'ui-gray-starker-3',
|
||||
'ui-gray-starker-4',
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const Sizing = () => ({
|
||||
template: hbs`
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding: 2rem;
|
||||
color: var(--stark);
|
||||
background-color: var(--subtle);
|
||||
}
|
||||
p {
|
||||
max-width: 725px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
pre {
|
||||
color: #333;
|
||||
background-color: #EEE;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid #EEE;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 3rem 0.5rem 0.25rem;
|
||||
text-align: left;
|
||||
}
|
||||
.number-col {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
<section>
|
||||
<h1>Sizing</h1>
|
||||
<p>
|
||||
Use sizing function for things like margins,
|
||||
padding, and borders. Sizes are returned in rem units rather than
|
||||
pixels, but have been calibrated with pixel equivalents in mind.
|
||||
</p>
|
||||
<p>
|
||||
To use the rems sizing function, first import the sizing module,
|
||||
then use it in your code wherever you normally specify a size:
|
||||
</p>
|
||||
<pre>
|
||||
@import "variables/sizing";
|
||||
border: sizing.rems(xxxxs) solid;</pre>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="column">Name</th>
|
||||
<th scope="column" class="number-col">PX Equiv.</th>
|
||||
<th scope="column">SCSS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each sizes as |size|}}
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>{{size.code}}</code>
|
||||
</th>
|
||||
<td class="number-col">{{size.pixels}}</td>
|
||||
<td>
|
||||
<code>sizing.rems({{size.code}})</code>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
`,
|
||||
context: {
|
||||
sizes: [
|
||||
{ code: 'xxl', pixels: 48 },
|
||||
{ code: 'xl', pixels: 36 },
|
||||
{ code: 'l', pixels: 24 },
|
||||
{ code: 'm', pixels: 16, isBase: true },
|
||||
{ code: 's', pixels: 12 },
|
||||
{ code: 'xs', pixels: 8 },
|
||||
{ code: 'off-xs', pixels: 5 },
|
||||
{ code: 'xxs', pixels: 4 },
|
||||
{ code: 'xxxs', pixels: 2 },
|
||||
{ code: 'xxxxs', pixels: 1 },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
export const Typography = () => ({
|
||||
template: hbs`
|
||||
<style type="text/css">
|
||||
body {
|
||||
padding: 2rem;
|
||||
color: var(--stark);
|
||||
background-color: var(--subtle);
|
||||
}
|
||||
p {
|
||||
max-width: 725px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
pre {
|
||||
color: #333;
|
||||
background-color: #EEE;
|
||||
padding: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
thead {
|
||||
font-weight: bold;
|
||||
}
|
||||
tr {
|
||||
border-bottom: 1px solid #EEE;
|
||||
}
|
||||
th,
|
||||
td {
|
||||
padding: 0.5rem 3rem 0.5rem 0.25rem;
|
||||
text-align: left;
|
||||
}
|
||||
.number-col {
|
||||
text-align: right;
|
||||
}
|
||||
hr {
|
||||
margin: 1rem;
|
||||
border: 0.25px solid #DDD;
|
||||
background: none;
|
||||
}
|
||||
</style>
|
||||
<section>
|
||||
<h1>Typography</h1>
|
||||
<p>
|
||||
Paragraphs and headings are preconfigured for typography and margin.
|
||||
</p>
|
||||
<p>
|
||||
To specify custom typography, use the SCSS variables and mixin.
|
||||
The <code>type</code> mixin accepts two parameters: a font size name
|
||||
(required) and an optional font weight name (normal, semibold, bold).
|
||||
This mixin sets both font size and line height, and optionally weight.
|
||||
</p>
|
||||
<pre>
|
||||
@import "utilities/type";
|
||||
.my-component {
|
||||
@include type.type(m, bold);
|
||||
}</pre>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="column">Name</th>
|
||||
<th scope="column" class="number-col">Font Size</th>
|
||||
<th scope="column">SCSS</th>
|
||||
<th scope="column">Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each sizes as |size|}}
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>{{size.code}}</code>
|
||||
</th>
|
||||
<td class="number-col">{{size.pixels}}</td>
|
||||
<td>
|
||||
<code>@include type.type({{size.code}});</code>
|
||||
</td>
|
||||
<td>
|
||||
{{size.note}}
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
`,
|
||||
context: {
|
||||
sizes: [
|
||||
{ code: 'xl', pixels: 28 },
|
||||
{ code: 'l', pixels: 20 },
|
||||
{ code: 'm', pixels: 16 },
|
||||
{ code: 's', pixels: 14 },
|
||||
{ code: 'xs', pixels: 12 },
|
||||
{
|
||||
code: 'h1',
|
||||
pixels: 28,
|
||||
note: 'Same as xl, but different line height.',
|
||||
},
|
||||
{ code: 'h2', pixels: 20, note: 'Same as l, but different line height.' },
|
||||
{ code: 'h3', pixels: 16, note: 'Same as m, but different line height.' },
|
||||
{ code: 'button', pixels: 13 },
|
||||
],
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,149 @@
|
||||
import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { hbs } from 'ember-cli-htmlbars';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { text, boolean, select } from '@storybook/addon-knobs';
|
||||
|
||||
<Meta title="Style Guide|Typography" />
|
||||
|
||||
# Typography
|
||||
|
||||
To specify custom typography, use the SCSS mixin.
|
||||
The <code>type</code> mixin accepts two parameters: a font size name
|
||||
(required) and an optional font weight name (normal, semibold, bold).
|
||||
This mixin sets both font size and line height, and optionally weight.
|
||||
|
||||
For example...
|
||||
|
||||
```scss
|
||||
@import "utilities/type";
|
||||
.my-component {
|
||||
@include type.type(m, bold);
|
||||
}
|
||||
```
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="column">Name</th>
|
||||
<th scope="column" class="number-col">Font Size</th>
|
||||
<th scope="column">SCSS</th>
|
||||
<th scope="column">Note</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>xl</code>
|
||||
</th>
|
||||
<td class="number-col">28</td>
|
||||
<td>
|
||||
<code>@include type.type(xl);</code>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>l</code>
|
||||
</th>
|
||||
<td class="number-col">20</td>
|
||||
<td>
|
||||
<code>@include type.type(l);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>m</code>
|
||||
</th>
|
||||
<td class="number-col">16</td>
|
||||
<td>
|
||||
<code>@include type.type(m);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>s</code>
|
||||
</th>
|
||||
<td class="number-col">14</td>
|
||||
<td>
|
||||
<code>@include type.type(s);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>xs</code>
|
||||
</th>
|
||||
<td class="number-col">12</td>
|
||||
<td>
|
||||
<code>@include type.type(xs);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>h1</code>
|
||||
</th>
|
||||
<td class="number-col">28</td>
|
||||
<td>
|
||||
<code>@include type.type(h1);</code>
|
||||
</td>
|
||||
<td>
|
||||
Same as xl, but different line height.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>h2</code>
|
||||
</th>
|
||||
<td class="number-col">20</td>
|
||||
<td>
|
||||
<code>@include type.type(h2);</code>
|
||||
</td>
|
||||
<td>
|
||||
Same as l, but different line height.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>h3</code>
|
||||
</th>
|
||||
<td class="number-col">16</td>
|
||||
<td>
|
||||
<code>@include type.type(h3);</code>
|
||||
</td>
|
||||
<td>
|
||||
Same as m, but different line height.
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th scope="row">
|
||||
<code>button</code>
|
||||
</th>
|
||||
<td class="number-col">13</td>
|
||||
<td>
|
||||
<code>@include type.type(button);</code>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
Reference in new issue
Block a user