@ndwnu/design-system 7.0.1 → 8.0.0

package/styles/layout/_grid.scss

@@ -5,6 +5,8 @@
 }
 
 .grid {
+  $grid-columns-2xs: 2;
+  $grid-columns-xs: 4;
   $grid-columns-sm: 6;
   $grid-columns-md: 12;
 
@@ -18,13 +20,55 @@
   min-width: min-content;
   max-width: $ndw-screen-md;
 
+  &--no-padding {
+    padding: 0;
+  }
+
   @for $i from 1 through $grid-columns-md {
     .column-#{$i} {
-      // Use min to make sure we don't span more columns than available
       @include column(min($i, var(--grid-columns)));
     }
   }
 
+  @media screen and (max-width: $ndw-screen-2xs) {
+    --grid-columns: #{$grid-columns-2xs};
+    --grid-spacing: var(--ndw-spacing-sm);
+
+    @for $i from 1 through $grid-columns-md {
+      .column-xs-#{$i},
+      .column-sm-#{$i},
+      .column-md-#{$i} {
+        display: none;
+      }
+    }
+
+    @for $i from 1 through $grid-columns-2xs {
+      .column-2xs-#{$i} {
+        @include column($i);
+        display: initial;
+      }
+    }
+  }
+
+  @media screen and (max-width: $ndw-screen-xs) {
+    --grid-columns: #{$grid-columns-xs};
+    --grid-spacing: var(--ndw-spacing-sm);
+
+    @for $i from 1 through $grid-columns-md {
+      .column-sm-#{$i},
+      .column-md-#{$i} {
+        display: none;
+      }
+    }
+
+    @for $i from 1 through $grid-columns-xs {
+      .column-xs-#{$i} {
+        @include column($i);
+        display: initial;
+      }
+    }
+  }
+
   @media screen and (max-width: $ndw-screen-sm) {
     --grid-columns: #{$grid-columns-sm};
     --grid-spacing: var(--ndw-spacing-md);

package/styles/layout/grid.stories.ts

@@ -2,29 +2,34 @@ import { type Meta, type StoryObj } from '@storybook/angular';
 
 interface StoryArgs {
   columnClasses: string[][];
+  disablePadding?: boolean;
 }
 
 /**
- * Create a grid layout with columns. There is one responsive breakpoint at 1024px
- * screen width;
- * - Above 1024px, the grid has 12 columns.
- * - Below 1024px, the grid has 6 columns.
- * - The grid has a maximum width of 1440px.
+ * Create a responsive grid layout with columns. There are multiple breakpoints:
+ * - 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` and each column element
- * should have a `column-{span}`, `column-sm-{span}` or `column-md-{span}`
- * class where `{span}` is the number of grid columns the element should span.
+ * The grid needs a container element with the class `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
  *
- * `column-{span}` classes set the column width for all screen sizes. Different column
- * widths can be set for different screen sizes using `column-sm-{span}` and
- * `column-md-{span}` classes. Columns with only a `column-md-{span}` class will
- * only be visible on screen widths above 1024px.
+ * Where `{span}` is the number of columns to span.
  *
- * When viewing a specific story, use the viewport tool to see how the grid layout
- * responds to different screen sizes.
+ * Use the viewport tool to see responsive behavior.
  *
- * The colors of the background and grid columns are for illustrative purposes.
+ * ## 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 `grid--no-padding` to the `.grid` element.
  */
+
 const meta: Meta<StoryArgs> = {
   tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
   title: 'Core/Grid',
@@ -48,13 +53,13 @@ const meta: Meta<StoryArgs> = {
       `,
     ],
     template: `
-      <div class="grid">
+      <div class="grid ${props.disablePadding ? 'grid--no-padding' : ''}">
         ${props.columnClasses
           .map(
             (classes, index) =>
               `<div class="${classes.join(' ')}">
                 ${index + 1}
-              </div>`
+              </div>`,
           )
           .join('')}
       </div>
@@ -64,6 +69,9 @@ const meta: Meta<StoryArgs> = {
     columnClasses: {
       description: 'Array of classes to apply to each column.',
     },
+    disablePadding: {
+      description: 'Disable the inline padding on the grid.',
+    },
   },
 };
 export default meta;
@@ -72,10 +80,10 @@ type Story = StoryObj<StoryArgs>;
 export const Default: Story = {
   args: {
     columnClasses: [
-      ['column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
-      ['column-sm-1', 'column-md-1'],
+      ['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'],
@@ -91,12 +99,12 @@ export const Default: Story = {
 /**
  * Use the viewport button to see different column sizes for different screen sizes.
  */
-export const ChangeOnMobile: Story = {
+export const ResponsiveColumns: Story = {
   args: {
     columnClasses: [
-      ['column-md-4', 'column-sm-3'],
-      ['column-md-4', 'column-sm-3'],
-      ['column-md-4', 'column-sm-6'],
+      ['column-12', 'column-md-4', 'column-sm-3'],
+      ['column-12', 'column-md-4', 'column-sm-3'],
+      ['column-12', 'column-md-4', 'column-sm-6'],
     ],
   },
 };
@@ -104,14 +112,28 @@ export const ChangeOnMobile: Story = {
 export const MixedColumnWidth: Story = {
   args: {
     columnClasses: [
-      ['column-3'],
-      ['column-3'],
+      ['column-6'],
+      ['column-2'],
       ['column-4'],
       ['column-2'],
       ['column-2'],
-      ['column-4'],
+      ['column-2'],
       ['column-6'],
       ['column-12'],
     ],
   },
 };
+
+export const NoPadding: Story = {
+  args: {
+    columnClasses: [
+      ['column-6'],
+      ['column-6'],
+      ['column-2'],
+      ['column-2'],
+      ['column-2'],
+      ['column-6'],
+    ],
+    disablePadding: true,
+  },
+};

package/styles/storybook/_reset.scss

@@ -8,6 +8,7 @@
 
 body {
   font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-base-font-size);
 }
 
 h1,

package/lib/components/summary-card/summary-card-avatar/summary-card-avatar.component.d.ts

@@ -1,8 +0,0 @@
-import { SummaryVariant } from '../summary-card.model';
-import * as i0 from "@angular/core";
-export declare class SummaryCardAvatarComponent {
-    readonly variant: import("@angular/core").InputSignal<SummaryVariant>;
-    protected readonly variantClass: import("@angular/core").Signal<string>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SummaryCardAvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SummaryCardAvatarComponent, "ndw-summary-card-avatar", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}