@conduction/components 2.1.27 → 2.1.29

package/lib/components/topNav/index.d.ts

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

package/lib/components/topNav/index.js

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

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.d.ts

@@ -1,20 +0,0 @@
-/// <reference types="react" />
-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[];
-    mobileLogo?: JSX.Element;
-    layoutClassName?: string;
-}
-export declare const PrimaryTopNav: ({ items, mobileLogo, layoutClassName }: TopNavProps) => JSX.Element;
-export {};

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as styles from "./PrimaryTopNav.module.css";
-import clsx from "clsx";
-import { Link } from "@gemeente-denhaag/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars } from "@fortawesome/free-solid-svg-icons";
-export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const handleItemClick = (handleClick) => {
-        if (handleClick) {
-            handleClick();
-            setIsOpen(false);
-        }
-    };
-    return (_jsxs("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: [_jsxs("div", { className: styles.menuToggleContainer, children: [mobileLogo, _jsx("button", { className: styles.menuToggle, onClick: () => setIsOpen((o) => !o), children: _jsx(FontAwesomeIcon, { icon: faBars }) })] }), _jsx("nav", { className: clsx(styles.primary, isOpen && styles.isOpen), children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick, subItems }, idx) => (_jsxs("li", { onClick: () => handleItemClick(handleClick), className: clsx(styles.li, current && styles.current), children: [_jsx(Link, { className: clsx(styles.link, styles.label), icon: icon, iconAlign: "start", children: label }), subItems && (_jsx("ul", { className: styles.dropdown, children: subItems.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: () => handleItemClick(handleClick), children: _jsx(Link, { className: clsx(styles.link, styles.label), icon: icon, iconAlign: "start", children: label }) }, idx))) }))] }, idx))) }) })] }));
-};

package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css

@@ -1,157 +0,0 @@
-: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);
-  --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black;
-  --conduction-primary-top-nav-toggle-icon-size: 24px;
-  --conduction-primary-top-nav-mobile-logo-padding: 18px;
-  --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x);
-}
-
-.container {
-  width: 100%;
-}
-
-.menuToggleContainer {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.menuToggleContainer > .menuToggle {
-  all: unset;
-  font-size: var(--conduction-primary-top-nav-toggle-icon-size);
-  padding: var(--conduction-primary-top-nav-mobile-logo-padding);
-}
-
-.menuToggleContainer > .menuToggle:hover {
-  cursor: pointer;
-}
-
-.primary {
-  display: none;
-}
-
-.primary.isOpen {
-  display: block;
-}
-
-.menuToggleContainer {
-  width: 100%;
-}
-
-.primary {
-  font-weight: 500;
-  width: 100%;
-  background-color: var(--conduction-primary-top-nav-background-color);
-}
-
-.primary:hover {
-  cursor: pointer;
-}
-
-.ul {
-  margin: unset;
-  padding-inline-start: unset;
-  align-items: center;
-  max-height: 80vh;
-  overflow-y: scroll;
-}
-
-.li {
-  list-style-type: none;
-  display: block;
-  position: relative;
-  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);
-}
-
-.li:hover {
-  background-color: var(--conduction-primary-top-nav-background-color-hover);
-}
-
-.current {
-  background-color: var(--conduction-primary-top-nav-background-color-active);
-  box-shadow: var(--conduction-primary-top-nav-box-shadow-active);
-}
-
-.primary .link {
-  display: block;
-  text-decoration: none;
-  color: var(--conduction-primary-top-nav-color);
-}
-
-.primary .li:hover .link {
-  color: var(--conduction-primary-top-nav-color-hover);
-}
-
-.primary .li:hover .dropdown {
-  display: block;
-  z-index: 1;
-}
-
-.dropdown {
-  left: 0;
-  top: 100%;
-  padding: 0;
-  width: 100%;
-  display: block;
-  list-style-type: none;
-  background-color: var(--conduction-primary-top-nav-dropdown-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);
-}
-
-.primary .dropdown .li .link {
-  color: var(--conduction-primary-top-nav-dropdown-color);
-}
-
-.dropdown .li:hover {
-  background: var(--conduction-primary-top-nav-dropdown-background-color-hover);
-}
-
-.dropdown > li {
-  padding-inline-start: var(--web-app-size-md);
-}
-
-.label {
-  overflow: hidden;
-  max-width: 37ch;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.label > :not(:last-child) {
-  margin-inline-end: var(--conduction-primary-top-nav-item-icon-margin);
-}
-
-@media only screen and (min-width: 992px) {
-  .container {
-    width: fit-content;
-  }
-
-  .primary {
-    display: block;
-    width: fit-content;
-  }
-
-  .ul {
-    display: flex;
-    overflow-y: unset;
-  }
-
-  .dropdown {
-    position: absolute;
-    display: none;
-  }
-
-  .menuToggleContainer {
-    display: none;
-  }
-}

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-interface TopNavProps {
-    items: {
-        label: string;
-        icon?: JSX.Element;
-        current?: boolean;
-        handleClick: () => any;
-    }[];
-    layoutClassName?: string;
-}
-export declare const SecondaryTopNav: ({ items, layoutClassName }: TopNavProps) => JSX.Element;
-export {};

package/lib/components/topNav/secondaryTopNav/SecondaryTopNav.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./SecondaryTopNav.module.css";
-import { Link } from "@gemeente-denhaag/link";
-import clsx from "clsx";
-export const SecondaryTopNav = ({ items, layoutClassName }) => {
-    return (_jsx("div", { className: clsx(styles.secondary, layoutClassName && layoutClassName), children: _jsx("nav", { children: _jsx("ul", { className: styles.ul, children: items.map(({ label, icon, current, handleClick }, idx) => (_jsx("li", { className: clsx(styles.li, current && styles.current), onClick: handleClick, children: _jsx(Link, { className: clsx(styles.link, styles.label), icon: icon, iconAlign: "start", children: label }) }, idx))) }) }) }));
-};

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

@@ -1,63 +0,0 @@
-: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);
-  --conduction-secondary-top-nav-box-shadow-active: inset 0 -4px black;
-  --conduction-secondary-top-nav-item-icon-margin: var(--skeleton-size-2x);
-}
-
-.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);
-  box-shadow: var(--conduction-secondary-top-nav-box-shadow-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);
-  display: block;
-}
-
-.label {
-  overflow: hidden;
-  max-width: 37ch;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.label > :not(:last-child) {
-  margin-inline-end: var(--conduction-secondary-top-nav-item-icon-margin);
-}

package/lib/index.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard } from "./components/card";
-import { Container } from "./components/container/Container";
-import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
-import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, SelectMultiple, SelectSingle } from "./components/formFields";
-import { ImageDivider } from "./components/imageDivider/ImageDivider";
-import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
-import { MetaIcon } from "./components/metaIcon/MetaIcon";
-import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
-import { StatusSteps } from "./components/statusSteps/StatusSteps";
-import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
-import { Tag } from "./components/tag/Tag";
-declare const NotificationPopUp: {
-    controller: () => {
-        isVisible: boolean;
-        show: () => void;
-        hide: () => void;
-    };
-    NotificationPopUp: ({ title, description, isVisible, hide, primaryButton, secondaryButton, layoutClassName, }: import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps) => JSX.Element | null;
-};
-import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
-import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
-import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
-import { CodeBlock } from "./components/codeBlock/CodeBlock";
-import { ToolTip } from "./components/toolTip/ToolTip";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };

package/lib/index.js

@@ -1,20 +0,0 @@
-import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, } from "./components/card";
-import { Container } from "./components/container/Container";
-import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
-import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
-import { InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, InputRadio, InputFile, SelectMultiple, SelectSingle, } from "./components/formFields";
-import { ImageDivider } from "./components/imageDivider/ImageDivider";
-import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
-import { MetaIcon } from "./components/metaIcon/MetaIcon";
-import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
-import { StatusSteps } from "./components/statusSteps/StatusSteps";
-import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
-import { Tag } from "./components/tag/Tag";
-import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
-const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
-import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
-import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
-import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
-import { CodeBlock } from "./components/codeBlock/CodeBlock";
-import { ToolTip } from "./components/toolTip/ToolTip";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, };