@ndwnu/design-system 6.0.0 → 7.0.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);
+      }
+    }
+  }
+}

package/styles/components/_input.scss

@@ -0,0 +1,198 @@
+// Styles shared between regular [ndwInput] and [ndwInput] inside .input-container.
+@mixin shared-style() {
+  display: flex;
+  align-items: center;
+  background-color: var(--ndw-color-white);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
+  border-radius: var(--ndw-border-radius-sm);
+  box-sizing: border-box;
+  outline: var(--ndw-border-size-sm) solid transparent;
+  outline-offset: calc(var(--ndw-border-size-sm) * -1);
+  transition: (
+    background-color 150ms ease-in-out,
+    border-color 150ms ease-in-out,
+    outline-color 150ms ease-in-out
+  );
+
+  &:has([ndwInput]:hover) {
+    border-color: var(--ndw-color-grey-400);
+  }
+
+  &:has([ndwInput]:active),
+  &:has([ndwInput]:focus),
+  &:has([ndwInput]:focus-visible) {
+    border-color: transparent;
+    box-shadow: var(--ndw-elevation-info);
+    outline-color: var(--ndw-color-info-500);
+  }
+
+  &[success] {
+    background-color: var(--ndw-color-positive-100);
+    border-color: var(--ndw-color-positive-500);
+
+    &:hover {
+      border-color: var(--ndw-color-grey-300);
+    }
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      background-color: var(--ndw-color-white);
+      border-color: transparent;
+      outline-color: var(--ndw-color-secondary-500);
+    }
+  }
+
+  &[error] {
+    background-color: var(--ndw-color-critical-100);
+    border-color: var(--ndw-color-critical-500);
+
+    &:hover {
+      border-color: var(--ndw-color-grey-300);
+    }
+
+    &:active,
+    &:focus,
+    &:focus-visible {
+      background-color: var(--ndw-color-white);
+      border-color: transparent;
+      outline-color: var(--ndw-color-secondary-500);
+    }
+  }
+
+  &[disabled],
+  &[readonly],
+  &:has([ndwInput]:disabled),
+  &:has([ndwInput]:read-only):not(:has(select[ndwInput])) {
+    background-color: var(--ndw-color-grey-100);
+    border-color: var(--ndw-color-grey-300);
+    color: var(--ndw-color-grey-500);
+    pointer-events: none;
+
+    ndw-icon {
+      color: var(--ndw-color-grey-300);
+    }
+  }
+}
+
+// Add input container right padding when select element is used
+.input-container:has(> select[ndwInput]) {
+  padding-inline-end: var(--ndw-spacing-xs);
+}
+
+// When an ndwInput is contained in an input-container hide the
+// ndwInput borders and instead put the borders on the container.
+.input-container:has(> [ndwInput]) {
+  @include shared-style();
+
+  // When input has a ndw-input-icon enable the inline padding
+  &:has(> ndw-input-icon) {
+    padding-inline: var(--ndw-spacing-xs);
+  }
+  &:has(> ndw-picker-button) {
+    padding-inline-end: var(--ndw-spacing-xs);
+  }
+
+  gap: var(--ndw-spacing-xs);
+
+  // Any elements before the input have a lighter grey color
+  > *:has(~ [ndwInput]) {
+    color: var(--ndw-color-grey-400);
+  }
+
+  // Remove inline padding when the input has prefix or suffix items
+  * + [ndwInput] {
+    padding-inline-start: 0;
+  }
+
+  [ndwInput]:has(+ *) {
+    padding-inline-end: 0;
+  }
+  [ndwInput]:is(textarea) {
+    padding-inline-end: var(--ndw-spacing-sm);
+  }
+
+  // Except when the input is a select, to prevent text from overflowing the chevron
+  select[ndwInput]:has(+ *) {
+    padding-inline-end: 0;
+  }
+
+  // Remove border from the input, the container has the borders
+  [ndwInput] {
+    border: none;
+    outline: none;
+
+    &:hover,
+    &:active,
+    &:focus,
+    &:focus-visible {
+      border: none;
+      outline: none;
+    }
+  }
+
+  &:has(textarea) {
+    padding-inline: 0;
+  }
+}
+
+[ndwInput] {
+  @include shared-style();
+
+  width: 100%;
+  padding-inline: var(--ndw-spacing-sm);
+  color: var(--ndw-color-grey-700);
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  height: var(--ndw-spacing-2xl);
+  line-height: var(--ndw-line-height-md);
+  border-radius: var(--ndw-border-radius-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &::placeholder {
+    color: var(--ndw-color-grey-400);
+  }
+
+  // Hide clear button in search inputs on chrome-based browsers
+  &[type='search']::-webkit-search-decoration,
+  &[type='search']::-webkit-search-cancel-button,
+  &[type='search']::-webkit-search-results-button,
+  &[type='search']::-webkit-search-results-decoration {
+    display: none;
+  }
+
+  &[type='date'],
+  &[type='datetime-local'],
+  &[type='month'],
+  &[type='time'],
+  &[type='week'] {
+    &::-webkit-calendar-picker-indicator {
+      cursor: pointer;
+      opacity: 0;
+    }
+  }
+}
+
+select[ndwInput] {
+  appearance: none;
+  cursor: pointer;
+
+  &[ndw-placeholder],
+  option[disabled] {
+    color: var(--ndw-color-grey-400);
+  }
+
+  option:not([disabled]) {
+    color: var(--ndw-color-grey-700);
+  }
+}
+
+textarea[ndwInput] {
+  min-height: 4rem;
+  padding-block: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
+  padding-inline: var(--ndw-spacing-sm);
+  line-height: normal;
+  white-space: pre-wrap;
+  resize: vertical;
+}

package/styles/components/_label.scss

@@ -0,0 +1,23 @@
+[ndwLabel] {
+  align-content: center;
+  align-items: center;
+  display: grid;
+  font-family: var(--ndw-font-family-body);
+  font-size: var(--ndw-font-size-sm);
+  font-weight: var(--ndw-font-weight-bold);
+  gap: var(--ndw-spacing-3xs);
+  grid-template-columns: repeat(3, auto);
+  justify-content: start;
+  line-height: 100%;
+  margin-bottom: var(--ndw-spacing-2xs);
+
+  ndw-icon {
+    color: var(--ndw-color-grey-400);
+    font-size: var(--ndw-icon-size-md);
+    margin-top: calc(var(--ndw-spacing-3xs) * -1);
+  }
+
+  .required {
+    color: var(--ndw-color-grey-400);
+  }
+}

package/styles/components/_link.scss

@@ -0,0 +1,35 @@
+[ndwLink] {
+  display: inline-flex;
+  align-items: baseline;
+  gap: var(--ndw-spacing-2xs);
+  padding: 0;
+  border: 0;
+
+  font-size: inherit;
+  text-decoration: underline var(--ndw-border-size-sm) transparent;
+  text-underline-offset: var(--ndw-border-size-md);
+
+  color: var(--ndw-color-link-400);
+  background-color: transparent;
+  transition: text-decoration-color var(--ndw-animation-speed-fast) ease-in-out;
+
+  > * {
+    align-self: center;
+  }
+
+  ndw-icon {
+    font-size: 1.25em;
+    overflow: hidden;
+  }
+
+  &:hover {
+    color: var(--ndw-color-link-500);
+    text-decoration-color: var(--ndw-color-link-500);
+  }
+
+  &[disabled] {
+    color: var(--ndw-color-grey-400);
+    pointer-events: none;
+    user-select: none;
+  }
+}

package/styles/components/_menu-button.scss

@@ -0,0 +1,38 @@
+[ndwButton] {
+  &[menu] {
+    background-color: transparent;
+    border-color: transparent;
+    border-radius: 0;
+    color: var(--ndw-color-grey-400);
+    gap: var(--ndw-spacing-xs);
+    height: 2.625rem;
+    padding-inline: 0;
+    position: relative;
+    width: 100%;
+    cursor: default;
+
+    &:hover,
+    &:active,
+    &[active],
+    &[selected] {
+      color: var(--ndw-color-white);
+      cursor: pointer;
+    }
+
+    &:active,
+    &[selected] {
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    &:hover,
+    &[active] {
+      background-color: var(--ndw-color-grey-600);
+      border-color: var(--ndw-color-grey-600);
+    }
+
+    &:not([clickable]) {
+      cursor: default;
+    }
+  }
+}

package/styles/components/_popover.scss

@@ -0,0 +1,19 @@
+@keyframes show {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.cdk-overlay-pane {
+  &.ndw-popover-panel {
+    animation: show var(--ndw-animation-speed-fast) ease-out;
+    background-color: var(--ndw-color-white);
+    border-radius: var(--ndw-border-radius-md);
+    box-shadow: var(--ndw-elevation-popover);
+    display: grid;
+    padding: var(--ndw-spacing-sm);
+  }
+}

package/styles/components/_summary-card.scss

@@ -0,0 +1,227 @@
+.ndw-summary-card {
+  display: block;
+
+  &__wrapper {
+    position: relative;
+    overflow: hidden;
+
+    display: grid;
+    gap: var(--ndw-spacing-md);
+    height: 100%;
+    align-items: start;
+    box-sizing: border-box;
+
+    &:has(ndw-summary-card-avatar) {
+      grid-template-columns: max-content 1fr;
+    }
+
+    &:has(a:focus:not(:active)) {
+      outline: var(--ndw-border-size-sm) solid var(--ndw-color-secondary-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);
+
+        &:hover {
+          text-decoration: underline;
+        }
+
+        &: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-avatar {
+    display: grid;
+    place-content: center;
+    position: relative;
+    width: 30px;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    font-size: var(--ndw-font-size-sm);
+
+    &.ndw-summary-card-avatar--default {
+      color: var(--ndw-color-grey-700);
+      background-color: var(--ndw-color-grey-300);
+    }
+
+    &.ndw-summary-card-avatar--orange {
+      color: var(--ndw-color-primary-700);
+      background-color: var(--ndw-color-primary-050);
+    }
+
+    &.ndw-summary-card-avatar--blue {
+      color: var(--ndw-color-info-500);
+      background-color: var(--ndw-color-info-100);
+    }
+
+    &.ndw-summary-card-avatar--green {
+      color: var(--ndw-color-positive-500);
+      background-color: var(--ndw-color-positive-100);
+    }
+
+    &.ndw-summary-card-avatar--red {
+      color: var(--ndw-color-critical-500);
+      background-color: var(--ndw-color-critical-100);
+    }
+
+    &.ndw-summary-card-avatar--yellow {
+      color: var(--ndw-color-warning-500);
+      background-color: var(--ndw-color-warning-100);
+    }
+
+    &.ndw-summary-card-avatar--purple {
+      color: var(--ndw-color-alternative-500);
+      background-color: var(--ndw-color-alternative-100);
+    }
+
+    > img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 50%;
+    }
+
+    ndw-icon {
+      font-size: var(--ndw-font-size-lg);
+    }
+  }
+
+  .ndw-summary-card-actions {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+
+    &--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;
+      }
+    }
+  }
+}

package/styles/components/divider.stories.ts

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

@@ -0,0 +1,11 @@
+@forward 'button';
+@forward 'card';
+@forward 'divider';
+@forward 'dropdown';
+@forward 'filter-button';
+@forward 'input';
+@forward 'label';
+@forward 'link';
+@forward 'menu-button';
+@forward 'popover';
+@forward 'summary-card';