@kadconsulting/dry
Version:
KAD Reusable Component Library
119 lines • 8.01 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { Layouts } from '../../types';
import ContentSection from './ContentSection';
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 { DisplayMd, TextLg, TextMd } from '~components/Typography';
import { ThemeProvider, ThemeTypes } from '~components/ThemeProvider';
import { LayoutProvider, useLayout } from '~components/LayoutProvider';
import PlaceholderImage from '~internal/assets/images/placeholders/office-circle.png';
const themes = {
[ThemeTypes.LIGHT]: lightTheme,
[ThemeTypes.DARK]: darkTheme,
};
export default {
title: 'Components/ContentSection',
tags: ['autodocs'],
component: ContentSection,
subcomponents: {
Column1: ContentSection.Column1,
Column2: ContentSection.Column2,
},
argTypes: {
mobileFlexDirection: {
name: 'mobileFlexDirection',
description: 'The flex direction of the columns on mobile; determines the order the content when collapsed to one column.',
defaultValue: undefined,
control: {
type: 'select',
options: ['column', 'column-reverse', undefined],
},
},
},
};
const TextColumnContent = ({ backgroundColor, }) => {
/**
* You wouldn't generally need to compute foreground colors as below--they'd generally be hard-coded in the markup according to the UI spec.
* These computed colors are just to support many different colors within Storybook.
*/
const subheaderColor = useMemo(() => {
switch (backgroundColor) {
case 'primary':
return 'primaryContrast_hue';
case 'primaryDull':
return 'primaryDullContrast_hue';
case 'primaryDistinct':
return 'primaryDistinctContrast_hue';
case 'gray-50':
case 'background':
return 'backgroundContrast_hue';
default:
return 'primary';
}
}, [backgroundColor]);
const textColor = useMemo(() => {
switch (backgroundColor) {
case 'primary':
return 'primaryContrast';
case 'primaryDull':
return 'primaryDullContrast';
case 'primaryDistinct':
return 'primaryDistinctContrast';
default:
return 'backgroundContrast';
}
}, [backgroundColor]);
return (_jsxs(_Fragment, { children: [_jsx(TextMd, { weight: 'semibold', color: subheaderColor, children: "How it works" }), _jsx(DisplayMd, { color: textColor, weight: 'semibold', verticalRhythm: false, style: { marginBottom: '40px' }, children: "ContentSection is a content-agnostic flexbox container." }), _jsx(TextLg, { color: textColor, children: "When you collapse the viewport, the columns will stack on top of each other." }), _jsx(TextLg, { color: textColor, children: "By default, or when `'column'` is specified for `mobileFlexDirection`, the first column will be on top." }), _jsx(TextLg, { color: textColor, children: "With a `'column-reverse'` `mobileFlexDirection` value, the second column will be on top." }), _jsx(TextLg, { color: textColor, children: "To accommodate many different use cases, content widths on desktop are not fixed and can be configured with the respective Columns' style prop, or by styling the Columns' children." }), _jsx(TextLg, { color: textColor, children: "The children column \"slots\" make it easy to understand in the markup which content comes first and second on desktop. To invert the order, simply switch the order of the children." }), _jsx(TextLg, { color: textColor, children: "Background color is not part of the component, but can be easily added via a simple wrapper, and by ensuring that any forground text uses the theme's corresponding contrast color to ensure accessibility." })] }));
};
const ImageContent = () => (_jsx("img", { style: { display: 'block', width: '100%' }, alt: 'placeholder', src: PlaceholderImage }));
const DefaultStory = (args) => {
const { layout } = useLayout();
return (_jsxs(ContentSection, { ...args, children: [_jsx(ContentSection.Column1, { style: { width: layout === Layouts.Desktop ? '50%' : '100%' }, children: _jsx(TextColumnContent, { backgroundColor: args.backgroundColor }) }), _jsx(ContentSection.Column2, { children: _jsx(ImageContent, {}) })] }));
};
export const Default = {
parameters: {
layout: 'fullscreen',
},
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(DefaultStory, { backgroundColor: 'background', ...args }) }) }) }));
},
};
export const MobileColumnReverse = {
args: {
mobileFlexDirection: 'column-reverse',
},
parameters: {
layout: 'fullscreen',
},
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(DefaultStory, { backgroundColor: 'background', ...args }) }) }) }));
},
};
const ReversedStory = (args) => {
const { layout } = useLayout();
return (_jsxs(ContentSection, { ...args, children: [_jsx(ContentSection.Column1, { children: _jsx(ImageContent, {}) }), _jsx(ContentSection.Column2, { style: { width: layout === Layouts.Desktop ? '50%' : '100%' }, children: _jsx(TextColumnContent, { backgroundColor: args.backgroundColor }) })] }));
};
export const Reversed = {
parameters: {
layout: 'fullscreen',
},
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(ReversedStory, { backgroundColor: 'background', ...args }) }) }) }));
},
};
export const ColorWrappers = {
parameters: {
layout: 'fullscreen',
},
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(LayoutProvider, { theme: themes[themeType], children: _jsxs(ThemeAwareStory, { id: context.id, children: [_jsx("div", { style: { backgroundColor: 'var(--gray-50)' }, children: _jsx(ReversedStory, { backgroundColor: 'gray-50', ...args }) }), _jsx("div", { style: { backgroundColor: 'var(--background)' }, children: _jsx(DefaultStory, { backgroundColor: 'background', ...args }) }), _jsx("div", { style: { backgroundColor: 'var(--primaryDull)' }, children: _jsx(ReversedStory, { backgroundColor: 'primaryDull', ...args }) }), _jsx("div", { style: { backgroundColor: 'var(--background)' }, children: _jsx(DefaultStory, { backgroundColor: 'background', ...args }) }), _jsx("div", { style: { backgroundColor: 'var(--primary)' }, children: _jsx(ReversedStory, { backgroundColor: 'primary', ...args }) }), _jsx("div", { style: { backgroundColor: 'var(--background)' }, children: _jsx(DefaultStory, { backgroundColor: 'background', ...args }) }), _jsx("div", { style: { backgroundColor: 'var(--primaryDistinct)' }, children: _jsx(DefaultStory, { backgroundColor: 'primaryDistinct', ...args }) })] }) }) }));
},
};
//# sourceMappingURL=ContentSection.stories.js.map