@conduction/components 2.2.2 → 2.2.4

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.4: Refactor the Tooltip component to include react-tooltip version 5+.
+  - 2.2.3: Added Tabs component.
   - 2.2.2:
     - Removed Den Haag Textfield dependencies.
     - Removed Den Haag SideNav dependencies.

package/lib/components/formFields/createKeyValue/CreateKeyValue.js

@@ -3,7 +3,6 @@ import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Controller } from "react-hook-form";
 import { Table, TableBody, TableCell, TableHeaderCell, TableHeader, TableRow, Textbox, Button, } from "@utrecht/component-library-react/dist/css-module";
-import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
@@ -37,5 +36,5 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, })
     React.useEffect(() => {
         handleChange(keyValues);
     }, [keyValues]);
-    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHeader, { className: styles.tableHeader, children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Key" }), _jsx(TableHeaderCell, { children: "Value" }), _jsx(TableHeaderCell, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), appearance: currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx(Textbox, { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx(Textbox, { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
+    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHeader, { className: styles.tableHeader, children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, { children: "Key" }), _jsx(TableHeaderCell, { children: "Value" }), _jsx(TableHeaderCell, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), appearance: currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button", children: _jsx(FontAwesomeIcon, { icon: faCopy }) })), _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx(Textbox, { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx(Textbox, { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
 };

package/lib/components/tabs/Tabs.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface testProps {
+    tabs: ITabProps[];
+    tabContent: ITabPanelProps[];
+}
+interface ITabProps {
+    name: string;
+    badge?: string;
+}
+interface ITabPanelProps {
+    content: JSX.Element;
+}
+export declare const TabContext: React.FC<testProps>;
+export {};

package/lib/components/tabs/Tabs.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./Tabs.module.css";
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import { BadgeCounter } from "@utrecht/component-library-react";
+export const TabContext = ({ tabs, tabContent }) => {
+    return (_jsxs(Tabs, { className: styles.tabs, children: [_jsx(TabList, { className: styles.tabList, children: tabs.map(({ name, badge }) => (_jsx(Tab, { className: styles.tab, children: _jsxs("span", { children: [name, badge !== undefined && _jsx(BadgeCounter, { className: styles.badge, children: badge })] }) }))) }), tabContent.map(({ content }) => (_jsx(TabPanel, { className: styles.tabPanel, children: content })))] }));
+};

package/lib/components/tabs/Tabs.module.css

