@conduction/components 2.2.3 → 2.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/README.md +2 -0
  2. package/lib/components/formFields/createKeyValue/CreateKeyValue.js +1 -2
  3. package/lib/components/tabs/Tabs.d.ts +5 -14
  4. package/lib/components/tabs/Tabs.js +14 -6
  5. package/lib/components/tabs/Tabs.module.css +116 -76
  6. package/lib/components/toolTip/ToolTip.d.ts +10 -6
  7. package/lib/components/toolTip/ToolTip.js +11 -6
  8. package/lib/components/toolTip/ToolTip.module.css +26 -10
  9. package/lib/index.d.ts +2 -2
  10. package/lib/index.js +2 -2
  11. package/package.json +3 -8
  12. package/src/components/formFields/createKeyValue/CreateKeyValue.tsx +11 -16
  13. package/src/components/tabs/Tabs.module.css +116 -76
  14. package/src/components/tabs/Tabs.tsx +45 -35
  15. package/src/components/toolTip/ToolTip.module.css +26 -10
  16. package/src/components/toolTip/ToolTip.tsx +11 -15
  17. package/src/index.ts +5 -2
package/README.md CHANGED
@@ -4,6 +4,8 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.5: Updated Tabs component.
8
+ - 2.2.4: Refactor the Tooltip component to include react-tooltip version 5+.
7
9
  - 2.2.3: Added Tabs component.
8
10
  - 2.2.2:
9
11
  - Removed Den Haag Textfield dependencies.
package/lib/components/formFields/createKeyValue/CreateKeyValue.js CHANGED
@@ -3,7 +3,6 @@ import * as React from "react";
3
3
  import * as styles from "./CreateKeyValue.module.css";
4
4
  import { Controller } from "react-hook-form";
5
5
  import { Table, TableBody, TableCell, TableHeaderCell, TableHeader, TableRow, Textbox, Button, } from "@utrecht/component-library-react/dist/css-module";
6
- import { ToolTip } from "../../toolTip/ToolTip";
7
6
  import clsx from "clsx";
8
7
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
9
8
  import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
@@ -37,5 +36,5 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, })
37
36
  React.useEffect(() => {
38
37
  handleChange(keyValues);
39
38
  }, [keyValues]);
40
- 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" })] })] }));
39
+ 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" })] })] }));
41
40
  };
