@ndwnu/design-system 14.2.2 → 14.3.0

package/styles/components/_summary-card.scss

@@ -1,183 +1,205 @@
-.ndw-summary-card {
-  position: relative;
-  box-sizing: border-box;
-
-  display: grid;
-  gap: var(--ndw-spacing-md);
-  padding: var(--ndw-spacing-lg);
-  border: var(--ndw-border-size-sm) solid var(--ndw-color-white);
-  border-radius: var(--ndw-border-radius-md);
-
-  background-color: var(--ndw-color-white);
-  box-shadow: 0 var(--ndw-border-radius-xs) var(--ndw-border-radius-xs) 0 rgba(64, 78, 84, 0.05);
-  transition: var(--ndw-animation-speed-fast);
-
-  &:has(.ndw-summary-card-header a:hover) {
-    border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
-    box-shadow: 0 var(--ndw-border-radius-xs) var(--ndw-border-radius-md) 0 rgba(64, 78, 84, 0.2);
-  }
-
-  &__wrapper {
-    display: grid;
-    gap: var(--ndw-spacing-md);
-    height: 100%;
-    align-items: start;
-    box-sizing: border-box;
-
-    &:has(ndw-avatar) {
-      grid-template-columns: max-content 1fr;
-    }
-
-    &:has(a:focus:not(:active)) {
-      outline: var(--ndw-border-size-sm) solid var(--ndw-color-info-500);
-    }
-  }
-
-  &__content {
-    display: grid;
-    gap: var(--ndw-spacing-xs);
-  }
-
-  .ndw-summary-card-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ndw-spacing-xs);
-  }
-
-  .ndw-summary-card-tag {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: var(--ndw-spacing-2xs);
-    align-items: center;
-
-    border: 1px solid var(--ndw-color-grey-100);
-    border-radius: var(--ndw-border-radius-xs);
-    padding: var(--ndw-spacing-2xs);
-
-    color: var(--ndw-color-grey-500);
-    font-size: var(--ndw-font-size-xs);
-
-    ndw-icon {
-      font-size: var(--ndw-font-size-sm);
-    }
-
-    img {
-      display: block;
-      height: var(--ndw-font-size-sm);
-    }
-  }
-
-  .ndw-summary-card-subtitle {
-    display: grid;
-    grid-template-columns: max-content 1fr;
-    align-items: center;
-    gap: var(--ndw-spacing-3xs);
-
-    color: var(--ndw-color-grey-500);
-    font-size: var(--ndw-font-size-xs);
-
-    ndw-icon {
-      font-size: var(--ndw-font-size-sm);
-    }
-
-    &__text {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .ndw-summary-card-header {
-    display: flex;
-    gap: var(--ndw-spacing-xs);
-
-    &__wrapper {
-      display: grid;
-      gap: var(--ndw-spacing-2xs);
-      justify-items: left;
-    }
-
-    &__title {
-      width: 100%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin: 0;
-
-      font-size: var(--ndw-base-font-size);
-      font-weight: var(--ndw-font-weight-bold);
-      font-family: var(--ndw-font-family-heading);
-
-      a {
-        color: inherit;
-        text-decoration: none;
-        font-family: var(--ndw-font-family-heading);
-
-        &:after {
-          content: '';
-          position: absolute;
-          inset: 0;
-        }
-
-        &:focus {
-          outline: 0;
-        }
-      }
-    }
-  }
-
-  .ndw-summary-card-content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-
-    font-family: var(--ndw-font-family-body);
-    font-size: var(--ndw-font-size-sm);
-    color: var(--ndw-color-grey-500);
-  }
-
-  .ndw-summary-card-actions {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-
-    ndw-favorite {
-      margin-right: var(--ndw-spacing-sm);
-    }
-
-    &--auto {
-      container-type: inline-size;
-    }
-
-    .actions {
-      gap: var(--ndw-spacing-2xs);
-
-      &--popover {
-        display: grid;
-      }
-
-      &--visible,
-      &--auto {
-        display: flex;
-      }
-    }
-
-    .popover-wrapper {
-      display: block;
-
-      @container (width > 140px) {
-        display: none;
-      }
-    }
-
-    .regular-wrapper {
-      display: none;
-
-      @container (width > 140px) {
-        display: block;
-      }
-    }
-  }
-}
+.ndw-summary-card {
+  position: relative;
+  box-sizing: border-box;
+  container: ndw-summary-card / inline-size;
+
+  display: grid;
+  gap: var(--ndw-spacing-md);
+  padding: var(--ndw-spacing-lg);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-white);
+  border-radius: var(--ndw-border-radius-md);
+
+  background-color: var(--ndw-color-white);
+  box-shadow: 0 var(--ndw-border-radius-xs) var(--ndw-border-radius-xs) 0 rgba(64, 78, 84, 0.05);
+  transition: var(--ndw-animation-speed-fast);
+
+  &:has(.ndw-summary-card-header a:hover) {
+    border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
+    box-shadow: 0 var(--ndw-border-radius-xs) var(--ndw-border-radius-md) 0 rgba(64, 78, 84, 0.2);
+  }
+
+  &__wrapper {
+    display: grid;
+    gap: var(--ndw-spacing-md);
+    height: 100%;
+    align-items: start;
+    box-sizing: border-box;
+
+    &:has(ndw-avatar) {
+      grid-template-columns: max-content minmax(0, 1fr);
+    }
+
+    &:has(a:focus:not(:active)) {
+      outline: var(--ndw-border-size-sm) solid var(--ndw-color-info-500);
+    }
+  }
+
+  &__content {
+    display: grid;
+    gap: var(--ndw-spacing-xs);
+  }
+
+  .ndw-summary-card-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ndw-spacing-xs);
+  }
+
+  .ndw-summary-card-tag {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--ndw-spacing-2xs);
+    align-items: center;
+
+    border: 1px solid var(--ndw-color-grey-100);
+    border-radius: var(--ndw-border-radius-xs);
+    padding: var(--ndw-spacing-2xs);
+
+    color: var(--ndw-color-grey-500);
+    font-size: var(--ndw-font-size-xs);
+
+    ndw-icon {
+      font-size: var(--ndw-font-size-sm);
+    }
+
+    img {
+      display: block;
+      height: var(--ndw-font-size-sm);
+    }
+  }
+
+  .ndw-summary-card-subtitle {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    align-items: center;
+    gap: var(--ndw-spacing-3xs);
+
+    color: var(--ndw-color-grey-500);
+    font-size: var(--ndw-font-size-xs);
+
+    ndw-icon {
+      font-size: var(--ndw-font-size-sm);
+    }
+
+    &__text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .ndw-summary-card-header {
+    display: flex;
+    gap: var(--ndw-spacing-xs);
+    min-width: 0;
+
+    &__wrapper {
+      display: grid;
+      gap: var(--ndw-spacing-2xs);
+      justify-items: left;
+      min-width: 0;
+    }
+
+    &__title {
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+
+      font-size: var(--ndw-base-font-size);
+      font-weight: var(--ndw-font-weight-bold);
+      font-family: var(--ndw-font-family-heading);
+
+      a {
+        color: inherit;
+        text-decoration: none;
+        font-family: var(--ndw-font-family-heading);
+
+        &:after {
+          content: '';
+          position: absolute;
+          inset: 0;
+        }
+
+        &:focus {
+          outline: 0;
+        }
+      }
+    }
+  }
+
+  .ndw-summary-card-content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+
+    font-family: var(--ndw-font-family-body);
+    font-size: var(--ndw-font-size-sm);
+    color: var(--ndw-color-grey-500);
+  }
+
+  .ndw-summary-card-actions {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+
+    ndw-favorite {
+      margin-right: var(--ndw-spacing-sm);
+    }
+
+    &--auto {
+      container-type: inline-size;
+    }
+
+    .actions {
+      gap: var(--ndw-spacing-2xs);
+
+      &--popover {
+        display: grid;
+      }
+
+      &--visible,
+      &--auto {
+        display: flex;
+      }
+    }
+
+    .popover-wrapper {
+      display: block;
+
+      @container (width > 140px) {
+        display: none;
+      }
+    }
+
+    .regular-wrapper {
+      display: none;
+
+      @container (width > 140px) {
+        display: block;
+      }
+    }
+  }
+
+  // When the card itself becomes too narrow (e.g. 400% zoom / 320px reflow),
+  // stack the header so the title gets the full row and the actions drop to
+  // their own row beneath it instead of being squeezed onto one line.
+  @container ndw-summary-card (width < 320px) {
+    .ndw-summary-card-header {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .ndw-summary-card-actions {
+      flex: none;
+      justify-content: flex-start;
+
+      ndw-favorite {
+        margin-right: 0;
+      }
+    }
+  }
+}

