@gemeentenijmegen/components-css 0.0.1-alpha.9 → 0.0.1-alpha.91

package/mega-menu/index.scss

@@ -0,0 +1,62 @@
+@import "~@gemeentenijmegen/layout-css/src/variables";
+
+.nijmegen-mega-menu {
+  background-color: var(--nijmegen-mega-menu-background-color, #fff);
+  border: 0 solid var(--nijmegen-mega-menu-border-color, transparent);
+  border-block-end-width: var(--nijmegen-mega-menu-border-block-end-width, 1px);
+  margin-block-end: var(--nijmegen-mega-menu-margin-block-end);
+  writing-mode: horizontal-tb;
+}
+
+.nijmegen-mega-menu__container {
+  margin-inline: auto;
+  max-inline-size: var(--nijmegen-header-content-max-inline-size, 100%);
+}
+
+.nijmegen-mega-menu__content {
+  column-gap: var(--nijmegen-mega-menu-content-column-gap, 0);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-inline: auto;
+  padding-block-end: var(--nijmegen-mega-menu-content-padding-block-end, 0);
+  padding-block-start: var(--nijmegen-mega-menu-content-padding-block-start, 0);
+  padding-inline-end: var(--nijmegen-mega-menu-content-padding-inline-end, 0);
+  padding-inline-start: var(--nijmegen-mega-menu-content-padding-inline-start, 0);
+  row-gap: var(--nijmegen-mega-menu-content-row-gap, 0);
+
+  .utrecht-heading-4 {
+    font-size: 1.25rem;
+  }
+
+  > * {
+    flex-basis: 100%;
+    @media (width >= $nijmegen-breakpoint-md) {
+      &:only-child {
+        flex-basis: 100%;
+      }
+
+      flex-basis: calc((100% - (var(--nijmegen-mega-menu-content-column-gap, 0) * 2)) / 3);
+    }
+    @media (width >=$nijmegen-breakpoint-lg) {
+      &:only-child {
+        flex-basis: 100%;
+      }
+
+      flex-basis: calc((100% - (var(--nijmegen-mega-menu-content-column-gap, 0) * 3)) / 4);
+    }
+  }
+  &.nijmegen-mega-menu__content--full-width {
+    > * {
+      flex-basis: 100%;
+    }
+  }
+
+  ul {
+    padding-block-start: 1rem;
+
+    // row-gap: var(--nijmegen-mega-menu-content-row-gap, 0); todo if token is updated
+    row-gap: 1rem;
+  }
+}

package/menu.scss

@@ -0,0 +1,5 @@
+@import "./header/index";
+@import "./toolbar-button/index";
+@import "./mega-menu/index";
+@import "./mobile-menu/index";
+@import "./link-list/index";

package/metadata/index.scss

@@ -0,0 +1,31 @@
+/* stylelint-disable no-descending-specificity */
+
+@import "~@utrecht/unordered-list-css/src/mixin";
+
+.nijmegen-metadata {
+  @include utrecht-unordered-list;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--nijmegen-space-50);
+  padding-inline-start: 0;
+
+  &.nijmegen-metadata__horizontal {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .nijmegen-metadata__item {
+      padding-inline-end: var(--nijmegen-space-50);
+    }
+  }
+}
+
+.nijmegen-metadata__item {
+  align-items: center;
+  display: flex;
+  gap: var(--nijmegen-space-50);
+
+  svg {
+    block-size: var(--nijmegen-icon-functional-size);
+  }
+}

package/mobile-menu/_mixin.scss

@@ -0,0 +1,11 @@
+@mixin nijmegen-mobile-menu-icon-base {
+  background-color: currentColor;
+  content: "";
+  display: inline-block;
+  /* stylelint-disable-next-line property-disallowed-list */
+  height: var(--nijmegen-header-item-icon-size, 1.5rem);
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+  width: var(--nijmegen-header-item-icon-size, 1.5rem); /* stylelint-disable-line property-disallowed-list */
+}

package/mobile-menu/index.scss