@@ -0,0 +1,102 @@
+:root {
+  --conduction-tab-list-padding-inline-start: 0px;
+  --conduction-tab-list-border-bottom-width: var(--skeleton-size-3xs);
+  --conduction-tab-list-border-bottom-style: solid;
+  --conduction-tab-list-border-bottom-color: #d1d1d1;
+
+  --conduction-tab-padding-block-start: var(--skeleton-size-xs);
+  --conduction-tab-padding-block-end: var(--skeleton-size-xs);
+  --conduction-tab-padding-inline-start: var(--skeleton-size-sm);
+  --conduction-tab-padding-inline-end: var(--skeleton-size-sm);
+  --conduction-tab-font-size: var(--skeleton-font-size-sm: );
+  --conduction-tab-font-weight: var(--skeleton-font-weight-normal);
+  --conduction-tab-font-family: "Noto Sans", Arial, sans-serif;
+  --conduction-tab-max-width: unset;
+  --conduction-tab-min-width: 160px;
+  --conduction-tab-min-height: 61px;
+  /* --conduction-tab-letter-spacing: 0.02857em; */
+  /* --conduction-tab-text-transform: uppercase; */
+  --conduction-tab-color: #4a4a4a;
+
+  --conduction-tab-selected-color: #4a4a4a;
+  --conduction-tab-selected-border-bottom-width: var(--skeleton-size-3xs);
+  --conduction-tab-selected-border-bottom-style: solid;
+  --conduction-tab-selected-border-bottom-color: #4376fc;
+  --conduction-tab-selected-font-weight: var(--skeleton-font-weight-bold);
+
+  --conduction-tab-panel-padding-block-start: var(--skeleton-size-lg);
+  --conduction-tab-panel-padding-block-end: var(--skeleton-size-lg);
+  --conduction-tab-panel-padding-inline-start: var(--skeleton-size-lg);
+  --conduction-tab-panel-padding-inline-end: var(--skeleton-size-lg);
+
+  --conduction-tab-badge-margin-inline-start: var(--skeleton-size-xs);
+}
+
+.tabList {
+  padding-inline-start: var(--conduction-tab-list-padding-inline-start);
+  border-bottom-width: var(--conduction-tab-list-border-bottom-width);
+  border-bottom-style: var(--conduction-tab-list-border-bottom-style);
+  border-bottom-color: var(--conduction-tab-list-border-bottom-color);
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  text-align: center;
+  white-space: normal;
+  bottom: -2px;
+
+  color: var(--conduction-tab-color);
+  padding-block-start: var(--conduction-tab-padding-block-start);
+  padding-block-end: var(--conduction-tab-padding-block-end);
+  padding-inline-start: var(--conduction-tab-padding-inline-start);
+  padding-inline-end: var(--conduction-tab-padding-inline-end);
+  font-size: var(--conduction-tab-font-size);
+  font-weight: var(--conduction-tab-font-weight);
+  font-family: var(--conduction-tab-font-family);
+  max-width: var(--conduction-tab-max-width);
+  min-width: var(--conduction-tab-min-width);
+  min-height: var(--conduction-tab-min-height);
+  letter-spacing: var(--conduction-tab-letter-spacing);
+  text-transform: var(--conduction-tab-text-transform);
+
+  border-bottom-width: var(--conduction-tab-list-border-bottom-width);
+  border-bottom-style: var(--conduction-tab-list-border-bottom-style);
+  border-bottom-color: var(--conduction-tab-list-border-bottom-color);
+}
+
+.tab[aria-selected="true"] {
+  color: var(--conduction-tab-selected-color);
+  border-bottom-width: var(--conduction-tab-selected-border-bottom-width);
+  border-bottom-style: var(--conduction-tab-selected-border-bottom-style);
+  border-bottom-color: var(--conduction-tab-selected-border-bottom-color);
+  font-weight: var(--conduction-tab-selected-font-weight);
+}
+
+.tabs [class*="react-tabs__tab-panel--selected"] {
+  padding-block-start: var(--conduction-tab-panel-padding-block-start);
+  padding-block-end: var(--conduction-tab-panel-padding-block-end);
+  padding-inline-start: var(--conduction-tab-panel-padding-inline-start);
+  padding-inline-end: var(--conduction-tab-panel-padding-inline-end);
+}
+
+.badge {
+  margin-inline-start: var(--conduction-tab-badge-margin-inline-start);
+  background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, #000));
+  border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
+  color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, #fff));
+  display: inline-block;
+  font-family: var(--utrecht-document-font-family, sans-serif);
+  font-style: var(--utrecht-badge-counter-font-style, normal);
+  font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
+  padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
+  padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
+  padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
+  padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
+  text-decoration: none;
+}

package/lib/components/temp/Temp.d.ts

@@ -0,0 +1,5 @@
+import { ReactTabsFunctionComponent, TabProps, TabPanelProps, TabListProps, TabsProps } from "react-tabs";
+export declare const Tabs: ReactTabsFunctionComponent<TabsProps>;
+export declare const TabList: ReactTabsFunctionComponent<TabListProps>;
+export declare const Tab: ReactTabsFunctionComponent<TabProps>;
+export declare const TabPanel: ReactTabsFunctionComponent<TabPanelProps>;