package/styles/components/_table.scss

@@ -1,8 +1,8 @@
-.ag-root-wrapper {
-  padding: var(--ndw-spacing-md);
-  box-shadow: var(--ndw-elevation-content);
-
-  .ag-header-cell-text {
-    text-transform: uppercase;
-  }
-}
+.ag-root-wrapper {
+  padding: var(--ndw-spacing-md);
+  box-shadow: var(--ndw-elevation-content);
+
+  .ag-header-cell-text {
+    text-transform: uppercase;
+  }
+}

package/styles/components/divider.stories.ts

@@ -1,80 +1,80 @@
-import { type Meta, type StoryObj } from '@storybook/angular';
-
-interface StoryArgs {
-  noMargin: boolean;
-}
-
-const args: StoryArgs = {
-  noMargin: false,
-};
-
-/**
- * The divider is used to separate content.
- *
- * ## Usage
- *
- * Use the `<hr />` element with the `ndwDivider` attribute to add a horizontal line to separate content.
- *
- * ```html
- * [[ content ]]
- * <hr ndwDivider />
- * [[ content ]]
- * ```
- *
- * ### No margin
- *
- * To remove the default margin from the divider, use the `[noMargin]` attribute.
- *
- * ```html
- * [[ content ]]
- * <hr ndwDivider noMargin />
- * [[ content ]]
- * ```
- */
-
-const meta: Meta<StoryArgs> = {
-  tags: ['autodocs', 'ndw', 'nwb'],
-  title: 'Components/Divider',
-  render: (props) => ({
-    props,
-    styles: [
-      `
-        .content {
-          background-color: var(--ndw-color-grey-100);
-          padding: var(--ndw-spacing-xs);
-        }
-      `,
-    ],
-    template: `
-      <div class="content">
-        Content
-      </div>
-      <hr ndwDivider ${props.noMargin ? 'noMargin' : ''} />
-      <div class="content">
-        Content
-      </div>
-    `,
-  }),
-  args,
-  argTypes: {
-    noMargin: {
-      control: 'boolean',
-      description: 'Remove the default margin from the divider.',
-      name: '[noMargin]',
-      table: {
-        category: 'Inputs',
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-};
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {};
-
-export const NoMargin: Story = {
-  args: {
-    noMargin: true,
-  },
-};
+import { type Meta, type StoryObj } from '@storybook/angular';
+
+interface StoryArgs {
+  noMargin: boolean;
+}
+
+const args: StoryArgs = {
+  noMargin: false,
+};
+
+/**
+ * The divider is used to separate content.
+ *
+ * ## Usage
+ *
+ * Use the `<hr />` element with the `ndwDivider` attribute to add a horizontal line to separate content.
+ *
+ * ```html
+ * [[ content ]]
+ * <hr ndwDivider />
+ * [[ content ]]
+ * ```
+ *
+ * ### No margin
+ *
+ * To remove the default margin from the divider, use the `[noMargin]` attribute.
+ *
+ * ```html
+ * [[ content ]]
+ * <hr ndwDivider noMargin />
+ * [[ content ]]
+ * ```
+ */
+
+const meta: Meta<StoryArgs> = {
+  tags: ['autodocs', 'ndw', 'nwb'],
+  title: 'Components/Divider',
+  render: (props) => ({
+    props,
+    styles: [
+      `
+        .content {
+          background-color: var(--ndw-color-grey-100);
+          padding: var(--ndw-spacing-xs);
+        }
+      `,
+    ],
+    template: `
+      <div class="content">
+        Content
+      </div>
+      <hr ndwDivider ${props.noMargin ? 'noMargin' : ''} />
+      <div class="content">
+        Content
+      </div>
+    `,
+  }),
+  args,
+  argTypes: {
+    noMargin: {
+      control: 'boolean',
+      description: 'Remove the default margin from the divider.',
+      name: '[noMargin]',
+      table: {
+        category: 'Inputs',
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const NoMargin: Story = {
+  args: {
+    noMargin: true,
+  },
+};

package/styles/components/index.scss

@@ -1,17 +1,17 @@
-@forward 'button';
-@forward 'card';
-@forward 'datepicker';
-@forward 'divider';
-@forward 'dropdown';
-@forward 'edit-bar';
-@forward 'filter-button';
-@forward 'guided-tour';
-@forward 'input';
-@forward 'label';
-@forward 'link';
-@forward 'list-item';
-@forward 'map';
-@forward 'menu-button';
-@forward 'popover';
-@forward 'summary-card';
-@forward 'table';
+@forward 'button';
+@forward 'card';
+@forward 'datepicker';
+@forward 'divider';
+@forward 'dropdown';
+@forward 'edit-bar';
+@forward 'filter-button';
+@forward 'guided-tour';
+@forward 'input';
+@forward 'label';
+@forward 'link';
+@forward 'list-item';
+@forward 'map';
+@forward 'menu-button';
+@forward 'popover';
+@forward 'summary-card';
+@forward 'table';