@developer-overheid-nl/don-register-components 1.3.0 → 1.6.1

package/src/toolTip/ToolTip.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+import AlignBox from "../alignBox/AlignBox";
+import Block from "../block/Block";
+import InfoButton from "../infoButton/InfoButton";
+import ToolTip from "./ToolTip";
+
+// const waitForTimeout = (ms: number) =>
+//   new Promise<void>((resolve) => setTimeout(resolve, ms));
+
+/**
+ * ToolTip toont `text` in een popover, gekoppeld aan een trigger-element.
+ *
+ * Zonder `children` wordt automatisch een `InfoButton` gerenderd met de
+ * juiste `command`/`commandfor`/`interestfor`-koppeling; met een eigen
+ * `children`-trigger moet die koppeling zelf worden meegegeven.
+ */
+const meta = {
+  title: "Components/ToolTip",
+  component: ToolTip,
+  tags: ["autodocs", "custom"],
+  args: {
+    text: "Nationale organisatie voor kadaster en vastgoedregistratie.",
+    "aria-label": "Meer informatie over Kadaster",
+  },
+} satisfies Meta<typeof ToolTip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  play: async ({ canvas, args, userEvent }) => {
+    const tooltip = canvas.getByText(args.text);
+    expect(tooltip).not.toBeVisible();
+
+    await userEvent.click(
+      canvas.getByRole("button", { name: args["aria-label"] }),
+    );
+
+    await waitFor(() => expect(tooltip).toBeVisible());
+  },
+};
+
+export const WithCustomTrigger: Story = {
+  name: "Met eigen trigger-element",
+  render: (args) => (
+    <ToolTip {...args} id="tooltip-custom-trigger">
+      {/* With a custom trigger, the popover wiring isn't done automatically
+      and must be set on the trigger element to match the ToolTip's id. */}
+      <InfoButton
+        aria-label={args["aria-label"]}
+        iconSize="large"
+        command="toggle-popover"
+        commandfor="tooltip-custom-trigger"
+        interestfor="tooltip-custom-trigger"
+      />
+    </ToolTip>
+  ),
+  play: async ({ canvas, args, userEvent }) => {
+    const tooltip = canvas.getByText(args.text);
+    expect(tooltip).not.toBeVisible();
+
+    await userEvent.click(
+      canvas.getByRole("button", { name: args["aria-label"] }),
+    );
+
+    await waitFor(() => expect(tooltip).toBeVisible());
+  },
+};
+
+export const CommandForVsInterestFor: Story = {
+  name: "commandfor vs. interestfor",
+  decorators: [
+    (Story) => (
+      <Block layout="flex-row">
+        <Story />
+      </Block>
+    ),
+  ],
+  render: (args) => (
+    <>
+      <AlignBox gap="medium">
+        <p>Klik om te openen (commandfor)</p>
+        <ToolTip text={args.text} id="tooltip-commandfor">
+          <InfoButton
+            aria-label="Meer informatie (klik om te openen)"
+            command="toggle-popover"
+            commandfor="tooltip-commandfor"
+          />
+        </ToolTip>
+      </AlignBox>
+      <AlignBox gap="medium">
+        <p>Hover om te openen (interestfor)</p>
+        {/* interestfor targets a "hint" popover, which opens on hover/focus
+        instead of on click, unlike the "manual" popover used by commandfor. */}
+        <ToolTip text={args.text} id="tooltip-interestfor" popover="hint">
+          <InfoButton
+            aria-label="Meer informatie (hover om te openen)"
+            interestfor="tooltip-interestfor"
+          />
+        </ToolTip>
+      </AlignBox>
+    </>
+  ),
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const clickTooltip = canvasElement.querySelector("#tooltip-commandfor");
+    const hoverTrigger = canvas.getByRole("button", {
+      name: "Meer informatie (hover om te openen)",
+    });
+    expect(clickTooltip).not.toBeVisible();
+
+    await userEvent.click(
+      canvas.getByRole("button", {
+        name: "Meer informatie (klik om te openen)",
+      }),
+    );
+    await waitFor(() => expect(clickTooltip).toBeVisible());
+
+    expect(hoverTrigger).toHaveAttribute("interestfor", "tooltip-interestfor");
+    // await userEvent.hover(hoverTrigger);
+
+    // // Interest Invokers defines a show delay before the interest state
+    // // activates, so give it a moment beyond hover before checking. Even with
+    // // this wait, `:interest-source` never matches in the test browser: the
+    // // browser recognizes the pseudo-class (matches() doesn't throw), but
+    // // actually activating it requires an experimental flag that isn't
+    // // guaranteed to be enabled here, so that part isn't asserted.
+    // await waitForTimeout(1000);
+    // expect(() => hoverTrigger.matches(":interest-source")).not.toThrow();
+  },
+};

