Skip to content

Commit

Permalink
saving work
Browse files Browse the repository at this point in the history
  • Loading branch information
jake-figma committed May 25, 2024
1 parent 52c1553 commit 053441e
Show file tree
Hide file tree
Showing 35 changed files with 1,117 additions and 438 deletions.
38 changes: 18 additions & 20 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import {
CheckboxGroup,
FieldGroup,
Fieldset,
Grid,
GridItem,
InputField,
Legend,
RadioField,
Expand Down Expand Up @@ -39,8 +37,8 @@ function App() {
document.body.className = `sds-scheme-color-${theme}`;
}, [theme]);
return (
<Grid auto direction="column" gap="xl">
<GridItem>
<Layout direction="column" gap="xl">
<LayoutItem>
<SelectField
defaultSelectedKey={theme}
placeholder="Select theme..."
Expand All @@ -51,40 +49,40 @@ function App() {
>
{(item) => <SelectItem>{item.name}</SelectItem>}
</SelectField>
</GridItem>
<GridItem>
<Grid gap="sm" auto>
<GridItem>
</LayoutItem>
<LayoutItem>
<Layout gap="sm" auto>
<LayoutItem>
<Button>
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
</GridItem>
<GridItem>
</LayoutItem>
<LayoutItem>
<Button variant="secondary">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
</GridItem>
<GridItem>
</LayoutItem>
<LayoutItem>
<Button variant="stroke">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
</GridItem>
<GridItem>
</LayoutItem>
<LayoutItem>
<Button variant="subtle">
<IconArrowLeft />
Hello world
<IconActivity />
</Button>
</GridItem>
</Grid>
</GridItem>
<GridItem>
</LayoutItem>
</Layout>
</LayoutItem>
<LayoutItem>
<Fieldset>
<Legend>Shipping details</Legend>
<Text>Without this your odds of getting your order are low.</Text>
Expand Down Expand Up @@ -152,8 +150,8 @@ function App() {
/>
</SwitchGroup>
</Fieldset>
</GridItem>
</Grid>
</LayoutItem>
</Layout>
);
}
export default App;
38 changes: 18 additions & 20 deletions src/blocks/Cards/Cards.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import {
ButtonGroup,
Card,
Description,
Grid,
GridItem,
Image,
Label,
Text,
Expand All @@ -27,9 +25,9 @@ export default meta;

export const PricingCardStory: StoryObj<typeof PricingCard> = {
render: () => (
<Grid auto gap="lg" direction="row">
<Layout gap="lg" direction="row">
{[1, 2, 3, 4].map((i) => (
<GridItem key={i}>
<LayoutItem key={i}>
<PricingCard>
<TextHeading>Look at these rates</TextHeading>
<TextTitlePage>
Expand All @@ -47,16 +45,16 @@ export const PricingCardStory: StoryObj<typeof PricingCard> = {
<Button>Buy this</Button>
</ButtonGroup>
</PricingCard>
</GridItem>
</LayoutItem>
))}
</Grid>
</Layout>
),
};

export const ProductInfoCardStory: StoryObj<typeof ProductInfoCard> = {
render: () => (
<Grid auto gap="lg" direction="row">
<GridItem>
<Layout gap="lg" direction="row">
<LayoutItem>
<ProductInfoCard
asset={<Image alt="Accessibility!" src="https://picsum.photos/250" />}
>
Expand All @@ -66,8 +64,8 @@ export const ProductInfoCardStory: StoryObj<typeof ProductInfoCard> = {
<Button variant="secondary">Buy this</Button>
</ButtonGroup>
</ProductInfoCard>
</GridItem>
<GridItem>
</LayoutItem>
<LayoutItem>
<ProductInfoCard
asset={<Image alt="Accessibility!" src="https://picsum.photos/250" />}
>
Expand All @@ -77,15 +75,15 @@ export const ProductInfoCardStory: StoryObj<typeof ProductInfoCard> = {
<Button variant="secondary">Buy this</Button>
</ButtonGroup>
</ProductInfoCard>
</GridItem>
</Grid>
</LayoutItem>
</Layout>
),
};

export const TestimonialCardStory: StoryObj<typeof TestimonialCard> = {
render: () => (
<Grid auto type="third" gap="lg" direction="row">
<GridItem size="minor">
<Layout type="third" gap="lg" direction="row">
<LayoutItem size="minor">
<TestimonialCard>
<TextHeading>"Something nice"</TextHeading>
<AvatarBlock>
Expand All @@ -94,8 +92,8 @@ export const TestimonialCardStory: StoryObj<typeof TestimonialCard> = {
<Description>@fullname420</Description>
</AvatarBlock>
</TestimonialCard>
</GridItem>
<GridItem size="minor">
</LayoutItem>
<LayoutItem size="minor">
<TestimonialCard>
<TextHeading>"Something nice"</TextHeading>
<AvatarBlock>
Expand All @@ -104,8 +102,8 @@ export const TestimonialCardStory: StoryObj<typeof TestimonialCard> = {
<Description>@fullname420</Description>
</AvatarBlock>
</TestimonialCard>
</GridItem>
<GridItem size="minor">
</LayoutItem>
<LayoutItem size="minor">
<TestimonialCard>
<TextHeading>"Something nice"</TextHeading>
<AvatarBlock>
Expand All @@ -114,7 +112,7 @@ export const TestimonialCardStory: StoryObj<typeof TestimonialCard> = {
<Description>@fullname420</Description>
</AvatarBlock>
</TestimonialCard>
</GridItem>
</Grid>
</LayoutItem>
</Layout>
),
};
21 changes: 21 additions & 0 deletions src/blocks/Footers/Footers.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { figma } from "@figma/code-connect";
import { Flow, Layout } from "ui";
import { StandardFooter } from "./Footers";

const FIGMA_URL_STANDARD_FOOTER =
"https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=7717-4142&t=nZCpXAWLyKWF2wPs-11";

figma.connect(StandardFooter, FIGMA_URL_STANDARD_FOOTER, {
props: {
left: figma.children(["Logo", "Button Group"]),
lists: figma.children(["Text Link List"]),
},
example: ({ lists, left }) => (
<StandardFooter>
<Layout gap="xl" alignSecondary="start">
<Flow gap="lg">{left}</Flow>
{lists}
</Layout>
</StandardFooter>
),
});
8 changes: 8 additions & 0 deletions src/blocks/Footers/Footers.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { Section, type SectionProps } from "ui";

export type StandardFooterProps = Omit<SectionProps, "variant" | "padding">;
export function StandardFooter({ className, ...props }: StandardFooterProps) {
return (
<Section elementType="footer" variant="stroke" padding="sm" {...props} />
);
}
111 changes: 111 additions & 0 deletions src/blocks/Forms/Forms.figma.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import { figma } from "@figma/code-connect";
import { Card, Flow, Form, Layout } from "ui";

// Shipping Form
figma.connect(
Layout,
"https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=9762-3140&t=qJR3PLmBgMwoBka4-11",
{
props: {
children: figma.children([
"Legend",
"Description",
"Input Field",
"Select Field",
"Text Area Field",
"Switch Field",
"Checkbox Field",
"Button Group",
]),
},
example: ({ children }) => (
<Card variant="padded">
<Flow gap="sm">{children}</Flow>
</Card>
),
},
);

// Contact Form
figma.connect(
Layout,
"https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=56-15992&t=qJR3PLmBgMwoBka4-11",
{
props: {
children: figma.children([
"Input Field",
"Text Area Field",
"Button Group",
]),
},
example: ({ children }) => (
<Card variant="padded">
<Flow gap="sm">{children}</Flow>
</Card>
),
},
);

// Newsletter Form
figma.connect(
Form,
"https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=56-15991&t=qJR3PLmBgMwoBka4-11",
{
props: {
children: figma.children(["Input Field", "Button"]),
},
example: ({ children }) => <Form singleLine>{children}</Form>,
},
);

// Log in Form
figma.connect(
Layout,
"https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2143-14838&t=qJR3PLmBgMwoBka4-11",
{
props: {
children: figma.children(["Input Field", "Button Group"]),
},
example: ({ children }) => (
<Card variant="padded">
<Flow gap="sm">{children}</Flow>
</Card>
),
},
);

// Register Form
figma.connect(
Layout,
"https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2143-14829&t=qJR3PLmBgMwoBka4-11",
{
props: {
children: figma.children([
"Input Field",
"Checkbox Field",
"Button Group",
]),
},
example: ({ children }) => (
<Card variant="padded">
<Flow gap="sm">{children}</Flow>
</Card>
),
},
);

// Forgot Password Form
figma.connect(
Layout,
"https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy/SDS?node-id=2143-14939&t=qJR3PLmBgMwoBka4-11",
{
props: {
children: figma.children(["Input Field", "Button Group"]),
},
example: ({ children }) => (
<Card variant="padded">
<Flow gap="sm">{children}</Flow>
</Card>
),
},
);
19 changes: 9 additions & 10 deletions src/blocks/Headers/Headers.figma.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { figma } from "@figma/code-connect";
import { Grid, GridItem } from "ui";
import { StandardHeader, VerticalHeader } from "./Headers";

const FIGMA_URL_STANDARD_HEADER =
Expand All @@ -14,14 +13,14 @@ figma.connect(StandardHeader, FIGMA_URL_STANDARD_HEADER, {
},
example: ({ children, logo }) => (
<StandardHeader>
<Grid>
<GridItem size="minor">{logo}</GridItem>
<GridItem size="major">
<Grid auto gap="xl" alignPrimary="end">
<Layout>
<LayoutItem size="minor">{logo}</LayoutItem>
<LayoutItem size="major">
<Layout gap="xl" alignPrimary="end">
{children}
</Grid>
</GridItem>
</Grid>
</Layout>
</LayoutItem>
</Layout>
</StandardHeader>
),
});
Expand All @@ -33,10 +32,10 @@ figma.connect(VerticalHeader, FIGMA_URL_VERTICAL_HEADER, {
},
example: ({ children, logo }) => (
<VerticalHeader>
<Grid auto direction="column" alignSecondary="center" gap="md">
<Layout direction="column" alignSecondary="center" gap="md">
{logo}
{children}
</Grid>
</Layout>
</VerticalHeader>
),
});
Empty file removed src/blocks/Headers/headers.css
Empty file.
Loading

0 comments on commit 053441e

Please sign in to comment.