@ndwnu/design-system 6.0.0 → 7.0.0

package/styles/components/link.stories.ts

@@ -0,0 +1,154 @@
+import {
+  componentWrapperDecorator,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular';
+
+import { icons } from '../../assets/icons';
+import { IconComponent } from '../../lib/components';
+
+interface StoryArgs {
+  disabled: boolean;
+  icon: string;
+  showInContext: boolean;
+  text: string;
+}
+
+const args: StoryArgs = {
+  disabled: false,
+  icon: 'schedule',
+  showInContext: false,
+  text: 'tekst',
+};
+
+/**
+ * The Link component is used to create styled anchor links with optional icons.
+ *
+ * # Usage
+ *
+ * The link styling is applied automatically to every element that has `[ndwLink]` as attribute.
+ *
+ * ```html
+ * <a ndwLink href="https://design.staging.ndw.nu/" target="_blank">
+ *   <ndw-icon>schedule</ndw-icon>
+ *   Voorbeeld
+ * </a>
+ * ```
+ *
+ * ```html
+ * <button ndwLink>
+ *   <ndw-icon>schedule</ndw-icon>
+ *   Voorbeeld
+ * </button>
+ * ```
+ *
+ **/
+
+const meta: Meta<StoryArgs> = {
+  tags: ['autodocs', 'ndw', 'nwb'],
+  title: 'Components/Link',
+  decorators: [
+    componentWrapperDecorator(
+      (story) => `<div style="font-size: var(--ndw-font-size-sm);">${story}</div>`
+    ),
+    moduleMetadata({
+      imports: [IconComponent],
+    }),
+  ],
+  render: (props) => ({
+    props,
+    template: `
+      <p>
+        @if (${props.showInContext}) {
+          Om een contextueel voorbeeld te schetsen is de link
+        }
+        <a
+          ndwLink
+          href="https://design.staging.ndw.nu/"
+          target="_blank"
+          ${props.disabled ? 'disabled' : ''}
+        >
+          ${props.icon ? `<ndw-icon>${props.icon}</ndw-icon>` : ''}
+          a element ${props.text}
+        </a>
+        @if (${props.showInContext}) {
+          in deze zin geplaatst.
+        }
+      </p>
+
+      <p>
+        @if (${props.showInContext}) {
+          Om een contextueel voorbeeld te schetsen is de link
+        }
+          <button
+            ndwLink
+            ${props.disabled ? 'disabled' : ''}
+          >
+            ${props.icon ? `<ndw-icon>${props.icon}</ndw-icon>` : ''}
+            button element ${props.text}
+          </button>
+        @if (${props.showInContext}) {
+          in deze zin geplaatst.
+        }
+      </p>
+    `,
+  }),
+  argTypes: {
+    disabled: {
+      description: 'Whether the link is disabled.',
+      name: 'disabled',
+      table: {
+        category: 'Custom content',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    icon: {
+      control: 'select',
+      options: ['', ...icons],
+      description: 'The name of the icon to display.',
+      name: 'icon',
+      table: {
+        category: 'Custom content',
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    showInContext: {
+      description: 'Whether to show the link in context.',
+      name: 'showInContext',
+      table: {
+        category: 'Custom content',
+        defaultValue: { summary: 'false' },
+      },
+    },
+    text: {
+      description: 'The text to display in the link.',
+      name: 'text',
+      table: {
+        category: 'Custom content',
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const Default: Story = {
+  args,
+};
+
+export const Disabled: Story = {
+  args: {
+    ...args,
+    disabled: true,
+  },
+};
+
+export const InContext: Story = {
+  args: {
+    ...args,
+    icon: '',
+    showInContext: true,
+  },
+};

package/styles/index.scss

@@ -0,0 +1,4 @@
+@forward 'base';
+@forward 'components';
+@forward 'layout';
+@forward 'utils';

package/styles/layout/_grid.scss

@@ -0,0 +1,57 @@
+@use '../base/variables' as *;
+
+@mixin column($span) {
+  grid-column: span $span;
+}
+
+.grid {
+  $grid-columns-sm: 6;
+  $grid-columns-md: 12;
+
+  display: grid;
+  justify-items: stretch;
+  grid-template-columns: repeat(var(--grid-columns), minmax(1rem, 1fr));
+  gap: var(--grid-spacing);
+  padding: 0 var(--grid-spacing);
+  margin: 0 auto;
+  width: 100%;
+  min-width: min-content;
+  max-width: $ndw-screen-md;
+
+  @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-sm) {
+    --grid-columns: #{$grid-columns-sm};
+    --grid-spacing: var(--ndw-spacing-md);
+
+    @for $i from 1 through $grid-columns-md {
+      .column-md-#{$i} {
+        display: none;
+      }
+    }
+
+    @for $i from 1 through $grid-columns-sm {
+      .column-sm-#{$i} {
+        @include column($i);
+        display: initial;
+      }
+    }
+  }
+
+  @media screen and (min-width: calc($ndw-screen-sm + 1px)) {
+    --grid-columns: #{$grid-columns-md};
+    --grid-spacing: var(--ndw-spacing-lg);
+
+    @for $i from 1 through $grid-columns-md {
+      .column-md-#{$i} {
+        @include column($i);
+        display: initial;
+      }
+    }
+  }
+}

package/styles/layout/_overlay.scss

@@ -0,0 +1,7 @@
+.ndw-overlay-backdrop {
+  background-color: var(--ndw-backdrop-color);
+}
+
+.cdk-overlay-pane:has(> ndw-modal) {
+  max-height: 90vh;
+}

package/styles/layout/grid.stories.ts

@@ -0,0 +1,117 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+
+interface StoryArgs {
+  columnClasses: string[][];
+}
+
+/**
+ * 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.
+ *
+ * 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.
+ *
+ * `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.
+ *
+ * When viewing a specific story, use the viewport tool to see how the grid layout
+ * responds to different screen sizes.
+ *
+ * The colors of the background and grid columns are for illustrative purposes.
+ */
+const meta: Meta<StoryArgs> = {
+  tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
+  title: 'Core/Grid',
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile',
+    },
+  },
+  render: (props) => ({
+    props,
+    styles: [
+      `
+        .grid > div {
+          background-color: var(--ndw-color-grey-300);
+          padding: var(--ndw-spacing-xs);
+        }
+        .grid {
+          background-color: var(--ndw-color-grey-100);
+          margin-bottom: var(--ndw-spacing-xl);
+        }
+      `,
+    ],
+    template: `
+      <div class="grid">
+        ${props.columnClasses
+          .map(
+            (classes, index) =>
+              `<div class="${classes.join(' ')}">
+                ${index + 1}
+              </div>`
+          )
+          .join('')}
+      </div>
+    `,
+  }),
+  argTypes: {
+    columnClasses: {
+      description: 'Array of classes to apply to each column.',
+    },
+  },
+};
+export default meta;
+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-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'],
+    ],
+  },
+};
+
+/**
+ * Use the viewport button to see different column sizes for different screen sizes.
+ */
+export const ChangeOnMobile: Story = {
+  args: {
+    columnClasses: [
+      ['column-md-4', 'column-sm-3'],
+      ['column-md-4', 'column-sm-3'],
+      ['column-md-4', 'column-sm-6'],
+    ],
+  },
+};
+
+export const MixedColumnWidth: Story = {
+  args: {
+    columnClasses: [
+      ['column-3'],
+      ['column-3'],
+      ['column-4'],
+      ['column-2'],
+      ['column-2'],
+      ['column-4'],
+      ['column-6'],
+      ['column-12'],
+    ],
+  },
+};

