@gemeentenijmegen/components-css 0.0.1-alpha.11 → 0.0.1-alpha.111

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",

package/search/index.scss

@@ -0,0 +1,141 @@
+@import "~@utrecht/focus-ring-css/src/mixin";
+@import "~@utrecht/textbox-css/src/mixin";
+
+.nijmegen-search {
+  inline-size: var(--nijmegen-search-input-max-inline-size);
+  max-inline-size: 100%;
+  position: relative;
+
+  &.nijmegen-search--full-width {
+    inline-size: 100%;
+  }
+}
+
+.nijmegen-search__container {
+  display: flex;
+  gap: var(--nijmegen-search-input-column-gap);
+
+  .utrecht-button {
+    max-block-size: 51px;
+    min-block-size: 51px;
+  }
+}
+
+.nijmegen-search__input-holder {
+  flex: 1;
+  position: relative;
+}
+
+.nijmegen-search__search-button {
+  &.nijmegen-search__search-button--dark {
+    border-color: var(--nijmegen-search-input-button-border-color) !important;
+  }
+
+  @media (width <576px) {
+    svg {
+      display: none;
+    }
+  }
+}
+
+.nijmegen-search__clear-button {
+  align-items: center;
+  aspect-ratio: 1/1;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+  display: flex;
+  height: 100%; /* stylelint-disable-line property-disallowed-list */
+  justify-content: center;
+  position: absolute;
+  right: 0; /* stylelint-disable-line property-disallowed-list */
+  top: 0; /* stylelint-disable-line property-disallowed-list */
+
+  &.nijmegen-search__clear-button--hide {
+    display: none;
+  }
+
+  svg {
+    stroke: var(--nijmegen-interaction-color);
+  }
+}
+
+.nijmegen-search__input {
+  background-color: var(--nijmegen-search-input-background-color);
+  border-color: var(--nijmegen-search-input-border-color);
+  border-radius: var(--nijmegen-search-input-border-radius);
+  border-style: solid;
+  border-width: var(--nijmegen-search-input-border-width);
+  box-sizing: border-box;
+  color: var(--nijmegen-search-input-color);
+  font-family: var(--nijmegen-search-input-font-family);
+  font-size: var(--nijmegen-search-input-font-size);
+  font-weight: var(--nijmegen-search-input-font-weight);
+  line-height: var(--nijmegen-search-input-line-height);
+  min-block-size: var(--nijmegen-search-input-min-block-size);
+  padding-block-end: var(--nijmegen-search-input-padding-block-end);
+  padding-block-start: var(--nijmegen-search-input-padding-block-start);
+  padding-inline-end: var(--nijmegen-search-input-padding-inline-end);
+  padding-inline-start: var(--nijmegen-search-input-padding-inline-start);
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+
+  &:hover,
+  &.nijmegen-search__input--hover {
+    background-color: var(--nijmegen-search-input-hover-background-color);
+    border-color: var(--nijmegen-search-input-hover-border-color);
+    color: var(--nijmegen-search-input-hover-color);
+  }
+
+  &:focus,
+  &.nijmegen-search__input--focus {
+    @include utrecht-focus;
+
+    background-color: var(--nijmegen-search-input-focus-background-color);
+    border-color: var(--nijmegen-search-input-focus-border-color);
+    color: var(--nijmegen-search-input-focus-color);
+  }
+
+  &:focus-visible,
+  &.nijmegen-search__input--focus {
+    @include utrecht-focus;
+    @include utrecht-focus-ring;
+
+    background-color: var(--nijmegen-search-input-focus-background-color);
+    border-color: var(--nijmegen-search-input-focus-border-color);
+    color: var(--nijmegen-search-input-focus-color);
+  }
+
+  &:read-only,
+  &.nijmegen-search__input-read-only {
+    background-color: var(--nijmegen-search-input-read-only-background-color);
+    border-color: var(--nijmegen-search-input-read-only-border-color);
+    color: var(--nijmegen-search-input-read-only-color);
+  }
+
+  &.nijmegen-search__input--disabled {
+    background-color: var(--nijmegen-search-input-disabled-background-color);
+    border-color: var(--nijmegen-search-input-disabled-border-color);
+    color: var(--nijmegen-search-input-disabled-color);
+    cursor: var(--utrecht-action-disabled-cursor, not-allowed);
+  }
+
+  &::placeholder {
+    color: var(--nijmegen-search-input-placeholder-color);
+  }
+}
+
+.nijmegen-search__autocomplete-results {
+  display: none;
+  margin-block-start: var(--nijmegen-search-input-autocomplete-offset, 8px);
+  position: absolute;
+  top: var(--nijmegen-search-input-min-block-size); /* stylelint-disable-line property-disallowed-list */
+  width: 100%; /* stylelint-disable-line property-disallowed-list */
+
+  &--show-results {
+    display: block;
+  }
+
+  &--static {
+    position: static;
+  }
+}

package/search-results/index.scss

@@ -0,0 +1,56 @@
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+
+.nijmegen-search-results {
+  border-block-color: var(--nijmegen-search-result-border-color);
+  border-block-end-style: solid;
+  border-block-end-width: var(--nijmegen-search-result-border-block-end-width, 1px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--nijmegen-search-result-row-gap);
+  padding-block-end: var(--nijmegen-search-result-padding-block-end);
+  padding-block-start: var(--nijmegen-search-result-padding-block-start);
+  padding-inline-end: var(--nijmegen-search-result-padding-inline-end);
+  padding-inline-start: var(--nijmegen-search-result-padding-inline-start);
+}
+
+.nijmegen-search-results__content {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--nijmegen-search-result-content-row-gap);
+
+  @media (width < 576px) {
+    .nijmegen-metadata {
+      flex-direction: column;
+    }
+  }
+}
+
+.nijmegen-search-results__summary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nijmegen-search-result-content-row-gap);
+}
+
+.nijmegen-search-results__heading {
+  color: inherit;
+  text-decoration: var(--nijmegen-search-result-heading-text-decoration, none);
+
+  &:hover {
+    color: var(--nijmegen-search-result-heading-hover-color);
+    text-decoration: var(--nijmegen-search-result-heading-hover-text-decoration, underline);
+  }
+
+  &:focus,
+  &.nijmegen-search-results__heading--focus {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+  }
+
+  &:focus-visible,
+  &.nijmegen-search-results__heading--focus-visible {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+  }
+}