package/lib/components/temp/Temp.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tabs as RTabs, TabList as RTabList, Tab as RTab, TabPanel as RTabPanel, } from "react-tabs";
+// Tabs
+export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { ...otherProps, children: _jsx("h1", { children: children }) }));
+Tabs.tabsRole = "Tabs";
+// TabList
+export const TabList = ({ children, ...otherProps }) => (_jsx(RTabList, { ...otherProps, children: children }));
+TabList.tabsRole = "TabList";
+// Tab
+export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { ...otherProps, children: children }));
+Tab.tabsRole = "Tab";
+// TabPanel
+export const TabPanel = ({ children, ...otherProps }) => (_jsx(RTabPanel, { ...otherProps, children: children }));
+TabPanel.tabsRole = "TabPanel";

package/lib/components/toolTip/ToolTip.d.ts

@@ -1,9 +1,13 @@
 import * as React from "react";
-import ReactTooltip from "react-tooltip";
 interface ToolTipProps {
-    children: React.ReactNode;
-    tooltip: string;
-    layoutClassName?: string;
+    id: string;
 }
-export declare const ToolTip: ({ children, layoutClassName, tooltip }: React.PropsWithChildren<ToolTipProps>) => JSX.Element;
-export { ReactTooltip };
+/**
+ * Implement this ToolTip only once, in a high-level wrapper.
+ * Use the ToolTip anywhere, in any element, by setting the following data props:
+ *
+ * data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
+ * data-tooltip-content="Hello world!"
+ */
+export declare const ToolTip: React.FC<ToolTipProps>;
+export {};

package/lib/components/toolTip/ToolTip.js

@@ -1,8 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import ReactTooltip from "react-tooltip";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as styles from "./ToolTip.module.css";
-export const ToolTip = ({ children, layoutClassName, tooltip }) => {
-    return (_jsxs("div", { className: clsx(styles.wrapper, layoutClassName && layoutClassName), children: [_jsx("div", { "data-tip": tooltip, children: children }), _jsx(ReactTooltip, { place: "top", type: "dark", effect: "solid", className: styles.tooltip })] }));
+import { Tooltip } from "react-tooltip";
+/**
+ * Implement this ToolTip only once, in a high-level wrapper.
+ * Use the ToolTip anywhere, in any element, by setting the following data props:
+ *
+ * data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
+ * data-tooltip-content="Hello world!"
+ */
+export const ToolTip = ({ id }) => {
+    return _jsx(Tooltip, { className: styles.tooltip, ...{ id } });
 };
-export { ReactTooltip };

package/lib/components/toolTip/ToolTip.module.css

@@ -1,17 +1,33 @@
 :root {
-  --conduction-tooltip-max-width: 500px;
-}
+  --conduction-tooltip-padding-inline-start: 0px;
+  --conduction-tooltip-padding-inline-end: 0px;
+  --conduction-tooltip-padding-block-start: 0px;
+  --conduction-tooltip-padding-block-end: 0px;
+
+  --conduction-tooltip-background-color: var(--skeleton-color-black);
+  --conduction-tooltip-color: var(--skeleton-color-white);
+
+  --conduction-tooltip-border-width: 0px;
+  --conduction-tooltip-border-color: unset;
+  --conduction-tooltip-border-style: unset;
+  --conduction-tooltip-border-radius: 0px;
 
-.wrapper {
-  display: inline-block;
-  position: relative;
+  --conduction-tooltip-opacity: 1;
 }
 
 .tooltip {
-  max-width: var(--conduction-tooltip-max-width);
-  word-break: break-word;
-}
+  padding-inline-start: var(--conduction-tooltip-padding-inline-start);
+  padding-inline-end: var(--conduction-tooltip-padding-inline-end);
+  padding-block-start: var(--conduction-tooltip-padding-block-start);
+  padding-block-end: var(--conduction-tooltip-padding-block-end);
+
+  background-color: var(--conduction-tooltip-background-color) !important;
+  color: var(--conduction-tooltip-color) !important;
+
+  border-width: var(--conductino-tooltip-border-width);
+  border-color: var(--conduction-tooltip-border-color);
+  border-style: var(--conduction-tooltip-border-style);
+  border-radius: var(--conduction-tooltip-border-radius) !important;
 
-.tooltip::before {
-  all: unset !important;
+  opacity: var(--conduction-tooltip-opacity);
 }

package/lib/index.d.ts

@@ -22,4 +22,5 @@ import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };
+import { TabContext } from "./components/tabs/Tabs";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, TabContext, };

