diff --git a/scripts/preview/Figma.stories.tsx b/scripts/preview/Figma.stories.tsx index a77cb43..a374372 100644 --- a/scripts/preview/Figma.stories.tsx +++ b/scripts/preview/Figma.stories.tsx @@ -76,12 +76,15 @@ export const AvatarStory: StoryObj< } > = { args: { - size: "md", + size: "medium", shape: "square", type: "image", }, argTypes: { - size: { control: { type: "select" }, options: ["sm", "md", "lg"] }, + size: { + control: { type: "select" }, + options: ["small", "medium", "large"], + }, shape: { control: { type: "select" }, options: ["square", "circle"] }, type: { control: { type: "select" }, options: ["initials", "image"] }, }, @@ -108,7 +111,7 @@ export const AvatarGroupStory: StoryObj< }, render: ({ spacing, ...args }) => (
-
+
diff --git a/src/stories/ui/compositions/Cards.stories.tsx b/src/stories/ui/compositions/Cards.stories.tsx index ed6daf3..ac4151e 100644 --- a/src/stories/ui/compositions/Cards.stories.tsx +++ b/src/stories/ui/compositions/Cards.stories.tsx @@ -53,7 +53,7 @@ export const Default: StoryObj< A nice image ) : undefined @@ -84,7 +84,7 @@ export const BlockPricingCard: StoryObj = { = { export const BlockProductInfoCard: StoryObj = { render: () => ( - + } heading="Product" @@ -131,7 +131,7 @@ export const BlockTestimonialCard: StoryObj = { wrap type="third" alignPrimary="stretch" - gap="lg" + gap="400" direction="row" > ( export const Default: StoryObj = { args: { - gap: "sm", + gap: "200", wrap: true, }, argTypes: { gap: { control: { type: "select" }, - options: [undefined, "xs", "sm", "md", "lg", "xl"], + options: [undefined, "100", "200", "300", "400", "600", "800"], }, }, render: (args) => ( - + {renderChild("full")} {renderChild("major")} diff --git a/src/stories/ui/layout/Section.stories.tsx b/src/stories/ui/layout/Section.stories.tsx index 63db4bb..0fe99c7 100644 --- a/src/stories/ui/layout/Section.stories.tsx +++ b/src/stories/ui/layout/Section.stories.tsx @@ -10,13 +10,13 @@ export default meta; export const Default: StoryObj = { args: { - padding: "md", + padding: "1600", variant: "subtle", }, argTypes: { padding: { control: { type: "select" }, - options: ["sm", "md", "lg"], + options: ["800", "1600", "4000"], }, variant: { control: { type: "select" }, @@ -26,17 +26,17 @@ export const Default: StoryObj = { render: (args) => ( <>
- + Hello there
- + Hello there
- + Hello there
diff --git a/src/stories/ui/primitives/Avatar.stories.tsx b/src/stories/ui/primitives/Avatar.stories.tsx index 0be500f..c1a9d42 100644 --- a/src/stories/ui/primitives/Avatar.stories.tsx +++ b/src/stories/ui/primitives/Avatar.stories.tsx @@ -1,14 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import "react"; import { Flex } from "ui/layout"; -import { - Avatar, - AvatarBlock, - AvatarButton, - AvatarGroup, - Description, - Label, -} from "ui/primitives"; +import { Avatar, AvatarBlock, AvatarButton, AvatarGroup } from "ui/primitives"; const meta: Meta = { component: Avatar, @@ -22,10 +15,10 @@ type GroupStory = StoryObj; export const Image: Story = { args: {}, render: () => ( - - + + - + ), }; @@ -33,10 +26,10 @@ export const Image: Story = { export const Initials: Story = { args: {}, render: () => ( - - - - + + + + ), }; @@ -44,30 +37,30 @@ export const Initials: Story = { export const Buttons: Story = { args: {}, render: () => ( - - + + - + ), }; export const Group: GroupStory = { args: { - spacing: "sm", + spacing: "200", overlap: false, max: 3, }, argTypes: { spacing: { - options: ["sm", "md", "xs"], + options: ["100", "200", "300"], control: { type: "select", }, }, }, render: (args) => ( - + @@ -83,10 +76,8 @@ export const Group: GroupStory = { export const Block: Story = { args: {}, render: () => ( - - - - @fullname420 + + ), }; diff --git a/src/stories/ui/primitives/Checkbox.stories.tsx b/src/stories/ui/primitives/Checkbox.stories.tsx index 114d8d6..eded239 100644 --- a/src/stories/ui/primitives/Checkbox.stories.tsx +++ b/src/stories/ui/primitives/Checkbox.stories.tsx @@ -57,7 +57,7 @@ export const Indeterminate: Story = { const options = ["One with a very long name indeed.", "Two", "Three"]; const [selected, setSelected] = useState([]); return ( - + 0} isIndeterminate={selected.length !== options.length} diff --git a/src/stories/ui/primitives/Tag.stories.tsx b/src/stories/ui/primitives/Tag.stories.tsx index 878f2fb..d9ba461 100644 --- a/src/stories/ui/primitives/Tag.stories.tsx +++ b/src/stories/ui/primitives/Tag.stories.tsx @@ -20,7 +20,7 @@ export default meta; export const Default: StoryObj = { args: { variant: "default" }, render: (args) => ( - + Default @@ -45,7 +45,7 @@ export const Removable: StoryObj = { variant: "default", }, render: (args) => ( - + {}} scheme="default" {...args}> Default @@ -68,7 +68,7 @@ export const Removable: StoryObj = { export const TagButtonDefault: StoryObj = { args: { variant: "default" }, render: (args) => ( - + Default diff --git a/src/stories/ui/primitives/Text.stories.tsx b/src/stories/ui/primitives/Text.stories.tsx index 2beab4b..dabd31a 100644 --- a/src/stories/ui/primitives/Text.stories.tsx +++ b/src/stories/ui/primitives/Text.stories.tsx @@ -28,7 +28,7 @@ export const Default: Story = { args: {}, render: () => { return ( - + TextTitleHero TextTitlePage TextSubtitle diff --git a/src/ui/compositions/Cards/Cards.tsx b/src/ui/compositions/Cards/Cards.tsx index dbb8aa1..def55a1 100644 --- a/src/ui/compositions/Cards/Cards.tsx +++ b/src/ui/compositions/Cards/Cards.tsx @@ -7,8 +7,6 @@ import { AvatarProps, Button, ButtonGroup, - Description, - Label, Text, TextHeading, TextList, @@ -207,10 +205,8 @@ export function TestimonialCard({ return ( {heading} - + - - @{username} ); diff --git a/src/ui/compositions/Footers/Footers.tsx b/src/ui/compositions/Footers/Footers.tsx index 73b0bcf..7f426eb 100644 --- a/src/ui/compositions/Footers/Footers.tsx +++ b/src/ui/compositions/Footers/Footers.tsx @@ -22,17 +22,17 @@ export function Footer({ className, ...props }: FooterProps) {
- + @@ -44,7 +44,7 @@ export function Footer({ className, ...props }: FooterProps) { @@ -105,7 +104,7 @@ export function HeaderAuth() { {navigation} {currentUser ? ( - + ) : ( - + {navigation} {currentUser ? ( @@ -153,13 +152,14 @@ export function HeaderAuth() { - + - - View profile Log out @@ -183,7 +183,7 @@ export function Header({ className, ...props }: HeaderProps) { className="header" elementType="header" variant="stroke" - padding="sm" + padding="800" {...props} > @@ -191,7 +191,7 @@ export function Header({ className, ...props }: HeaderProps) { - + diff --git a/src/ui/layout/Flex/Flex.tsx b/src/ui/layout/Flex/Flex.tsx index 4743304..b45ab2a 100644 --- a/src/ui/layout/Flex/Flex.tsx +++ b/src/ui/layout/Flex/Flex.tsx @@ -6,7 +6,13 @@ export type FlexProps = ComponentPropsWithoutRef<"div"> & { alignPrimary?: "start" | "end" | "center" | "stretch" | "space-between"; alignSecondary?: "start" | "end" | "center" | "stretch" | "space-between"; direction?: "row" | "row-reverse" | "column" | "column-reverse"; - gap?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; + gap?: + | "100" // xs + | "200" // sm + | "300" // md + | "400" // lg + | "600" // xl + | "800"; // xxl; type?: "quarter" | "third" | "half" | "auto"; container?: boolean; wrap?: boolean; diff --git a/src/ui/layout/Flex/flex.css b/src/ui/layout/Flex/flex.css index d0b398f..361d3c4 100644 --- a/src/ui/layout/Flex/flex.css +++ b/src/ui/layout/Flex/flex.css @@ -75,22 +75,22 @@ &.flex-wrap { flex-wrap: wrap; } - &.flex-gap-xs { + &.flex-gap-100 { --flex-gap: var(--sds-size-space-100); } - &.flex-gap-sm { + &.flex-gap-200 { --flex-gap: var(--sds-size-space-200); } - &.flex-gap-md { + &.flex-gap-300 { --flex-gap: var(--sds-size-space-300); } - &.flex-gap-lg { + &.flex-gap-400 { --flex-gap: var(--sds-size-space-400); } - &.flex-gap-xl { + &.flex-gap-600 { --flex-gap: var(--sds-size-space-600); } - &.flex-gap-xxl { + &.flex-gap-800 { --flex-gap: var(--sds-size-space-800); } } diff --git a/src/ui/layout/Section/Section.tsx b/src/ui/layout/Section/Section.tsx index 169ee57..d9f3f82 100644 --- a/src/ui/layout/Section/Section.tsx +++ b/src/ui/layout/Section/Section.tsx @@ -6,15 +6,15 @@ export type SectionProps = ComponentPropsWithoutRef< "section" | "header" | "footer" > & { elementType?: "section" | "header" | "footer"; - padding?: "sm" | "md" | "lg"; - paddingTop?: "sm" | "md" | "lg"; - paddingBottom?: "sm" | "md" | "lg"; + padding?: "800" | "1600" | "4000"; + paddingTop?: "800" | "1600" | "4000"; + paddingBottom?: "800" | "1600" | "4000"; variant?: "brand" | "secondary" | "stroke" | "subtle"; }; export function Section({ className, elementType = "section", - padding = "md", + padding = "1600", paddingBottom, paddingTop, variant = "subtle", diff --git a/src/ui/layout/Section/section.css b/src/ui/layout/Section/section.css index 8415637..8172aad 100644 --- a/src/ui/layout/Section/section.css +++ b/src/ui/layout/Section/section.css @@ -4,28 +4,22 @@ var(--padding-y-bottom); width: 100%; } -.section-padding-bottom-sm { +.section-padding-bottom-800 { --padding-y-bottom: var(--sds-size-space-800); } -.section-padding-top-sm { +.section-padding-top-800 { --padding-y-top: var(--sds-size-space-800); } -.section-padding-bottom-md { +.section-padding-bottom-1600 { --padding-y-bottom: var(--sds-size-space-1600); } -.section-padding-top-md { +.section-padding-top-1600 { --padding-y-top: var(--sds-size-space-1600); } -.section-padding-bottom-lg { +.section-padding-bottom-4000 { --padding-y-bottom: var(--sds-size-space-4000); } -.section-padding-top-lg { - --padding-y-top: var(--sds-size-space-4000); -} -.section-padding-bottom-xl { - --padding-y-bottom: var(--sds-size-space-4000); -} -.section-padding-top-xl { +.section-padding-top-4000 { --padding-y-top: var(--sds-size-space-4000); } diff --git a/src/ui/primitives/Avatar/Avatar.figma.tsx b/src/ui/primitives/Avatar/Avatar.figma.tsx index d1a387d..4231090 100644 --- a/src/ui/primitives/Avatar/Avatar.figma.tsx +++ b/src/ui/primitives/Avatar/Avatar.figma.tsx @@ -1,12 +1,11 @@ import figma from "@figma/code-connect"; -import { Description, Label } from "../Fieldset/Fieldset"; import { Avatar, AvatarBlock, AvatarGroup } from "./Avatar"; figma.connect(AvatarGroup, "", { props: { spacing: figma.enum("Spacing", { - Overlap: "sm", - Spaced: "xs", + Overlap: "200", + Spaced: "100", }), overlap: figma.enum("Spacing", { Overlap: true, @@ -26,11 +25,11 @@ figma.connect(Avatar, "", { Square: true, }), initials: figma.enum("Type", { - Initials: figma.string("Initials"), + Initial: figma.string("Initials"), }), size: figma.enum("Size", { - Large: "lg", - Small: "sm", + Large: "large", + Small: "small", }), src: figma.enum("Type", { Image: "https://placehold.co/80", @@ -48,10 +47,8 @@ figma.connect(AvatarBlock, "", { avatar: figma.children("Avatar"), }, example: ({ title, description, avatar }) => ( - + {avatar} - - {description} ), }); diff --git a/src/ui/primitives/Avatar/Avatar.tsx b/src/ui/primitives/Avatar/Avatar.tsx index 7c3b271..06fe25f 100644 --- a/src/ui/primitives/Avatar/Avatar.tsx +++ b/src/ui/primitives/Avatar/Avatar.tsx @@ -4,6 +4,7 @@ import { AnchorOrButton, type AnchorOrButtonProps, } from "ui/utils/AnchorOrButton"; +import { Text, TextStrong } from "../Text/Text"; import "./avatar.css"; type SharedAvatarProps = { @@ -11,7 +12,7 @@ type SharedAvatarProps = { square?: boolean; initials?: string; alt?: string; - size?: "sm" | "md" | "lg"; + size?: "small" | "medium" | "large"; }; function renderInitialsAndImage({ @@ -53,7 +54,7 @@ export function Avatar({ square = false, initials, alt = "", - size = "md", + size = "medium", ...props }: AvatarProps) { const classNames = clsx( @@ -79,7 +80,7 @@ export const AvatarButton = React.forwardRef(function AvatarButton( square = false, initials, alt = "", - size = "md", + size = "medium", ...props }: AvatarButtonProps, ref: React.ForwardedRef, @@ -99,30 +100,37 @@ export const AvatarButton = React.forwardRef(function AvatarButton( ); }); -export type AvatarBlockProps = React.ComponentPropsWithoutRef<"div">; +export type AvatarBlockProps = React.ComponentPropsWithoutRef<"div"> & { + title: string; + description?: string; +}; export const AvatarBlock = ({ className, children, + title, + description, ...props -}: AvatarGroupProps) => { +}: AvatarBlockProps) => { const classNames = clsx(className, "avatar-block"); return (
{children} + {title} + {description && {description}}
); }; export type AvatarGroupProps = React.ComponentPropsWithoutRef<"div"> & { max?: number; - spacing?: "xs" | "sm" | "md"; + spacing?: "100" | "200" | "300"; overlap?: boolean; }; export const AvatarGroup = ({ className, children, max = 3, - spacing = "sm", + spacing = "200", overlap, ...props }: AvatarGroupProps) => { diff --git a/src/ui/primitives/Avatar/avatar.css b/src/ui/primitives/Avatar/avatar.css index 28d4d18..35f133e 100644 --- a/src/ui/primitives/Avatar/avatar.css +++ b/src/ui/primitives/Avatar/avatar.css @@ -45,26 +45,27 @@ } .avatar-block { - align-items: center; + align-items: start; + color: var(--sds-color-text-default-secondary); display: grid; - grid-template-areas: "avatar label"; + grid-template-areas: "avatar title"; grid-template-columns: auto 1fr; column-gap: var(--sds-size-space-200); - row-gap: var(--sds-size-space-100); + row-gap: var(--sds-size-space-050); - &:has(> .description) { - grid-template-areas: "avatar label" "avatar description"; + &:has(> .text-body-base) { + grid-template-areas: "avatar title" "avatar description"; } > .avatar { grid-area: avatar; } - > .label { - grid-area: label; + > .text-body-strong { + grid-area: title; } - > .description { + > .text-body-base { grid-area: description; } } @@ -76,13 +77,13 @@ --avatar-border-radius: var(--sds-size-radius-200); } -.avatar-size-sm { +.avatar-size-small { --avatar-diameter: var(--sds-typography-scale-05); } -.avatar-size-md { +.avatar-size-medium { --avatar-diameter: var(--sds-typography-scale-06); } -.avatar-size-lg { +.avatar-size-large { --avatar-diameter: var(--sds-typography-scale-07); } @@ -117,13 +118,13 @@ box-shadow: var(--sds-effects-shadows-drop-shadow-300); } } - &.avatar-group-spacing-xs { + &.avatar-group-spacing-100 { --avatar-group-gap: var(--sds-size-space-100); } - &.avatar-group-spacing-sm { + &.avatar-group-spacing-200 { --avatar-group-gap: var(--sds-size-space-200); } - &.avatar-group-spacing-md { + &.avatar-group-spacing-300 { --avatar-group-gap: var(--sds-size-space-300); } } diff --git a/src/ui/primitives/Image/Image.tsx b/src/ui/primitives/Image/Image.tsx index 66b366f..318b83d 100644 --- a/src/ui/primitives/Image/Image.tsx +++ b/src/ui/primitives/Image/Image.tsx @@ -5,7 +5,7 @@ import "./image.css"; export type ImageProps = Omit, "alt"> & { alt: string; aspectRatio?: "1-1" | "16-9" | "4-3" | "fill" | "natural"; - size?: "sm" | "md" | "lg" | "fill" | "natural"; + size?: "small" | "medium" | "large" | "fill" | "natural"; variant?: "default" | "rounded"; }; export function Image({ diff --git a/src/ui/primitives/Image/image.css b/src/ui/primitives/Image/image.css index 849c258..f0c8953 100644 --- a/src/ui/primitives/Image/image.css +++ b/src/ui/primitives/Image/image.css @@ -35,15 +35,15 @@ img.image-loading { aspect-ratio: auto; } -.image-size-sm { +.image-size-small { --image-size-height: 10rem; height: var(--image-size-height); } -.image-size-md { +.image-size-medium { --image-size-height: 20rem; height: var(--image-size-height); } -.image-size-lg { +.image-size-large { --image-size-height: 30rem; height: var(--image-size-height); } diff --git a/src/ui/primitives/Text/Text.tsx b/src/ui/primitives/Text/Text.tsx index f3561fd..922d544 100644 --- a/src/ui/primitives/Text/Text.tsx +++ b/src/ui/primitives/Text/Text.tsx @@ -197,7 +197,7 @@ export function TextContentHeading({ `text-align-${align}`, ); return ( - + {heading} {subheading && {subheading}} @@ -218,7 +218,7 @@ export function TextContentTitle({ }: TextContentTitleProps) { const classNames = clsx(className, "text-content-title"); return ( - + {title} {subtitle && (