@developer-overheid-nl/don-register-components 1.3.1 → 1.6.2

package/src/pillBadge/styles.module.css

@@ -1,214 +1,214 @@
-:root {
-  --don-pill-badge-font-size: 0.875rem;
-  --don-pill-badge-gap: 0.5rem;
-  --don-pill-badge-border-radius: 5px;
-  --don-pill-badge-padding-inline: 0.5rem;
-  --don-pill-badge-padding-block: 0.25rem;
-  --don-pill-badge-background-color: var(--rhc-color-cool-grey-200);
-  --don-pill-badge-start-color: var(--rhc-color-foreground-on-dark-color);
-  --don-pill-badge-start-background-color: var(--rhc-color-cool-grey-700);
-  --don-pill-badge-end-color: var(--rhc-color-foreground-on-light-color);
-  --don-pill-badge-end-background-color: var(--rhc-color-groen-100);
-  --don-pill-badge-border-color: linear-gradient(
-    to top,
-    rgba(51, 51, 51, 0.25),
-    rgba(204, 204, 204, 0.25)
-  );
-  --don-pill-badge-outline-hover-color: var(--rhc-color-cool-grey-300);
-  --don-pill-badge-border-width: 1px;
-}
-
-.pill-badge-figure {
-  display: contents;
-}
-
-.pill-badge {
-  --percentage: 100%;
-  position: relative;
-  display: inline-block;
-  align-items: center;
-  width: fit-content;
-  height: auto;
-  overflow: clip;
-  font-size: var(--don-pill-badge-font-size);
-  background-color: var(--don-pill-badge-background-color);
-  border-radius: var(--don-pill-badge-border-radius);
-
-  a:any-link:has(&) {
-    text-decoration: none;
-
-    &:hover {
-      outline-width: 2px;
-      outline-style: auto;
-      outline-color: var(--don-pill-badge-outline-hover-color);
-      outline-offset: 0.125rem;
-      border-radius: var(--don-pill-badge-border-radius);
-    }
-
-    &:focus,
-    &:focus-visible {
-      outline-style: auto;
-      outline-offset: 0.125rem;
-      border-radius: var(--don-pill-badge-border-radius);
-    }
-  }
-
-  /* Because Biome CSS parser does not yet support modern attr() some of the following is commented out.
-   * Fixme: remove this workaround when https://github.com/biomejs/biome/issues/6183 is closed and tested */
-
-  /* Browser has modern attr() support */
-  /*
-  @supports (x: attr(x type(*))) {
-    --percentage: attr(data-percentage %, 100%);
-  }
-  */
-
-  /* Browser does not have modern attr() support */
-  /* @supports not (x: attr(x type(*))) { */
-  &[data-percentage^='1'] {
-    --percentage: 10%;
-  }
-  &[data-percentage^='2'] {
-    --percentage: 20%;
-  }
-  &[data-percentage^='3'] {
-    --percentage: 30%;
-  }
-  &[data-percentage^='4'] {
-    --percentage: 40%;
-  }
-  &[data-percentage^='5'] {
-    --percentage: 50%;
-  }
-  &[data-percentage^='6'] {
-    --percentage: 60%;
-  }
-  &[data-percentage^='7'] {
-    --percentage: 70%;
-  }
-  &[data-percentage^='8'] {
-    --percentage: 80%;
-  }
-  &[data-percentage^='9'] {
-    --percentage: 90%;
-  }
-  &[data-percentage='100'] {
-    --percentage: 100%;
-  }
-  &[data-percentage='9'],
-  &[data-percentage='8'],
-  &[data-percentage='7'],
-  &[data-percentage='6'],
-  &[data-percentage='5'],
-  &[data-percentage='4'],
-  &[data-percentage='3'],
-  &[data-percentage='2'],
-  &[data-percentage='1'],
-  &[data-percentage='0'] {
-    --percentage: 0%;
-  }
-  /*}*/
-
-  /* --_don-pill-badge-end-color: attr(data-color type(<color>), var(--don-pill-badge-end-color));*/
-}
-
-.pill-badge::before {
-  position: absolute;
-  inset: 0;
-  content: '';
-  background: var(--don-pill-badge-border-color) border-box;
-  border: var(--don-pill-badge-border-width) solid transparent;
-  border-radius: var(--don-pill-badge-border-radius);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-}
-
-.pill-badge__start {
-  padding-block: var(--don-pill-badge-padding-block);
-  padding-inline: var(--don-pill-badge-padding-inline);
-  padding-inline-end: calc(0.5 * var(--don-pill-badge-gap));
-  color: var(--don-pill-badge-start-color);
-  background-color: var(--don-pill-badge-start-background-color);
-}
-
-.pill-badge__end {
-  padding-block: var(--don-pill-badge-padding-block);
-  padding-inline: var(--don-pill-badge-padding-inline);
-  padding-inline-start: calc(0.5 * var(--don-pill-badge-gap));
-  color: var(--don-pill-badge-end-color);
-  background-color: var(--don-pill-badge-end-background-color);
-}
-
-.pill-badge--type-percentage .pill-badge__end {
-  background: linear-gradient(
-    to right,
-    var(--don-pill-badge-end-background-color) var(--percentage),
-    var(--don-pill-badge-background-color) var(--percentage)
-  );
-}
-
-/* Pre-defined Rijkshuisstijl colors, 
- * AA contrast checked, most are AAA prove, but not all because of font-size 
- */
-[data-color='robijnrood'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-robijnrood-200);
-}
-[data-color='roze'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-roze-300);
-}
-[data-color='rood'] .pill-badge__end {
-  /* Not AAA prove */
-  --don-pill-badge-end-background-color: var(--rhc-color-rood-500);
-  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
-  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
-}
-[data-color='oranje'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-oranje-300);
-}
-[data-color='donkergeel'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-donkergeel-400);
-}
-[data-color='geel'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-geel-400);
-}
-[data-color='donkergroen'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-donkergroen-500);
-  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
-  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
-}
-[data-color='groen'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-groen-300);
-}
-[data-color='mosgroen'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-mosgroen-300);
-}
-[data-color='mintgroen'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-mintgroen-400);
-}
-[data-color='donkerblauw'] .pill-badge__end {
-  /* Not AAA prove */
-  --don-pill-badge-end-background-color: var(--rhc-color-donkerblauw-500);
-  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
-  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
-}
-[data-color='hemelblauw'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-hemelblauw-200);
-}
-[data-color='paars'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-paars-500);
-  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
-  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
-}
-[data-color='violet'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-violet-200);
-}
-[data-color='lichtblauw'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-lichtblauw-300);
-}
-[data-color='coolgrey'] .pill-badge__end,
-[data-color='grijs'] .pill-badge__end,
-[data-color='grey'] .pill-badge__end {
-  --don-pill-badge-end-background-color: var(--rhc-color-cool-grey-300);
-}
+:root {
+  --don-pill-badge-font-size: 0.875rem;
+  --don-pill-badge-gap: 0.5rem;
+  --don-pill-badge-border-radius: 5px;
+  --don-pill-badge-padding-inline: 0.5rem;
+  --don-pill-badge-padding-block: 0.25rem;
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-200);
+  --don-pill-badge-start-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-start-background-color: var(--rhc-color-cool-grey-700);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-light-color);
+  --don-pill-badge-end-background-color: var(--rhc-color-groen-100);
+  --don-pill-badge-border-color: linear-gradient(
+    to top,
+    rgba(51, 51, 51, 0.25),
+    rgba(204, 204, 204, 0.25)
+  );
+  --don-pill-badge-outline-hover-color: var(--rhc-color-cool-grey-300);
+  --don-pill-badge-border-width: 1px;
+}
+
+.pill-badge-figure {
+  display: contents;
+}
+
+.pill-badge {
+  --percentage: 100%;
+  position: relative;
+  display: inline-block;
+  align-items: center;
+  width: fit-content;
+  height: auto;
+  overflow: clip;
+  font-size: var(--don-pill-badge-font-size);
+  background-color: var(--don-pill-badge-background-color);
+  border-radius: var(--don-pill-badge-border-radius);
+
+  a:any-link:has(&) {
+    text-decoration: none;
+
+    &:hover {
+      outline-width: 2px;
+      outline-style: auto;
+      outline-color: var(--don-pill-badge-outline-hover-color);
+      outline-offset: 0.125rem;
+      border-radius: var(--don-pill-badge-border-radius);
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline-style: auto;
+      outline-offset: 0.125rem;
+      border-radius: var(--don-pill-badge-border-radius);
+    }
+  }
+
+  /* Because Biome CSS parser does not yet support modern attr() some of the following is commented out.
+   * Fixme: remove this workaround when https://github.com/biomejs/biome/issues/6183 is closed and tested */
+
+  /* Browser has modern attr() support */
+  /*
+  @supports (x: attr(x type(*))) {
+    --percentage: attr(data-percentage %, 100%);
+  }
+  */
+
+  /* Browser does not have modern attr() support */
+  /* @supports not (x: attr(x type(*))) { */
+  &[data-percentage^='1'] {
+    --percentage: 10%;
+  }
+  &[data-percentage^='2'] {
+    --percentage: 20%;
+  }
+  &[data-percentage^='3'] {
+    --percentage: 30%;
+  }
+  &[data-percentage^='4'] {
+    --percentage: 40%;
+  }
+  &[data-percentage^='5'] {
+    --percentage: 50%;
+  }
+  &[data-percentage^='6'] {
+    --percentage: 60%;
+  }
+  &[data-percentage^='7'] {
+    --percentage: 70%;
+  }
+  &[data-percentage^='8'] {
+    --percentage: 80%;
+  }
+  &[data-percentage^='9'] {
+    --percentage: 90%;
+  }
+  &[data-percentage='100'] {
+    --percentage: 100%;
+  }
+  &[data-percentage='9'],
+  &[data-percentage='8'],
+  &[data-percentage='7'],
+  &[data-percentage='6'],
+  &[data-percentage='5'],
+  &[data-percentage='4'],
+  &[data-percentage='3'],
+  &[data-percentage='2'],
+  &[data-percentage='1'],
+  &[data-percentage='0'] {
+    --percentage: 0%;
+  }
+  /*}*/
+
+  /* --_don-pill-badge-end-color: attr(data-color type(<color>), var(--don-pill-badge-end-color));*/
+}
+
+.pill-badge::before {
+  position: absolute;
+  inset: 0;
+  content: '';
+  background: var(--don-pill-badge-border-color) border-box;
+  border: var(--don-pill-badge-border-width) solid transparent;
+  border-radius: var(--don-pill-badge-border-radius);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+
+.pill-badge__start {
+  padding-block: var(--don-pill-badge-padding-block);
+  padding-inline: var(--don-pill-badge-padding-inline);
+  padding-inline-end: calc(0.5 * var(--don-pill-badge-gap));
+  color: var(--don-pill-badge-start-color);
+  background-color: var(--don-pill-badge-start-background-color);
+}
+
+.pill-badge__end {
+  padding-block: var(--don-pill-badge-padding-block);
+  padding-inline: var(--don-pill-badge-padding-inline);
+  padding-inline-start: calc(0.5 * var(--don-pill-badge-gap));
+  color: var(--don-pill-badge-end-color);
+  background-color: var(--don-pill-badge-end-background-color);
+}
+
+.pill-badge--type-percentage .pill-badge__end {
+  background: linear-gradient(
+    to right,
+    var(--don-pill-badge-end-background-color) var(--percentage),
+    var(--don-pill-badge-background-color) var(--percentage)
+  );
+}
+
+/* Pre-defined Rijkshuisstijl colors, 
+ * AA contrast checked, most are AAA prove, but not all because of font-size 
+ */
+[data-color='robijnrood'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-robijnrood-200);
+}
+[data-color='roze'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-roze-300);
+}
+[data-color='rood'] .pill-badge__end {
+  /* Not AAA prove */
+  --don-pill-badge-end-background-color: var(--rhc-color-rood-500);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
+}
+[data-color='oranje'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-oranje-300);
+}
+[data-color='donkergeel'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-donkergeel-400);
+}
+[data-color='geel'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-geel-400);
+}
+[data-color='donkergroen'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-donkergroen-500);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
+}
+[data-color='groen'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-groen-300);
+}
+[data-color='mosgroen'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-mosgroen-300);
+}
+[data-color='mintgroen'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-mintgroen-400);
+}
+[data-color='donkerblauw'] .pill-badge__end {
+  /* Not AAA prove */
+  --don-pill-badge-end-background-color: var(--rhc-color-donkerblauw-500);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
+}
+[data-color='hemelblauw'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-hemelblauw-200);
+}
+[data-color='paars'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-paars-500);
+  --don-pill-badge-end-color: var(--rhc-color-foreground-on-dark-color);
+  --don-pill-badge-background-color: var(--rhc-color-cool-grey-500);
+}
+[data-color='violet'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-violet-200);
+}
+[data-color='lichtblauw'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-lichtblauw-300);
+}
+[data-color='coolgrey'] .pill-badge__end,
+[data-color='grijs'] .pill-badge__end,
+[data-color='grey'] .pill-badge__end {
+  --don-pill-badge-end-background-color: var(--rhc-color-cool-grey-300);
+}

