CyberCoveLLC/threshold-ui
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Icu 10582 retire storybook (#1849)

Browse Source 
* refactor: 💡 retire storybook
This commit is contained in:
Dharini Jeeva authored and GitHub committed 2023-08-17 09:37:39 -07:00
1 parent 9e515d7a3a
commit 8a0f5fbe9f
57 files changed
+290 -7964
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/.eslintignore
-1
View File
@@ -5,7 +5,6 @@
# compiled output
/dist/
/tmp/
/storybook-static/
# dependencies
/bower_components/
addons/rose/.storybook/main.js
-29
View File
@@ -1,29 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
const namedBlockPolyfill = require('ember-named-blocks-polyfill/lib/named-blocks-polyfill-plugin');
module.exports = {
framework: {
name: '@storybook/ember',
options: {
polyfills: [namedBlockPolyfill],
},
},
stories: [
'../addon/components/**/*.stories.@(js|mdx)',
'../stories/**/*.stories.mdx',
],
addons: [
'@storybook/addon-docs',
'@storybook/addon-a11y',
'@storybook/addon-actions',
'@storybook/addon-controls',
],
features: {
postcss: false,
},
staticDirs: ['../dist'],
};
addons/rose/.storybook/preview.js
-12
View File
@@ -1,12 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import handlebars from 'react-syntax-highlighter/dist/esm/languages/prism/handlebars';
import scss from 'react-syntax-highlighter/dist/esm/languages/prism/scss';
// Registers and enables language support
SyntaxHighlighter.registerLanguage('handlebars', handlebars);
SyntaxHighlighter.registerLanguage('scss', scss);
addons/rose/README.md
+38 -40
View File
@@ -5,7 +5,8 @@ Boundary UIs.
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](https://github.com/thlorenz/doctoc)*
**Table of Contents** _generated with [DocToc](https://github.com/thlorenz/doctoc)_
- [Add Styles to an App](#add-styles-to-an-app)
- [Installation](#installation)
@@ -24,7 +25,7 @@ Boundary UIs.
## Add Styles to an App
Add this addon to an Ember application's `devDependencies` as:
`"rose": "*"`, for applications included in this monorepo. Application's
`"rose": "*"`, for applications included in this monorepo. Application's
may then import rose styles by adding `@import 'rose';` to their stylesheets.
## Installation
@@ -33,70 +34,67 @@ See monorepo README for installation instructions.
## Yarn Commands
List of available project commands. `yarn run <command-name>`
List of available project commands. `yarn run <command-name>`
| Command | Description |
| ------- | ----------- |
| build:development | Builds the dummy app in development mode. |
| build | Builds the dummy app for production. |
| lint | Runs all lint commands. |
| lint:fix | Runs automatic lint fixes for all files. |
| lint:hbs | Lints template `hbs` files. |
| lint:hbs:fix | Runs automatic lint fixes for `hbs` files. |
| lint:js | Lints `js` files. |
| lint:js:fix | Runs automatic lint fixes for `js` files. |
| lint:sass | Lints `scss` files. |
| format | Runs all auto-formatters. |
| format:js | Auto-formats `js` files using Prettier. |
| format:hbs | Auto-formats `hbs` files using Prettier. |
| format:sass | Auto-formats `scss` files using Prettier. |
| start | Runs the dummy app local server. |
| storybook | Runs the Storybook local server on port 6006. Be sure to start the standard server (see above) in a separate terminal. |
| test | Runs all tests. |
| test:ember-compatibility | Runs tests across multiple Ember versions with ember-try. |
| precommit | Runs all lint, format and tests. |
| doc:toc | Automatically generates a table of contents for this README file. |
| Command | Description |
| ------------------------ | ----------------------------------------------------------------- |
| build:development | Builds the dummy app in development mode. |
| build | Builds the dummy app for production. |
| lint | Runs all lint commands. |
| lint:fix | Runs automatic lint fixes for all files. |
| lint:hbs | Lints template `hbs` files. |
| lint:hbs:fix | Runs automatic lint fixes for `hbs` files. |
| lint:js | Lints `js` files. |
| lint:js:fix | Runs automatic lint fixes for `js` files. |
| lint:sass | Lints `scss` files. |
| format | Runs all auto-formatters. |
| format:js | Auto-formats `js` files using Prettier. |
| format:hbs | Auto-formats `hbs` files using Prettier. |
| format:sass | Auto-formats `scss` files using Prettier. |
| start | Runs the dummy app local server. |
| test | Runs all tests. |
| test:ember-compatibility | Runs tests across multiple Ember versions with ember-try. |
| precommit | Runs all lint, format and tests. |
| doc:toc | Automatically generates a table of contents for this README file. |
Additional commands in the monorepo package may affect this projects.
## Linting
* `yarn lint:hbs`
* `yarn lint:js`
* `yarn lint:js --fix`
- `yarn lint:hbs`
- `yarn lint:js`
- `yarn lint:js --fix`
## Formatting
Before submitting your work, be sure to run auto-formatters
(see commands above). This helps to ensure consistency among authors.
(see commands above). This helps to ensure consistency among authors.
* `yarn format`
- `yarn format`
## Building Components
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
`component-name.stories.mdx`. Use the Storybook UI during component
development (see Yarn commands).
`ember g component rose/component-name`.
## Using Components
A few of the components have additional ember package dependencies that need to be installed before usage.
| Component | Dependency |
| --------- | ---------- |
| Component | Dependency |
| -------------- | -------------- |
| Rose::Dropdown | ember-modifier |
## Running tests
* `yarn test` – Runs the test suite on the current Ember version
* `yarn test --server` – Runs the test suite in "watch mode"
* `yarn test:all` – Runs the test suite against multiple Ember versions
- `yarn test` – Runs the test suite on the current Ember version
- `yarn test --server` – Runs the test suite in "watch mode"
- `yarn test:all` – Runs the test suite against multiple Ember versions
## Running the dummy application
* `yarn start`
* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
- `yarn start`
- Visit the dummy application at [http://localhost:4200](http://localhost:4200).
## Contributing
@@ -105,5 +103,5 @@ See monorepo README for more contribution instructions.
### Building ToC
To autogenerate a ToC (table of contents) for this README,
run `yarn doc:toc`. Please update the ToC whenever editing the structure
run `yarn doc:toc`. Please update the ToC whenever editing the structure
of README.
addons/rose/addon/components/rose/anonymous/index.stories.mdx
-30
View File
@@ -1,30 +0,0 @@
import { Meta } from '@storybook/addon-docs';
<Meta title="Rose/Anonymous" component="Anonymous" />
# Anonymous
The anonymous component is a simple `<div>` with no attributes of its own.
It is used by other components that need to yield contextual components.
This component should not be instantiated directly.
For example, layout components may yield an anonymous component to configure
various layout regions:
```handlebars
<div ...attributes class='rose-layout-global'>
{{yield
(hash
header=(component
'rose/anonymous' tagName='header' class='rose-layout-global-header'
)
sidebar=(component
'rose/anonymous' tagName='aside' class='rose-layout-global-sidebar'
)
body=(component
'rose/anonymous' tagName='main' class='rose-layout-global-body'
)
)
}}
</div>
```
addons/rose/addon/components/rose/badge/index.stories.mdx
-38
View File
@@ -1,38 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Badge (removed)" component="Badge" />
# Rose Badge (Removed)
Rose/Badge has been removed in favor of [HDS::Badge](https://design-system-components-hashicorp.vercel.app/components/badge)
```handlebars
<Hds::Badge @text='Success badge' @color='neutral' />
```
Refer to the [HDS Badge documentation](https://design-system-components-hashicorp.vercel.app/components/badge) for a complete overview
export const HDSTemplate = (args) => ({
template: hbs`<Hds::Badge @text={{text}}
@color={{color}}
/>`,
context: args,
});
<Preview>
<Story
name="Hds Badge"
args={{
text: 'Badge',
}}
argTypes={{
color: {
control: 'select',
options: ['success', 'warning', 'critical', 'highlight'],
},
}}
>
{HDSTemplate.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/button/index.stories.mdx
-106
View File
@@ -1,106 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta
title="Rose/Button"
component="Button"
argTypes={{
style: {
control: 'select',
options: [
'primary',
'secondary',
'warning',
'ghost',
'inline-link-action',
],
},
}}
/>
# 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.
```handlebars
<Rose::Button @style='primary' @iconRight='flight-icons/svg/entry-point-16'>
Action
</Rose::Button>
```
export const Template = (args) => ({
template: hbs`
<Rose::Button
@submit={{submit}}
@disabled={{disabled}}
@style={{style}}
@iconLeft={{iconLeft}}
@iconRight={{iconRight}}
@iconOnly={{iconOnly}}
{{on "click" onClick}}
>
{{text}}
</Rose::Button>
`,
context: args,
});
<Preview>
<Story
name="Advanced"
args={{
text: 'Action',
submit: true,
disabled: false,
style: 'primary',
iconLeft: 'flight-icons/svg/check-circle-16',
iconRight: 'flight-icons/svg/clipboard-copy-16',
}}
argTypes={{
iconLeft: {
control: 'select',
options: [
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
iconRight: {
control: 'select',
options: [
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
onClick: { action: 'clicked' },
}}
>
{Template.bind({})}
</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"
args={{
text: 'Icon Only',
style: 'secondary',
iconOnly: 'flight-icons/svg/check-circle-16',
}}
argTypes={{
iconOnly: {
control: 'select',
options: [
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/card/link/index.stories.mdx
-46
View File
@@ -1,46 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Card/Link" component="Link" />
# Card Link
Card link component wraps content with `LinkTo` component. Supports title and description.
```handlebars
<Rose::Card::Link
@title='Card title'
@description='Card description'
@id='resource_id_1234'
@icon='flight-icons/svg/org-16'
@route='about'
/>
```
export const Template = (args) => ({
template: hbs`
<Rose::Card::Link
@title={{title}}
@description={{description}}
@id={{id}}
@icon={{icon}}
/>
`,
context: args,
});
<Preview>
<Story
name="Basic"
args={{
title: 'Card title',
description: 'Card description',
id: 'resource_id_1234',
icon: 'flight-icons/svg/org-16',
}}
>
{Template.bind({})}
</Story>
</Preview>
`@route` defaults to 'index' when not supplied.
addons/rose/addon/components/rose/cards/index.stories.mdx
-74
View File
@@ -1,74 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Cards" component="Cards" />
# Cards
A set of cards arranged side-by-side.
<Preview>
<Story name="Basic Cards" height="20rem">
{{
template: hbs`
<Rose::Cards as |cards|>
<cards.link
@route="index"
@title="Card Title"
@description="Description"
@id="resource_id_1234"
@icon="flight-icons/svg/org-16"
/>
<cards.link
@route="index"
@title="Card Title"
@description="Description"
@id="resource_id_1234"
@icon="flight-icons/svg/org-16"
/>
<cards.link
@route="index"
@title="Card Title"
@description="Description"
@id="resource_id_1234"
@icon="flight-icons/svg/org-16"
/>
<cards.link
@route="index"
@title="Card Title"
@description="Description"
@id="resource_id_1234"
@icon="flight-icons/svg/org-16"
/>
<cards.link
@route="index"
@title="Card Title"
@description="Description"
@id="resource_id_1234"
@icon="flight-icons/svg/org-16"
/>
</Rose::Cards>
`,
context: {},
}}
</Story>
</Preview>
```handlebars
<Rose::Cards as |cards|>
<cards.link
@route='index'
@title='Card Title'
@description='Description'
@id='resource_id_1234'
@icon='flight-icons/svg/org-16'
/>
<cards.link
@route='index'
@title='Card Title'
@description='Description'
@id='resource_id_1234'
@icon='flight-icons/svg/org-16'
/>
</Rose::Cards>
```
addons/rose/addon/components/rose/code-editor/index.stories.mdx
-90
View File
@@ -1,90 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Code Editor" component="CodeEditor" />
# Code Editor
`CodeEditor` is a component that yields two presentational components which together provide an IDE-like UX.
CodeEditor::fieldEditor is where the provided code is displayed with syntax highlighting.
CodeEditor::toolbar is intended to go on top of the fieldEditor and provides a 'Copy code' button as well as other optional user-provided actions.
```handlebars
<Rose::CodeEditor @codeValue={{this.codeIWantToSee}} as |c|>
<c.toolbar />
<c.fieldEditor />
</Rose::CodeEditor>
```
<!-- mdx seems to not be able to handle template literals -->
export const codeValue =
'hcp_boundary_cluster_id = "<cluster-id>"\n\n' +
'listener "tcp" {\n' +
' address = "0.0.0.0:9202"\n' +
' purpose = "proxy"\n' +
'}\n\n' +
'worker {\n' +
' public_addr = "107.22.128.152"\n' +
' auth_storage_path = "/home/ubuntu/boundary/worker1"\n' +
' tags {\n' +
' type = ["dev-worker", "ubuntu"]\n' +
' }\n' +
'}';
export const Template = (args) => ({
template: hbs`
<Rose::CodeEditor @codeValue={{codeValue}} as |c|>
<c.toolbar />
<c.fieldEditor @options={{options}} />
</Rose::CodeEditor>`,
context: args,
});
<Preview>
<Story
name="ReadOnly"
height="15rem"
args={{
codeValue: codeValue,
options: {
mode: 'hcl',
readOnly: true,
},
}}
>
{Template.bind({})}
</Story>
</Preview>
<Preview>
<Story
name="CodeEditorShell"
height="15rem"
args={{
codeValue: 'mkdir /home/ubuntu/boundary/',
options: {
mode: 'shell',
readOnly: true,
},
}}
>
{Template.bind({})}
</Story>
</Preview>
<Preview>
<Story
name="CodeEditorShellEditable"
height="15rem"
args={{
codeValue: 'mkdir /home/ubuntu/boundary/',
options: {
mode: 'shell',
readOnly: false,
},
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/dialog/cover/index.stories.mdx
-44
View File
@@ -1,44 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Dialog/Cover" component="Cover" />
# Dialog Cover
A template-only dialog component that covers the viewport and accepts arbitrary
content. Note that this component is unique to Boundary and is not part of the
Structure design system.
Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
`dependencies` rather than `devDependencies`.
export const Template = (args) => ({
template: hbs`
<Rose::Dialog::Cover>
<:header>
<h1>Cover Header</h1>
</:header>
<:body>
<p>Cover body</p>
</:body>
</Rose::Dialog::Cover>
`,
context: args,
});
<Preview>
<Story name="Cover" height="15rem">
{Template.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Dialog::Cover>
<:header>
<h2>Cover Header</h2>
</:header>
<:body>
<p>Cover body</p>
</:body>
</Rose::Dialog::Cover>
```
addons/rose/addon/components/rose/dialog/index.stories.mdx
-79
View File
@@ -1,79 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Dialog" component="Dialog" />
# Dialog
A dialog component with optional modal capabilities.
export const Template = (args) => ({
template: hbs`
<Rose::Dialog
@modal={{modal}}
@dismiss={{dismiss}}
@icon={{icon}}
@heading={{heading}}
@dismissButtonText={{dismissButtonText}}
@style={{style}}
as |dialog|>
<dialog.body>
Dialog Body
</dialog.body>
<dialog.footer>
Footer
</dialog.footer>
</Rose::Dialog>
`,
context: args,
});
<Preview>
<Story
name="Dialog"
height="15rem"
args={{
modal: false,
heading: 'Dialog Heading Text',
dismissButtonText: 'Dismiss',
icon: 'flight-icons/svg/check-circle-16',
}}
argTypes={{
icon: {
control: 'select',
options: [
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
style: {
control: {
type: 'inline-radio',
labels: { '': 'default (none)' },
},
options: ['', 'warning'],
},
dismiss: { action: 'dismiss' },
}}
>
{Template.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Dialog
@modal={{true}}
@dismiss={{@dismissFn}}
@icon='flight-icons/svg/check-circle-16'
@heading='Heading'
@dismissButtonText='Dismiss'
as |dialog|
>
<dialog.body>
Dialog Body
</dialog.body>
<dialog.footer>
Footer
</dialog.footer>
</Rose::Dialog>
```
addons/rose/addon/components/rose/dropdown/index.stories.mdx
-263
View File
@@ -1,263 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Dropdown" component="Dropdown" />
# Dropdown
A simple dropdown component with support for links and buttons.
```handlebars
<Rose::Dropdown @text='Choose One' as |dropdown|>
<dropdown.link @route='index'>Menu item</dropdown.link>
<dropdown.link @route='about'>Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
<dropdown.separator />
<dropdown.section
@title='Dropdown Section Title'
@icon='flight-icons/svg/tag-16'
>
<dropdown.link @route='index'>Menu item</dropdown.link>
</dropdown.section>
</Rose::Dropdown>
```
export const Template = (args) => ({
template: hbs`
<Rose::Dropdown @text={{text}} @count={{count}} @icon={{icon}} @showCaret={{showCaret}} iconOnly={{iconOnly}} @dropdownRight={{dropdownRight}} @style={{style}} as |dropdown|>
<dropdown.link @route="index">Menu item</dropdown.link>
<dropdown.link @route="about">Menu item</dropdown.link>
<dropdown.separator />
<dropdown.button>Button menu item</dropdown.button>
<dropdown.separator />
<dropdown.section @title="Dropdown Section Title" @icon="flight-icons/svg/tag-16">
<dropdown.link @route="index">Menu item</dropdown.link>
</dropdown.section>
</Rose::Dropdown>`,
context: args,
});
<Preview>
<Story
name="Basic Dropdown"
height="7rem"
args={{
text: 'Choose One',
count: 0,
showCaret: true,
icon: 'flight-icons/svg/org-16',
dropdownRight: false,
}}
>
{Template.bind({})}
</Story>
</Preview>
<Preview>
<Story
name="Icon-only Dropdown"
height="5rem"
args={{
text: '',
showCaret: true,
icon: 'flight-icons/svg/org-16',
iconOnly: true,
}}
>
{Template.bind({})}
</Story>
</Preview>
export const RadioTemplate = (args) => ({
template: hbs`
<Rose::Form as |form|>
<form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
<Rose::Dropdown @text="Color" as |dropdown|>
<dropdown.item>
<radioGroup.radio @label="Red" @value="red" />
</dropdown.item>
<dropdown.item>
<radioGroup.radio @label="Green" @value="green" />
</dropdown.item>
<dropdown.item>
<radioGroup.radio @label="Blue" @value="blue" />
</dropdown.item>
</Rose::Dropdown>
</form.radioGroup>
</Rose::Form>
`,
context: args,
});
<Preview>
<Story name="Dropdown with Radio Buttons" height="13rem">
{RadioTemplate.bind({})}
</Story>
</Preview>
<!-- Webpack might not be able to handle this syntax, storybook doesn't use broccoli -->
export const KeyValueTemplate = (args) => ({
template: hbs`
<Rose::Dropdown @text={{text}} @showCaret={{showCaret}} @ignoreClickInside={{ignoreClickInside}} as |dropdown|>
<dropdown.key-value>
<:key>ID</:key>
<:value>cl_nbv9375hLHs</:value>
</dropdown.key-value>
<dropdown.separator />
<dropdown.key-value>
<:key>Description</:key>
<:value>Lorem ipsum</:value>
</dropdown.key-value>
</Rose::Dropdown>`,
context: args,
});
<Preview>
<Story
name="Dropdown with Key Value Items"
height="13rem"
args={{
text: 'View details',
showCaret: true,
ignoreClickInside: true,
}}
>
{KeyValueTemplate.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Form as |form|>
<Rose::Dropdown @text='Items' @ignoreClickInside={{true}} as |dropdown|>
<Rose::Form::Checkbox::Group
@name='checkbox-group'
@items={{this.items}}
@selectedItems={{this.selectedItems}}
@onChange={{fn this.onChange}}
as |group|
>
<dropdown.item>
<group.checkbox @label={{group.item.name}} value={{group.item.id}} />
</dropdown.item>
</Rose::Form::Checkbox::Group>
</Rose::Dropdown>
</Rose::Form>
```
export const CheckboxTemplate = (args) => ({
template: hbs`
<Rose::Form as |form|>
<Rose::Dropdown @ignoreClickInside={{true}} @text={{text}} as |dropdown|>
<Rose::Form::Checkbox::Group
@name={{name}}
@disabled={{disabled}}
@items={{items}}
@selectedItems={{selectedItems}}
@onChange={{onChange}}
as |group|
>
<dropdown.item>
<group.checkbox @label={{group.item.name}} value={{group.item.id}} />
</dropdown.item>
</Rose::Form::Checkbox::Group>
</Rose::Dropdown>
</Rose::Form>
`,
context: args,
});
<Preview>
<Story
name="Dropdown with Checkboxes"
height="10rem"
args={{
text: 'Items',
disabled: false,
items: [
{ id: 1, name: 'Foo' },
{ id: 2, name: 'Bar' },
{ id: 3, name: 'Baz' },
],
selectedItems: [],
}}
argTypes={{ onChange: { action: 'changed' } }}
>
{CheckboxTemplate.bind({})}
</Story>
</Preview>
Dropdown content can be aligned to right edge of the component instead of the default left edge, which is the default setting. The following example floats the component to right edge of the page inorder to provide enough space to display right aligned dropdown content.
```handlebars
<Rose::Dropdown
@text='Choose One'
style='float: right'
@dropdownRight={{true}}
as |dropdown|
>
<dropdown.link @route='index'>Menu item</dropdown.link>
<dropdown.link @route='about'>Menu item</dropdown.link>
<dropdown.separator />
<dropdown.button>Button menu item</dropdown.button>
</Rose::Dropdown>
```
Dropdown supports `danger` styling through `style` attribute.
```handlebars
<Rose::Dropdown @text='Dropdown' as |dropdown|>
<dropdown.link @style='danger'>Link - danger</dropdown.link>
<dropdown.button @style='danger'>Button - danger</dropdown.button>
</Rose::Dropdown>
```
Dropdown indicator can be hidden using `showCaret` attribute.
```handlebars
<Rose::Dropdown
@showCaret={{true}}
@icon='flight-icons/svg/more-horizontal-16'
as |dropdown|
>
<dropdown.link @route='index'>Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
</Rose::Dropdown>
```
Dropdowns also support radio buttons and checkboxes. Currently, radio buttons and checkboxes are the only supported
form fields.
```handlebars
<Rose::Form as |form|>
<form.radioGroup @name='color' @selectedValue='red' as |radioGroup|>
<Rose::Dropdown @text='Color' as |dropdown|>
<dropdown.item>
<radioGroup.radio @label='Red' @value='red' />
</dropdown.item>
<dropdown.item>
<radioGroup.radio @label='Green' @value='green' />
</dropdown.item>
<dropdown.item>
<radioGroup.radio @label='Blue' @value='blue' />
</dropdown.item>
</Rose::Dropdown>
</form.radioGroup>
</Rose::Form>
```
Closing dropdown after clicking inside its content can be ignored using `ignoreClickInside`. This is useful when the dropdown contains key-value items that users need to select/copy/interact with.
```handlebars
<Rose::Dropdown
@text='View details'
@showCaret={{true}}
@ignoreClickInside={{true}}
as |dropdown|
>
<dropdown.key-value>
<:key>ID</:key>
<:value>cl_nbv9375hLHs</:value>
</dropdown.key-value>
</Rose::Dropdown>
```
addons/rose/addon/components/rose/footer/index.stories.mdx
-44
View File
@@ -1,44 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Footer" component="Footer" />
# Footer
A footer component that allows four distinct sections to be configured: brand, nav, and text.
```handlebars
<Rose::Footer as |footer|>
<footer.nav as |nav|>
<nav.link @route='index'>Section</nav.link>
<nav.link @href='index'>Section</nav.link>
</footer.nav>
<footer.brand @logo='logo' @text='Product Name' />
<footer.text>Text</footer.text>
</Rose::Footer>
```
export const Template = (args) => ({
template: hbs`
<Rose::Footer as |footer|>
<footer.nav as |nav|>
<nav.link @route="index">Section</nav.link>
<nav.link @href="index">Section</nav.link>
</footer.nav>
<footer.brand @logo="logo" @text={{titleText}} />
<footer.text>{{footerText}}</footer.text>
</Rose::Footer>`,
context: args,
});
<Preview>
<Story
name="Basic"
args={{
titleText: 'Brand Name',
footerText: 'Footer Text',
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/actions/index.stories.mdx
-49
View File
@@ -1,49 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Actions" component="Form/Actions" />
# Form Actions
A simple collection of buttons for performing common actions like submit/save
and cancel. Form actions should always be used in the context of a form element
where the form has a submit action handler. The submit button does not directly
support actions. The cancel button supports a cancel action.
```handlebars
<Rose::Form::Actions
@submitText='Save'
@cancelText='Cancel'
@showCancel={{true}}
@submitDisabled={{false}}
@cancel={{@cancel}}
/>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Actions
@submitText={{submitText}}
@cancelText={{cancelText}}
@showCancel={{showCancel}}
@submitDisabled={{submitDisabled}}
@cancel={{onCancel}} />`,
context: args,
});
<Preview>
<Story
name="Basic Form Actions"
args={{
submitText: 'Save',
cancelText: 'Cancel',
showCancel: true,
submitDisabled: false,
}}
argTypes={{
onCancel: { action: 'cancel' },
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx
-99
View File
@@ -1,99 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Checkbox/Group" component="Form/Checkbox/Group" />
# Form checkboxfield group
Renders a form checkboxfield group.
```handlebars
<Rose::Form::Checkbox::Group
@name='checkbox-group'
@items={{this.items}}
@selectedItems={{this.selectedItems}}
@onChange={{fn this.onChange}}
as |group|
>
<group.checkbox @label={{group.item.name}} value={{group.item.id}} />
</Rose::Form::Checkbox::Group>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Checkbox::Group
@name={{name}}
@inline={{inline}}
@disabled={{disabled}}
@items={{items}}
@selectedItems={{selectedItems}}
@onChange={{onChange}}
@itemEqualityFunc={{itemEqualityFunc}}
as |group|
>
<group.checkbox
@label={{group.item.name}}
value={{group.item.id}} />
</Rose::Form::Checkbox::Group>`,
context: args,
});
<Preview>
<Story
name="Basic"
height="10rem"
args={{
name: 'Name',
inline: true,
disabled: false,
items: [
{ id: 1, name: 'Foo' },
{ id: 2, name: 'Bar' },
{ id: 3, name: 'Baz' },
],
selectedItems: [],
}}
argTypes={{
onChange: { action: 'changed' },
}}
>
{Template.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Form::Checkbox::Group
@name='checkbox-group'
@items={{this.items}}
@selectedItems={{this.selectedItems}}
@onChange={{fn this.onChange}}
@itemEqualityFunc={{this.isEqual}}
as |group|
>
<group.checkbox @label={{group.item.name}} value={{group.item.id}} />
</Rose::Form::Checkbox::Group>
```
<Preview>
<Story
name="WithCustomEquality"
height="10rem"
args={{
name: 'Name',
inline: true,
disabled: false,
items: [
{ id: 1, name: 'Foo' },
{ id: 2, name: 'Bar' },
{ id: 3, name: 'Baz' },
],
selectedItems: [{ id: 1, name: 'Foo' }],
itemEqualityFunc: (item1, item2) => item1.name === item2.name,
}}
argTypes={{
onChange: { action: 'changed' },
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
-145
View File
@@ -1,145 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Checkbox" component="Form/Checkbox" />
# Form Checkbox
Renders a form input checkbox.
```handlebars
<Rose::Form::Checkbox
@name='boolean-value'
@label='Yes?'
@checked={{false}}
@error={{false}}
@disabled={{false}}
/>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Checkbox
@name={{name}}
@label={{label}}
@description={{description}}
@helperText={{helperText}}
@checked={{checked}}
@error={{error}}
@disabled={{disabled}}
/>`,
context: args,
});
<Preview>
<Story
name="Basic Checkbox"
height="10rem"
args={{
name: 'checkbox-1',
label: 'Checkbox 🛎',
description: 'Short description in label',
helperText: 'This is an optional help text.',
checked: false,
error: false,
disabled: false,
}}
>
{Template.bind({})}
</Story>
</Preview>
export const ErrorTemplate = (args) => ({
template: hbs`
<Rose::Form::Checkbox
@name={{name}}
@label={{label}}
@checked={{checked}}
@error={{true}}
@disabled={{disabled}}
as |field|
>
<field.errors as |errors|>
<errors.message>An error occurred.</errors.message>
</field.errors>
</Rose::Form::Checkbox>`,
context: args,
});
<Preview>
<Story
name="Checkbox with errors"
height="10rem"
args={{
name: 'checkbox-1',
label: 'Checkbox 🛎',
checked: false,
disabled: false,
}}
>
{ErrorTemplate.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Form::Checkbox
@name='boolean-value'
@label='Yes?'
@checked={{false}}
@error={{false}}
@disabled={{false}}
@inline={{false}}
/>
```
export const InlineTemplate = (args) => ({
template: hbs`
<Rose::Form::Checkbox
@name='checkbox-1'
@label='Checkbox1 🛎'
@description={{description}}
@helperText={{helperText}}
@checked={{checked}}
@error={{error}}
@disabled={{disabled}}
@inline={{inline}}
/>
<Rose::Form::Checkbox
@name='checkbox-2'
@label='Checkbox2 🛎'
@description={{description}}
@helperText={{helperText}}
@checked={{checked}}
@error={{error}}
@disabled={{disabled}}
@inline={{inline}}
/>
<Rose::Form::Checkbox
@name='checkbox-3'
@label='Checkbox3 🛎'
@description={{description}}
@helperText={{helperText}}
@checked={{checked}}
@error={{error}}
@disabled={{disabled}}
@inline={{inline}}
/>`,
context: args,
});
<Preview>
<Story
name="Checkbox with inline style"
height="10rem"
args={{
description: 'Short description in label',
helperText: 'This is an optional help text.',
checked: false,
error: false,
disabled: false,
inline: false,
}}
>
{InlineTemplate.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/errors/index.stories.mdx
-28
View File
@@ -1,28 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Errors" component="Form/Errors" />
# Form Errors
Use this component to display one or more error messages.
```handlebars
<Rose::Form::Errors as |errors|>
<errors.message>An error message goes here.</errors.message>
<errors.message>Another message goes here.</errors.message>
</Rose::Form::Errors>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Errors as |errors|>
<errors.message>An error message goes here.</errors.message>
<errors.message>Another message goes here.</errors.message>
</Rose::Form::Errors>`,
context: args,
});
<Preview>
<Story name="Basic Form Errors">{Template.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/form/errors/message/index.stories.mdx
-28
View File
@@ -1,28 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Errors/Message" component="Form/Errors/Message" />
# Form Error Message
This component accepts block content describing a single error to the user.
Normally this component would not be used directly, but rather in the context
of the `Rose::Form::Errors` component.
```handlebars
<Rose::Form::Errors::Message>
An error message goes here.
</Rose::Form::Errors::Message>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Errors::Message>
An error message goes here.
</Rose::Form::Errors::Message>`,
context: args,
});
<Preview>
<Story name="Basic Form Error Message">{Template.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/form/fieldset/index.stories.mdx
-37
View File
@@ -1,37 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Fieldset" component="Form/Fieldset" />
# Form Fieldset
Renders a simple fieldset with title, description and body and an optional helperText
```handlebars
<Rose::Form::Fieldset @helperText={{helperText}}>
<:title>Title</:title>
<:description>Description</:description>
<:body>Rest of the form</:body>
</Rose::Form::Fieldset>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Fieldset @helperText={{helperText}}>
<:title>Title</:title>
<:description>Description</:description>
<:body>Rest of the form</:body>
</Rose::Form::Fieldset>`,
context: args,
});
<Preview>
<Story
name="Basic Fieldset"
args={{
helperText: 'This is an optional help text.',
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/helper-text/index.stories.mdx
-40
View File
@@ -1,40 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/HelperText" component="Form/HelperText" />
# Form Helper Text
Displays helpful messages related to a form field. This component is used
by form fields and should not be used directly.
```handlebars
<Rose::Form::HelperText
@id='helper-text-{{field.id}}'
@link='link'
@linkText='link text goes here'
>
Helper text
</Rose::Form::HelperText>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::HelperText @error={{error}} @link={{link}} @linkText={{linkText}}>
Helper text
</Rose::Form::HelperText>`,
context: args,
});
<Preview>
<Story
name="HelperText"
args={{
error: false,
link: 'http://www.example.net/',
linkText: 'sample link text',
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/index.stories.mdx
-125
View File
@@ -1,125 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form" component="Form" />
# Form
A component for building accessible forms. Yields contextual fields
and actions.
export const Template = (args) => ({
template: hbs`
<Rose::Form
@onSubmit={{submit}}
@cancel={{cancel}}
@showEditToggle={{showEditToggle}}
@disabled={{disabled}}
as |form|
>
<form.input @label='Label' @helperText='Helper text' @value='Text' />
<Hds::Form::Textarea::Field
@value="This is my description"
disabled={{form.disabled}}
as |F|>
<F.Label>Short description</F.Label>
<F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
</Hds::Form::Textarea::Field>
<Hds::Form::Select::Field
@value={{selectedValue}}
@isInvalid={{false}}
disabled={{form.disabled}}
{{on 'change' (fn selectChange)}}
as |F|
>
<F.Label>Label</F.Label>
<F.HelperText>Helper text</F.HelperText>
<F.Options>
<option>Choose an option</option>
<option value='value-1' selected={{eq value 'value-1'}}>Value 1</option>
<option value='value-2' selected={{eq value 'value-2'}}>Value 2</option>
<option value='value-3' selected={{eq value 'value-3'}}>Value 3</option>
</F.Options>
</Hds::Form::Select::Field>
<form.radioGroup @name='color' @selectedValue='green' as |radioGroup|>
<radioGroup.radio @label='Red' @value='red' />
<radioGroup.radio @label='Green' @value='green' />
<radioGroup.radio @label='Blue' @value='blue' />
</form.radioGroup>
<form.checkbox @label='Label' @checked={{true}} />
<form.actions
@submitText='Save'
@cancelText='Cancel'
@enableEditText='Edit'
@showCancel={{true}}
/>
</Rose::Form>`,
context: args,
});
<Preview>
<Story
name="Form"
height="35rem"
args={{
showEditToggle: false,
disabled: false,
}}
argTypes={{
submit: { action: 'submit' },
cancel: { action: 'cancel' },
selectChange: { action: 'selectChange' },
}}
>
{Template.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Form
@onSubmit={{this.submit}}
@cancel={{this.cancel}}
@disabled={{false}}
@showEditToggle={{true}}
as |form|
>
<form.input @label='Label' @helperText='Helper text' @value='Text' />
<Hds::Form::Textarea::Field
@value='This is my description'
disabled={{form.disabled}}
as |F|
>
<F.Label>Short description</F.Label>
<F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
</Hds::Form::Textarea::Field>
<Hds::Form::Select::Field
@value={{selectedValue}}
@isInvalid={{false}}
disabled={{form.disabled}}
{{on 'change' (set-from-event this 'selectedValue')}}
as |F|
>
<F.Label>Label</F.Label>
<F.HelperText>Helper text</F.HelperText>
<F.Options>
<option>Choose an option</option>
<option value='value-1' selected={{eq value 'value-1'}}>Value 1</option>
<option value='value-2' selected={{eq value 'value-2'}}>Value 2</option>
<option value='value-3' selected={{eq value 'value-3'}}>Value 3</option>
</F.Options>
</Hds::Form::Select::Field>
<form.radioGroup @name='color' @selectedValue='green' as |radioGroup|>
<radioGroup.radio @label='Red' @value='red' />
<radioGroup.radio @label='Green' @value='green' />
<radioGroup.radio @label='Blue' @value='blue' />
</form.radioGroup>
<form.checkbox @label='Label' />
<form.actions
@submitText='Save'
@cancelText='Cancel'
@enableEditText='Edit'
@showCancel={{true}}
/>
</Rose::Form>
```
addons/rose/addon/components/rose/form/input/index.stories.mdx
-153
View File
@@ -1,153 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Input" component="Form/Input" />
# Form Input
Renders a simple form input.
```handlebars
<Rose::Form::Input
@type='email'
@name='email'
@value='info@example.com'
@label='Email'
@helperText='Enter your email'
@link='www.example.net'
@linkText='sample link text'
@error={{false}}
@disabled={{false}}
@icon='flight-icons/svg/search-16'
readonly={{false}}
/>
```
Or a fully contextual component without a wrapper, for maximum flexibility.
```handlebars
<Rose::Form::Input
@contextual={{true}}
@type='email'
@name='email'
@value='info@example.com'
@label='Email'
@helperText='Enter your email'
@link='www.example.net'
@linkText='sample link text'
@error={{false}}
@disabled={{false}}
readonly={{false}}
/>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Input
@type={{type}}
@name={{type}}
@value={{value}}
@label={{label}}
@helperText={{helperText}}
@link={{link}}
@linkText={{linkText}}
@error={{false}}
@disabled={{disabled}}
readonly={{read-only}}
@icon={{icon}}
/>`,
context: args,
});
<Preview>
<Story
name="Basic Field"
args={{
type: 'text',
value: 'Value',
label: 'Label',
helperText: 'Helper text',
link: 'link goes here',
linkText: 'link text',
disabled: false,
'read-only': false,
icon: 'flight-icons/svg/search-16',
}}
argTypes={{
type: {
control: 'select',
options: ['text', 'email', 'number', 'password'],
},
}}
>
{Template.bind({})}
</Story>
</Preview>
export const ErrorTemplate = (args) => ({
template: hbs`
<Rose::Form::Input
@type={{type}}
@name={{type}}
@value={{value}}
@label={{label}}
@helperText={{helperText}}
@link={{link}}
@linkText={{linkText}}
@error={{true}}
@disabled={{disabled}}
readonly={{read-only}}
as |field|
>
<field.errors as |errors|>
<errors.message>An error occurred.</errors.message>
</field.errors>
</Rose::Form::Input>`,
context: args,
});
<Preview>
<Story
name="Field with Errors"
args={{
type: 'text',
value: 'Value',
label: 'Label',
helperText: 'Helper text',
link: 'link goes here',
linkText: 'link text',
disabled: false,
'read-only': false,
}}
argTypes={{
type: {
control: 'select',
options: ['text', 'email', 'number', 'password'],
},
}}
>
{ErrorTemplate.bind({})}
</Story>
</Preview>
export const ContextualTemplate = (args) => ({
template: hbs`
<Rose::Form::Input @value="Text" @error={{true}} @contextual={{true}} as |field|>
<hr />
<field.label>Label</field.label>
<hr />
<field.helperText>Help</field.helperText>
<hr />
<field.field />
<hr />
<field.errors as |errors|>
<errors.message>An error occurred.</errors.message>
</field.errors>
<hr />
</Rose::Form::Input>`,
context: args,
});
<Preview>
<Story name="Fully Contextual Input">{ContextualTemplate.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/form/label/index.stories.mdx
-34
View File
@@ -1,34 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Label" component="Form/Label" />
# Form Label
Renders a simple form label. This component is used and yielded by form fields
and should not be used directly.
```handlebars
<Rose::Form::Label @for='my-field-id'>
Form Label
</Rose::Form::Label>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Label @for='my-field-id' @error={{error}}>
Form Label
</Rose::Form::Label>`,
context: args,
});
<Preview>
<Story
name="Form Label"
args={{
error: false,
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
-43
View File
@@ -1,43 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Radio/Card(removed)" component="RadioCard" />
# RadioCard (removed)
Rose/Form/Select has been removed in favor of
[HDS::Form::RadioCard](https://design-system-components-hashicorp.vercel.app/components/form/radio-card).
```handlebars
<Hds::Form::RadioCard @checked={{true}} as |R|>
<R.Label>HDS Radio Card</R.Label>
<R.Badge @text='6 clusters left' />
<R.Description>Quick peering with quick links will provide the fastest way to
connect to your providers’ network.</R.Description>
</Hds::Form::RadioCard>
```
export const HDSTemplate = (args) => ({
template: hbs`
<Hds::Form::RadioCard @checked={{true}} @layout='fixed' @maxWidth='300px' @alignment='center' as |R|>
<R.Label>{{label}}</R.Label>
<R.Badge @text={{badge}} />
<R.Description>{{description}}</R.Description>
</Hds::Form::RadioCard>
`,
context: args,
});
<Preview>
<Story
name="HDS Card"
height="10rem"
args={{
label: 'Quick peering with Quick Links',
badge: '6 clusters left',
description: 'Record financial transactions using',
}}
>
{HDSTemplate.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
-146
View File
@@ -1,146 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Radio/Group" component="Form/Radio/Group" />
# Form radiofield group
Renders a form radiofield group.
```handlebars
<Rose::Form::Radio::Group
@disabled={{false}}
@name={{name}}
@selectedValue='disagree'
@changed={{fn}}
@inline={{false}}
as |radioGroup|
>
<radioGroup.radio @label='Agree' @value='agree' />
<radioGroup.radio @label='disagree' @value='disagree' />
<radioGroup.radio @label='maybe' @value='maybe' />
</Rose::Form::Radio::Group>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Radio::Group
@disabled={{disabled}}
@name={{name}}
@selectedValue={{selectedValue}}
@changed={{changed}}
@inline={{inline}}
as |radioGroup|
>
<radioGroup.radio
@label={{firstFieldLabel}}
@value={{firstFieldValue}}
@icon={{firstFieldIcon}}
/>
<radioGroup.radio @label={{secondFieldLabel}} @value={{secondFieldValue}} />
<radioGroup.radio @label={{thirdFieldLabel}} @value={{thirdFieldValue}} />
</Rose::Form::Radio::Group>`,
context: args,
});
<Preview>
<Story
name="Basic"
height="10rem"
args={{
name: 'mustagree',
disabled: false,
inline: true,
selectedValue: 'disagree',
firstFieldLabel: 'Agree',
firstFieldValue: 'agree',
secondFieldLabel: 'Maybe',
secondFieldValue: 'maybe',
thirdFieldLabel: 'Disagree',
thirdFieldValue: 'disagree',
firstFieldIcon: 'flight-icons/svg/org-16',
}}
argTypes={{
firstFieldIcon: {
control: 'select',
options: [
'flight-icons/svg/org-16',
'flight-icons/svg/clipboard-copy-16',
],
},
changed: { action: 'changed' },
}}
>
{Template.bind({})}
</Story>
</Preview>
# HDS::Form::RadioCard::Group
> **_NOTE:_** Replaces the removed Rose/Form/Radio/Group/Card.
```handlebars
<Hds::Form::RadioCard::Group
@name='radio-card-basic-example'
@alignment='center'
as |G|
>
<G.Legend>Create connection</G.Legend>
<G.RadioCard @checked={{true}} {{on 'change' this.onChange}} as |R|>
<R.Icon @name='aws-color' />
<R.Label>Quick peering with Quick Links</R.Label>
<R.Badge @text='2-5 min' />
<R.Description>Quick peering with quick links will provide the fastest way
to connect to your providers’ network.</R.Description>
</G.RadioCard>
<G.RadioCard {{on 'change' this.onChange}} as |R|>
<R.Icon @name='aws-color' />
<R.Label>Manual peering using AWS CLI</R.Label>
<R.Badge @text='5-10 min' />
<R.Description>Provide you AWS CLI template to apply connection settings.</R.Description>
</G.RadioCard>
<G.RadioCard {{on 'change' this.onChange}} as |R|>
<R.Icon @name='hcp' />
<R.Label>Manual peering using HCP and AWS web console</R.Label>
<R.Badge @text='30-60 min' />
<R.Description>Manually follow UI instructions to complete configuring a
connection at provider side.</R.Description>
</G.RadioCard>
</Hds::Form::RadioCard::Group>
```
export const HDSTemplate = (args) => ({
template: hbs`
<Hds::Form::RadioCard::Group @name="radio-card-basic-example" @alignment="center" as |G|>
<G.Legend>Create connection</G.Legend>
<G.RadioCard @maxWidth="20%" @checked={{true}} {{on "change" this.onChange}} as |R|>
<R.Label>{{firstlabel}}</R.Label>
<R.Badge @text={{firstbadge}} />
<R.Description>{{firstdescription}}</R.Description>
</G.RadioCard>
<G.RadioCard @maxWidth="20%" {{on "change" this.onChange}} as |R|>
<R.Label>{{secondlabel}}</R.Label>
<R.Badge @text={{secondbadge}} />
<R.Description>{{seconddescription}}</R.Description>
</G.RadioCard>
</Hds::Form::RadioCard::Group>`,
context: args,
});
<Preview>
<Story
name="HDS Card"
height="10rem"
args={{
firstlabel: 'Quick peering with Quick Links',
firstbadge: '6 clusters left',
firstdescription: 'Record financial transactions using',
secondlabel: 'Manual peering using AWS CLI',
secondbadge: '60 clusters left',
seconddescription:
'Manually follow UI instructions to complete configuring a connection at provider side.',
}}
>
{HDSTemplate.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
-132
View File
@@ -1,132 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta
title="Rose/Form/Radio/Radio"
component="Form/Radio/Radio"
argTypes={{
icon: {
control: {
type: 'select',
labels: { '': 'none' },
},
options: [
'',
'flight-icons/svg/org-16',
'flight-icons/svg/clipboard-copy-16',
],
},
}}
/>
# Form Radiofield
Renders a form radiofield.
```handlebars
<Rose::Form::Radio::Radio
@label='Yes'
@error={{false}}
@value='yes-agree'
@selectedValue='yes-agree'
@disabled={{false}}
@changed={{fn}}
/>
```
export const Template = (args) => ({
template: hbs`
<Rose::Form::Radio::Radio
@label={{label}}
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@helperText={{helperText}}
/>`,
context: args,
});
<Preview>
<Story
name="Basic"
height="10rem"
args={{
label: 'Radiofield',
error: false,
value: 'value and selectedValue must match to select radiofield',
selectedValue: 'value and selectedValue must match to select radiofield',
helperText: 'Helper text',
disabled: false,
icon: '',
}}
>
{Template.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Form::Radio::Radio
@label='Yes'
@error={{false}}
@value='yes-agree'
@selectedValue='yes-agree'
@disabled={{false}}
@changed={{fn}}
@inline={{true}}
@helperText={{helperText}}
/>
```
export const InlineTemplate = (args) => ({
template: hbs`
<Rose::Form::Radio::Radio
@label='Radiofield1'
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@inline={{inline}}
@helperText={{helperText}}
/>
<Rose::Form::Radio::Radio
@label='Radiofield2'
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@inline={{inline}}
@helperText={{helperText}}
/>
<Rose::Form::Radio::Radio
@label='Radiofield3'
@error={{error}}
@value={{value}}
@selectedValue={{selectedValue}}
@disabled={{disabled}}
@icon={{icon}}
@inline={{inline}}
@helperText={{helperText}}
/>`,
context: args,
});
<Preview>
<Story
name="Radio with inline style"
height="10rem"
args={{
inline: false,
error: false,
value: 'value and selectedValue must match to select radiofield',
selectedValue: 'value and selectedValue must match to select radiofield',
helperText: 'Helper text',
disabled: false,
}}
>
{InlineTemplate.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/select/index.stories.mdx
-71
View File
@@ -1,71 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Select (removed)" component="Form/Select" />
# Select (removed)
Rose/Form/Select has been removed in favor of
[HDS::Form::Select](https://design-system-components-hashicorp.vercel.app/components/form/select).
```handlebars
<Hds::Form::Select::Field
@value={{this.selectedValue}}
@isInvalid={{false}}
disabled={{false}}
name='select_name'
{{on 'change' (set-from-event this 'selectedValue')}}
as |F|
>
<F.Label>Color</F.Label>
<F.HelperText>Set your desired color</F.Label>
<F.Options>
<option>Choose a color</option>
<option value='red' selected={{eq this.selectedValue 'red'}}>Red</option>
<option value='green' selected={{eq this.selectedValue 'green'}}>Green</option>
<option value='blue' selected={{eq this.selectedValue 'blue'}}>Blue</option>
</F.Options>
</Hds::Form::Select::Field>
```
export const Template = (args) => ({
template: hbs`
<Hds::Form::Select::Field
@value={{value}}
@isInvalid={{error}}
disabled={{disabled}}
name={{name}}
{{on 'change' (set-from-event this 'value')}}
as |F|
>
<F.Label>{{label}}</F.Label>
<F.HelperText>{{helperText}}</F.HelperText>
<F.Options>
<option>Choose an option</option>
<option value='value-1' selected={{eq value 'value-1'}}>Value 1</option>
<option value='value-2' selected={{eq value 'value-2'}}>Value 2</option>
<option value='value-3' selected={{eq value 'value-3'}}>Value 3</option>
</F.Options>
</Hds::Form::Select::Field>`,
context: args,
});
<Preview>
<Story
name="Basic"
height="10rem"
args={{
name: 'select_name',
label: 'Label',
helperText: 'Helper text',
disabled: false,
error: false,
}}
argTypes={{
value: { control: 'select', options: ['value-1', 'value-2', 'value-3'] },
onChange: { action: 'changed' },
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/form/textarea/index.stories.mdx
-45
View File
@@ -1,45 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Form/Textarea (removed)" component="Form/Textarea" />
# Textarea (removed)
Rose/Form/Textarea has been removed in favor of
[HDS::Form::Textarea](https://design-system-components-hashicorp.vercel.app/components/form/textarea).
```handlebars
<Hds::Form::Textarea::Field
@value='This is my description'
disabled={{form.disabled}}
as |F|
>
<F.Label>Short description</F.Label>
<F.HelperText>Add a short description about the workspace you are creating.</F.HelperText>
</Hds::Form::Textarea::Field>
```
export const Template = (args) => ({
template: hbs`
<Hds::Form::Textarea::Field name="field" @value={{value}} @isOptional={{isOptional}} disabled={{disabled}} as |F|>
<F.Label>{{label}}</F.Label>
<F.HelperText>{{helperText}}</F.HelperText>
</Hds::Form::Textarea::Field>`,
context: args,
});
<Preview>
<Story
name="Basic Textarea"
height="10rem"
args={{
value: 'Value',
label: 'Label',
helperText: 'Helper text',
disabled: false,
isOptional: true,
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/frame/index.stories.mdx
-40
View File
@@ -1,40 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Frame" component="Frame" />
# Frame
A simple frame component with named blocks `:header` and `:body`. Note that
this component is unique to Boundary and is not part of the Structure design
system.
Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
`dependencies` rather than `devDependencies`.
<Preview>
<Story name="Frame" height="15rem">
{{
template: hbs`
<Rose::Frame>
<:header>
<h2>Frame Header</h2>
</:header>
<:body>
<p>Frame body</p>
</:body>
</Rose::Frame>`,
}}
</Story>
</Preview>
```handlebars
<Rose::Frame>
<:header>
<h2>Frame Header</h2>
</:header>
<:body>
<p>Frame body</p>
</:body>
</Rose::Frame>
```
addons/rose/addon/components/rose/header/index.stories.mdx
-89
View File
@@ -1,89 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Header" component="Header" />
# Header
A header component that allows three distinct sections to be configured: brand, nav, and utilities.
```handlebars
<Rose::Header as |header|>
<header.brand @logo='logo' @text='Product Name' />
<header.nav as |nav|>
<nav.dropdown @text='org-name' as |dropdown|>
<dropdown.link @route='index'>Menu item</dropdown.link>
<dropdown.link @route='about'>Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
</nav.dropdown>
<nav.link @route='index'>Section</nav.link>
<nav.link @route='about'>Section</nav.link>
</header.nav>
<header.utilities as |utilities|>
<utilities.dropdown
@text='user@example.net'
@iconOnly={{true}}
@icon='flight-icons/svg/user-circle-16'
as |dropdown|
>
<dropdown.link @route='index'>Menu item</dropdown.link>
<dropdown.link @route='about'>Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
</utilities.dropdown>
</header.utilities>
</Rose::Header>
```
export const Template = (args) => ({
template: hbs`
<Rose::Header as |header|>
<header.brand @logo='logo' @text={{titleText}} />
<header.nav as |nav|>
<nav.dropdown @text='org-name' as |dropdown|>
<dropdown.link @route='index'>Menu item</dropdown.link>
<dropdown.link @route='about'>Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
</nav.dropdown>
<nav.link @route='index'>Section</nav.link>
<nav.link @route='about'>Section</nav.link>
</header.nav>
<header.utilities as |utilities|>
<utilities.dropdown
@text='user@example.net'
@iconOnly={{true}}
@icon={{dropdownIcon}}
as |dropdown|
>
<dropdown.link @route='index'>Menu item</dropdown.link>
<dropdown.link @route='about'>Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
</utilities.dropdown>
</header.utilities>
</Rose::Header>
`,
context: args,
});
<Preview>
<Story
name="Basic"
args={{
titleText: 'Brand Name',
dropdownIcon: 'flight-icons/svg/user-circle-16',
}}
argTypes={{
dropdownIcon: {
control: 'select',
options: [
'flight-icons/svg/user-circle-16',
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/icon/index.stories.mdx
-46
View File
@@ -1,46 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Icon" component="Icon" />
# Icon
Renders a simple icon.
```handlebars
<Rose::Icon @name={{name}} @size={{size}} />
```
export const Template = (args) => ({
template: hbs`
<Rose::Icon @name={{name}} @size={{size}} />`,
context: args,
});
<Preview>
<Story
name="Basic"
args={{
name: 'flight-icons/svg/check-circle-16',
size: '',
}}
argTypes={{
name: {
control: 'select',
options: [
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
size: {
control: {
type: 'inline-radio',
labels: { '': 'default (none)' },
},
options: ['small', 'medium', '', 'extra-large'],
},
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/layout/body-content/index.stories.mdx
-28
View File
@@ -1,28 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Layout/BodyContent" component="BodyContent" />
# Layout|BodyContent
A page layout/positioning component that allows two distinct sections to be configured: body and sidebar.
```handlebars
<Rose::Layout::BodyContent as |bc|>
<bc.Body />
<bc.Sidebar />
</Rose::Layout::BodyContent>
```
<Preview>
<Story name="BodyContent">
{{
template: hbs`
<Rose::Layout::BodyContent as |bc|>
<bc.Body style="background: var(--brand-gray-4);">Body</bc.Body>
<bc.Sidebar style="background: var(--brand-gray-5);">Sidebar</bc.Sidebar>
</Rose::Layout::BodyContent>
`,
}}
</Story>
</Preview>
addons/rose/addon/components/rose/layout/centered/index.stories.mdx
-26
View File
@@ -1,26 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Layout/Centered" component="Centered" />
# Layout|Centered
A left and right centered layout/positioning component.
```handlebars
<Rose::Layout::Centered>
Centered
</Rose::Layout::Centere>
```
<Preview>
<Story name="Centered">
{{
template: hbs`
<Rose::Layout::Centered style="background: var(--brand-gray-7);">
Centered
</Rose::Layout::Centered>
`,
}}
</Story>
</Preview>
addons/rose/addon/components/rose/layout/global/index.stories.mdx
-31
View File
@@ -1,31 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Layout/Global" component="Global" />
# Layout|Global
A top-level layout/positioning component that allows three distinct sections to
be configured: header, body, and footer.
```handlebars
<Rose::Layout::Global as |layout|>
<layout.header />
<layout.body />
<layout.footer />
</Rose::Layout::Global>
```
<Preview>
<Story name="Global">
{{
template: hbs`
<Rose::Layout::Global as |layout|>
<layout.header style="background: var(--brand-gray-5);">Header</layout.header>
<layout.body style="background: var(--brand-gray-7);">Body</layout.body>
<layout.footer style="background: var(--brand-gray-5);">Footer</layout.footer>
</Rose::Layout::Global>
`,
}}
</Story>
</Preview>
addons/rose/addon/components/rose/layout/page/index.stories.mdx
-34
View File
@@ -1,34 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Layout/Page" component="Page" />
# Layout|Page
A page layout/positioning component that allows five distinct sections to be configured: breadcrumbs, header, actions, navigation, and body.
```handlebars
<Rose::Layout::Page as |page|>
<page.breadcrumbs />
<page.header />
<page.actions />
<page.navigation />
<page.body />
</Rose::Layout::Page>
```
<Preview>
<Story name="Page">
{{
template: hbs`
<Rose::Layout::Page as |page|>
<page.breadcrumbs style="background: var(--brand-gray-4);">Breadcrumbs</page.breadcrumbs>
<page.header style="background: var(--brand-gray-5);">Header</page.header>
<page.actions style="background: var(--brand-gray-3);">Actions</page.actions>
<page.navigation style="background: var(--brand-gray-6);">Navigation</page.navigation>
<page.body style="background: var(--brand-gray-7);">Body</page.body>
</Rose::Layout::Page>
`,
}}
</Story>
</Preview>
addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx
-37
View File
@@ -1,37 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Layout/Sidebar" component="SidebarLayout" />
# Layout|Sidebar
A top-level layout/positioning component that allows two distinct sections to
be configured: sidebar, body and footer.
```handlebars
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar>
sidebar content
</layout.sidebar>
<layout.body>
body content
</layout.body>
<layout.footer>
footer content
</layout.footer>
</Rose::Layout::Sidebar>
```
<Preview>
<Story name="SidebarLayout">
{{
template: hbs`
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar style="background: var(--brand-gray-7);">Body</layout.sidebar>
<layout.body style="background: var(--brand-gray-5);">Sidebar</layout.body>
<layout.footer style="background: var(--brand-gray-7);">Sidebar</layout.footer>
</Rose::Layout::Sidebar>
`,
}}
</Story>
</Preview>
addons/rose/addon/components/rose/link-button/index.stories.mdx
-112
View File
@@ -1,112 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta
title="Rose/LinkButton"
component="LinkButton"
argTypes={{
style: {
control: 'select',
options: [
'primary',
'secondary',
'warning',
'ghost',
'inline-link-action',
],
},
}}
/>
# LinkButton
An anchor element component styled to mimic `Rose::Button` component.
Styles supported: primary, secondary, warning, and ghost.
Disabling link button is not supported as it is an action on form components only.
```handlebars
<Rose::LinkButton
@route='index'
@style='primary'
@iconRight='flight-icons/svg/entry-point-16'
>
Content
</Rose::LinkButton>
```
export const Template = (args) => ({
template: hbs`
<Rose::LinkButton
@route='index'
@style={{style}}
@iconLeft={{iconLeft}}
@iconRight={{iconRight}}
@iconOnly={{iconOnly}}
>
{{text}}
</Rose::LinkButton>
`,
context: args,
});
<Preview>
<Story
name="Advanced"
args={{
text: 'Content',
style: 'primary',
iconLeft: 'flight-icons/svg/check-circle-16',
iconRight: 'flight-icons/svg/clipboard-copy-16',
}}
argTypes={{
iconLeft: {
control: 'select',
options: [
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
iconRight: {
control: 'select',
options: [
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
}}
>
{Template.bind({})}
</Story>
</Preview>
Similar to `Rose::Button`, icon only link button is supported.
```handlebars
<Rose::LinkButton
@route='index'
@style='primary'
@iconOnly='flight-icons/svg/help-16'
/>
```
<Preview>
<Story
name="Icon Only"
args={{
style: 'primary',
iconOnly: 'flight-icons/svg/check-circle-16',
}}
argTypes={{
iconOnly: {
control: 'select',
options: [
'flight-icons/svg/help-16',
'flight-icons/svg/check-circle-16',
'flight-icons/svg/clipboard-copy-16',
],
},
}}
>
{Template.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/list/key-value/index.stories.mdx
-111
View File
@@ -1,111 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/List/KeyValue" component="List/KeyValue" />
# Key/Value List
A simple key/value list with support for embedded form fields and buttons.
<Preview>
<Story name="Basic Key/Value List" height="17rem">
{{
template: hbs`
<Rose::List::KeyValue as |list|>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
<Rose::Form::Input @contextual={{true}} as |input|>
<list.item as |item|>
<item.key>
<input.label>Key</input.label>
</item.key>
<item.cell>
<input.field />
</item.cell>
<item.cell>
<Rose::Button @style='secondary'>Add</Rose::Button>
</item.cell>
</list.item>
</Rose::Form::Input>
<Rose::Form::Input @contextual={{true}} as |input|>
<list.item as |item|>
<item.key>
<input.label>Key</input.label>
</item.key>
<item.cell>
<input.field />
</item.cell>
<item.cell>
<Rose::Button
@style='secondary'
@iconOnly='flight-icons/svg/trash-16'
title='Remove'
>Remove</Rose::Button>
</item.cell>
</list.item>
</Rose::Form::Input>
</Rose::List::KeyValue>`,
}}
</Story>
</Preview>
```handlebars
<Rose::List::KeyValue as |list|>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
<list.item as |item|>
<item.key>Key</item.key>
<item.cell>Value</item.cell>
</list.item>
{{! In actual use, form fields should be yielded from an outer form
component }}
<Rose::Form::Input @contextual={{true}} as |input|>
<list.item as |item|>
<item.key>
<input.label>Key</input.label>
</item.key>
<item.cell>
<input.field />
</item.cell>
<item.cell>
<Rose::Button @style='secondary'>Add</Rose::Button>
</item.cell>
</list.item>
</Rose::Form::Input>
<Rose::Form::Input @contextual={{true}} as |input|>
<list.item as |item|>
<item.key>
<input.label>Key</input.label>
</item.key>
<item.cell>
<input.field />
</item.cell>
<item.cell>
<Rose::Button
@style='secondary'
@iconOnly='flight-icons/svg/trash-16'
title='Remove'
>Remove</Rose::Button>
</item.cell>
</list.item>
</Rose::Form::Input>
</Rose::List::KeyValue>
```
addons/rose/addon/components/rose/message/index.stories.mdx
-108
View File
@@ -1,108 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Message" component="Message" />
# Message
A message component containing a title, description, and nav links.
Title can be configured with optional icon and subtitle.
export const Template = (args) => ({
template: hbs`
<Rose::Message
@title={{title}}
@subtitle={{subtitle}}
@icon={{icon}}
as |message|
>
<message.description>
{{description}}
</message.description>
<message.link @route='index'>
<Rose::Icon @name='flight-icons/svg/chevron-left-16' />
Go back
</message.link>
<message.link @route='index'>
Need help?
</message.link>
</Rose::Message>
`,
context: args,
});
<Preview>
<Story
name="Advanced Message"
height="12rem"
args={{
title: 'Page not found',
subtitle: 'Error 404',
description:
'Sorry, we could not find the page you were looking for. Navigate to another page with the links below.',
icon: 'flight-icons/svg/help-16',
}}
argTypes={{
icon: {
control: 'select',
options: [
'flight-icons/svg/help-16',
'flight-icons/svg/check-circle-16',
],
},
}}
>
{Template.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Message
@title='Page not found'
@subtitle='Error 404'
@icon='flight-icons/svg/alert-circle-16'
as |message|
>
<message.description>
You must be granted permissions to view this data. Ask your administrator if
you think you should have access.
</message.description>
<message.link @route='index'>
<Rose::Icon @name='flight-icons/svg/chevron-left-16' />
Go back
</message.link>
<message.link @route='index'>Need help?</message.link>
</Rose::Message>
```
Message can be configured without icons and navigation links.
export const BasicTemplate = (args) => ({
template: hbs`
<Rose::Message @title={{title}} as |message|>
<message.description>
{{description}}
</message.description>
</Rose::Message>`,
context: args,
});
<Preview>
<Story
name="Basic Message"
height="8rem"
args={{
title: 'No logs received yet',
description:
'Sorry, we could not find the page you were looking for. Navigate to another page with the links below.',
}}
>
{BasicTemplate.bind({})}
</Story>
</Preview>
```handlebars
<Rose::Message @title='No logs received yet' as |message|>
<message.description> Description. </message.description>
</Rose::Message>
```
addons/rose/addon/components/rose/metadata-list/index.stories.mdx
-50
View File
@@ -1,50 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/MetadataList" component="MetadataList" />
# MetadataList
A page section component that allows for a list of metadata items.
```handlebars
<Rose::MetadataList @orientation='vertical' as |list|>
<list.Item @icon='arrow-up' @color='success'>
Text Here
</list.Item>
</Rose::MetadataList>
```
<Preview>
<Story name="MetadataList">
{{
template: hbs`
<Rose::MetadataList as |list|>
<list.Item @icon='clock' @color='success'>
Time Started: xx:xx:xx
</list.Item>
<list.Item @icon='clock' @color='critical'>
Time Ended: xx:xx:xx
</list.Item>
</Rose::MetadataList>
`,
}}
</Story>
</Preview>
<Preview>
<Story name="MetadataList vertical">
{{
template: hbs`
<Rose::MetadataList @orientation='vertical' as |list|>
<list.Item @icon='clock' @color='success'>
Time Started: xx:xx:xx
</list.Item>
<list.Item @icon='clock' @color='critical'>
Time Ended: xx:xx:xx
</list.Item>
</Rose::MetadataList>
`,
}}
</Story>
</Preview>
addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx
-28
View File
@@ -1,28 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Nav/Breadcrumbs" component="Nav/Breadcrumbs" />
# Breadcrumbs Navigation
A breadcrumbs component with links as crumbs.
```handlebars
<Rose::Nav::Breadcrumbs as |breadcrumbs|>
<breadcrumbs.link @route='about'>Level 1</breadcrumbs.link>
<breadcrumbs.link @route='index'>Level 2</breadcrumbs.link>
</Rose::Nav::Breadcrumbs>
```
export const Template = (args) => ({
template: hbs`
<Rose::Nav::Breadcrumbs as |breadcrumbs|>
<breadcrumbs.link @route='about'>Level 1</breadcrumbs.link>
<breadcrumbs.link @route='index'>Level 2</breadcrumbs.link>
</Rose::Nav::Breadcrumbs>`,
context: args,
});
<Preview>
<Story name="Basic Breadcrumbs">{Template.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/nav/link/index.stories.mdx
-22
View File
@@ -1,22 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Nav/Link" component="Nav/Link" />
# Generic Navigation Link
Proxies the built-in `LinkTo` component, applying a class `rose-nav-link`.
```handlebars
<Rose::Nav::Link @route='index'>Text</Rose::Nav::Link>
```
export const Template = (args) => ({
template: hbs`
<Rose::Nav::Link @route='index'>Text</Rose::Nav::Link>`,
context: args,
});
<Preview>
<Story name="Basic Nav Link">{Template.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx
-33
View File
@@ -1,33 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Nav/Sidebar" component="Nav/Sidebar" />
# Sidebar Navigation
A simple navigation component intended for use in the sidebar layout region.
export const Template = (args) => ({
template: hbs`
<Rose::Nav::Sidebar @title={{title}} as |nav|>
<nav.link @route="index" class="active">Item Name</nav.link>
<nav.link @route="index">Item Name</nav.link>
</Rose::Nav::Sidebar>`,
context: args,
});
<Preview>
<Story name="Basic Sidebar Nav" height="8rem" args={{ title: 'Title' }}>
{Template.bind({})}
</Story>
</Preview>
_Note_: do not assign the `active` class directly. This is done by the link
component automatically. We use it in this story for illustrative purposes.
```handlebars
<Rose::Nav::Sidebar @title='Title' as |nav|>
<nav.link @route='index'>Item Name</nav.link>
<nav.link @route='about'>Item Name</nav.link>
</Rose::Nav::Sidebar>
```
addons/rose/addon/components/rose/nav/tabs/index.stories.mdx
-30
View File
@@ -1,30 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Nav/Tabs" component="Nav/Tabs" />
# Tabs Navigation
A simple tabbed navigation component.
```handlebars
<Rose::Nav::Tabs as |nav|>
<nav.link @route='index' class='active'>Text</nav.link>
<nav.link @route='index'>Text</nav.link>
<nav.link @route='index'>Text</nav.link>
</Rose::Nav::Tabs>
```
export const Template = (args) => ({
template: hbs`
<Rose::Nav::Tabs as |nav|>
<nav.link @route='index' class="active">Text</nav.link>
<nav.link @route='index'>Text</nav.link>
<nav.link @route='index'>Text</nav.link>
</Rose::Nav::Tabs>`,
context: args,
});
<Preview>
<Story name="Basic Tabs">{Template.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/notification/index.stories.mdx
-105
View File
@@ -1,105 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Notification" component="Notification" />
# Notification
Notifications come in four semantic styles: `info` (default), `success`,
`warning`, and `error`. Heading text is required. Additional block content
is optional.
Notifications may be made dismissible by passing a `@dismiss` function into
the component. Dismissible notifications _must_ also have `@dismissText`.
This component does not handle dismissal though. Be sure your `@dismiss`
handler takes appropriate action and hides the notification.
```handlebars
<Rose::Notification
@style='info'
@heading='Alert Notification'
@dismiss={{dismissHandler}}
@dismissText='Dismiss'
>
An error occurred.
</Rose::Notification>
```
export const Template = (args) => ({
template: hbs`
<Rose::Notification
@style={{style}}
@heading={{heading}}
@dismiss={{dismiss}}
@dismissText={{dismissText}}
>
{{text}}
</Rose::Notification>`,
context: args,
});
<Preview>
<Story
name="Basic Notification"
args={{
text: 'Some useful information',
heading: 'Notification without dismissal',
style: 'info',
}}
argTypes={{
style: {
control: 'select',
options: ['info', 'success', 'warning', 'error'],
},
}}
>
{Template.bind({})}
</Story>
</Preview>
export const AllNotificationsTemplate = (args) => ({
template: hbs`
<Rose::Notification
@style='info'
@heading='Dismissible Notification'
@dismiss={{dismiss}}
@dismissText='Dismiss'
>
Some useful information.
</Rose::Notification>
<Rose::Notification
@style='success'
@heading='Success'
@dismiss={{dismiss}}
@dismissText='Dismiss'
>
Good job!
</Rose::Notification>
<Rose::Notification
@style='warning'
@heading='Warning'
@dismiss={{dismiss}}
@dismissText='Dismiss'
>
Careful now.
</Rose::Notification>
<Rose::Notification
@style='error'
@heading='Error'
@dismiss={{dismiss}}
@dismissText='Dismiss'
>
An error occurred.
</Rose::Notification>`,
context: args,
});
<Preview>
<Story
name="Basic Notifications with Dismissal"
height="30rem"
argTypes={{ dismiss: { action: 'dismiss' } }}
>
{AllNotificationsTemplate.bind({})}
</Story>
</Preview>
addons/rose/addon/components/rose/separator/index.stories.mdx
-22
View File
@@ -1,22 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Separator" component="Separator" />
# Separator
A simple styled `<hr>` element.
export const Template = (args) => ({
template: hbs`
<Rose::Separator />`,
context: args,
});
<Preview>
<Story name="Basic Separator">{Template.bind({})}</Story>
</Preview>
```handlebars
<Rose::Separator />
```
addons/rose/addon/components/rose/table/index.stories.mdx
-218
View File
@@ -1,218 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta
title="Rose/Table"
component="Table"
argTypes={{
style: {
control: {
type: 'inline-radio',
labels: { '': 'default (none)' },
},
options: ['', 'condensed'],
},
}}
/>
# Table
A table component to display data in structure of rows and columns. It supports `header`, `body` and `footer` optional definitions.
Each definition allows for a table `row` to be defined with either a `cell` or `headerCell` table element.
Rows can be visually hidden, and cells can be shrunk to its content width, and center/right cell alignment is supported.
Cell shrink should be applied to all the cells in a row. Otherwise, the bigger cell with shrink applied will determine the width of the row.
```handlebars
<Rose::Table @style={{style}} as |table|>
<table.header as |header|>
<header.row @hidden={{hideHeaderRow}} as |row|>
<row.headerCell>Address</row.headerCell>
<row.headerCell>Host Set</row.headerCell>
<row.headerCell>Name</row.headerCell>
<row.headerCell @alignCenter={{true}}>Description</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell>host-set-1, host-set-2</row.cell>
<row.cell @shrink={{true}}>optional name</row.cell>
<row.cell @alignCenter={{true}}>description</row.cell>
</body.row>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell>host-set-2</row.cell>
<row.cell @shrink={{true}} @alignCenter={{true}}>optional name</row.cell>
<row.cell @alignRight={{true}}>description</row.cell>
</body.row>
<body.row as |row|>
<row.cell>1.1.1.1</row.cell>
<row.cell>host-set-1</row.cell>
<row.cell @shrink={{true}}>optional name</row.cell>
<row.cell>description</row.cell>
</body.row>
</table.body>
<table.footer as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>
```
export const Template = (args) => ({
template: hbs`
<Rose::Table @style={{style}} as |table|>
<table.header as |header|>
<header.row @hidden={{hideHeaderRow}} as |row|>
<row.headerCell
@shrink={{cellShrink}}
@alignCenter={{cellAlignmentCenter}}
@alignRight={{cellAlignmentRight}}
>Address</row.headerCell>
<row.headerCell
@alignCenter={{cellAlignmentCenter}}
@alignRight={{cellAlignmentRight}}
>Host Set</row.headerCell>
<row.headerCell
@shrink={{cellShrink}}
@alignCenter={{cellAlignmentCenter}}
@alignRight={{cellAlignmentRight}}
>Name</row.headerCell>
<row.headerCell
@alignCenter={{cellAlignmentCenter}}
@alignRight={{cellAlignmentRight}}
>Description</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell @shrink={{cellShrink}}>1.1.1.1</row.cell>
<row.cell>host-set-1, host-set-2</row.cell>
<row.cell @shrink={{cellShrink}}>optional name</row.cell>
<row.cell>description</row.cell>
</body.row>
<body.row as |row|>
<row.cell
@shrink={{cellShrink}}
@alignCenter={{cellAlignmentCenter}}
>1.1.1.1</row.cell>
<row.cell @alignCenter={{cellAlignmentCenter}}>host-set-2</row.cell>
<row.cell
@shrink={{cellShrink}}
@alignCenter={{cellAlignmentCenter}}
>optional name</row.cell>
<row.cell @alignCenter={{cellAlignmentCenter}}>description</row.cell>
</body.row>
<body.row as |row|>
<row.cell
@shrink={{cellShrink}}
@alignRight={{cellAlignmentRight}}
>1.1.1.1</row.cell>
<row.cell @alignRight={{cellAlignmentRight}}>host-set-1</row.cell>
<row.cell
@shrink={{cellShrink}}
@alignRight={{cellAlignmentRight}}
>optional name</row.cell>
<row.cell @alignRight={{cellAlignmentRight}}>description</row.cell>
</body.row>
</table.body>
<table.footer as |footer|>
<footer.row as |row|>
<row.cell>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>`,
context: args,
});
<Preview>
<Story
name="Basic"
args={{
hidehideHeaderRow: false,
cellShrink: false,
cellAlignmentCenter: false,
cellAlignmentRight: false,
style: '',
}}
>
{Template.bind({})}
</Story>
</Preview>
export const KeyValueTemplate = (args) => ({
template: hbs`
<Rose::Table @style={{style}} as |table|>
<table.header as |header|>
<header.row as |row|>
<row.headerCell @shrink={{true}}>Key</row.headerCell>
<row.headerCell colspan='2'>Value</row.headerCell>
</header.row>
</table.header>
<table.body as |body|>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Input @contextual={{true}} as |input|>
<input.field />
</Rose::Form::Input>
</row.cell>
<row.cell @shrink={{true}} @alignRight={{true}}>
<Rose::Button
@style='secondary'
@iconOnly='flight-icons/svg/trash-16'
title='Remove'
>Remove</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Select @name='Test select' as |field|>
<field.field 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>
</field.field>
</Rose::Form::Select>
</row.cell>
<row.cell @shrink={{true}} @alignRight={{true}}>
<Rose::Button @style='secondary'>Add</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Input @contextual={{true}} as |input|>
<input.field />
</Rose::Form::Input>
</row.cell>
<row.cell @alignRight={{true}}>
<Rose::Button @style='secondary'>Add</Rose::Button>
</row.cell>
</body.row>
<body.row as |row|>
<row.cell>Key</row.cell>
<row.cell>
<Rose::Form::Textarea @name='field' readonly={{false}} />
</row.cell>
<row.cell @alignRight={{true}}>
<Rose::Button @style='secondary'>Add</Rose::Button>
</row.cell>
</body.row>
</table.body>
<table.footer @hidden={{true}} as |footer|>
<footer.row as |row|>
<row.cell colspan='3'>Footer</row.cell>
</footer.row>
</table.footer>
</Rose::Table>`,
context: args,
});
<Preview>
<Story name="Basic Key/Value Table">{KeyValueTemplate.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/toolbar/index.stories.mdx
-33
View File
@@ -1,33 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Toolbar" component="Toolbar" />
# Toolbar
Renders a toolbar. Items may be added directly into the toolbar, or within
predefined "regions" for left and right alignment, respectively.
```handlebars
<Rose::Toolbar as |toolbar|>
// place items here
<toolbar.primary>
// place left-aligned items here
</toolbar.primary>
<toolbar.secondary>
// place right-aligned items here
</toolbar.secondary>
</Rose::Toolbar>
```
export const Template = (args) => ({
template: hbs`
<Rose::Toolbar as |toolbar|>
toolbar
</Rose::Toolbar>`,
context: args,
});
<Preview>
<Story name="Toolbar">{Template.bind({})}</Story>
</Preview>
addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
-26
View File
@@ -1,26 +0,0 @@
import { Meta, Story, Preview } from '@storybook/addon-docs';
import { hbs } from 'ember-cli-htmlbars';
<Meta title="Rose/Toolbar/Info" component="Toolbar Info" />
# Toolbar Info
Used to display non-interactive information in a toolbar.
```handlebars
<Rose::Toolbar>
<Rose::Toolbar::Info>30 seconds ago</Rose::Toolbar::Info>
</Rose::Toolbar>
```
export const Template = (args) => ({
template: hbs`
<Rose::Toolbar>
<Rose::Toolbar::Info>30 seconds ago</Rose::Toolbar::Info>
</Rose::Toolbar>`,
context: args,
});
<Preview>
<Story name="Toolbar Info">{Template.bind({})}</Story>
</Preview>
addons/rose/metadata.json
-5
View File
@@ -1,5 +0,0 @@
{
"versions": {
"main": "https://boundary-ui-storybook.vercel.app"
}
}
addons/rose/package.json
-15
View File
@@ -26,9 +26,6 @@
"start": "ember serve",
"test": "ember exam --test-port 0 --split=4 --parallel=1 --random",
"test:ember-compatibility": "ember try:each",
"prestorybook": "yarn build && yarn storybook:build",
"storybook": "start-storybook -p 6006",
"storybook:build": "build-storybook && sb extract",
"precommit": "yarn lint && yarn format && yarn test",
"doc:toc": "doctoc README.md"
},
@@ -57,18 +54,6 @@
"@ember/test-helpers": "^2.8.1",
"@glimmer/component": "^1.1.2",
"@glimmer/tracking": "^1.1.2",
"@storybook/addon-a11y": "~6.4.0",
"@storybook/addon-actions": "~6.4.0",
"@storybook/addon-controls": "~6.4.0",
"@storybook/addon-docs": "~6.4.0",
"@storybook/addons": "~6.4.0",
"@storybook/api": "~6.4.0",
"@storybook/cli": "~6.4.0",
"@storybook/components": "~6.4.0",
"@storybook/core-events": "~6.4.0",
"@storybook/ember": "~6.4.0",
"@storybook/ember-cli-storybook": "^0.6.0",
"@storybook/theming": "~6.4.0",
"babel-loader": "^8.2.5",
"babel-plugin-ember-modules-api-polyfill": "^2.12.0",
"babel-plugin-htmlbars-inline-precompile": "3",
addons/rose/stories/colors.stories.mdx
-447
View File
@@ -1,447 +0,0 @@
import { Meta } from '@storybook/addon-docs';
<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>
addons/rose/stories/sizing.stories.mdx
-130
View File
@@ -1,130 +0,0 @@
import { Meta } from '@storybook/addon-docs';
<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>
addons/rose/stories/typography.stories.mdx
-140
View File
@@ -1,140 +0,0 @@
import { Meta } from '@storybook/addon-docs';
<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>
package.json
-7
View File
@@ -60,28 +60,21 @@
"jpeg-js": "^0.4.4",
"got": "^11.8.5",
"loader-utils": "^2.0.4",
"**/@storybook/**/minimatch": "^3.0.5",
"**/ember-electron/**/minimatch": "^3.0.5",
"**/babel-core/json5": "^2.2.2",
"**/react-syntax-highlighter/refractor/prismjs": "^1.27.0",
"**/@storybook/**/immer": "^9.0.6",
"**/nomnom/underscore": "^1.12.1",
"**/remark-parse/trim": "^1.0.1",
"**/react-dev-utils/browserslist": "^4.16.5",
"**/@storybook/cli/puppeteer-core/ws": "^7.4.6",
"**/pretty-bytes/meow/trim-newlines": "^3.0.1",
"**/ember-cli/**/clean-css-promise/clean-css": "^4.1.11",
"**/bower-config/minimist": "^1.2.6",
"**/commitizen/minimist": "^1.2.6",
"**/@storybook/builder-webpack4/@storybook/core-common/glob-base/glob-parent": "^5.1.2",
"**/@storybook/addon-docs/@storybook/core/@storybook/core-server/cpy/globby/fast-glob/glob-parent": "^5.1.2",
"**/ember-intl/broccoli-merge-files/fast-glob/glob-parent": "^5.1.2",
"**/watchpack/watchpack-chokidar2/chokidar/glob-parent": "^5.1.2",
"**/core/ember-inline-svg/**/nth-check": "^2.0.1",
"**/snapdragon/base/cache-base/**/set-value": "^4.0.1",
"**/@storybook/**/ansi-regex": "^5.0.1",
"**/jsprim/json-schema": "^0.4.0",
"**/@storybook/**/yuidocjs/markdown-it": "^12.3.2",
"**/ember-cli/markdown-it-terminal/markdown-it": "^12.3.2",
"**/ember-cli-mirage/@embroider/macros": "^1.0.0",
"**/rose/**/ember-arg-types/prop-types": "^15.8.1"
yarn.lock
+252 -3920
View File
File diff suppressed because it is too large. Load diff