@ndwnu/design-system 6.0.0 → 7.0.1

package/styles/base/_typography.scss

@@ -0,0 +1,135 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=block');
+
+/* Mixins */
+@mixin ndw-heading-xl {
+  font-family: var(--ndw-font-family-heading);
+  font-size: 2.5rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-heading-lg {
+  font-family: var(--ndw-font-family-heading);
+  font-size: 2rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-heading-md {
+  font-family: var(--ndw-font-family-heading);
+  font-size: 1.5rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-heading-sm {
+  font-family: var(--ndw-font-family-heading);
+  font-size: 1.25rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-bold-xl {
+  font-family: var(--ndw-font-family-body);
+  font-size: 1.125rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-xl {
+  font-family: var(--ndw-font-family-body);
+  font-size: 1.125rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-bold-lg {
+  font-family: var(--ndw-font-family-body);
+  font-size: 1rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-lg {
+  font-family: var(--ndw-font-family-body);
+  font-size: 1rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-bold-md {
+  font-family: var(--ndw-font-family-body);
+  font-size: 0.8125rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-md {
+  font-family: var(--ndw-font-family-body);
+  font-size: 0.8125rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-bold-sm {
+  font-family: var(--ndw-font-family-body);
+  font-size: 0.6875rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-sm {
+  font-family: var(--ndw-font-family-body);
+  font-size: 0.6875rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+/* Classes */
+.ndw-heading-xl {
+  @include ndw-heading-xl;
+}
+
+.ndw-heading-lg {
+  @include ndw-heading-lg;
+}
+
+.ndw-heading-md {
+  @include ndw-heading-md;
+}
+
+.ndw-heading-sm {
+  @include ndw-heading-sm;
+}
+
+.ndw-paragraph-bold-xl {
+  @include ndw-paragraph-bold-xl;
+}
+
+.ndw-paragraph-xl {
+  @include ndw-paragraph-xl;
+}
+
+.ndw-paragraph-bold-lg {
+  @include ndw-paragraph-bold-lg;
+}
+
+.ndw-paragraph-lg {
+  @include ndw-paragraph-lg;
+}
+
+.ndw-paragraph-bold-md {
+  @include ndw-paragraph-bold-md;
+}
+
+.ndw-paragraph-md {
+  @include ndw-paragraph-md;
+}
+
+.ndw-paragraph-bold-sm {
+  @include ndw-paragraph-bold-sm;
+}
+
+.ndw-paragraph-sm {
+  @include ndw-paragraph-sm;
+}

package/styles/base/_variables.scss

@@ -0,0 +1,79 @@
+:root {
+  /* Spacing */
+  --ndw-spacing-3xs: 0.125rem;
+  --ndw-spacing-2xs: 0.25rem;
+  --ndw-spacing-xs: 0.5rem;
+  --ndw-spacing-sm: 0.75rem;
+  --ndw-spacing-md: 1rem;
+  --ndw-spacing-lg: 1.5rem;
+  --ndw-spacing-xl: 2rem;
+  --ndw-spacing-2xl: 2.5rem;
+  --ndw-spacing-3xl: 3rem;
+  --ndw-spacing-4xl: 5rem;
+  --ndw-spacing-5xl: 8rem;
+
+  /* Border */
+  --ndw-border-size-sm: 1px;
+  --ndw-border-size-md: 2px;
+  --ndw-border-size-lg: 3px;
+
+  /* Radius */
+  --ndw-border-radius-xs: 0.125rem;
+  --ndw-border-radius-sm: 0.25rem;
+  --ndw-border-radius-md: 0.5rem;
+  --ndw-border-radius-lg: 1.5rem;
+
+  /* Elevation */
+  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
+  --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
+  --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
+  --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
+  --ndw-backdrop-color: var(--ndw-alpha-black-040);
+
+  /* Animation */
+  --ndw-animation-speed-very-fast: 100ms;
+  --ndw-animation-speed-fast: 200ms;
+  --ndw-animation-speed-default: 300ms;
+  --ndw-animation-speed-slow: 500ms;
+
+  /* Icon Size */
+  --ndw-icon-size-md: 1rem;
+  --ndw-icon-size-lg: 1.5rem;
+
+  /* Mult-select Size */
+  --multi-select-default-width: 18.75rem;
+
+  /* Typography */
+  // Font Family
+  --ndw-font-family-body: 'Nunito Sans', sans-serif;
+  --ndw-font-family-heading: 'DM Sans', sans-serif;
+
+  // Font Size
+  --ndw-base-font-size: 16px;
+
+  --ndw-font-size-2xs: 0.5625rem;
+  --ndw-font-size-xs: 0.6875rem;
+  --ndw-font-size-sm: 0.8125rem;
+  --ndw-font-size-md: 1.125rem;
+  --ndw-font-size-lg: 1.25rem;
+  --ndw-font-size-xl: 1.5rem;
+
+  // Font Weight
+  --ndw-font-weight-regular: 400;
+  --ndw-font-weight-bold: 650;
+
+  // Line Height
+  --ndw-line-height-sm: 1.375rem;
+  --ndw-line-height-md: 1.5rem;
+
+  /* Transform */
+  --ndw-rotate-half: rotate(180deg);
+
+  /* Modal */
+  --ndw-modal-width-sm: 31.25rem;
+  --ndw-modal-width-md: 45rem;
+}
+
+/* Screen sizes */
+$ndw-screen-sm: 1024px;
+$ndw-screen-md: 1440px;

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;
+  }
+}