Skip to content

Commit

Permalink
feat!: skeleton infer dimensions
Browse files Browse the repository at this point in the history
  • Loading branch information
Seedy authored Feb 25, 2022
1 parent 04013c7 commit 3ad6121
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 58 deletions.
117 changes: 100 additions & 17 deletions components/Skeleton/Skeleton.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@ import React from 'react';

import { Skeleton, SkeletonProps, SkeletonVariants } from './Skeleton';
import { Flex } from '../Flex';
import { Heading } from '../Heading';
import { Text as FaencyText } from '../Text';
import { Avatar } from '../Avatar';
import { Badge as FaencyBadge } from '../Badge';
import { Button as FaencyButton } from '../Button';
import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';

const BaseSkeleton = (props: SkeletonProps): JSX.Element => <Skeleton {...props} />;
Expand All @@ -13,33 +18,111 @@ export default {
component: SkeletonForStory,
} as ComponentMeta<typeof SkeletonForStory>;

export const Avatars: ComponentStory<typeof SkeletonForStory> = () => (
<Flex css={{ gap: '$3', alignItems: 'center' }}>
<Skeleton variant="avatar1" />
<Skeleton variant="avatar2" />
<Skeleton variant="avatar3" />
<Skeleton variant="avatar4" />
<Skeleton variant="avatar5" />
<Skeleton variant="avatar6" />
export const Square: ComponentStory<typeof SkeletonForStory> = () => (
<Flex align="center" direction="row" gap="3">
<Skeleton variant="square" css={{ size: '$3' }} />
<Skeleton variant="square" css={{ size: '$6' }} />
<Skeleton variant="square" css={{ size: '$9' }} />
</Flex>
)


export const Circle: ComponentStory<typeof SkeletonForStory> = () => (
<Flex align="center" direction="row" gap="3">
<Skeleton variant="circle" css={{ size: '$3' }} />
<Skeleton variant="circle" css={{ size: '$6' }} />
<Skeleton variant="circle" css={{ size: '$9' }} />
</Flex>
)

export const Badge: ComponentStory<typeof SkeletonForStory> = () => (
<Flex align="center" direction="row" gap="3">
<Skeleton variant="badge" css={{ height: '$5', width: '$6' }} />
<Skeleton variant="badge" css={{ height: '$5', width: '$8' }} />
<Skeleton variant="badge" css={{ height: '$5', width: '$10' }} />
</Flex>
)

export const Button: ComponentStory<typeof SkeletonForStory> = () => (
<Flex align="center" direction="row" gap="3">
<Skeleton variant="button" css={{ height: '$5', width: '$6' }} />
<Skeleton variant="button" css={{ height: '$5', width: '$8' }} />
<Skeleton variant="button" css={{ height: '$5', width: '$10' }} />
</Flex>
)

export const Text: ComponentStory<typeof SkeletonForStory> = () => (
<Flex align="center" direction="row" gap="3">
<Skeleton variant="text" css={{ height: '$5', width: '$6' }} />
<Skeleton variant="text" css={{ height: '$5', width: '$8' }} />
<Skeleton variant="text" css={{ height: '$5', width: '$10' }} />
</Flex>
);

const HEADING_SIZES = ['1', '2', '3', '4'] as const;
const TEXT_SIZES = ['3', '6', '9', '12'] as const;

export const Typographies: ComponentStory<typeof SkeletonForStory> = () => (
<Flex css={{ gap: '$3', flexDirection: 'column' }}>
<Skeleton variant="title" />
<Skeleton variant="heading" />
<Skeleton variant="text" />
<Flex gap="3" direction="column">
{HEADING_SIZES.map((size) => (
<Heading size={size}>
<Skeleton variant="text" />
</Heading>
))}
{TEXT_SIZES.map((size) => (
<FaencyText size={size}>
<Skeleton variant="text" />
</FaencyText>
))}
</Flex>
);

export const Button: ComponentStory<typeof SkeletonForStory> = () => <Skeleton variant="button" />;
const AVATAR_SIZES = ['1', '2', '3', '4', '5', '6'] as const

export const Badge: ComponentStory<typeof SkeletonForStory> = () => <Skeleton variant="badge" />
export const Avatars: ComponentStory<typeof SkeletonForStory> = () => (
<Flex gap="3" align="center">
{AVATAR_SIZES.map((size) => (
<Flex gap="3" align="center" direction="column">
<Skeleton variant="circle">
<Avatar size={size} />
</Skeleton>
<Skeleton variant="square">
<Avatar size={size} />
</Skeleton>
</Flex>
))}
</Flex>
);

export const ButtonInferred: ComponentStory<typeof SkeletonForStory> = () => (
<Flex gap="3" direction="column">
<Skeleton variant="button">
<FaencyButton css={{ width: 60 }} size="small" />
</Skeleton>
<Skeleton variant="button">
<FaencyButton css={{ width: 90 }} size="medium" />
</Skeleton>
<Skeleton variant="button">
<FaencyButton css={{ width: 120 }} size="large" />
</Skeleton>
</Flex>
)

export const BadgeInferred: ComponentStory<typeof SkeletonForStory> = () => (
<Flex gap="3" direction="column">
<Skeleton variant="badge">
<FaencyBadge css={{ width: 60 }} size="small" />
</Skeleton>
<Skeleton variant="badge">
<FaencyBadge css={{ width: 140 }} size="large" />
</Skeleton>
</Flex>
)

export const Customs: ComponentStory<typeof SkeletonForStory> = () => (
<Flex direction="column" gap={3}>
<Skeleton variant="title" css={{ width: '30%' }} />
<Skeleton variant="heading" css={{ width: '20%' }} />
<Skeleton css={{ width: '30%' }} />
<Skeleton css={{ width: '20%' }} />
<Flex gap={3}>
<Flex direction="column" gap={2} css={{ flex: 1 }}>
{Array(10)
Expand All @@ -56,7 +139,7 @@ export const Customs: ComponentStory<typeof SkeletonForStory> = () => (
))}
</Flex>
</Flex>
<Skeleton variant="heading" css={{ width: '20%' }} />
<Skeleton css={{ width: '20%' }} />
<Flex gap={3}>
<Skeleton css={{ height: '400px', flex: 1 }} />
<Skeleton css={{ height: '300px', flex: 1 }} />
Expand Down
59 changes: 18 additions & 41 deletions components/Skeleton/Skeleton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@ export const Skeleton = styled('div', {
position: 'relative',
overflow: 'hidden',
borderRadius: '3px',
height: 'auto',
width: 'auto',
'&:not(:empty)': {
'& > *': {
visibility: 'hidden',
},
maxWidth: 'fit-content',
},

'&::after': {
animationName: `${pulse}`,
Expand All @@ -29,53 +37,22 @@ export const Skeleton = styled('div', {

variants: {
variant: {
avatar1: {
borderRadius: '$round',
height: '$3',
width: '$3',
},
avatar2: {
borderRadius: '$round',
height: '$5',
width: '$5',
},
avatar3: {
borderRadius: '$round',
height: '$6',
width: '$6',
},
avatar4: {
borderRadius: '$round',
height: '$7',
width: '$7',
},
avatar5: {
borderRadius: '$round',
height: '$8',
width: '$8',
square: {
borderRadius: '$2',
},
avatar6: {
borderRadius: '$round',
height: '$9',
width: '$9',
},
text: {
height: '$1',
},
title: {
height: '$5',
},
heading: {
height: '$3',
circle: {
borderRadius: '$round'
},
badge: {
borderRadius: '$pill',
height: '$4',
},
button: {
borderRadius: '$1',
height: '32px',
width: '128px',
borderRadius: '$3',
},
text: {
'&:empty:before': {
content: '"\\00a0"', // adds a space character before element
}
},
},
},
Expand Down

0 comments on commit 3ad6121

Please sign in to comment.