From 8d678fb416333737e0193aa35f8dcd8972b14a5b Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 10 Jan 2025 10:07:58 -0500 Subject: [PATCH 1/6] feat(components): add `Avatar` --- packages/components/__tests__/Avatar.spec.tsx | 21 +++++ packages/components/src/Avatar.tsx | 94 +++++++++++++++++++ packages/components/src/index.ts | 2 + .../components/src/styles/Avatar.module.css | 51 ++++++++++ .../components/stories/Avatar.stories.tsx | 28 ++++++ 5 files changed, 196 insertions(+) create mode 100644 packages/components/__tests__/Avatar.spec.tsx create mode 100644 packages/components/src/Avatar.tsx create mode 100644 packages/components/src/styles/Avatar.module.css create mode 100644 packages/components/stories/Avatar.stories.tsx diff --git a/packages/components/__tests__/Avatar.spec.tsx b/packages/components/__tests__/Avatar.spec.tsx new file mode 100644 index 000000000..52624860a --- /dev/null +++ b/packages/components/__tests__/Avatar.spec.tsx @@ -0,0 +1,21 @@ +import { describe, expect, it } from 'vitest'; + +import { render, screen } from '../../../test/utils'; +import { Avatar } from '../src'; + +describe('Avatar', () => { + it('renders', () => { + render(); + expect(screen.getByRole('img')).toBeVisible(); + }); + + it('renders icon', () => { + render(); + expect(screen.getByRole('img', { hidden: true })).toBeVisible(); + }); + + it('renders initials', () => { + render(RN); + expect(screen.getByRole('img')).toBeVisible(); + }); +}); diff --git a/packages/components/src/Avatar.tsx b/packages/components/src/Avatar.tsx new file mode 100644 index 000000000..da17616e7 --- /dev/null +++ b/packages/components/src/Avatar.tsx @@ -0,0 +1,94 @@ +import type { IconProps } from '@launchpad-ui/icons'; +import type { VariantProps } from 'class-variance-authority'; +import type { ImgHTMLAttributes, RefObject } from 'react'; + +import { Icon } from '@launchpad-ui/icons'; +import { cva, cx } from 'class-variance-authority'; + +import styles from './styles/Avatar.module.css'; + +const avatar = cva(styles.base, { + variants: { + size: { + small: styles.small, + medium: styles.medium, + large: styles.large, + }, + variant: { + icon: styles.icon, + image: styles.image, + initials: styles.initials, + }, + }, + defaultVariants: { + size: 'medium', + variant: 'icon', + }, +}); + +const colors = cva(null, { + variants: { + color: { + 0: styles.yellow, + 1: styles.blue, + 2: styles.pink, + 3: styles.cyan, + 4: styles.purple, + }, + }, +}); + +interface AvatarVariants extends VariantProps {} + +interface AvatarProps extends ImgHTMLAttributes, AvatarVariants { + ref?: RefObject; + icon?: IconProps['name']; +} + +const Avatar = ({ + className, + children, + size = 'medium', + variant = 'image', + icon = 'person', + ref, + ...props +}: AvatarProps) => { + if (variant === 'icon') { + return ; + } + + if (variant === 'initials') { + const color = children + ? (children.toString().charCodeAt(0) + children.toString().charCodeAt(1)) % 5 + : 0; + return ( + + + {children} + + + ); + } + + // biome-ignore lint/a11y/useAltText: + return ; +}; + +export { Avatar }; +export type { AvatarProps }; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 5bccf57fc..6e1eca93d 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -2,6 +2,7 @@ import './styles/base.css'; import './styles/themes.css'; export type { AlertProps } from './Alert'; +export type { AvatarProps } from './Avatar'; export type { BreadcrumbsProps, BreadcrumbProps } from './Breadcrumbs'; export type { ButtonProps } from './Button'; export type { ButtonGroupProps } from './ButtonGroup'; @@ -79,6 +80,7 @@ export type { ToolbarProps } from './Toolbar'; export type { TooltipProps, TooltipTriggerProps } from './Tooltip'; export { Alert } from './Alert'; +export { Avatar } from './Avatar'; export { Breadcrumbs, Breadcrumb } from './Breadcrumbs'; export { Button } from './Button'; export { ButtonGroup } from './ButtonGroup'; diff --git a/packages/components/src/styles/Avatar.module.css b/packages/components/src/styles/Avatar.module.css new file mode 100644 index 000000000..1a2405e1f --- /dev/null +++ b/packages/components/src/styles/Avatar.module.css @@ -0,0 +1,51 @@ +.base { + background-color: var(--lp-color-bg-ui-primary); + border-radius: 100%; +} + +.small { + width: var(--lp-size-16); + height: var(--lp-size-16); +} + +.medium { + width: var(--lp-size-24); + height: var(--lp-size-24); +} + +.large { + width: var(--lp-size-40); + height: var(--lp-size-40); +} + +.icon { + border: 1px solid var(--lp-color-border-ui-primary); +} + +.image { +} + +.initials { + fill: var(--lp-color-white-950); + font: var(--lp-text-label-1-semibold); +} + +.yellow { + background-color: var(--lp-color-brand-yellow-dark); +} + +.blue { + background-color: var(--lp-color-blue-600); +} + +.pink { + background-color: var(--lp-color-brand-pink-base); +} + +.cyan { + background-color: var(--lp-color-brand-cyan-base); +} + +.purple { + background-color: var(--lp-color-purple-600); +} diff --git a/packages/components/stories/Avatar.stories.tsx b/packages/components/stories/Avatar.stories.tsx new file mode 100644 index 000000000..586a3a62b --- /dev/null +++ b/packages/components/stories/Avatar.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Avatar } from '../src'; + +const meta: Meta = { + component: Avatar, + title: 'Components/Content/Avatar', +}; + +export default meta; + +type Story = StoryObj; + +export const Icon: Story = { + args: { variant: 'icon' }, +}; + +export const Image: Story = { + args: { + variant: 'image', + src: 'https://avatars.githubusercontent.com/u/2147624?v=4', + alt: 'engineer', + }, +}; + +export const Initials: Story = { + args: { variant: 'initials', children: 'RN', alt: 'Robb' }, +}; From db5eebf476a823effba64303db82c7d4640dc5a3 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 10 Jan 2025 10:26:43 -0500 Subject: [PATCH 2/6] chore: add changeset --- .changeset/witty-kangaroos-grin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/witty-kangaroos-grin.md diff --git a/.changeset/witty-kangaroos-grin.md b/.changeset/witty-kangaroos-grin.md new file mode 100644 index 000000000..4531067d8 --- /dev/null +++ b/.changeset/witty-kangaroos-grin.md @@ -0,0 +1,5 @@ +--- +"@launchpad-ui/components": patch +--- + +Add `Avatar` From e68cc7118c2a715327bfbb1d20475a8d2c6cc3fa Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 10 Jan 2025 11:10:16 -0500 Subject: [PATCH 3/6] fix: sizing --- packages/components/src/Avatar.tsx | 9 +-------- packages/components/src/styles/Avatar.module.css | 8 +++++++- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/components/src/Avatar.tsx b/packages/components/src/Avatar.tsx index da17616e7..a1fc2b592 100644 --- a/packages/components/src/Avatar.tsx +++ b/packages/components/src/Avatar.tsx @@ -72,14 +72,7 @@ const Avatar = ({ )} viewBox="0 0 24 24" > - + {children} diff --git a/packages/components/src/styles/Avatar.module.css b/packages/components/src/styles/Avatar.module.css index 1a2405e1f..2b3274f1d 100644 --- a/packages/components/src/styles/Avatar.module.css +++ b/packages/components/src/styles/Avatar.module.css @@ -26,8 +26,8 @@ } .initials { - fill: var(--lp-color-white-950); font: var(--lp-text-label-1-semibold); + font-size: var(--lp-font-size-100); } .yellow { @@ -49,3 +49,9 @@ .purple { background-color: var(--lp-color-purple-600); } + +.text { + fill: var(--lp-color-white-950); + text-anchor: middle; + dominant-baseline: central; +} From 2950d1bcef1d6cbd3cfd2d0226a6895b3ee785dc Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 10 Jan 2025 14:47:45 -0500 Subject: [PATCH 4/6] refactor: split up variants --- packages/components/__tests__/Avatar.spec.tsx | 57 ++++++++-- packages/components/src/Avatar.tsx | 100 +++++++++++------- packages/components/src/index.ts | 6 +- packages/components/src/utils.tsx | 36 ++++++- .../components/stories/Avatar.stories.tsx | 36 +++++-- 5 files changed, 172 insertions(+), 63 deletions(-) diff --git a/packages/components/__tests__/Avatar.spec.tsx b/packages/components/__tests__/Avatar.spec.tsx index 52624860a..3243b6792 100644 --- a/packages/components/__tests__/Avatar.spec.tsx +++ b/packages/components/__tests__/Avatar.spec.tsx @@ -1,21 +1,60 @@ -import { describe, expect, it } from 'vitest'; +import { afterAll, beforeAll, describe, expect, it } from 'vitest'; import { render, screen } from '../../../test/utils'; import { Avatar } from '../src'; +class MockImage { + onload: () => void = () => {}; + src = ''; + constructor() { + setTimeout(() => { + this.onload(); + }, 300); + // biome-ignore lint/correctness/noConstructorReturn: + return this; + } +} + +class ErrorImage { + onerror: () => void = () => {}; + src = ''; + constructor() { + setTimeout(() => { + this.onerror(); + }, 300); + // biome-ignore lint/correctness/noConstructorReturn: + return this; + } +} + describe('Avatar', () => { - it('renders', () => { + const orignalGlobalImage = window.Image; + + beforeAll(() => { + // biome-ignore lint/suspicious/noExplicitAny: + (window.Image as any) = MockImage; + }); + + afterAll(() => { + window.Image = orignalGlobalImage; + }); + + it('renders', async () => { render(); - expect(screen.getByRole('img')).toBeVisible(); + expect(await screen.findByRole('img')).toBeVisible(); }); - it('renders icon', () => { - render(); - expect(screen.getByRole('img', { hidden: true })).toBeVisible(); + it('renders icon on error', async () => { + // biome-ignore lint/suspicious/noExplicitAny: + (window.Image as any) = ErrorImage; + render(); + expect(await screen.findByRole('img', { hidden: true })).toBeVisible(); }); - it('renders initials', () => { - render(RN); - expect(screen.getByRole('img')).toBeVisible(); + it('renders initials on error', async () => { + // biome-ignore lint/suspicious/noExplicitAny: + (window.Image as any) = ErrorImage; + render(RN); + expect(await screen.findByRole('img')).toHaveTextContent('RN'); }); }); diff --git a/packages/components/src/Avatar.tsx b/packages/components/src/Avatar.tsx index a1fc2b592..fe839b615 100644 --- a/packages/components/src/Avatar.tsx +++ b/packages/components/src/Avatar.tsx @@ -1,11 +1,12 @@ import type { IconProps } from '@launchpad-ui/icons'; import type { VariantProps } from 'class-variance-authority'; -import type { ImgHTMLAttributes, RefObject } from 'react'; +import type { ImgHTMLAttributes, RefObject, SVGAttributes } from 'react'; import { Icon } from '@launchpad-ui/icons'; import { cva, cx } from 'class-variance-authority'; import styles from './styles/Avatar.module.css'; +import { useImageLoadingStatus } from './utils'; const avatar = cva(styles.base, { variants: { @@ -14,15 +15,9 @@ const avatar = cva(styles.base, { medium: styles.medium, large: styles.large, }, - variant: { - icon: styles.icon, - image: styles.image, - initials: styles.initials, - }, }, defaultVariants: { size: 'medium', - variant: 'icon', }, }); @@ -42,46 +37,69 @@ interface AvatarVariants extends VariantProps {} interface AvatarProps extends ImgHTMLAttributes, AvatarVariants { ref?: RefObject; - icon?: IconProps['name']; } -const Avatar = ({ - className, - children, - size = 'medium', - variant = 'image', - icon = 'person', - ref, - ...props -}: AvatarProps) => { - if (variant === 'icon') { - return ; - } +interface IconAvatarProps extends Omit, AvatarVariants { + ref?: RefObject; +} + +interface InitialsAvatarProps extends SVGAttributes, AvatarVariants {} + +const Avatar = ({ className, children, size = 'medium', ref, src, ...props }: AvatarProps) => { + const status = useImageLoadingStatus(src); - if (variant === 'initials') { - const color = children - ? (children.toString().charCodeAt(0) + children.toString().charCodeAt(1)) % 5 - : 0; - return ( - - - {children} - - + if (status === 'error') { + return children ? ( + {children} + ) : ( + ); } // biome-ignore lint/a11y/useAltText: - return ; + return status === 'loaded' ? ( + + ) : null; +}; + +const IconAvatar = ({ className, size = 'medium', name = 'person', ...props }: IconAvatarProps) => { + return ( + + ); +}; + +const InitialsAvatar = ({ + className, + size = 'medium', + children, + ...props +}: InitialsAvatarProps) => { + const color = children + ? (children.toString().charCodeAt(0) + children.toString().charCodeAt(1)) % 5 + : 0; + return ( + // biome-ignore lint/a11y/noSvgWithoutTitle: + + + {children} + + + ); }; -export { Avatar }; -export type { AvatarProps }; +export { Avatar, IconAvatar, InitialsAvatar }; +export type { AvatarProps, IconAvatarProps, InitialsAvatarProps }; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 6e1eca93d..044e2ee16 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -2,7 +2,7 @@ import './styles/base.css'; import './styles/themes.css'; export type { AlertProps } from './Alert'; -export type { AvatarProps } from './Avatar'; +export type { AvatarProps, IconAvatarProps, InitialsAvatarProps } from './Avatar'; export type { BreadcrumbsProps, BreadcrumbProps } from './Breadcrumbs'; export type { ButtonProps } from './Button'; export type { ButtonGroupProps } from './ButtonGroup'; @@ -80,7 +80,7 @@ export type { ToolbarProps } from './Toolbar'; export type { TooltipProps, TooltipTriggerProps } from './Tooltip'; export { Alert } from './Alert'; -export { Avatar } from './Avatar'; +export { Avatar, IconAvatar, InitialsAvatar } from './Avatar'; export { Breadcrumbs, Breadcrumb } from './Breadcrumbs'; export { Button } from './Button'; export { ButtonGroup } from './ButtonGroup'; @@ -161,4 +161,4 @@ export { ToggleButtonGroup } from './ToggleButtonGroup'; export { ToggleIconButton } from './ToggleIconButton'; export { Toolbar } from './Toolbar'; export { Tooltip, TooltipTrigger } from './Tooltip'; -export { useHref, useMedia } from './utils'; +export { useHref, useImageLoadingStatus, useMedia } from './utils'; diff --git a/packages/components/src/utils.tsx b/packages/components/src/utils.tsx index deb412655..9d124c513 100644 --- a/packages/components/src/utils.tsx +++ b/packages/components/src/utils.tsx @@ -1,8 +1,10 @@ import type { Href } from '@react-types/shared'; -import { useEffect, useState } from 'react'; +import { useEffect, useLayoutEffect, useState } from 'react'; import { useHref as useRouterHref } from 'react-router'; +type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'; + const useMedia = (media: string) => { const [isActive, setIsActive] = useState(false); @@ -40,4 +42,34 @@ const useHref = (href: Href) => { return absoluteHref || routerHref; }; -export { useHref, useMedia }; +const useImageLoadingStatus = (src?: string) => { + const [loadingStatus, setLoadingStatus] = useState('idle'); + + useLayoutEffect(() => { + if (!src) { + setLoadingStatus('error'); + return; + } + + let isMounted = true; + const image = new window.Image(); + + const updateStatus = (status: ImageLoadingStatus) => () => { + if (!isMounted) return; + setLoadingStatus(status); + }; + + setLoadingStatus('loading'); + image.onload = updateStatus('loaded'); + image.onerror = updateStatus('error'); + image.src = src; + + return () => { + isMounted = false; + }; + }, [src]); + + return loadingStatus; +}; + +export { useHref, useImageLoadingStatus, useMedia }; diff --git a/packages/components/stories/Avatar.stories.tsx b/packages/components/stories/Avatar.stories.tsx index 586a3a62b..45ef35e50 100644 --- a/packages/components/stories/Avatar.stories.tsx +++ b/packages/components/stories/Avatar.stories.tsx @@ -1,9 +1,12 @@ import type { Meta, StoryObj } from '@storybook/react'; +import type { ComponentType } from 'react'; -import { Avatar } from '../src'; +import { Box } from '@launchpad-ui/box'; +import { Avatar, IconAvatar, InitialsAvatar } from '../src'; const meta: Meta = { component: Avatar, + subcomponents: { IconAvatar, InitialsAvatar } as Record>, title: 'Components/Content/Avatar', }; @@ -11,18 +14,35 @@ export default meta; type Story = StoryObj; -export const Icon: Story = { - args: { variant: 'icon' }, -}; - -export const Image: Story = { +export const Example: Story = { args: { - variant: 'image', src: 'https://avatars.githubusercontent.com/u/2147624?v=4', alt: 'engineer', }, }; +export const Icon: Story = { + render: (args) => , +}; + export const Initials: Story = { - args: { variant: 'initials', children: 'RN', alt: 'Robb' }, + render: (args) => ( + + LD + + ), +}; + +export const Sizes: Story = { + render: (args) => ( + + + + + + ), + args: { + src: 'https://avatars.githubusercontent.com/u/2147624?v=4', + alt: 'engineer', + }, }; From 369df3f209e2b59d9ee8a001730578bf76f7ebc5 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Fri, 10 Jan 2025 16:24:29 -0500 Subject: [PATCH 5/6] fix: show fallbacks on idle and loading --- packages/components/__tests__/Avatar.spec.tsx | 4 ++-- packages/components/src/Avatar.tsx | 6 ++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/components/__tests__/Avatar.spec.tsx b/packages/components/__tests__/Avatar.spec.tsx index 3243b6792..dd185e289 100644 --- a/packages/components/__tests__/Avatar.spec.tsx +++ b/packages/components/__tests__/Avatar.spec.tsx @@ -40,8 +40,8 @@ describe('Avatar', () => { }); it('renders', async () => { - render(); - expect(await screen.findByRole('img')).toBeVisible(); + render(); + expect(await screen.findByRole('img', { name: 'engineer' })).toBeVisible(); }); it('renders icon on error', async () => { diff --git a/packages/components/src/Avatar.tsx b/packages/components/src/Avatar.tsx index fe839b615..796e11e1c 100644 --- a/packages/components/src/Avatar.tsx +++ b/packages/components/src/Avatar.tsx @@ -48,7 +48,7 @@ interface InitialsAvatarProps extends SVGAttributes, AvatarVariants const Avatar = ({ className, children, size = 'medium', ref, src, ...props }: AvatarProps) => { const status = useImageLoadingStatus(src); - if (status === 'error') { + if (status !== 'loaded') { return children ? ( {children} ) : ( @@ -57,9 +57,7 @@ const Avatar = ({ className, children, size = 'medium', ref, src, ...props }: Av } // biome-ignore lint/a11y/useAltText: - return status === 'loaded' ? ( - - ) : null; + return ; }; const IconAvatar = ({ className, size = 'medium', name = 'person', ...props }: IconAvatarProps) => { From 9fc0b1bd6612da58f204395273fa461705655c25 Mon Sep 17 00:00:00 2001 From: Robb Niznik Date: Wed, 15 Jan 2025 14:23:18 -0500 Subject: [PATCH 6/6] fix: remove icon variant --- packages/components/__tests__/Avatar.spec.tsx | 7 ----- packages/components/src/Avatar.tsx | 27 +++---------------- packages/components/src/index.ts | 4 +-- .../components/src/styles/Avatar.module.css | 7 ----- .../components/stories/Avatar.stories.tsx | 8 ++---- 5 files changed, 7 insertions(+), 46 deletions(-) diff --git a/packages/components/__tests__/Avatar.spec.tsx b/packages/components/__tests__/Avatar.spec.tsx index dd185e289..0e2c56f23 100644 --- a/packages/components/__tests__/Avatar.spec.tsx +++ b/packages/components/__tests__/Avatar.spec.tsx @@ -44,13 +44,6 @@ describe('Avatar', () => { expect(await screen.findByRole('img', { name: 'engineer' })).toBeVisible(); }); - it('renders icon on error', async () => { - // biome-ignore lint/suspicious/noExplicitAny: - (window.Image as any) = ErrorImage; - render(); - expect(await screen.findByRole('img', { hidden: true })).toBeVisible(); - }); - it('renders initials on error', async () => { // biome-ignore lint/suspicious/noExplicitAny: (window.Image as any) = ErrorImage; diff --git a/packages/components/src/Avatar.tsx b/packages/components/src/Avatar.tsx index 796e11e1c..f84d7d2e5 100644 --- a/packages/components/src/Avatar.tsx +++ b/packages/components/src/Avatar.tsx @@ -1,8 +1,6 @@ -import type { IconProps } from '@launchpad-ui/icons'; import type { VariantProps } from 'class-variance-authority'; import type { ImgHTMLAttributes, RefObject, SVGAttributes } from 'react'; -import { Icon } from '@launchpad-ui/icons'; import { cva, cx } from 'class-variance-authority'; import styles from './styles/Avatar.module.css'; @@ -39,38 +37,19 @@ interface AvatarProps extends ImgHTMLAttributes, AvatarVariant ref?: RefObject; } -interface IconAvatarProps extends Omit, AvatarVariants { - ref?: RefObject; -} - interface InitialsAvatarProps extends SVGAttributes, AvatarVariants {} const Avatar = ({ className, children, size = 'medium', ref, src, ...props }: AvatarProps) => { const status = useImageLoadingStatus(src); if (status !== 'loaded') { - return children ? ( - {children} - ) : ( - - ); + return {children}; } // biome-ignore lint/a11y/useAltText: return ; }; -const IconAvatar = ({ className, size = 'medium', name = 'person', ...props }: IconAvatarProps) => { - return ( - - ); -}; - const InitialsAvatar = ({ className, size = 'medium', @@ -99,5 +78,5 @@ const InitialsAvatar = ({ ); }; -export { Avatar, IconAvatar, InitialsAvatar }; -export type { AvatarProps, IconAvatarProps, InitialsAvatarProps }; +export { Avatar, InitialsAvatar }; +export type { AvatarProps, InitialsAvatarProps }; diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 044e2ee16..62632307c 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -2,7 +2,7 @@ import './styles/base.css'; import './styles/themes.css'; export type { AlertProps } from './Alert'; -export type { AvatarProps, IconAvatarProps, InitialsAvatarProps } from './Avatar'; +export type { AvatarProps, InitialsAvatarProps } from './Avatar'; export type { BreadcrumbsProps, BreadcrumbProps } from './Breadcrumbs'; export type { ButtonProps } from './Button'; export type { ButtonGroupProps } from './ButtonGroup'; @@ -80,7 +80,7 @@ export type { ToolbarProps } from './Toolbar'; export type { TooltipProps, TooltipTriggerProps } from './Tooltip'; export { Alert } from './Alert'; -export { Avatar, IconAvatar, InitialsAvatar } from './Avatar'; +export { Avatar, InitialsAvatar } from './Avatar'; export { Breadcrumbs, Breadcrumb } from './Breadcrumbs'; export { Button } from './Button'; export { ButtonGroup } from './ButtonGroup'; diff --git a/packages/components/src/styles/Avatar.module.css b/packages/components/src/styles/Avatar.module.css index 2b3274f1d..419c07283 100644 --- a/packages/components/src/styles/Avatar.module.css +++ b/packages/components/src/styles/Avatar.module.css @@ -18,13 +18,6 @@ height: var(--lp-size-40); } -.icon { - border: 1px solid var(--lp-color-border-ui-primary); -} - -.image { -} - .initials { font: var(--lp-text-label-1-semibold); font-size: var(--lp-font-size-100); diff --git a/packages/components/stories/Avatar.stories.tsx b/packages/components/stories/Avatar.stories.tsx index 45ef35e50..d36a8cc9d 100644 --- a/packages/components/stories/Avatar.stories.tsx +++ b/packages/components/stories/Avatar.stories.tsx @@ -2,11 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react'; import type { ComponentType } from 'react'; import { Box } from '@launchpad-ui/box'; -import { Avatar, IconAvatar, InitialsAvatar } from '../src'; +import { Avatar, InitialsAvatar } from '../src'; const meta: Meta = { component: Avatar, - subcomponents: { IconAvatar, InitialsAvatar } as Record>, + subcomponents: { InitialsAvatar } as Record>, title: 'Components/Content/Avatar', }; @@ -21,10 +21,6 @@ export const Example: Story = { }, }; -export const Icon: Story = { - render: (args) => , -}; - export const Initials: Story = { render: (args) => (