@conduction/components 1.0.28 → 2.0.1

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

@@ -1,9 +1,9 @@
 :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-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 {
@@ -26,20 +26,20 @@
 .primary {
   font-weight: 500;
   width: fit-content;
-  background-color: var(--conduction-top-nav-background-color-primary);
+  background-color: var(--conduction-primary-top-nav-background-color);
 }
 
 .primary .link {
   display: block;
-  color: var(--conduction-top-nav-color-primary);
-  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);
+  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-top-nav-background-color-primary-hover);
+  background-color: var(--conduction-primary-top-nav-background-color-hover);
 }
 
 .primary .li:hover .dropdown {
@@ -54,7 +54,7 @@
   display: none;
   position: absolute;
   list-style-type: none;
-  background-color: var(--conduction-top-nav-background-color-primary);
-  border-bottom-right-radius: var(--nlportal-border-radius);
-  border-bottom-left-radius: var(--nlportal-border-radius);
+  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/secondaryTopNav/SecondaryTopNav.module.css

@@ -1,10 +1,10 @@
 :root {
-  --conduction-top-nav-space-inline-lg: 1.25rem;
-
-  --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);
+  --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 {
@@ -21,23 +21,23 @@
 .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);
+  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: 100;
+  font-weight: var(--conduction-secondary-top-nav-font-weight);
   width: fit-content;
-  font-size: var(--conduction-top-nav-font-size-secondary);
-  background-color: var(--conduction-top-nav-background-color-secondary);
+  font-size: var(--conduction-secondary-top-nav-font-size);
+  background-color: var(--conduction-secondary-top-nav-background-color);
 }
 
 .secondary .link {
-  color: var(--conduction-top-nav-color-secondary);
+  color: var(--conduction-secondary-top-nav-color);
 }
 
 .secondary .li:hover {
-  background-color: var(--conduction-top-nav-background-color-secondary-hover);
+  background-color: var(--conduction-secondary-top-nav-background-color-hover);
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as styles from "./SecondaryTopnav.module.css";
+import * as styles from "./SecondaryTopNav.module.css";
 import { Link } from "@gemeente-denhaag/components-react";
 import clsx from "clsx";
 

package/lib/components/formFields/select.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { Control, FieldValues } from "react-hook-form";
-import { IReactHookFormProps } from "./types";
-export interface ISelectValue {
-    label: string;
-    value: string;
-}
-interface ISelectProps {
-    control: Control<FieldValues, any>;
-    options: ISelectValue[];
-    name: string;
-    defaultValue?: any;
-    disabled?: boolean;
-}
-export declare const SelectMultiple: React.FC<ISelectProps & IReactHookFormProps>;
-export declare const SelectSingle: React.FC<ISelectProps & IReactHookFormProps>;
-export {};

package/lib/components/formFields/select.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./select.module.css";
-import { Controller } from "react-hook-form";
-import ReactSelect from "react-select";
-export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
-    return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(ReactSelect, { className: styles.select, isMulti: true, isDisabled: disabled, ...{ options, value, onChange, errors, defaultValue } }));
-        } }));
-};
-export const SelectSingle = ({ name, options, errors, control, validation, }) => {
-    return (_jsx(Controller, { ...{ control, name }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return _jsx(ReactSelect, { className: styles.select, ...{ options, onChange, value, errors }, isClearable: true });
-        } }));
-};

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,75 +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);
-}
-
-.secondary .link a {
-  text-decoration: none;
-}