package/lib/index.js

@@ -15,4 +15,5 @@ import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };
+import { TabContext } from "./components/tabs/Tabs";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, TabContext, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
@@ -31,7 +31,8 @@
     "react-hook-form": "7.29.0",
     "react-paginate": "^8.2.0",
     "react-select": "5.3.2",
-    "react-tooltip": "^4.2.21"
+    "react-tabs": "^6.0.2",
+    "react-tooltip": "^5.21.3"
   },
   "devDependencies": {
     "@types/node": "^17.0.23",

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -12,7 +12,6 @@ import {
   Textbox,
   Button,
 } from "@utrecht/component-library-react/dist/css-module";
-import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
@@ -133,25 +132,21 @@ const KeyValueComponent = ({
                 <TableCell>
                   <div className={styles.buttonsContainer}>
                     {copyValue && (
-                      <ToolTip tooltip="Copy value">
-                        <Button
-                          {...{ disabled }}
-                          onClick={() => handleCopyToClipboard(keyValue.value, idx)}
-                          appearance={currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button"}
-                        >
-                          <FontAwesomeIcon icon={faCopy} />
-                        </Button>
-                      </ToolTip>
-                    )}
-                    <ToolTip tooltip="Delete value">
                       <Button
                         {...{ disabled }}
-                        onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}
-                        className={clsx(styles.deleteButton)}
+                        onClick={() => handleCopyToClipboard(keyValue.value, idx)}
+                        appearance={currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button"}
                       >
-                        <FontAwesomeIcon icon={faTrash} />
+                        <FontAwesomeIcon icon={faCopy} />
                       </Button>
-                    </ToolTip>
+                    )}
+                    <Button
+                      {...{ disabled }}
+                      onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}
+                      className={clsx(styles.deleteButton)}
+                    >
+                      <FontAwesomeIcon icon={faTrash} />
+                    </Button>
                   </div>
                 </TableCell>
               </TableRow>

package/src/components/tabs/Tabs.module.css

@@ -0,0 +1,102 @@
+:root {
+  --conduction-tab-list-padding-inline-start: 0px;
+  --conduction-tab-list-border-bottom-width: var(--skeleton-size-3xs);
+  --conduction-tab-list-border-bottom-style: solid;
+  --conduction-tab-list-border-bottom-color: #d1d1d1;
+
+  --conduction-tab-padding-block-start: var(--skeleton-size-xs);
+  --conduction-tab-padding-block-end: var(--skeleton-size-xs);
+  --conduction-tab-padding-inline-start: var(--skeleton-size-sm);
+  --conduction-tab-padding-inline-end: var(--skeleton-size-sm);
+  --conduction-tab-font-size: var(--skeleton-font-size-sm: );
+  --conduction-tab-font-weight: var(--skeleton-font-weight-normal);
+  --conduction-tab-font-family: "Noto Sans", Arial, sans-serif;
+  --conduction-tab-max-width: unset;
+  --conduction-tab-min-width: 160px;
+  --conduction-tab-min-height: 61px;
+  /* --conduction-tab-letter-spacing: 0.02857em; */
+  /* --conduction-tab-text-transform: uppercase; */
+  --conduction-tab-color: #4a4a4a;
+
+  --conduction-tab-selected-color: #4a4a4a;
+  --conduction-tab-selected-border-bottom-width: var(--skeleton-size-3xs);
+  --conduction-tab-selected-border-bottom-style: solid;
+  --conduction-tab-selected-border-bottom-color: #4376fc;
+  --conduction-tab-selected-font-weight: var(--skeleton-font-weight-bold);
+
+  --conduction-tab-panel-padding-block-start: var(--skeleton-size-lg);
+  --conduction-tab-panel-padding-block-end: var(--skeleton-size-lg);
+  --conduction-tab-panel-padding-inline-start: var(--skeleton-size-lg);
+  --conduction-tab-panel-padding-inline-end: var(--skeleton-size-lg);
+
+  --conduction-tab-badge-margin-inline-start: var(--skeleton-size-xs);
+}
+
+.tabList {
+  padding-inline-start: var(--conduction-tab-list-padding-inline-start);
+  border-bottom-width: var(--conduction-tab-list-border-bottom-width);
+  border-bottom-style: var(--conduction-tab-list-border-bottom-style);
+  border-bottom-color: var(--conduction-tab-list-border-bottom-color);
+}
+
+.tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  text-align: center;
+  white-space: normal;
+  bottom: -2px;
+
+  color: var(--conduction-tab-color);
+  padding-block-start: var(--conduction-tab-padding-block-start);
+  padding-block-end: var(--conduction-tab-padding-block-end);
+  padding-inline-start: var(--conduction-tab-padding-inline-start);
+  padding-inline-end: var(--conduction-tab-padding-inline-end);
+  font-size: var(--conduction-tab-font-size);
+  font-weight: var(--conduction-tab-font-weight);
+  font-family: var(--conduction-tab-font-family);
+  max-width: var(--conduction-tab-max-width);
+  min-width: var(--conduction-tab-min-width);
+  min-height: var(--conduction-tab-min-height);
+  letter-spacing: var(--conduction-tab-letter-spacing);
+  text-transform: var(--conduction-tab-text-transform);
+
+  border-bottom-width: var(--conduction-tab-list-border-bottom-width);
+  border-bottom-style: var(--conduction-tab-list-border-bottom-style);
+  border-bottom-color: var(--conduction-tab-list-border-bottom-color);
+}
+
+.tab[aria-selected="true"] {
+  color: var(--conduction-tab-selected-color);
+  border-bottom-width: var(--conduction-tab-selected-border-bottom-width);
+  border-bottom-style: var(--conduction-tab-selected-border-bottom-style);
+  border-bottom-color: var(--conduction-tab-selected-border-bottom-color);
+  font-weight: var(--conduction-tab-selected-font-weight);
+}
+
+.tabs [class*="react-tabs__tab-panel--selected"] {
+  padding-block-start: var(--conduction-tab-panel-padding-block-start);
+  padding-block-end: var(--conduction-tab-panel-padding-block-end);
+  padding-inline-start: var(--conduction-tab-panel-padding-inline-start);
+  padding-inline-end: var(--conduction-tab-panel-padding-inline-end);
+}
+
+.badge {
+  margin-inline-start: var(--conduction-tab-badge-margin-inline-start);
+  background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, #000));
+  border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
+  color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, #fff));
+  display: inline-block;
+  font-family: var(--utrecht-document-font-family, sans-serif);
+  font-style: var(--utrecht-badge-counter-font-style, normal);
+  font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
+  padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
+  padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
+  padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
+  padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
+  text-decoration: none;
+}

