sds/src/figma/compositions/Pages.figma.tsx at main · ram-ui-dev/sds · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { figma } from "@figma/code-connect";
import { Card } from "compositions";
import { placeholder } from "images";
import { Flex, FlexItem, Section } from "layout";
import { Image } from "primitives";

figma.connect(Section, "<FIGMA_SECTIONS_PAGE_ACCORDION>", {
  props: {
    title: figma.children("Text Content Heading"),
    children: figma.children("Accordion"),
    padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }),
    gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }),
  },
  example: ({ title, children, gap, padding }) => (
    <Section padding={padding}>
      <Flex container alignSecondary="center" direction="column" gap={gap}>
        {title}
        <FlexItem>
          <Flex container type="third" alignPrimary="center">
            <FlexItem size="major">{children}</FlexItem>
          </Flex>
        </FlexItem>
      </Flex>
    </Section>
  ),
});

figma.connect(Section, "<FIGMA_SECTIONS_PAGE_PRODUCT>", {
  props: {
    textHeading: figma.children("Text Heading"),
    tagAndPrice: figma.children(["Tag", "Text Price"]),
    text: figma.children("Text"),
    fields: figma.children("Select Field"),
    button: figma.children("Button"),
    accordion: figma.children("Accordion"),
    padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }),
    gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }),
  },
  example: ({
    textHeading,
    tagAndPrice,
    text,
    fields,
    button,
    accordion,
    gap,
    padding,
  }) => (
    <Section padding={padding}>
      <Flex container type="half" wrap gap={gap}>
        <Image
          src={placeholder}
          alt="Always use image alt"
          size="large"
          aspectRatio="4-3"
        />
        <FlexItem size="half">
          <Flex direction="column" gap="600" alignSecondary="stretch">
            {textHeading}
            <FlexItem>
              <Flex direction="column" gap="200">
                {tagAndPrice}
              </Flex>
            </FlexItem>
            {text}
            <FlexItem>
              <Flex wrap type="half" gap="200">
                {fields}
              </Flex>
            </FlexItem>
            {button}
            {accordion}
          </Flex>
        </FlexItem>
      </Flex>
    </Section>
  ),
});

figma.connect(Section, "<FIGMA_SECTIONS_PAGE_NEWSLETTER>", {
  props: {
    children: figma.children(["Text Content Heading", "Form Newsletter"]),
    padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }),
    gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }),
  },
  example: ({ children, gap, padding }) => (
    <Section padding={padding}>
      <Flex
        container
        wrap
        gap={gap}
        direction="column"
        alignPrimary="center"
        alignSecondary="center"
        type="third"
      >
        {children}
      </Flex>
    </Section>
  ),
});

figma.connect(Section, "<FIGMA_SECTIONS_PAGE_PRODUCT_RESULTS>", {
  props: {
    controls: figma.children(["Search", "Tag Toggle Group"]),
    cards: figma.children(["Product Info Card"]),
    padding: figma.enum("Platform", { Desktop: "1600", Mobile: "600" }),
    gap: figma.enum("Platform", { Desktop: "1200", Mobile: "600" }),
    majorSize: figma.enum("Platform", { Desktop: "major", Mobile: "full" }),
    aside: figma.children(["Text", "Tag", "Checkbox Group", "Slider Field"]),
  },
  example: ({ aside, controls, cards, gap, padding, majorSize }) => (
    <Section padding={padding}>
      <Flex container wrap type="quarter" gap={gap}>
        <FlexItem size="minor">
          <Card variant="stroke">{aside}</Card>
        </FlexItem>
        <FlexItem size={majorSize}>
          <Flex direction="column" gap={gap} alignSecondary="stretch">
            <Flex type="auto" alignPrimary="space-between" wrap gap="600">
              {controls}
            </Flex>
            <Flex type="third" wrap gap="600">
              {cards}
            </Flex>
          </Flex>
        </FlexItem>
      </Flex>
    </Section>
  ),
});