Merge pull request #699 from WestpacGEL/New-layout-category

New layout category
WestpacGEL · Jan 31, 2024 · 59d3008 · 59d3008
2 parents 82f9e84 + 1775c39
commit 59d3008
Show file tree

Hide file tree

Showing 24 changed files with 116 additions and 27 deletions.
diff --git a/...ility/accessibility-features/content.mdoc → ...ility/accessibility-features/content.mdoc b/...ility/accessibility-features/content.mdoc → ...ility/accessibility-features/content.mdoc
diff --git a/...em/foundation/grid/accessibilityDemo.mdoc → ...layout/breakpoints/accessibilityDemo.mdoc b/...em/foundation/grid/accessibilityDemo.mdoc → ...layout/breakpoints/accessibilityDemo.mdoc
diff --git a/...ontent/design-system/foundation/layout/breakpoints/code/development-examples/content.mdoc b/...ontent/design-system/foundation/layout/breakpoints/code/development-examples/content.mdoc
@@ -0,0 +1,38 @@
+```jsx
+() => <Table>
+    <TableHeader>
+      <TableHeaderRow>
+        <TableHeaderCell>Token</TableHeaderCell>
+        <TableHeaderCell>Value</TableHeaderCell>
+        <TableHeaderCell>Tailwind prefix</TableHeaderCell>
+      </TableHeaderRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>xsl</TableCell>
+        <TableCell>0px and up</TableCell>
+        <TableCell>xsl:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>sm</TableCell>
+        <TableCell>768px and up</TableCell>
+        <TableCell>sm:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>md</TableCell>
+        <TableCell>992 and up</TableCell>
+        <TableCell>md:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>lg</TableCell>
+        <TableCell>1200 and up</TableCell>
+        <TableCell>lg:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>xl</TableCell>
+        <TableCell>1900 and up</TableCell>
+        <TableCell>xl:</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+```
diff --git a/...content/design-system/foundation/layout/breakpoints/design/breakpoint-tokens/content.mdoc b/...content/design-system/foundation/layout/breakpoints/design/breakpoint-tokens/content.mdoc
@@ -0,0 +1,38 @@
+```jsx
+() => <Table>
+    <TableHeader>
+      <TableHeaderRow>
+        <TableHeaderCell>Token</TableHeaderCell>
+        <TableHeaderCell>Value</TableHeaderCell>
+        <TableHeaderCell>Tailwind prefix</TableHeaderCell>
+      </TableHeaderRow>
+    </TableHeader>
+    <TableBody>
+      <TableRow>
+        <TableCell>xsl</TableCell>
+        <TableCell>0px and up</TableCell>
+        <TableCell>xsl:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>sm</TableCell>
+        <TableCell>768px and up</TableCell>
+        <TableCell>sm:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>md</TableCell>
+        <TableCell>992 and up</TableCell>
+        <TableCell>md:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>lg</TableCell>
+        <TableCell>1200 and up</TableCell>
+        <TableCell>lg:</TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>xl</TableCell>
+        <TableCell>1900 and up</TableCell>
+        <TableCell>xl:</TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+```
diff --git a/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml b/apps/site/src/content/design-system/foundation/layout/breakpoints/index.yaml
@@ -0,0 +1,26 @@
+name: Breakpoints
+description: >-
+  Breakpoints are a set of predefined viewport widths that can be used to change
+  the layout of a page to ensure it accommodates different devices. 
+namedExport:
+  discriminant: false
+excludeFromNavbar: false
+design:
+  - title:
+      name: Breakpoint tokens
+      slug: breakpoint-tokens
+    noTitle: false
+accessibility:
+  - title:
+      name: Accessibility features
+      slug: accessibility-features
+relatedComponents:
+  - title: Grid
+    slug: foundation/layout/grid
+  - title: Spacing
+    slug: foundation/layout/spacing
+code:
+  - title:
+      name: Development examples
+      slug: development-examples
+    noTitle: false
diff --git a/...foundation/spacing/accessibilityDemo.mdoc → ...n/layout/breakpoints/relatedArticles.mdoc b/...foundation/spacing/accessibilityDemo.mdoc → ...n/layout/breakpoints/relatedArticles.mdoc
diff --git a/...ility/accessibility-features/content.mdoc → ...ility/accessibility-features/content.mdoc b/...ility/accessibility-features/content.mdoc → ...ility/accessibility-features/content.mdoc
diff --git a/apps/site/src/content/design-system/foundation/layout/grid/accessibilityDemo.mdoc b/apps/site/src/content/design-system/foundation/layout/grid/accessibilityDemo.mdoc
diff --git a/...id/code/development-examples/content.mdoc → ...id/code/development-examples/content.mdoc b/...id/code/development-examples/content.mdoc → ...id/code/development-examples/content.mdoc
diff --git a/...on/grid/design/dos-and-donts/content.mdoc → ...ut/grid/design/dos-and-donts/content.mdoc b/...on/grid/design/dos-and-donts/content.mdoc → ...ut/grid/design/dos-and-donts/content.mdoc
diff --git a/...on/grid/design/grid-examples/content.mdoc → ...ut/grid/design/grid-examples/content.mdoc b/...on/grid/design/grid-examples/content.mdoc → ...ut/grid/design/grid-examples/content.mdoc
diff --git a/.../grid/design/user-experience/content.mdoc → .../grid/design/user-experience/content.mdoc b/.../grid/design/user-experience/content.mdoc → .../grid/design/user-experience/content.mdoc
diff --git a/...on/grid/design/visual-design/content.mdoc → ...ut/grid/design/visual-design/content.mdoc b/...on/grid/design/visual-design/content.mdoc → ...ut/grid/design/visual-design/content.mdoc
diff --git a/.../design-system/foundation/grid/index.yaml → ...-system/foundation/layout/grid/index.yaml b/.../design-system/foundation/grid/index.yaml → ...-system/foundation/layout/grid/index.yaml
@@ -28,8 +28,10 @@ accessibility:
       name: Accessibility features
       slug: accessibility-features
 relatedComponents:
