@ndwnu/design-system 12.0.0 → 12.2.0

package/styles/layout/grid.stories.ts

@@ -3,17 +3,19 @@ import { type Meta, type StoryObj } from '@storybook/angular';
 interface StoryArgs {
   columnClasses: string[][];
   disablePadding?: boolean;
+  useContainerQueries?: boolean;
 }
 
 /**
- * Create a responsive grid layout with columns. There are multiple breakpoints:
+ * Create a responsive grid layout with columns. There are multiple breakpoints based
+ * on the viewport size. Each breakpoint has a specific number of columns:
  * - Above 1024px (sm): 12 columns
  * - 768px-1024px (xs): 6 columns
  * - 480px-768px (2xs): 4 columns
  * - Below 480px: 2 columns
  * - Maximum width: 1440px
  *
- * The grid needs a container element with the class `grid`. Column elements
+ * The grid needs a container element with the class `ndw-grid`. Column elements
  * should have classes like:
  * - `column-{span}`: all screen sizes
  * - `column-2xs-{span}`: below 480px
@@ -26,8 +28,22 @@ interface StoryArgs {
  * Use the viewport tool to see responsive behavior.
  *
  * ## Disable padding
+ *
  * Sometimes you may want to disable padding on the columns, for example when using a card component.
  * To do this, add the class `ndw-grid--no-padding` to the `.ndw-grid` element.
+ *
+ * ## Container grid
+ *
+ * It is also possible to use a container grid which uses breakpoints
+ * based on it's container instead of the viewport.
+ *
+ * There are a few notable differences when using a container grid:
+ * - Container queries are used instead of media queries.
+ * - The container element must have the `ndw-c-grid` class instead of `ndw-grid`.
+ * - The column classes are prefixed with `ndw-c-col-` instead of `column-`
+ * - The container grid always has 12 columns, regardless of the container size.
+ * - The container grid does not have padding on the outside of between columns.
+ * - The container grid uses flex layout instead of CSS grid.
  */
 
 const meta: Meta<StoryArgs> = {
@@ -42,22 +58,26 @@ const meta: Meta<StoryArgs> = {
     props,
     styles: [
       `
-        .ndw-grid > div {
+        .ndw-grid > div,
+        .ndw-c-grid > div {
+          text-align: center;
           background-color: var(--ndw-color-grey-300);
+          border: 1px solid var(--ndw-color-grey-400);
           padding: var(--ndw-spacing-xs);
         }
-        .ndw-grid {
+        .ndw-grid,
+        .ndw-c-grid {
           background-color: var(--ndw-color-grey-100);
           margin-bottom: var(--ndw-spacing-xl);
         }
       `,
     ],
     template: `
-      <div class="ndw-grid ${props.disablePadding ? 'ndw-grid--no-padding' : ''}">
+      <div class="${props.useContainerQueries ? 'ndw-c-grid' : 'ndw-grid'} ${props.disablePadding ? 'ndw-grid--no-padding' : ''}">
         ${props.columnClasses
           .map(
             (classes, index) =>
-              `<div class="${classes.join(' ')}">
+              `<div class="${classes.map((c) => `${props.useContainerQueries ? 'ndw-c-col-' : 'column-'}${c}`).join(' ')}">
                 ${index + 1}
               </div>`,
           )
@@ -66,11 +86,23 @@ const meta: Meta<StoryArgs> = {
     `,
   }),
   argTypes: {
+    disablePadding: {
+      description: 'Disable the inline padding on the grid.',
+      control: { type: 'boolean' },
+      table: { category: 'Grid configuration' },
+    },
     columnClasses: {
       description: 'Array of classes to apply to each column.',
+      table: {
+        category: 'Story inputs',
+      },
     },
-    disablePadding: {
-      description: 'Disable the inline padding on the grid.',
+    useContainerQueries: {
+      description: 'Use container queries instead of media queries for the grid.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Story inputs',
+      },
     },
   },
 };
@@ -80,19 +112,21 @@ type Story = StoryObj<StoryArgs>;
 export const Default: Story = {
   args: {
     columnClasses: [
-      ['column-2xs-1', 'column-xs-1', 'column-sm-1', 'column-md-1'],
-      ['column-2xs-1', 'column-xs-1', 'column-sm-1', 'column-md-1'],
-      ['column-xs-1', 'column-sm-1', 'column-md-1'],
-      ['column-xs-1', 'column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
-      ['column-md-1'],
+      ['1', '2xs-4', 'xs-2', 'sm-1'],
+      ['1', '2xs-4', 'xs-2', 'sm-1'],
+      ['1', 'xs-2', 'sm-1'],
+      ['1', 'xs-2', 'sm-1'],
+      ['1', 'sm-1'],
+      ['1', 'sm-1'],
+      ['1'],
+      ['1'],
+      ['1'],
+      ['1'],
+      ['1'],
+      ['1'],
     ],
+    disablePadding: false,
+    useContainerQueries: false,
   },
 };
 
@@ -102,38 +136,33 @@ export const Default: Story = {
 export const ResponsiveColumns: Story = {
   args: {
     columnClasses: [
-      ['column-12', 'column-md-4', 'column-sm-3'],
-      ['column-12', 'column-md-4', 'column-sm-3'],
-      ['column-12', 'column-md-4', 'column-sm-6'],
+      ['12', 'sm-3', 'md-4'],
+      ['12', 'sm-3', 'md-4'],
+      ['12', 'sm-6', 'md-4'],
     ],
   },
 };
 
 export const MixedColumnWidth: Story = {
   args: {
-    columnClasses: [
-      ['column-6'],
-      ['column-2'],
-      ['column-4'],
-      ['column-2'],
-      ['column-2'],
-      ['column-2'],
-      ['column-6'],
-      ['column-12'],
-    ],
+    columnClasses: [['6'], ['2'], ['4'], ['2'], ['2'], ['2'], ['6'], ['12']],
   },
 };
 
 export const NoPadding: Story = {
   args: {
+    columnClasses: [['6'], ['6'], ['2'], ['2'], ['2'], ['6']],
+    disablePadding: true,
+  },
+};
+
+export const ContainerQueryGrid: Story = {
+  args: {
+    useContainerQueries: true,
     columnClasses: [
-      ['column-6'],
-      ['column-6'],
-      ['column-2'],
-      ['column-2'],
-      ['column-2'],
-      ['column-6'],
+      ['12', 'sm-6', 'md-4'],
+      ['12', 'sm-6', 'md-4'],
+      ['12', 'sm-12', 'md-4'],
     ],
-    disablePadding: true,
   },
 };