@@ -0,0 +1,177 @@
+@import "~@gemeentenijmegen/layout-css/src/variables";
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+@import "./mixin";
+
+.nijmegen-mobile-menu {
+  background-color: var(--nijmegen-menu-background-color);
+  margin-block-end: var(--nijmegen-mobile-menu-margin-block-end);
+  position: relative;
+}
+
+.nijmegen-mobile-menu__list {
+  display: flex;
+  flex-direction: column;
+  line-height: var(--nijmegen-menu-link-line-height);
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.nijmegen-mobile-menu__link {
+  background-color: var(--nijmegen-menu-background-color);
+  box-sizing: border-box;
+  color: var(--nijmegen-menu-link-color);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--nijmegen-menu-link-font-family);
+  font-size: var(--nijmegen-menu-link-font-size);
+  font-weight: var(--nijmegen-menu-link-font-weight);
+  justify-content: space-between;
+  padding-block-end: var(--nijmegen-menu-link-padding-block-end);
+  padding-block-start: var(--nijmegen-menu-link-padding-block-start);
+  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);
+  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);
+  position: relative;
+  text-decoration: none;
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+
+  &:is(button) {
+    appearance: none;
+    border: 0;
+  }
+
+  &:focus,
+  &.nijmegen-mobile-menu__link--focus {
+    @include utrecht-link--focus;
+  }
+
+  &:focus-visible,
+  &.nijmegen-mobile-menu__link--focus-visible {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+  }
+
+  span {
+    align-items: center;
+    display: inline-flex;
+    gap: var(--nijmegen-menu-link-column-gap);
+  }
+
+  svg {
+    stroke: currentColor;
+  }
+
+  &--small {
+    font-size: var(--nijmegen-menu-link-small-font-size);
+    padding-block-end: var(--nijmegen-menu-link-small-padding-block-end);
+    padding-block-start: var(--nijmegen-menu-link-small-padding-block-start);
+    padding-inline-end: var(--nijmegen-menu-link-small-padding-inline-end);
+    padding-inline-start: var(--nijmegen-menu-link-small-padding-inline-start);
+
+    span {
+      gap: var(--nijmegen-menu-link-small-column-gap);
+    }
+  }
+
+  &--strong {
+    font-weight: var(--nijmegen-menu-link-level-1-font-weight);
+  }
+
+  &--back {
+    font-weight: var(--nijmegen-menu-link-level-1-font-weight);
+    padding-block-end: var(--nijmegen-menu-button-padding-block-end);
+    padding-block-start: var(--nijmegen-menu-button-padding-block-start);
+    padding-inline-end: var(--nijmegen-menu-button-padding-inline-end);
+    padding-inline-start: var(--nijmegen-menu-button-padding-inline-start);
+
+    span::before {
+      @include nijmegen-mobile-menu-icon-base;
+
+      mask-image: var(
+        --nijmegen-header-item-open-icon-image,
+        url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>')
+      );
+    }
+  }
+
+  &--current {
+    color: var(--nijmegen-menu-link-current-color);
+    font-weight: var(--nijmegen-menu-link-current-font-weight, 600);
+
+    &::after {
+      border-inline-start-color: var(--nijmegen-menu-link-current-border-color);
+      border-inline-start-style: solid;
+      border-inline-start-width: var(--nijmegen-menu-link-current-border-width, 4px);
+      content: "";
+      inset: 0;
+      position: absolute;
+    }
+  }
+
+  &--expanded,
+  &[aria-expanded="true"] {
+    background-color: var(--nijmegen-menu-link-expanded-background-color);
+    color: var(--nijmegen-menu-link-expanded-color);
+    font-weight: var(--nijmegen-menu-link-expanded-font-weight, 600);
+
+    svg,
+    &::after {
+      transform: scaleY(-1);
+    }
+  }
+
+  &--chevron::after {
+    @include nijmegen-mobile-menu-icon-base;
+
+    mask-image: var(
+      --nijmegen-header-item-open-icon-image,
+      url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>')
+    );
+  }
+
+  &--arrow::after {
+    @include nijmegen-mobile-menu-icon-base;
+
+    mask-image: var(
+      --nijmegen-header-item-open-icon-image,
+      url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg>')
+    );
+  }
+}
+
+.nijmegen-mobile-menu__details-content {
+  display: none;
+}
+
+.nijmegen-mobile-menu__details {
+  .nijmegen-mobile-menu__list {
+    display: none;
+  }
+
+  &--open {
+    .nijmegen-mobile-menu__list {
+      display: block;
+    }
+  }
+}
+
+.nijmegen-mobile-menu__separator {
+  padding-inline-end: var(--nijmegen-menu-link-padding-inline-end);
+  padding-inline-start: var(--nijmegen-menu-link-padding-inline-start);
+}
+
+.nijmegen-mobile-menu__panel {
+  background-color: var(--nijmegen-menu-background-color);
+  display: none;
+  flex-direction: column;
+  gap: var(--nijmegen-menu-link-column-gap);
+  inset: 0;
+  min-height: 100%; /* stylelint-disable-line property-disallowed-list */
+  position: absolute;
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+  z-index: 10;
+
+  &--active {
+    display: flex;
+  }
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.1-alpha.9",
+  "version": "0.0.1-alpha.91",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -11,7 +11,8 @@
   "scripts": {
     "build": "rollup -c ./rollup.config.mjs",
     "watch": "rollup -c ./rollup.config.mjs --watch",
-    "clean": "rimraf dist"
+    "clean": "rimraf dist",
+    "generate:spacing": "node ./spacing/getSpacing.mjs"
   },
   "main": "dist/index.min.css",
   "private": false,
@@ -23,12 +24,16 @@
     "url": "git@github.com:GemeenteNijmegen/design-system.git"
   },
   "devDependencies": {
-    "@gemeentenijmegen/layout-css": "0.0.1-alpha.22",
+    "@gemeentenijmegen/layout-css": "0.0.1-alpha.104",
+    "@rollup/plugin-terser": "0.4.4",
+    "@utrecht/button-css": "2.3.1",
     "@utrecht/focus-ring-css": "2.3.1",
     "@utrecht/link-css": "1.6.0",
+    "@utrecht/textbox-css": "3.0.1",
+    "@utrecht/unordered-list-css": "1.5.1",
     "postcss-discard-duplicates": "7.0.1",
     "rollup": "4.12.1",
     "rollup-plugin-postcss": "4.0.2"
   },
