diff --git a/.storybook/main.js b/.storybook/main.js index ac044ac..7fb98f7 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,7 +3,7 @@ const webpack = require('webpack') module.exports = { "stories": [ - "../src/dzeio/**/*.stories.@(ts|tsx)", + "../src/dzeio/**/*.stories.tsx", ], "addons": [ "@storybook/addon-essentials" diff --git a/.storybook/public/16-16.svg b/.storybook/public/16-16.svg new file mode 100644 index 0000000..df1f5c0 --- /dev/null +++ b/.storybook/public/16-16.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/dzeio/Button/Button.module.styl b/src/dzeio/Button/Button.module.styl index 7e125c9..f6cc76e 100644 --- a/src/dzeio/Button/Button.module.styl +++ b/src/dzeio/Button/Button.module.styl @@ -15,6 +15,7 @@ border-radius 4px border none justify-content center + align-items center color $textOnMain background-color $main @@ -24,9 +25,6 @@ // Link specific text-decoration none - &.nomargintop - margin-top 0 - &.outline border 2px solid @background-color padding 8px 18px // @padding - @border @@ -36,7 +34,7 @@ &:hover &:active &:focus - color @color + color $textOnMain &:hover background-color @background-color @@ -46,6 +44,12 @@ &:active &:focus background-color darken(@background-color, 30%) + + &.block + display flex + width 100% + margin 0 + margin-top 8px &.large padding 15px 30px @@ -61,11 +65,8 @@ &.outline padding 3px 8px // @padding - @border - &.block - display flex - width 100% - margin 0 - margin-top 8px + &.nomargintop + margin-top 0 &:disabled background $grayLight @@ -124,11 +125,17 @@ btn($color, $theme) &.outline color @background-color border-color @background-color + // background none &:hover &:active &:focus - color @color + color $textColor + + if $theme is 'darken' + &:active + &:focus + background-color darken(@color, 30%) &:hover background-color @background-color diff --git a/src/dzeio/Button/Button.stories.tsx b/src/dzeio/Button/Button.stories.tsx index b27976f..455fead 100644 --- a/src/dzeio/Button/Button.stories.tsx +++ b/src/dzeio/Button/Button.stories.tsx @@ -1,5 +1,6 @@ import { Meta } from '@storybook/react/types-6-0' import React from 'react' +import { Zap } from 'react-feather' import Component from '.' export default { @@ -8,3 +9,19 @@ export default { } as Meta export const Basic = (args: any) => Button +Basic.args = { + nomargintop: true, + icon: Zap, + size: 'small', + href: '/pouet', + block: true +} + +export const WithImg = (args: any) => Button +WithImg.args = { + nomargintop: true, + icon: '/16-16.svg', + size: 'small', + href: '/pouet', + block: true +} diff --git a/src/dzeio/Button/index.tsx b/src/dzeio/Button/index.tsx index bc750e8..e054301 100644 --- a/src/dzeio/Button/index.tsx +++ b/src/dzeio/Button/index.tsx @@ -14,7 +14,8 @@ interface Props { color?: ColorType children?: React.ReactNode icon?: FC | string - size?: 'large' | 'small' | 'block' + size?: 'large' | 'small' + block?: boolean href?: string as?: string disabled?: boolean @@ -33,9 +34,9 @@ export default class Button extends React.Component { inner = ( <> {typeof Icon === 'string' ? ( - + ) : ( - + )} {this.props.children && ( {this.props.children} @@ -48,6 +49,7 @@ export default class Button extends React.Component { [css.button], [css[this.props.color as string], this.props.color], [css.outline, this.props.outline], + [css.block, this.props.block], [css[this.props.size as string], this.props.size], [css.nomargintop, this.props.nomargintop], [css.loading, this.props.loading] diff --git a/src/dzeio/Image/Image.module.styl b/src/dzeio/Image/Image.module.styl index ffbc3d0..02cb3e7 100644 --- a/src/dzeio/Image/Image.module.styl +++ b/src/dzeio/Image/Image.module.styl @@ -1,5 +1,6 @@ .parent position relative + display inline-flex .image transition .3s