package/lib/components/tabs/Tabs.d.ts CHANGED
@@ -1,14 +1,5 @@
1
- import * as React from "react";
2
- interface testProps {
3
- tabs: ITabProps[];
4
- tabContent: ITabPanelProps[];
5
- }
6
- interface ITabProps {
7
- name: string;
8
- badge?: string;
9
- }
10
- interface ITabPanelProps {
11
- content: JSX.Element;
12
- }
13
- export declare const TabContext: React.FC<testProps>;
14
- export {};
1
+ import { ReactTabsFunctionComponent, TabProps, TabPanelProps, TabListProps, TabsProps } from "react-tabs";
2
+ export declare const Tabs: ReactTabsFunctionComponent<TabsProps>;
3
+ export declare const TabList: ReactTabsFunctionComponent<TabListProps>;
4
+ export declare const Tab: ReactTabsFunctionComponent<TabProps>;
5
+ export declare const TabPanel: ReactTabsFunctionComponent<TabPanelProps>;
package/lib/components/tabs/Tabs.js CHANGED
@@ -1,7 +1,15 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import * as styles from "./Tabs.module.css";
3
- import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
4
- import { BadgeCounter } from "@utrecht/component-library-react";
5
- export const TabContext = ({ tabs, tabContent }) => {
6
- 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 })))] }));
7
- };
3
+ import { Tabs as RTabs, TabList as RTabList, Tab as RTab, TabPanel as RTabPanel, } from "react-tabs";
4
+ // Tabs
5
+ export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { className: styles.tabs, ...otherProps, children: children }));
6
+ Tabs.tabsRole = "Tabs";
7
+ // TabList
8
+ export const TabList = ({ children, ...otherProps }) => (_jsx(RTabList, { className: styles.tabList, ...otherProps, children: children }));
9
+ TabList.tabsRole = "TabList";
10
+ // Tab
11
+ export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { className: styles.tab, ...otherProps, children: children }));
12
+ Tab.tabsRole = "Tab";
13
+ // TabPanel
14
+ export const TabPanel = ({ children, ...otherProps }) => (_jsx(RTabPanel, { ...otherProps, children: children }));
15
+ TabPanel.tabsRole = "TabPanel";
package/lib/components/tabs/Tabs.module.css CHANGED
@@ -1,42 +1,61 @@
1
1
  :root {
2
- --conduction-tab-list-padding-inline-start: 0px;
3
- --conduction-tab-list-border-bottom-width: var(--skeleton-size-3xs);
4
- --conduction-tab-list-border-bottom-style: solid;
5
- --conduction-tab-list-border-bottom-color: #d1d1d1;
2
+ --conduction-tabs-tab-background-color: #ffffff;
3
+ --conduction-tabs-tab-color: #4a4a4a;
4
+ /* --conduction-tabs-tab-border-width: 0px; */
5
+ /* --conduction-tabs-tab-border-style: solid; */
6
+ /* --conduction-tabs-tab-border-color: #ffffff; */
7
+ /* --conduction-tabs-tab-border-bottom: 0px; */
8
+ /* --conduction-tabs-tab-border-bottom-width: var(--skeleton-size-3xs); */
9
+ /* --conduction-tabs-tab-border-bottom-style: solid; */
10
+ /* --conduction-tabs-tab-border-bottom-color: #d1d1d1; */
11
+ --conduction-tabs-tab-bottom: -2px;
12
+ --conduction-tabs-tab-padding-block-start: var(--skeleton-size-xs);
13
+ --conduction-tabs-tab-padding-block-end: var(--skeleton-size-xs);
14
+ --conduction-tabs-tab-padding-inline-start: var(--skeleton-size-sm);
15
+ --conduction-tabs-tab-padding-inline-end: var(--skeleton-size-sm);
16
+ /* --conduction-tabs-tab-margin-inline-end: var(--skeleton-size-xs); */
17
+ --conduction-tabs-tab-font-size: var(--skeleton-font-size-sm: );
18
+ --conduction-tabs-tab-font-weight: var(--skeleton-font-weight-normal);
19
+ --conduction-tabs-tab-font-family: "Noto Sans", Arial, sans-serif;
20
+ --conduction-tabs-tab-max-width: unset;
21
+ /* --conduction-tabs-tab-letter-spacing: 0.02857em; */
22
+ /* --conduction-tabs-tab-text-transform: uppercase; */
6
23
 
7
- --conduction-tab-padding-block-start: var(--skeleton-size-xs);
8
- --conduction-tab-padding-block-end: var(--skeleton-size-xs);
9
- --conduction-tab-padding-inline-start: var(--skeleton-size-sm);
10
- --conduction-tab-padding-inline-end: var(--skeleton-size-sm);
11
- --conduction-tab-font-size: var(--skeleton-font-size-sm: );
12
- --conduction-tab-font-weight: var(--skeleton-font-weight-normal);
13
- --conduction-tab-font-family: "Noto Sans", Arial, sans-serif;
14
- --conduction-tab-max-width: unset;
15
- --conduction-tab-min-width: 160px;
16
- --conduction-tab-min-height: 61px;
17
- /* --conduction-tab-letter-spacing: 0.02857em; */
18
- /* --conduction-tab-text-transform: uppercase; */
19
- --conduction-tab-color: #4a4a4a;
24
+ --conduction-tabs-tab-selected-background-color: #ffffff;
25
+ --conduction-tabs-tab-selected-color: #4a4a4a;
26
+ /* --conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 1px #ffffff; */
27
+ /* --conduction-tabs-tab-selected-border-width: 0px; */
28
+ /* --conduction-tabs-tab-selected-border-style: solid; */
29
+ /* --conduction-tabs-tab-selected-border-color: #ffffff; */
30
+ /* --conduction-tabs-tab-selected-border-bottom: 0; */
31
+ --conduction-tabs-tab-selected-border-bottom-width: var(--skeleton-size-3xs);
32
+ --conduction-tabs-tab-selected-border-bottom-style: solid;
33
+ --conduction-tabs-tab-selected-border-bottom-color: #4376fc;
34
+ --conduction-tabs-tab-selected-font-weight: var(--skeleton-font-weight-bold);
35
+ --conduction-tabs-tab-selected-font-family: "Noto Sans", Arial, sans-serif;
36
+ /* --conduction-tabs-tab-selected-hover-background-color: #ffffff; */
37
+ /* --conduction-tabs-tab-selected-hover-color: #4a4a4a; */
38
+ /* --conduction-tabs-tab-selected-hover-text-decoration: underline; */
20
39
 
21
- --conduction-tab-selected-color: #4a4a4a;
22
- --conduction-tab-selected-border-bottom-width: var(--skeleton-size-3xs);
23
- --conduction-tab-selected-border-bottom-style: solid;
24
- --conduction-tab-selected-border-bottom-color: #4376fc;
25
- --conduction-tab-selected-font-weight: var(--skeleton-font-weight-bold);
40
+ /* --conduction-tabs-tab-hover-background-color: #ffffff; */
41
+ /* --conduction-tabs-tab-hover-color: #4a4a4a; */
42
+ /* --conduction-tabs-tab-hover-text-decoration: underline; */
26
43
 
27
- --conduction-tab-panel-padding-block-start: var(--skeleton-size-lg);
28
- --conduction-tab-panel-padding-block-end: var(--skeleton-size-lg);
29
- --conduction-tab-panel-padding-inline-start: var(--skeleton-size-lg);
30
- --conduction-tab-panel-padding-inline-end: var(--skeleton-size-lg);
44
+ --conduction-tabs-tab-list-padding-inline-start: 0px;
45
+ --conduction-tabs-tab-list-margin-block-end: 16px;
46
+ --conduction-tabs-tab-list-border-bottom-width: var(--skeleton-size-3xs);
47
+ --conduction-tabs-tab-list-border-bottom-style: solid;
48
+ --conduction-tabs-tab-list-border-bottom-color: #d1d1d1;
31
49
 
32
- --conduction-tab-badge-margin-inline-start: var(--skeleton-size-xs);
33
- }
34
-
35
- .tabList {
36
- padding-inline-start: var(--conduction-tab-list-padding-inline-start);
37
- border-bottom-width: var(--conduction-tab-list-border-bottom-width);
38
- border-bottom-style: var(--conduction-tab-list-border-bottom-style);
39
- border-bottom-color: var(--conduction-tab-list-border-bottom-color);
50
+ /* --conduction-tabs-tab-panel-background-color: #ffffff; */
51
+ --conduction-tabs-tab-panel-padding-block-start: var(--skeleton-size-lg);
52
+ --conduction-tabs-tab-panel-padding-block-end: var(--skeleton-size-lg);
53
+ --conduction-tabs-tab-panel-padding-inline-start: var(--skeleton-size-lg);
54
+ --conduction-tabs-tab-panel-padding-inline-end: var(--skeleton-size-lg);
55
+ /* --conduction-tabs-tab-panel-border-width: 0px; */
56
+ /* --conduction-tabs-tab-panel-border-style: solid; */
57
+ /* --conduction-tabs-tab-panel-border-color: #ffffff; */
58
+ /* --conduction-tabs-tab-panel-border-top: 0; */
40
59
  }
41
60
 
