@kadconsulting/dry
Version:
KAD Reusable Component Library
169 lines • 5.21 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import './Icon.scss';
import Icon from './Icon';
import { ALL_ICONS, InfoCircle } from '../paths';
import { IconSizes } from './IconTypes';
export default {
title: 'Components/Icons/Icon',
component: Icon,
tags: ['autodocs'],
};
export const IconStory = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return _jsx(Icon, { ...rest });
};
/** The Icon's child Path component accepts any color from the palette. Below are a few examples. #000 is default. */
export const StrokeColor = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return _jsx(Icon, { ...rest, Path: InfoCircle });
};
export const SuccessColor = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return (_jsx(Icon, { ...rest, Path: InfoCircle, PathProps: {
stroke: 'success',
} }));
};
export const WarningColor = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return (_jsx(Icon, { ...rest, Path: InfoCircle, PathProps: {
stroke: 'warning',
} }));
};
export const ErrorColor = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return (_jsx(Icon, { ...rest, Path: InfoCircle, PathProps: {
stroke: 'error',
} }));
};
export const PrimaryColor = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return (_jsx(Icon, { ...rest, Path: InfoCircle, PathProps: {
stroke: 'primary',
} }));
};
/** Icon accepts three standardized sizes out-of-the-box, or you can set a custom width and height. A helper enum called `IconSizes` is exported from the library. When using an enumerated size, When using a custom size, `height` and `width` must not be specified. */
export const SizesSmall = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return _jsx(Icon, { ...rest });
};
SizesSmall.args = {
Path: InfoCircle,
size: IconSizes.SMALL,
};
SizesSmall.argTypes = {
Path: {
control: {
type: 'enum',
options: Object.keys(ALL_ICONS),
},
},
size: {
control: 'enum',
options: [IconSizes.SMALL, IconSizes.SMALL, IconSizes.LARGE],
},
};
export const SizesMedium = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return _jsx(Icon, { size: IconSizes.MEDIUM, Path: InfoCircle });
};
SizesMedium.args = {
Path: InfoCircle,
size: IconSizes.MEDIUM,
};
SizesMedium.argTypes = {
Path: {
control: {
type: 'enum',
options: Object.keys(ALL_ICONS),
},
},
size: {
control: 'enum',
options: [IconSizes.SMALL, IconSizes.MEDIUM, IconSizes.LARGE],
},
};
export const SizesLarge = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return _jsx(Icon, { size: IconSizes.LARGE, Path: InfoCircle });
};
SizesLarge.args = {
Path: InfoCircle,
size: IconSizes.LARGE,
};
SizesLarge.argTypes = {
Path: {
control: {
type: 'enum',
options: Object.keys(ALL_ICONS),
},
},
size: {
control: 'enum',
options: [IconSizes.SMALL, IconSizes.MEDIUM, IconSizes.LARGE],
},
};
export const SizesCustom = (args) => {
// rome-ignore lint/correctness/noUnusedVariables: exclude ref from passed props
const { ref, ...rest } = args;
return _jsx(Icon, { height: 16, width: 16, Path: InfoCircle });
};
SizesCustom.args = {
width: 16,
height: 16,
size: undefined,
Path: InfoCircle,
};
SizesCustom.argTypes = {
Path: {
control: {
type: 'enum',
options: Object.keys(ALL_ICONS),
},
},
width: { control: 'number' },
height: { control: 'number' },
size: { control: null },
};
/** When using a custom size, `height` and `width` must be specified. */
IconStory.args = {
size: 25,
Path: InfoCircle,
PathProps: {
stroke: 'primary',
},
};
IconStory.argTypes = {
id: { control: 'text' },
size: {
control: {
type: 'select',
options: [IconSizes.SMALL, IconSizes.MEDIUM, IconSizes.LARGE],
},
},
width: { control: 'number' },
height: { control: 'number' },
Path: {
control: {
type: 'enum',
options: Object.keys(ALL_ICONS),
},
},
PathProps: {
control: {
type: 'object',
},
},
className: { control: 'text' },
style: { control: 'object' },
};
IconStory.storyName = 'Icons';
//# sourceMappingURL=Icon.stories.js.map