86 tshirt sizes

figma · Jun 14, 2024 · a6b6a3c · a6b6a3c
1 parent 0d18c69
commit a6b6a3c
Show file tree

Hide file tree

Showing 22 changed files with 120 additions and 124 deletions.
diff --git 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 }) => (
     <AvatarGroup
-      spacing={spacing === "spaced" ? "xs" : "sm"}
+      spacing={spacing === "spaced" ? "100" : "200"}
       overlap={spacing === "overlap"}
       max={3}
       {...args}

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,7 +7,7 @@ function App() {
   return (
     <AuthenticationProvider>
       <Header />
-      <Section padding="lg">
+      <Section padding="4000">
         <Flex direction="row" alignPrimary="center" wrap container>
           <TextContentTitle align="center" title="Title" subtitle="Subtitle" />
         </Flex>

diff --git a/src/stories/ui/compositions/Cards.stories.tsx b/src/stories/ui/compositions/Cards.stories.tsx
@@ -53,7 +53,7 @@ export const Default: StoryObj<
           <Image
             alt="A nice image"
             aspectRatio="1-1"
-            size="sm"
+            size="small"
             src="https://placehold.co/500"
           />
         ) : undefined
@@ -84,7 +84,7 @@ export const BlockPricingCard: StoryObj<typeof PricingCard> = {
     <Flex
       container
       wrap
-      gap="lg"
+      gap="400"
       type="quarter"
       alignPrimary="center"
       direction="row"
@@ -105,7 +105,7 @@ export const BlockPricingCard: StoryObj<typeof PricingCard> = {
 
 export const BlockProductInfoCard: StoryObj<typeof ProductInfoCard> = {
   render: () => (
-    <Flex container wrap type="half" gap="lg" direction="row">
+    <Flex container wrap type="half" gap="400" direction="row">
       <ProductInfoCard
         asset={<Image alt="Accessibility!" src="https://placehold.co/300" />}
         heading="Product"
@@ -131,7 +131,7 @@ export const BlockTestimonialCard: StoryObj<typeof TestimonialCard> = {
       wrap
       type="third"
       alignPrimary="stretch"
-      gap="lg"
+      gap="400"
       direction="row"
     >
       <TestimonialCard

diff --git a/src/stories/ui/layout/Flex.stories.tsx b/src/stories/ui/layout/Flex.stories.tsx
@@ -24,17 +24,17 @@ const renderChild = (text: string) => (
 
 export const Default: StoryObj<typeof Flex> = {
   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) => (
-    <Flex direction="column" gap="xl" container>
+    <Flex direction="column" gap="600" container>
       <Flex {...args} type="quarter">
         <FlexItem size="full">{renderChild("full")}</FlexItem>
         <FlexItem size="major">{renderChild("major")}</FlexItem>

diff --git 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<typeof Section> = {
   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<typeof Section> = {
   render: (args) => (
     <>
       <Section {...args}>
-        <Flex container alignPrimary="center" gap="xl">
+        <Flex container alignPrimary="center" gap="600">
           Hello there
         </Flex>
       </Section>
       <Section {...args} variant="secondary">
-        <Flex container alignPrimary="center" gap="xl">
+        <Flex container alignPrimary="center" gap="600">
           Hello there
         </Flex>
       </Section>
       <Section {...args}>
-        <Flex container alignPrimary="center" gap="xl">
+        <Flex container alignPrimary="center" gap="600">
           Hello there
         </Flex>
       </Section>

diff --git 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<typeof Avatar> = {
   component: Avatar,
@@ -22,52 +15,52 @@ type GroupStory = StoryObj<typeof AvatarGroup>;
 export const Image: Story = {
   args: {},
   render: () => (
-    <Flex alignPrimary="center" gap="sm" alignSecondary="center">
-      <Avatar src="https://placehold.co/200" size="sm" />
+    <Flex alignPrimary="center" gap="200" alignSecondary="center">
+      <Avatar src="https://placehold.co/200" size="small" />
       <Avatar src="https://placehold.co/200" />
-      <Avatar src="https://placehold.co/200" square size="lg" />
+      <Avatar src="https://placehold.co/200" square size="large" />
     </Flex>
   ),
 };
 
 export const Initials: Story = {
   args: {},
   render: () => (
-    <Flex alignPrimary="center" gap="sm" alignSecondary="center">
-      <Avatar initials="JA" size="sm" />
-      <Avatar initials="JA" size="md" />
-      <Avatar initials="JA" square size="lg" />
+    <Flex alignPrimary="center" gap="200" alignSecondary="center">
+      <Avatar initials="JA" size="small" />
+      <Avatar initials="JA" size="medium" />
+      <Avatar initials="JA" square size="large" />
     </Flex>
   ),
 };
 
 export const Buttons: Story = {
   args: {},
   render: () => (
-    <Flex alignPrimary="center" gap="sm" alignSecondary="center">
-      <AvatarButton square size="sm" src="https://placehold.co/200" />
+    <Flex alignPrimary="center" gap="200" alignSecondary="center">
+      <AvatarButton square size="small" src="https://placehold.co/200" />
       <AvatarButton square src="https://placehold.co/200" />
-      <AvatarButton size="lg" src="https://placehold.co/200" />
+      <AvatarButton size="large" src="https://placehold.co/200" />
     </Flex>
   ),
 };
 
 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) => (
-    <Flex alignPrimary="center" gap="sm" alignSecondary="center">
+    <Flex alignPrimary="center" gap="200" alignSecondary="center">
       <AvatarGroup {...args}>
         <Avatar initials="JA" />
         <Avatar src="https://placehold.co/200" />
@@ -83,10 +76,8 @@ export const Group: GroupStory = {
 export const Block: Story = {
   args: {},
   render: () => (
-    <AvatarBlock>
-      <AvatarButton square size="lg" src="https://placehold.co/200" />
-      <Label>Full Name</Label>
-      <Description>@fullname420</Description>
+    <AvatarBlock title="Full Name" description="@fullname420">
+      <AvatarButton square size="large" src="https://placehold.co/200" />
     </AvatarBlock>
   ),
 };
diff --git 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<string[]>([]);
     return (
-      <Flex direction="column" gap="sm">
+      <Flex direction="column" gap="200">
         <CheckboxField
           isSelected={selected.length > 0}
           isIndeterminate={selected.length !== options.length}

diff --git 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<typeof Tag> = {
   args: { variant: "default" },
   render: (args) => (
-    <Flex wrap alignPrimary="center" gap="md">
+    <Flex wrap alignPrimary="center" gap="300">
       <Tag scheme="default" {...args}>
         Default
       </Tag>
@@ -45,7 +45,7 @@ export const Removable: StoryObj<typeof Tag> = {
     variant: "default",
   },
   render: (args) => (
-    <Flex wrap gap="md">
+    <Flex wrap gap="300">
       <Tag onRemove={() => {}} scheme="default" {...args}>
         Default
       </Tag>
@@ -68,7 +68,7 @@ export const Removable: StoryObj<typeof Tag> = {
 export const TagButtonDefault: StoryObj<typeof TagButton> = {
   args: { variant: "default" },
   render: (args) => (
-    <Flex wrap alignPrimary="center" gap="md">
+    <Flex wrap alignPrimary="center" gap="300">
       <TagButton scheme="default" {...args}>
         Default
       </TagButton>

diff --git 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 (
-      <Flex direction="column" gap="lg">
+      <Flex direction="column" gap="400">
         <TextTitleHero>TextTitleHero</TextTitleHero>
         <TextTitlePage>TextTitlePage</TextTitlePage>
         <TextSubtitle>TextSubtitle</TextSubtitle>

diff --git 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 (
     <Card {...props} direction="vertical" variant="stroke">
       <TextHeading>{heading}</TextHeading>
-      <AvatarBlock>
+      <AvatarBlock title={name} description={`@${username}`}>
         <Avatar size="lg" src={src} initials={initials} />
-        <Label>{name}</Label>
-        <Description>@{username}</Description>
       </AvatarBlock>
     </Card>
   );

diff --git a/src/ui/compositions/Footers/Footers.tsx b/src/ui/compositions/Footers/Footers.tsx
@@ -22,17 +22,17 @@ export function Footer({ className, ...props }: FooterProps) {
     <Section
       elementType="footer"
       variant="stroke"
-      paddingTop="md"
-      paddingBottom="lg"
+      paddingTop="1600""
+      paddingBottom="4000""
       style={{ marginTop: "auto" }}
       {...props}
     >
-      <Flex wrap type="quarter" gap="xl" container>
+      <Flex wrap type="quarter" gap="600" container>
         <FlexItem size={isTablet ? "full" : "minor"}>
           <Flex
             direction={isTabletDown ? "row" : "column"}
             alignPrimary="space-between"
-            gap="xl"
+            gap="600"
             alignSecondary="start"
           >
             <FlexItem>
@@ -44,7 +44,7 @@ export function Footer({ className, ...props }: FooterProps) {
         <FlexItem size={isTablet ? "full" : "major"}>
           <Flex
             type="auto"
-            gap="xl"
+            gap="600"
             wrap
             alignPrimary="stretch"
             direction={isMobile ? "column" : "row"}

diff --git a/src/ui/compositions/Headers/Headers.tsx b/src/ui/compositions/Headers/Headers.tsx
@@ -8,7 +8,6 @@ import {
   AvatarBlock,
   Button,
   ButtonGroup,
-  Description,
   Dialog,
   DialogModal,
   Flex,
@@ -78,7 +77,7 @@ export function HeaderAuth() {
   return (
     <Flex
       direction="column"
-      gap="md"
+      gap="300"
       alignPrimary="center"
       alignSecondary="center"
     >
@@ -105,7 +104,7 @@ export function HeaderAuth() {
                 <Flex direction="column" alignPrimary="space-between">
                   {navigation}
                   {currentUser ? (
-                    <Flex alignSecondary="center" gap="sm" direction="column">
+                    <Flex alignSecondary="center" gap="200" direction="column">
                       <FlexItem>
                         <Flex alignPrimary="center">
                           <Avatar
@@ -139,7 +138,7 @@ export function HeaderAuth() {
             </DialogModal>
           </Flex>
         ) : (
-          <Flex gap="lg" alignSecondary="center">
+          <Flex gap="400" alignSecondary="center">
             {navigation}
             {currentUser ? (
               <MenuTrigger>
@@ -153,13 +152,14 @@ export function HeaderAuth() {
                 <MenuPopover placement="bottom right">
                   <Menu>
                     <MenuItem>
-                      <AvatarBlock>
+                      <AvatarBlock
+                        title={currentUser.name}
+                        description="View profile"
+                      >
                         <Avatar
                           src={currentUser.avatar}
                           initials={currentUser.name.charAt(0)}
                         />
-                        <Label>{currentUser.name}</Label>
-                        <Description>View profile</Description>
                       </AvatarBlock>
                     </MenuItem>
                     <MenuItem onAction={logout}>Log out</MenuItem>
@@ -183,15 +183,15 @@ export function Header({ className, ...props }: HeaderProps) {
       className="header"
       elementType="header"
       variant="stroke"
-      padding="sm"
+      padding="800"
       {...props}
     >
       <Flex container alignPrimary="space-between" alignSecondary="center">
         <FlexItem size="minor">
           <Logo />
         </FlexItem>
         <FlexItem size="major">
-          <Flex gap="xl" alignPrimary="end" alignSecondary="center">
+          <Flex gap="600" alignPrimary="end" alignSecondary="center">
             <HeaderAuth />
           </Flex>
         </FlexItem>