-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'rchavez/APPEALS-53946-storybook8-upgrade' into rchavez/…
…APPEALS-53946-storybook8-upgrade2 Grabe code other branch
- Loading branch information
Showing
105 changed files
with
9,723 additions
and
5,298 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
16.16.0 | ||
18.20.2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,22 @@ | ||
import { addParameters } from '@storybook/react'; | ||
import { Preview } from '@storybook/react'; | ||
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; | ||
|
||
import '../app/styles/app.scss'; | ||
|
||
addParameters({ | ||
docs: { | ||
container: DocsContainer, | ||
page: DocsPage, | ||
}, | ||
}); | ||
//Preview has changed the way addParameters are handle, and addParameters are now | ||
//moved inside a new object called parameters | ||
const tags = ['autodocs']; | ||
|
||
addParameters({ a11y: {} }); | ||
const preview = { | ||
parameters: { | ||
docs: { | ||
container: DocsContainer, | ||
page: DocsPage, | ||
}, | ||
a11y: {}, | ||
}, | ||
}; | ||
|
||
// Generate arguments for any props that start with "on" (onClick, onSubmit, etc) | ||
// This *should* work, but isn't currently on beta.21 | ||
// addParameters({ actions: { argTypesRegex: '^on.*' } }); | ||
export { | ||
preview, | ||
tags | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; | ||
|
||
import { Accordion } from './Accordion'; | ||
import AccordionSection from './AccordionSection'; | ||
|
||
export const defaultProps = {}; | ||
|
||
<Meta | ||
title="Commons/Components/Layout/Accordion" | ||
component={Accordion} | ||
/> | ||
|
||
export const exampleAccordionSection = [1, 2, 3, 4, 5].map((header) => | ||
( | ||
<AccordionSection title={`Example title ${header}`} key={header}> | ||
<p> | ||
Millions of Americans interact with government services every day. | ||
Veterans apply for benefits. Students compare financial aid options. | ||
Small business owners seek loans. Too often, outdated tools and complex | ||
systems make these interactions cumbersome and frustrating. Enter the | ||
United States Digital Service. We partner leading technologists with | ||
dedicated public servants to improve the usability and reliability of | ||
our government's most important digital services. | ||
Visit USDS.gov to learn more. | ||
</p> | ||
</AccordionSection> | ||
) | ||
); | ||
|
||
# Accordion | ||
|
||
Our accordion style was taken from the US Web Design Standards. | ||
Accordions are a list of headers that can be clicked to hide or reveal additional | ||
content. | ||
|
||
### Bordered | ||
|
||
<Preview> | ||
<Story name="bordered"> | ||
<Accordion style="bordered" accordion> | ||
{exampleAccordionSection} | ||
</Accordion> | ||
</Story> | ||
</Preview> | ||
|
||
### Borderless | ||
|
||
<Preview> | ||
<Story name="borderless"> | ||
<Accordion style="borderless" accordion> | ||
{exampleAccordionSection} | ||
</Accordion> | ||
</Story> | ||
</Preview> | ||
|
||
### Bordered Outline | ||
|
||
<Preview> | ||
<Story name="bordered-outline"> | ||
<Accordion style="outline" accordion> | ||
{exampleAccordionSection} | ||
</Accordion> | ||
</Story> | ||
</Preview> | ||
|
||
<Props of={Accordion} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks'; | ||
|
||
import { Actions } from './Actions.stories'; | ||
|
||
<Meta | ||
title="Commons/Components/Layout/Actions" | ||
/> | ||
|
||
# Actions | ||
|
||
For most task-based pages, Primary and Secondary Actions sit under the App Canvas. The number of actions per page should be limited intentionally. These tasks should relate specifically to the user’s goal for the page they are on. | ||
|
||
The actions at the bottom of the page are arranged such as the primary task (the task that takes the user forward) is on the bottom right of the App Canvas. The label of this action usually hints at the title of the next page. Escape actions are placed to the left of the primary action. On the bottom left, of the App Canvas, there will be a back link, preferably with a description of where the user will go to or a link to the main page after a user has completed a task. These are actions that allow the user to move back a step or completely leave the task they’re working on. | ||
|
||
The consistent layout and arrangement of these actions reinforces the users mental model as the use Caseflow. You should avoid placing these actions in other parts of the page without good reason. | ||
|
||
<Canvas> | ||
<Story story={Actions} /> | ||
</Canvas> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { Meta } from '@storybook/addon-docs/blocks'; | ||
|
||
<Meta title="Commons/Components/Layout/App Canvas" /> | ||
|
||
# App Canvas | ||
|
||
Almost all of the interaction in Caseflow takes place in an App Canvas. The content starts off with a page title and | ||
minimal instructions for what the user needs to do to complete their task on the page. It then contains any interaction | ||
that well help this to accomplish their task including forms, document previews, tables, error messages, and more. | ||
The canvas has a default standard width but can be adjusted according to the needs of each application. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; | ||
|
||
import * as ButtonStories from './Button.stories'; | ||
|
||
import Button from './Button'; | ||
|
||
<Meta | ||
title="Commons/Components/Button" | ||
component={Button} | ||
parameters={{ | ||
controls: { expanded: true } | ||
}} | ||
args={{ | ||
children: 'Click Me', | ||
disabled: false, | ||
linkStyling: false, | ||
loading: false, | ||
type: 'button', | ||
name: 'myButton', | ||
}} | ||
argTypes={{ | ||
classNames: { control: { type: 'array' } }, | ||
type: { | ||
control: { type: 'select', options: ['button', 'submit', 'reset'] }, | ||
}, | ||
loading: { control: { type: 'boolean' } }, | ||
onClick: { action: 'clicked' }, | ||
styling: { control: { type: 'object' } }, | ||
}} | ||
/> | ||
|
||
Primary actions are visually prioritized by being solid blue `usa-button` style. | ||
|
||
Finally, there are actions that we generally want to discourage but should remain visible to users as an escape hatch. | ||
|
||
These actions can be `button-link` styles or use the `usa-button-secondary style`. | ||
For example, the “Cancel” button frequently found at the bottom of Caseflow workflow layouts | ||
is usually a button link because it launches a modal. | ||
The button to confirm that a user wants to cancel is red and serves as a warning to the user | ||
that the action is destructive. These styles should be used sparingly. | ||
|
||
The width of the button will vary depending on the length of the content. | ||
In the source code, the buttons are set so that there is always 20px padding on the left | ||
and right of the text. While it is ideal not to change the default setting, in a case where | ||
buttons of various widths are stacked, we highly recommend adjusting the padding of the buttons | ||
so that they all match in width. | ||
|
||
### Primary Button | ||
<Canvas> | ||
<Story story={ButtonStories.Primary} /> | ||
</Canvas> | ||
|
||
### Secondary Button | ||
<Canvas> | ||
<Story story={ButtonStories.Secondary} /> | ||
</Canvas> | ||
|
||
### Disabled Button | ||
<Canvas> | ||
<Story story={ButtonStories.Disabled} /> | ||
</Canvas> | ||
|
||
### Link Button | ||
<Canvas> | ||
<Story story={ButtonStories.Link} /> | ||
</Canvas> | ||
|
||
### Disabled Link Button | ||
<Canvas> | ||
<Story story={ButtonStories.DisabledLink} /> | ||
</Canvas> | ||
|
||
### Loading Button | ||
Our button components are able to react to a *loading* property which, | ||
when *true*, causes the button to show **Loading...** | ||
beside a spinning icon. | ||
|
||
<Canvas> | ||
<Story story={ButtonStories.Loading} /> | ||
</Canvas> |
Oops, something went wrong.