Skip to content

Commit

Permalink
deprecate disclosure & share stories
Browse files Browse the repository at this point in the history
  • Loading branch information
basher committed Apr 3, 2024
1 parent 8504294 commit 5cb6520
Show file tree
Hide file tree
Showing 8 changed files with 15 additions and 178 deletions.
22 changes: 0 additions & 22 deletions ui/stories/5. Components/Disclosure/Disclosure.js

This file was deleted.

19 changes: 3 additions & 16 deletions ui/stories/5. Components/Disclosure/Disclosure.mdx
Original file line number Diff line number Diff line change
@@ -1,19 +1,6 @@
import { Meta, Canvas, Controls } from '@storybook/blocks';
import * as Disclosure from './Disclosure.stories';
import { Meta } from '@storybook/blocks';

<Meta of={Disclosure} />
<Meta title="Components/Disclosure (Or Show|Hide)" />

# Disclosure
- Shows/hides content using the HTML `hidden` attribute.
- Use this component when [accordion](/story/components-accordion--accordion) or [tabs](/story/components-tabs--tabs) components cannot be used.
- Also see the [ARIA APG disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).

## Accessibility considerations
- By adding the `data-disclosure-escape-key` attribute to the HTML, the `ESC` key can be used to hide the content.
- Similarly, the `data-disclosure-click-outside` attribute hides the content when clicking anywhere outside the content.

## Web component version
- See the equivalent [`<webui-disclosure>`](/story/web-components-or-custom-elements-webui-disclosure--web-ui-disclosure) custom element.

<Canvas of={Disclosure.Disclosure} />
<Controls of={Disclosure.Disclosure} />
- See the [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs) custom element.
24 changes: 0 additions & 24 deletions ui/stories/5. Components/Disclosure/Disclosure.stories.js

This file was deleted.

77 changes: 0 additions & 77 deletions ui/stories/5. Components/Share/Share.js

This file was deleted.

19 changes: 3 additions & 16 deletions ui/stories/5. Components/Share/Share.mdx
Original file line number Diff line number Diff line change
@@ -1,19 +1,6 @@
import { Meta, Canvas } from '@storybook/blocks';
import * as Share from './Share.stories';
import { Meta } from '@storybook/blocks';

<Meta of={Share} />
<Meta title="Components/Share" />

# Share
- Uses the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share).
- Fallback behaviour uses the [disclosure](/story/components-disclosure-or-show-hide--disclosure) pattern, and allows user to copy the URL.

## Web component version
- See the equivalent [`<webui-share>`](/story/web-components-or-custom-elements-webui-share--web-ui-share) custom element.

## TODO
- Replace fallback [document.execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) with [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API).

<Canvas of={Share.Share} />

## Share another URL
<Canvas of={Share.ShareAnotherUrl} />
- See the [`<webui-share>`](/docs/web-components-or-custom-elements-webui-share--docs) custom element.
19 changes: 0 additions & 19 deletions ui/stories/5. Components/Share/Share.stories.js

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,13 @@ import * as WebUIDisclosure from './WebUIDisclosure.stories';
<Meta of={WebUIDisclosure} />

# `<webui-disclosure>`
- This is functionally equivalent to the [disclosure](/story/components-disclosure-or-show-hide--disclosure) component, with the same accessibility considerations.
- The `data-` attributes that handle the functionality have been subtly renamed.
- Shows/hides content using the HTML `hidden` attribute.
- Use this component when [accordion](/story/components-accordion--accordion) or [tabs](/story/components-tabs--tabs) components cannot be used.
- Also see the [ARIA APG disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).

## Accessibility considerations
- By adding the `data-bind-escape-key` attribute to the HTML, the `ESC` key can be used to hide the content.
- Similarly, the `data-bind-click-outside` attribute hides the content when clicking anywhere outside the content.

<Canvas of={WebUIDisclosure.WebUIDisclosure} />
<Controls of={WebUIDisclosure.WebUIDisclosure} />
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import * as WebUIShare from './WebUIShare.stories';
<Meta of={WebUIShare} />

# `<webui-share>`
- This is functionally equivalent to the [share](/story/components-share--share) component.
- It is a simple `wrapper` around the [`<webui-disclosure>`](/story/web-components-or-custom-elements-webui-disclosure--web-ui-disclosure) custom element.
- Leverages the [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share).
- It is a simple `wrapper` around the [`<webui-disclosure>`](/docs/web-components-or-custom-elements-webui-disclosure--docs) custom element, which provides fallback behaviour, allowing user to copy the URL.

<Canvas of={WebUIShare.WebUIShare} />

Expand Down

0 comments on commit 5cb6520

Please sign in to comment.