@ndwnu/design-system 5.1.0 → 7.0.0

package/styles/base/colors.stories.model.ts

@@ -0,0 +1,143 @@
+import { alphas, colors, header } from './colors.stories.utils';
+
+interface ColorValue {
+  value?: number;
+  subName?: string;
+}
+
+export interface ColorGroup {
+  name: string;
+  colors: ColorValue[];
+}
+
+const primary: ColorGroup = {
+  name: 'Primary',
+  colors: [
+    { value: 50 },
+    { value: 100 },
+    { value: 200 },
+    { value: 300 },
+    { value: 400 },
+    { value: 500 },
+    { value: 600 },
+    { value: 700 },
+    { value: 800 },
+  ],
+};
+
+const secondary: ColorGroup = {
+  name: 'Secondary',
+  colors: [
+    { value: 50 },
+    { value: 100 },
+    { value: 200 },
+    { value: 300 },
+    { value: 400 },
+    { value: 500 },
+    { value: 600 },
+    { value: 700 },
+  ],
+};
+
+const tertiary: ColorGroup = {
+  name: 'Tertiary',
+  colors: [{ value: 400 }, { value: 500 }],
+};
+
+const grey: ColorGroup = {
+  name: 'Grey',
+  colors: [
+    { value: 100 },
+    { value: 200 },
+    { value: 300 },
+    { value: 400 },
+    { value: 500 },
+    { value: 600 },
+    { value: 700 },
+  ],
+};
+
+const white: ColorGroup = {
+  name: 'White',
+  colors: [{ value: undefined }],
+};
+
+const links: ColorGroup = {
+  name: 'Link',
+  colors: [{ value: 400 }, { value: 500 }],
+};
+
+const positive: ColorGroup = {
+  name: 'Positive',
+  colors: [{ value: 100 }, { value: 500 }, { value: 600 }],
+};
+
+const warning: ColorGroup = {
+  name: 'Warning',
+  colors: [{ value: 100 }, { value: 500 }, { value: 600 }],
+};
+
+const info: ColorGroup = {
+  name: 'Info',
+  colors: [{ value: 100 }, { value: 500 }],
+};
+
+const alternative: ColorGroup = {
+  name: 'Alternative',
+  colors: [{ value: 100 }, { value: 500 }],
+};
+
+const critical: ColorGroup = {
+  name: 'Critical',
+  colors: [{ value: 100 }, { value: 200 }, { value: 300 }, { value: 500 }],
+};
+
+const alphaValues = ['Black-007', 'Black-015', 'Black-040', 'Primary-007', 'Primary-015'];
+
+// Todo - Update color values when switching between themes
+export const template = `
+  <div class="sb">
+    <div class="sb_content overview colors">
+      <section>
+        <h2 class="ndw-heading-md">Primary</h2>
+        ${header(['Color', 'Name', 'Value', 'Variable'])}
+        ${colors(primary)}
+      </section>
+      <section>
+        <h2 class="ndw-heading-md">Secondary</h2>
+        ${header(['Color', 'Name', 'Value', 'Variable'])}
+        ${colors(secondary)}
+      </section>
+      <section>
+        <h2 class="ndw-heading-md">Tertiary</h2>
+        ${header(['Color', 'Name', 'Value', 'Variable'])}
+        ${colors(tertiary)}
+      </section>
+      <section>
+        <h2 class="ndw-heading-md">Grey</h2>
+        ${header(['Color', 'Name', 'Value', 'Variable'])}
+        ${colors(white)}
+        ${colors(grey)}
+      </section>
+      <section>
+        <h2 class="ndw-heading-md">Links</h2>
+        ${header(['Color', 'Name', 'Value', 'Variable'])}
+        ${colors(links)}
+      </section>
+      <section>
+        <h2 class="ndw-heading-md">Notifications</h2>
+        ${header(['Color', 'Name', 'Value', 'Variable'])}
+        ${colors(positive)}
+        ${colors(info)}
+        ${colors(warning)}
+        ${colors(critical)}
+        ${colors(alternative)}
+      </section>
+      <section>
+        <h2 class="ndw-heading-md">Alpha</h2>
+        ${header(['Alpha', 'Name', 'Value', 'Variable'])}
+        ${alphas(alphaValues)}
+      </section>
+    </div>
+  </div>
+`;

package/styles/base/colors.stories.ts

@@ -0,0 +1,14 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+
+import { template } from './colors.stories.model';
+
+const meta: Meta = {
+  title: 'Core/Colors',
+  tags: ['autodocs', 'ndw', 'nwb', 'ntm'],
+  render: () => ({ template }),
+} as Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Colors: Story = {};

package/styles/base/colors.stories.utils.ts

