@conduction/components 2.0.4 → 2.0.5

package/README.md

@@ -4,7 +4,8 @@
 
 - **Version 2**
 
-  - 2.0.4: added layoutClassName to InfoCard
+  - 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/package.json

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

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, {}) }));
-};