@kadconsulting/dry
Version:
KAD Reusable Component Library
160 lines • 10.4 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import DisplayXs from './DisplayXs';
import darkTheme from '~themes/default/palette/dark';
import { inferThemeType } from '~internal/utilities';
import { ThemeAwareStory } from '~internal/components';
import lightTheme from '~themes/default/palette/light';
import { BackgroundWrapper, Surface } from '../helpers';
import { ThemeProvider } from '~components/ThemeProvider';
export default {
title: 'Components/Typography/DisplayXs',
tags: ['autodocs'],
component: DisplayXs,
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(DisplayXs, { ...args, children: "Display Xs Regular" }) }) }));
},
};
export const Medium = {
args: { weight: 'medium' },
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(DisplayXs, { ...args, children: "Display Xs Medium" }) }) }));
},
};
export const Semibold = {
args: { weight: 'semibold' },
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(DisplayXs, { ...args, children: "Display Xs Semibold" }) }) }));
},
};
export const Bold = {
args: { weight: 'bold' },
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(DisplayXs, { ...args, children: "Display Xs Bold" }) }) }));
},
};
export const OnASurface = {
args: {
weight: 'semibold',
color: 'surfaceBackgroundContrast',
},
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(BackgroundWrapper, { backgroundColor: 'var(--background)', children: _jsx(Surface, { backgroundColor: 'var(--surfaceBackground)', children: _jsx(DisplayXs, { ...args, children: "On a surface" }) }) }) }) }));
},
};
export const OnASurfaceWithHue = {
args: {
weight: 'semibold',
color: 'surfaceBackgroundContrast_hue',
},
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(BackgroundWrapper, { backgroundColor: 'var(--background)', children: _jsx(Surface, { backgroundColor: 'var(--surfaceBackground)', children: _jsx(DisplayXs, { ...args, children: "On a surface" }) }) }) }) }));
},
};
export const OnAPrimaryDullBackground = {
args: { weight: 'semibold', color: 'primaryDullContrast' },
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(BackgroundWrapper, { backgroundColor: 'var(--primaryDull)', children: _jsx(DisplayXs, { ...args, children: "Primary Dull" }) }) }) }));
},
};
export const OnAPrimaryBackground = {
args: { weight: 'semibold', color: 'primaryContrast' },
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(BackgroundWrapper, { backgroundColor: 'var(--primary)', children: _jsx(DisplayXs, { ...args, children: "Primary" }) }) }) }));
},
};
export const OnAPrimaryDistinctBackground = {
args: { weight: 'semibold', color: 'primaryDistinctContrast' },
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(BackgroundWrapper, { backgroundColor: 'var(--primaryDistinct)', children: _jsx(DisplayXs, { ...args, children: "Primary Distinct" }) }) }) }));
},
};
export const OnAPrimaryDullBackgroundWithHue = {
args: { weight: 'semibold', color: 'primaryDullContrast_hue' },
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(BackgroundWrapper, { backgroundColor: 'var(--primaryDull)', children: _jsx(DisplayXs, { ...args, children: "Primary Dull (Hue)" }) }) }) }));
},
};
export const OnAPrimaryBackgroundWithHue = {
args: { weight: 'semibold', color: 'primaryContrast_hue' },
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(BackgroundWrapper, { backgroundColor: 'var(--primary)', children: _jsx(DisplayXs, { ...args, children: "Primary (Hue)" }) }) }) }));
},
};
export const OnAPrimaryDistinctBackgroundWithHue = {
args: { weight: 'semibold', color: 'primaryDistinctContrast_hue' },
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(BackgroundWrapper, { backgroundColor: 'var(--primaryDistinct)', children: _jsx(DisplayXs, { ...args, children: "Primary Distinct (Hue)" }) }) }) }));
},
};
export const SurfaceOnAPrimaryDullBackground = {
args: {
weight: 'semibold',
color: 'surfaceOnPrimaryDullBackgroundContrast',
},
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(BackgroundWrapper, { backgroundColor: 'var(--primaryDull)', children: _jsx(Surface, { backgroundColor: 'var(--surfaceOnPrimaryDullBackground)', children: _jsx(DisplayXs, { ...args, children: "Primary Dull" }) }) }) }) }));
},
};
export const SurfaceOnAPrimaryBackground = {
args: { weight: 'semibold', color: 'surfaceOnPrimaryBackgroundContrast' },
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(BackgroundWrapper, { backgroundColor: 'var(--primary)', children: _jsx(Surface, { backgroundColor: 'var(--surfaceOnPrimaryBackground)', children: _jsx(DisplayXs, { ...args, children: "Primary" }) }) }) }) }));
},
};
export const SurfaceOnAPrimaryDistinctBackground = {
args: {
weight: 'semibold',
color: 'surfaceOnPrimaryDistinctBackgroundContrast',
},
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(BackgroundWrapper, { backgroundColor: 'var(--primaryDistinct)', children: _jsx(Surface, { backgroundColor: 'var(--surfaceOnPrimaryDistinctBackground)', children: _jsx(DisplayXs, { ...args, children: "Primary Distinct" }) }) }) }) }));
},
};
export const SurfaceOnAPrimaryDullBackgroundWithHue = {
args: {
weight: 'semibold',
color: 'surfaceOnPrimaryDullBackgroundContrast_hue',
},
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(BackgroundWrapper, { backgroundColor: 'var(--primaryDull)', children: _jsx(Surface, { backgroundColor: 'var(--surfaceOnPrimaryDullBackground)', children: _jsx(DisplayXs, { ...args, children: "Primary Dull (Hue)" }) }) }) }) }));
},
};
export const SurfaceOnAPrimaryBackgroundWithHue = {
args: { weight: 'semibold', color: 'surfaceOnPrimaryBackgroundContrast_hue' },
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(BackgroundWrapper, { backgroundColor: 'var(--primary)', children: _jsx(Surface, { backgroundColor: 'var(--surfaceOnPrimaryBackground)', children: _jsx(DisplayXs, { ...args, children: "Primary (Hue)" }) }) }) }) }));
},
};
export const SurfaceOnAPrimaryDistinctBackgroundWithHue = {
args: {
weight: 'semibold',
color: 'surfaceOnPrimaryDistinctBackgroundContrast_hue',
},
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(BackgroundWrapper, { backgroundColor: 'var(--primaryDistinct)', children: _jsx(Surface, { backgroundColor: 'var(--surfaceOnPrimaryDistinctBackground)', children: _jsx(DisplayXs, { ...args, children: "Primary Distinct (Hue)" }) }) }) }) }));
},
};
//# sourceMappingURL=DisplayXs.stories.js.map