@rijkshuisstijl-community/components-css 1.0.0-alpha.8 → 1.0.0-alpha.80

package/index.scss

@@ -0,0 +1,47 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "@utrecht/component-library-css/dist/index.css";
+@use "@utrecht/component-library-css/dist/html.css";
+
+@use "src/accordion/index" as accordion;
+@use "src/action-group/index" as actionGroup;
+@use "src/alert/index" as alert;
+@use "src/article/index" as article;
+@use "src/blockquote/index" as blockquote;
+@use "src/breadcrumb-nav/index" as breadcrumb;
+@use "src/button/index" as button;
+@use "src/card/index" as card;
+@use "src/dot-badge/index" as dotBadge;
+@use "src/checkbox/index" as checkbox;
+@use "src/figure/index" as figure;
+@use "src/file-input/index" as fileInput;
+@use "src/form/index" as form;
+@use "src/form-field/index" as formField;
+@use "src/form-field-error-message/index" as formFieldError;
+@use "src/form-field-radio-option/index" as FormFieldRadio;
+@use "src/footer/index" as footer;
+@use "src/hero/index" as hero;
+@use "src/link-list/index" as linkList;
+@use "src/link-list-card/index" as linkListCard;
+@use "src/link/index" as link;
+@use "src/logo/index" as logo;
+@use "src/navbar/index" as navbar;
+@use "src/message-list/index" as messageList;
+@use "src/navigation-list/index" as navigationList;
+@use "src/ordered-list/index" as orderedList;
+@use "src/radio/index" as radio;
+@use "src/radio-group/index" as radioGroup;
+@use "src/select/index" as select;
+@use "src/separator/index" as separator;
+@use "src/side-nav/index" as sideNav;
+@use "src/skip-link/index" as skipLink;
+@use "src/table/index" as table;
+@use "src/textarea/index" as textarea;
+@use "src/textbox/index" as textbox;
+@use "src/toggletip/index" as toggletip;
+@use "src/unordered-list/index" as unorderedList;
+@use "src/badgecounter/index" as badgecounter;
+@use "src/pre-heading/index" as preHeading;

package/package.json

@@ -1,25 +1,33 @@
 {
-  "version": "1.0.0-alpha.8",
+  "name": "@rijkshuisstijl-community/components-css",
+  "version": "1.0.0-alpha.80",
   "author": "Community for NL Design System",
   "description": "CSS Components for a design system based on the NL Design System architecture",
   "license": "EUPL-1.2",
-  "name": "@rijkshuisstijl-community/components-css",
   "keywords": [
     "nl-design-system"
   ],
   "private": false,
   "publishConfig": {
-    "access": "restricted",
+    "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "repository": {
+    "type": "git+ssh",
+    "url": "git@github.com:nl-design-system/rijkshuisstijl-community.git",
+    "directory": "packages/components-css"
+  },
   "devDependencies": {
-    "@babel/core": "7.22.11",
-    "@mdx-js/react": "2.3.0",
-    "@storybook/addon-docs": "7.4.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.2.2",
-    "webpack": "5.88.2"
+    "scss": "0.2.4",
+    "vite": "6.0.1"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "pnpm run build:css",
+    "build:css": "vite build"
+  },
+  "dependencies": {
+    "@utrecht/component-library-css": "7.0.0"
   },
-  "gitHead": "0ebb5b835053731c4c65b00901b4e4f2265527e3"
+  "gitHead": "4cfb96f419392c8e64afb6c20d57b00ce886b54e"
 }

package/src/accordion/index.scss

