import React from 'react'; import { storybookArgTypes, StoryMetaType, StoryType, } from '@lg-tools/storybook-utils'; import { css } from '@leafygreen-ui/emotion'; import { spacing } from '@leafygreen-ui/tokens'; import { Body, InlineCode } from '@leafygreen-ui/typography'; import { SharedSkeletonProps } from './Skeleton/Skeleton.types'; import { CardSkeleton, CodeSkeleton, FormSkeleton, IconSkeleton, ListSkeleton, ParagraphSkeleton, Skeleton, TableSkeleton, } from '.'; const meta: StoryMetaType = { title: 'Composition/Loading/SkeletonLoader', component: Skeleton, argTypes: { darkMode: storybookArgTypes.darkMode, enableAnimations: { control: 'boolean' }, }, args: { enableAnimations: true, }, parameters: { default: 'LiveExample', }, }; export default meta; const storyRootStyles = css` display: grid; grid-template-columns: 1fr 1fr; column-gap: ${spacing[7]}px; row-gap: ${spacing[7]}px; padding: ${spacing[7]}px; `; const displayOptionContainerStyles = css` display: flex; flex-direction: column; align-items: center; justify-content: flex-end; max-width: 700px; `; const labelStyles = css` margin-top: ${spacing[5]}px; `; const skeletonComponents = { Skeleton, CardSkeleton, CodeSkeleton, FormSkeleton, IconSkeleton, ListSkeleton, ParagraphSkeleton, TableSkeleton, }; export const LiveExample: StoryType = (args: SharedSkeletonProps) => (
{Object.entries(skeletonComponents).map(([name, SkeletonVariant]) => (
{name}
))}
); LiveExample.parameters = { chromatic: { disableSnapshot: true }, };