@@ -0,0 +1,58 @@
+import { ColorGroup } from './colors.stories.model';
+
+export function header(values: string[]): string {
+  return `
+    <div class="header">
+      ${values.map((value) => `<p class="ndw-heading-sm">${value}</p>`).join('')}
+    </div>
+  `;
+}
+
+export function colors(type: ColorGroup): string {
+  const style = getComputedStyle(document.body);
+
+  return `${type.colors
+    .map((color) => {
+      const subName = color.subName ? `-${color.subName}` : '';
+      const convertedValue = color.value && color.value < 100 ? `0${color.value}` : color.value;
+      const value = color.value ? `-${convertedValue}` : '';
+      const variable = `--ndw-color-${type.name}${subName}${value}`.toLowerCase();
+
+      return `
+        <div class="content">
+          <div
+            class="block"
+            style="background-color: var(${variable})"
+          ></div>
+          <p>${type.name}${subName}${value}</p>
+          <p>${style.getPropertyValue(variable)}</p>
+          <p>${variable}</p>
+        </div>
+      `;
+    })
+    .join('')}`;
+}
+
+export function alphas(values: string[]): string {
+  const style = getComputedStyle(document.body);
+
+  return `
+    ${values
+      .map((alpha) => {
+        const variable = `--ndw-alpha-${alpha.toLowerCase()}`;
+
+        return `
+          <div class="content">
+            <div
+              class="block"
+              style="background-color: var(--ndw-alpha-${alpha.toLowerCase()})"
+            ></div>
+            <p>${alpha}</p>
+            <p>${style.getPropertyValue(variable)}</p>
+            <p>${variable}</p>
+          </div>
+        `;
+      })
+      .join('')}
+  `;
+}

package/styles/base/index.scss

@@ -0,0 +1,3 @@
+@forward 'colors';
+@forward 'typography';
+@forward 'variables';

package/styles/base/typography.stories.ts

@@ -0,0 +1,116 @@
+import { type Meta, type StoryObj } from '@storybook/angular';
+
+interface StoryArgs {
+  typographyList: Typography[];
+}
+
+interface Typography {
+  fontSize: string;
+  fontSizeInRem: string;
+  class: string;
+}
+
+const typographyList: Typography[] = [
+  {
+    fontSize: '40px',
+    fontSizeInRem: '2.5rem',
+    class: 'ndw-heading-xl',
+  },
+  {
+    fontSize: '32px',
+    fontSizeInRem: '2rem',
+    class: 'ndw-heading-lg',
+  },
+  {
+    fontSize: '24px',
+    fontSizeInRem: '1.5rem',
+    class: 'ndw-heading-md',
+  },
+  {
+    fontSize: '20px',
+    fontSizeInRem: '1.25rem',
+    class: 'ndw-heading-sm',
+  },
+  {
+    fontSize: '18px',
+    fontSizeInRem: '1.125rem',
+    class: 'ndw-paragraph-bold-xl',
+  },
+  {
+    fontSize: '18px',
+    fontSizeInRem: '1.125rem',
+    class: 'ndw-paragraph-xl',
+  },
+  {
+    fontSize: '16px',
+    fontSizeInRem: '1rem',
+    class: 'ndw-paragraph-bold-lg',
+  },
+  {
+    fontSize: '16px',
+    fontSizeInRem: '1rem',
+    class: 'ndw-paragraph-lg',
+  },
+  {
+    fontSize: '13px',
+    fontSizeInRem: '0.8125rem',
+    class: 'ndw-paragraph-bold-md',
+  },
+  {
+    fontSize: '13px',
+    fontSizeInRem: '0.8125rem',
+    class: 'ndw-paragraph-md',
+  },
+  {
+    fontSize: '11px',
+    fontSizeInRem: '0.6875rem',
+    class: 'ndw-paragraph-bold-sm',
+  },
+  {
+    fontSize: '11px',
+    fontSizeInRem: '0.6875rem',
+    class: 'ndw-paragraph-sm',
+  },
+];
+
+const args: StoryArgs = {
+  typographyList,
+};
+
+const meta: Meta<StoryArgs> = {
+  title: 'Core/Typography',
+  render: ({ typographyList, ...props }) => ({
+    props,
+    template: `
+      <div class="sb">
+        <div class="sb_content overview typography">
+          <section>
+            <div class="header">
+              <p>Font Size</p>
+              <p>Line Height</p>
+              <p>CSS Class</p>
+            </div>
+            ${typographyList
+              .map(
+                (typography: Typography) => `
+              <div class="content ${typography.class}">
+                <span>${typography.fontSize} / ${typography.fontSizeInRem}</span>
+                <span>150%</span>
+                <span>.${typography.class}</span>
+              </div>
+            `
+              )
+              .join('')}
+          </section>
+        </div>
+      </div>
+    `,
+  }),
+} as Meta;
+
+export default meta;
+type Story = StoryObj<StoryArgs>;
+
+export const Typography: Story = {
+  args,
+};

package/styles/components/_button.scss

