mirror of https://github.com/apache/superset.git
chore: Improves Icons storybook (#14193)
This commit is contained in:
parent
e913ef3261
commit
58534b36c5
|
@ -17,67 +17,78 @@
|
||||||
* under the License.
|
* under the License.
|
||||||
*/
|
*/
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { withKnobs, select } from '@storybook/addon-knobs';
|
|
||||||
import { styled, supersetTheme } from '@superset-ui/core';
|
import { styled, supersetTheme } from '@superset-ui/core';
|
||||||
import Icons from '.';
|
import Icons from '.';
|
||||||
|
import IconType from './IconType';
|
||||||
import Icon from './Icon';
|
import Icon from './Icon';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: 'Icons',
|
title: 'Icons',
|
||||||
component: Icon,
|
component: Icon,
|
||||||
decorators: [withKnobs],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const palette = {};
|
const palette = { Default: null };
|
||||||
Object.entries(supersetTheme.colors).forEach(([familyName, family]) => {
|
Object.entries(supersetTheme.colors).forEach(([familyName, family]) => {
|
||||||
Object.entries(family).forEach(([colorName, colorValue]) => {
|
Object.entries(family).forEach(([colorName, colorValue]) => {
|
||||||
palette[`${familyName} / ${colorName}`] = colorValue;
|
palette[`${familyName} / ${colorName}`] = colorValue;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const colorKnob = {
|
|
||||||
label: 'Color',
|
|
||||||
options: {
|
|
||||||
Default: null,
|
|
||||||
...palette,
|
|
||||||
},
|
|
||||||
defaultValue: null,
|
|
||||||
};
|
|
||||||
|
|
||||||
const IconSet = styled.div`
|
const IconSet = styled.div`
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: row;
|
grid-template-columns: repeat(auto-fit, 200px);
|
||||||
flex-wrap: wrap;
|
grid-auto-rows: 100px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const IconBlock = styled.div`
|
const IconBlock = styled.div`
|
||||||
flex-grow: 0;
|
display: flex;
|
||||||
flex-shrink: 0;
|
flex-direction: column;
|
||||||
flex-basis: 10%;
|
align-items: center;
|
||||||
text-align: center;
|
|
||||||
padding: ${({ theme }) => theme.gridUnit * 2}px;
|
padding: ${({ theme }) => theme.gridUnit * 2}px;
|
||||||
div {
|
|
||||||
white-space: nowrap;
|
|
||||||
font-size: ${({ theme }) => theme.typography.sizes.s}px;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const SupersetIcon = () => (
|
export const InteractiveIcons = ({
|
||||||
|
showNames,
|
||||||
|
...rest
|
||||||
|
}: IconType & { showNames: boolean }) => (
|
||||||
<IconSet>
|
<IconSet>
|
||||||
{Object.keys(Icons).map(k => {
|
{Object.keys(Icons).map(k => {
|
||||||
const IconComponent = Icons[k];
|
const IconComponent = Icons[k];
|
||||||
return (
|
return (
|
||||||
<IconBlock key={k}>
|
<IconBlock key={k}>
|
||||||
<IconComponent
|
<IconComponent {...rest} />
|
||||||
iconColor={select(
|
{showNames && k}
|
||||||
colorKnob.label,
|
|
||||||
colorKnob.options,
|
|
||||||
colorKnob.defaultValue,
|
|
||||||
colorKnob.groupId,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</IconBlock>
|
</IconBlock>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</IconSet>
|
</IconSet>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
InteractiveIcons.argTypes = {
|
||||||
|
showNames: {
|
||||||
|
name: 'Show names',
|
||||||
|
defaultValue: true,
|
||||||
|
control: { type: 'boolean' },
|
||||||
|
},
|
||||||
|
iconSize: {
|
||||||
|
defaultValue: 'xl',
|
||||||
|
control: { type: 'inline-radio' },
|
||||||
|
},
|
||||||
|
iconColor: {
|
||||||
|
defaultValue: null,
|
||||||
|
control: { type: 'select', options: palette },
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
table: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
InteractiveIcons.story = {
|
||||||
|
parameters: {
|
||||||
|
knobs: {
|
||||||
|
disable: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
Loading…
Reference in New Issue