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