42
61
  .tab {
@@ -49,54 +68,75 @@
49
68
  box-sizing: border-box;
50
69
  text-align: center;
51
70
  white-space: normal;
52
- bottom: -2px;
53
71
 
54
- color: var(--conduction-tab-color);
55
- padding-block-start: var(--conduction-tab-padding-block-start);
56
- padding-block-end: var(--conduction-tab-padding-block-end);
57
- padding-inline-start: var(--conduction-tab-padding-inline-start);
58
- padding-inline-end: var(--conduction-tab-padding-inline-end);
59
- font-size: var(--conduction-tab-font-size);
60
- font-weight: var(--conduction-tab-font-weight);
61
- font-family: var(--conduction-tab-font-family);
62
- max-width: var(--conduction-tab-max-width);
63
- min-width: var(--conduction-tab-min-width);
64
- min-height: var(--conduction-tab-min-height);
65
- letter-spacing: var(--conduction-tab-letter-spacing);
66
- text-transform: var(--conduction-tab-text-transform);
67
-
68
- border-bottom-width: var(--conduction-tab-list-border-bottom-width);
69
- border-bottom-style: var(--conduction-tab-list-border-bottom-style);
70
- border-bottom-color: var(--conduction-tab-list-border-bottom-color);
72
+ background-color: var(--conduction-tabs-tab-background-color);
73
+ color: var(--conduction-tabs-tab-color);
74
+ border-width: var(--conduction-tabs-tab-border-width);
75
+ border-style: var(--conduction-tabs-tab-border-style);
76
+ border-color: var(--conduction-tabs-tab-border-color);
77
+ border-bottom: var(--conduction-tabs-tab-border-bottom);
78
+ border-bottom-width: var(--conduction-tabs-tab-border-bottom-width);
79
+ border-bottom-style: var(--conduction-tabs-tab-border-bottom-style);
80
+ border-bottom-color: var(--conduction-tabs-tab-border-bottom-color);
81
+ bottom: var(--conduction-tabs-tab-bottom);
82
+ padding-block-start: var(--conduction-tabs-tab-padding-block-start);
83
+ padding-block-end: var(--conduction-tabs-tab-padding-block-end);
84
+ padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
85
+ padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
86
+ margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
87
+ font-size: var(--conduction-tabs-tab-font-size);
88
+ font-weight: var(--conduction-tabs-tab-font-weight);
89
+ font-family: var(--conduction-tabs-tab-font-family);
90
+ min-height: var(--conduction-tabs-tab-min-height);
91
+ letter-spacing: var(--conduction-tabs-tab-letter-spacing);
92
+ text-transform: var(--conduction-tabs-tab-text-transform);
71
93
  }
72
94
 
95
+ /* TabSelected */
73
96
  .tab[aria-selected="true"] {
74
- color: var(--conduction-tab-selected-color);
75
- border-bottom-width: var(--conduction-tab-selected-border-bottom-width);
76
- border-bottom-style: var(--conduction-tab-selected-border-bottom-style);
77
- border-bottom-color: var(--conduction-tab-selected-border-bottom-color);
78
- font-weight: var(--conduction-tab-selected-font-weight);
97
+ background-color: var(--conduction-tabs-tab-selected-background-color);
98
+ color: var(--conduction-tabs-tab-selected-color);
99
+ box-shadow: var(--conduction-tabs-tab-selected-box-shadow);
100
+ border-width: var(--conduction-tabs-tab-selected-border-width);
101
+ border-style: var(--conduction-tabs-tab-selected-border-style);
102
+ border-color: var(--conduction-tabs-tab-selected-border-color);
103
+ border-bottom: var(--conduction-tabs-tab-selected-border-bottom);
104
+ border-bottom-width: var(--conduction-tabs-tab-selected-border-bottom-width);
105
+ border-bottom-style: var(--conduction-tabs-tab-selected-border-bottom-style);
106
+ border-bottom-color: var(--conduction-tabs-tab-selected-border-bottom-color);
107
+ font-weight: var(--conduction-tabs-tab-selected-font-weight);
108
+ font-family: var(--conduction-tabs-tab-selected-font-family);
79
109
  }
80
110
 
81
- .tabs [class*="react-tabs__tab-panel--selected"] {
82
- padding-block-start: var(--conduction-tab-panel-padding-block-start);
83
- padding-block-end: var(--conduction-tab-panel-padding-block-end);
84
- padding-inline-start: var(--conduction-tab-panel-padding-inline-start);
85
- padding-inline-end: var(--conduction-tab-panel-padding-inline-end);
111
+ .tab[aria-selected="true"]:hover {
112
+ background-color: var(--conduction-tabs-tab-selected-hover-background-color);
113
+ color: var(--conduction-tabs-tab-selected-hover-color);
114
+ text-decoration: var(--conduction-tabs-tab-selected-hover-text-decoration);
115
+ }
116
+ .tab:hover {
117
+ background-color: var(--conduction-tabs-tab-hover-background-color);
118
+ color: var(--conduction-tabs-tab-hover-color);
119
+ text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
86
120
  }
87
121
 
88
- .badge {
89
- margin-inline-start: var(--conduction-tab-badge-margin-inline-start);
90
- background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, #000));
91
- border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
92
- color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, #fff));
93
- display: inline-block;
94
- font-family: var(--utrecht-document-font-family, sans-serif);
95
- font-style: var(--utrecht-badge-counter-font-style, normal);
96
- font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
97
- padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
98
- padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
99
- padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
100
- padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
101
- text-decoration: none;
122
+ .tabList {
123
+ display: flex;
124
+ padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
125
+ margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
126
+ border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
127
+ border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
128
+ border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
129
+ }
130
+
131
+ /* TabPanel */
132
+ .tabs [class*="react-tabs__tab-panel--selected"] {
133
+ background-color: var(--conduction-tabs-tab-panel-background-color);
134
+ padding-block-start: var(--conduction-tabs-tab-panel-padding-block-start);
135
+ padding-block-end: var(--conduction-tabs-tab-panel-padding-block-end);
136
+ padding-inline-start: var(--conduction-tabs-tab-panel-padding-inline-start);
137
+ padding-inline-end: var(--conduction-tabs-tab-panel-padding-inline-end);
138
+ border-width: var(--conduction-tabs-tab-panel-border-width);
139
+ border-style: var(--conduction-tabs-tab-panel-border-style);
140
+ border-color: var(--conduction-tabs-tab-panel-border-color);
141
+ border-top: var(--conduction-tabs-tab-panel-border-top);
102
142
  }
package/lib/components/toolTip/ToolTip.d.ts CHANGED
@@ -1,9 +1,13 @@
1
1
  import * as React from "react";
2
- import ReactTooltip from "react-tooltip";
3
2
  interface ToolTipProps {
4
- children: React.ReactNode;
5
- tooltip: string;
6
- layoutClassName?: string;
3
+ id: string;
7
4
  }
8
- export declare const ToolTip: ({ children, layoutClassName, tooltip }: React.PropsWithChildren<ToolTipProps>) => JSX.Element;
9
- export { ReactTooltip };
5
+ /**
6
+ * Implement this ToolTip only once, in a high-level wrapper.
7
+ * Use the ToolTip anywhere, in any element, by setting the following data props:
8
+ *
9
+ * data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
10
+ * data-tooltip-content="Hello world!"
11
+ */
12
+ export declare const ToolTip: React.FC<ToolTipProps>;
13
+ export {};
package/lib/components/toolTip/ToolTip.js CHANGED
@@ -1,8 +1,13 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import clsx from "clsx";
3
- import ReactTooltip from "react-tooltip";
1
+ import { jsx as _jsx } from "react/jsx-runtime";
4
2
  import * as styles from "./ToolTip.module.css";
5
- export const ToolTip = ({ children, layoutClassName, tooltip }) => {
6
- 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 })] }));
3
+ import { Tooltip } from "react-tooltip";
4
+ /**
5
+ * Implement this ToolTip only once, in a high-level wrapper.
6
+ * Use the ToolTip anywhere, in any element, by setting the following data props:
7
+ *
8
+ * data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
9
+ * data-tooltip-content="Hello world!"
10
+ */
11
+ export const ToolTip = ({ id }) => {
12
+ return _jsx(Tooltip, { className: styles.tooltip, ...{ id } });
7
13
  };
