Skip to content

Commit

Permalink
Fix types
Browse files Browse the repository at this point in the history
  • Loading branch information
@patrykkopycinski
patrykkopycinski committed Nov 15, 2019
1 parent d09b70e commit 3ed9484
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 82 deletions.
70 changes: 38 additions & 32 deletions x-pack/legacy/plugins/canvas/public/components/color_dot/__examples__/color_dot.examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
));
90 changes: 48 additions & 42 deletions ...cy/plugins/canvas/public/components/color_manager/__examples__/color_manager.examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
20 changes: 12 additions & 8 deletions ...cy/plugins/canvas/public/components/color_palette/__examples__/color_palette.examples.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
))
Expand Down
1 change: 1 addition & 0 deletions x-pack/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"@kbn/test": "1.0.0",
"@kbn/utility-types": "1.0.0",
"@mattapperson/slapshot": "1.4.0",
"@reach/router": "^1.2.1",
"@storybook/addon-actions": "^5.2.6",
"@storybook/addon-console": "^1.2.1",
"@storybook/addon-info": "^5.2.6",
Expand Down

0 comments on commit 3ed9484

Please sign in to comment.