@ndwnu/design-system 14.1.2 → 14.2.1

package/styles/components/link.stories.ts

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

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

package/styles/layout/_grid.scss

@@ -1,165 +1,165 @@
-@use '../base/variables' as *;
-
-$breakpoints: (
-  2xs: $ndw-screen-2xs,
-  xs: $ndw-screen-xs,
-  sm: $ndw-screen-sm,
-  md: $ndw-screen-md,
-);
-
-@mixin column($span) {
-  grid-column: span $span;
-}
-
-.ndw-grid {
-  $grid-columns-2xs: 2;
-  $grid-columns-xs: 4;
-  $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;
-
-  &--no-padding {
-    padding: 0;
-  }
-
-  @for $i from 1 through $grid-columns-md {
-    .column-#{$i} {
-      @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);
-
-    @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;
-      }
-    }
-  }
-}
-
-.ndw-c-grid {
-  display: flex;
-  flex-wrap: wrap;
-  container-type: inline-size;
-  container-name: ndw-c-grid;
-
-  @mixin ndw-c-col-span($size, $important: false) {
-    $flag: if(sass($important), '!important', '');
-    flex: 0 0 calc((100% / 12) * #{$size}) #{$flag};
-    max-width: calc((100% / 12) * #{$size}) #{$flag};
-  }
-
-  @mixin ndw-c-breakpoint($name, $min-width) {
-    @container ndw-c-grid (min-width: #{$min-width}) {
-      @content;
-    }
-  }
-
-  @for $i from 1 through 12 {
-    .ndw-c-col-#{$i} {
-      @include ndw-c-col-span($i, false);
-    }
-  }
-
-  @each $name, $width in $breakpoints {
-    @include ndw-c-breakpoint($name, $width) {
-      @for $i from 1 through 12 {
-        .ndw-c-col-#{$name}-#{$i} {
-          @include ndw-c-col-span($i, true);
-        }
-      }
-    }
-  }
-
-  $order-range: 0 1 2 3 4 5;
-
-  @each $i in $order-range {
-    .ndw-c-order-#{$i} {
-      order: $i !important;
-    }
-  }
-
-  @each $name, $width in $breakpoints {
-    @container ndw-c-grid (min-width: #{$width}) {
-      @each $i in $order-range {
-        .ndw-c-order-#{$name}-#{$i} {
-          order: $i !important;
-        }
-      }
-    }
-  }
-}
-
-.ndw-c-col {
-  flex: 1 1 100%;
-}
+@use '../base/variables' as *;
+
+$breakpoints: (
+  2xs: $ndw-screen-2xs,
+  xs: $ndw-screen-xs,
+  sm: $ndw-screen-sm,
+  md: $ndw-screen-md,
+);
+
+@mixin column($span) {
+  grid-column: span $span;
+}
+
+.ndw-grid {
+  $grid-columns-2xs: 2;
+  $grid-columns-xs: 4;
+  $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;
+
+  &--no-padding {
+    padding: 0;
+  }
+
+  @for $i from 1 through $grid-columns-md {
+    .column-#{$i} {
+      @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);
+
+    @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;
+      }
+    }
+  }
+}
+
+.ndw-c-grid {
+  display: flex;
+  flex-wrap: wrap;
+  container-type: inline-size;
+  container-name: ndw-c-grid;
+
+  @mixin ndw-c-col-span($size, $important: false) {
+    $flag: if(sass($important), '!important', '');
+    flex: 0 0 calc((100% / 12) * #{$size}) #{$flag};
+    max-width: calc((100% / 12) * #{$size}) #{$flag};
+  }
+
+  @mixin ndw-c-breakpoint($name, $min-width) {
+    @container ndw-c-grid (min-width: #{$min-width}) {
+      @content;
+    }
+  }
+
+  @for $i from 1 through 12 {
+    .ndw-c-col-#{$i} {
+      @include ndw-c-col-span($i, false);
+    }
+  }
+
+  @each $name, $width in $breakpoints {
+    @include ndw-c-breakpoint($name, $width) {
+      @for $i from 1 through 12 {
+        .ndw-c-col-#{$name}-#{$i} {
+          @include ndw-c-col-span($i, true);
+        }
+      }
+    }
+  }
+
+  $order-range: 0 1 2 3 4 5;
+
+  @each $i in $order-range {
+    .ndw-c-order-#{$i} {
+      order: $i !important;
+    }
+  }
+
+  @each $name, $width in $breakpoints {
+    @container ndw-c-grid (min-width: #{$width}) {
+      @each $i in $order-range {
+        .ndw-c-order-#{$name}-#{$i} {
+          order: $i !important;
+        }
+      }
+    }
+  }
+}
+
+.ndw-c-col {
+  flex: 1 1 100%;
+}

package/styles/layout/_overlay.scss

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