@conduction/components 2.0.7 → 2.0.9

package/src/components/statusSteps/StatusSteps.tsx

@@ -1,54 +1,54 @@
-import * as React from "react";
-import {
-  Step,
-  StepExpandedIcon,
-  StepHeader,
-  StepHeading,
-  StepList,
-  StepMarker,
-  StepSection,
-  SubStep,
-  SubStepHeading,
-  SubStepList,
-  SubStepMarker,
-} from "@gemeente-denhaag/process-steps";
-
-interface IStatusStep {
-  title: string;
-  checked?: boolean;
-  current?: boolean;
-  expanded?: boolean;
-  subSteps?: string[];
-}
-
-interface StatusStepsProps {
-  steps: IStatusStep[];
-}
-
-export const StatusSteps: React.FC<StatusStepsProps> = ({ steps }) => {
-  return (
-    <StepList>
-      {steps.map(({ title, checked, current, expanded, subSteps }, idx) => (
-        <Step key={idx} {...{ checked, current, expanded }}>
-          <StepSection>
-            <StepHeader>
-              <StepMarker>{idx + 1}</StepMarker>
-              <StepHeading>{title}</StepHeading>
-              {subSteps && <StepExpandedIcon />}
-            </StepHeader>
-          </StepSection>
-          {subSteps && (
-            <SubStepList>
-              {subSteps.map((subStep: string) => (
-                <SubStep key={idx}>
-                  <SubStepMarker />
-                  <SubStepHeading>{subStep}</SubStepHeading>
-                </SubStep>
-              ))}
-            </SubStepList>
-          )}
-        </Step>
-      ))}
-    </StepList>
-  );
-};
+import * as React from "react";
+import {
+  Step,
+  StepExpandedIcon,
+  StepHeader,
+  StepHeading,
+  StepList,
+  StepMarker,
+  StepSection,
+  SubStep,
+  SubStepHeading,
+  SubStepList,
+  SubStepMarker,
+} from "@gemeente-denhaag/process-steps";
+
+interface IStatusStep {
+  title: string;
+  checked?: boolean;
+  current?: boolean;
+  expanded?: boolean;
+  subSteps?: string[];
+}
+
+interface StatusStepsProps {
+  steps: IStatusStep[];
+}
+
+export const StatusSteps: React.FC<StatusStepsProps> = ({ steps }) => {
+  return (
+    <StepList>
+      {steps.map(({ title, checked, current, expanded, subSteps }, idx) => (
+        <Step key={idx} {...{ checked, current, expanded }}>
+          <StepSection>
+            <StepHeader>
+              <StepMarker>{idx + 1}</StepMarker>
+              <StepHeading>{title}</StepHeading>
+              {subSteps && <StepExpandedIcon />}
+            </StepHeader>
+          </StepSection>
+          {subSteps && (
+            <SubStepList>
+              {subSteps.map((subStep: string) => (
+                <SubStep key={idx}>
+                  <SubStepMarker />
+                  <SubStepHeading>{subStep}</SubStepHeading>
+                </SubStep>
+              ))}
+            </SubStepList>
+          )}
+        </Step>
+      ))}
+    </StepList>
+  );
+};

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

@@ -1,29 +1,29 @@
-: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-child-margin-inline: var(--skeleton-size-2xs);
-}
-
-.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);
-  border-radius: var(--conduction-tag-border-radius);
-  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-child-margin-inline);
-}
-
-.clickable :hover {
-  cursor: pointer;
-}
+: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-child-margin-inline: var(--skeleton-size-2xs);
+}
+
+.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);
+  border-radius: var(--conduction-tag-border-radius);
+  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-child-margin-inline);
+}
+
+.clickable :hover {
+  cursor: pointer;
+}

package/src/components/tag/Tag.tsx

