parent
6b4fa1b31a
commit
8d58185480
|
@ -323,6 +323,7 @@
|
|||
"@types/pngjs": "^3.3.2",
|
||||
"@types/podium": "^1.0.0",
|
||||
"@types/prop-types": "^15.5.3",
|
||||
"@types/reach__router": "^1.2.6",
|
||||
"@types/react": "^16.8.0",
|
||||
"@types/react-dom": "^16.8.0",
|
||||
"@types/react-redux": "^6.0.6",
|
||||
|
|
|
@ -4,7 +4,6 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import '@storybook/addon-options/register';
|
||||
import '@storybook/addon-actions/register';
|
||||
import '@storybook/addon-knobs/register';
|
||||
import '@storybook/addon-console';
|
||||
|
|
|
@ -30,8 +30,6 @@ module.exports = {
|
|||
'@storybook/addon-knobs',
|
||||
'@storybook/addon-knobs/react',
|
||||
'@storybook/addon-knobs/register',
|
||||
'@storybook/addon-options',
|
||||
'@storybook/addon-options/register',
|
||||
'@storybook/core',
|
||||
'@storybook/core/dist/server/common/polyfills.js',
|
||||
'@storybook/react',
|
||||
|
|
|
@ -10,35 +10,41 @@ import { ColorDot } from '../color_dot';
|
|||
|
||||
storiesOf('components/Color/ColorDot', module)
|
||||
.addParameters({ info: { propTablesExclude: [EuiIcon] } })
|
||||
.add('color dots', () => [
|
||||
<ColorDot key="1" value="white" />,
|
||||
<ColorDot key="2" value="#000" />,
|
||||
<ColorDot key="3" value="#abcd" />,
|
||||
<ColorDot key="4" value="#aabbcc" />,
|
||||
<ColorDot key="5" value="#aabbccdd" />,
|
||||
<ColorDot key="6" value="rgb(100, 150, 250)" />,
|
||||
<ColorDot key="7" value="rgba(100, 150, 250, .5)" />,
|
||||
])
|
||||
.add('invalid dots', () => [
|
||||
<ColorDot key="1" value="elastic" />,
|
||||
<ColorDot key="2" value="#xyz" />,
|
||||
<ColorDot key="3" value="#ghij" />,
|
||||
<ColorDot key="4" value="#canvas" />,
|
||||
<ColorDot key="5" value="#12345xyz" />,
|
||||
<ColorDot key="6" value="rgb(a,b,c)" />,
|
||||
<ColorDot key="7" value="rgba(w,x,y,z)" />,
|
||||
])
|
||||
.add('color dots with children', () => [
|
||||
<ColorDot key="1" value="#FFF">
|
||||
<EuiIcon type="plusInCircle" color="#000" />
|
||||
</ColorDot>,
|
||||
<ColorDot key="2" value="#666">
|
||||
<EuiIcon type="minusInCircle" color="#fff" />
|
||||
</ColorDot>,
|
||||
<ColorDot key="3" value="rgba(100, 150, 250, .5)">
|
||||
<EuiIcon type="alert" color="#fff" />
|
||||
</ColorDot>,
|
||||
<ColorDot key="4" value="#000">
|
||||
<EuiIcon type="check" color="#fff" />
|
||||
</ColorDot>,
|
||||
]);
|
||||
.add('color dots', () => (
|
||||
<>
|
||||
<ColorDot key="1" value="white" />
|
||||
<ColorDot key="2" value="#000" />
|
||||
<ColorDot key="3" value="#abcd" />
|
||||
<ColorDot key="4" value="#aabbcc" />
|
||||
<ColorDot key="5" value="#aabbccdd" />
|
||||
<ColorDot key="6" value="rgb(100, 150, 250)" />
|
||||
<ColorDot key="7" value="rgba(100, 150, 250, .5)" />
|
||||
</>
|
||||
))
|
||||
.add('invalid dots', () => (
|
||||
<>
|
||||
<ColorDot key="1" value="elastic" />
|
||||
<ColorDot key="2" value="#xyz" />
|
||||
<ColorDot key="3" value="#ghij" />
|
||||
<ColorDot key="4" value="#canvas" />
|
||||
<ColorDot key="5" value="#12345xyz" />
|
||||
<ColorDot key="6" value="rgb(a,b,c)" />
|
||||
<ColorDot key="7" value="rgba(w,x,y,z)" />
|
||||
</>
|
||||
))
|
||||
.add('color dots with children', () => (
|
||||
<>
|
||||
<ColorDot key="1" value="#FFF">
|
||||
<EuiIcon type="plusInCircle" color="#000" />
|
||||
</ColorDot>
|
||||
<ColorDot key="2" value="#666">
|
||||
<EuiIcon type="minusInCircle" color="#fff" />
|
||||
</ColorDot>
|
||||
<ColorDot key="3" value="rgba(100, 150, 250, .5)">
|
||||
<EuiIcon type="alert" color="#fff" />
|
||||
</ColorDot>
|
||||
<ColorDot key="4" value="#000">
|
||||
<EuiIcon type="check" color="#fff" />
|
||||
</ColorDot>
|
||||
</>
|
||||
));
|
||||
|
|
|
@ -57,48 +57,54 @@ storiesOf('components/Color/ColorManager', module)
|
|||
},
|
||||
},
|
||||
})
|
||||
.add('default', () => [
|
||||
<ColorManager key="1" onChange={action('onChange')} value="blue" />,
|
||||
<ColorManager key="2" onChange={action('onChange')} value="#abc" />,
|
||||
<ColorManager key="3" onChange={action('onChange')} value="#abcd" />,
|
||||
<ColorManager key="4" onChange={action('onChange')} value="#abcdef" />,
|
||||
<ColorManager key="5" onChange={action('onChange')} value="#aabbccdd" />,
|
||||
<ColorManager key="6" onChange={action('onChange')} value="rgb(50, 100, 150)" />,
|
||||
<ColorManager key="7" onChange={action('onChange')} value="rgba(50, 100, 150, .5)" />,
|
||||
])
|
||||
.add('invalid colors', () => [
|
||||
<ColorManager key="1" onChange={action('onChange')} value="elastic" />,
|
||||
<ColorManager key="2" onChange={action('onChange')} value="#xyz" />,
|
||||
<ColorManager key="3" onChange={action('onChange')} value="#ghij" />,
|
||||
<ColorManager key="4" onChange={action('onChange')} value="#canvas" />,
|
||||
<ColorManager key="5" onChange={action('onChange')} value="#12345xyz" />,
|
||||
<ColorManager key="6" onChange={action('onChange')} value="rgb(a,b,c)" />,
|
||||
<ColorManager key="7" onChange={action('onChange')} value="rgba(w,x,y,z)" />,
|
||||
])
|
||||
.add('with buttons', () => [
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="1"
|
||||
onAddColor={action('onAddColor')}
|
||||
onChange={action('onChange')}
|
||||
value="#abcdef"
|
||||
/>,
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="2"
|
||||
onChange={action('onChange')}
|
||||
onRemoveColor={action('onRemoveColor')}
|
||||
value="#abcdef"
|
||||
/>,
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="3"
|
||||
onAddColor={action('onAddColor')}
|
||||
onChange={action('onChange')}
|
||||
onRemoveColor={action('onRemoveColor')}
|
||||
value="#abcdef"
|
||||
/>,
|
||||
])
|
||||
.add('default', () => (
|
||||
<>
|
||||
<ColorManager key="1" onChange={action('onChange')} value="blue" />
|
||||
<ColorManager key="2" onChange={action('onChange')} value="#abc" />
|
||||
<ColorManager key="3" onChange={action('onChange')} value="#abcd" />
|
||||
<ColorManager key="4" onChange={action('onChange')} value="#abcdef" />
|
||||
<ColorManager key="5" onChange={action('onChange')} value="#aabbccdd" />
|
||||
<ColorManager key="6" onChange={action('onChange')} value="rgb(50, 100, 150)" />
|
||||
<ColorManager key="7" onChange={action('onChange')} value="rgba(50, 100, 150, .5)" />
|
||||
</>
|
||||
))
|
||||
.add('invalid colors', () => (
|
||||
<>
|
||||
<ColorManager key="1" onChange={action('onChange')} value="elastic" />
|
||||
<ColorManager key="2" onChange={action('onChange')} value="#xyz" />
|
||||
<ColorManager key="3" onChange={action('onChange')} value="#ghij" />
|
||||
<ColorManager key="4" onChange={action('onChange')} value="#canvas" />
|
||||
<ColorManager key="5" onChange={action('onChange')} value="#12345xyz" />
|
||||
<ColorManager key="6" onChange={action('onChange')} value="rgb(a,b,c)" />
|
||||
<ColorManager key="7" onChange={action('onChange')} value="rgba(w,x,y,z)" />
|
||||
</>
|
||||
))
|
||||
.add('with buttons', () => (
|
||||
<>
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="1"
|
||||
onAddColor={action('onAddColor')}
|
||||
onChange={action('onChange')}
|
||||
value="#abcdef"
|
||||
/>
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="2"
|
||||
onChange={action('onChange')}
|
||||
onRemoveColor={action('onRemoveColor')}
|
||||
value="#abcdef"
|
||||
/>
|
||||
<ColorManager
|
||||
hasButtons={true}
|
||||
key="3"
|
||||
onAddColor={action('onAddColor')}
|
||||
onChange={action('onChange')}
|
||||
onRemoveColor={action('onRemoveColor')}
|
||||
value="#abcdef"
|
||||
/>
|
||||
</>
|
||||
))
|
||||
.add('interactive', () => <Interactive />, {
|
||||
info: {
|
||||
inline: true,
|
||||
|
|
|
@ -29,14 +29,18 @@ class Interactive extends React.Component<{}, { value: string }> {
|
|||
}
|
||||
|
||||
storiesOf('components/Color/ColorPalette', module)
|
||||
.add('three colors', () => [
|
||||
<ColorPalette key="1" onChange={action('onChange')} colors={THREE_COLORS} />,
|
||||
<ColorPalette key="2" value="#fff" onChange={action('onChange')} colors={THREE_COLORS} />,
|
||||
])
|
||||
.add('six colors', () => [
|
||||
<ColorPalette key="1" onChange={action('onChange')} colors={SIX_COLORS} />,
|
||||
<ColorPalette key="2" value="#fff" onChange={action('onChange')} colors={SIX_COLORS} />,
|
||||
])
|
||||
.add('three colors', () => (
|
||||
<>
|
||||
<ColorPalette key="1" onChange={action('onChange')} colors={THREE_COLORS} />
|
||||
<ColorPalette key="2" value="#fff" onChange={action('onChange')} colors={THREE_COLORS} />
|
||||
</>
|
||||
))
|
||||
.add('six colors', () => (
|
||||
<>
|
||||
<ColorPalette key="1" onChange={action('onChange')} colors={SIX_COLORS} />
|
||||
<ColorPalette key="2" value="#fff" onChange={action('onChange')} colors={SIX_COLORS} />
|
||||
</>
|
||||
))
|
||||
.add('six colors, wrap at 4', () => (
|
||||
<ColorPalette value="#fff" onChange={action('onChange')} colors={SIX_COLORS} colorsPerRow={4} />
|
||||
))
|
||||
|
|
|
@ -35,15 +35,14 @@
|
|||
"@kbn/pm": "1.0.0",
|
||||
"@kbn/test": "1.0.0",
|
||||
"@kbn/utility-types": "1.0.0",
|
||||
"@mattapperson/slapshot": "1.2.3",
|
||||
"@storybook/addon-actions": "^5.1.11",
|
||||
"@mattapperson/slapshot": "1.4.0",
|
||||
"@storybook/addon-actions": "^5.2.6",
|
||||
"@storybook/addon-console": "^1.2.1",
|
||||
"@storybook/addon-info": "^5.1.11",
|
||||
"@storybook/addon-knobs": "^5.1.11",
|
||||
"@storybook/addon-options": "^5.1.11",
|
||||
"@storybook/addon-storyshots": "^5.1.11",
|
||||
"@storybook/react": "^5.1.11",
|
||||
"@storybook/theming": "^5.1.11",
|
||||
"@storybook/addon-info": "^5.2.6",
|
||||
"@storybook/addon-knobs": "^5.2.6",
|
||||
"@storybook/addon-storyshots": "^5.2.6",
|
||||
"@storybook/react": "^5.2.6",
|
||||
"@storybook/theming": "^5.2.6",
|
||||
"@types/angular": "^1.6.56",
|
||||
"@types/archiver": "^3.0.0",
|
||||
"@types/base64-js": "^1.2.5",
|
||||
|
@ -99,10 +98,6 @@
|
|||
"@types/reduce-reducers": "^0.3.0",
|
||||
"@types/redux-actions": "^2.2.1",
|
||||
"@types/sinon": "^7.0.13",
|
||||
"@types/storybook__addon-actions": "^3.4.3",
|
||||
"@types/storybook__addon-info": "^4.1.2",
|
||||
"@types/storybook__addon-knobs": "^5.0.3",
|
||||
"@types/storybook__react": "^4.0.2",
|
||||
"@types/styled-components": "^3.0.2",
|
||||
"@types/supertest": "^2.0.5",
|
||||
"@types/tar-fs": "^1.16.1",
|
||||
|
|
Loading…
Reference in a new issue