package/styles/layout/index.scss

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

package/styles/storybook/_core.scss

@@ -0,0 +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;
+      }
+    }
+  }
+}

package/styles/storybook/_reset.scss

@@ -0,0 +1,20 @@
+* {
+  -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);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--ndw-font-family-heading);
+}

package/styles/storybook/index.scss

@@ -0,0 +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%;
+  }
+}

package/styles/storybook/overrides/_buttons.scss

@@ -0,0 +1,95 @@
+button,
+div.css-1xrl4hz button,
+div.css-gg4vpm button {
+  &.css-17dxjer,
+  &.css-8gf0gt,
+  &.css-otxova,
+  &.docblock-code-toggle {
+    background-color: transparent;
+    border-radius: var(--ndw-border-radius-sm);
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  /* Grey outline buttons */
+  // Copy button in code block
+  &.css-otxova {
+    border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
+    color: var(--ndw-color-grey-600);
+
+    &:hover {
+      background-color: var(--ndw-color-grey-400);
+      border-color: var(--ndw-color-grey-400);
+      color: var(--ndw-color-white);
+    }
+
+    &:active {
+      background-color: var(--ndw-color-grey-500);
+      border-color: var(--ndw-color-grey-500);
+      color: var(--ndw-color-white);
+    }
+  }
+
+  /* Interactive icons */
+  // Icon buttons above docs example
+  &.css-17dxjer,
+  // Reset button in table header
+  &.css-8gf0gt {
+    color: var(--ndw-color-background);
+    overflow: hidden;
+    position: relative;
+
+    &::before {
+      background-color: var(--ndw-color-grey-300);
+      content: '';
+      inset: 0;
+      opacity: 0;
+      position: absolute;
+      transition: opacity 150ms ease-in-out;
+      z-index: -1;
+    }
+
+    &:hover {
+      background-color: var(--ndw-alpha-black-007);
+      color: var(--ndw-color-background-hover);
+    }
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      background-color: var(--ndw-alpha-black-015);
+    }
+
+    &:focus-visible {
+      background-color: transparent;
+      color: var(--ndw-color-background-active);
+      outline-color: var(--ndw-color-secondary-500);
+    }
+  }
+
+  /* Primary outline buttons */
+  // Show code button
+  &.docblock-code-toggle {
+    border: var(--ndw-border-size-sm) solid var(--ndw-color-background);
+    color: var(--ndw-color-background);
+    transition: (
+      background-color 150ms ease-in-out,
+      border-color 150ms ease-in-out,
+      color 150ms ease-in-out
+    );
+
+    &:hover {
+      background-color: var(--ndw-color-background);
+      border-color: var(--ndw-color-background);
+      color: var(--ndw-color-foreground);
+    }
+
+    &:active {
+      background-color: var(--ndw-color-background-hover);
+      border-color: var(--ndw-color-background-hover);
+      color: var(--ndw-color-foreground-hover);
+    }
+  }
+}

