diff --git a/.storybook/main.js b/.storybook/main.js
index d936a18..9023cb2 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -5,7 +5,6 @@ module.exports = {
"../src/dzeio/**/*.stories.@(js|jsx|ts|tsx)",
],
"addons": [
- "@storybook/addon-links",
"@storybook/addon-essentials"
],
typescript: {
@@ -13,8 +12,8 @@ module.exports = {
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
- shouldExtractLiteralValuesFromEnum: true,
- propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+ shouldExtractLiteralValuesFromEnum: true,
+ propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
presets: [path.resolve(__dirname, "./next.js")]
diff --git a/.storybook/next.js b/.storybook/next.js
index d0ea12d..2ecc559 100644
--- a/.storybook/next.js
+++ b/.storybook/next.js
@@ -24,6 +24,7 @@ module.exports = {
use: ['style-loader', {
loader: 'css-loader',
options: {
+ url: false,
importLoaders: 1,
modules: true
},
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5d00c02..875d184 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,5 @@
+import '../src/dzeio/general.styl'
export const parameters = {
- actions: { argTypesRegex: "^on[A-Z].*" },
+ layout: 'centered'
}
\ No newline at end of file
diff --git a/src/dzeio/Fieldset/Fieldset.module.styl b/src/dzeio/Fieldset/Fieldset.module.styl
index 159d938..3f0c7e6 100644
--- a/src/dzeio/Fieldset/Fieldset.module.styl
+++ b/src/dzeio/Fieldset/Fieldset.module.styl
@@ -2,7 +2,7 @@
.fieldset
border-radius 4px
- border 2px solid grey
+ border 2px solid $grayDark
transition all $transition
margin 0
diff --git a/src/dzeio/Fieldset/Fieldset.stories.tsx b/src/dzeio/Fieldset/Fieldset.stories.tsx
new file mode 100644
index 0000000..537e67a
--- /dev/null
+++ b/src/dzeio/Fieldset/Fieldset.stories.tsx
@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+import Input from '../Input'
+
+export default {
+ title: 'DZEIO/Fieldset',
+ component: Component,
+ argTypes: {
+ title: { control: 'text'}
+ }
+} as Meta
+
+export const Basic = (args: any) => (
+
+)
diff --git a/src/dzeio/Input/Input.module.styl b/src/dzeio/Input/Input.module.styl
index 7b56d75..54fee44 100644
--- a/src/dzeio/Input/Input.module.styl
+++ b/src/dzeio/Input/Input.module.styl
@@ -34,7 +34,7 @@
left 16px // input padding-left
~ label
- left 16px + 24px + 16px
+ left 16px + 24px + 10px
&.right
right 16px
@@ -68,6 +68,7 @@
display flex
opacity 0
transition all $transition
+ overflow-x hidden
pointer-events none
// display flex
flex-direction column
@@ -109,10 +110,12 @@
@media (prefers-color-scheme dark)
background lighten(lighten($foregroundDark, 5%), 20%)
+ div + .autocomplete
+ top calc(100% - 4px - .9em)
- input:focus + .autocomplete
- select:focus + .autocomplete
- textarea:focus + .autocomplete
+ input:focus ~ .autocomplete
+ select:focus ~ .autocomplete
+ textarea:focus ~ .autocomplete
.autocomplete:hover
opacity 1
pointer-events inherit
@@ -122,7 +125,7 @@
textarea
padding 14px 16px
height 56px
- border 2px solid rgba(black, .3)
+ border 2px solid $grayDark
border-radius 4px
max-width 100%
box-sizing border-box
@@ -132,20 +135,9 @@
transition all $transition
color black
@media (prefers-color-scheme dark)
- border-color rgba(white, .3)
+ border-color $grayLight
color white
- &:not(:disabled):hover
- border-color black
- @media (prefers-color-scheme dark)
- border-color white
-
- + svg
- color black
-
- @media (prefers-color-scheme dark)
- color white
-
&:not(:placeholder-shown)
&:focus
&:not([placeholder=" "])
@@ -168,27 +160,47 @@
~ label
color #999
- &:invalid
- border-color $danger
+ &:not(:disabled)
+ &:hover
+ border-color black
+ @media (prefers-color-scheme dark)
+ border-color white
- ~ label
- color @border-color
+ + svg
+ color black
- ~ svg
- color @border-color
- &:focus
- border-color $default
+ @media (prefers-color-scheme dark)
+ color white
+ &:focus
+ border-color $main
- ~ label
- color @border-color
+ ~ label
+ color @border-color
+
+ ~ svg
+ color @border-color
+ &:invalid
+ border-color $errorLight
+
+ ~ label
+ color @border-color
+
+ ~ svg
+ color @border-color
+ @media (prefers-color-scheme dark)
+ border-color $errorDark
+
+ ~ label
+ color @border-color
+
+ ~ svg
+ color @border-color
- ~ svg
- color @border-color
&.iconLeft
- padding-left 16px + 24px + 16px
+ padding-left 16px + 24px + 10px
&.iconRight
- padding-right 16 + 24 + 16px
+ padding-right 16 + 24 + 10px
&.filled
border none
background rgba(gray, .1)
@@ -235,12 +247,12 @@
padding 0
font-size .75rem
~ svg.left ~ label
- left 16px + 24px + 16px // .input/padding-left label/padding-left
+ left 16px + 24px + 10px // .input/padding-left label/padding-left
~ svg.rotate
transform rotateX(0)
transition $transition
- &:hover:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate
+ &:focus ~ svg.rotate, ~.autocomplete:hover ~ svg.rotate
transform rotateX(180deg)
div
display flex
diff --git a/src/dzeio/Input/Input.stories.tsx b/src/dzeio/Input/Input.stories.tsx
index 86e7ac1..ed8431d 100644
--- a/src/dzeio/Input/Input.stories.tsx
+++ b/src/dzeio/Input/Input.stories.tsx
@@ -1,10 +1,29 @@
import { Meta } from '@storybook/react/types-6-0'
+import { Story } from "@storybook/react"
import React from 'react'
import Component from '.'
+import { X } from 'react-feather'
export default {
title: 'DZEIO/Input',
component: Component
} as Meta
-export const Basic = (args: any) =>
+export const Basic: Story = (args: any) =>
+
+let tmp = Basic.bind({})
+tmp.args = {label: 'Label', helper: 'Helper', maxLength: 6, characterCount: true, icon: X}
+
+export const Normal = tmp
+
+tmp = Basic.bind({})
+tmp.args = {label: 'Label', filled:true, helper: 'Helper', autocomplete: ['a', 'b', 'cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc'], characterCount: true, icon: X}
+
+export const AutoComplete = tmp
+
+export const Select: Story = (args: any) =>
+
+
+
+
+
\ No newline at end of file
diff --git a/src/dzeio/Input/index.tsx b/src/dzeio/Input/index.tsx
index 24cab51..3fab53f 100644
--- a/src/dzeio/Input/index.tsx
+++ b/src/dzeio/Input/index.tsx
@@ -5,6 +5,7 @@ import Text from '../Text'
import { IconProps } from '../interfaces'
import { buildClassName } from '../Util'
import css from './Input.module.styl'
+import Row from '../Row'
interface Props extends React.DetailedHTMLProps, HTMLInputElement> {
id?: string
@@ -37,6 +38,8 @@ interface States {
export default class Input extends React.Component {
+ public state: States = {}
+
// any because f*ck types
private inputRef: React.RefObject = React.createRef()
private parentRef: React.RefObject = React.createRef()
@@ -50,11 +53,14 @@ export default class Input extends React.Component {
}
if (this.props.autocomplete) {
window.addEventListener('scroll', this.parentScroll)
+ this.parentScroll()
}
}
public componentWillUnmount() {
- window.removeEventListener('scroll', this.parentScroll)
+ if (this.props.autocomplete) {
+ window.removeEventListener('scroll', this.parentScroll)
+ }
}
public render() {
@@ -65,7 +71,9 @@ export default class Input extends React.Component {
delete props.opaque
delete props.helper
delete props.infinityText
+ delete props.autocomplete
delete props.filled
+ delete props.iconRight
delete props.inputRef
delete props.selectRef
delete props.block
@@ -77,7 +85,7 @@ export default class Input extends React.Component {
ref: this.props.inputRef || this.inputRef,
className: buildClassName(
[css.iconLeft, this.props.icon],
- [css.iconRight, this.props.iconRight],
+ [css.iconRight, this.props.iconRight || this.props.autocomplete],
[css.filled, this.props.filled],
[css.opaque, this.props.opaque]
),
@@ -94,7 +102,7 @@ export default class Input extends React.Component {
input = (