@conduction/components 2.2.19 → 2.2.21

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

@@ -0,0 +1,93 @@
+.backgroundImageWrapper {
+  background-size: cover;
+  background-position: 48% 39%;
+  max-width: 100%;
+  padding: 5rem 0 10rem;
+}
+
+.rightImageWrapper {
+  padding-block: 48px;
+  background-color: var(--utrecht-page-header-background-color) !important;
+}
+
+.wrapper {
+  padding-block-start: 72px;
+  padding-block-end: 72px;
+  width: auto !important;
+}
+
+.card {
+  width: fit-content;
+  padding-inline-start: 48px;
+  padding-inline-end: 48px;
+  padding-block-start: 40px;
+  padding-block-end: 40px;
+  border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
+}
+
+.card:hover {
+  background-color: var(--conduction-card-wrapper-background-color);
+  cursor: default;
+  border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
+}
+
+.cardTitle,
+.cardAndImageTitle {
+  border-block-end: var(--conduction-card-wrapper-header-border-block-end);
+  color: var(--conduction-card-header-title-color, var(--conduction-card-wrapper-color)) !important;
+}
+
+.cardAndImageTitle {
+  width: max-content;
+}
+
+.cardDescription {
+  color: var(--conduction-card-wrapper-color) !important;
+}
+
+.cardSubTitle,
+.subTitle {
+  position: relative;
+  font-style: italic;
+  display: block;
+  margin-block-end: var(--utrecht-space-block-md);
+  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;
+}
+
+.image {
+  width: 50% !important;
+  object-fit: contain;
+}
+
+.title,
+.description,
+.subTitle {
+  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;
+}

package/src/components/jumbotron/Jumbotron.tsx

@@ -0,0 +1,119 @@
+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";
+
+interface JumbotronProps {
+  title: string;
+  ariaLabel: {
+    container: string;
+    card: string;
+  };
+  role: string;
+  subTitle?: string;
+  description?: string;
+  image?: {
+    placement: "false" | "background" | "right";
+    url: string;
+  };
+  isCard?: boolean;
+  searchForm?: {
+    element: JSX.Element;
+    show: boolean;
+  };
+}
+
+export const Jumbotron: React.FC<JumbotronProps> = ({
+  title,
+  ariaLabel,
+  role,
+  subTitle,
+  description,
+  image,
+  isCard,
+  searchForm,
+}) => {
+  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>
+  );
+};
+
+const JumbotronCard: React.FC<JumbotronProps> = ({ title, ariaLabel, subTitle, description, 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} />
+      </div>
+    );
+
+  return (
+    <CardWrapper aria-label={ariaLabel.card} role="contentinfo" className={styles.card}>
+      <Heading1 className={styles.cardTitle}>{title} </Heading1>
+      <span className={styles.cardSubTitle}>{subTitle}</span>
+
+      <Paragraph className={styles.cardDescription}>{description}</Paragraph>
+    </CardWrapper>
+  );
+};
+
+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>}
+
+          {description && <Paragraph className={styles.description}>{description}</Paragraph>}
+        </div>
+        {searchForm?.show && searchForm.element}
+      </section>
+    </Container>
+  );
+};

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

@@ -1,15 +1,15 @@
-.logoContainer {
-  height: 100%;
-}
-
-.logo {
-  background-size: 100% 100%;
-}
-
-.authenticatedLogo {
-  background-image: var(--conduction-authenticated-logo-background);
-}
-
-.unauthenticatedLogo {
-  background-image: var(--conduction-unauthenticated-logo-background);
-}
+.logoContainer {
+  height: 100%;
+}
+
+.logo {
+  background-size: 100% 100%;
+}
+
+.authenticatedLogo {
+  background-image: var(--conduction-authenticated-logo-background);
+}
+
+.unauthenticatedLogo {
+  background-image: var(--conduction-unauthenticated-logo-background);
+}

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/components/topNav/primaryTopNav/PrimaryTopNav.tsx

@@ -4,11 +4,42 @@ import clsx from "clsx";
 import { Link } from "@utrecht/component-library-react/dist/css-module";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core";
 
 interface ITopNavItemBase {
   label: string;
   icon?: JSX.Element;
-  current?: boolean;
+  current?: boolean | ICurrentItemJSONFormat;
+}
+
+interface ICurrentItemJSONFormat {
+  pathname: string;
+  operator: "equals" | "includes";
+  filterCondition?: {
+    filter: string;
+    value: string;
+    isObject: boolean;
+  };
+}
+
+interface IIconJSONFormat {
+  icon?: {
+    icon: IconName;
+    prefix: IconPrefix;
+    placement: "left" | "right";
+  };
+  customIcon?: {
+    icon: string;
+    placement: "left" | "right";
+  };
+}
+
+interface IHandleClickJSONFormat {
+  link: string;
+  setFilter?: {
+    filter: string;
+    value: string;
+  };
 }
 
 interface ITopNavItemWithSubItems extends ITopNavItemBase {
@@ -17,7 +48,8 @@ interface ITopNavItemWithSubItems extends ITopNavItemBase {
 }
 
 interface ITopNavItemWithoutSubItems extends ITopNavItemBase {
-  handleClick?: () => any;
+  handleClick?: () => any | IHandleClickJSONFormat;
+  type: "readme" | "internal" | "external";
   subItems?: never;
 }
 

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

@@ -41,6 +41,7 @@ import { ToolTip } from "./components/toolTip/ToolTip";
 import { Pagination } from "./components/Pagination/Pagination";
 import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
 import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
+import { Jumbotron } from "./components/jumbotron/Jumbotron";
 
 export {
   DownloadCard,
@@ -83,4 +84,5 @@ export {
   Tab,
   TabPanel,
   HorizontalOverflowWrapper,
+  Jumbotron,
 };