package/src/readOnlyTextInput/ReadOnlyTextInput.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ReadOnlyTextInput from "./ReadOnlyTextInput";
+
+/**
+ * ReadOnlyTextInput is een altijd-alleen-lezen tekstinvoerveld, bijvoorbeeld
+ * voor het tonen van een ID of code. `fontVariant` kan een monospace of
+ * "slashed zero"-lettertype toepassen om tekens beter te onderscheiden.
+ */
+const meta = {
+  title: "Components/Form/ReadOnlyTextInput",
+  component: ReadOnlyTextInput,
+  tags: ["autodocs", "custom"],
+  argTypes: {
+    fontVariant: {
+      control: "select",
+      options: ["normal", "monospace", "slashed-zero"],
+    },
+  },
+  args: {
+    value: "c7819a6f-3e12-4b1a-9d0e-1f2a3b4c5d6e",
+    fontVariant: "normal",
+  },
+} satisfies Meta<typeof ReadOnlyTextInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Monospace: Story = {
+  args: {
+    fontVariant: "monospace",
+  },
+};
+
+export const SlashedZero: Story = {
+  args: {
+    fontVariant: "slashed-zero",
+    value: "0100200300",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Past `font-variant-numeric: slashed-zero` toe, maar het huidige Rijkshuisstijl-lettertype ondersteunt deze OpenType-variant nog niet, dus is er (nog) geen visueel verschil te zien.",
+      },
+    },
+  },
+};

