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

* feat: 🎸 Add handlebars registration for syntax highlighting (#1378)

Browse Source 
* feat: 🎸 Add handlebars registration for syntax highlighting

* style: 💄 Use handlebars format

* style: 💄 Reformat mdx files

* style: 💄 Fix broken formatting from merge
This commit is contained in:
Zhihe Li authored and GitHub committed 2022-10-14 11:25:27 -04:00
1 parent 4fd9e41cc6
commit 8571951548
47 files changed
+196 -174
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

addons/rose/.storybook/preview.js
+5
View File
@@ -0,0 +1,5 @@
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import handlebars from 'react-syntax-highlighter/dist/esm/languages/prism/handlebars';
// Registers and enables handlebars language support
SyntaxHighlighter.registerLanguage('handlebars', handlebars);
addons/rose/addon/components/rose/anonymous/index.stories.mdx
+1 -1
View File
@@ -14,7 +14,7 @@ This component should not be instantiated directly.
For example, layout components may yield an anonymous component to configure
various layout regions:
```htmlbars
```handlebars
<div ...attributes class='rose-layout-global'>
{{yield
(hash
addons/rose/addon/components/rose/badge/index.stories.mdx
+5 -4
View File
@@ -12,10 +12,11 @@ When style definition isn't supplied, a default style will be supplied.
Styles: outline, dark, informational, informational-outline, success, success-outline, error, error-outline, warning, warning-outline, alert, alert-outline
```html
<Rose::Badge @style="outline" @icon="flight-icons/svg/org-16"
>Badge</Rose::Badge
>
```handlebars
<Rose::Badge
@style='outline'
@icon='flight-icons/svg/org-16'
>Badge</Rose::Badge>
```
<Preview>
addons/rose/addon/components/rose/button/index.stories.mdx
+1 -1
View File
@@ -11,7 +11,7 @@ A simple button component that renders an HTML `<button>` element. May be used
to trigger actions or to submit forms. Avoid using buttons as simple links to
other routes. For accessibility, use links instead.
```htmlbars
```handlebars
<Rose::Button @style='primary' @iconRight='flight-icons/svg/entry-point-16'>
Action
</Rose::Button>
addons/rose/addon/components/rose/card/link/index.stories.mdx
+6 -6
View File
@@ -8,13 +8,13 @@ import { text, select } from '@storybook/addon-knobs';
Card link component wraps content with `LinkTo` component. Supports title and description.
```html
```handlebars
<Rose::Card::Link
@title="Card title"
@description="Card description"
@id="resource_id_1234"
@icon="flight-icons/svg/org-16"
@route="about"
@title='Card title'
@description='Card description'
@id='resource_id_1234'
@icon='flight-icons/svg/org-16'
@route='about'
/>
```
addons/rose/addon/components/rose/cards/index.stories.mdx
+1 -1
View File
@@ -56,7 +56,7 @@ A set of cards arranged side-by-side.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Cards as |cards|>
<cards.link
@route='index'
addons/rose/addon/components/rose/code-editor/index.stories.mdx
+2 -2
View File
@@ -9,8 +9,8 @@ import { hbs } from 'ember-cli-htmlbars';
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.
```html
<CodeEditor @codeValue="{{this.codeIWantToSee}}" as |c|>
```handlebars
<CodeEditor @codeValue={{this.codeIWantToSee}} as |c|>
<c.toolbar />
<c.fieldEditor />
</CodeEditor>
addons/rose/addon/components/rose/dialog/cover/index.stories.mdx
+1 -1
View File
@@ -30,7 +30,7 @@ Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Dialog::Cover>
<:header>
<h2>Cover Header</h2>
addons/rose/addon/components/rose/dialog/index.stories.mdx
+1 -1
View File
@@ -53,7 +53,7 @@ A dialog component with optional modal capabilities.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Dialog
@modal={{true}}
@dismiss={{@dismissFn}}
addons/rose/addon/components/rose/dropdown/index.stories.mdx
+45 -46
View File
@@ -91,33 +91,32 @@ A simple dropdown component with support for links and buttons.
</Story>
</Preview>
```html
<Rose::Dropdown @text="Choose One&hellip;" as |dropdown|>
<dropdown.link @route="index">Menu item</dropdown.link>
<dropdown.link @route="about">Menu item</dropdown.link>
```handlebars
<Rose::Dropdown @text='Choose One&hellip;' 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"
@title='Dropdown Section Title'
@icon='flight-icons/svg/tag-16'
>
<dropdown.link @route="index">Menu item</dropdown.link>
<dropdown.link @route='index'>Menu item</dropdown.link>
</dropdown.section>
</Rose::Dropdown>
```
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.
```html
```handlebars
<Rose::Dropdown
@text="Choose One&hellip;"
style="float: right"
@dropdownRight="{{true}}"
as
|dropdown|
@text='Choose One&hellip;'
style='float: right'
@dropdownRight={{true}}
as |dropdown|
>
<dropdown.link @route="index">Menu item</dropdown.link>
<dropdown.link @route="about">Menu item</dropdown.link>
<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>
@@ -125,23 +124,22 @@ Dropdown content can be aligned to right edge of the component instead of the de
Dropdown supports `danger` styling through `style` attribute.
```html
<Rose::Dropdown @text="Dropdown" as |dropdown|>
<dropdown.link @style="danger">Link - danger</dropdown.link>
<dropdown.button @style="danger">Button - danger</dropdown.button>
```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.
```html
```handlebars
<Rose::Dropdown
@showCaret="{{true}}"
@icon="flight-icons/svg/more-horizontal-16"
as
|dropdown|
@showCaret={{true}}
@icon='flight-icons/svg/more-horizontal-16'
as |dropdown|
>
<dropdown.link @route="index">Menu item</dropdown.link>
<dropdown.link @route='index'>Menu item</dropdown.link>
<dropdown.button>Button menu item</dropdown.button>
</Rose::Dropdown>
```
@@ -149,43 +147,39 @@ Dropdown indicator can be hidden using `showCaret` attribute.
Dropdowns also support radio buttons and checkboxes. Currently, radio buttons and checkboxes are the only supported
form fields.
```html
```handlebars
<Rose::Form as |form|>
<form.radioGroup @name="color" @selectedValue="red" as |radioGroup|>
<Rose::Dropdown @text="Color" as |dropdown|>
<form.radioGroup @name='color' @selectedValue='red' as |radioGroup|>
<Rose::Dropdown @text='Color' as |dropdown|>
<dropdown.item>
<radioGroup.radio @label="Red" @value="red" />
<radioGroup.radio @label='Red' @value='red' />
</dropdown.item>
<dropdown.item>
<radioGroup.radio @label="Green" @value="green" />
<radioGroup.radio @label='Green' @value='green' />
</dropdown.item>
<dropdown.item>
<radioGroup.radio @label="Blue" @value="blue" />
<radioGroup.radio @label='Blue' @value='blue' />
</dropdown.item>
</Rose::Dropdown>
</form.radioGroup>
</Rose::Form>
```
```html
```handlebars
<Rose::Form as |form|>
<Rose::Dropdown @text="Items" @ignoreClickInside="{{true}}" as |dropdown|>
<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|
@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}}"
/>
<group.checkbox @label={{group.item.name}} value={{group.item.id}} />
</dropdown.item>
</Rose::Form::Checkbox::Group>
</Rose::Dropdown>
</Rose::Form>
```
@@ -230,8 +224,13 @@ form fields.
Closing dropdown after clicking inside it's content can be ignored using `ignoreClickInside`. This is useful when dropdown contains keyvalue items that users need to select/copy/interact with.
```html
<Rose::Dropdown @text="View details" @showCaret={{true}} @ignoreClickInside={{true}} as |dropdown|>
```handlebars
<Rose::Dropdown
@text='View details'
@showCaret={{true}}
@ignoreClickInside={{true}}
as |dropdown|
>
<dropdown.key-value>
<:key>ID</:key>
<:value>cl_nbv9375hLHs</:value>
addons/rose/addon/components/rose/footer/index.stories.mdx
+4 -4
View File
@@ -9,13 +9,13 @@ import { text } from '@storybook/addon-knobs';
A footer component that allows four distinct sections to be configured: brand, nav, and text.
```html
```handlebars
<Rose::Footer as |footer|>
<footer.brand @logo="logo" @text="Product Name" />
<footer.brand @logo='logo' @text='Product Name' />
<footer.text>Text</footer.text>
<footer.nav as |nav|>
<nav.link @route="index">Section</nav.link>
<nav.link @href="index">Section</nav.link>
<nav.link @route='index'>Section</nav.link>
<nav.link @href='index'>Section</nav.link>
</footer.nav>
</Rose::Footer>
```
addons/rose/addon/components/rose/form/actions/index.stories.mdx
+6 -7
View File
@@ -12,14 +12,13 @@ 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.
```html
```handlebars
<Rose::Form::Actions
@submitText="Save"
@cancelText="Cancel"
@showCancel="{{true}}"
@submitDisabled="{{false}}"
@cancel="(fn"
@cancel)
@submitText='Save'
@cancelText='Cancel'
@showCancel={{true}}
@submitDisabled={{false}}
@cancel={{@cancel}}
/>
```
addons/rose/addon/components/rose/form/checkbox/group/index.stories.mdx
+2 -2
View File
@@ -9,7 +9,7 @@ import { text, boolean, select, object } from '@storybook/addon-knobs';
Renders a form checkboxfield group.
```htmlbars
```handlebars
<Rose::Form::Checkbox::Group
@name='checkbox-group'
@items={{this.items}}
@@ -54,7 +54,7 @@ Renders a form checkboxfield group.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Form::Checkbox::Group
@name='checkbox-group'
@items={{this.items}}
addons/rose/addon/components/rose/form/checkbox/index.stories.mdx
+2 -2
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a form input checkbox.
```htmlbars
```handlebars
<Rose::Form::Checkbox
@name='boolean-value'
@label='Yes?'
@@ -73,7 +73,7 @@ Renders a form input checkbox.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Form::Checkbox
@name='boolean-value'
@label='Yes?'
addons/rose/addon/components/rose/form/errors/index.stories.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { text, boolean } from '@storybook/addon-knobs';
Use this component to display one or more error messages.
```html
```handlebars
<Rose::Form::Errors as |errors|>
<errors.message>An error message goes here.</errors.message>
<errors.message>Another message goes here.</errors.message>
addons/rose/addon/components/rose/form/errors/message/index.stories.mdx
+1 -1
View File
@@ -11,7 +11,7 @@ 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.
```html
```handlebars
<Rose::Form::Errors::Message>
An error message goes here.
</Rose::Form::Errors::Message>
addons/rose/addon/components/rose/form/fieldset/index.stories.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a simple fieldset with title, description and body and an optional helperText
```html
```handlebars
<Rose::Form::Fieldset @helperText={{helperText}}>
<:title>Title</:title>
<:description>Description</:description>
addons/rose/addon/components/rose/form/helper-text/index.stories.mdx
+4 -4
View File
@@ -10,11 +10,11 @@ import { text, boolean } from '@storybook/addon-knobs';
Displays helpful messages related to a form field. This component is used
by form fields and should not be used directly.
```html
```handlebars
<Rose::Form::HelperText
@id="helper-text-{{field.id}}"
@link="link"
@linkText="link text goes here"
@id='helper-text-{{field.id}}'
@link='link'
@linkText='link text goes here'
>
Helper text
</Rose::Form::HelperText>
addons/rose/addon/components/rose/form/index.stories.mdx
+1 -1
View File
@@ -79,7 +79,7 @@ and actions.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Form
@onSubmit={{this.submit}}
@cancel={{this.cancel}}
addons/rose/addon/components/rose/form/input/index.stories.mdx
+2 -2
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a simple form input.
```htmlbars
```handlebars
<Rose::Form::Input
@type='email'
@name='email'
@@ -27,7 +27,7 @@ Renders a simple form input.
Or a fully contextual component without a wrapper, for maximum flexibility.
```htmlbars
```handlebars
<Rose::Form::Input
@contextual={{true}}
@type='email'
addons/rose/addon/components/rose/form/label/index.stories.mdx
+1 -1
View File
@@ -10,7 +10,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a simple form label. This componet is used and yielded by form fields
and should not be used directly.
```htmlbars
```handlebars
<Rose::Form::Label @for='my-field-id'>
Form Label
</Rose::Form::Label>
addons/rose/addon/components/rose/form/radio/card/index.stories.mdx
+2 -2
View File
@@ -8,7 +8,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a form radiofield in a Wide format.
```htmlbars
```handlebars
<Rose::Form::Radio::Card
@label='Yes'
@error={{false}}
@@ -55,7 +55,7 @@ Renders a form radiofield in a Wide format.
Renders a form radiofield in a tile format.
```htmlbars
```handlebars
<Rose::Form::Radio::Card
@label='Yes'
@error={{false}}
addons/rose/addon/components/rose/form/radio/group/index.stories.mdx
+3 -3
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a form radiofield group.
```htmlbars
```handlebars
<Rose::Form::Radio::Group
@disabled={{false}}
@name={{name}}
@@ -77,7 +77,7 @@ Renders a form radiofield group.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Form::Radio::Group
@disabled={{false}}
@name={{name}}
@@ -181,7 +181,7 @@ Renders a form radiofield group.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Form::Radio::Group
@disabled={{false}}
@name={{name}}
addons/rose/addon/components/rose/form/radio/radio/index.stories.mdx
+2 -2
View File
@@ -8,7 +8,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a form radiofield.
```htmlbars
```handlebars
<Rose::Form::Radio::Radio
@label='Yes'
@error={{false}}
@@ -61,7 +61,7 @@ Renders a form radiofield.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Form::Radio::Radio
@label='Yes'
@error={{false}}
addons/rose/addon/components/rose/form/select/index.stories.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a form select element.
```htmlbars
```handlebars
<Rose::Form::Select
@name='select-name'
@value='green'
addons/rose/addon/components/rose/form/textarea/index.stories.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a simple form textarea.
```htmlbars
```handlebars
<Rose::Form::Textarea
@name='field'
@value='Descriptive content'
addons/rose/addon/components/rose/frame/index.stories.mdx
+1 -1
View File
@@ -30,7 +30,7 @@ Prerequisite: `ember-named-blocks-polyfill` must be installed in your app's
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Frame>
<:header>
<h2>Frame Header</h2>
addons/rose/addon/components/rose/header/index.stories.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
A header component that allows three distinct sections to be configured: brand, nav, and utilities.
```htmlbars
```handlebars
<Rose::Header as |header|>
<header.brand @logo='logo' @text='Product Name' />
addons/rose/addon/components/rose/icon/index.stories.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Renders a simple icon.
```htmlbars
```handlebars
<Rose::Icon @name={{name}} @size={{size}} />
```
addons/rose/addon/components/rose/layout/centered/index.stories.mdx
+1 -1
View File
@@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
A left and right centered layout/positioning component.
```htmlbars
```handlebars
<Rose::Layout::Centered>
Centered
</Rose::Layout::Centere>
addons/rose/addon/components/rose/layout/global/index.stories.mdx
+1 -1
View File
@@ -8,7 +8,7 @@ import { hbs } from 'ember-cli-htmlbars';
A top-level layout/positioning component that allows three distinct sections to
be configured: header, body, and footer.
```html
```handlebars
<Rose::Layout::Global as |layout|>
<layout.header />
<layout.body />
addons/rose/addon/components/rose/layout/page/index.stories.mdx
+1 -1
View File
@@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
A page layout/positioning component that allows five distinct sections to be configured: breadcrumbs, header, actions, navigation, and body.
```htmlbars
```handlebars
<Rose::Layout::Page as |page|>
<page.breadcrumbs />
<page.header />
addons/rose/addon/components/rose/layout/sidebar/index.stories.mdx
+1 -1
View File
@@ -10,7 +10,7 @@ import { text, boolean, select } from '@storybook/addon-knobs';
A top-level layout/positioning component that allows two distinct sections to
be configured: sidebar and body.
```htmlbars
```handlebars
<Rose::Layout::Sidebar as |layout|>
<layout.sidebar>
sidebar content
addons/rose/addon/components/rose/link-button/index.stories.mdx
+8 -8
View File
@@ -11,11 +11,11 @@ An achor 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.
```html
```handlebars
<Rose::LinkButton
@route="index"
@style="primary"
@iconRight="flight-icons/svg/entry-point-16"
@route='index'
@style='primary'
@iconRight='flight-icons/svg/entry-point-16'
>
Content
</Rose::LinkButton>
@@ -74,11 +74,11 @@ Disabling link button is not supported as it is an action on form components onl
Similar to `Rose::Button`, icon only link button is supported.
```html
```handlebars
<Rose::LinkButton
@route="index"
@style="primary"
@iconOnly="flight-icons/svg/help-16"
@route='index'
@style='primary'
@iconOnly='flight-icons/svg/help-16'
/>
```
addons/rose/addon/components/rose/list/key-value/index.stories.mdx
+10 -11
View File
@@ -57,7 +57,7 @@ A simple key/value list with support for embedded form fields and buttons.
</Story>
</Preview>
```html
```handlebars
<Rose::List::KeyValue as |list|>
<list.item as |item|>
<item.key>Key</item.key>
@@ -72,9 +72,9 @@ A simple key/value list with support for embedded form fields and buttons.
<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|>
{{! 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>
@@ -83,12 +83,12 @@ A simple key/value list with support for embedded form fields and buttons.
<input.field />
</item.cell>
<item.cell>
<Rose::Button @style="secondary">Add</Rose::Button>
<Rose::Button @style='secondary'>Add</Rose::Button>
</item.cell>
</list.item>
</Rose::Form::Input>
<Rose::Form::Input @contextual="{{true}}" as |input|>
<Rose::Form::Input @contextual={{true}} as |input|>
<list.item as |item|>
<item.key>
<input.label>Key</input.label>
@@ -98,11 +98,10 @@ A simple key/value list with support for embedded form fields and buttons.
</item.cell>
<item.cell>
<Rose::Button
@style="secondary"
@iconOnly="flight-icons/svg/trash-16"
title="Remove"
>Remove</Rose::Button
>
@style='secondary'
@iconOnly='flight-icons/svg/trash-16'
title='Remove'
>Remove</Rose::Button>
</item.cell>
</list.item>
</Rose::Form::Input>
addons/rose/addon/components/rose/message/index.stories.mdx
+10 -11
View File
@@ -48,23 +48,22 @@ Title can be configured with optional icon and subtitle.
</Story>
</Preview>
```html
```handlebars
<Rose::Message
@title="Page not found"
@subtitle="Error 404"
@icon="flight-icons/svg/alert-circle-16"
as
|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" />
<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>
<message.link @route='index'>Need help?</message.link>
</Rose::Message>
```
@@ -91,8 +90,8 @@ Message can be configured without icons and navigation links.
</Story>
</Preview>
```html
<Rose::Message @title="No logs received yet" as |message|>
```handlebars
<Rose::Message @title='No logs received yet' as |message|>
<message.description> Description. </message.description>
</Rose::Message>
```
addons/rose/addon/components/rose/nav/breadcrumbs/index.stories.mdx
+3 -3
View File
@@ -8,10 +8,10 @@ import { action } from '@storybook/addon-actions';
A breadcrumbs component with links as crumbs.
```html
```handlebars
<Rose::Nav::Breadcrumbs as |breadcrumbs|>
<breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
<breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
<breadcrumbs.link @route='about'>Level 1</breadcrumbs.link>
<breadcrumbs.link @route='index'>Level 2</breadcrumbs.link>
</Rose::Nav::Breadcrumbs>
```
addons/rose/addon/components/rose/nav/link/index.stories.mdx
+2 -2
View File
@@ -9,8 +9,8 @@ import { text, boolean, select } from '@storybook/addon-knobs';
Proxies the built-in `LinkTo` component, applying a class `rose-nav-link`.
```html
<Rose::Nav::Link @route="index">Text</Rose::Nav::Link>
```handlebars
<Rose::Nav::Link @route='index'>Text</Rose::Nav::Link>
```
<Preview>
addons/rose/addon/components/rose/nav/sidebar/sidebar.stories.mdx
+1 -1
View File
@@ -28,7 +28,7 @@ A simple navigation component intended for use in the sidebar layout region.
_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.
```htmlbars
```handlebars
<Rose::Nav::Sidebar @title='Title' as |nav|>
<nav.link @route='index'>Item Name</nav.link>
<nav.link @route='about'>Item Name</nav.link>
addons/rose/addon/components/rose/nav/tabs/index.stories.mdx
+4 -4
View File
@@ -9,11 +9,11 @@ import { text, boolean, select } from '@storybook/addon-knobs';
A simple tabbed navigation component.
```html
```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>
<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>
```
addons/rose/addon/components/rose/notification/index.stories.mdx
+1 -1
View File
@@ -16,7 +16,7 @@ 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.
```htmlbars
```handlebars
<Rose::Notification
@style='info'
@heading='Alert Notification'
addons/rose/addon/components/rose/separator/index.stories.mdx
+1 -1
View File
@@ -20,6 +20,6 @@ A simple styled `<hr>` element.
</Story>
</Preview>
```htmlbars
```handlebars
<Rose::Separator />
```
addons/rose/addon/components/rose/table/index.stories.mdx
+9 -11
View File
@@ -10,35 +10,33 @@ A table component to display data in structure of rows and columns. It supports
Cell shrink should be applied to all the cells in a row. Otherwise the bigger cell with shrink applied will determinate the width of the row.
```html
<Rose::Table @style="{{style}}" as |table|>
```handlebars
<Rose::Table @style={{style}} as |table|>
<table.header as |header|>
<header.row @hidden="{{hideHeaderRow}}" as |row|>
<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>
<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>
<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>
<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 @shrink={{true}}>optional name</row.cell>
<row.cell>description</row.cell>
</body.row>
</table.body>
addons/rose/addon/components/rose/toolbar/index.stories.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ import { action } from '@storybook/addon-actions';
Renders a toolbar. Items may be added directly into the toolbar, or within
predefined "regions" for left and right alignment, respectively.
```htmlbars
```handlebars
<Rose::Toolbar as |toolbar|>
// place items here
<toolbar.primary>
addons/rose/addon/components/rose/toolbar/info/index.stories.mdx
+1 -1
View File
@@ -8,7 +8,7 @@ import { action } from '@storybook/addon-actions';
Used to display non-interactive information in a toolbar.
```htmlbars
```handlebars
<Rose::Toolbar>
<Rose::Toolbar::Info>30 seconds ago</Rose::Toolbar::Info>
</Rose::Toolbar>
addons/rose/package.json
+2
View File
@@ -20,6 +20,7 @@
"format": "npm-run-all format:*",
"format:hbs": "prettier --write '{addon,tests}/**/*.hbs'",
"format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js",
"format:mdx": "prettier --write 'addon/**/*.mdx'",
"format:sass": "prettier --write addon/**/*.scss",
"start": "ember serve",
"test": "ember test",
@@ -99,6 +100,7 @@
"qunit-dom": "^2.0.0",
"react": "^16",
"react-dom": "^16",
"react-syntax-highlighter": "^15.5.0",
"sass": "^1.41.0",
"sass-lint": "^1.13.1",
"webpack": "^5.59.1"
yarn.lock
+34 -14
View File
@@ -9696,9 +9696,9 @@ caniuse-api@^3.0.0:
lodash.uniq "^4.5.0"
caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001157, caniuse-lite@^1.0.30001400:
version "1.0.30001414"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz#5f1715e506e71860b4b07c50060ea6462217611e"
integrity sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==
version "1.0.30001419"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001419.tgz#3542722d57d567c8210d5e4d0f9f17336b776457"
integrity sha512-aFO1r+g6R7TW+PNQxKzjITwLOyDhVRLjW0LcwS/HCZGUUKTGNp9+IwLC4xyDSZBygVL/mxaFR3HIV6wEKQuSzw==
capture-exit@^2.0.0:
version "2.0.0"
@@ -18832,7 +18832,7 @@ lowercase-keys@^2.0.0:
resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
lowlight@^1.14.0:
lowlight@^1.14.0, lowlight@^1.17.0:
version "1.20.0"
resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
@@ -21761,7 +21761,7 @@ printf@^0.6.1:
resolved "https://registry.yarnpkg.com/printf/-/printf-0.6.1.tgz#b9afa3d3b55b7f2e8b1715272479fc756ed88650"
integrity sha512-is0ctgGdPJ5951KulgfzvHGwJtZ5ck8l042vRkV6jrkpBzTmb/lueTqguWHy2JfVA+RY6gFVlaZgUS0j7S/dsw==
prismjs@^1.21.0, prismjs@^1.27.0, prismjs@~1.24.0:
prismjs@^1.21.0, prismjs@^1.27.0, prismjs@~1.24.0, prismjs@~1.27.0:
version "1.29.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
@@ -22381,6 +22381,17 @@ react-syntax-highlighter@^13.5.3:
prismjs "^1.21.0"
refractor "^3.1.0"
react-syntax-highlighter@^15.5.0:
version "15.5.0"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz#4b3eccc2325fa2ec8eff1e2d6c18fa4a9e07ab20"
integrity sha512-+zq2myprEnQmH5yw6Gqc8lD55QHnpKaU8TOcFeC/Lg/MQSs8UknEA0JC4nTZGFAXC2J2Hyj/ijJ7NlabyPi2gg==
dependencies:
"@babel/runtime" "^7.3.1"
highlight.js "^10.4.1"
lowlight "^1.17.0"
prismjs "^1.27.0"
refractor "^3.6.0"
react-textarea-autosize@^8.3.0:
version "8.3.3"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
@@ -22678,6 +22689,15 @@ refractor@^3.1.0:
parse-entities "^2.0.0"
prismjs "~1.24.0"
refractor@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a"
integrity sha512-MY9W41IOWxxk31o+YvFCNyNzdkc9M20NoZK5vq6jkv4I/uh2zkWcfudj0Q1fovjUQJrNewS9NMzeTtqPf+n5EA==
dependencies:
hastscript "^6.0.0"
parse-entities "^2.0.0"
prismjs "~1.27.0"
regenerate-unicode-properties@^10.0.1:
version "10.0.1"
resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56"
@@ -23775,9 +23795,9 @@ shebang-regex@^3.0.0:
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
shell-quote@1.7.2, shell-quote@^1.6.1, shell-quote@^1.7.3:
version "1.7.3"
resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
version "1.7.4"
resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.4.tgz#33fe15dee71ab2a81fcbd3a52106c5cfb9fb75d8"
integrity sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==
shelljs@^0.6.0, shelljs@^0.8.4, shelljs@^0.8.5:
version "0.8.5"
@@ -24003,9 +24023,9 @@ socks-proxy-agent@^6.0.0:
socks "^2.6.2"
socks@^2.3.3:
version "2.7.0"
resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.0.tgz#f9225acdb841e874dca25f870e9130990f3913d0"
integrity sha512-scnOe9y4VuiNUULJN72GrM26BNOjVsfPXI+j+98PkyEfsIXroa5ofyjT+FzGvn/xHs73U2JtoBYAVx9Hl4quSA==
version "2.7.1"
resolved "https://registry.yarnpkg.com/socks/-/socks-2.7.1.tgz#d8e651247178fde79c0663043e07240196857d55"
integrity sha512-7maUZy1N7uo6+WVEX6psASxtNlKaNVMlGQKkG/63nEDdLOWNbiUMoLK7X4uYoLhQstau72mLgfEWcXcwsaHbYQ==
dependencies:
ip "^2.0.0"
smart-buffer "^4.2.0"
@@ -25083,9 +25103,9 @@ terser-webpack-plugin@^5.1.3:
terser "^5.7.2"
terser@^4.1.2, terser@^4.6.3, terser@^5.14.2, terser@^5.3.0, terser@^5.3.4, terser@^5.7.2:
version "5.15.0"
resolved "https://registry.yarnpkg.com/terser/-/terser-5.15.0.tgz#e16967894eeba6e1091509ec83f0c60e179f2425"
integrity sha512-L1BJiXVmheAQQy+as0oF3Pwtlo4s3Wi1X2zNZ2NxOB4wx9bdS9Vk67XQENLFdLYGCK/Z2di53mTj/hBafR+dTA==
version "5.15.1"
resolved "https://registry.yarnpkg.com/terser/-/terser-5.15.1.tgz#8561af6e0fd6d839669c73b92bdd5777d870ed6c"
integrity sha512-K1faMUvpm/FBxjBXud0LWVAGxmvoPbZbfTCYbSgaaYQaIXI3/TdI7a7ZGA73Zrou6Q8Zmz3oeUTsp/dj+ag2Xw==
dependencies:
"@jridgewell/source-map" "^0.3.2"
acorn "^8.5.0"