Skip to content

Commit

Permalink
chore: update API of mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
@jmfrancois
jmfrancois committed Sep 25, 2023
1 parent 4497627 commit f3b8a7c
Show file tree
Hide file tree
Showing 57 changed files with 244 additions and 244 deletions.
2 changes: 1 addition & 1 deletion packages/design-docs/.storybook/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ const STORIES = [
`${rootPath}src/Principles.mdx`,
// `${rootPath}src/Status.mdx`,
// `${rootPath}src/Catalog.mdx`,
`${rootPath}src/tokens/**/*.mdx`,
`${rootPath}src/content/VoiceAndTone.@(js|tsx|mdx)`,
`${rootPath}src/content/Internationalization.@(js|tsx|mdx)`,
`${rootPath}src/content/Conventions.@(js|tsx|mdx)`,
`${rootPath}src/content/Capitalization.@(js|tsx|mdx)`,
`${rootPath}src/content/Wording.@(js|tsx|mdx)`,
`${rootPath}src/tokens/**/*.mdx`,
`${rootPath}../design-system/src/stories/**/*.@(stories.tsx|mdx)`,
// `${rootPath}src/components/**/*.@(stories.tsx|mdx)`,
];
Expand Down
6 changes: 3 additions & 3 deletions packages/design-system/src/stories/clickable/About.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Clickables are just the things that look like buttons. It's a UI pattern that ha
Use `Button` when you need highly readable CTAs that trigger an action on the page.

<Canvas withSource="closed">
<Story story={ButtonVariations} />
<Story of={ButtonVariations} />
</Canvas>

## ButtonAsLinks
Expand All @@ -27,7 +27,7 @@ Use `Button` when you need highly readable CTAs that trigger an action on the pa
Use `ButtonAsLink` when you need a CTA that will navigate to a new page.

<Canvas withSource="closed">
<Story story={ButtonAsLinkVariations} />
<Story of={ButtonAsLinkVariations} />
</Canvas>

## ButtonIcon
Expand All @@ -37,5 +37,5 @@ Use `ButtonAsLink` when you need a CTA that will navigate to a new page.
Use `ButtonIcon` when you need to click on a standalone icon. This should never be a hyperlink.

<Canvas withSource="closed">
<Story story={ButtonIconVariations} />
<Story of={ButtonIconVariations} />
</Canvas>
26 changes: 13 additions & 13 deletions packages/design-system/src/stories/clickable/Button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,53 +38,53 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
/>

<Canvas withSource="closed">
<Story story={Stories.Variations} />
<Story of={Stories.Variations} />
</Canvas>

#### Primary

<Canvas withSource="closed">
<Story story={Stories.PrimaryVariations} />
<Story of={Stories.PrimaryVariations} />
</Canvas>

<Canvas>
<Story story={Stories.Primary} />
<Story of={Stories.Primary} />
</Canvas>

<ArgTypes of={Stories.Primary} />

#### Destructive

<Canvas withSource="closed">
<Story story={Stories.DestructiveVariations} />
<Story of={Stories.DestructiveVariations} />
</Canvas>

<Canvas>
<Story story={Stories.Destructive} />
<Story of={Stories.Destructive} />
</Canvas>

<ArgTypes of={Stories.Destructive} />

#### Secondary

<Canvas withSource="closed">
<Story story={Stories.SecondaryVariations} />
<Story of={Stories.SecondaryVariations} />
</Canvas>

<Canvas>
<Story story={Stories.Secondary} />
<Story of={Stories.Secondary} />
</Canvas>

<ArgTypes of={Stories.Secondary} />

#### Tertiary

<Canvas withSource="closed">
<Story story={Stories.TertiaryVariations} />
<Story of={Stories.TertiaryVariations} />
</Canvas>

<Canvas>
<Story story={Stories.Tertiary} />
<Story of={Stories.Tertiary} />
</Canvas>

<ArgTypes of={Stories.Tertiary} />
Expand All @@ -98,7 +98,7 @@ All buttons have interactive states for "hover", "active" and "disabled". A focu
Use `SkeletonButton` or `Skeleton variant="button"` to represent a placeholder for a button.

<Canvas>
<Story story={Stories.SkeletonButton} />
<Story of={Stories.SkeletonButton} />
</Canvas>