8
- export { ReactTooltip };
package/lib/components/toolTip/ToolTip.module.css CHANGED
@@ -1,17 +1,33 @@
1
1
  :root {
2
- --conduction-tooltip-max-width: 500px;
3
- }
2
+ --conduction-tooltip-padding-inline-start: 0px;
3
+ --conduction-tooltip-padding-inline-end: 0px;
4
+ --conduction-tooltip-padding-block-start: 0px;
5
+ --conduction-tooltip-padding-block-end: 0px;
6
+
7
+ --conduction-tooltip-background-color: var(--skeleton-color-black);
8
+ --conduction-tooltip-color: var(--skeleton-color-white);
9
+
10
+ --conduction-tooltip-border-width: 0px;
11
+ --conduction-tooltip-border-color: unset;
12
+ --conduction-tooltip-border-style: unset;
13
+ --conduction-tooltip-border-radius: 0px;
4
14
 
5
- .wrapper {
6
- display: inline-block;
7
- position: relative;
15
+ --conduction-tooltip-opacity: 1;
8
16
  }
9
17
 
10
18
  .tooltip {
11
- max-width: var(--conduction-tooltip-max-width);
12
- word-break: break-word;
13
- }
19
+ padding-inline-start: var(--conduction-tooltip-padding-inline-start);
20
+ padding-inline-end: var(--conduction-tooltip-padding-inline-end);
21
+ padding-block-start: var(--conduction-tooltip-padding-block-start);
22
+ padding-block-end: var(--conduction-tooltip-padding-block-end);
23
+
24
+ background-color: var(--conduction-tooltip-background-color) !important;
25
+ color: var(--conduction-tooltip-color) !important;
26
+
27
+ border-width: var(--conductino-tooltip-border-width);
28
+ border-color: var(--conduction-tooltip-border-color);
29
+ border-style: var(--conduction-tooltip-border-style);
30
+ border-radius: var(--conduction-tooltip-border-radius) !important;
14
31
 
15
- .tooltip::before {
16
- all: unset !important;
32
+ opacity: var(--conduction-tooltip-opacity);
17
33
  }
package/lib/index.d.ts CHANGED
@@ -22,5 +22,5 @@ import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
22
22
  import { CodeBlock } from "./components/codeBlock/CodeBlock";
23
23
  import { ToolTip } from "./components/toolTip/ToolTip";
24
24
  import { Pagination } from "./components/Pagination/Pagination";
25
- import { TabContext } from "./components/tabs/Tabs";
26
- 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, };
25
+ import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
26
+ 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, Tabs, TabList, Tab, TabPanel, };
package/lib/index.js CHANGED
@@ -15,5 +15,5 @@ import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
15
15
  import { CodeBlock } from "./components/codeBlock/CodeBlock";
16
16
  import { ToolTip } from "./components/toolTip/ToolTip";
17
17
  import { Pagination } from "./components/Pagination/Pagination";
18
- import { TabContext } from "./components/tabs/Tabs";
19
- 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, };
18
+ import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
19
+ 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, Tabs, TabList, Tab, TabPanel, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.3",
3
+ "version": "2.2.5",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -12,12 +12,7 @@
12
12
  "type": "git",
13
13
  "url": "git+https://github.com/ConductionNL/conduction-components.git"
14
14
  },
15
- "keywords": [
16
- "React",
17
- "Gatsby",
18
- "Conduction",
19
- "Components"
20
- ],
15
+ "keywords": ["React", "Gatsby", "Conduction", "Components"],
21
16
  "author": "Conduction B.V.",
22
17
  "license": "ISC",
23
18
  "bugs": {
@@ -37,7 +32,7 @@
37
32
  "react-paginate": "^8.2.0",
38
33
  "react-select": "5.3.2",
39
34
  "react-tabs": "^6.0.2",
40
- "react-tooltip": "^4.2.21"
35
+ "react-tooltip": "^5.21.3"
41
36
  },
