@conduction/components 2.0.4 → 2.0.6

package/README.md

@@ -4,7 +4,14 @@
 
 - **Version 2**
 
-  - 2.0.4: added layoutClassName to InfoCard
+  - 2.0.6: 
+    - Added optional icon with default icon to the primary and secondary button in NotificationPopUp
+    - Added a handleClick function to the DownloadCard;
+    - Added clickFunction, layoutClassName and renamed tag to label in the Tag component;
+    - Edited DetailsCard to accommodate changes made to Tag component;
+    - Edited RichContentCard to accommodate changes made to Tag component;
+  - 2.0.5: wrong camelcase in npm publish/build fix;
+  - 2.0.4: added layoutClassName to InfoCard;
   - 2.0.3: Bugfix: --conduction-container typo removed;
   - 2.0.2: Refactor SelectSingle formField with optional props;
   - 2.0.1: Refactor SecondaryTopNav css module import;

package/lib/components/card/detailsCard/DetailsCard.js

@@ -6,5 +6,5 @@ import { navigate } from "gatsby";
 import { ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
 export const DetailsCard = ({ title, subHeader, introduction, link, tags, layoutClassName, }) => {
-    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] }) }));
+    return (_jsx("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), onClick: () => navigate(link.href), children: _jsxs("div", { className: styles.content, children: [_jsxs("div", { children: [_jsx("div", { className: styles.title, children: title }), _jsx("span", { className: styles.subHeader, children: subHeader })] }), tags && (_jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) })), _jsx("div", { className: styles.introduction, children: introduction }), _jsx("div", { className: styles.link, children: _jsx(Link, { icon: _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) })] }) }));
 };

package/lib/components/card/downloadCard/DownloadCard.d.ts

@@ -5,6 +5,7 @@ interface DownloadCardProps {
     sizeKb: string;
     downloadLabel: string;
     layoutClassName?: string;
+    handleClick: () => any;
 }
 export declare const DownloadCard: React.FC<DownloadCardProps>;
 export {};

package/lib/components/card/downloadCard/DownloadCard.js

@@ -3,6 +3,6 @@ import * as styles from "./DownloadCard.module.css";
 import { DownloadIcon } from "@gemeente-denhaag/icons";
 import { Link } from "@gemeente-denhaag/components-react";
 import clsx from "clsx";
-export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel }) => {
-    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: downloadLabel })] }));
+export const DownloadCard = ({ icon, label, sizeKb, layoutClassName, downloadLabel, handleClick, }) => {
+    return (_jsxs("div", { className: clsx(styles.container, [layoutClassName && layoutClassName]), children: [_jsxs("div", { className: styles.content, children: [_jsx("div", { className: styles.icon, children: icon }), _jsxs("div", { children: [label, " (", sizeKb, "kb)"] })] }), _jsx("div", { onClick: handleClick, children: _jsx(Link, { icon: _jsx(DownloadIcon, {}), iconAlign: "start", children: downloadLabel }) })] }));
 };

package/lib/components/card/richContentCard/RichContentCard.js

