@kadconsulting/dry
Version:
KAD Reusable Component Library
90 lines • 5.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { inferThemeType, SEMANTIC_COLORS, SECONDARY_COLORS, ThemeAwareStory, } from '../../internal/index';
import Badge from './Badge';
import { BadgeVariants } from './BadgeTypes';
import { useCallback, useMemo } from 'react';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
import { ThemeProvider } from '~components/ThemeProvider';
import { BadgeSizes } from './BadgeTypes';
import { ThemeTypes } from '~components/ThemeProvider/types';
export default {
title: 'Components/Badge',
tags: ['autodocs'],
component: Badge,
argTypes: {
// Define controls for component props here
},
};
export const Default = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(Badge, { ...args, children: "I'm a badge" }) }) }));
},
};
const DemoComponent = (_, context) => {
const themeType = inferThemeType(context) ?? ThemeTypes.LIGHT;
const ColorMap = useCallback(({ size, variant, children }) => [...SEMANTIC_COLORS, ...SECONDARY_COLORS].map((color) => (_jsx(Badge, { color: color, size: size, variant: variant, children: children ?? color }, color))), []);
const SizeMap = useCallback(({ children }) => Object.values(BadgeSizes).map((size) => (_jsxs("div", { style: {
gap: '16px',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
}, children: [_jsx("h2", { style: { color: themeType === 'dark' ? '#ffffff' : '#000000' }, children: size }), ColorMap({
size,
children,
variant: BadgeVariants.MEDIUM,
})] }, size))), [themeType, ColorMap]);
const WithChildren = useMemo(() => Object.values(BadgeSizes).map((size) => (_jsxs("div", { style: {
gap: '16px',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
}, children: [_jsx("h2", { style: { color: themeType === 'dark' ? '#ffffff' : '#000000' }, children: size }), [...SEMANTIC_COLORS, ...SECONDARY_COLORS].map((color) => (_jsx(Badge, { color: color, size: size, children: _jsxs("div", { style: {
gap: '5px',
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start',
}, children: [_jsx("div", { style: {
width: '6px',
height: '6px',
borderRadius: '50%',
backgroundColor: `var(--${color}-${themeType === 'dark' ? 100 : 700})`,
} }), _jsx("div", { children: "With Children" })] }) }, color)))] }, size))), [themeType]);
const Variants = useMemo(() => (_jsxs(_Fragment, { children: [_jsx("h1", { children: "Variants" }), _jsx("p", { children: "Note: the 'light' option is intended for use only within a BadgeGroup because its background color is invisible against the default background color. It could, in theory, be used against other backgrounds, but isn't represented that way within Untitled UI." }), _jsx("div", { style: {
gap: '24px',
display: 'flex',
justifyContent: 'flex-start',
}, children: Object.values(BadgeSizes).map((size) => (_jsxs("div", { style: {
display: 'flex',
marginTop: '32px',
flexDirection: 'column',
}, children: [_jsx("h2", { style: { color: themeType === 'dark' ? '#ffffff' : '#000000' }, children: size }), _jsx("div", { style: {
gap: '8px',
display: 'flex',
}, children: [
BadgeVariants.DARK,
BadgeVariants.LIGHT,
BadgeVariants.MEDIUM,
BadgeVariants.OUTLINE,
].map((variant) => (_jsx("div", { style: {
gap: '16px',
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
}, children: [...SEMANTIC_COLORS, ...SECONDARY_COLORS].map((color) => (_jsx(Badge, { size: size, color: color, variant: variant, children: variant }, color))) }, variant))) })] }))) })] })), [themeType]);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsxs(ThemeAwareStory, { id: context.id, children: [_jsxs("div", { style: {
gap: '16px',
display: 'flex',
justifyContent: 'flex-start',
}, children: [SizeMap({ variant: BadgeVariants.MEDIUM }), WithChildren] }), Variants] }) }));
};
export const Demo = {
render: (args, context) => DemoComponent(args, context),
parameters: {
controls: {
disable: true,
},
},
};
//# sourceMappingURL=Badge.stories.js.map