@conduction/components 2.2.18 → 2.2.20

package/src/components/metaIcon/MetaIcon.module.css

@@ -1,29 +1,29 @@
-:root {
-  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
-  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
-.container > *:not(:last-child) {
-  margin-block-end: var(--skeleton-size-xs);
-}
-
-.icon {
-  color: var(--conduction-meta-icon-icon-color);
-  height: var(--conduction-meta-icon-icon-size);
-  width: var(--conduction-meta-icon-icon-size);
-}
-
-.icon > svg {
-  height: 100%;
-  width: 100%;
-}
-
-.value {
-  font-weight: var(--skeleton-font-weight-bold);
-}
+:root {
+  --conduction-meta-icon-icon-size: var(--skeleton-size-lg);
+  --conduction-meta-icon-icon-color: var(--skeleton-color-secondary-4);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.container > *:not(:last-child) {
+  margin-block-end: var(--skeleton-size-xs);
+}
+
+.icon {
+  color: var(--conduction-meta-icon-icon-color);
+  height: var(--conduction-meta-icon-icon-size);
+  width: var(--conduction-meta-icon-icon-size);
+}
+
+.icon > svg {
+  height: 100%;
+  width: 100%;
+}
+
+.value {
+  font-weight: var(--skeleton-font-weight-bold);
+}

package/src/components/quoteWrapper/QuoteWrapper.module.css

@@ -1,12 +1,12 @@
-:root {
-  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
-  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
-  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
-}
-
-.container {
-  border-left-width: var(--conduction-quote-wrapper-border-width);
-  border-left-style: solid;
-  border-left-color: var(--conduction-quote-wrapper-border-color);
-  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
-}
+:root {
+  --conduction-quote-wrapper-border-width: var(--skeleton-size-sm);
+  --conduction-quote-wrapper-border-color: var(--skeleton-color-grey-1);
+  --conduction-quote-wrapper-padding-inline: var(--skeleton-size-lg);
+}
+
+.container {
+  border-left-width: var(--conduction-quote-wrapper-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-wrapper-border-color);
+  padding-inline-start: var(--conduction-quote-wrapper-padding-inline);
+}

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/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

@@ -116,6 +116,11 @@
 }
 .primary .link {
   text-decoration: none;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+  max-width: 100%;
+  white-space: wrap;
 }
 
 .primary .link:not(.currentLink) {
@@ -187,6 +192,11 @@
   margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
 }
 
+.li:hover .dropdown {
+  display: block;
+  z-index: 1;
+}
+
 @media only screen and (min-width: 992px) {
   .container {
     width: fit-content;
@@ -215,11 +225,6 @@
     display: none;
   }
 
-  .primary .li:hover .dropdown {
-    display: block;
-    z-index: 1;
-  }
-
   .mobileLink {
     margin-block-end: unset;
   }

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

@@ -4,20 +4,57 @@ import clsx from "clsx";
 import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
 
-interface ITopNavItem {
+interface ITopNavItemBase {
   label: string;
   icon?: JSX.Element;
-  current?: boolean;
-  handleClick?: () => any;
-  subItems?: {
-    label: string;
-    icon?: JSX.Element;
-    current?: boolean;
-    handleClick?: () => any;
-  }[];
+  current?: boolean | ICurrentItemJSONFormat;
 }
 
+interface ICurrentItemJSONFormat {
+  pathname: string;
+  operator: "equals" | "includes";
+  filterCondition?: {
+    filter: string;
+    value: string;
+    isObject: boolean;
+  };
+}
+
+interface IIconJSONFormat {
+  icon?: {
+    icon: IconName;
+    prefix: IconPrefix;
+    placement: "left" | "right";
+  };
+  customIcon?: {
+    icon: string;
+    placement: "left" | "right";
+  };
+}
+
+interface IHandleClickJSONFormat {
+  link: string;
+  setFilter?: {
+    filter: string;
+    value: string;
+  };
+}
+
+interface ITopNavItemWithSubItems extends ITopNavItemBase {
+  handleClick?: never;
+  subItems: ITopNavItem[];
+}
+
+interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
+  handleClick?: () => any | IHandleClickJSONFormat;
+  type: "readme" | "internal" | "external";
+  subItems?: never;
+}
+
+export type ITopNavItem = ITopNavItemWithSubItems | ITopNavItemWithoutSubItems;
+
 export interface TopNavProps {
   items: ITopNavItem[];
   mobileLogo?: JSX.Element;
@@ -26,30 +63,24 @@ export interface TopNavProps {
 
 export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
-  const [subNavIsOpen, setSubNavIsOpen] = React.useState({});
+  const [isMobile, setIsMobile] = React.useState<boolean>(window.innerWidth < 992);
 
-  const handleItemClick = (handleClick?: () => any) => {
-    if (handleClick) {
-      handleClick();
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 992);
+    };
 
-      setIsOpen(false);
-    }
-  };
+    window.addEventListener("resize", handleResize);
 
-  const handleSubItemMenu = (idx: number, value: boolean) => {
-    setSubNavIsOpen({
-      ...subNavIsOpen,
-      [idx as keyof typeof subNavIsOpen]: value,
-    });
-  };
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
-  const screenWidth = window.innerWidth;
+  const handleSubItemClick = (handleClick: any) => {
+    setIsOpen(false);
+
+    handleClick();
+  };
 
-  React.useEffect(() => {
-    if (screenWidth > 992) {
-      setSubNavIsOpen({});
-    }
-  }, [screenWidth]);
   return (
     <div className={clsx(styles.container, layoutClassName && layoutClassName)}>
       <div className={styles.menuToggleContainer}>
@@ -63,17 +94,7 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
       <nav className={clsx(styles.primary, isOpen && styles.isOpen)}>
         <ul className={styles.ul}>
           {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
-            <li
-              onClick={() =>
-                !subItems
-                  ? handleItemClick(handleClick)
-                  : screenWidth > 992
-                  ? handleItemClick(handleClick)
-                  : handleSubItemMenu(idx, !subNavIsOpen[idx as keyof typeof subNavIsOpen] ?? true)
-              }
-              className={clsx(styles.li, current && styles.current)}
-              key={idx}
-            >
+            <li onClick={handleClick} className={clsx(styles.li, current && styles.current)} key={idx}>
               <Link
                 className={clsx(
                   styles.link,
@@ -84,21 +105,16 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
               >
                 {icon}
                 {label}{" "}
-                {subItems && screenWidth < 992 && (
-                  <FontAwesomeIcon
-                    className={clsx(styles.toggleIcon, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}
-                    icon={faChevronRight}
-                  />
-                )}
+                {subItems && isMobile && <FontAwesomeIcon className={styles.toggleIcon} icon={faChevronRight} />}
               </Link>
 
               {subItems && (
-                <ul className={clsx(styles.dropdown, subNavIsOpen[idx as keyof typeof subNavIsOpen] && styles.isOpen)}>
+                <ul className={styles.dropdown}>
                   {subItems.map(({ label, icon, current, handleClick }, idx) => (
                     <li
                       key={idx}
                       className={clsx(styles.li, current && styles.current)}
-                      onClick={() => handleItemClick(handleClick)}
+                      onClick={() => handleSubItemClick(handleClick)}
                     >
                       <Link className={clsx(styles.link, styles.label, current && styles.currentLink)}>
                         {icon}

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/temp/Temp.d.ts

@@ -1,5 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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";