-  - title: Grid
-    slug: /foundation/grid
+  - title: Breakpoints
+    slug: foundation/layout/breakpoints
+  - title: Spacing
+    slug: foundation/layout/spacing
 code:
   - title:
       name: Development examples

diff --git a/...stem/foundation/grid/relatedArticles.mdoc → ...undation/layout/grid/relatedArticles.mdoc b/...stem/foundation/grid/relatedArticles.mdoc → ...undation/layout/grid/relatedArticles.mdoc
diff --git a/...design-system/foundation/layout/spacing/accessibility/accessibility-features/content.mdoc b/...design-system/foundation/layout/spacing/accessibility/accessibility-features/content.mdoc
@@ -0,0 +1 @@
+No specific accessibility features required.
diff --git a/apps/site/src/content/design-system/foundation/layout/spacing/accessibilityDemo.mdoc b/apps/site/src/content/design-system/foundation/layout/spacing/accessibilityDemo.mdoc
diff --git a/...ng/code/development-examples/content.mdoc → ...ng/code/development-examples/content.mdoc b/...ng/code/development-examples/content.mdoc → ...ng/code/development-examples/content.mdoc
@@ -5,9 +5,6 @@
 ```tsx
 () => {
   return <Table>
-      <TableCaption>
-        GEL spacing for <strong>margin</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>
@@ -44,9 +41,6 @@
 () => {
   const SPACING_UNIT = 6;
   return <Table>
-      <TableCaption>
-        GEL spacing for <strong>padding</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>
@@ -83,9 +77,6 @@
 () => {
   const SPACING_UNIT = 6;
   return <Table>
-      <TableCaption>
-        GEL spacing classes for <strong>gap</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>

diff --git a/...acing/design/spacing-for-gap/content.mdoc → ...t/spacing/design/gap-spacing/content.mdoc b/...acing/design/spacing-for-gap/content.mdoc → ...t/spacing/design/gap-spacing/content.mdoc
@@ -3,9 +3,6 @@ The gap property defines the size of the gap between the rows and between the co
 ```tsx
 () => {
   return <Table>
-      <TableCaption>
-        GEL spacing classes for <strong>gap</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>

diff --git a/...ng/design/spacing-for-margin/content.mdoc → ...pacing/design/margin-spacing/content.mdoc b/...ng/design/spacing-for-margin/content.mdoc → ...pacing/design/margin-spacing/content.mdoc
@@ -3,9 +3,6 @@ The margin properties are used to create space around elements, outside of any d
 ```tsx
 () => {
   return <Table>
-      <TableCaption>
-        GEL spacing for <strong>margin</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>

diff --git a/...g/design/spacing-for-padding/content.mdoc → ...acing/design/padding-spacing/content.mdoc b/...g/design/spacing-for-padding/content.mdoc → ...acing/design/padding-spacing/content.mdoc
@@ -3,9 +3,6 @@ The padding properties are used to generate space around an element's content, i
 ```tsx
 () => {
   return <Table>
-      <TableCaption>
-        GEL spacing for <strong>padding</strong>
-      </TableCaption>
       <TableHeader>
         <TableHeaderRow>
           <TableHeaderCell>Token</TableHeaderCell>

diff --git a/...acing/design/user-experience/content.mdoc → ...acing/design/user-experience/content.mdoc b/...acing/design/user-experience/content.mdoc → ...acing/design/user-experience/content.mdoc
diff --git a/...sign-system/foundation/spacing/index.yaml → ...stem/foundation/layout/spacing/index.yaml b/...sign-system/foundation/spacing/index.yaml → ...stem/foundation/layout/spacing/index.yaml
@@ -4,23 +4,23 @@ description: >-
   and heights of the spaces used around and within components.
 namedExport:
   discriminant: false
-excludeFromNavbar: true
+excludeFromNavbar: false
 design:
   - title:
       name: Design system spacing tokens
       slug: user-experience
     noTitle: false
   - title:
-      name: Spacing for margin
-      slug: spacing-for-margin
+      name: Margin spacing
+      slug: margin-spacing
     noTitle: false
   - title:
-      name: Spacing for padding
-      slug: spacing-for-padding
+      name: Padding spacing
+      slug: padding-spacing
     noTitle: false
   - title:
-      name: Spacing for gap
-      slug: spacing-for-gap
+      name: Gap spacing
+      slug: gap-spacing
     noTitle: false
 accessibility:
   - title:
@@ -29,6 +29,8 @@ accessibility:
 relatedComponents:
   - title: Grid
     slug: foundation/grid
+  - title: Breakpoints
+    slug: foundation/layout/breakpoints
 code:
   - title:
       name: Development examples

diff --git a/...m/foundation/spacing/relatedArticles.mdoc → ...ation/layout/spacing/relatedArticles.mdoc b/...m/foundation/spacing/relatedArticles.mdoc → ...ation/layout/spacing/relatedArticles.mdoc