42
37
  "devDependencies": {
43
38
  "@types/node": "^17.0.23",
package/src/components/formFields/createKeyValue/CreateKeyValue.tsx CHANGED
@@ -12,7 +12,6 @@ import {
12
12
  Textbox,
13
13
  Button,
14
14
  } from "@utrecht/component-library-react/dist/css-module";
15
- import { ToolTip } from "../../toolTip/ToolTip";
16
15
  import clsx from "clsx";
17
16
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
18
17
  import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
@@ -133,25 +132,21 @@ const KeyValueComponent = ({
133
132
  <TableCell>
134
133
  <div className={styles.buttonsContainer}>
135
134
  {copyValue && (
136
- <ToolTip tooltip="Copy value">
137
- <Button
138
- {...{ disabled }}
139
- onClick={() => handleCopyToClipboard(keyValue.value, idx)}
140
- appearance={currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button"}
141
- >
142
- <FontAwesomeIcon icon={faCopy} />
143
- </Button>
144
- </ToolTip>
145
- )}
146
- <ToolTip tooltip="Delete value">
147
135
  <Button
148
136
  {...{ disabled }}
149
- onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}
150
- className={clsx(styles.deleteButton)}
137
+ onClick={() => handleCopyToClipboard(keyValue.value, idx)}
138
+ appearance={currentCopyIdx === idx ? "secondary-action-button" : "primary-action-button"}
151
139
  >
152
- <FontAwesomeIcon icon={faTrash} />
140
+ <FontAwesomeIcon icon={faCopy} />
153
141
  </Button>
154
- </ToolTip>
142
+ )}
143
+ <Button
144
+ {...{ disabled }}
145
+ onClick={() => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue))}
146
+ className={clsx(styles.deleteButton)}
147
+ >
148
+ <FontAwesomeIcon icon={faTrash} />
149
+ </Button>
155
150
  </div>
156
151
  </TableCell>
157
152
  </TableRow>
package/src/components/tabs/Tabs.module.css CHANGED
@@ -1,42 +1,61 @@
1
1
  :root {
2
- --conduction-tab-list-padding-inline-start: 0px;
3
- --conduction-tab-list-border-bottom-width: var(--skeleton-size-3xs);
4
- --conduction-tab-list-border-bottom-style: solid;
5
- --conduction-tab-list-border-bottom-color: #d1d1d1;
2
+ --conduction-tabs-tab-background-color: #ffffff;
3
+ --conduction-tabs-tab-color: #4a4a4a;
4
+ /* --conduction-tabs-tab-border-width: 0px; */
5
+ /* --conduction-tabs-tab-border-style: solid; */
6
+ /* --conduction-tabs-tab-border-color: #ffffff; */
7
+ /* --conduction-tabs-tab-border-bottom: 0px; */
8
+ /* --conduction-tabs-tab-border-bottom-width: var(--skeleton-size-3xs); */
9
+ /* --conduction-tabs-tab-border-bottom-style: solid; */
10
+ /* --conduction-tabs-tab-border-bottom-color: #d1d1d1; */
11
+ --conduction-tabs-tab-bottom: -2px;
12
+ --conduction-tabs-tab-padding-block-start: var(--skeleton-size-xs);
13
+ --conduction-tabs-tab-padding-block-end: var(--skeleton-size-xs);
14
+ --conduction-tabs-tab-padding-inline-start: var(--skeleton-size-sm);
15
+ --conduction-tabs-tab-padding-inline-end: var(--skeleton-size-sm);
16
+ /* --conduction-tabs-tab-margin-inline-end: var(--skeleton-size-xs); */
17
+ --conduction-tabs-tab-font-size: var(--skeleton-font-size-sm: );
18
+ --conduction-tabs-tab-font-weight: var(--skeleton-font-weight-normal);
19
+ --conduction-tabs-tab-font-family: "Noto Sans", Arial, sans-serif;
20
+ --conduction-tabs-tab-max-width: unset;
21
+ /* --conduction-tabs-tab-letter-spacing: 0.02857em; */
22
+ /* --conduction-tabs-tab-text-transform: uppercase; */
6
23
 
7
- --conduction-tab-padding-block-start: var(--skeleton-size-xs);
8
- --conduction-tab-padding-block-end: var(--skeleton-size-xs);
9
- --conduction-tab-padding-inline-start: var(--skeleton-size-sm);
10
- --conduction-tab-padding-inline-end: var(--skeleton-size-sm);
11
- --conduction-tab-font-size: var(--skeleton-font-size-sm: );
12
- --conduction-tab-font-weight: var(--skeleton-font-weight-normal);
13
- --conduction-tab-font-family: "Noto Sans", Arial, sans-serif;
14
- --conduction-tab-max-width: unset;
15
- --conduction-tab-min-width: 160px;
16
- --conduction-tab-min-height: 61px;
17
- /* --conduction-tab-letter-spacing: 0.02857em; */
18
- /* --conduction-tab-text-transform: uppercase; */
19
- --conduction-tab-color: #4a4a4a;
24
+ --conduction-tabs-tab-selected-background-color: #ffffff;
25
+ --conduction-tabs-tab-selected-color: #4a4a4a;
26
+ /* --conduction-tabs-tab-selected-box-shadow: 0px 1px 0px 1px #ffffff; */
27
+ /* --conduction-tabs-tab-selected-border-width: 0px; */
28
+ /* --conduction-tabs-tab-selected-border-style: solid; */
29
+ /* --conduction-tabs-tab-selected-border-color: #ffffff; */
30
+ /* --conduction-tabs-tab-selected-border-bottom: 0; */
31
+ --conduction-tabs-tab-selected-border-bottom-width: var(--skeleton-size-3xs);
32
+ --conduction-tabs-tab-selected-border-bottom-style: solid;
33
+ --conduction-tabs-tab-selected-border-bottom-color: #4376fc;
34
+ --conduction-tabs-tab-selected-font-weight: var(--skeleton-font-weight-bold);
35
+ --conduction-tabs-tab-selected-font-family: "Noto Sans", Arial, sans-serif;
36
+ /* --conduction-tabs-tab-selected-hover-background-color: #ffffff; */
37
+ /* --conduction-tabs-tab-selected-hover-color: #4a4a4a; */
38
+ /* --conduction-tabs-tab-selected-hover-text-decoration: underline; */
20
39
 
21
- --conduction-tab-selected-color: #4a4a4a;
22
- --conduction-tab-selected-border-bottom-width: var(--skeleton-size-3xs);
23
- --conduction-tab-selected-border-bottom-style: solid;
24
- --conduction-tab-selected-border-bottom-color: #4376fc;
25
- --conduction-tab-selected-font-weight: var(--skeleton-font-weight-bold);
40
+ /* --conduction-tabs-tab-hover-background-color: #ffffff; */
41
+ /* --conduction-tabs-tab-hover-color: #4a4a4a; */
42
+ /* --conduction-tabs-tab-hover-text-decoration: underline; */
26
43
 
27
- --conduction-tab-panel-padding-block-start: var(--skeleton-size-lg);
28
- --conduction-tab-panel-padding-block-end: var(--skeleton-size-lg);
29
- --conduction-tab-panel-padding-inline-start: var(--skeleton-size-lg);
30
- --conduction-tab-panel-padding-inline-end: var(--skeleton-size-lg);
44
+ --conduction-tabs-tab-list-padding-inline-start: 0px;
45
+ --conduction-tabs-tab-list-margin-block-end: 16px;
46
+ --conduction-tabs-tab-list-border-bottom-width: var(--skeleton-size-3xs);
47
+ --conduction-tabs-tab-list-border-bottom-style: solid;
48
+ --conduction-tabs-tab-list-border-bottom-color: #d1d1d1;
31
49
 
32
- --conduction-tab-badge-margin-inline-start: var(--skeleton-size-xs);
33
- }
34
-
35
- .tabList {
36
- padding-inline-start: var(--conduction-tab-list-padding-inline-start);
37
- border-bottom-width: var(--conduction-tab-list-border-bottom-width);
38
- border-bottom-style: var(--conduction-tab-list-border-bottom-style);
39
- border-bottom-color: var(--conduction-tab-list-border-bottom-color);
50
+ /* --conduction-tabs-tab-panel-background-color: #ffffff; */
51
+ --conduction-tabs-tab-panel-padding-block-start: var(--skeleton-size-lg);
52
+ --conduction-tabs-tab-panel-padding-block-end: var(--skeleton-size-lg);
53
+ --conduction-tabs-tab-panel-padding-inline-start: var(--skeleton-size-lg);
54
+ --conduction-tabs-tab-panel-padding-inline-end: var(--skeleton-size-lg);
55
+ /* --conduction-tabs-tab-panel-border-width: 0px; */
56
+ /* --conduction-tabs-tab-panel-border-style: solid; */
57
+ /* --conduction-tabs-tab-panel-border-color: #ffffff; */
58
+ /* --conduction-tabs-tab-panel-border-top: 0; */
40
59
  }
