Skip to content

Commit

Permalink
docs: reorganize storybook documentation section (#1928)
Browse files Browse the repository at this point in the history
- 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
  • Loading branch information
booc0mtaco authored May 2, 2024
1 parent b288197 commit d04e33e
Show file tree
Hide file tree
Showing 7 changed files with 13 additions and 23 deletions.
2 changes: 1 addition & 1 deletion .storybook/components/Docs/GettingStarted.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Since EDS provides many color tokens, it may prove useful to add some integratio
- 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.
- Add the following settings in your workspace settings file:

```jsonc
```json
{
// ...rest of the settings here
"cssvar.files": [
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Canvas, Meta } from '@storybook/blocks';

<Meta title="Documentation/Guidelines/Code Guidelines" />
<Meta title="Documentation/Contributor Guidelines/Code Guidelines" />

# Code Guidelines

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Canvas, Meta } from '@storybook/blocks';

<Meta title="Documentation/Guidelines/Components" />
<Meta title="Documentation/Contributor Guidelines/Adding Components" />

# Working with EDS Components

Expand Down
12 changes: 1 addition & 11 deletions .storybook/components/Docs/Guidelines/Icons.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
import { Canvas, Meta } from '@storybook/blocks';

<Meta title="Documentation/Guidelines/Icons" />
<Meta title="Documentation/Contributor Guidelines/Adding Icons" />

# Icons

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.

## Using Icons

There are several ways to use EDS icons in an application. The first and most direct way is to reach for the `Icon` component.

```jsx
<Icon name="icon-name" />
```

View the "Icon Grid" story in Storybook for a visualization of all available icons to pass into the `name` prop.

---

## Working with Icons
Expand Down
14 changes: 7 additions & 7 deletions .storybook/components/Docs/Guidelines/Layout.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Canvas, Meta } from '@storybook/blocks';
import {InlineNotification} from "../../../../src";
import {InlineNotificationV2 as InlineNotification} from "../../../../src";

<Meta title="Documentation/Guidelines/Layout" />
<Meta title="Documentation/Defining Layout" />

# Layout

<InlineNotification text="The layout components are being deprecated in favor of using TailwindCSS" variant="warning" />

Please refer to our documentation [on ZeroHeight](https://eds.czi.design/styleguide/s/36770/p/17f0a9-layout/b/66febf)
for suggested alternatives and patterns.

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

## Spacing and alignment

EDS components do not include margin properties as spacing between components should be handled primarily with
tailwind utility classes or similar custom classes.
EDS components do not include margin properties as spacing between components should be handled primarily with
utility classes or similar custom classes.

<InlineNotification title="TODO-AH: define and document internal/external spacing tokens"/>

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

```jsx
<InlineNotification text="lorem ipsum dolor sit amet" variant="success" className="mb-5" />
<InlineNotification title="lorem ipsum dolor sit amet" className="mb-5" />
```
2 changes: 1 addition & 1 deletion .storybook/components/Docs/Guidelines/Tokens.stories.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Canvas, Meta } from '@storybook/blocks';

<Meta title="Documentation/Guidelines/Tokens" />
<Meta title="Documentation/Contributor Guidelines/Using Tokens" />

# Design Tokens

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Canvas, Meta } from '@storybook/blocks';

<Meta title="Documentation/Guidelines/Typography" />
<Meta title="Documentation/Contributor Guidelines/Using Typography" />

# Typography

Expand Down

0 comments on commit d04e33e

Please sign in to comment.