package/skip-link/index.scss

@@ -0,0 +1,41 @@
+@import "~@utrecht/link-css/src/mixin";
+@import "~@utrecht/focus-ring-css/src/mixin";
+
+.nijmegen-skip-link {
+  @include utrecht-link;
+
+  background-color: var(--nijmegen-focus-background-color);
+  box-sizing: border-box;
+  color: var(--nijmegen-focus-color);
+  display: inline-block;
+  font-size: var(--utrecht-document-font-size);
+  line-height: var(--utrecht-document-line-height);
+  margin-block-end: var(--nijmegen-skip-link-margin-block-end);
+  min-block-size: var(--utrecht-pointer-target-min-size);
+  min-inline-size: var(--utrecht-pointer-target-min-size);
+  padding-block: var(--nijmegen-space-75);
+  padding-inline: var(--nijmegen-space-100);
+  text-align: center;
+
+  &:not(:active, :focus, .nijmegen-skip-link--focus) {
+    block-size: 1px;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    inline-size: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+  }
+
+  &:focus,
+  &.nijmegen-skip-link--focus {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+  }
+
+  &:focus-visible,
+  &.nijmegen-skip-link--focus-visible {
+    @include utrecht-link--focus;
+    @include utrecht-link--focus-visible;
+  }
+}

package/spacing/getSpacing.mjs

@@ -0,0 +1,116 @@
+import fs from "fs";
+import path from "path";
+import spacingMatrix from "./spacing-matrix.json" assert { type: "json" };
+import semanticSpacingMatrix from "./semantic-spacing-matrix.json" assert { type: "json" };
+
+const spaceMap = {
+  NVT: undefined,
+  Onbekenden: "stranger",
+  Kennissen: "acquaintance",
+  Vrienden: "friend",
+  Besties: "best-friend",
+  Kind: "confidant",
+};
+
+const getSpacings = (spacingMatrix) => {
+  return spacingMatrix
+    .map((spacing) => {
+      const entries = Object.entries(spacing);
+      const [, component] = entries.shift();
+      return entries
+        .map(([sibling, space]) => {
+          const spacing = spaceMap[space];
+          return spacing && { component, sibling, spacing };
+        })
+        .filter(Boolean);
+    })
+    .filter((arr) => arr.length);
+};
+
+const getSpacingMixins = (components) =>
+  components.map((mixinGroup) => {
+    const componentName = mixinGroup[0].component;
+
+    const mixins = mixinGroup.map(
+      ({ component, sibling, spacing }) =>
+        `.${component}:has(+ .${sibling}) {
+  --${component}-margin-block-end: var(--utrecht-rich-text-${spacing}-margin-block-end);
+}`,
+    );
+    return `@mixin spacing-${componentName} {
+  .${componentName}:first-child {
+    --${componentName}-margin-block-start: 0;
+  }
+ ${mixins.join(";\n")}
+}`;
+  });
+
+const getSpacingMixinsSemantic = (components) =>
+  components.map((mixinGroup) => {
+    var componentName = mixinGroup[0].component;
+    componentName = componentName.replace(/^\./, "");
+
+    const mixins = mixinGroup.map(({ component, sibling, spacing }) => {
+      let resp = `${component}:has(+ ${sibling}) {
+    margin-block-end: var(--utrecht-rich-text-${spacing}-margin-block-end);`;
+      if (component == "button" && component == sibling) {
+        resp += `
+    margin-inline-end: var(--utrecht-rich-text-${spacing}-margin-block-end);
+    }`;
+      } else {
+        resp += `
+  }`;
+      }
+      return resp;
+    });
+    return `@mixin spacing-${componentName} {
+  ${componentName}:first-child {
+    --${componentName}-margin-block-start: 0;
+  }
+ ${mixins.join(";\n")}
+}`;
+  });
+
+const getRichTextStyles = (components, parentclass = "nijmegen-spacing") => `
+@import "./mixin";
+
+.${parentclass} .utrecht-page-body__content {
+  --utrecht-space-around: 1;
+  ${components.map((mixinGroup) => `@include spacing-${mixinGroup[0].component}`).join(";\n")}
+}
+ @import "./nested";`;
+
+const spacings = getSpacings(spacingMatrix);
+const semanticSpacings = getSpacings(semanticSpacingMatrix);
+
+fs.writeFileSync(
+  path.resolve("./spacing/src/_mixin.scss"),
+  getSpacingMixins(spacings).join("\n"),
+  {
+    override: true,
+  },
+);
+
+fs.writeFileSync(
+  path.resolve("./spacing/src/semantic/_mixin.scss"),
+  getSpacingMixinsSemantic(semanticSpacings).join("\n"),
+  {
+    override: true,
+  },
+);
+
+fs.writeFileSync(
+  path.resolve("./spacing/src/index.scss"),
+  getRichTextStyles(spacings),
+  {
+    override: true,
+  },
+);
+
+fs.writeFileSync(
+  path.resolve("./spacing/src/semantic/index.scss"),
+  getRichTextStyles(semanticSpacings, "nijmegen-html"),
+  {
+    override: true,
+  },
+);