layout and section

figma · May 24, 2024 · 1e178d9 · 1e178d9
1 parent 4b6b905
commit 1e178d9
Show file tree

Hide file tree

Showing 21 changed files with 4,316 additions and 4,179 deletions.
diff --git a/scripts/tokens/tokens.json b/scripts/tokens/tokens.json
diff --git a/scripts/tokens/tokensCodeSyntaxes.js b/scripts/tokens/tokensCodeSyntaxes.js
@@ -7,7 +7,7 @@ Promise.all([
 ["VariableID:9:11223", "var(--sds-responsive-display-flex-to-none)"],
 ["VariableID:9:11222", "var(--sds-responsive-display-none-to-flex)"],
 ["VariableID:2117:5645", "var(--sds-responsive-ratio-column-full)"],
-["VariableID:2117:5648", "var(--sds-responsive-ratio-column-quarter-half)"],
+["VariableID:2117:5648", "var(--sds-responsive-ratio-column-half)"],
 ["VariableID:2117:5646", "var(--sds-responsive-ratio-column-quarter-major)"],
 ["VariableID:2117:5647", "var(--sds-responsive-ratio-column-quarter-minor)"],
 ["VariableID:2144:3761", "var(--sds-responsive-ratio-column-third-major)"],
@@ -40,10 +40,11 @@ Promise.all([
 ["VariableID:9:11262", "var(--sds-size-gap-xl)"],
 ["VariableID:9:11258", "var(--sds-size-gap-xs)"],
 ["VariableID:2143:14622", "var(--sds-size-gap-xxl)"],
-["VariableID:107:11151", "var(--sds-size-padding-hero-vertical)"],
 ["VariableID:9:11271", "var(--sds-size-padding-lg)"],
 ["VariableID:9:11270", "var(--sds-size-padding-md)"],
-["VariableID:2143:17262", "var(--sds-size-padding-section)"],
+["VariableID:107:11151", "var(--sds-size-padding-section-lg)"],
+["VariableID:2143:17262", "var(--sds-size-padding-section-md)"],
+["VariableID:2159:2116", "var(--sds-size-padding-section-sm)"],
 ["VariableID:9:11269", "var(--sds-size-padding-sm)"],
 ["VariableID:9:11272", "var(--sds-size-padding-xl)"],
 ["VariableID:9:11268", "var(--sds-size-padding-xs)"],

diff --git a/src/blocks/Cards/Cards.figma.tsx b/src/blocks/Cards/Cards.figma.tsx
@@ -1,5 +1,5 @@
 import { figma } from "@figma/code-connect";
-import { PricingCard, ProductInfoCard, TestimonialCard } from "./Cards/Cards";
+import { PricingCard, ProductInfoCard, TestimonialCard } from "./Cards";
 
 const FIGMA_URL_PRODUCT_INFO_CARD =
   "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7753-4465&t=piSsjqZPlyn7qp8D-11";
@@ -21,6 +21,7 @@ figma.connect(ProductInfoCard, FIGMA_URL_PRODUCT_INFO_CARD, {
     </ProductInfoCard>
   ),
 });
+
 figma.connect(PricingCard, FIGMA_URL_PRICING_CARD, {
   props: {
     children: figma.children([
@@ -32,6 +33,7 @@ figma.connect(PricingCard, FIGMA_URL_PRICING_CARD, {
   },
   example: ({ children }) => <PricingCard>{children}</PricingCard>,
 });
+
 figma.connect(TestimonialCard, FIGMA_URL_TESTIMONIAL_CARD, {
   props: { children: figma.children(["Text Heading", "Avatar Block"]) },
   example: ({ children }) => <TestimonialCard>{children}</TestimonialCard>,

diff --git a/src/blocks/Cards/Cards.stories.tsx b/src/blocks/Cards/Cards.stories.tsx
@@ -16,7 +16,7 @@ import {
   TextListItem,
   TextTitlePage,
 } from "ui";
-import { PricingCard, ProductInfoCard, TestimonialCard } from "./Cards/Cards";
+import { PricingCard, ProductInfoCard, TestimonialCard } from "./Cards";
 
 const meta: Meta<typeof Card> = {
   component: Card,

diff --git a/src/blocks/Headers/Headers.tsx b/src/blocks/Headers/Headers.tsx
diff --git a/src/figma/figmaComponents.tsx b/src/figma/figmaComponents.tsx
@@ -1,6 +1,6 @@
 import "react";
 import { useEffect, useState } from "react";
-import { Field, Input, Label } from "ui";
+import { InputField } from "ui";
 type ComponentMap = { [k: string]: { id: string; name: string; key: string } };
 
 export const COMPONENTS: ComponentMap = {
@@ -3190,14 +3190,13 @@ export function FigmaUrlFromComponentName({
   }, [name, url]);
 
   return (
-    <Field>
-      <Label>{name}</Label>
-      <Input
-        disabled={disabled}
-        onFocus={(e) => e.target.select()}
-        readOnly
-        value={finalUrl}
-      />
-    </Field>
+    <InputField
+      label={name}
+      isDisabled={disabled}
+      // @ts-expect-error
+      onFocus={(e) => e.target.select()}
+      isReadOnly
+      value={finalUrl}
+    />
   );
 }
diff --git a/src/theme.css b/src/theme.css
@@ -1243,10 +1243,11 @@
   --sds-size-gap-xl: 1.5rem;
   --sds-size-gap-xs: 0.25rem;
   --sds-size-gap-xxl: 3rem;
-  --sds-size-padding-hero-vertical: 10rem;
   --sds-size-padding-lg: 1rem;
   --sds-size-padding-md: 0.75rem;
-  --sds-size-padding-section: 4rem;
+  --sds-size-padding-section-lg: 10rem;
+  --sds-size-padding-section-md: 4rem;
+  --sds-size-padding-section-sm: 2rem;
   --sds-size-padding-sm: 0.5rem;
   --sds-size-padding-xl: 1.5rem;
   --sds-size-padding-xs: 0.25rem;
@@ -1346,7 +1347,7 @@
   --sds-responsive-display-flex-to-none: flex;
   --sds-responsive-display-none-to-flex: none;
   --sds-responsive-ratio-column-full: 1;
-  --sds-responsive-ratio-column-quarter-half: 1;
+  --sds-responsive-ratio-column-half: 1;
   --sds-responsive-ratio-column-quarter-major: 1;
   --sds-responsive-ratio-column-quarter-minor: 1;
   --sds-responsive-ratio-column-third-major: 1;
@@ -1366,7 +1367,7 @@
     --sds-responsive-display-flex-to-none: flex;
     --sds-responsive-display-none-to-flex: none;
     --sds-responsive-ratio-column-full: 1;
-    --sds-responsive-ratio-column-quarter-half: 0.5;
+    --sds-responsive-ratio-column-half: 0.5;
     --sds-responsive-ratio-column-quarter-major: 0.5;
     --sds-responsive-ratio-column-quarter-minor: 0.5;
     --sds-responsive-ratio-column-third-major: 1;
@@ -1387,7 +1388,7 @@
     --sds-responsive-display-flex-to-none: none;
     --sds-responsive-display-none-to-flex: flex;
     --sds-responsive-ratio-column-full: 1;
-    --sds-responsive-ratio-column-quarter-half: 0.5;
+    --sds-responsive-ratio-column-half: 0.5;
     --sds-responsive-ratio-column-quarter-major: 0.75;
     --sds-responsive-ratio-column-quarter-minor: 0.25;
     --sds-responsive-ratio-column-third-major: 0.67;
@@ -1408,7 +1409,7 @@
     --sds-responsive-display-flex-to-none: none;
     --sds-responsive-display-none-to-flex: flex;
     --sds-responsive-ratio-column-full: 1;
-    --sds-responsive-ratio-column-quarter-half: 0.5;
+    --sds-responsive-ratio-column-half: 0.5;
     --sds-responsive-ratio-column-quarter-major: 0.75;
     --sds-responsive-ratio-column-quarter-minor: 0.25;
     --sds-responsive-ratio-column-third-major: 0.67;

diff --git a/src/ui/Avatar/Avatar.stories.tsx b/src/ui/Avatar/Avatar.stories.tsx
@@ -7,7 +7,7 @@ import {
   AvatarGroup,
 } from "ui/Avatar/Avatar";
 import { Description, Label } from "ui/Fieldset/Fieldset";
-import { Grid } from "ui/Grid/Grid";
+import { Grid } from "ui/Layout/Layout";
 
 const meta: Meta<typeof Avatar> = {
   component: Avatar,

diff --git a/src/ui/Button/Button.stories.tsx b/src/ui/Button/Button.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { IconActivity, IconArrowLeft } from "icons";
 import { Button, ButtonGroup } from "ui/Button/Button";
-import { Grid, GridItem } from "ui/Grid/Grid";
+import { Grid, GridItem } from "ui/Layout/Layout";
 
 const meta: Meta<typeof Button> = {
   component: Button,

diff --git a/src/ui/Card/Card.stories.tsx b/src/ui/Card/Card.stories.tsx
@@ -4,8 +4,8 @@ import "react";
 import { ComponentProps } from "react";
 import { Button, ButtonGroup } from "ui/Button/Button";
 import { Card } from "ui/Card/Card";
-import { Grid, GridItem } from "ui/Grid/Grid";
 import { Image } from "ui/Image/Image";
+import { Grid, GridItem } from "ui/Layout/Layout";
 import { Text, TextHeading } from "ui/Text/Text";
 
 const meta: Meta<typeof Card> = {

diff --git a/src/ui/Dialog/Dialog.stories.tsx b/src/ui/Dialog/Dialog.stories.tsx
@@ -2,9 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { IconMenu } from "icons";
 import { useState } from "react";
 import { Button } from "ui/Button/Button";
-import { Field, Label } from "ui/Fieldset/Fieldset";
-import { Grid } from "ui/Grid/Grid";
-import { Input } from "ui/Input/Input";
+import { InputField } from "ui/Input/Input";
+import { Grid } from "ui/Layout/Layout";
 import {
   Table,
   TableBody,
@@ -43,10 +42,7 @@ export const Default: Story = {
               business days after processing.
             </DialogDescription>
             <DialogBody>
-              <Field>
-                <Label>Amount</Label>
-                <Input name="amount" placeholder="$0.00" />
-              </Field>
+              <InputField label="Amount" name="amount" placeholder="$0.00" />
             </DialogBody>
             <DialogActions>
               <Button onPress={close}>Refund</Button>
@@ -79,10 +75,7 @@ export const Controlled: Story = {
               business days after processing.
             </DialogDescription>
             <DialogBody>
-              <Field>
-                <Label>Amount</Label>
-                <Input name="amount" placeholder="$0.00" />
-              </Field>
+              <InputField label="Amount" name="amount" placeholder="$0.00" />
             </DialogBody>
             <DialogActions>
               <Button onPress={() => setIsOpen(false)}>Refund</Button>

diff --git a/src/ui/Fieldset/Fieldset.tsx b/src/ui/Fieldset/Fieldset.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import type React from "react";
+import { ComponentPropsWithoutRef } from "react";
 import {
   FieldError as RACFieldError,
   Form as RACForm,
@@ -14,27 +14,27 @@ import {
 } from "react-aria-components";
 import "./fieldset.css";
 
-export type FieldsetProps = React.ComponentPropsWithoutRef<"fieldset">;
+export type FieldsetProps = ComponentPropsWithoutRef<"fieldset">;
 export function Fieldset({ ...props }: FieldsetProps) {
   const classNames = clsx("fieldset");
   return <fieldset {...props} className={classNames} />;
 }
 
-export type LegendProps = React.ComponentPropsWithoutRef<"legend">;
+export type LegendProps = ComponentPropsWithoutRef<"legend">;
 export function Legend({ ...props }: LegendProps) {
   const classNames = clsx("legend");
   return <legend {...props} className={classNames} />;
 }
 
-export type FieldGroupProps = React.ComponentPropsWithoutRef<"div">;
+export type FieldGroupProps = ComponentPropsWithoutRef<"div">;
 export function FieldGroup({ ...props }: FieldGroupProps) {
   const classNames = clsx("field-group");
   return <div {...props} className={classNames} />;
 }
 
-export type FormProps = RACFormProps;
-export function Form({ className, ...props }: FormProps) {
-  const classNames = clsx(className, "form");
+export type FormProps = RACFormProps & { singleLine?: boolean };
+export function Form({ className, singleLine, ...props }: FormProps) {
+  const classNames = clsx(className, "form", singleLine && "form-single-line");
   return <RACForm className={classNames} {...props} />;
 }
 
@@ -74,7 +74,7 @@ export type SharedFieldProps = {
   errorMessage?: string | ((validation: RACValidationResult) => string);
 };
 
-export type FieldProps = React.ComponentPropsWithoutRef<"div">;
+export type FieldProps = ComponentPropsWithoutRef<"div">;
 export function Field({ className, ...props }: FieldProps) {
   const classNames = clsx(className, "field");
   return <div className={classNames} {...props} />;

diff --git a/src/ui/Fieldset/fieldset.css b/src/ui/Fieldset/fieldset.css
@@ -62,6 +62,12 @@
   }
 }
 
+.form.form-single-line {
+  display: flex;
+  flex-direction: row;
+  gap: var(--sds-size-gap-md);
+}
+
 .legend {
   font: var(--sds-font-subheading);
 }

diff --git a/src/ui/Grid/Grid.stories.tsx → src/ui/Layout/Layout.stories.tsx b/src/ui/Grid/Grid.stories.tsx → src/ui/Layout/Layout.stories.tsx
@@ -1,13 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Grid, GridItem } from "ui";
+import { Grid, GridItem, Section } from "ui";
 
 const meta: Meta<typeof Grid> = {
   component: Grid,
-  title: "ui/Grid",
+  title: "ui/Layout",
   parameters: { layout: "centered" },
 };
 export default meta;
-type Story = StoryObj<typeof Grid>;
 
 const renderChild = (text: string) => (
   <div
@@ -23,15 +22,20 @@ const renderChild = (text: string) => (
   </div>
 );
 
-export const Default: Story = {
+export const GridStory: StoryObj<typeof Grid> = {
   args: {
     gap: undefined,
+    type: "quarter",
   },
   argTypes: {
     gap: {
       control: { type: "select" },
       options: [undefined, "xs", "sm", "md", "lg", "xl"],
     },
+    type: {
+      control: { type: "select" },
+      options: ["quarter", "third"],
+    },
   },
   render: (args) => (
     <Grid auto direction="column" gap="xl">
@@ -76,3 +80,51 @@ export const Default: Story = {
     </Grid>
   ),
 };
+
+export const SectionStory: StoryObj<typeof Section> = {
+  args: {
+    padding: "md",
+    variant: "subtle",
+  },
+  argTypes: {
+    padding: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["subtle", "brand", "stroke", "secondary"],
+    },
+  },
+  render: (args) => (
+    <>
+      <Section {...args}>
+        <Grid auto gap="xl">
+          <GridItem size="full">{renderChild("full")}</GridItem>
+          <GridItem size="major">{renderChild("major")}</GridItem>
+          <GridItem size="minor">{renderChild("minor")}</GridItem>
+          <GridItem size="minor">{renderChild("minor")}</GridItem>
+          <GridItem size="major">{renderChild("major")}</GridItem>
+        </Grid>
+      </Section>
+      <Section {...args} variant="secondary">
+        <Grid auto gap="xl">
+          <GridItem size="full">{renderChild("full")}</GridItem>
+          <GridItem size="major">{renderChild("major")}</GridItem>
+          <GridItem size="minor">{renderChild("minor")}</GridItem>
+          <GridItem size="minor">{renderChild("minor")}</GridItem>
+          <GridItem size="major">{renderChild("major")}</GridItem>
+        </Grid>
+      </Section>
+      <Section {...args}>
+        <Grid auto gap="xl">
+          <GridItem size="full">{renderChild("full")}</GridItem>
+          <GridItem size="major">{renderChild("major")}</GridItem>
+          <GridItem size="minor">{renderChild("minor")}</GridItem>
+          <GridItem size="minor">{renderChild("minor")}</GridItem>
+          <GridItem size="major">{renderChild("major")}</GridItem>
+        </Grid>
+      </Section>
+    </>
+  ),
+};
diff --git a/src/ui/Grid/Grid.tsx → src/ui/Layout/Layout.tsx b/src/ui/Grid/Grid.tsx → src/ui/Layout/Layout.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { ComponentPropsWithoutRef } from "react";
-import "./grid.css";
+import "./layout.css";
 
 type TShirtSizes = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 
@@ -60,3 +60,35 @@ export type FlowProps = Omit<
 export function Flow({ ...props }: FlowProps) {
   return <Grid direction="column" auto {...props} />;
 }
+
+type SectionPadding = Omit<TShirtSizes, "xs" | "xxl" | "xl">;
+
+export type SectionProps = ComponentPropsWithoutRef<
+  "section" | "header" | "footer"
+> & {
+  elementType?: "section" | "header" | "footer";
+  padding?: SectionPadding;
+  variant?: "brand" | "secondary" | "stroke" | "subtle";
+};
+export function Section({
+  className,
+  elementType = "section",
+  padding = "md",
+  variant = "subtle",
+  ...props
+}: SectionProps) {
+  const classNames = clsx(
+    className,
+    "section",
+    `section-variant-${variant}`,
+    `section-padding-${padding}`,
+  );
+  switch (elementType) {
+    case "section":
+      return <section className={classNames} {...props} />;
+    case "header":
+      return <header className={classNames} {...props} />;
+    case "footer":
+      return <footer className={classNames} {...props} />;
+  }
+}