@conduction/components 2.2.21 → 2.2.23

package/src/components/jumbotron/Jumbotron.module.css

@@ -1,3 +1,9 @@
+.wrapper {
+  padding-block-start: 72px;
+  padding-block-end: 72px;
+  width: auto !important;
+}
+
 .backgroundImageWrapper {
   background-size: cover;
   background-position: 48% 39%;
@@ -10,10 +16,22 @@
   background-color: var(--utrecht-page-header-background-color) !important;
 }
 
-.wrapper {
-  padding-block-start: 72px;
-  padding-block-end: 72px;
-  width: auto !important;
+.imageRightContainer {
+  display: flex;
+  margin: auto;
+  justify-content: space-between;
+  gap: var(--utrecht-space-inline-xl);
+  align-items: center;
+}
+
+.headerSearchForm > *:not(:last-child) {
+  margin-block-end: 32px;
+}
+
+.headerSearchForm > .subHeading2 {
+  width: 100%;
+  max-width: 800px;
+  margin-block-end: 48px;
 }
 
 .card {
@@ -41,10 +59,6 @@
   width: max-content;
 }
 
-.cardDescription {
-  color: var(--conduction-card-wrapper-color) !important;
-}
-
 .cardSubTitle,
 .subTitle {
   position: relative;
@@ -54,12 +68,8 @@
   font-size: var(--utrecht-document-font-size);
 }
 
-.imageRightContainer {
-  display: flex;
-  margin: auto;
-  justify-content: space-between;
-  gap: var(--utrecht-space-inline-xl);
-  align-items: center;
+.cardDescription {
+  color: var(--conduction-card-wrapper-color) !important;
 }
 
 .image {
@@ -73,21 +83,6 @@
   color: var(--utrecht-page-header-color) !important;
 }
 
-.title {
-  margin-block-end: var(--utrecht-space-block-md);
-}
-
-.headerSearchForm > *:not(:last-child) {
-  margin-block-end: 32px;
-}
-
-.headerSearchForm > .subHeading2 {
-  width: 100%;
-  max-width: 800px;
-  margin-block-end: 48px;
-}
-
-.searchFormContainer {
-  width: 100%;
-  max-width: 650px;
+.titleSingle {
+  margin-block-end: var(--utrecht-space-block-2xs);
 }

package/src/components/jumbotron/Jumbotron.tsx

@@ -2,8 +2,8 @@ import * as React from "react";
 import * as styles from "./Jumbotron.module.css";
 import clsx from "clsx";
 import { Paragraph, Page, PageContent, Heading1, Image } from "@utrecht/component-library-react/dist/css-module";
-import { CardWrapper } from "../card";
 import { Container } from "../container/Container";
+import { CardWrapper } from "../card";
 
 interface JumbotronProps {
   title: string;
@@ -19,6 +19,7 @@ interface JumbotronProps {
     url: string;
   };
   isCard?: boolean;
+  container?: boolean;
   searchForm?: {
     element: JSX.Element;
     show: boolean;
@@ -34,51 +35,103 @@ export const Jumbotron: React.FC<JumbotronProps> = ({
   image,
   isCard,
   searchForm,
+  container,
 }) => {
   return (
-    <div
-      aria-label={ariaLabel.container}
-      role={role}
-      style={{
-        backgroundImage: image?.placement === "background" ? `url(${image.url})` : "",
-      }}
-      className={clsx(
-        image?.placement === "background" && styles.backgroundImageWrapper,
-        image?.placement === "right" && styles.rightImageWrapper,
-        (!image || image.placement === "false") && styles.wrapper,
-      )}
-    >
-      <Page>
-        <PageContent>
-          {isCard && (
-            <JumbotronCard {...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm }} />
-          )}
-          {!isCard && (
-            <JumbotronContent {...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm }} />
-          )}
-        </PageContent>
-      </Page>
-    </div>
+    <OptionalContainer {...{ container }}>
+      <div
+        aria-label={ariaLabel.container}
+        role={role}
+        style={{
+          backgroundImage: image?.placement === "background" ? `url(${image.url})` : "",
+        }}
+        className={clsx(
+          image?.placement === "background" && styles.backgroundImageWrapper,
+          image?.placement === "right" && styles.rightImageWrapper,
+        )}
+      >
+        <Page>
+          <PageContent>
+            <ImageContainer image={{ placement: image?.placement ?? "false", url: image?.url ?? "" }}>
+              <SearchForm searchForm={{ show: searchForm?.show ?? false, element: searchForm?.element ?? <></> }}>
+                {isCard && (
+                  <JumbotronCard {...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm }} />
+                )}
+                {!isCard && (
+                  <JumbotronContent {...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm }} />
+                )}
+              </SearchForm>
+            </ImageContainer>
+          </PageContent>
+        </Page>
+      </div>
+    </OptionalContainer>
   );
 };
 
-const JumbotronCard: React.FC<JumbotronProps> = ({ title, ariaLabel, subTitle, description, image }) => {
-  if (image?.placement === "right")
+interface ContainerProps {
+  children: React.ReactNode;
+  container: boolean | undefined;
+}
+
+const OptionalContainer: React.FC<ContainerProps> = ({ children, container }) => {
+  if (container === true) return <Container layoutClassName={styles.wrapper}>{children}</Container>;
+
+  return <>{children}</>;
+};
+
+interface ImageContainerProps {
+  children: React.ReactNode;
+  image: {
+    placement: "false" | "background" | "right";
+    url: string;
+  };
+}
+
+const ImageContainer: React.FC<ImageContainerProps> = ({ children, image }) => {
+  if (image.placement === "right")
     return (
       <div className={styles.imageRightContainer}>
-        <CardWrapper aria-label={ariaLabel.card} role="contentinfo" className={styles.card}>
-          <Heading1 className={styles.cardAndImageTitle}>{title} </Heading1>
-          <span className={styles.cardSubTitle}>{subTitle}</span>
-
-          <Paragraph className={styles.cardDescription}>{description}</Paragraph>
-        </CardWrapper>
-        <Image src={image?.url} alt={"jumbotron-image"} className={styles.image} />
+        {children}
+        {<Image src={image.url} alt={"jumbotron-image"} className={styles.image} />}
       </div>
     );
 
+  if (image.placement === "false" || image.placement === "background") return <>{children}</>;
+
+  return <>{children}</>;
+};
+
+interface SearchFormProps {
+  children: React.ReactNode;
+  searchForm: {
+    element: JSX.Element;
+    show: boolean;
+  };
+}
+
+const SearchForm: React.FC<SearchFormProps> = ({
+  children,
+
+  searchForm,
+}) => {
+  if (searchForm.show)
+    return (
+      <section className={clsx(styles.headerSearchForm)}>
+        {children}
+        {searchForm.element}
+      </section>
+    );
+
+  return <>{children}</>;
+};
+
+const JumbotronCard: React.FC<JumbotronProps> = ({ title, ariaLabel, subTitle, description, image, searchForm }) => {
   return (
     <CardWrapper aria-label={ariaLabel.card} role="contentinfo" className={styles.card}>
-      <Heading1 className={styles.cardTitle}>{title} </Heading1>
+      <Heading1 className={clsx(image?.placement === "right" ? styles.cardAndImageTitle : styles.cardTitle)}>
+        {title}{" "}
+      </Heading1>
       <span className={styles.cardSubTitle}>{subTitle}</span>
 
       <Paragraph className={styles.cardDescription}>{description}</Paragraph>
@@ -87,33 +140,12 @@ const JumbotronCard: React.FC<JumbotronProps> = ({ title, ariaLabel, subTitle, d
 };
 
 const JumbotronContent: React.FC<JumbotronProps> = ({ title, subTitle, description, image, searchForm }) => {
-  if (image?.placement === "right")
-    return (
-      <div className={styles.imageRightContainer}>
-        <div>
-          <Heading1 className={styles.title}>{title}</Heading1>
-
-          {subTitle && <span className={styles.subTitle}>{subTitle}</span>}
-
-          {description && <Paragraph className={styles.description}>{description}</Paragraph>}
-        </div>
-
-        {image?.placement === "right" && <Image src={image?.url} alt={"jumbotron-image"} className={styles.image} />}
-      </div>
-    );
-
   return (
-    <Container layoutClassName={styles.wrapper}>
-      <section className={clsx(searchForm?.show && styles.headerSearchForm)}>
-        <div>
-          <Heading1 className={styles.title}>{title}</Heading1>
-
-          {subTitle && <span className={styles.subTitle}>{subTitle}</span>}
+    <div>
+      <Heading1 className={clsx(clsx(styles.title, !subTitle && styles.titleSingle))}>{title}</Heading1>
+      {subTitle && <span className={styles.subTitle}>{subTitle}</span>}
 
-          {description && <Paragraph className={styles.description}>{description}</Paragraph>}
-        </div>
-        {searchForm?.show && searchForm.element}
-      </section>
-    </Container>
+      {description && <Paragraph className={styles.description}>{description}</Paragraph>}
+    </div>
   );
 };

package/src/components/logo/Logo.module.css

@@ -1,15 +1,31 @@
-.logoContainer {
-  height: 100%;
-}
-
-.logo {
-  background-size: 100% 100%;
-}
-
-.authenticatedLogo {
-  background-image: var(--conduction-authenticated-logo-background);
-}
-
-.unauthenticatedLogo {
-  background-image: var(--conduction-unauthenticated-logo-background);
-}
+:root {
+  --conduction-logo-header-inline-size: 220px;
+  --conduction-logo-header-block-size: 40px;
+  --conduction-logo-header-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+
+  --conduction-logo-footer-inline-size: 330px;
+  --conduction-logo-footer-block-size: 60px;
+  --conduction-logo-footer-background-image: url("https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png");
+}
+
+.container {
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.container.header {
+  inline-size: var(--conduction-logo-header-inline-size);
+  block-size: var(--conduction-logo-header-block-size);
+  background-image: var(--conduction-logo-header-background-image);
+}
+
+.container.footer {
+  inline-size: var(--conduction-logo-footer-inline-size);
+  block-size: var(--conduction-logo-footer-block-size);
+  background-image: var(--conduction-logo-footer-background-image);
+}
+
+.container.clickable:hover {
+  cursor: pointer;
+}

package/src/components/logo/Logo.tsx

@@ -1,25 +1,21 @@
-import clsx from "clsx";
-import { Link } from "gatsby";
 import * as React from "react";
 import * as styles from "./Logo.module.css";
+import clsx from "clsx";
 
 interface LogoProps {
-  layoutClassName: string;
-  href?: string;
+  variant?: "header" | "footer";
+  onClick?: () => any;
+  layoutClassName?: string;
 }
 
-export const AuthenticatedLogo = ({ layoutClassName, href }: LogoProps): JSX.Element => {
-  return (
-    <Link className={styles.logoContainer} to={href ?? "#"}>
-      <div className={clsx(styles.authenticatedLogo, styles.logo, layoutClassName)} />
-    </Link>
-  );
-};
-
-export const UnauthenticatedLogo = ({ layoutClassName, href }: LogoProps): JSX.Element => {
+export const Logo: React.FC<LogoProps> = ({ onClick, layoutClassName, variant = "header" }) => {
   return (
-    <Link className={styles.logoContainer} to={href ?? "#"}>
-      <div className={clsx(styles.unauthenticatedLogo, styles.logo, layoutClassName)} />
-    </Link>
+    <div
+      className={clsx(styles.container, styles[variant], [
+        onClick && styles.clickable,
+        layoutClassName && layoutClassName,
+      ])}
+      {...{ onClick }}
+    />
   );
 };

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/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/src/index.ts

@@ -24,7 +24,7 @@ import {
   SelectSingle,
 } from "./components/formFields";
 import { ImageDivider } from "./components/imageDivider/ImageDivider";
-import { AuthenticatedLogo, UnauthenticatedLogo } from "./components/logo/Logo";
+import { Logo } from "./components/logo/Logo";
 import { MetaIcon } from "./components/metaIcon/MetaIcon";
 import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav";
@@ -62,8 +62,7 @@ export {
   SelectMultiple,
   SelectSingle,
   ImageDivider,
-  AuthenticatedLogo,
-  UnauthenticatedLogo,
+  Logo,
   MetaIcon,
   PrivateRoute,
   PrimaryTopNav,

package/lib/components/htmlParser/ParsedHTML.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-import { UseQueryResult } from "react-query";
-interface ParsedHTMLProps {
-    contentQuery: UseQueryResult<any, Error>;
-    location: string;
-    directories: string;
-    layoutClassName?: string;
-}
-export declare const ParsedHTML: React.FC<ParsedHTMLProps>;
-export {};

package/lib/components/htmlParser/ParsedHTML.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./ParsedHTML.module.css";
-import Parser from "html-react-parser";
-import Skeleton from "react-loading-skeleton";
-import { Alert } from "@utrecht/component-library-react/dist/css-module";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faWarning } from "@fortawesome/free-solid-svg-icons";
-import clsx from "clsx";
-import { useHtmlParser } from "./parser/useHtmlParser";
-export const ParsedHTML = ({ contentQuery, location, layoutClassName, directories }) => {
-    const { options } = useHtmlParser(location, directories);
-    if (contentQuery.isLoading)
-        return (_jsx("div", { className: styles.container, children: _jsx(Skeleton, { height: "200px" }) }));
-    if (contentQuery.isError)
-        return (_jsx("div", { className: styles.container, children: _jsx(Alert, { icon: _jsx(FontAwesomeIcon, { icon: faWarning }), type: "error", children: "Oops, something went wrong retrieving the .md file from GitHub." }) }));
-    return (_jsx("div", { className: clsx(styles.container, layoutClassName && layoutClassName), children: Parser(contentQuery.data, options) }));
-};

package/lib/components/htmlParser/ParsedHTML.module.css

@@ -1,7 +0,0 @@
-.container {
-  margin-block-start: var(--utrecht-space-block-3xl);
-}
-
-.container > div > article > *:not(:last-child) {
-  margin-block-end: var(--utrecht-space-block-lg);
-}

package/lib/components/htmlParser/parser/alert/getAlert.d.ts

@@ -1 +0,0 @@
-export declare const getAlert: (children: any, options: any, type: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/htmlParser/parser/alert/getAlert.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as styles from "./getAlert.module.css";
-import { Alert } from "@utrecht/component-library-react/dist/css-module";
-import { domToReact } from "html-react-parser";
-export const getAlert = (children, options, type) => {
-    switch (true) {
-        case type.includes("note") || type.includes("info"):
-            return (_jsx(Alert, { className: styles.info, type: "info", children: domToReact(children, options) }));
-        case type.includes("error"):
-            return (_jsx(Alert, { className: styles.error, type: "error", children: domToReact(children, options) }));
-        case type.includes("warning"):
-            return (_jsx(Alert, { className: styles.warning, type: "warning", children: domToReact(children, options) }));
-        case type.includes("succes") || type.includes("ok"):
-            return (_jsx(Alert, { className: styles.ok, type: "ok", children: domToReact(children, options) }));
-        default:
-            return _jsx(Alert, { type: "info", children: domToReact(children, options) });
-    }
-};

package/lib/components/htmlParser/parser/alert/getAlert.module.css

@@ -1,28 +0,0 @@
-.info svg {
-  fill: var(--utrecht-alert-icon-info-color);
-}
-.info p {
-  color: var(--utrecht-alert-info-color);
-}
-
-.warning svg {
-  fill: var(--utrecht-alert-icon-warning-color);
-}
-.warning p {
-  color: var(--utrecht-alert-warning-color);
-}
-
-.error svg {
-  fill: var(--utrecht-alert-icon-error-color);
-}
-.error p {
-  color: var(--utrecht-alert-error-color);
-}
-
-.ok svg {
-  fill: var(--utrecht-alert-icon-ok-color);
-}
-.ok p {
-  color: var(--utrecht-alert-ok-color);
-}
-