Skip to content

Commit

Permalink
doc: preview all buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@pirhoo
pirhoo committed Jul 8, 2024
1 parent 5da64b0 commit 36e6bf1
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 73 deletions.
17 changes: 17 additions & 0 deletions .storybook/preview.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,3 +46,20 @@ pre.prismjs {
.docs-story {
background: var(--bs-body-bg)
}

.btn.pseudo-focus {
box-shadow: var(--bs-btn-active-shadow), var(--bs-btn-focus-box-shadow);
}

.btn.pseudo-hover {
color: var(--bs-btn-hover-color);
background-color: var(--bs-btn-hover-bg);
border-color: var(--bs-btn-hover-border-color);
}

.btn.pseudo-active {
color: var(--bs-btn-active-color);
background-color: var(--bs-btn-active-bg);
border-color: var(--bs-btn-active-border-color);
box-shadow: var(--bs-btn-active-shadow);
}
129 changes: 56 additions & 73 deletions src/stories/layout/Button.stories.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { BButton, BCloseButton } from 'bootstrap-vue-next'
import IconButton from '@/components/IconButton'

export default {
title: 'Layout/Button',
Expand All @@ -13,90 +14,72 @@ export default {
render: (args) => ({
components: {
BButton,
BCloseButton
IconButton
},
setup() {
return {
args
}
},
computed: {
variants() {
return [
'primary',
'secondary',
'tertiary',
'dark',
'light',
'info',
'danger',
'success',
'warning',
'outline-primary',
'outline-secondary',
'outline-tertiary',
'outline-dark',
'outline-light',
'outline-info',
'outline-danger',
'outline-success',
'outline-warning'
]
}
},
template: `
<table class="table">
<thead>
<tr>
<th>State</th>
<th>Base</th>
<th>Primary</th>
<th>outline-secondary</th>
<th>Tertiary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default </td>
<td><b-button v-bind="args" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" >{{args.label}}</b-button></td>
</tr>
<tr>
<td>Hover </td>
<td><b-button v-bind="args" id="hover" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" id="hover">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" id="hover">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" id="hover">{{args.label}}</b-button></td>
</tr>
<tr>
<td>Focus </td>
<td><b-button v-bind="args" class="focus">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" class="focus">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" class="focus">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" class="focus">{{args.label}}</b-button></td>
</tr>
<tr>
<td>Active </td>
<td><b-button v-bind="args" id="active">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" id="active">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" id="active">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" id="active">{{args.label}}</b-button></td>
</tr>
<tr>
<td>Pressed </td>
<td><b-button v-bind="args" pressed>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" pressed>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" pressed>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" pressed>{{args.label}}</b-button></td>
</tr>
<tr>
<td>Disabled </td>
<td><b-button v-bind="args" disabled>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" disabled>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" disabled>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" disabled>{{args.label}}</b-button></td>
</tr>
<tr>
<td>Loading </td>
<td><b-button v-bind="args" loading>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" loading>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" loading>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" loading>{{args.label}}</b-button></td>
</tr>
<tr>
<td>BCloseButton </td>
<td><BCloseButton v-bind="args">{{args.label}}</BCloseButton></td>
<td><BCloseButton v-bind="args" variant="primary">{{args.label}}</BCloseButton></td>
<td><BCloseButton v-bind="args" variant="outline-secondary">{{args.label}}</BCloseButton></td>
<td><BCloseButton v-bind="args" variant="outline-tertiary">{{args.label}}</BCloseButton></td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<tr>
<th>Variant</th>
<th>Normal</th>
<th>Hover</th>
<th>Active/Pressed</th>
<th>Focus</th>
<th>Disabled</th>
<th>Loading</th>
</tr>
</thead>
<tbody>
<template v-for="variant in variants">
<tr :key="variant">
<td>
<code>--bs-{{ variant }}</code>
</td>
<td><b-button v-bind="args" :variant="variant">{{args.label}}</b-button></td>
<td><b-button v-bind="args" :variant="variant" class="hover">{{args.label}}</b-button></td>
<td><b-button v-bind="args" :variant="variant" pressed>{{args.label}}</b-button></td>
<td><b-button v-bind="args" :variant="variant" class="focus">{{args.label}}</b-button></td>
<td><b-button v-bind="args" :variant="variant" disabled>{{args.label}}</b-button></td>
<td><icon-button v-bind="args" :variant="variant" loading>{{args.label}}</b-button></td>
</tr>
</template>
</tbody>
</table>
`
}),
parameters: {
pseudo: {
hover: ['#hover'],
focus: ['.focus'],
active: ['#active']
hover: ['.hover'],
focus: ['.focus']
}
}
}
Expand Down

0 comments on commit 36e6bf1

Please sign in to comment.