41
60
 
42
61
  .tab {
@@ -49,54 +68,75 @@
49
68
  box-sizing: border-box;
50
69
  text-align: center;
51
70
  white-space: normal;
52
- bottom: -2px;
53
71
 
54
- color: var(--conduction-tab-color);
55
- padding-block-start: var(--conduction-tab-padding-block-start);
56
- padding-block-end: var(--conduction-tab-padding-block-end);
57
- padding-inline-start: var(--conduction-tab-padding-inline-start);
58
- padding-inline-end: var(--conduction-tab-padding-inline-end);
59
- font-size: var(--conduction-tab-font-size);
60
- font-weight: var(--conduction-tab-font-weight);
61
- font-family: var(--conduction-tab-font-family);
62
- max-width: var(--conduction-tab-max-width);
63
- min-width: var(--conduction-tab-min-width);
64
- min-height: var(--conduction-tab-min-height);
65
- letter-spacing: var(--conduction-tab-letter-spacing);
66
- text-transform: var(--conduction-tab-text-transform);
67
-
68
- border-bottom-width: var(--conduction-tab-list-border-bottom-width);
69
- border-bottom-style: var(--conduction-tab-list-border-bottom-style);
70
- border-bottom-color: var(--conduction-tab-list-border-bottom-color);
72
+ background-color: var(--conduction-tabs-tab-background-color);
73
+ color: var(--conduction-tabs-tab-color);
74
+ border-width: var(--conduction-tabs-tab-border-width);
75
+ border-style: var(--conduction-tabs-tab-border-style);
76
+ border-color: var(--conduction-tabs-tab-border-color);
77
+ border-bottom: var(--conduction-tabs-tab-border-bottom);
78
+ border-bottom-width: var(--conduction-tabs-tab-border-bottom-width);
79
+ border-bottom-style: var(--conduction-tabs-tab-border-bottom-style);
80
+ border-bottom-color: var(--conduction-tabs-tab-border-bottom-color);
81
+ bottom: var(--conduction-tabs-tab-bottom);
82
+ padding-block-start: var(--conduction-tabs-tab-padding-block-start);
83
+ padding-block-end: var(--conduction-tabs-tab-padding-block-end);
84
+ padding-inline-start: var(--conduction-tabs-tab-padding-inline-start);
85
+ padding-inline-end: var(--conduction-tabs-tab-padding-inline-end);
86
+ margin-inline-end: var(--conduction-tabs-tab-margin-inline-end);
87
+ font-size: var(--conduction-tabs-tab-font-size);
88
+ font-weight: var(--conduction-tabs-tab-font-weight);
89
+ font-family: var(--conduction-tabs-tab-font-family);
90
+ min-height: var(--conduction-tabs-tab-min-height);
91
+ letter-spacing: var(--conduction-tabs-tab-letter-spacing);
92
+ text-transform: var(--conduction-tabs-tab-text-transform);
71
93
  }