package/src/toolTip/ToolTip.tsx

@@ -1,55 +1,55 @@
-import {
-  type ButtonHTMLAttributes,
-  type HTMLAttributes,
-  type HTMLProps,
-  type PropsWithChildren,
-  useId,
-} from "react";
-import Infobutton, { type InfoButtonProps } from "../infoButton/InfoButton";
-import styles from "./styles.module.css";
-
-interface ToolTipProps extends HTMLProps<HTMLButtonElement> {
-  id?: string;
-  className?: string;
-  text: string;
-  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
-  command?: InfoButtonProps["command"];
-  commandfor?: InfoButtonProps["commandfor"];
-  interestfor?: InfoButtonProps["interestfor"];
-  popover?: HTMLAttributes<HTMLDivElement>["popover"];
-}
-
-const ToolTip = (props: PropsWithChildren<ToolTipProps>) => {
-  const genId: string = useId();
-  const {
-    id = genId,
-    className,
-    text,
-    command = "toggle-popover",
-    commandfor = genId,
-    interestfor = genId,
-    popover = "manual",
-    children,
-    ...restProps
-  } = props;
-
-  return (
-    <>
-      {children ? (
-        children
-      ) : (
-        <Infobutton
-          interestfor={interestfor}
-          commandfor={commandfor}
-          command={command}
-          {...restProps}
-        />
-      )}
-      <div className={styles.toolTip} id={id} popover={popover} role="tooltip">
-        {text}
-      </div>
-    </>
-  );
-};
-
-export default ToolTip;
+import {
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type HTMLProps,
+  type PropsWithChildren,
+  useId,
+} from "react";
+import Infobutton, { type InfoButtonProps } from "../infoButton/InfoButton";
+import styles from "./styles.module.css";
+
+export interface ToolTipProps extends HTMLProps<HTMLButtonElement> {
+  id?: string;
+  className?: string;
+  text: string;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>["type"];
+  command?: InfoButtonProps["command"];
+  commandfor?: InfoButtonProps["commandfor"];
+  interestfor?: InfoButtonProps["interestfor"];
+  popover?: HTMLAttributes<HTMLDivElement>["popover"];
+}
+
+const ToolTip = (props: PropsWithChildren<ToolTipProps>) => {
+  const genId: string = useId();
+  const {
+    id = genId,
+    className,
+    text,
+    command = "toggle-popover",
+    commandfor = genId,
+    interestfor = genId,
+    popover = "manual",
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <>
+      {children ? (
+        children
+      ) : (
+        <Infobutton
+          interestfor={interestfor}
+          commandfor={commandfor}
+          command={command}
+          {...restProps}
+        />
+      )}
+      <div className={styles.toolTip} id={id} popover={popover} role="tooltip">
+        {text}
+      </div>
+    </>
+  );
+};
+
+export default ToolTip;

package/src/toolTip/styles.module.css

