@ndwnu/design-system 14.2.2 → 14.3.0

package/styles/layout/grid.stories.ts

@@ -1,168 +1,168 @@
-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 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 `ndw-grid`. Column elements
- * should have classes like:
- * - `column-{span}`: all screen sizes
- * - `column-2xs-{span}`: below 480px
- * - `column-xs-{span}`: 480px-768px
- * - `column-sm-{span}`: 768px-1024px
- * - `column-md-{span}`: above 1024px
- *
- * Where `{span}` is the number of columns to span.
- *
- * 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> = {
-  tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
-  title: 'Core/Grid',
-  parameters: {
-    viewport: {
-      defaultViewport: 'mobile',
-    },
-  },
-  render: (props) => ({
-    props,
-    styles: [
-      `
-        .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-c-grid {
-          background-color: var(--ndw-color-grey-100);
-          margin-bottom: var(--ndw-spacing-xl);
-        }
-      `,
-    ],
-    template: `
-      <div class="${props.useContainerQueries ? 'ndw-c-grid' : 'ndw-grid'} ${props.disablePadding ? 'ndw-grid--no-padding' : ''}">
-        ${props.columnClasses
-          .map(
-            (classes, index) =>
-              `<div class="${classes.map((c) => `${props.useContainerQueries ? 'ndw-c-col-' : 'column-'}${c}`).join(' ')}">
-                ${index + 1}
-              </div>`,
-          )
-          .join('')}
-      </div>
-    `,
-  }),
-  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',
-      },
-    },
-    useContainerQueries: {
-      description: 'Use container queries instead of media queries for the grid.',
-      control: { type: 'boolean' },
-      table: {
-        category: 'Story inputs',
-      },
-    },
-  },
-};
-export default meta;
-type Story = StoryObj<StoryArgs>;
-
-export const Default: Story = {
-  args: {
-    columnClasses: [
-      ['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,
-  },
-};
-
-/**
- * Use the viewport button to see different column sizes for different screen sizes.
- */
-export const ResponsiveColumns: Story = {
-  args: {
-    columnClasses: [
-      ['12', 'sm-3', 'md-4'],
-      ['12', 'sm-3', 'md-4'],
-      ['12', 'sm-6', 'md-4'],
-    ],
-  },
-};
-
-export const MixedColumnWidth: Story = {
-  args: {
-    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: [
-      ['12', 'sm-6', 'md-4'],
-      ['12', 'sm-6', 'md-4'],
-      ['12', 'sm-12', 'md-4'],
-    ],
-  },
-};
+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 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 `ndw-grid`. Column elements
+ * should have classes like:
+ * - `column-{span}`: all screen sizes
+ * - `column-2xs-{span}`: below 480px
+ * - `column-xs-{span}`: 480px-768px
+ * - `column-sm-{span}`: 768px-1024px
+ * - `column-md-{span}`: above 1024px
+ *
+ * Where `{span}` is the number of columns to span.
+ *
+ * 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> = {
+  tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
+  title: 'Core/Grid',
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  render: (props) => ({
+    props,
+    styles: [
+      `
+        .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-c-grid {
+          background-color: var(--ndw-color-grey-100);
+          margin-bottom: var(--ndw-spacing-xl);
+        }
+      `,
+    ],
+    template: `
+      <div class="${props.useContainerQueries ? 'ndw-c-grid' : 'ndw-grid'} ${props.disablePadding ? 'ndw-grid--no-padding' : ''}">
+        ${props.columnClasses
+          .map(
+            (classes, index) =>
+              `<div class="${classes.map((c) => `${props.useContainerQueries ? 'ndw-c-col-' : 'column-'}${c}`).join(' ')}">
+                ${index + 1}
+              </div>`,
+          )
+          .join('')}
+      </div>
+    `,
+  }),
+  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',
+      },
+    },
+    useContainerQueries: {
+      description: 'Use container queries instead of media queries for the grid.',
+      control: { type: 'boolean' },
+      table: {
+        category: 'Story inputs',
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const Default: Story = {
+  args: {
+    columnClasses: [
+      ['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,
+  },
+};
+
+/**
+ * Use the viewport button to see different column sizes for different screen sizes.
+ */
+export const ResponsiveColumns: Story = {
+  args: {
+    columnClasses: [
+      ['12', 'sm-3', 'md-4'],
+      ['12', 'sm-3', 'md-4'],
+      ['12', 'sm-6', 'md-4'],
+    ],
+  },
+};
+
+export const MixedColumnWidth: Story = {
+  args: {
+    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: [
+      ['12', 'sm-6', 'md-4'],
+      ['12', 'sm-6', 'md-4'],
+      ['12', 'sm-12', 'md-4'],
+    ],
+  },
+};

package/styles/layout/index.scss

@@ -1,2 +1,2 @@
-@forward 'grid';
-@forward 'overlay';
+@forward 'grid';
+@forward 'overlay';

package/styles/storybook/_core.scss

@@ -1,60 +1,60 @@
-.overview {
-  align-content: flex-start;
-  display: grid;
-  gap: var(--ndw-spacing-xl);
-
-  > h1 {
-    margin-bottom: 0;
-  }
-
-  section {
-    display: grid;
-    gap: var(--ndw-spacing-sm);
-
-    > h2 {
-      margin-block: 0 var(--ndw-spacing-lg);
-    }
-
-    > p {
-      padding-bottom: var(--ndw-spacing-lg);
-    }
-
-    .header,
-    .content {
-      display: grid;
-      gap: var(--ndw-spacing-md);
-      grid-template-columns: repeat(3, 2fr);
-    }
-
-    .header {
-      font-weight: var(--ndw-font-weight-bold);
-      margin-top: calc(var(--ndw-spacing-md) * -1);
-    }
-
-    .content {
-      .block {
-        border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);
-        height: var(--ndw-spacing-3xl);
-        width: var(--ndw-spacing-3xl);
-      }
-    }
-  }
-
-  &.colors {
-    section {
-      .header,
-      .content {
-        grid-template-columns: 3.5rem repeat(2, 2fr) 3fr;
-      }
-    }
-  }
-
-  &.typography {
-    section {
-      .header,
-      .content {
-        grid-template-columns: 4fr 2fr 7fr;
-      }
-    }
-  }
-}
+.overview {
+  align-content: flex-start;
+  display: grid;
+  gap: var(--ndw-spacing-xl);
+
+  > h1 {
+    margin-bottom: 0;
+  }
+
+  section {
+    display: grid;
+    gap: var(--ndw-spacing-sm);
+
+    > h2 {
+      margin-block: 0 var(--ndw-spacing-lg);
+    }
+
+    > p {
+      padding-bottom: var(--ndw-spacing-lg);
+    }
+
+    .header,
+    .content {
+      display: grid;
+      gap: var(--ndw-spacing-md);
+      grid-template-columns: repeat(3, 2fr);
+    }
+
+    .header {
+      font-weight: var(--ndw-font-weight-bold);
+      margin-top: calc(var(--ndw-spacing-md) * -1);
+    }
+
+    .content {
+      .block {
+        border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-400);
+        height: var(--ndw-spacing-3xl);
+        width: var(--ndw-spacing-3xl);
+      }
+    }
+  }
+
+  &.colors {
+    section {
+      .header,
+      .content {
+        grid-template-columns: 3.5rem repeat(2, 2fr) 3fr;
+      }
+    }
+  }
+
+  &.typography {
+    section {
+      .header,
+      .content {
+        grid-template-columns: 4fr 2fr 7fr;
+      }
+    }
+  }
+}

package/styles/storybook/_reset.scss

@@ -1,21 +1,21 @@
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-overflow-scrolling: touch;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: var(--ndw-font-family-body);
-  font-size: var(--ndw-base-font-size);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--ndw-font-family-heading);
-}
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-overflow-scrolling: touch;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-base-font-size);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--ndw-font-family-heading);
+}

package/styles/storybook/index.scss

@@ -1,17 +1,17 @@
-@forward 'reset';
-@forward 'overrides';
-@forward 'core';
-
-.sb {
-  box-sizing: border-box;
-  display: flex;
-  gap: var(--ndw-spacing-3xl);
-  justify-content: center;
-  min-height: calc(100vh - 8rem);
-  padding: 4rem 1.5rem;
-
-  &_content {
-    max-width: 61.5rem;
-    width: 100%;
-  }
-}
+@forward 'reset';
+@forward 'overrides';
+@forward 'core';
+
+.sb {
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--ndw-spacing-3xl);
+  justify-content: center;
+  min-height: calc(100vh - 8rem);
+  padding: 4rem 1.5rem;
+
+  &_content {
+    max-width: 61.5rem;
+    width: 100%;
+  }
+}