[The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
Expand All @@ -108,7 +108,7 @@ Use `SkeletonButton` or `Skeleton variant="button"` to represent a placeholder f
Buttons can have a tooltip on hover displaying additional description.

<Canvas>
<Story story={Stories.TooltipButton} />
<Story of={Stories.TooltipButton} />
</Canvas>

### Async buttons
Expand All @@ -118,7 +118,7 @@ If the button has an icon, the spinner will temporarily replace this icon as lon
No action will be possible until it's done.

<Canvas>
<Story story={Stories.Loading} />
<Story of={Stories.Loading} />
</Canvas>

## Usage
Expand All @@ -127,7 +127,7 @@ As you've seen, each variant has its own component. But you may want to switch f
You can, using the `<Button>` generic component.

<Canvas>
<Story story={Stories.VariantComponent} />
<Story of={Stories.VariantComponent} />
</Canvas>

Each variant has the same usage rules as their standalone component counterparts seen above.
Expand Down
20 changes: 10 additions & 10 deletions packages/design-system/src/stories/clickable/ButtonAsLink.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,37 +43,37 @@ They are otherwise available in the same sizes and with the same iconset.
/>

<Canvas withSource="closed">
<Story story={Stories.Variations} />
<Story of={Stories.Variations} />
</Canvas>

#### ButtonPrimaryAsLink

<Canvas>
<Story story={Stories.PrimaryAsLink} />
<Story of={Stories.PrimaryAsLink} />
</Canvas>

<ArgTypes of={Stories.PrimaryAsLink} />

#### ButtonDestructiveAsLink

<Canvas>
<Story story={Stories.DestructiveAsLink} />
<Story of={Stories.DestructiveAsLink} />
</Canvas>

<ArgTypes of={Stories.DestructiveAsLink} />

#### ButtonSecondaryAsLink

<Canvas>
<Story story={Stories.SecondaryAsLink} />
<Story of={Stories.SecondaryAsLink} />
</Canvas>

<ArgTypes of={Stories.SecondaryAsLink} />

#### ButtonTertiaryAsLink

<Canvas>
<Story story={Stories.TertiaryAsLink} />
<Story of={Stories.TertiaryAsLink} />
</Canvas>

<ArgTypes of={Stories.TertiaryAsLink} />
Expand All @@ -85,7 +85,7 @@ If you need to switch from one variant to another, using a prop can be easier th
`ButtonAsLink` is a standalone component made just for that.

<Canvas>
<Story story={Stories.VariantComponent} />
<Story of={Stories.VariantComponent} />
</Canvas>

## States
Expand All @@ -103,7 +103,7 @@ The loading state has been removed as well.
Use the same Skeletons as `Button`.

<Canvas>
<Story story={ButtonStories.SkeletonButton} />
<Story of={ButtonStories.SkeletonButton} />
</Canvas>

[The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
Expand All @@ -113,7 +113,7 @@ Use the same Skeletons as `Button`.
ButtonsAsLinks can also have a tooltip on hover displaying additional description.

<Canvas>
<Story story={Stories.TooltipButton} />
<Story of={Stories.TooltipButton} />
</Canvas>

## Content
Expand All @@ -127,13 +127,13 @@ Links in React SPAs are often handled through React Router and similar packages.
Each `ButtonAsLink` is therefore able to shape itself around them, here React Router's `<Link />` for instance:

<Canvas>
<Story story={Stories.ButtonAsRouterLink} />
<Story of={Stories.ButtonAsRouterLink} />
</Canvas>

The usual `ButtonAsLink` collection component also enables the same behaviour, if you prefer props to standalone variants.

<Canvas>
<Story story={Stories.ButtonAsRouterLinkVariant} />
<Story of={Stories.ButtonAsRouterLinkVariant} />
</Canvas>

## Accessibility
Expand Down
20 changes: 10 additions & 10 deletions packages/design-system/src/stories/clickable/ButtonIcon.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,15 @@ It handles the two largest usecases we have for clickable icons: actions and tog
/>

<Canvas withSource="closed">
<Story story={Stories.Variations} />
<Story of={Stories.Variations} />
</Canvas>

#### Default

This is the go-to ButtonIcon for most generic actions.

<Canvas>
<Story story={Stories.DefaultButtonIcon} />
<Story of={Stories.DefaultButtonIcon} />
</Canvas>

#### Toggle
Expand All @@ -58,7 +58,7 @@ If the button needs to hold an active / inactive state, then it is a Toggle.
Don’t use Toggles in series, opt for badge dropdowns instead.

<Canvas>
<Story story={Stories.DefaultButtonIconToggle} />
<Story of={Stories.DefaultButtonIconToggle} />
</Canvas>

#### Floating
Expand All @@ -68,7 +68,7 @@ This variant is only used when the button floats on top of content.
It could be it's sitting on top of a line connecting two nodes, or sticky on top of a draggable scene for instance.

<Canvas>
<Story story={Stories.DefaultButtonIconFloating} />
<Story of={Stories.DefaultButtonIconFloating} />
</Canvas>

## States
Expand All @@ -80,7 +80,7 @@ ButtonIcons can display a "loading" state for asynchronous actions.
Only use when necessary to avoid multiple clicks when the action is not instant.

<Canvas>
<Story story={Stories.Loading} />
<Story of={Stories.Loading} />
</Canvas>

### Skeleton
Expand All @@ -92,7 +92,7 @@ The Loading state is for asynchronous tasks where the Button (and the button onl
Skeleton needs are handled by the Skeleton component. Use `SkeletonButtonIcon` or the right `variant` prop on `Skeleton`.

<Canvas>
<Story story={Stories.ButtonIconSkeletons} />
<Story of={Stories.ButtonIconSkeletons} />
</Canvas>

[The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
Expand All @@ -112,23 +112,23 @@ You have access to three components with curated props for each.
### ButtonIcon

<Canvas>
<Story story={Stories.Default} />
<Story of={Stories.Default} />
</Canvas>

<ArgTypes of={Stories.Default} />

### ButtonIconToggle

<Canvas>
<Story story={Stories.Toggle} />
<Story of={Stories.Toggle} />
</Canvas>

<ArgTypes of={Stories.Toggle} />

### ButtonIconFloating

<Canvas>
<Story story={Stories.Floating} />
<Story of={Stories.Floating} />
</Canvas>

<ArgTypes of={Stories.Floating} />
Expand All @@ -138,7 +138,7 @@ You have access to three components with curated props for each.
Of course all buttons can also use natural `<button>` attributes (but not `classNames` nor `style`).

<Canvas>
<Story story={Stories.NaturalButtonProps} />
<Story of={Stories.NaturalButtonProps} />
</Canvas>

## Accessibility
Expand Down
16 changes: 8 additions & 8 deletions packages/design-system/src/stories/clickable/Link.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,41 +33,41 @@ Still need to be convinced? Please, take the time to read [this article written
### Default

<Canvas>
<Story story={Stories.Default} />
<Story of={Stories.Default} />
</Canvas>

### With icon

<Canvas>
<Story story={Stories.WithIcon} />
<Story of={Stories.WithIcon} />
</Canvas>

### Multi lines

<Canvas>
<Story story={Stories.MultiLines} />
<Story of={Stories.MultiLines} />
</Canvas>

### Disabled

When the link is disabled the whole component is displayed with $opacity.disabled.

<Canvas>
<Story story={Stories.Disabled} />
<Story of={Stories.Disabled} />
</Canvas>

### External

When the link targets a new domain, we add an external-link icon right after.

<Canvas>
<Story story={Stories.External} />
<Story of={Stories.External} />
</Canvas>

Even if it's the same domain, when the link opens in a new window or tab, the title `open in a new tab` is added or appended to an existing title.

<Canvas>
<Story story={Stories.TargetBlank} />
<Story of={Stories.TargetBlank} />
</Canvas>

The attribute `rel="noopener noreferrer"` is added if its target is `_blank`.
Expand All @@ -77,7 +77,7 @@ The attribute `rel="noopener noreferrer"` is added if its target is `_blank`.
In React SPAs, most links are handled by libraries such as React Router. `Link` takes that into account.

<Canvas>
<Story story={Stories.RouterLinkStory} />
<Story of={Stories.RouterLinkStory} />
</Canvas>

### As a button
Expand All @@ -86,7 +86,7 @@ In extreme cases we do not condone, you may need the style of a link but the beh
If your action open a new tab, you can use the `openInNewTab` props to trigger the display of the `external-link` icon, and add `open in a new tab` in the link title.

<Canvas>
<Story story={StoriesButton.LinkAsButtonStory} />
<Story of={StoriesButton.LinkAsButtonStory} />
</Canvas>

<ArgTypes of={StoriesButton.LinkAsButtonStory} />
Expand Down
Loading

0 comments on commit f3b8a7c

Please sign in to comment.