package/src/readOnlyTextInput/ReadOnlyTextInput.tsx

@@ -1,24 +1,24 @@
-import {
-  TextInput,
-  type TextInputProps,
-} from "@rijkshuisstijl-community/components-react";
-import { clsx } from "clsx";
-import styles from "./styles.module.css";
-
-interface ReadOnlyTextInputProps extends TextInputProps {
-  fontVariant?: "slashed-zero" | "monospace" | "normal";
-}
-
-const ReadOnlyTextInput = (props: ReadOnlyTextInputProps) => {
-  const { className, fontVariant = "normal", ...restProps } = props;
-
-  return (
-    <TextInput
-      readOnly
-      className={clsx(styles.input, styles[fontVariant], className)}
-      {...restProps}
-    />
-  );
-};
-
-export default ReadOnlyTextInput;
+import {
+  TextInput,
+  type TextInputProps,
+} from "@rijkshuisstijl-community/components-react";
+import { clsx } from "clsx";
+import styles from "./styles.module.css";
+
+interface ReadOnlyTextInputProps extends TextInputProps {
+  fontVariant?: "slashed-zero" | "monospace" | "normal";
+}
+
+const ReadOnlyTextInput = (props: ReadOnlyTextInputProps) => {
+  const { className, fontVariant = "normal", ...restProps } = props;
+
+  return (
+    <TextInput
+      readOnly
+      className={clsx(styles.input, styles[fontVariant], className)}
+      {...restProps}
+    />
+  );
+};
+
+export default ReadOnlyTextInput;