@@ -0,0 +1,68 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "../button/mixin";
+
+.utrecht-accordion {
+  color: var(--rhc-accordion-color, inherit);
+  display: flex;
+  flex-direction: column;
+  margin-block-end: var(--utrecht-accordion-margin-block-end);
+  row-gap: var(--utrecht-accordion-row-gap, inherit);
+}
+
+.utrecht-accordion__header {
+  margin-block-end: var(--rhc-accordion-header-margin-block-end, var(--rhc-accordion-header-margin, inherit));
+  margin-block-start: var(--rhc-accordion-header-margin-block-start, var(--rhc-accordion-header-margin, inherit));
+  margin-inline-end: var(--rhc-accordion-header-margin-inline-end, var(--rhc-accordion-header-margin, inherit));
+  margin-inline-start: var(--rhc-accordion-header-margin-inline-start, var(--rhc-accordion-header-margin, inherit));
+}
+
+.utrecht-accordion__section {
+  border-block-end-width: var(
+    --rhc-accordion-section-border-block-end-width,
+    var(--rhc-accordion-section-border-width, inherit)
+  );
+  border-block-start-width: var(
+    --rhc-accordion-section-border-block-start-width,
+    var(--rhc-accordion-section-border-width, inherit)
+  );
+  border-color: var(--rhc-accordion-section-border-color, inherit);
+  border-inline-end-width: var(
+    --rhc-accordion-section-border-inline-end-width,
+    var(--rhc-accordion-section-border-width, inherit)
+  );
+  border-inline-start-width: var(
+    --rhc-accordion-section-border-inline-start-width,
+    var(--rhc-accordion-section-border-width, inherit)
+  );
+  border-style: solid;
+}
+
+.utrecht-button.utrecht-accordion__button {
+  --_utrecht-button-appearance-font-weight: var(--rhc-accordion-button-font-weight, inherit);
+  --utrecht-button-border-radius: var(--rhc-accordion-border-radius, inherit);
+  --utrecht-button-padding-block-end: var(--rhc-accordion-button-padding-block-end, inherit);
+  --utrecht-button-padding-block-start: var(--rhc-accordion-button-padding-block-start, inherit);
+  --utrecht-button-padding-inline-end: var(--rhc-accordion-button-padding-inline-end, inherit);
+  --utrecht-button-padding-inline-start: var(--rhc-accordion-button-padding-inline-start, inherit);
+
+  align-items: start;
+}
+
+.utrecht-accordion__button:focus-visible,
+.utrecht-accordion__button--focus-visible {
+  @include mixin.rhc-button--focus-visible;
+}
+
+.utrecht-accordion__button-icon {
+  align-items: center;
+  block-size: var(--utrecht-accordion-button-icon-size);
+  display: flex;
+  fill: var(--utrecht-accordion-button-color, inherit);
+  inline-size: var(--utrecht-accordion-button-icon-size);
+  justify-content: center;
+  margin-block: var(--rhc-accordion-button-icon-margin-block);
+}

package/src/action-group/index.scss

@@ -0,0 +1,11 @@
+.utrecht-button-group {
+  column-gap: var(--utrecht-button-group-column-gap, 0.5rem);
+  row-gap: var(--utrecht-button-group-row-gap, 0.5rem);
+  @media (width <= 768px) {
+    flex-direction: column;
+    .utrecht-button,
+    .utrecht-button-link {
+      min-inline-size: 100%;
+    }
+  }
+}

package/src/alert/index.scss

@@ -0,0 +1,27 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.rhc-alert__container {
+  display: flex;
+}
+
+.rhc-alert__icon-container {
+  inline-size: var(--utrecht-alert-icon-size);
+  inset-block-start: var(--utrecht-alert-icon-inset-block-start);
+  min-inline-size: var(--utrecht-alert-icon-size);
+  padding-inline-end: var(--rhc-space-100);
+  &--ok {
+    color: var(--rhc-color-feedback-success-default);
+  }
+  &--error {
+    color: var(--rhc-color-feedback-error-default);
+  }
+  &--warning {
+    color: var(--rhc-color-feedback-warning-default);
+  }
+  &--info {
+    color: var(--rhc-color-feedback-info-default);
+  }
+}

package/src/article/index.scss

