Skip to content

Commit

Permalink
feat(react,styles): add Notice component (#1136)
Browse files Browse the repository at this point in the history 
---------

Co-authored-by: Tom Busillo <[email protected]>
  • Loading branch information
@tbusillo
tbusillo and tbusillo authored Aug 2, 2023
1 parent b103453 commit 14bfe32
Show file tree
Hide file tree
Showing 9 changed files with 444 additions and 76 deletions.
152 changes: 152 additions & 0 deletions docs/pages/components/Notice.mdx
View file
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)
120 changes: 44 additions & 76 deletions docs/pages/components/Toast.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,173 +4,136 @@ description: A banner with text positioned at the top of the page.
source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/Toast/index.tsx
---

import { useState } from 'react'
import { Toast, Button } from '@deque/cauldron-react'
import { useState } from 'react';
import { Toast, Button } from '@deque/cauldron-react';

```js
import { Toast } from '@deque/cauldron-react'
import { Toast } from '@deque/cauldron-react';
```

## Examples

<Note>
Only a single toast should be rendered at a given moment as additional toasts will stack on top of each other.
Only a single toast should be rendered at a given moment as additional toasts
will stack on top of each other.
</Note>

### Confirmation

```jsx example
function ConfirmationToastExample() {
const [show, setShow] = useState(false)
const [show, setShow] = useState(false);
return (
<>
<Toast
show={show}
type="confirmation"
onDismiss={() => setShow(false)}
>
<Toast show={show} type="confirmation" onDismiss={() => setShow(false)}>
Your toast is ready!
</Toast>
<Button
variant="secondary"
onClick={() => setShow(true)}
>
<Button variant="secondary" onClick={() => setShow(true)}>
Show Confirmation Toast
</Button>
</>
)
);
}
```

### Caution

```jsx example
function CautionToastExample() {
const [show, setShow] = useState(false)
const [show, setShow] = useState(false);
return (
<>
<Toast
show={show}
type="caution"
onDismiss={() => setShow(false)}
>
<Toast show={show} type="caution" onDismiss={() => setShow(false)}>
Your toast is getting toasty...
</Toast>
<Button
variant="secondary"
onClick={() => setShow(true)}
>
<Button variant="secondary" onClick={() => setShow(true)}>
Show Caution Toast
</Button>
</>
)
);
}
```

### Action Needed

```jsx example
function ActionNeededToastExample() {
const [show, setShow] = useState(false)
const [show, setShow] = useState(false);
return (
<>
<Toast
show={show}
type="action-needed"
>
<Toast show={show} type="action-needed">
You burnt the toast! Check yourself before you wreck yourself...
<Button variant="link" onClick={() => setShow(false)}>Ok</Button>
<Button variant="link" onClick={() => setShow(false)}>
Ok
</Button>
</Toast>
<Button
variant="secondary"
onClick={() => setShow(true)}
>
<Button variant="secondary" onClick={() => setShow(true)}>
Show Action Needed Toast
</Button>
</>
)
);
}
```

### Info

```jsx example
function InfoToastExample() {
const [show, setShow] = useState(false)
const [show, setShow] = useState(false);
return (
<>
<Toast
show={show}
type="info"
onDismiss={() => setShow(false)}
>
<Toast show={show} type="info" onDismiss={() => setShow(false)}>
It is getting toasty in here!
</Toast>
<Button
variant="secondary"
onClick={() => setShow(true)}
>
<Button variant="secondary" onClick={() => setShow(true)}>
Show Info Toast
</Button>
</>
)
);
}
```

### Error

```jsx example
function ErrorToastExample() {
const [show, setShow] = useState(false)
const [show, setShow] = useState(false);
return (
<>
<Toast
show={show}
type="error"
onDismiss={() => setShow(false)}
>
<Toast show={show} type="error" onDismiss={() => setShow(false)}>
This toast tastes like toast!
</Toast>
<Button
variant="secondary"
onClick={() => setShow(true)}
>
<Button variant="secondary" onClick={() => setShow(true)}>
Show Error Toast
</Button>
</>
)
);
}
```

### Non-dismissible

Non-dismissable toasts are shown inline to prevent clipping of content.


```jsx example
function NonDismissibleToastExample() {
const [show, setShow] = useState(true)
const [show, setShow] = useState(true);
return (
<>
<Toast
show={show}
type="info"
dismissible={false}
focus={false}
>
This toast is not dismissible by normal methods.
But you can <Button variant="link" onClick={() => setShow(false)}>click me to dismiss this toast</Button>.
<Toast show={show} type="info" dismissible={false} focus={false}>
This toast is not dismissible by normal methods. But you can{' '}
<Button variant="link" onClick={() => setShow(false)}>
click me to dismiss this toast
</Button>
.
</Toast>
{!show && (
<Button
variant="secondary"
onClick={() => setShow(true)}
>
<Button variant="secondary" onClick={() => setShow(true)}>
Show Non-dismissible Toast
</Button>
)}
</>
)
);
}
```

Expand All @@ -189,13 +152,14 @@ function NonDismissibleToastExample() {
name: 'show',
type: 'boolean',
defaultValue: 'false',
description: 'Whether or not to show the toast.',
description: 'Whether or not to show the toast.'
},
{
name: 'focus',
type: 'boolean',
defaultValue: 'true',
description: 'Whether or not to focus the toast. This will also set the toast to `role="alert"` when set to true.'
description:
'Whether or not to focus the toast. This will also set the toast to `role="alert"` when set to true.'
},
{
name: 'onDismiss',
Expand All @@ -221,3 +185,7 @@ function NonDismissibleToastExample() {
}
]}
/>

## Related

- [Notice](./Notice)
Loading

0 comments on commit 14bfe32

Please sign in to comment.