package/styles/storybook/overrides/_code-previews.scss

@@ -0,0 +1,97 @@
+div {
+  --ndw-sb-color-primary: hsl(19, 100%, 40%);
+  --ndw-sb-color-primary-100: hsl(19, 100%, 80%);
+
+  &.css-1xrl4hz,
+  &.css-12u9f4 {
+    pre {
+      &.prismjs {
+        background-color: var(--ndw-color-grey-700);
+        border-radius: var(--ndw-border-radius-sm);
+      }
+    }
+  }
+
+  // Background copy button in code preview
+  &.css-111a2cx {
+    background-color: var(--ndw-color-white);
+    border-radius: var(--ndw-border-radius-sm);
+  }
+
+  &.language-bash,
+  &.language-json,
+  &.language-json.css-1lwmlsb,
+  &.language-html,
+  &.language-ts,
+  &.language-typescript {
+    color: var(--ndw-color-white);
+    font-family: monospace;
+
+    span {
+      color: var(--ndw-color-white);
+      font-family: monospace;
+
+      &.token {
+        &.assign-left {
+          color: var(--ndw-sb-color-primary);
+        }
+
+        &.attr-name {
+          color: var(--ndw-sb-color-primary-100);
+        }
+
+        &.attr-value {
+          color: var(--ndw-color-grey-200);
+        }
+
+        &.comment {
+          color: var(--ndw-color-data-a-100);
+        }
+
+        &.decorator {
+          color: var(--ndw-color-data-d-100);
+        }
+
+        &.function {
+          color: var(--ndw-sb-color-primary);
+        }
+
+        &.keyword {
+          color: var(--ndw-sb-color-primary);
+        }
+
+        &.operator {
+          color: var(--ndw-sb-color-primary-100);
+        }
+
+        &.property {
+          color: var(--ndw-color-data-c-100);
+        }
+
+        &.punctuation {
+          color: var(--ndw-color-grey-300);
+        }
+
+        &.string {
+          color: var(--ndw-color-data-d-100);
+        }
+
+        &.tag {
+          color: var(--ndw-sb-color-primary);
+
+          &.attr-name {
+            color: var(--ndw-sb-color-primary-100);
+          }
+
+          &.attr-value {
+            color: var(--ndw-color-grey-200);
+          }
+
+          &.punctuation {
+            color: var(--ndw-color-grey-300);
+          }
+        }
+      }
+    }
+  }
+}

package/styles/storybook/overrides/_content.scss

@@ -0,0 +1,24 @@
+.css-qa4clq {
+  a,
+  p,
+  ul,
+  li {
+    font-family: var(--ndw-font-family-body);
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0 0 0 var(--ndw-spacing-sm);
+
+    li {
+      margin: 0;
+
+      &::before {
+        content: '-';
+        display: inline-block;
+        width: var(--ndw-spacing-sm);
+        text-align: center;
+      }
+    }
+  }
+}

package/styles/storybook/overrides/_headers.scss

@@ -0,0 +1,31 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  &.css-wzniqs,
+  &.sbdocs-title {
+    font-family: var(--ndw-font-family-heading);
+    font-weight: var(--ndw-font-weight-bold);
+    margin-block: 0 var(--ndw-spacing-xl);
+  }
+}
+
+h1,
+h1.css-wzniqs,
+h1.sbdocs-title {
+  font-size: var(--ndw-font-size-xl);
+}
+
+h2,
+h2.css-wzniqs,
+h2.sbdocs-title {
+  font-size: var(--ndw-font-size-lg);
+}
+
+h3,
+h3.css-wzniqs,
+h3.sbdocs-title {
+  font-size: var(--ndw-font-size-md);
+}