@conduction/components 2.2.3 → 2.2.4

package/src/components/tag/Tag.module.css

@@ -1,44 +1,44 @@
-:root {
-  --conduction-tag-font-size: var(--skeleton-font-size-sm);
-  --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-background-color: var(--skeleton-color-grey-1);
-  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
-  --conduction-tag-padding: var(--skeleton-size-xs);
-  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
-  --conduction-tag-remove-background-color: #ffbdad;
-  --conduction-tag-remove-text-color: #e44f2a;
-}
-
-.tag {
-  display: inline-block;
-  width: fit-content;
-  font-size: var(--conduction-tag-font-size);
-  color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-background-color);
-  padding-inline-start: var(--conduction-tag-padding);
-  padding-inline-end: var(--conduction-tag-padding);
-  padding-block-start: var(--conduction-tag-padding);
-  padding-block-end: var(--conduction-tag-padding);
-}
-
-.tag > *:not(:last-child) {
-  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
-}
-
-.clickable :hover {
-  cursor: pointer;
-}
-
-.remove {
-  padding-inline-end: 4px;
-}
-
-.tagContainer {
-  display: flex;
-}
-
-.removeTag:hover {
-  cursor: pointer;
-  background-color: var(--conduction-tag-remove-background-color);
-  color: var(--conduction-tag-remove-text-color);
-}
+:root {
+  --conduction-tag-font-size: var(--skeleton-font-size-sm);
+  --conduction-tag-color: var(--skeleton-black);
+  --conduction-tag-background-color: var(--skeleton-color-grey-1);
+  --conduction-tag-border-radius: var(--skeleton-border-radius-md);
+  --conduction-tag-padding: var(--skeleton-size-xs);
+  --conduction-tag-icon-margin-inline-end: var(--skeleton-size-2xs);
+  --conduction-tag-remove-background-color: #ffbdad;
+  --conduction-tag-remove-text-color: #e44f2a;
+}
+
+.tag {
+  display: inline-block;
+  width: fit-content;
+  font-size: var(--conduction-tag-font-size);
+  color: var(--conduction-tag-color);
+  background-color: var(--conduction-tag-background-color);
+  padding-inline-start: var(--conduction-tag-padding);
+  padding-inline-end: var(--conduction-tag-padding);
+  padding-block-start: var(--conduction-tag-padding);
+  padding-block-end: var(--conduction-tag-padding);
+}
+
+.tag > *:not(:last-child) {
+  margin-inline-end: var(--conduction-tag-icon-margin-inline-end);
+}
+
+.clickable :hover {
+  cursor: pointer;
+}
+
+.remove {
+  padding-inline-end: 4px;
+}
+
+.tagContainer {
+  display: flex;
+}
+
+.removeTag:hover {
+  cursor: pointer;
+  background-color: var(--conduction-tag-remove-background-color);
+  color: var(--conduction-tag-remove-text-color);
+}

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/components/topNav/index.ts

@@ -1,4 +1,4 @@
-import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
-import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
-
-export { PrimaryTopNav, SecondaryTopNav };
+import { PrimaryTopNav } from "./primaryTopNav/PrimaryTopNav";
+import { SecondaryTopNav } from "./secondaryTopNav/SecondaryTopNav";
+
+export { PrimaryTopNav, SecondaryTopNav };

package/src/custom.d.ts

@@ -1,4 +1,4 @@
-declare module "*.svg";
-declare module "*.jpg";
-declare module "*.png";
-declare module "*.module.css";
+declare module "*.svg";
+declare module "*.jpg";
+declare module "*.png";
+declare module "*.module.css";

package/lib/components/statusSteps/StatusSteps.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-interface IStatusStep {
-    title: string;
-    checked?: boolean;
-    current?: boolean;
-    expanded?: boolean;
-    subSteps?: string[];
-}
-interface StatusStepsProps {
-    steps: IStatusStep[];
-}
-export declare const StatusSteps: ({ steps }: StatusStepsProps) => JSX.Element;
-export {};

package/lib/components/statusSteps/StatusSteps.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Step, StepExpandedIcon, StepHeader, StepHeading, StepList, StepMarker, StepSection, SubStep, SubStepHeading, SubStepList, SubStepMarker, } from "@gemeente-denhaag/process-steps";
-export const StatusSteps = ({ steps }) => {
-    return (_jsx(StepList, { children: steps.map(({ title, checked, current, expanded, subSteps }, idx) => (_jsxs(Step, { ...{ checked, current, expanded }, children: [_jsx(StepSection, { children: _jsxs(StepHeader, { children: [_jsx(StepMarker, { children: idx + 1 }), _jsx(StepHeading, { children: title }), subSteps && _jsx(StepExpandedIcon, {})] }) }), subSteps && (_jsx(SubStepList, { children: subSteps.map((subStep) => (_jsxs(SubStep, { children: [_jsx(SubStepMarker, {}), _jsx(SubStepHeading, { children: subStep })] }, idx))) }))] }, idx))) }));
-};

package/lib/custom.d copy.d.ts

@@ -1,5 +0,0 @@
-declare module "*.svg";
-declare module "*.jpg";
-declare module "*.png";
-declare module "*.module.css";
-declare module "@utrecht/component-library-react/dist/css-module";

package/lib/custom.d copy.js

@@ -1 +0,0 @@
-"use strict";