@@ -1,17 +1,17 @@
-import * as React from "react";
-import * as styles from "./Tag.module.css";
-import clsx from "clsx";
-
-interface TagProps {
-  label: string;
-  icon?: JSX.Element;
-  onClick?: () => any;
-  layoutClassName?: string;
-}
-
-export const Tag: React.FC<TagProps> = ({ label, icon, onClick, layoutClassName }) => (
-  <div className={clsx(styles.tag, [layoutClassName && layoutClassName], onClick && styles.clickable)} {...{ onClick }}>
-    {icon && <span>{icon}</span>}
-    <span>{label}</span>
-  </div>
-);
+import * as React from "react";
+import * as styles from "./Tag.module.css";
+import clsx from "clsx";
+
+interface TagProps {
+  label: string;
+  icon?: JSX.Element;
+  onClick?: () => any;
+  layoutClassName?: string;
+}
+
+export const Tag: React.FC<TagProps> = ({ label, icon, onClick, layoutClassName }) => (
+  <div className={clsx(styles.tag, [layoutClassName && layoutClassName], onClick && styles.clickable)} {...{ onClick }}>
+    {icon && <span>{icon}</span>}
+    <span>{label}</span>
+  </div>
+);

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

@@ -0,0 +1,4 @@
+.wrapper {
+  display: inline-block;
+  position: relative;
+}

package/src/components/toolTip/ToolTip.tsx

@@ -0,0 +1,24 @@
+import _ from "lodash";
+import * as React from "react";
+import ReactTooltip from "react-tooltip";
+import * as styles from "./ToolTip.module.css";
+
+interface ToolTipProps {
+  children: React.ReactNode;
+  tooltip: string;
+  layoutClassName?: string;
+}
+
+export const ToolTip: React.FC<ToolTipProps> = ({ children, layoutClassName, tooltip }) => {
+  return (
+    <div className={styles.wrapper}>
+      <div data-tip={tooltip} className={layoutClassName && layoutClassName}>
+        {children}
+      </div>
+
+      <ReactTooltip place={"top"} type={"dark"} effect={"solid"} />
+    </div>
+  );
+};
+
+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/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -1,60 +1,65 @@
-:root {
-  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
-  --conduction-primary-top-nav-color: var(--skeleton-color-white);
-  --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
-  --conduction-primary-top-nav-background-color-hover: var(--skeleton-color-secondary-5);
-  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
-}
-
-.primary:hover {
-  cursor: pointer;
-}
-
-.ul {
-  margin: unset;
-  display: flex;
-  padding-inline-start: unset;
-  align-items: center;
-}
-
-.li {
-  list-style-type: none;
-  display: block;
-  position: relative;
-}
-
-.primary {
-  font-weight: 500;
-  width: fit-content;
-  background-color: var(--conduction-primary-top-nav-background-color);
-}
-
-.primary .link {
-  display: block;
-  color: var(--conduction-primary-top-nav-color);
-  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
-  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
-  padding-block-start: var(--conduction-primary-top-nav-item-padding);
-  padding-block-end: var(--conduction-primary-top-nav-item-padding);
-}
-
-.primary .li:hover {
-  background-color: var(--conduction-primary-top-nav-background-color-hover);
-}
-
-.primary .li:hover .dropdown {
-  display: block;
-  z-index: 1;
-}
-
-.dropdown {
-  left: 0;
-  padding: 0;
-  width: 100%;
-  display: none;
-  position: absolute;
-  list-style-type: none;
-  background-color: var(--conduction-primary-top-nav-background-color);
-  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
-  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
-}
+:root {
+  --conduction-primary-top-nav-item-padding: var(--skeleton-size-md);
+  --conduction-primary-top-nav-color: var(--skeleton-color-white);
+  --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3);
+  --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2);
+  --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md);
+  --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2);
+}
+
+.primary {
+  font-weight: 500;
+  width: fit-content;
+  background-color: var(--conduction-primary-top-nav-background-color);
+}
+
+.primary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
+}
+
+.li {
+  list-style-type: none;
+  display: block;
+  position: relative;
+}
+
+.li:hover {
+  background-color: var(--conduction-primary-top-nav-background-color-hover);
+}
+
+.current {
+  background-color: var(--conduction-primary-top-nav-background-color-active);
+}
+
+.primary .link {
+  display: block;
+  color: var(--conduction-primary-top-nav-color);
+  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
+  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
+  padding-block-start: var(--conduction-primary-top-nav-item-padding);
+  padding-block-end: var(--conduction-primary-top-nav-item-padding);
+}
+
+.primary .li:hover .dropdown {
+  display: block;
+  z-index: 1;
+}
+
+.dropdown {
+  left: 0;
+  padding: 0;
+  width: 100%;
+  display: none;
+  position: absolute;
+  list-style-type: none;
+  background-color: var(--conduction-primary-top-nav-background-color);
+  border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
+  border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius);
+}