72
94
 
95
+ /* TabSelected */
73
96
  .tab[aria-selected="true"] {
74
- color: var(--conduction-tab-selected-color);
75
- border-bottom-width: var(--conduction-tab-selected-border-bottom-width);
76
- border-bottom-style: var(--conduction-tab-selected-border-bottom-style);
77
- border-bottom-color: var(--conduction-tab-selected-border-bottom-color);
78
- font-weight: var(--conduction-tab-selected-font-weight);
97
+ background-color: var(--conduction-tabs-tab-selected-background-color);
98
+ color: var(--conduction-tabs-tab-selected-color);
99
+ box-shadow: var(--conduction-tabs-tab-selected-box-shadow);
100
+ border-width: var(--conduction-tabs-tab-selected-border-width);
101
+ border-style: var(--conduction-tabs-tab-selected-border-style);
102
+ border-color: var(--conduction-tabs-tab-selected-border-color);
103
+ border-bottom: var(--conduction-tabs-tab-selected-border-bottom);
104
+ border-bottom-width: var(--conduction-tabs-tab-selected-border-bottom-width);
105
+ border-bottom-style: var(--conduction-tabs-tab-selected-border-bottom-style);
106
+ border-bottom-color: var(--conduction-tabs-tab-selected-border-bottom-color);
107
+ font-weight: var(--conduction-tabs-tab-selected-font-weight);
108
+ font-family: var(--conduction-tabs-tab-selected-font-family);
79
109
  }
80
110
 
81
- .tabs [class*="react-tabs__tab-panel--selected"] {
82
- padding-block-start: var(--conduction-tab-panel-padding-block-start);
83
- padding-block-end: var(--conduction-tab-panel-padding-block-end);
84
- padding-inline-start: var(--conduction-tab-panel-padding-inline-start);
85
- padding-inline-end: var(--conduction-tab-panel-padding-inline-end);
111
+ .tab[aria-selected="true"]:hover {
112
+ background-color: var(--conduction-tabs-tab-selected-hover-background-color);
113
+ color: var(--conduction-tabs-tab-selected-hover-color);
114
+ text-decoration: var(--conduction-tabs-tab-selected-hover-text-decoration);
115
+ }
116
+ .tab:hover {
117
+ background-color: var(--conduction-tabs-tab-hover-background-color);
118
+ color: var(--conduction-tabs-tab-hover-color);
119
+ text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
86
120
  }
87
121
 
88
- .badge {
89
- margin-inline-start: var(--conduction-tab-badge-margin-inline-start);
90
- background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, #000));
91
- border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch));
92
- color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, #fff));
93
- display: inline-block;
94
- font-family: var(--utrecht-document-font-family, sans-serif);
95
- font-style: var(--utrecht-badge-counter-font-style, normal);
96
- font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold));
97
- padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
98
- padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex));
99
- padding-inline-end: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
100
- padding-inline-start: var(--utrecht-badge-counter-padding-inline, var(--utrecht-badge-padding-inline, 0.5ch));
101
- text-decoration: none;
122
+ .tabList {
123
+ display: flex;
124
+ padding-inline-start: var(--conduction-tabs-tab-list-padding-inline-start);
125
+ margin-block-end: var(--conduction-tabs-tab-list-margin-block-end);
126
+ border-bottom-width: var(--conduction-tabs-tab-list-border-bottom-width);
127
+ border-bottom-style: var(--conduction-tabs-tab-list-border-bottom-style);
128
+ border-bottom-color: var(--conduction-tabs-tab-list-border-bottom-color);
129
+ }
130
+
131
+ /* TabPanel */
132
+ .tabs [class*="react-tabs__tab-panel--selected"] {
133
+ background-color: var(--conduction-tabs-tab-panel-background-color);
134
+ padding-block-start: var(--conduction-tabs-tab-panel-padding-block-start);
135
+ padding-block-end: var(--conduction-tabs-tab-panel-padding-block-end);
136
+ padding-inline-start: var(--conduction-tabs-tab-panel-padding-inline-start);
137
+ padding-inline-end: var(--conduction-tabs-tab-panel-padding-inline-end);
138
+ border-width: var(--conduction-tabs-tab-panel-border-width);
139
+ border-style: var(--conduction-tabs-tab-panel-border-style);
140
+ border-color: var(--conduction-tabs-tab-panel-border-color);
141
+ border-top: var(--conduction-tabs-tab-panel-border-top);
102
142
  }
package/src/components/tabs/Tabs.tsx CHANGED
@@ -1,37 +1,47 @@
1
1
  import * as React from "react";
2
2
  import * as styles from "./Tabs.module.css";