@@ -5,7 +5,7 @@ import * as styles from "./RichContentCard.module.css";
 import { ExternalLinkIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
 import { Tag } from "../../tag/Tag";
 export const RichContentCard = ({ link, labelsWithIcon, tags, contentLinks, linkIsExternal, }) => {
-    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { ...{ tag } }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.link, onClick: () => navigate(link.href), children: _jsx(Link, { icon: linkIsExternal ? _jsx(ExternalLinkIcon, {}) : _jsx(ArrowRightIcon, {}), iconAlign: "start", children: link.label }) }), _jsx("div", { className: styles.labelsWithIcon, children: labelsWithIcon.map(({ label, icon }, idx) => (_jsx(LabelWithIcon, { ...{ label, icon } }, idx))) }), _jsx("div", { className: styles.tags, children: tags.map((tag, idx) => (_jsx(Tag, { label: tag }, idx))) }), contentLinks && (_jsxs("div", { className: styles.contentLinks, children: [_jsx(Divider, {}), contentLinks.map(({ title, subTitle, href }, idx) => (_jsx(ContentLink, { ...{ title, subTitle, href } }, idx)))] }))] }));
 };
 const LabelWithIcon = ({ label, icon }) => {
     return (_jsxs("div", { className: styles.labelWithIcon, children: [_jsx("span", { className: styles.labelWithIcon_icon, children: icon }), _jsx("span", { className: styles.labelWithIcon_label, children: label })] }));

package/lib/components/notificationPopUp/NotificationPopUp.d.ts

@@ -6,10 +6,12 @@ export interface NotificationPopUpProps {
     hide: () => void;
     primaryButton: {
         label: string;
+        icon?: JSX.Element;
         handleClick: () => any;
     };
     secondaryButton?: {
         label: string;
+        icon?: JSX.Element;
         handleClick: () => any;
     };
     layoutClassName?: string;

package/lib/components/notificationPopUp/NotificationPopUp.js

@@ -16,7 +16,7 @@ export const NotificationPopUp = ({ title, description, isVisible, hide, primary
             setAnimationVisible(true);
         }, animationDuration);
     };
-    const modal = (_jsx(StylesProvider, { children: _jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", children: secondaryButton.label }) })), _jsx(Button, { icon: _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
+    const modal = (_jsx(StylesProvider, { children: _jsxs("div", { style: { animationDuration: `${animationDuration}ms` }, className: clsx(styles.modal, animationVisible && styles.visible, layoutClassName), children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [secondaryButton && (_jsx("div", { onClick: () => handleClick(secondaryButton.handleClick), children: _jsx(Link, { icon: secondaryButton.icon ?? _jsx(CloseIcon, {}), iconAlign: "start", children: secondaryButton.label }) })), _jsx(Button, { icon: primaryButton.icon ?? _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
     return isVisible ? ReactDOM.createPortal(modal, document.body) : null;
 };
 export const NotificationPopUpController = () => {

package/lib/components/tag/Tag.d.ts

@@ -1,6 +1,9 @@
 import * as React from "react";
 interface TagProps {
-    tag: string;
+    label: string;
+    icon?: JSX.Element;
+    onClick?: () => any;
+    layoutClassName?: string;
 }
 export declare const Tag: React.FC<TagProps>;
 export {};

package/lib/components/tag/Tag.js

@@ -1,3 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./Tag.module.css";
-export const Tag = ({ tag }) => _jsx("span", { className: styles.tag, children: tag });
+import clsx from "clsx";
+export const Tag = ({ label, icon, onClick, layoutClassName }) => (_jsxs("div", { className: clsx(styles.tag, [layoutClassName && layoutClassName], onClick && styles.clickable), ...{ onClick }, children: [icon && _jsx("span", { children: icon }), _jsx("span", { children: label })] }));

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

@@ -1,9 +1,10 @@
 :root {
   --conduction-tag-font-size: var(--skeleton-font-size-sm);
   --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-backgrond-color: var(--skeleton-color-grey-1);
+  --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 {
@@ -11,10 +12,18 @@
   width: fit-content;
   font-size: var(--conduction-tag-font-size);
   color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-backgrond-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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/card/detailsCard/DetailsCard.tsx

@@ -38,7 +38,7 @@ export const DetailsCard: React.FC<DetailsCardProps> = ({
         {tags && (
           <div className={styles.tags}>
             {tags.map((tag, idx) => (
-              <Tag key={idx} {...{ tag }} />
+              <Tag key={idx} label={tag} />
             ))}
           </div>
         )}

package/src/components/card/downloadCard/DownloadCard.tsx

@@ -10,9 +10,17 @@ interface DownloadCardProps {
   sizeKb: string;
   downloadLabel: string;
   layoutClassName?: string;
+  handleClick: () => any;
 }
 
-export const DownloadCard: React.FC<DownloadCardProps> = ({ icon, label, sizeKb, layoutClassName, downloadLabel }) => {
+export const DownloadCard: React.FC<DownloadCardProps> = ({
+  icon,
+  label,
+  sizeKb,
+  layoutClassName,
+  downloadLabel,
+  handleClick,
+}) => {
   return (
     <div className={clsx(styles.container, [layoutClassName && layoutClassName])}>
       <div className={styles.content}>
@@ -22,10 +30,11 @@ export const DownloadCard: React.FC<DownloadCardProps> = ({ icon, label, sizeKb,
           {label} ({sizeKb}kb)
         </div>
       </div>
-
-      <Link icon={<DownloadIcon />} iconAlign="start">
-        {downloadLabel}
-      </Link>
+      <div onClick={handleClick}>
+        <Link icon={<DownloadIcon />} iconAlign="start">
+          {downloadLabel}
+        </Link>
+      </div>
     </div>
   );
 };

package/src/components/card/richContentCard/RichContentCard.tsx

@@ -46,7 +46,7 @@ export const RichContentCard: React.FC<RichContentCardProps> = ({
 
       <div className={styles.tags}>
         {tags.map((tag, idx) => (
-          <Tag key={idx} {...{ tag }} />
+          <Tag key={idx} label={tag} />
         ))}
       </div>
 

package/src/components/notificationPopUp/NotificationPopUp.tsx

@@ -12,10 +12,12 @@ export interface NotificationPopUpProps {
   hide: () => void;
   primaryButton: {
     label: string;
+    icon?: JSX.Element;
     handleClick: () => any;
   };
   secondaryButton?: {
     label: string;
+    icon?: JSX.Element;
     handleClick: () => any;
   };
   layoutClassName?: string;
@@ -54,12 +56,15 @@ export const NotificationPopUp: React.FC<NotificationPopUpProps> = ({
         <div className={styles.buttons}>
           {secondaryButton && (
             <div onClick={() => handleClick(secondaryButton.handleClick)}>
-              <Link icon={<CloseIcon />} iconAlign="start">
+              <Link icon={secondaryButton.icon ?? <CloseIcon />} iconAlign="start">
                 {secondaryButton.label}
               </Link>
             </div>
           )}
-          <Button icon={<ArrowRightIcon />} onClick={() => handleClick(primaryButton.handleClick)}>
+          <Button
+            icon={primaryButton.icon ?? <ArrowRightIcon />}
+            onClick={() => handleClick(primaryButton.handleClick)}
+          >
             {primaryButton.label}
           </Button>
         </div>

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

@@ -1,9 +1,10 @@
 :root {
   --conduction-tag-font-size: var(--skeleton-font-size-sm);
   --conduction-tag-color: var(--skeleton-black);
-  --conduction-tag-backgrond-color: var(--skeleton-color-grey-1);
+  --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 {
@@ -11,10 +12,18 @@
   width: fit-content;
   font-size: var(--conduction-tag-font-size);
   color: var(--conduction-tag-color);
-  background-color: var(--conduction-tag-backgrond-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,8 +1,17 @@
 import * as React from "react";
 import * as styles from "./Tag.module.css";
+import clsx from "clsx";
 
 interface TagProps {
-  tag: string;
+  label: string;
+  icon?: JSX.Element;
+  onClick?: () => any;
+  layoutClassName?: string;
 }
 
-export const Tag: React.FC<TagProps> = ({ tag }) => <span className={styles.tag}>{tag}</span>;
+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/lib/components/modals/NotificationModal.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-export interface ModalProps {
-    title: string;
-    description: string | JSX.Element;
-    isShown: boolean;
-    hide: () => void;
-    layoutClassName: string;
-    primaryButton: {
-        label: string;
-        handleClick: () => any;
-    };
-    closeButton?: {
-        label: string;
-    };
-}
-export declare const NotificationModal: React.FC<ModalProps>;
-export declare const toggleNotificationModal: () => {
-    isShown: boolean;
-    show: () => void;
-    hide: () => void;
-};

package/lib/components/modals/NotificationModal.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import * as styles from "./NotificationModal.module.css";
-import ReactDOM from "react-dom";
-import { Button, Heading3, Link, Paragraph } from "@gemeente-denhaag/components-react";
-import clsx from "clsx";
-import { CloseIcon, ArrowRightIcon } from "@gemeente-denhaag/icons";
-export const NotificationModal = ({ title, description, isShown, hide, primaryButton, closeButton, layoutClassName, }) => {
-    const [fadeOut, setFadeOut] = React.useState(true);
-    const stylesContainer = document.getElementById("stylesContainer");
-    const animationDurationToken = getComputedStyle(document.documentElement).getPropertyValue("--conduction-notification-animation-duration");
-    const animationDurationString = animationDurationToken.replace(/\D/g, "");
-    const animationDuration = parseInt(animationDurationString);
-    const handleClick = (clickFunction) => {
-        setFadeOut(!setFadeOut);
-        clickFunction && clickFunction();
-        setTimeout(() => {
-            hide();
-            setFadeOut(true);
-        }, animationDuration);
-    };
-    const modal = (_jsx("div", { className: clsx(styles.cssanimation, fadeOut ? styles.fadeInBottom : styles.fadeOutBottom, layoutClassName), children: _jsxs("div", { className: styles.modal, children: [_jsx(Heading3, { children: title }), _jsx(Paragraph, { children: description }), _jsxs("div", { className: styles.buttons, children: [closeButton ? (_jsx("div", { onClick: () => handleClick(), children: _jsx(Link, { icon: _jsx(CloseIcon, {}), iconAlign: "start", children: closeButton.label }) })) : (_jsx(_Fragment, {})), _jsx(Button, { icon: _jsx(ArrowRightIcon, {}), onClick: () => handleClick(primaryButton.handleClick), children: primaryButton.label })] })] }) }));
-    return isShown ? ReactDOM.createPortal(modal, stylesContainer) : null;
-};
-export const toggleNotificationModal = () => {
-    const [isShown, setIsShown] = React.useState(false);
-    const show = () => setIsShown(true);
-    const hide = () => setIsShown(false);
-    return {
-        isShown,
-        show,
-        hide,
-    };
-};

package/lib/components/modals/NotificationModal.module.css

@@ -1,56 +0,0 @@
-.modal {
-  background: var(--denhaag-color-warmgrey-1);
-  padding-inline-start: var(--nlportal-space-inline-lg);
-  padding-inline-end: var(--nlportal-space-inline-lg);
-  padding-block-start: var(--nlportal-space-block-lg);
-  padding-block-end: var(--nlportal-space-block-lg);
-  box-shadow: var(--conduction-notification-box-shadow);
-  border-radius: var(--nlportal-document-border-radius);
-}
-
-.modal > *:not(:last-child) {
-  margin-block-end: var(--nlportal-space-block-md);
-}
-
-.buttons {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
-.buttons > *:not(:last-child) {
-  margin-inline-end: var(--nlportal-space-inline-md);
-}
-
-.cssanimation {
-  animation-duration: var(--conduction-notification-animation-duration);
-  animation-fill-mode: both;
-}
-
-.fadeInBottom {
-  animation-name: fadeInBottom;
-}
-
-@keyframes fadeInBottom {
-  from {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.fadeOutBottom {
-  animation-name: fadeOutBottom;
-}
-
-@keyframes fadeOutBottom {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}

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

@@ -1,12 +0,0 @@
-import * as React from "react";
-interface TopNavProps {
-    items: {
-        label: string;
-        icon?: JSX.Element;
-        handleClick: () => any;
-    }[];
-    layoutClassName?: string;
-}
-export declare const PrimaryTopNav: React.FC<TopNavProps>;
-export declare const SecondaryTopNav: React.FC<TopNavProps>;
-export {};

package/lib/components/topNav/TopNav.js

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

package/lib/components/topNav/TopNav.module.css

@@ -1,71 +0,0 @@
-:root {
-  --conduction-top-nav-space-inline-lg: 1.25rem;
-
-  --conduction-top-nav-color-primary: #ffffff;
-  --conduction-top-nav-background-color-primary: #0b71a1;
-  --conduction-top-nav-background-color-primary-hover: rgba(255, 255, 255, 0.2);
-
-  --conduction-top-nav-font-size-secondary: 16px;
-  --conduction-top-nav-color-secondary: #ffffff;
-  --conduction-top-nav-background-color-secondary: #084f70;
-  --conduction-top-nav-background-color-secondary-hover: rgba(0, 0, 0, 0.2);
-}
-
-/*
- * Global
-*/
-.primary:hover,
-.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-top-nav-space-inline-lg);
-  padding-inline-end: var(--conduction-top-nav-space-inline-lg);
-  padding-block-start: var(--conduction-top-nav-space-inline-lg);
-  padding-block-end: var(--conduction-top-nav-space-inline-lg);
-}
-
-/* 
- * Primary Top Navigation
-*/
-.primary {
-  font-weight: 500;
-  width: fit-content;
-  background-color: var(--conduction-top-nav-background-color-primary);
-}
-
-.primary .link {
-  color: var(--conduction-top-nav-color-primary);
-}
-
-.primary .li:hover {
-  background-color: var(--conduction-top-nav-background-color-primary-hover);
-}
-
-/* 
- * Secondary Top Navigation
-*/
-.secondary {
-  font-weight: 100;
-  width: fit-content;
-  font-size: var(--conduction-top-nav-font-size-secondary);
-  background-color: var(--conduction-top-nav-background-color-secondary);
-}
-
-.secondary .link {
-  color: var(--conduction-top-nav-color-secondary);
-}
-
-.secondary .li:hover {
-  background-color: var(--conduction-top-nav-background-color-secondary-hover);
-}

package/lib/pages/index.d.ts

@@ -1,3 +0,0 @@
-import * as React from "react";
-declare const IndexPage: React.FC;
-export default IndexPage;

package/lib/pages/index.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { QuoteWrapper } from "../components/quoteWrapper/QuoteWrapper";
-import { TestingTemplate } from "../templates/testing/TestingTemplate";
-const IndexPage = () => (_jsx(QuoteWrapper, { children: _jsx(TestingTemplate, {}) }));
-export default IndexPage;

package/lib/templates/landing/LandingTemplate.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare const LandingTemplate: React.FC;

package/lib/templates/landing/LandingTemplate.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container } from "../../components/container/Container";
-import { QuoteWrapper } from "../../components/quoteWrapper/QuoteWrapper";
-export const LandingTemplate = () => {
-    return (_jsx(Container, { children: _jsx(QuoteWrapper, { color: "blue" }) }));
-};

package/lib/templates/landing/LandingTemplate.module.css

@@ -1,17 +0,0 @@
-.heading {
-  padding-block-end: var(--nlportal-space-inline-4xl);
-  padding-block-start: var(--nlportal-space-inline-4xl);
-}
-
-.subHeading {
-  font-weight: 100 !important;
-  padding-block-start: var(--nlportal-space-block-4xl);
-}
-
-.cardsContainer {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: var(--nlportal-space-inline-xl);
-  padding-block-end: var(--nlportal-space-inline-2xl);
-  padding-block-start: var(--nlportal-space-inline-2xl);
-}

package/lib/templates/testing/TestingTemplate.d.ts

@@ -1,2 +0,0 @@
-import * as React from "react";
-export declare const TestingTemplate: React.FC;

package/lib/templates/testing/TestingTemplate.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container } from "../../components/container/Container";
-import { QuoteWrapper } from "../../components/quoteWrapper/QuoteWrapper";
-export const TestingTemplate = () => {
-    return (_jsx(Container, { children: _jsx(QuoteWrapper, {}) }));
-};