Feature/toggletip (#745)

Token changes:
- todo-toggletip-* tokens renamed to rhc-toggletip-*

---------

Co-authored-by: Ruben Smit <[email protected]>

packages/components-css/index.scss

@@ -35,4 +35,5 @@
 @import "table/index";
 @import "textarea/index";
 @import "textbox/index";
+@import "toggletip/index";
 @import "unordered-list/index";

packages/components-css/toggletip/_mixin.scss

@@ -0,0 +1,59 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@mixin rhc-toggletip {
+  background-color: transparent;
+  border-radius: var(--rhc-toggletip-border-radius);
+  display: inline-flex;
+  flex-direction: column;
+  size: var(--rhc-toggletip-size);
+}
+
+@mixin rhc-toggletip__summary {
+  cursor: pointer;
+  display: inline-flex;
+  margin-block-end: var(--rhc-toggletip-gap, 16px);
+  max-inline-size: var(--rhc-toggletip-size);
+  size: var(--rhc-toggletip-size);
+}
+
+@mixin rhc-toggletip__button {
+  background-color: var(--rhc-toggletip-background-color);
+  border-color: var(--rhc-toggletip-border-color);
+  border-radius: var(--rhc-toggletip-border-radius);
+  border-width: var(--rhc-toggletip-border-width);
+  color: var(--rhc-toggletip-color);
+  cursor: pointer;
+  display: inline-flex;
+  max-inline-size: var(--rhc-toggletip-size);
+  padding-block: 0;
+  padding-inline: 0;
+  size: var(--rhc-toggletip-size);
+}
+
+@mixin rhc-toggletip__button--no-pointer-events {
+  pointer-events: none;
+}
+
+@mixin rhc-toggletip__icon {
+  size: var(--rhc-toggletip-icon-size);
+}
+
+@mixin rhc-toggletip--active {
+  background-color: var(--rhc-toggletip-active-background-color);
+  border-color: var(--rhc-toggletip-active-border-color);
+  border-style: solid;
+  color: var(--rhc-toggletip-active-color);
+}
+
+@mixin rhc-toggletip--hover {
+  background-color: var(--rhc-toggletip-hover-background-color);
+  color: var(--rhc-toggletip-hover-color);
+}
+
+@mixin rhc-toggletip--focus {
+  background-color: var(--rhc-toggletip-focus-background-color);
+  color: var(--rhc-toggletip-focus-color);
+}

packages/components-css/toggletip/index.scss

@@ -0,0 +1,48 @@
+/**
+ * @license EUPL-1.2
+ * Copyright (c) 2021 Community for NL Design System
+ */
+
+@import "./mixin";
+
+.rhc-toggletip {
+  @include rhc-toggletip;
+}
+
+.rhc-toggletip__summary {
+  @include rhc-toggletip__summary;
+}
+
+.rhc-toggletip__button {
+  @include rhc-toggletip__button;
+}
+
+.rhc-toggletip__summary .rhc-toggletip__button {
+  // If button is not used standalone the summary should take precedence
+  @include rhc-toggletip__button--no-pointer-events;
+}
+
+.rhc-toggletip__button:focus {
+  @include rhc-toggletip--focus;
+}
+
+.rhc-toggletip__button:hover {
+  @include rhc-toggletip--hover;
+}
+
+.rhc-toggletip__summary:focus .rhc-toggletip__button {
+  @include rhc-toggletip--focus;
+}
+
+.rhc-toggletip__summary:hover .rhc-toggletip__button {
+  @include rhc-toggletip--hover;
+}
+
+.rhc-toggletip:active .rhc-toggletip__button,
+.rhc-toggletip[open] .rhc-toggletip__button {
+  @include rhc-toggletip--active;
+}
+
+.rhc-toggletip__icon {
+  @include rhc-toggletip__icon;
+}

packages/components-react/src/Toggletip.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import { DetailsHTMLAttributes, ForwardedRef, forwardRef, PropsWithChildren, ReactNode } from 'react';
+import { Alert } from './Alert';
+import { Icon } from './icon/Icon';
+
+export interface ToggletipProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
+  className?: string;
+}
+
+export const ToggletipButton = forwardRef(
+  ({ children }: { children?: ReactNode }, ref: ForwardedRef<HTMLButtonElement>) => {
+    return (
+      <button className="rhc-toggletip__button" ref={ref}>
+        <Icon className="rhc-toggletip__icon" icon="info" />
+        {children}
+      </button>
+    );
+  },
+);
+ToggletipButton.displayName = 'ToggletipButton';
+
+export const ToggletipContent = forwardRef(
+  ({ children }: { children: ReactNode }, ref: ForwardedRef<HTMLDivElement>) => {
+    return (
+      <div className="rhc-toggletip__content" ref={ref}>
+        <Alert type="info">{children}</Alert>
+      </div>
+    );
+  },
+);
+ToggletipContent.displayName = 'ToggletipContent';
+
+export const Toggletip = forwardRef(
+  ({ children, className, ...restProps }: PropsWithChildren<ToggletipProps>, ref: ForwardedRef<HTMLDetailsElement>) => {
+    return (
+      <details className={clsx('rhc-toggletip', className)} ref={ref} {...restProps}>
+        <summary className="rhc-toggletip__summary">
+          <ToggletipButton />
+        </summary>
+        <ToggletipContent>{children}</ToggletipContent>
+      </details>
+    );
+  },
+);
+
+Toggletip.displayName = 'Toggletip';

