📝(doc) create a global category for Components
This way we ensure that the main categories of the Storybook docs are well separated, improving readability.
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
|
import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs';
|
||||||
import { Button } from "./index";
|
import { Button } from "./index";
|
||||||
|
|
||||||
<Meta title="Button/Default" component={Button}/>
|
<Meta title="Components/Button/Doc" component={Button}/>
|
||||||
|
|
||||||
export const Template = (args) => <Button {...args} />;
|
export const Template = (args) => <Button {...args} />;
|
||||||
|
|
||||||
@@ -10,10 +10,10 @@ export const Template = (args) => <Button {...args} />;
|
|||||||
The Cunningham Button behaves the same as the native html `<button>` element, but with a few extra features.
|
The Cunningham Button behaves the same as the native html `<button>` element, but with a few extra features.
|
||||||
|
|
||||||
<Canvas>
|
<Canvas>
|
||||||
<Story id="button--primary"/>
|
<Story id="components-button--primary"/>
|
||||||
<Story id="button--secondary"/>
|
<Story id="components-button--secondary"/>
|
||||||
<Story id="button--tertiary"/>
|
<Story id="components-button--tertiary"/>
|
||||||
<Story id="button--danger"/>
|
<Story id="components-button--danger"/>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
||||||
<Source
|
<Source
|
||||||
@@ -30,11 +30,11 @@ You can use icons within the button by passing the icon name as a prop.
|
|||||||
> Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
|
> Use the attribute `iconPosition` to position the icon on the left or right side of the button. The default is `left`.
|
||||||
|
|
||||||
<Canvas withSource="open">
|
<Canvas withSource="open">
|
||||||
<Story id="button--icon-left"/>
|
<Story id="components-button--icon-left"/>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
||||||
<Canvas withSource="open">
|
<Canvas withSource="open">
|
||||||
<Story id="button--icon-right"/>
|
<Story id="components-button--icon-right"/>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
||||||
## Disabled
|
## Disabled
|
||||||
@@ -44,7 +44,7 @@ The button can be disabled. The disabled button will render the same no matter w
|
|||||||
> Keep in the mind that a disabled button will never call `onClick` if it is provided.
|
> Keep in the mind that a disabled button will never call `onClick` if it is provided.
|
||||||
|
|
||||||
<Canvas withSource="open">
|
<Canvas withSource="open">
|
||||||
<Story id="button--disabled"/>
|
<Story id="components-button--disabled"/>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|
||||||
## Props
|
## Props
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import React from "react";
|
|||||||
import { Button } from "./index";
|
import { Button } from "./index";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "Button",
|
title: "Components/Button",
|
||||||
component: Button,
|
component: Button,
|
||||||
} as ComponentMeta<typeof Button>;
|
} as ComponentMeta<typeof Button>;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user