Skip to content

Commit

Permalink
chore: Added new button variations to docusaurus STC-740 (#181)
Browse files Browse the repository at this point in the history
  • Loading branch information
@VagnerNico
VagnerNico authored Feb 7, 2022
1 parent d393d87 commit 8a88223
Show file tree
Hide file tree
Showing 3 changed files with 260 additions and 21 deletions.
95 changes: 82 additions & 13 deletions website/docs/components/Button.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,37 +4,66 @@

This is the basic component for all buttons.

### Variants
## Variants

```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<div style={{ alignItems: "center", display: "grid", gridTemplateColumns: "repeat(3, max-content)", gap: 8 }}>
<Button variant="filled">Filled</Button>
<Button variant="filledLight">Filled Light</Button>
<Button variant="plain">Plain</Button>

<Button disabled variant="filled">Filled</Button>
<Button disabled variant="filledLight">Filled Light</Button>
<Button disabled variant="plain">Plain</Button>

<Button loading variant="filled">Filled</Button>
<Button loading variant="filledLight">Filled Light</Button>
<Button loading variant="plain">Plain</Button>
</div>
```

### Colors
## Colors

### Filled
```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button color="success">Success</Button>
<Button color="text">Text</Button>
<div style={{ alignItems: "center", display: "grid", gridTemplateColumns: "repeat(4, max-content)", gap: 8 }}>
<Button variant="filled">Primary</Button>
<Button color="secondary" variant="filled">Secondary</Button>
<Button color="success" variant="filled">Success</Button>
<Button color="text" variant="filled">Text</Button>
</div>
```

### Sizes
### Filled light
```jsx live
<div style={{ alignItems: "center", display: "grid", gridTemplateColumns: "repeat(4, max-content)", gap: 8 }}>
<Button variant="filledLight">Primary</Button>
<Button color="secondary" variant="filledLight">Secondary</Button>
<Button color="success" variant="filledLight">Success</Button>
<Button color="text" variant="filledLight">Text</Button>
</div>
```

### Plain
```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<div style={{ alignItems: "center", display: "grid", gridTemplateColumns: "repeat(4, max-content)", gap: 8 }}>
<Button variant="plain">Primary</Button>
<Button color="secondary" variant="plain">Secondary</Button>
<Button color="success" variant="plain">Success</Button>
<Button color="text" variant="plain">Text</Button>
</div>
```

## Sizes

```jsx live
<div style={{ alignItems: "center", display: "grid", gridTemplateColumns: "repeat(2, max-content)", gap: 8 }}>
<Button size="small">Small</Button>
<Button size="large">Large</Button>
</div>
```

### Disabled
## Disabled

```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
Expand All @@ -45,7 +74,47 @@ This is the basic component for all buttons.
</div>
```

### With Icon
## Loading

### Filled
```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<Button color="primary" loading>Primary</Button>
<Button color="secondary" loading>Secondary</Button>
<Button color="success" loading>Success</Button>
<Button color="text" loading>Text</Button>
</div>
```

### Filled Light
```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<Button color="primary" loading variant="filledLight">Primary</Button>
<Button color="secondary" loading variant="filledLight">Secondary</Button>
<Button color="success" loading variant="filledLight">Success</Button>
<Button color="text" loading variant="filledLight">Text</Button>
</div>
```

### Plain
```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<Button color="primary" loading variant="plain">Primary</Button>
<Button color="secondary" loading variant="plain">Secondary</Button>
<Button color="success" loading variant="plain">Success</Button>
<Button color="text" loading variant="plain">Text</Button>
</div>
```

### Loading with Icon
```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
<Button color="primary" iconName="IconPlus" loading variant="plain" />
<Button color="secondary" iconName="IconRouter" loading>With Text</Button>
</div>
```

## With Icon

```jsx live
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
Expand All @@ -54,7 +123,7 @@ This is the basic component for all buttons.
</div>
```

### With ReactNode children
## With ReactNode children

Please note the use is focused in custom SVG's or custom icons

Expand Down
2 changes: 1 addition & 1 deletion website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"@docusaurus/theme-live-codeblock": "^2.0.0-beta.13",
"@emotion/react": "^11.4.1",
"@mdx-js/react": "^1.6.21",
"@micromed/herz-ui": "latest",
"@micromed/herz-ui": "^0.20.4",
"@svgr/webpack": "^5.5.0",
"clsx": "^1.1.1",
"docusaurus-plugin-react-docgen-typescript": "^0.1.0",
Expand Down
Loading

1 comment on commit 8a88223

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for herzui ready!

✅ Preview
https://herzui-r9c7dwqkt-micromed.vercel.app

Built with commit 8a88223.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.