@@ -1,49 +1,49 @@
-:root {
-  --don-tooltip-border-color: var(--rhc-color-cool-grey-300);
-  --don-tooltip-background-color: var(--rhc-color-cool-grey-50);
-  --don-tooltip-border-radius: var(--rhc-border-radius-md);
-  --don-tooltip-font-size: 0.875rem;
-  --don-tooltip-font-weigth: normal;
-}
-
-.triggerButton {
-  appearance: none;
-  cursor: pointer;
-  background: none;
-  border: none;
-}
-
-.toolTip {
-  position-area: block-end span-all;
-  border: var(--don-tooltip-border-width, 1px) solid
-    var(--don-tooltip-border-color, #cbd5e1);
-  border-radius: var(--don-tooltip-border-radius, 5px);
-  background-color: var(--don-tooltip-background-color, #f8fafc);
-  box-shadow: 0 0 1px 2px rgb(127, 127, 127, 0.05);
-  font-size: var(--don-tooltip-font-size, inherit);
-  font-weight: var(--don-tooltip-font-weigth, normal);
-  padding-block: var(--don-tooltip-padding-block, 0.5rem);
-  padding-inline: var(
-    --don-tooltip-padding-inline,
-    var(--don-tooltip-padding-block, 0.5rem)
-  );
-
-  /* needed for triangle */
-  margin: 5px;
-  overflow: visible;
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    position-area: top;
-    top: -5px;
-    left: calc(50% - 5px);
-    width: 0;
-    height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-
-    border-bottom: 5px solid var(--don-tooltip-border-color, #cbd5e1);
-  }
-}
+:root {
+  --don-tooltip-border-color: var(--rhc-color-cool-grey-300);
+  --don-tooltip-background-color: var(--rhc-color-cool-grey-50);
+  --don-tooltip-border-radius: var(--rhc-border-radius-md);
+  --don-tooltip-font-size: 0.875rem;
+  --don-tooltip-font-weigth: normal;
+}
+
+.triggerButton {
+  appearance: none;
+  cursor: pointer;
+  background: none;
+  border: none;
+}
+
+.toolTip {
+  position-area: block-end span-all;
+  border: var(--don-tooltip-border-width, 1px) solid
+    var(--don-tooltip-border-color, #cbd5e1);
+  border-radius: var(--don-tooltip-border-radius, 5px);
+  background-color: var(--don-tooltip-background-color, #f8fafc);
+  box-shadow: 0 0 1px 2px rgb(127, 127, 127, 0.05);
+  font-size: var(--don-tooltip-font-size, inherit);
+  font-weight: var(--don-tooltip-font-weigth, normal);
+  padding-block: var(--don-tooltip-padding-block, 0.5rem);
+  padding-inline: var(
+    --don-tooltip-padding-inline,
+    var(--don-tooltip-padding-block, 0.5rem)
+  );
+
+  /* needed for triangle */
+  margin: 5px;
+  overflow: visible;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    position-area: top;
+    top: -5px;
+    left: calc(50% - 5px);
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+
+    border-bottom: 5px solid var(--don-tooltip-border-color, #cbd5e1);
+  }
+}

package/src/topNavigation/TopNavigation.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import TopNavigation from "./TopNavigation";
+
+const items = [
+  { id: "home", label: "Home", href: "https://developer.overheid.nl" },
+  {
+    id: "kennisbank",
+    label: "Kennisbank",
+    href: "https://developer.overheid.nl/kennisbank",
+  },
+  { id: "apis", label: "API's", href: "/apis", current: true },
+  {
+    id: "oss",
+    label: "Repositories",
+    href: "https://oss.developer.overheid.nl",
+  },
+  {
+    id: "communities",
+    label: "Communities",
+    href: "https://developer.overheid.nl/communities",
+  },
+  { id: "blog", label: "Blog", href: "https://developer.overheid.nl/blog" },
+];
+
+const endItems = [
+  {
+    id: "opendata",
+    label: "Open Data",
+    href: "https://data.overheid.nl",
+    icon: "_external",
+  },
+  {
+    id: "geodata",
+    label: "Geodata",
+    href: "https://www.pdok.nl",
+    icon: "_external",
+  },
+  {
+    id: "github",
+    label: "GitHub",
+    href: "https://github.com/developer-overheid-nl/don-register-site",
+    icon: "_external",
+  },
+];
+
+/**
+ * TopNavigation toont de hoofdnavigatie (`items`) en optioneel een tweede
+ * groep aan het einde (`endItems`). Het huidige item wordt vetgedrukt
+ * getoond, en `icon` accepteert een korte sleutel (`_add`, `_external`) die
+ * automatisch naar het juiste icoon wordt omgezet.
+ */
+const meta = {
+  title: "Components/TopNavigation",
+  component: TopNavigation,
+  tags: ["autodocs", "custom"],
+  args: {
+    items,
+    endItems,
+  },
+} satisfies Meta<typeof TopNavigation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithoutEndItems: Story = {
+  args: {
+    endItems: undefined,
+  },
+};

package/src/topNavigation/TopNavigation.tsx

@@ -1,67 +1,67 @@
-import {
-  type IconProps,
-  NavBar,
-  type NavBarItemProps,
-} from "@rijkshuisstijl-community/components-react";
-import type { ReactElement } from "react";
-import Icon from "../iconsSprite/Icon";
-import styles from "./styles.module.css";
-
-export interface NavBarItem {
-  id: string;
-  label: string;
-  href: string;
-  current?: boolean;
-  icon?: string | ReactElement<IconProps>;
-}
-
-export interface TopNavigationProps {
-  items: Array<NavBarItem>;
-  endItems?: Array<NavBarItem>;
-}
-
-const processIcon = (
-  icon: NavBarItem["icon"],
-): ReactElement<IconProps> | undefined => {
-  if (typeof icon === "string") {
-    switch (icon) {
-      case "_add":
-        return <Icon name="plus-cirkel-inline" />;
-      case "_external":
-        return (
-          <Icon name="externe-link-inline" aria-label={`Externe link naar`} />
-        );
-    }
-  } else {
-    return icon;
-  }
-};
-
-export const processNavBarItems = (
-  items: Array<NavBarItem>,
-): NavBarItemProps[] => {
-  return items.map((item) => {
-    const { current, ...rest } = item;
-
-    return {
-      ...rest,
-      bold: current,
-      icon: processIcon(item.icon),
-    };
-  });
-};
-
-export default function TopNavigation({ items, endItems }: TopNavigationProps) {
-  const processedItems = processNavBarItems(items);
-  const processedEndItems = endItems && processNavBarItems(endItems);
-
-  return (
-    <div className={styles.container}>
-      <NavBar
-        items={processedItems}
-        endItems={processedEndItems}
-        className={styles.navbar}
-      />
-    </div>
-  );
-}
+import {
+  type IconProps,
+  NavBar,
+  type NavBarItemProps,
+} from "@rijkshuisstijl-community/components-react";
+import type { ReactElement } from "react";
+import Icon from "../iconsSprite/Icon";
+import styles from "./styles.module.css";
+
+export interface NavBarItem {
+  id: string;
+  label: string;
+  href: string;
+  current?: boolean;
+  icon?: string | ReactElement<IconProps>;
+}
+
+export interface TopNavigationProps {
+  items: Array<NavBarItem>;
+  endItems?: Array<NavBarItem>;
+}
+
+const processIcon = (
+  icon: NavBarItem["icon"],
+): ReactElement<IconProps> | undefined => {
+  if (typeof icon === "string") {
+    switch (icon) {
+      case "_add":
+        return <Icon name="plus-cirkel-inline" />;
+      case "_external":
+        return (
+          <Icon name="externe-link-inline" aria-label={`Externe link naar`} />
+        );
+    }
+  } else {
+    return icon;
+  }
+};
+
+export const processNavBarItems = (
+  items: Array<NavBarItem>,
+): NavBarItemProps[] => {
+  return items.map((item) => {
+    const { current, ...rest } = item;
+
+    return {
+      ...rest,
+      bold: current,
+      icon: processIcon(item.icon),
+    };
+  });
+};
+
+export default function TopNavigation({ items, endItems }: TopNavigationProps) {
+  const processedItems = processNavBarItems(items);
+  const processedEndItems = endItems && processNavBarItems(endItems);
+
+  return (
+    <div className={styles.container}>
+      <NavBar
+        items={processedItems}
+        endItems={processedEndItems}
+        className={styles.navbar}
+      />
+    </div>
+  );
+}

package/src/topNavigation/styles.module.css

@@ -1,54 +1,54 @@
-.container {
-  /* border-block-end: 1px solid var(--rhc-nav-bar-border-color); */
-  margin-block-end: 1rem;
-}
-
-.navbar {
-  :global(.rhc-nav-bar__link) {
-    align-items: center;
-    :global(.don-icon-externe-link-inline) {
-      order: 1;
-    }
-  }
-}
-
-@media (--md-and-below-viewport) {
-  .navbar {
-    flex-wrap: wrap;
-  }
-}
-
-/* TODO: hamburger menu ? */
-@media (--xs-and-below-viewport) {
-  .navbar.navbar {
-    flex-direction: column;
-    align-items: stretch;
-
-    :global(.rhc-nav-bar__list) {
-      justify-content: center;
-      border-block-end: 1px solid var(--rhc-nav-bar-border-color);
-    }
-
-    :global(.rhc-nav-bar__list--end) {
-      margin-inline-start: revert;
-      border-block-end: revert;
-    }
-  }
-}
-
-@media (--xxs-and-below-viewport) {
-  .navbar {
-    font-size: 0.875rem;
-  }
-}
-
-@media (--xxxs-viewport) {
-  .navbar {
-    font-size: 0.75rem;
-  }
-}
-
-/* modifier style wasn't implemented in RHC */
-:global(.rhc-nav-bar__link--bold) {
-  font-weight: bold;
-}
+.container {
+  /* border-block-end: 1px solid var(--rhc-nav-bar-border-color); */
+  margin-block-end: 1rem;
+}
+
+.navbar {
+  :global(.rhc-nav-bar__link) {
+    align-items: center;
+    :global(.don-icon-externe-link-inline) {
+      order: 1;
+    }
+  }
+}
+
+@media (--md-and-below-viewport) {
+  .navbar {
+    flex-wrap: wrap;
+  }
+}
+
+/* TODO: hamburger menu ? */
+@media (--xs-and-below-viewport) {
+  .navbar.navbar {
+    flex-direction: column;
+    align-items: stretch;
+
+    :global(.rhc-nav-bar__list) {
+      justify-content: center;
+      border-block-end: 1px solid var(--rhc-nav-bar-border-color);
+    }
+
+    :global(.rhc-nav-bar__list--end) {
+      margin-inline-start: revert;
+      border-block-end: revert;
+    }
+  }
+}
+
+@media (--xxs-and-below-viewport) {
+  .navbar {
+    font-size: 0.875rem;
+  }
+}
+
+@media (--xxxs-viewport) {
+  .navbar {
+    font-size: 0.75rem;
+  }
+}
+
+/* modifier style wasn't implemented in RHC */
+:global(.rhc-nav-bar__link--bold) {
+  font-weight: bold;
+}