package/src/readOnlyTextInput/styles.module.css

@@ -1,19 +1,19 @@
-.input.input {
-  --utrecht-textbox-max-inline-size: none;
-  --utrecht-pointer-target-min-size: 36px;
-  /* field-sizing: content; */
-  inline-size: -webkit-fill-available;
-}
-
-.normal {
-  font-variant: normal;
-}
-
-.input.slashed-zero {
-  /* find a way to use RO font with slashed zero */
-  font-variant-numeric: slashed-zero;
-}
-
-.input.monospace {
-  font-family: monospace;
-}
+.input.input {
+  --utrecht-textbox-max-inline-size: none;
+  --utrecht-pointer-target-min-size: 36px;
+  /* field-sizing: content; */
+  inline-size: -webkit-fill-available;
+}
+
+.normal {
+  font-variant: normal;
+}
+
+.input.slashed-zero {
+  /* find a way to use RO font with slashed zero */
+  font-variant-numeric: slashed-zero;
+}
+
+.input.monospace {
+  font-family: monospace;
+}

package/src/scoreBadge/ScoreBadge.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import ScoreBadge from "./ScoreBadge";
+
+/**
+ * ScoreBadge toont een score als een cirkelvormige meter, optioneel met het
+ * maximum en/of als percentage.
+ *
+ * Verouderd: niet meer in gebruik.
+ */
+const meta = {
+  title: "Components/ScoreBadge",
+  component: ScoreBadge,
+  tags: ["autodocs", "deprecated", "custom"],
+  args: {
+    name: "score",
+    ariaLabelPrefix: "Score: ",
+    score: 7,
+    max: 10,
+  },
+} satisfies Meta<typeof ScoreBadge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithMaxShown: Story = {
+  args: {
+    showMax: true,
+  },
+};
+
+export const Percentage: Story = {
+  args: {
+    score: 82,
+    max: 100,
+    inPercentage: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    score: null,
+  },
+};