3
- import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
4
- import { BadgeCounter } from "@utrecht/component-library-react";
5
-
6
- interface testProps {
7
- tabs: ITabProps[];
8
- tabContent: ITabPanelProps[];
9
- }
10
-
11
- interface ITabProps {
12
- name: string;
13
- badge?: string;
14
- }
15
- interface ITabPanelProps {
16
- content: JSX.Element;
17
- }
18
-
19
- export const TabContext: React.FC<testProps> = ({ tabs, tabContent }) => {
20
- return (
21
- <Tabs className={styles.tabs}>
22
- <TabList className={styles.tabList}>
23
- {tabs.map(({ name, badge }) => (
24
- <Tab className={styles.tab}>
25
- <span>
26
- {name}
27
- {badge !== undefined && <BadgeCounter className={styles.badge}>{badge}</BadgeCounter>}
28
- </span>
29
- </Tab>
30
- ))}
31
- </TabList>
32
- {tabContent.map(({ content }) => (
33
- <TabPanel className={styles.tabPanel}>{content}</TabPanel>
34
- ))}
35
- </Tabs>
36
- );
37
- };
3
+ import {
4
+ Tabs as RTabs,
5
+ TabList as RTabList,
6
+ Tab as RTab,
7
+ TabPanel as RTabPanel,
8
+ ReactTabsFunctionComponent,
9
+ TabProps,
10
+ TabPanelProps,
11
+ TabListProps,
12
+ TabsProps,
13
+ } from "react-tabs";
14
+
15
+ // Tabs
16
+ export const Tabs: ReactTabsFunctionComponent<TabsProps> = ({ children, ...otherProps }) => (
17
+ <RTabs className={styles.tabs} {...otherProps}>
18
+ {children}
19
+ </RTabs>
20
+ );
21
+
22
+ Tabs.tabsRole = "Tabs";
23
+
24
+ // TabList
25
+ export const TabList: ReactTabsFunctionComponent<TabListProps> = ({ children, ...otherProps }) => (
26
+ <RTabList className={styles.tabList} {...otherProps}>
27
+ {children}
28
+ </RTabList>
29
+ );
30
+
31
+ TabList.tabsRole = "TabList";
32
+
33
+ // Tab
34
+ export const Tab: ReactTabsFunctionComponent<TabProps> = ({ children, ...otherProps }) => (
35
+ <RTab className={styles.tab} {...otherProps}>
36
+ {children}
37
+ </RTab>
38
+ );
39
+
40
+ Tab.tabsRole = "Tab";
41
+
42
+ // TabPanel
43
+ export const TabPanel: ReactTabsFunctionComponent<TabPanelProps> = ({ children, ...otherProps }) => (
44
+ <RTabPanel {...otherProps}>{children}</RTabPanel>
45
+ );
46
+
47
+ TabPanel.tabsRole = "TabPanel";
package/src/components/toolTip/ToolTip.module.css CHANGED
@@ -1,17 +1,33 @@
1
1
  :root {
2
- --conduction-tooltip-max-width: 500px;
3
- }
2
+ --conduction-tooltip-padding-inline-start: 0px;
3
+ --conduction-tooltip-padding-inline-end: 0px;
4
+ --conduction-tooltip-padding-block-start: 0px;
5
+ --conduction-tooltip-padding-block-end: 0px;
6
+
7
+ --conduction-tooltip-background-color: var(--skeleton-color-black);
8
+ --conduction-tooltip-color: var(--skeleton-color-white);
9
+
10
+ --conduction-tooltip-border-width: 0px;
11
+ --conduction-tooltip-border-color: unset;
12
+ --conduction-tooltip-border-style: unset;
13
+ --conduction-tooltip-border-radius: 0px;
4
14
 
5
- .wrapper {
6
- display: inline-block;
7
- position: relative;
15
+ --conduction-tooltip-opacity: 1;
8
16
  }
9
17
 
10
18
  .tooltip {
11
- max-width: var(--conduction-tooltip-max-width);
12
- word-break: break-word;
13
- }
19
+ padding-inline-start: var(--conduction-tooltip-padding-inline-start);
20
+ padding-inline-end: var(--conduction-tooltip-padding-inline-end);
21
+ padding-block-start: var(--conduction-tooltip-padding-block-start);
22
+ padding-block-end: var(--conduction-tooltip-padding-block-end);
23
+
24
+ background-color: var(--conduction-tooltip-background-color) !important;
25
+ color: var(--conduction-tooltip-color) !important;
26
+
27
+ border-width: var(--conductino-tooltip-border-width);
28
+ border-color: var(--conduction-tooltip-border-color);
29
+ border-style: var(--conduction-tooltip-border-style);
30
+ border-radius: var(--conduction-tooltip-border-radius) !important;
14
31
 
15
- .tooltip::before {
16
- all: unset !important;
32
+ opacity: var(--conduction-tooltip-opacity);
17
33
  }
package/src/components/toolTip/ToolTip.tsx CHANGED
@@ -1,23 +1,19 @@
1
- import clsx from "clsx";
2
- import _ from "lodash";
3
1
  import * as React from "react";
4
- import ReactTooltip from "react-tooltip";
5
2
  import * as styles from "./ToolTip.module.css";
3
+ import { Tooltip } from "react-tooltip";
6
4
 
7
5
  interface ToolTipProps {
8
- children: React.ReactNode;
9
- tooltip: string;
10
- layoutClassName?: string;
6
+ id: string;
11
7
  }
12
8
 
13
- export const ToolTip = ({ children, layoutClassName, tooltip }: React.PropsWithChildren<ToolTipProps>): JSX.Element => {
14
- return (
15
- <div className={clsx(styles.wrapper, layoutClassName && layoutClassName)}>
16
- <div data-tip={tooltip}>{children}</div>
9
+ /**
10
+ * Implement this ToolTip only once, in a high-level wrapper.
11
+ * Use the ToolTip anywhere, in any element, by setting the following data props:
12
+ *
13
+ * data-tooltip-id="this-is-the-id-set-in-ToolTipProps"
14
+ * data-tooltip-content="Hello world!"
15
+ */
17
16
 
18
- <ReactTooltip place={"top"} type={"dark"} effect={"solid"} className={styles.tooltip} />
19
- </div>
20
- );
17
+ export const ToolTip: React.FC<ToolTipProps> = ({ id }) => {
18
+ return <Tooltip className={styles.tooltip} {...{ id }} />;
21
19
  };
22
-
23
- export { ReactTooltip };
package/src/index.ts CHANGED
@@ -29,7 +29,7 @@ import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
29
29
  import { CodeBlock } from "./components/codeBlock/CodeBlock";
30
30
  import { ToolTip } from "./components/toolTip/ToolTip";
31
31
  import { Pagination } from "./components/Pagination/Pagination";
32
- import { TabContext } from "./components/tabs/Tabs";
32
+ import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
33
33
 
34
34
  export {
35
35
  DownloadCard,
@@ -63,5 +63,8 @@ export {
63
63
  BadgeCounter,
64
64
  CodeBlock,
65
65
  ToolTip,
66
- TabContext,
66
+ Tabs,
67
+ TabList,
68
+ Tab,
69
+ TabPanel,
67
70
  };