@@ -0,0 +1 @@
+// if needed add styles here for the Article components.

package/src/badgecounter/index.scss

@@ -0,0 +1,3 @@
+.utrecht-badge-counter {
+  align-content: center;
+}

package/src/blockquote/_mixin.scss

@@ -0,0 +1,85 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-blockquote {
+  background-color: var(--utrecht-blockquote-background-color);
+  border-block-end-width: var(--utrecht-blockquote-border-block-end-width);
+  border-block-start-width: var(--utrecht-blockquote-border-block-start-width);
+  border-color: var(--utrecht-blockquote-border-color);
+  border-end-end-radius: var(--utrecht-blockquote-border-end-end-radius);
+  border-end-start-radius: var(--utrecht-blockquote-border-end-start-radius);
+  border-inline-end-width: var(--utrecht-blockquote-border-inline-end-width);
+  border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width);
+  border-start-end-radius: var(--utrecht-blockquote-border-start-end-radius);
+  border-start-start-radius: var(--utrecht-blockquote-border-start-start-radius);
+  border-style: solid;
+  display: flex;
+  flex-direction: column;
+  padding-block-end: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-block-end));
+  padding-block-start: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-block-start));
+  padding-inline-end: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-inline-end));
+  padding-inline-start: var(--utrecht-blockquote-padding, var(--utrecht-blockquote-padding-inline-start));
+  row-gap: var(--utrecht-blockquote-row-gap, inherit);
+}
+
+@mixin rhc-blockquote-variation($variation) {
+  background-color: var(
+    --utrecht-blockquote-#{$variation}-background-color,
+    var(--utrecht-blockquote-background-color)
+  );
+  border-block-end-width: var(
+    --utrecht-blockquote-#{$variation}-border-block-end-width,
+    var(--utrecht-blockquote-border-block-end-width)
+  );
+  border-block-start-width: var(
+    --utrecht-blockquote-#{$variation}-border-block-start-width,
+    var(--utrecht-blockquote-border-block-start-width)
+  );
+  border-color: var(--utrecht-blockquote-#{$variation}-border-color, var(--utrecht-blockquote-border-color));
+  border-end-end-radius: var(
+    --utrecht-blockquote-#{$variation}-border-end-end-radius,
+    var(--utrecht-blockquote-border-end-end-radius)
+  );
+  border-end-start-radius: var(
+    --utrecht-blockquote-#{$variation}-border-end-start-radius,
+    var(--utrecht-blockquote-border-end-start-radius)
+  );
+  border-inline-end-width: var(
+    --utrecht-blockquote-#{$variation}-border-inline-end-width,
+    var(--utrecht-blockquote-border-inline-end-width)
+  );
+  border-inline-start-width: var(
+    --utrecht-blockquote-#{$variation}-border-inline-start-width,
+    var(--utrecht-blockquote-border-inline-start-width)
+  );
+  border-start-end-radius: var(
+    --utrecht-blockquote-#{$variation}-border-start-end-radius,
+    var(--utrecht-blockquote-border-start-end-radius)
+  );
+  border-start-start-radius: var(
+    --utrecht-blockquote-#{$variation}-border-start-start-radius,
+    var(--utrecht-blockquote-border-start-start-radius)
+  );
+  color: var(--utrecht-blockquote-#{$variation}-color, var(--utrecht-blockquote-content-color));
+  font-family: var(--utrecht-blockquote-#{$variation}-font-family, var(--utrecht-blockquote-content-font-family));
+  font-size: var(--utrecht-blockquote-#{$variation}-font-size, var(--utrecht-blockquote-content-font-size));
+  padding-block-end: var(
+    --utrecht-blockquote-#{$variation}-padding,
+    var(--utrecht-blockquote-#{$variation}-padding-block-end, var(--utrecht-blockquote-padding-block-end))
+  );
+  padding-block-start: var(
+    --utrecht-blockquote-#{$variation}-padding,
+    var(--utrecht-blockquote-#{$variation}-padding-block-start, var(--utrecht-blockquote-padding-block-start))
+  );
+  padding-inline-end: var(
+    --utrecht-blockquote-#{$variation}-padding,
+    var(--utrecht-blockquote-#{$variation}-padding-inline-end, var(--utrecht-blockquote-padding-inline-end))
+  );
+  padding-inline-start: var(
+    --utrecht-blockquote-#{$variation}-padding,
+    var(--utrecht-blockquote-#{$variation}-padding-inline-start, var(--utrecht-blockquote-padding-inline-start))
+  );
+  row-gap: var(--utrecht-blockquote-#{$variation}-row-gap, var(--utrecht-blockquote-row-gap));
+}

package/src/blockquote/index.scss

@@ -0,0 +1,41 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@use "mixin";
+
+.rhc-blockquote {
+  --utrecht-blockquote-color: var(--utrecht-blockquote-content-color);
+  --utrecht-blockquote-font-size: var(--utrecht-blockquote-content-font-size);
+  --utrecht-document-font-family: var(--utrecht-blockquote-content-font-family);
+
+  @include mixin.rhc-blockquote;
+}
+
+.utrecht-blockquote__attribution {
+  font-family: var(--utrecht-blockquote-attribution-font-family, inherit);
+}
+
+.utrecht-blockquote__quote {
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+.rhc-blockquote--blue-corner-border-variation {
+  @include mixin.rhc-blockquote-variation("blue-corner-border-variation");
+}
+
+.rhc-blockquote--pink-background-variation {
+  @include mixin.rhc-blockquote-variation("pink-background-variation");
+}
+
+.rhc-blockquote--pink-left-border-variation {
+  @include mixin.rhc-blockquote-variation("pink-left-border-variation");
+}
+
+.rhc-blockquote--pink-corner-border-variation {
+  @include mixin.rhc-blockquote-variation("pink-corner-border-variation");
+}

package/src/breadcrumb-nav/index.scss

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+.utrecht-breadcrumb-nav {
+  line-height: var(--utrecht-breadcrumb-nav-line-height, inherit);
+  &__link {
+    --utrecht-link-icon-inset-block-start: var(--utrecht-breadcrumb-nav-link-icon-inset-block-start, inherit);
+
+    &--current {
+      --utrecht-link-text-decoration-color: var(--utrecht-link-text-decoration-color);
+      --utrecht-link-text-decoration: none;
+
+      color: var(--utrecht-breadcrumb-nav-link-current-color);
+    }
+    &--active {
+      --utrecht-link-text-decoration: var(--utrecht-breadcrumb-nav-link-active-text-decoration, underline);
+
+      color: var(--utrecht-breadcrumb-nav-link-active-color);
+      text-decoration-color: var(--utrecht-breadcrumb-nav-link-active-color);
+    }
+  }
+  &__separator {
+    --utrecht-breadcrumb-nav-separator-icon-size: var(--utrecht-breadcrumb-nav-divider-size, 14px);
+    --utrecht-breadcrumb-nav-separator-color: --utrecht-breadcrumb-nav-divider-color;
+  }
+}

package/src/button/_mixin.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2020-2022 Gemeente Utrecht
+ * Copyright (c) 2020-2022 Frameless B.V.
+ */
+
+@use "../link/mixin";
+
+@mixin rhc-button--icon-only {
+  --utrecht-button-padding-block-end: var(--rhc-icon-only-button-padding-block-end, inherit);
+  --utrecht-button-padding-block-start: var(--rhc-icon-only-button-padding-block-start, inherit);
+  --utrecht-button-padding-inline-end: var(--rhc-icon-only-button-padding-inline-end, inherit);
+  --utrecht-button-padding-inline-start: var(--rhc-icon-only-button-padding-inline-start, inherit);
+}
+
+@mixin rhc-button--focus-visible {
+  @include mixin.rhc-link--focus-visible;
+}
+
+@mixin invisible-but-accessible {
+  block-size: 1px;
+
+  /* Source: https://kittygiraudel.com/snippets/sr-only-class/ */
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  margin-block: -1px;
+  margin-inline: -1px;
+  overflow: hidden;
+  padding-block: 0;
+  padding-inline: 0;
+  position: absolute;
+  white-space: nowrap;
+}

package/src/button/index.scss

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+@use "mixin";
+
+.rhc-button:focus-visible,
+.rhc-button--focus-visible {
+  @include mixin.rhc-button--focus-visible;
+}
+
+.rhc-button--icon-only {
+  @include mixin.rhc-button--icon-only;
+}
+
+.rhc-button--icon-only .rhc-button__sr-only {
+  @include mixin.invisible-but-accessible;
+}

package/src/card/_mixin.scss

@@ -0,0 +1,174 @@
+@mixin rhc-card {
+  @include rounded-border-corners;
+
+  box-sizing: border-box;
+  column-gap: var(--rhc-card-as-link-column-gap, 16px);
+  display: inline-flex;
+  flex-direction: column;
+  inline-size: var(--rhc-card-as-link-inline-size, 328px);
+  position: relative;
+  text-decoration: none;
+}
+
+@mixin rhc-card--default {
+  background-color: var(--rhc-card-as-link-background-color, white);
+  border-color: var(--rhc-card-as-link-border-color, #cbd5e1);
+  border-style: solid;
+  border-width: var(--rhc-card-as-link-border-width, 1px);
+  color: var(--rhc-card-as-link-color, #154273);
+}
+
+@mixin rhc-card--full-bleed {
+  --rhc-card-as-link-metadata-color: var(
+    --rhc-card-as-link-full-bleed-metadata-color,
+    var(--rhc-card-as-link-full-bleed-color, white)
+  );
+
+  color: var(--rhc-card-as-link-full-bleed-color, white);
+}
+
+@mixin rhc-card--horizontal {
+  flex-direction: row;
+  gap: 0;
+  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
+}
+
+@mixin rhc-card--active {
+  background-color: var(--rhc-card-as-link-active-background-color, #dce3ea);
+}
+
+@mixin rhc-card--default--focus {
+  background-color: var(--rhc-card-as-link-focus-background-color, #dce3ea);
+}
+
+@mixin rhc-card--default--hover {
+  background-color: var(--rhc-card-as-link-hover-background-color, #f8fafc);
+}
+
+@mixin rhc-card--full-bleed__footer {
+  padding-block-end: var(--rhc-card-as-link-full-bleed-padding-block-end, 16px);
+  padding-block-start: var(--rhc-card-as-link-full-bleed-padding-block-start, 16px);
+  padding-inline-end: var(--rhc-card-as-link-full-bleed-padding-inline-end, 0);
+  padding-inline-start: var(--rhc-card-as-link-full-bleed-padding-inline-start, 0);
+}
+
+@mixin rhc-card__image {
+  aspect-ratio: 16 / 9;
+  block-size: 100%;
+}
+
+@mixin rhc-card__content {
+  display: flex;
+  flex-direction: column;
+  padding-block-end: var(--rhc-card-as-link-padding-block-end, 16px);
+  padding-block-start: var(--rhc-card-as-link-padding-block-start, 16px);
+  padding-inline-end: var(--rhc-card-as-link-padding-inline-end, 16px);
+  padding-inline-start: var(--rhc-card-as-link-padding-inline-start, 16px);
+  row-gap: var(--rhc-card-as-link-row-gap, 12px);
+}
+
+@mixin rhc-card--horizontal__content {
+  @include rounded-border-corners;
+
+  background-color: var(--rhc-card-as-link-horizontal-background-color, #154273);
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
+  color: var(--rhc-card-as-link-horizontal-color, white);
+  column-gap: var(--rhc-card-as-link-column-gap, 16px);
+  flex-direction: row;
+  padding-block-end: var(--rhc-card-as-link-horizontal-padding-block-end, 0);
+  padding-block-start: var(--rhc-card-as-link-horizontal-padding-block-start, 0);
+  padding-inline-end: var(--rhc-card-as-link-horizontal-padding-inline-end, 0);
+  padding-inline-start: var(--rhc-card-as-link-horizontal-padding-inline-start, 0);
+  row-gap: var(--rhc-card-as-link-row-gap, 12px);
+}
+
+@mixin rhc-card--horizontal__heading {
+  inline-size: var(--rhc-card-as-link-horizontal-heading-inline-size);
+}
+
+@mixin rhc-card--full-bleed__image-container {
+  block-size: 100%;
+  inline-size: 100%;
+}
+
+@mixin rhc-card--full-bleed__image {
+  @include rounded-border-corners;
+
+  block-size: 100%;
+  filter: brightness(var(--rhc-card-as-link-full-bleed-opacity, 0.5));
+  inline-size: var(--rhc-card-as-link-inline-size, 328px);
+  position: absolute;
+  z-index: -1;
+}
+
+@mixin rhc-card--horizontal__image {
+  @include rounded-border-corners;
+
+  aspect-ratio: 1 / 1;
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
+}
+
+@mixin rhc-card__heading {
+  align-items: center;
+  display: flex;
+  font-size: var(--rhc-card-as-link-heading-font-size, 24px);
+  font-weight: var(--rhc-card-as-link-heading-font-weight, 700);
+}
+
+@mixin rhc-card__heading--active {
+  text-decoration: var(--rhc-card-as-link-active-text-decoration, underline);
+}
+
+@mixin rhc-card__heading--hover {
+  text-decoration: var(--rhc-card-as-link-hover-text-decoration, underline);
+}
+
+@mixin rhc-card__heading--focus {
+  text-decoration: var(--rhc-card-as-link-focus-text-decoration, underline);
+}
+
+@mixin rhc-card__icon {
+  color: var(--rhc-card-as-link-icon-color, #154273);
+  size: var(--rhc-card-as-link-icon-size, 24px);
+}
+
+@mixin rhc-card__link {
+  color: var(--rhc-card-as-link-link-color, #01689b);
+  text-decoration: var(--rhc-card-as-link-link-text-decoration, underline);
+}
+
+@mixin rhc-card__link--active {
+  --utrecht-link-color: var(--rhc-card-as-link-link-active-color, #42145f);
+
+  color: var(--rhc-card-as-link-link-active-color, #42145f);
+  text-decoration: var(--rhc-card-as-link-link-active-text-decoration, none);
+}
+
+@mixin rhc-card__link--hover {
+  text-decoration: var(--rhc-card-as-link-link-hover-text-decoration, none);
+}
+
+@mixin rhc-card__link--focus {
+  text-decoration: var(--rhc-card-as-link-link-focus-text-decoration, none);
+}
+
+@mixin rhc-card__metadata {
+  color: var(--rhc-card-as-link-metadata-color, #154273);
+}
+
+@mixin rounded-border-corners {
+  border-end-end-radius: var(--rhc-card-as-link-border-end-end-radius, var(--rhc-card-as-link-border-radius, 5px));
+  border-end-start-radius: var(--rhc-card-as-link-border-end-start-radius, var(--rhc-card-as-link-border-radius, 5px));
+  border-start-end-radius: var(--rhc-card-as-link-border-start-end-radius, var(--rhc-card-as-link-border-radius, 5px));
+  border-start-start-radius: var(
+    --rhc-card-as-link-border-start-start-radius,
+    var(--rhc-card-as-link-border-radius, 5px)
+  );
+}
+
+@mixin rhc-card__empty-element {
+  display: none;
+}