packages/components-react/src/icon/Icon.tsx

@@ -38,6 +38,7 @@ import {
   IconHeart,
   IconHome,
   IconInfoCircle,
+  IconInfoSmall,
   IconInfoSquare,
   IconLink,
   IconLock,
@@ -80,7 +81,6 @@ export const IconenSet: Partial<Record<RijkshuisstijlIconID, ReactNode>> = {
   activiteit: <IconCalendarCheck />,
   'agile-werken': <IconArrowIteration />,
   'alert-circle': <IconAlertCircle />,
-
   'api-inrichting': <IconApi />,
   'arrows-sort': <IconArrowsSort />,
   audio: <IconVolume />,
@@ -107,8 +107,9 @@ export const IconenSet: Partial<Record<RijkshuisstijlIconID, ReactNode>> = {
   'haakse-pijl': <IconCornerLeftUp />,
   hashtag: <IconHash />,
   home: <IconHome />,
-  info: <IconInfoSquare />,
+  info: <IconInfoSmall />,
   'info-circle': <IconInfoCircle />,
+  'info-square': <IconInfoSquare />,
   inloggen: <IconLogin2 />,
   instellingen: <IconSettings />,
   'interne-link': <IconLink />,

packages/components-react/src/icon/IconTypes.ts

@@ -230,6 +230,7 @@ export type RijkshuisstijlIconID =
   | 'home'
   | 'info'
   | 'info-circle'
+  | 'info-square'
   | 'inloggen'
   | 'instellingen'
   | 'interne-link'

packages/components-react/src/index.ts

@@ -95,6 +95,7 @@ export { TableCaption } from './TableCaption';
 export { TableCell, type TableCellProps } from './TableCell';
 export { TableHeaderCell, type TableHeaderCellProps } from './TableHeaderCell';
 export { Textbox, type TextboxProps } from './Textbox';
+export { Toggletip, ToggletipButton, ToggletipContent, type ToggletipProps } from './Toggletip';
 export {
   UnorderedList,
   UnorderedListItem,

packages/storybook/src/community/alert.md

@@ -18,7 +18,7 @@ import { Alert } from '@rijkshuisstijl-community/components-react';
 <Alert
   heading="Heading"
   headingLevel={3}
-  icon="info"
+  icon="info-circle"
   textContent="Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod *"
   type="info"
 />;

packages/storybook/src/community/toggletip.stories.tsx

@@ -0,0 +1,17 @@
+import { Toggletip } from '@rijkshuisstijl-community/components-react';
+import { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Rijkshuisstijl/Toggletip',
+  id: 'rhc-toggletip',
+  component: Toggletip,
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consecteur ad * isicing elit, sed do eiusmod *',
+  },
+} satisfies Meta<typeof Toggletip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

proprietary/design-tokens/figma/figma.tokens.json

@@ -5977,7 +5977,7 @@
     }
   },
   "components/toggletip": {
-    "todo": {
+    "rhc": {
       "toggletip": {
         "color": {
           "value": "{rhc.color.wit}",
@@ -5995,6 +5995,10 @@
           "value": "{rhc.border-radius.md}",
           "type": "borderRadius"
         },
+        "border-width": {
+          "value": "{rhc.border-width.default}",
+          "type": "borderWidth"
+        },
         "icon": {
           "size": {
             "value": "{rhc.size.icon.functional}",
@@ -6038,10 +6042,6 @@
             "value": "{rhc.color.feedback.info.default}",
             "type": "color"
           }
-        },
-        "border-width": {
-          "value": "{rhc.border-width.default}",
-          "type": "borderWidth"
         }
       }
     }