-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1146 from dequelabs/release-v5.7.0
chore(cauldron): Release 5.7.0
- Loading branch information
Showing
20 changed files
with
592 additions
and
189 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 |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| --- | ||
| title: NavBar | ||
| description: A navigation bar that contains links to other sections of the website. | ||
| source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/NavBar/NavBar.tsx | ||
| --- | ||
|
|
||
| import { NavBar, NavItem } from '@deque/cauldron-react' | ||
|
|
||
| ```js | ||
| import { NavBar, NavItem } from '@deque/cauldron-react' | ||
| ``` | ||
|
|
||
| The `NavBar` component is intended to be placed directly below the `TopBar` component to display an additional section of navigational links for the current area. | ||
|
|
||
| Under the hood, `NavBar` renders inside of a `nav` element. If there are multiple `nav` elements present on the page be sure to include `aria-label` or `aria-labelledby` to help uniquely identify each nav region. | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Default | ||
|
|
||
| ```jsx example | ||
| <NavBar aria-label="NavBar Example"> | ||
| <NavItem> | ||
| <a href="#">One</a> | ||
| </NavItem> | ||
| <NavItem> | ||
| <a href="#">Two</a> | ||
| </NavItem> | ||
| <NavItem> | ||
| <a href="#">Three</a> | ||
| </NavItem> | ||
| </NavBar> | ||
| ``` | ||
|
|
||
| ### NavBar with Active NavItem | ||
|
|
||
| ```jsx example | ||
| <NavBar aria-label="NavBar with Active NavItem Example"> | ||
| <NavItem active> | ||
| <a href="#">One</a> | ||
| </NavItem> | ||
| <NavItem> | ||
| <a href="#">Two</a> | ||
| </NavItem> | ||
| <NavItem> | ||
| <a href="#">Three</a> | ||
| </NavItem> | ||
| </NavBar> | ||
| ``` | ||
|
|
||
| ### Collapsed | ||
|
|
||
| ```jsx example | ||
| <NavBar aria-label="Collapsed NavBar Example" collapsed={true}> | ||
| <NavItem> | ||
| <a href="#">One</a> | ||
| </NavItem> | ||
| <NavItem> | ||
| <a href="#">Two</a> | ||
| </NavItem> | ||
| <NavItem> | ||
| <a href="#">Three</a> | ||
| </NavItem> | ||
| </NavBar> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| ### NavBar | ||
|
|
||
| <ComponentProps | ||
| children={true} | ||
| className={true} | ||
| props={[ | ||
| { | ||
| name: 'collapsed', | ||
| type: 'boolean', | ||
| defaultValue: 'false', | ||
| description: 'Collapses NavBar into a toggleable hamburger menu with a flyout list of nav items.', | ||
| }, | ||
| { | ||
| name: 'navTriggerLabel', | ||
| type: 'string', | ||
| description: 'Label shown in menu trigger when component is collapsed.', | ||
| defaultValue: 'MAIN MENU' | ||
| }, | ||
| { | ||
| name: 'propId', | ||
| type: 'string', | ||
| description: 'ID passed to aria-controls, so assistive technology knows the trigger controls the menu.', | ||
| defaultValue: 'randomly generated with react-id-generator' | ||
| } | ||
| ]} | ||
| /> | ||
|
|
||
| ### NavItem | ||
|
|
||
| <ComponentProps | ||
| children={true} | ||
| className={true} | ||
| props={[ | ||
| { | ||
| name: 'active', | ||
| type: 'boolean', | ||
| defaultValue: 'false', | ||
| description: 'Indicates that the current NavItem is active.', | ||
| }, | ||
| { | ||
| name: 'aria-current', | ||
| type: ['page', 'step', 'location', 'boolean'], | ||
| description: 'When active, the aria-current value to mark the NavItem as.', | ||
| defaultValue: 'true' | ||
| } | ||
| ]} | ||
| /> | ||
|
|
||
| ## Related Components | ||
|
|
||
| - [TopBar](./TopBar) |
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,152 @@ | ||
| --- | ||
| title: Notice | ||
| description: A notification banner - similar to a Toast, but allows for more flexibile positioning and control. | ||
| source: https://github.com/dequelabs/cauldron/blob/develop/packages/react/src/components/Notice/Notice.tsx | ||
| --- | ||
|
|
||
| import { useState } from 'react'; | ||
| import { Notice, Icon, Button } from '@deque/cauldron-react'; | ||
|
|
||
| ```js | ||
| import { Notice } from '@deque/cauldron-react'; | ||
| ``` | ||
|
|
||
| The `Notice` component is used to display a notification banner. It is similar to the [Toast](./Toast) component, | ||
| but can be used in more flexible ways. | ||
|
|
||
| For example, the `Notice` component can be used to display a notification banner within a [Panel](./Panel) component | ||
| or anywhere else in the DOM without needing to be absolutely/statically positioned. | ||
|
|
||
| ## Examples | ||
|
|
||
| There are two variants of the `Notice` component: `info` and `caution`. The `info` variant is used to display general | ||
| information, while the `caution` variant is used to display a warning. Depending on the variant, the background color | ||
| and icon will change (can be overwritten). | ||
|
|
||
| ### Info | ||
|
|
||
| ```jsx example | ||
| <Notice type="info" title="Information"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor | ||
| sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu | ||
| condimentum sed. | ||
| </Notice> | ||
| ``` | ||
|
|
||
| ### Caution | ||
|
|
||
| ```jsx example | ||
| <Notice type="caution" title="Caution"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor | ||
| sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu | ||
| condimentum sed. | ||
| </Notice> | ||
| ``` | ||
|
|
||
| ### Danger | ||
|
|
||
| ```jsx example | ||
| <Notice type="danger" title="Danger!"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor | ||
| sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu | ||
| condimentum sed. | ||
| </Notice> | ||
| ``` | ||
|
|
||
| ### Thin | ||
|
|
||
| Rendering a `Notice` that appears as a thin bar can be accomplished by only passing a `title` prop, or only passing a child. | ||
|
|
||
| ```jsx example | ||
| <Notice | ||
| type="caution" | ||
| title="Caution, about to tread into dangerous territory" | ||
| /> | ||
| ``` | ||
|
|
||
| ### Notice Title | ||
|
|
||
| ```jsx example | ||
| <Notice type="info" title={<h4>Information</h4>}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor | ||
| sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu | ||
| condimentum sed. | ||
| </Notice> | ||
| ``` | ||
|
|
||
| ### Customizing Icon | ||
|
|
||
| If you would like to customize the preset icon/type variants, the `icon` prop can be used with any [Cauldron | ||
| Icon Type](/components/icon). | ||
|
|
||
| ```jsx example | ||
| <Notice type="caution" title="Dynamo!" icon="bolt"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor | ||
| sem. Aliquam erat volutpat. Donec placerat nisl magna, et faucibus arcu | ||
| condimentum sed. | ||
| </Notice> | ||
| ``` | ||
|
|
||
| ### Dismissable | ||
|
|
||
| ```jsx example | ||
| function DismissableNotice() { | ||
| const [dismissed, setDismissed] = useState(false); | ||
| const handleDismiss = () => { | ||
| setDismissed(true); | ||
| setTimeout(() => setDismissed(false), 2000); | ||
| }; | ||
|
|
||
| return dismissed ? null : ( | ||
| <Notice type="info" title="Information"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at | ||
| porttitor sem. Aliquam erat volutpat. Donec placerat nisl magna, et | ||
| faucibus arcu condimentum sed. | ||
| </p> | ||
| <Button variant="link" onClick={handleDismiss}> | ||
| dismiss | ||
| </Button> | ||
| </Notice> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| <ComponentProps | ||
| children="true" | ||
| props={[ | ||
| { | ||
| name: 'type', | ||
| type: ['info', 'caution', 'danger'], | ||
| defaultValue: 'info', | ||
| description: | ||
| 'Notice preset variant that sets both the background color and Icon type (optionally overwritable)' | ||
| }, | ||
| { | ||
| name: 'title', | ||
| type: [ | ||
| 'string', | ||
| 'number', | ||
| 'ReactElement', | ||
| 'ReactFragment', | ||
| 'ReactPortal' | ||
| ], | ||
| description: | ||
| 'Any valid React node (e.g., string, boolean, ReactElement, etc.)', | ||
| required: true | ||
| }, | ||
| { | ||
| name: 'icon', | ||
| type: ['IconType', 'string'], | ||
| description: | ||
| 'Icon name - by default automatically set to either "info-circle" or "caution" Cauldron icons' | ||
| } | ||
| ]} | ||
| refType="HTMLDivElement" | ||
| /> | ||
|
|
||
| ## Related Components | ||
|
|
||
| - [Toast](./Toast) |
Oops, something went wrong.