@@ -0,0 +1,133 @@
+button:not(:disabled) {
+  cursor: pointer;
+}
+
+[ndwButton] {
+  align-items: center;
+  background-color: var(--ndw-color-background);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-background);
+  border-radius: var(--ndw-border-radius-sm);
+  box-sizing: border-box;
+  color: var(--ndw-color-foreground);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  font-weight: var(--ndw-font-weight-regular);
+  gap: var(--ndw-spacing-2xs);
+  height: var(--ndw-spacing-xl);
+  justify-content: center;
+  padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
+  text-align: start;
+  text-decoration: none;
+  transition: (color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out);
+  width: fit-content;
+
+  ndw-icon {
+    font-size: var(--ndw-spacing-md);
+  }
+
+  ndw-loader {
+    height: var(--ndw-spacing-md);
+    width: var(--ndw-spacing-md);
+  }
+
+  &:hover {
+    background-color: var(--ndw-color-background-hover);
+    border-color: var(--ndw-color-background-hover);
+    color: var(--ndw-color-foreground-hover);
+  }
+
+  &:active {
+    background-color: var(--ndw-color-background-active);
+    border-color: var(--ndw-color-background-active);
+    color: var(--ndw-color-foreground-active);
+  }
+
+  &[secondary],
+  &[tertiary] {
+    background-color: transparent;
+    color: var(--ndw-color-background);
+
+    &:hover {
+      color: var(--ndw-color-background);
+    }
+
+    &:active {
+      color: var(--ndw-color-background);
+    }
+
+    &[alternative] {
+      color: var(--ndw-color-text);
+
+      &:hover {
+        background-color: var(--ndw-alpha-black-007);
+      }
+
+      &:active {
+        background-color: var(--ndw-alpha-black-015);
+      }
+    }
+  }
+
+  &[secondary] {
+    border-color: var(--ndw-color-background);
+
+    &:hover {
+      background-color: var(--ndw-alpha-primary-007);
+      border-color: var(--ndw-color-background-hover);
+    }
+
+    &:active {
+      background-color: var(--ndw-alpha-primary-015);
+      border-color: var(--ndw-color-background-active);
+    }
+
+    &[alternative] {
+      border-color: var(--ndw-color-grey-300);
+
+      &:hover {
+        border-color: var(--ndw-color-grey-500);
+      }
+
+      &:active {
+        border-color: var(--ndw-color-grey-700);
+      }
+    }
+  }
+
+  &[tertiary] {
+    border-color: transparent;
+    border-radius: var(--button-ter-border-radius, var(--ndw-border-radius-sm));
+    border-width: var(--button-ter-border-width, var(--ndw-spacing-3xs));
+    padding-inline: var(--button-ter-padding-inline, var(--ndw-spacing-xs));
+
+    &:hover {
+      background-color: var(--button-ter-bg-color-hover, var(--ndw-alpha-primary-007));
+      border-color: var(--button-ter-border-color-hover, transparent);
+    }
+
+    &:active {
+      background-color: var(--button-ter-bg-color-active, var(--ndw-alpha-primary-015));
+      border-color: var(--button-ter-border-color-active, transparent);
+    }
+  }
+
+  &[extra-small] {
+    height: var(--ndw-spacing-lg);
+    padding-inline: var(--ndw-spacing-2xs);
+  }
+
+  &[large] {
+    height: var(--ndw-spacing-2xl);
+    padding-inline: var(--ndw-spacing-sm);
+  }
+
+  &[disabled] {
+    background-color: var(--ndw-color-background-disabled);
+    border-color: var(--ndw-color-background-disabled);
+    color: var(--ndw-color-text);
+    pointer-events: none;
+    user-select: none;
+  }
+}

package/styles/components/_card.scss

@@ -0,0 +1,3 @@
+ndw-card.ng-animating ndw-card-content {
+  overflow: hidden;
+}

package/styles/components/_divider.scss

@@ -0,0 +1,12 @@
+hr {
+  &[ndwDivider] {
+    background-color: var(--ndw-color-grey-300);
+    border: none;
+    height: var(--ndw-border-size-sm);
+    margin: var(--ndw-spacing-xs) 0;
+  }
+
+  &[noMargin] {
+    margin-block: 0;
+  }
+}

package/styles/components/_dropdown.scss

@@ -0,0 +1,8 @@
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/styles/components/_filter-button.scss

@@ -0,0 +1,39 @@
+[ndwButton] {
+  &[filter] {
+    background-color: var(--ndw-color-white);
+    border-color: var(--ndw-color-grey-300);
+    color: var(--ndw-color-grey-700);
+    height: var(--ndw-spacing-2xl);
+
+    ndw-icon.button-icon {
+      color: var(--ndw-color-primary);
+    }
+
+    ndw-icon.prefix-icon {
+      color: var(--ndw-color-grey-300);
+    }
+
+    &:hover {
+      border-color: var(--ndw-color-primary);
+    }
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      border-color: var(--ndw-color-info-500);
+      box-shadow: var(--ndw-elevation-info);
+      outline-color: var(--ndw-color-info-500);
+    }
+
+    &[disabled] {
+      background-color: var(--ndw-color-grey-100);
+      color: var(--ndw-color-grey-500);
+      pointer-events: none;
+      user-select: none;
+
+      ndw-icon {
+        color: var(--ndw-color-grey-500);
+      }
+    }
+  }
+}