package/src/components/tabs/Tabs.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import * as styles from "./Tabs.module.css";
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import { BadgeCounter } from "@utrecht/component-library-react";
+
+interface testProps {
+  tabs: ITabProps[];
+  tabContent: ITabPanelProps[];
+}
+
+interface ITabProps {
+  name: string;
+  badge?: string;
+}
+interface ITabPanelProps {
+  content: JSX.Element;
+}
+
+export const TabContext: React.FC<testProps> = ({ tabs, tabContent }) => {
+  return (
+    <Tabs className={styles.tabs}>
+      <TabList className={styles.tabList}>
+        {tabs.map(({ name, badge }) => (
+          <Tab className={styles.tab}>
+            <span>
+              {name}
+              {badge !== undefined && <BadgeCounter className={styles.badge}>{badge}</BadgeCounter>}
+            </span>
+          </Tab>
+        ))}
+      </TabList>
+      {tabContent.map(({ content }) => (
+        <TabPanel className={styles.tabPanel}>{content}</TabPanel>
+      ))}
+    </Tabs>
+  );
+};

package/src/components/toolTip/ToolTip.module.css

@@ -1,17 +1,33 @@
 :root {
-  --conduction-tooltip-max-width: 500px;
-}
+  --conduction-tooltip-padding-inline-start: 0px;
+  --conduction-tooltip-padding-inline-end: 0px;
+  --conduction-tooltip-padding-block-start: 0px;
+  --conduction-tooltip-padding-block-end: 0px;
+
+  --conduction-tooltip-background-color: var(--skeleton-color-black);
+  --conduction-tooltip-color: var(--skeleton-color-white);
+
+  --conduction-tooltip-border-width: 0px;
+  --conduction-tooltip-border-color: unset;
+  --conduction-tooltip-border-style: unset;
+  --conduction-tooltip-border-radius: 0px;
 