package/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx

@@ -1,52 +1,54 @@
-import * as React from "react";
-import { Link } from "@gemeente-denhaag/components-react";
-import * as styles from "./PrimaryTopNav.module.css";
-import clsx from "clsx";
-
-interface ITopNavItem {
-  label: string;
-  icon?: JSX.Element;
-  handleClick?: () => any;
-  subItems?: {
-    label: string;
-    icon?: JSX.Element;
-    handleClick?: () => any;
-  }[];
-}
-
-export interface TopNavProps {
-  items: ITopNavItem[];
-  layoutClassName?: string;
-}
-
-export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
-  return (
-    <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
-      <nav className={styles.primary}>
-        <ul className={styles.ul}>
-          {items.map(({ label, icon, handleClick, subItems }, idx) => (
-            <li className={styles.li} key={idx}>
-              <div onClick={handleClick}>
-                <Link className={styles.link} icon={icon} iconAlign="start">
-                  {label}
-                </Link>
-              </div>
-
-              {subItems && (
-                <ul className={styles.dropdown}>
-                  {subItems.map(({ label, icon, handleClick }, idx) => (
-                    <li key={idx} className={styles.li} onClick={handleClick}>
-                      <Link className={styles.link} icon={icon} iconAlign="start">
-                        {label}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </div>
-  );
-};
+import * as React from "react";
+import { Link } from "@gemeente-denhaag/components-react";
+import * as styles from "./PrimaryTopNav.module.css";
+import clsx from "clsx";
+
+interface ITopNavItem {
+  label: string;
+  icon?: JSX.Element;
+  current?: boolean;
+  handleClick?: () => any;
+  subItems?: {
+    label: string;
+    icon?: JSX.Element;
+    current?: boolean;
+    handleClick?: () => any;
+  }[];
+}
+
+export interface TopNavProps {
+  items: ITopNavItem[];
+  layoutClassName?: string;
+}
+
+export const PrimaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
+  return (
+    <div className={clsx(styles.primary, layoutClassName && layoutClassName)}>
+      <nav className={styles.primary}>
+        <ul className={styles.ul}>
+          {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
+            <li className={clsx(styles.li, current && styles.current)} key={idx}>
+              <div onClick={handleClick}>
+                <Link className={styles.link} icon={icon} iconAlign="start">
+                  {label}
+                </Link>
+              </div>
+
+              {subItems && (
+                <ul className={styles.dropdown}>
+                  {subItems.map(({ label, icon, current, handleClick }, idx) => (
+                    <li key={idx} className={clsx(styles.li, current && styles.current)} onClick={handleClick}>
+                      <Link className={styles.link} icon={icon} iconAlign="start">
+                        {label}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};

package/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css

@@ -1,43 +1,48 @@
-:root {
-  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
-  --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
-  --conduction-secondary-top-nav-color: var(--skeleton-color-white);
-  --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
-  --conduction-secondary-top-nav-background-color-hover: var(--skeleton-color-secondary-3);
-  --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
-}
-
-.secondary:hover {
-  cursor: pointer;
-}
-
-.ul {
-  margin: unset;
-  display: flex;
-  padding-inline-start: unset;
-  align-items: center;
-}
-
-.li {
-  list-style-type: none;
-  display: block;
-  padding-inline-start: var(--conduction-secondary-top-nav-item-padding);
-  padding-inline-end: var(--conduction-secondary-top-nav-item-padding);
-  padding-block-start: var(--conduction-secondary-top-nav-item-padding);
-  padding-block-end: var(--conduction-secondary-top-nav-item-padding);
-}
-
-.secondary {
-  font-weight: var(--conduction-secondary-top-nav-font-weight);
-  width: fit-content;
-  font-size: var(--conduction-secondary-top-nav-font-size);
-  background-color: var(--conduction-secondary-top-nav-background-color);
-}
-
-.secondary .link {
-  color: var(--conduction-secondary-top-nav-color);
-}
-
-.secondary .li:hover {
-  background-color: var(--conduction-secondary-top-nav-background-color-hover);
-}
+:root {
+  --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md);
+  --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md);
+  --conduction-secondary-top-nav-color: var(--skeleton-color-white);
+  --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5);
+  --conduction-secondary-top-nav-background-color-hover: rgba(0, 0, 0, 0.1);
+  --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light);
+  --conduction-secondary-top-nav-color-active: rgba(0, 0, 0, 0.1);
+}
+
+.secondary:hover {
+  cursor: pointer;
+}
+
+.ul {
+  margin: unset;
+  display: flex;
+  padding-inline-start: unset;
+  align-items: center;
+}
+
+.li {
+  list-style-type: none;
+  display: block;
+  padding-inline-start: var(--conduction-secondary-top-nav-item-padding);
+  padding-inline-end: var(--conduction-secondary-top-nav-item-padding);
+  padding-block-start: var(--conduction-secondary-top-nav-item-padding);
+  padding-block-end: var(--conduction-secondary-top-nav-item-padding);
+}
+
+.li:hover {
+  background-color: var(--conduction-secondary-top-nav-background-color-hover);
+}
+
+.current {
+  background-color: var(--conduction-secondary-top-nav-color-active);
+}
+
+.secondary {
+  font-weight: var(--conduction-secondary-top-nav-font-weight);
+  width: fit-content;
+  font-size: var(--conduction-secondary-top-nav-font-size);
+  background-color: var(--conduction-secondary-top-nav-background-color);
+}
+
+.secondary .link {
+  color: var(--conduction-secondary-top-nav-color);
+}

package/src/components/topNav/secondaryTopNav/SecondaryTopNav.tsx

@@ -1,27 +1,27 @@
-import * as React from "react";
-import * as styles from "./SecondaryTopNav.module.css";
-import { Link } from "@gemeente-denhaag/components-react";
-import clsx from "clsx";
-
-interface TopNavProps {
-  items: { label: string; icon?: JSX.Element; handleClick: () => any }[];
-  layoutClassName?: string;
-}
-
-export const SecondaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
-  return (
-    <div className={clsx(styles.secondary, layoutClassName && layoutClassName)}>
-      <nav>
-        <ul className={styles.ul}>
-          {items.map(({ label, icon, handleClick }, idx) => (
-            <li className={styles.li} key={idx} onClick={handleClick}>
-              <Link className={styles.link} icon={icon} iconAlign="start">
-                {label}
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </div>
-  );
-};
+import * as React from "react";
+import * as styles from "./SecondaryTopNav.module.css";
+import { Link } from "@gemeente-denhaag/components-react";
+import clsx from "clsx";
+
+interface TopNavProps {
+  items: { label: string; icon?: JSX.Element; current?: boolean; handleClick: () => any }[];
+  layoutClassName?: string;
+}
+
+export const SecondaryTopNav: React.FC<TopNavProps> = ({ items, layoutClassName }) => {
+  return (
+    <div className={clsx(styles.secondary, layoutClassName && layoutClassName)}>
+      <nav>
+        <ul className={styles.ul}>
+          {items.map(({ label, icon, current, handleClick }, idx) => (
+            <li className={clsx(styles.li, current && styles.current)} key={idx} onClick={handleClick}>
+              <Link className={styles.link} icon={icon} iconAlign="start">
+                {label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </div>
+  );
+};

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";