-  "gitHead": "a2d9f1289f213022f57748dc80a0f8eb4bf2e387"
+  "gitHead": "42ff6b45f0964984519d4952712cb74eb0d0faa2"
 }

package/pagination/_mixin.scss

@@ -0,0 +1,41 @@
+@mixin nijmegen-pagination-link {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  justify-content: center;
+  text-decoration: none;
+}
+
+@mixin nijmegen-pagination-link-chevron {
+  background-color: currentColor;
+  content: "";
+  /* stylelint-disable-next-line property-disallowed-list */
+  height: var(--nijmegen-pagination-relative-link-icon-size, 1.5rem);
+  mask-image: var(
+    --nijmegen-pagination-relative-icon,
+    url('data:image/svg+xml,<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-arrow-right"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l14 0" /><path d="M13 18l6 -6" /><path d="M13 6l6 6" /></svg>')
+  );
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: 100%;
+  /* stylelint-disable-next-line property-disallowed-list */
+  width: var(--nijmegen-pagination-relative-link-icon-size, 1.5rem);
+}
+
+@mixin invisible-but-accessible {
+  block-size: 1px !important;
+
+  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  inline-size: 1px !important;
+  /* stylelint-disable-next-line property-disallowed-list */
+  margin: -1px !important;
+  overflow: hidden !important;
+  /* stylelint-disable-next-line property-disallowed-list */
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+}

package/pagination/index.scss

