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

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

package/spacing/semantic-spacing-matrix.json

@@ -0,0 +1,156 @@
+[
+  {
+    "component": "h1",
+    "h1": "NVT",
+    "h2": "Kennissen",
+    "h3": "NVT",
+    "h4": "NVT",
+    "h5": "NVT",
+    "h6": "NVT",
+    "button": "Kennissen",
+    "p": "Kennissen",
+    "ul": "Kennissen",
+    ".nijmegen-html-linklist": "Kennissen",
+    "a": "Kennissen"
+  },
+  {
+    "component": "h2",
+    "h1": "NVT",
+    "h2": "NVT",
+    "h3": "Kennissen",
+    "h4": "NVT",
+    "h5": "NVT",
+    "h6": "NVT",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": "h3",
+    "h1": "NVT",
+    "h2": "NVT",
+    "h3": "NVT",
+    "h4": "Kennissen",
+    "h5": "NVT",
+    "h6": "NVT",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": "h4",
+    "h1": "NVT",
+    "h2": "NVT",
+    "h3": "NVT",
+    "h4": "NVT",
+    "h5": "Kennissen",
+    "h6": "NVT",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": "h5",
+    "h1": "NVT",
+    "h2": "NVT",
+    "h3": "NVT",
+    "h4": "NVT",
+    "h5": "NVT",
+    "h6": "Kennissen",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": "h6",
+    "h1": "NVT",
+    "h2": "NVT",
+    "h3": "NVT",
+    "h4": "NVT",
+    "h5": "NVT",
+    "h6": "NVT",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": "button",
+    "h1": "NVT",
+    "h2": "Onbekenden",
+    "h3": "Onbekenden",
+    "h4": "Onbekenden",
+    "h5": "Onbekenden",
+    "h6": "Onbekenden",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": "p",
+    "h1": "NVT",
+    "h2": "Kennissen",
+    "h3": "Kennissen",
+    "h4": "Kennissen",
+    "h5": "Kennissen",
+    "h6": "Kennissen",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": "ul",
+    "h1": "NVT",
+    "h2": "Kennissen",
+    "h3": "Kennissen",
+    "h4": "Kennissen",
+    "h5": "Kennissen",
+    "h6": "Kennissen",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": ".nijmegen-html-linklist",
+    "h1": "NVT",
+    "h2": "Kennissen",
+    "h3": "Kennissen",
+    "h4": "Kennissen",
+    "h5": "Kennissen",
+    "h6": "Kennissen",
+    "button": "Vrienden",
+    "p": "Vrienden",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  },
+  {
+    "component": "a",
+    "h1": "NVT",
+    "h2": "Kennissen",
+    "h3": "Kennissen",
+    "h4": "Kennissen",
+    "h5": "Kennissen",
+    "h6": "Kennissen",
+    "button": "Vrienden",
+    "p": "Kennissen",
+    "ul": "Vrienden",
+    ".nijmegen-html-linklist": "Vrienden",
+    "a": "Vrienden"
+  }
+]