Skip to content

Commit 779b89c

Browse files
committed
docs: reorganize storybook documentation section
- separate out the user-facing docs from the contributor docs - relabel pages to better represent content and intent - clean up usage of components in pages to be from V2 set
1 parent b288197 commit 779b89c

File tree

7 files changed

+13
-23
lines changed

7 files changed

+13
-23
lines changed

.storybook/components/Docs/GettingStarted.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Since EDS provides many color tokens, it may prove useful to add some integratio
3838
- Install the [CSS Var Complete - VS Code Plugin](https://marketplace.visualstudio.com/items?itemName=phoenisx.cssvar) which provides better Intellisense while writing CSS and referencing CSS variables.
3939
- Add the following settings in your workspace settings file:
4040

41-
```jsonc
41+
```json
4242
{
4343
// ...rest of the settings here
4444
"cssvar.files": [

.storybook/components/Docs/Guidelines/CodeGuidelines.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Canvas, Meta } from '@storybook/blocks';
22

3-
<Meta title="Documentation/Guidelines/Code Guidelines" />
3+
<Meta title="Documentation/Contributor Guidelines/Code Guidelines" />
44

55
# Code Guidelines
66

.storybook/components/Docs/Guidelines/Components.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Canvas, Meta } from '@storybook/blocks';
22

3-
<Meta title="Documentation/Guidelines/Components" />
3+
<Meta title="Documentation/Contributor Guidelines/Adding Components" />
44

55
# Working with EDS Components
66

.storybook/components/Docs/Guidelines/Icons.stories.mdx

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,11 @@
11
import { Canvas, Meta } from '@storybook/blocks';
22

3-
<Meta title="Documentation/Guidelines/Icons" />
3+
<Meta title="Documentation/Contributor Guidelines/Adding Icons" />
44

55
# Icons
66

77
EDS provides utilitarian UI icons (e.g. magnifying glass, menu, triangles, carets, and so on). "Branded" or content-specific icons are not provided by EDS.
88

9-
## Using Icons
10-
11-
There are several ways to use EDS icons in an application. The first and most direct way is to reach for the `Icon` component.
12-
13-
```jsx
14-
<Icon name="icon-name" />
15-
```
16-
17-
View the "Icon Grid" story in Storybook for a visualization of all available icons to pass into the `name` prop.
18-
199
---
2010

2111
## Working with Icons
Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { Canvas, Meta } from '@storybook/blocks';
2-
import {InlineNotification} from "../../../../src";
2+
import {InlineNotificationV2 as InlineNotification} from "../../../../src";
33

4-
<Meta title="Documentation/Guidelines/Layout" />
4+
<Meta title="Documentation/Defining Layout" />
55

66
# Layout
77

8-
<InlineNotification text="The layout components are being deprecated in favor of using TailwindCSS" variant="warning" />
9-
108
Please refer to our documentation [on ZeroHeight](https://eds.czi.design/styleguide/s/36770/p/17f0a9-layout/b/66febf)
119
for suggested alternatives and patterns.
1210

@@ -18,12 +16,14 @@ For more information on what TailwindCSS supplies, check out the following links
1816

1917
## Spacing and alignment
2018

21-
EDS components do not include margin properties as spacing between components should be handled primarily with
22-
tailwind utility classes or similar custom classes.
19+
EDS components do not include margin properties as spacing between components should be handled primarily with
20+
utility classes or similar custom classes.
21+
22+
<InlineNotification title="TODO-AH: define and document internal/external spacing tokens"/>
2323

2424
However, it's important to be able to control spacing between components, so EDS works well with tailwind utility
2525
classes like [margin](https://tailwindcss.com/docs/margin).
2626

2727
```jsx
28-
<InlineNotification text="lorem ipsum dolor sit amet" variant="success" className="mb-5" />
28+
<InlineNotification title="lorem ipsum dolor sit amet" className="mb-5" />
2929
```

.storybook/components/Docs/Guidelines/Tokens.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Canvas, Meta } from '@storybook/blocks';
22

3-
<Meta title="Documentation/Guidelines/Tokens" />
3+
<Meta title="Documentation/Contributor Guidelines/Using Tokens" />
44

55
# Design Tokens
66

.storybook/components/Docs/Guidelines/Typography.stories.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Canvas, Meta } from '@storybook/blocks';
22

3-
<Meta title="Documentation/Guidelines/Typography" />
3+
<Meta title="Documentation/Contributor Guidelines/Using Typography" />
44

55
# Typography
66

0 commit comments

Comments
 (0)