-.wrapper {
-  display: inline-block;
-  position: relative;
+  --conduction-tooltip-opacity: 1;
 }
 
 .tooltip {
-  max-width: var(--conduction-tooltip-max-width);
-  word-break: break-word;
-}
+  padding-inline-start: var(--conduction-tooltip-padding-inline-start);
+  padding-inline-end: var(--conduction-tooltip-padding-inline-end);
+  padding-block-start: var(--conduction-tooltip-padding-block-start);
+  padding-block-end: var(--conduction-tooltip-padding-block-end);
+
+  background-color: var(--conduction-tooltip-background-color) !important;
+  color: var(--conduction-tooltip-color) !important;
+
+  border-width: var(--conductino-tooltip-border-width);
+  border-color: var(--conduction-tooltip-border-color);
+  border-style: var(--conduction-tooltip-border-style);
+  border-radius: var(--conduction-tooltip-border-radius) !important;
 
-.tooltip::before {
-  all: unset !important;
+  opacity: var(--conduction-tooltip-opacity);
 }

package/src/components/toolTip/ToolTip.tsx

@@ -1,23 +1,19 @@
-import clsx from "clsx";
-import _ from "lodash";
 import * as React from "react";
-import ReactTooltip from "react-tooltip";
 import * as styles from "./ToolTip.module.css";
+import { Tooltip } from "react-tooltip";
 
 interface ToolTipProps {
-  children: React.ReactNode;
-  tooltip: string;
-  layoutClassName?: string;
+  id: string;
 }
 
-export const ToolTip = ({ children, layoutClassName, tooltip }: React.PropsWithChildren<ToolTipProps>): JSX.Element => {
-  return (
-    <div className={clsx(styles.wrapper, layoutClassName && layoutClassName)}>
-      <div data-tip={tooltip}>{children}</div>
+/**
+ * Implement this ToolTip only once, in a high-level wrapper.
+ * Use the ToolTip anywhere, in any element, by setting the following data props:
+ *
+ * data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
+ * data-tooltip-content="Hello world!"
+ */
 
-      <ReactTooltip place={"top"} type={"dark"} effect={"solid"} className={styles.tooltip} />
-    </div>
-  );
+export const ToolTip: React.FC<ToolTipProps> = ({ id }) => {
+  return <Tooltip className={styles.tooltip} {...{ id }} />;
 };
-
-export { ReactTooltip };

package/src/index.ts

@@ -29,6 +29,7 @@ import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
 import { CodeBlock } from "./components/codeBlock/CodeBlock";
 import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
+import { TabContext } from "./components/tabs/Tabs";
 
 export {
   DownloadCard,
@@ -62,4 +63,5 @@ export {
   BadgeCounter,
   CodeBlock,
   ToolTip,
+  TabContext,
 };