cleanup

scripts/dev-resources/devResources.mjs

@@ -43,7 +43,7 @@ export const devResources = {
   "<FIGMA_AVATARS_AVATAR_BLOCK>": [{ name: "AvatarBlock - Storybook", url: `${STORYBOOK_URL}sds-primitives-avatars--story-avatar-block`}],
   "<FIGMA_AVATARS_AVATAR_GROUP>": [{ name: "AvatarGroup - Storybook", url: `${STORYBOOK_URL}sds-primitives-avatars--story-avatar-group`}],
   "<FIGMA_BUTTONS_BUTTON>": [{ name: "Button - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-destructive-button`}],
-  "<FIGMA_BUTTONS_BUTTON_DANGER>": [{ name: "DestructiveButton - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-destructive-button`}],
+  "<FIGMA_BUTTONS_BUTTON_DANGER>": [{ name: "ButtonDanger - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-button-danger`}],
   "<FIGMA_BUTTONS_BUTTON_GROUP>": [{ name: "ButtonGroup - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-button-group`}],
   "<FIGMA_BUTTONS_ICON_BUTTON>": [{ name: "IconButton - Storybook", url: `${STORYBOOK_URL}sds-primitives-buttons--story-icon-button`}],
   "<FIGMA_DIALOG_DIALOG_BODY>": [{ name: "Dialog - Storybook", url: `${STORYBOOK_URL}sds-primitives-dialog--story-dialog`}],

src/App.tsx

@@ -101,7 +101,7 @@ function App() {
                 actionVariant="neutral"
                 heading="Free"
                 price={(0 * annualRatio).toString()}
-                pricePer={`/ per ${intervalText}`}
+                pricePer={`/ ${intervalText}`}
                 list={
                   <TextList>
                     <TextListItem>List item 1</TextListItem>
@@ -115,7 +115,7 @@ function App() {
                 action="Select"
                 heading="Starter"
                 price={(50 * annualRatio).toString()}
-                pricePer={`/ per ${intervalText}`}
+                pricePer={`/ ${intervalText}`}
                 list={
                   <TextList>
                     <TextListItem>List item 1</TextListItem>
@@ -130,7 +130,7 @@ function App() {
                 actionVariant="neutral"
                 heading="Enterprise"
                 price={(150 * annualRatio).toString()}
-                pricePer={`/ per ${intervalText}`}
+                pricePer={`/ ${intervalText}`}
                 list={
                   <TextList>
                     <TextListItem>List item 1</TextListItem>

src/figma/primitives/Button.figma.tsx

@@ -1,5 +1,5 @@
 import figma from "@figma/code-connect";
-import { Button, ButtonGroup, DestructiveButton } from "primitives";
+import { Button, ButtonDanger, ButtonGroup } from "primitives";
 
 const sharedProps = {
   label: figma.string("Label"),
@@ -44,11 +44,11 @@ figma.connect(Button, "<FIGMA_BUTTONS_BUTTON_DANGER>", {
     }),
   },
   example: ({ label, iconEnd, iconStart, ...props }) => (
-    <DestructiveButton onPress={() => {}} {...props}>
+    <ButtonDanger onPress={() => {}} {...props}>
       {iconStart}
       {label}
       {iconEnd}
-    </DestructiveButton>
+    </ButtonDanger>
   ),
 });
 

src/stories/_welcome/Hello.stories.tsx

@@ -24,14 +24,14 @@ export const StoryHello: StoryObj<{}> = {
         <FlexItem size="major">
           <Flex direction="column" gap="300">
             <TextHeading>Figma Simple Design System</TextHeading>
-            <Text lineHeight="body">
+            <Text>
               Simple Design System (SDS) is a base design system that shows how
               Figma’s Variables, Styles, Components, and Code Connect can be
               used alongside a React and CSS codebase to form a complete picture
               of a responsive web design system.
             </Text>
 
-            <Text lineHeight="body">
+            <Text>
               SDS is not just another design system in Figma. There are still
               many gaps between design and development, and SDS provides some
               best practices for how to bridge them. SDS tries to remain honest
@@ -40,7 +40,7 @@ export const StoryHello: StoryObj<{}> = {
               typical of many code-first component libraries.
             </Text>
 
-            <Text lineHeight="body">
+            <Text>
               Whether you’re looking to use SDS to start a new project, or are
               looking for examples of some common design systems best practices,
               you'll find tools inside this codebase and design file to steer

src/stories/layout/Flex.stories.tsx

@@ -35,8 +35,8 @@ export const StoryFlex: StoryObj<typeof Flex> = {
     },
   },
   render: (args) => (
-    <Flex direction="column" gap="600" container>
-      <Flex {...args} type="quarter">
+    <Flex direction="column" gap="600">
+      <Flex {...args} container type="quarter">
         <FlexItem size="full">{renderChild("full")}</FlexItem>
         <FlexItem size="major">{renderChild("major")}</FlexItem>
         <FlexItem size="minor">{renderChild("minor")}</FlexItem>
@@ -55,7 +55,7 @@ export const StoryFlex: StoryObj<typeof Flex> = {
         <FlexItem size="minor">{renderChild("minor")}</FlexItem>
         <FlexItem size="half">{renderChild("half")}</FlexItem>
       </Flex>
-      <Flex {...args} type="third">
+      <Flex {...args} container type="third">
         <FlexItem size="full">{renderChild("full")}</FlexItem>
         <FlexItem size="major">{renderChild("major")}</FlexItem>
         <FlexItem size="minor">{renderChild("minor")}</FlexItem>
@@ -67,7 +67,7 @@ export const StoryFlex: StoryObj<typeof Flex> = {
         <FlexItem size="minor">{renderChild("minor")}</FlexItem>
         <FlexItem size="minor">{renderChild("minor")}</FlexItem>
       </Flex>
-      <Flex {...args} type="quarter">
+      <Flex {...args} container type="quarter">
         {renderChild("span")}
         {renderChild("span")}
         {renderChild("span")}

src/stories/primitives/Button.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { IconActivity, IconArrowLeft } from "icons";
-import { Button, ButtonGroup, DestructiveButton } from "primitives";
+import { Button, ButtonDanger, ButtonGroup } from "primitives";
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -36,8 +36,8 @@ export const StoryButton: StoryObj<typeof Button> = {
   ),
 };
 
-export const StoryDestructiveButton: StoryObj<typeof DestructiveButton> = {
-  name: "Destructive Button",
+export const StoryButtonDanger: StoryObj<typeof ButtonDanger> = {
+  name: "Button Danger",
   args: {
     children: "Hello world",
     variant: "danger-primary",
@@ -55,11 +55,11 @@ export const StoryDestructiveButton: StoryObj<typeof DestructiveButton> = {
     },
   },
   render: ({ children, ...props }) => (
-    <DestructiveButton {...props}>
+    <ButtonDanger {...props}>
       <IconArrowLeft />
       {children}
       <IconActivity />
-    </DestructiveButton>
+    </ButtonDanger>
   ),
 };
 

src/stories/primitives/Notification.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { IconInfo } from "icons";
 import {
   Button,
-  DestructiveButton,
+  ButtonDanger,
   Notification,
   Text,
   TextStrong,
@@ -35,7 +35,7 @@ export const StoryNotification: StoryObj<
         {_type === "message" ? (
           <Button size="small">Hello</Button>
         ) : (
-          <DestructiveButton size="small">Hello</DestructiveButton>
+          <ButtonDanger size="small">Hello</ButtonDanger>
         )}
       </Notification>
     );

src/ui/compositions/Headers/headers.css

@@ -36,7 +36,7 @@
     }
   }
 
-  > .icon {
+  > .logo {
     --icon-color: var(--sds-color-icon-default-default);
   }
 }

src/ui/primitives/Button/Button.tsx

@@ -18,14 +18,17 @@ export const Button = React.forwardRef(function Button(
   );
 });
 
-export type DestructiveButtonProps = Omit<ButtonBaseProps, "variant"> & {
+export type ButtonDangerProps = Omit<ButtonBaseProps, "variant"> & {
   variant?: Exclude<
     ButtonBaseProps["variant"],
     "primary" | "subtle" | "neutral"
   >;
 };
-export const DestructiveButton = React.forwardRef(function Button(
-  { className, variant = "danger-primary", ...props }: DestructiveButtonProps,
+/**
+ * Only used for destructive actions
+ */
+export const ButtonDanger = React.forwardRef(function Button(
+  { className, variant = "danger-primary", ...props }: ButtonDangerProps,
   ref: React.ForwardedRef<HTMLElement>,
 ) {
   return (

src/ui/primitives/Button/button.css

@@ -32,7 +32,8 @@
 }
 
 .button-size-medium {
-  --button-font: var(--sds-font-body);
+  --button-font: var(--sds-font-body-base);
+
   --button-padding-x: var(--sds-size-space-300);
   --button-padding-y: var(--sds-size-space-300);
 

src/ui/primitives/IconButton/IconButton.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import {
   Button,
-  DestructiveButton,
-  DestructiveButtonProps,
+  ButtonDanger,
+  ButtonDangerProps,
   type ButtonProps,
 } from "primitives";
 import { ForwardedRef, forwardRef } from "react";
@@ -20,7 +20,7 @@ export const IconButton = forwardRef(function IconButton(
 });
 
 export type DestructiveIconButtonProps = Omit<
-  DestructiveButtonProps,
+  ButtonDangerProps,
   "aria-label"
 > & {
   "aria-label": string;
@@ -29,5 +29,5 @@ export const DestructiveIconButton = forwardRef(function IconButton(
   props: DestructiveIconButtonProps,
   ref: ForwardedRef<HTMLElement>,
 ) {
-  return <DestructiveButton {...props} {...ref} className="icon-button" />;
+  return <ButtonDanger {...props} {...ref} className="icon-button" />;
 });

src/ui/primitives/Logo/Logo.tsx

@@ -1,14 +1,45 @@
 import clsx from "clsx";
-import { IconFigma } from "icons";
 import { AnchorOrButton, type AnchorOrButtonProps } from "utils";
 import "./logo.css";
 
 export type LogoProps = AnchorOrButtonProps;
 export function Logo({ className, ...props }: LogoProps) {
   const classNames = clsx(className, "logo");
   return (
-    <AnchorOrButton className={classNames} {...props}>
-      <IconFigma size="40" />
+    <AnchorOrButton className={classNames} {...props} aria-label="Company logo">
+      <svg
+        width="172"
+        height="247"
+        viewBox="0 0 172 247"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M164 46.5C164 67.763 146.763 85 125.5 85L86 85L86 8.0001L125.5 8.0001C146.763 8.0001 164 25.2371 164 46.5V46.5Z"
+          stroke="var(--logo-color)"
+          stroke-width="15.081"
+        />
+        <path
+          d="M8 46.5C8 67.763 25.237 85 46.5 85L86 85L86 8.0001L46.5 8.0001C25.237 8.0001 8 25.2371 8 46.5V46.5Z"
+          stroke="var(--logo-color)"
+          stroke-width="15.081"
+        />
+        <path
+          d="M8 123.501C8 144.764 25.237 162.001 46.5 162.001H86L86 85.0011L46.5 85.0011C25.237 85.0011 8 102.238 8 123.501V123.501Z"
+          stroke="var(--logo-color)"
+          stroke-width="15.081"
+        />
+        <path
+          d="M8 200.5C8 221.763 25.4854 239 46.7484 239V239C68.2875 239 86 221.539 86 200L86 162H46.5C25.237 162 8 179.237 8 200.5V200.5Z"
+          stroke="var(--logo-color)"
+          stroke-width="15.081"
+        />
+        <path
+          d="M86 123.501C86 144.764 103.237 162.001 124.5 162.001H125.5C146.763 162.001 164 144.764 164 123.501V123.501C164 102.238 146.763 85.0011 125.5 85.0011H124.5C103.237 85.0011 86 102.238 86 123.501V123.501Z"
+          stroke="var(--logo-color)"
+          stroke-width="15.081"
+        />
+      </svg>
     </AnchorOrButton>
   );
 }

src/ui/primitives/Logo/logo.css

@@ -18,4 +18,9 @@
       top: calc(-1 * var(--offset));
     }
   }
+  svg {
+    --logo-color: var(--sds-color-icon-default-default);
+    height: auto;
+    width: var(--sds-size-icon-large);
+  }
 }

src/ui/primitives/Text/Text.tsx

@@ -15,7 +15,7 @@ export type TextProps = RACTextProps & TextLineHeightProps;
 export function Text({
   className,
   elementType = "p",
-  lineHeight = "single",
+  lineHeight = "body",
   ...props
 }: TextProps) {
   const classNames = clsx(
@@ -27,24 +27,34 @@ export function Text({
     <RACText elementType={elementType} className={classNames} {...props} />
   );
 }
-export type TextSmallProps = RACTextProps;
+export type TextSmallProps = RACTextProps & TextLineHeightProps;
 export function TextSmall({
   className,
   elementType = "small",
+  lineHeight = "body",
   ...props
 }: TextSmallProps) {
-  const classNames = clsx(className, "text-body-small");
+  const classNames = clsx(
+    className,
+    "text-body-small",
+    `text-line-height-${lineHeight}`,
+  );
   return (
     <RACText className={classNames} elementType={elementType} {...props} />
   );
 }
-export type TextSmallStrongProps = RACTextProps;
+export type TextSmallStrongProps = RACTextProps & TextLineHeightProps;
 export function TextSmallStrong({
   className,
   elementType = "small",
+  lineHeight = "body",
   ...props
 }: TextSmallProps) {
-  const classNames = clsx(className, "text-body-small-strong");
+  const classNames = clsx(
+    className,
+    "text-body-small-strong",
+    `text-line-height-${lineHeight}`,
+  );
   return (
     <RACText className={classNames} elementType={elementType} {...props} />
   );