@@ -0,0 +1,191 @@
+/* stylelint-disable no-descending-specificity */
+
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+@import "./mixin";
+
+.nijmegen-pagination {
+  font-family: var(--nijmegen-pagination-font-family);
+  font-size: var(--nijmegen-pagination-font-size, 1.125rem);
+  line-height: var(--nijmegen-pagination-line-height, 150%);
+  margin-block-end: var(--nijmegen-pagination-margin-block-end);
+
+  .nijmegen-sr-only {
+    @include invisible-but-accessible;
+  }
+}
+
+.nijmegen-pagination-list {
+  all: unset;
+  display: flex;
+  list-style: none;
+}
+
+.nijmegen-pagination__ellipses {
+  @include nijmegen-pagination-link;
+
+  color: var(--nijmegen-pagination-ellipses-color);
+  font-weight: var(--nijmegen-pagination-ellipses-font-weight);
+  min-block-size: var(--nijmegen-pagination-ellipses-min-block-size, 3rem);
+  padding-block-end: var(--nijmegen-pagination-ellipses-padding-block-end, 0.75rem);
+  padding-block-start: var(--nijmegen-pagination-ellipses-padding-block-start, 0.75rem);
+  padding-inline-end: var(--nijmegen-pagination-ellipses-padding-inline-end, 0.75rem);
+  padding-inline-start: var(--nijmegen-pagination-ellipses-padding-inline-start, 0.75rem);
+}
+
+.nijmegen-pagination__page-link {
+  @include utrecht-link;
+  @include nijmegen-pagination-link;
+
+  background-color: var(--nijmegen-pagination-page-link-background-color);
+  border-color: var(--nijmegen-pagination-page-link-border-color);
+  border-radius: var(--nijmegen-pagination-page-link-border-radius);
+  border-width: var(--nijmegen-pagination-page-link-border-width);
+  color: var(--nijmegen-pagination-page-link-color);
+  font-weight: var(--nijmegen-pagination-page-link-font-weight);
+  min-block-size: var(--nijmegen-pagination-page-link-min-block-size, 3rem);
+  min-inline-size: var(--nijmegen-pagination-page-link-min-inline-size, 3rem);
+  padding-block-end: var(--nijmegen-pagination-page-link-padding-block-end, 0.75rem);
+  padding-block-start: var(--nijmegen-pagination-page-link-padding-block-start, 0.75rem);
+  padding-inline-end: var(--nijmegen-pagination-page-link-padding-inline-end);
+  padding-inline-start: var(--nijmegen-pagination-page-link-padding-inline-start);
+  text-decoration: var(--nijmegen-pagination-page-link-text-decoration);
+
+  &:hover,
+  &.nijmegen-pagination__page-link--hover {
+    background-color: var(--nijmegen-pagination-page-link-hover-background-color);
+    border-color: var(--nijmegen-pagination-page-link-hover-border-color);
+    color: var(--nijmegen-pagination-page-link-hover-color);
+    text-decoration: var(--nijmegen-pagination-page-link-hover-text-decoration);
+  }
+
+  &:active,
+  &.nijmegen-pagination__page-link--active {
+    background-color: var(--nijmegen-pagination-page-link-active-background-color);
+    border-color: var(--nijmegen-pagination-page-link-active-border-color);
+    color: var(--nijmegen-pagination-page-link-active-color);
+    text-decoration: var(--nijmegen-pagination-page-link-active-text-decoration);
+  }
+
+  &:focus,
+  &.nijmegen-pagination__page-link--focus {
+    @include utrecht-link--focus;
+
+    background-color: var(--nijmegen-pagination-page-link-focus-visible-background-color);
+    color: var(--nijmegen-pagination-page-link-focus-visible-color);
+    text-decoration: var(--nijmegen-pagination-page-link-focus-visible-text-decoration);
+  }
+
+  &:focus-visible,
+  &.nijmegen-pagination__page-link--focus-visible {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+
+    background-color: var(--nijmegen-pagination-page-link-focus-visible-background-color);
+    color: var(--nijmegen-pagination-page-link-focus-visible-color);
+    text-decoration: var(--nijmegen-pagination-page-link-focus-visible-text-decoration);
+  }
+
+  &.nijmegen-pagination__page-link--current {
+    background-color: var(--nijmegen-pagination-page-link-current-background-color);
+    border-color: var(--nijmegen-pagination-page-link-current-border-color);
+    color: var(--nijmegen-pagination-page-link-current-color);
+    font-weight: var(--nijmegen-pagination-page-link-current-font-weight);
+    text-decoration: var(--nijmegen-pagination-page-link-current-text-decoration);
+  }
+}
+
+.nijmegen-pagination__relative-link {
+  @include utrecht-link;
+  @include nijmegen-pagination-link;
+
+  background-color: var(--nijmegen-pagination-page-link-background-color);
+  border-color: var(--nijmegen-pagination-relative-link-border-color);
+  border-radius: var(--nijmegen-pagination-relative-link-border-radius);
+  border-width: var(--nijmegen-pagination-relative-link-border-width);
+  color: var(--nijmegen-pagination-relative-link-color);
+  font-weight: var(--nijmegen-pagination-relative-link-font-weight);
+  gap: 0.25rem;
+  min-block-size: var(--nijmegen-pagination-relative-link-min-block-size, 3rem);
+  min-inline-size: var(--nijmegen-pagination-relative-link-min-inline-size, 3rem);
+  padding-block-end: var(--nijmegen-pagination-relative-link-padding-block-end, 0.75rem);
+  padding-block-start: var(--nijmegen-pagination-relative-link-padding-block-start, 0.75rem);
+  padding-inline-end: var(--nijmegen-pagination-relative-link-padding-inline-end);
+  padding-inline-start: var(--nijmegen-pagination-relative-link-padding-inline-start);
+  text-decoration: var(--nijmegen-pagination-relative-link-text-decoration);
+
+  @media (width <576px) {
+    span {
+      display: none;
+    }
+  }
+
+  &.nijmegen-pagination__relative-link--disabled {
+    background-color: var(--nijmegen-pagination-relative-link-disabled-background-color);
+    border-color: var(--nijmegen-pagination-relative-link-disabled-border-color);
+    color: var(--nijmegen-pagination-relative-link-disabled-color);
+  }
+
+  &.nijmegen-pagination__relative-link--prev {
+    @media (width >=576px) {
+      &:has(span) {
+        margin-inline-end: var(--nijmegen-space-100);
+      }
+    }
+
+    &::before {
+      @include nijmegen-pagination-link-chevron;
+
+      transform: scale(-1, 1);
+    }
+  }
+
+  &.nijmegen-pagination__relative-link--next {
+    @media (width >=576px) {
+      &:has(span) {
+        margin-inline-start: var(--nijmegen-space-100);
+      }
+    }
+
+    &::after {
+      @include nijmegen-pagination-link-chevron;
+    }
+  }
+
+  &:focus,
+  &.nijmegen-pagination__relative-link--focus {
+    @include utrecht-link--focus;
+
+    background-color: var(--nijmegen-pagination-relative-link-focus-visible-background-color);
+    color: var(--nijmegen-pagination-relative-link-focus-visible-color);
+    text-decoration: var(--nijmegen-pagination-relative-link-focus-visible-text-decoration);
+  }
+
+  &:focus-visible,
+  &.nijmegen-pagination_relative-link--focus-visible {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+
+    background-color: var(--nijmegen-pagination-relative-link-focus-visible-background-color);
+    color: var(--nijmegen-pagination-relative-link-focus-visible-color);
+    text-decoration: var(--nijmegen-pagination-relative-link-focus-visible-text-decoration);
+  }
+
+  &:is(a) {
+    &:hover,
+    &.nijmegen-pagination__relative-link--hover {
+      background-color: var(--nijmegen-pagination-relative-link-hover-background-color);
+      border-color: var(--nijmegen-pagination-relative-link-hover-border-color);
+      color: var(--nijmegen-pagination-relative-link-hover-color);
+      text-decoration: var(--nijmegen-pagination-relative-link-hover-text-decoration);
+    }
+
+    &:active,
+    &.nijmegen-pagination__relative-link--active {
+      background-color: var(--nijmegen-pagination-relative-link-active-background-color);
+      border-color: var(--nijmegen-pagination-relative-link-active-border-color);
+      color: var(--nijmegen-pagination-relative-link-active-color);
+      text-decoration: var(--nijmegen-pagination-relative-link-active-text-decoration);
+    }
+  }
+}

package/rollup.config.mjs

@@ -2,8 +2,34 @@ import postcss from "rollup-plugin-postcss";
 import discardDuplicates from "postcss-discard-duplicates";
 import { cwd } from "node:process";
 import { basename } from "node:path";
+import terser from "@rollup/plugin-terser";
+
+let components = [
+  {
+    input: "header/index.scss",
+    output: "dist/header.css",
+  },
+];
 
 let config = [];
+components.forEach((component) => {
+  config.push({
+    input: component.input,
+    output: {
+      file: component.output,
+      sourcemap: false,
+      format: "esm",
+      compact: true,
+    },
+    plugins: [
+      postcss({
+        extensions: [".css", ".scss"],
+        plugins: [discardDuplicates()],
+        extract: true,
+      }),
+    ],
+  });
+});
 
 config.push({
   input: "index.scss",