@conduction/components 2.2.20 → 2.2.22

package/README.md

@@ -4,6 +4,11 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.22: Updated Jumbotron component to be more customizable.
+  - 2.2.21: 
+    - Removed warning from HorizontalOverflowWrapper.
+    - Added Jumbotron component.
+    - Updated card-header to align hover states.
   - 2.2.20: Updated primary top nav to have more types.
   - 2.2.19: Refactored primary top nav to simplify sub-items.
   - 2.2.18:

package/lib/components/card/cardHeader/CardHeader.module.css

@@ -24,6 +24,16 @@
   border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
 }
 
+.container:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .title > * {
   color: var(--conduction-card-header-title-color) !important;
 }

package/lib/components/card/cardWrapper/CardWrapper.module.css

@@ -33,6 +33,7 @@
   border-bottom: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width))
     var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
     var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
+  position: relative;
 }
 
 .container:hover {

package/lib/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.js

@@ -32,5 +32,5 @@ export const HorizontalOverflowWrapper = ({ children, ariaLabels }) => {
         setCanScrollRight(wrapperRef.current.scrollLeft + wrapperRef.current.clientWidth < wrapperRef.current.scrollWidth);
         setCanScrollLeft(wrapperRef.current.scrollLeft > 0);
     };
-    return (_jsxs("div", { className: styles.container, children: [canScrollLeft && (_jsx(Button, { className: clsx(styles.scrollButton, styles.left), onClick: scrollLeft, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollLeftButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) })), canScrollRight && (_jsx(Button, { className: clsx(styles.scrollButton, styles.right), onClick: scrollRight, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollRightButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) })), _jsx("div", { ref: wrapperRef, className: styles.wrapper, onScroll: checkScrollDirections, children: children })] }));
+    return (_jsxs("div", { className: styles.container, children: [canScrollLeft && (_jsx(Button, { className: clsx(styles.scrollButton), onClick: scrollLeft, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollLeftButton, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) })), canScrollRight && (_jsx(Button, { className: clsx(styles.scrollButton, styles.right), onClick: scrollRight, appearance: "secondary-action-button", "aria-label": ariaLabels.scrollRightButton, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) })), _jsx("div", { ref: wrapperRef, className: styles.wrapper, onScroll: checkScrollDirections, children: children })] }));
 };

package/lib/components/jumbotron/Jumbotron.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+interface JumbotronProps {
+    title: string;
+    ariaLabel: {
+        container: string;
+        card: string;
+    };
+    role: string;
+    subTitle?: string;
+    description?: string;
+    image?: {
+        placement: "false" | "background" | "right";
+        url: string;
+    };
+    isCard?: boolean;
+    container?: boolean;
+    searchForm?: {
+        element: JSX.Element;
+        show: boolean;
+    };
+}
+export declare const Jumbotron: React.FC<JumbotronProps>;
+export {};

package/lib/components/jumbotron/Jumbotron.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Container } from "../container/Container";
+import { CardWrapper } from "../card";
+export const Jumbotron = ({ title, ariaLabel, role, subTitle, description, image, isCard, searchForm, container, }) => {
+    return (_jsx(OptionalContainer, { ...{ container }, children: _jsx("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), children: _jsx(Page, { children: _jsx(PageContent, { children: _jsx(ImageContainer, { image: { placement: image?.placement ?? "false", url: image?.url ?? "" }, children: _jsxs(SearchForm, { searchForm: { show: searchForm?.show ?? false, element: searchForm?.element ?? _jsx(_Fragment, {}) }, children: [isCard && (_jsx(JumbotronCard, { ...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm } })), !isCard && (_jsx(JumbotronContent, { ...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm } }))] }) }) }) }) }) }));
+};
+const OptionalContainer = ({ children, container }) => {
+    if (container === true)
+        return _jsx(Container, { layoutClassName: styles.wrapper, children: children });
+    return _jsx(_Fragment, { children: children });
+};
+const ImageContainer = ({ children, image }) => {
+    if (image.placement === "right")
+        return (_jsxs("div", { className: styles.imageRightContainer, children: [children, _jsx(Image, { src: image.url, alt: "jumbotron-image", className: styles.image })] }));
+    if (image.placement === "false" || image.placement === "background")
+        return _jsx(_Fragment, { children: children });
+    return _jsx(_Fragment, { children: children });
+};
+const SearchForm = ({ children, searchForm, }) => {
+    if (searchForm.show)
+        return (_jsxs("section", { className: clsx(styles.headerSearchForm), children: [children, searchForm.element] }));
+    return _jsx(_Fragment, { children: children });
+};
+const JumbotronCard = ({ title, ariaLabel, subTitle, description, image, searchForm }) => {
+    return (_jsxs(CardWrapper, { "aria-label": ariaLabel.card, role: "contentinfo", className: styles.card, children: [_jsxs(Heading1, { className: clsx(image?.placement === "right" ? styles.cardAndImageTitle : styles.cardTitle), children: [title, " "] }), _jsx("span", { className: styles.cardSubTitle, children: subTitle }), _jsx(Paragraph, { className: styles.cardDescription, children: description })] }));
+};
+const JumbotronContent = ({ title, subTitle, description, image, searchForm }) => {
+    return (_jsxs("div", { children: [_jsx(Heading1, { className: clsx(clsx(styles.title, !subTitle && styles.titleSingle)), children: title }), subTitle && _jsx("span", { className: styles.subTitle, children: subTitle }), description && _jsx(Paragraph, { className: styles.description, children: description })] }));
+};

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

@@ -0,0 +1,88 @@
+.wrapper {
+  padding-block-start: 72px;
+  padding-block-end: 72px;
+  width: auto !important;
+}
+
+.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;
+}
+
+.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 {
+  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;
+}
+
+.cardSubTitle,
+.subTitle {
+  position: relative;
+  font-style: italic;
+  display: block;
+  margin-block-end: var(--utrecht-space-block-md);
+  font-size: var(--utrecht-document-font-size);
+}
+
+.cardDescription {
+  color: var(--conduction-card-wrapper-color) !important;
+}
+
+.image {
+  width: 50% !important;
+  object-fit: contain;
+}
+
+.title,
+.description,
+.subTitle {
+  color: var(--utrecht-page-header-color) !important;
+}
+
+.titleSingle {
+  margin-block-end: var(--utrecht-space-block-2xs);
+}

package/lib/index.d.ts

@@ -24,4 +24,5 @@ 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";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, };
+import { Jumbotron } from "./components/jumbotron/Jumbotron";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, Jumbotron, };

package/lib/index.js

@@ -17,4 +17,5 @@ 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";
-export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, };
+import { Jumbotron } from "./components/jumbotron/Jumbotron";
+export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, DetailsCard, InfoCard, Container, Breadcrumbs, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, ToolTip, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, Tabs, TabList, Tab, TabPanel, HorizontalOverflowWrapper, Jumbotron, };

package/package.json

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

package/src/components/card/cardHeader/CardHeader.module.css

@@ -24,6 +24,16 @@
   border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
 }
 
+.container:before {
+  z-index: 1;
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
 .title > * {
   color: var(--conduction-card-header-title-color) !important;
 }

package/src/components/card/cardWrapper/CardWrapper.module.css

@@ -33,6 +33,7 @@
   border-bottom: var(--conduction-card-wrapper-border-bottom-width, var(--conduction-card-wrapper-border-width))
     var(--conduction-card-wrapper-border-bottom-style, var(--conduction-card-wrapper-border-style))
     var(--conduction-card-wrapper-border-bottom-color, var(--conduction-card-wrapper-border-color));
+  position: relative;
 }
 
 .container:hover {

package/src/components/horizontalOverflowWrapper/HorizontalOverflowWrapper.tsx

@@ -52,7 +52,7 @@ export const HorizontalOverflowWrapper: React.FC<HorizontalOverflowWrapperProps>
     <div className={styles.container}>
       {canScrollLeft && (
         <Button
-          className={clsx(styles.scrollButton, styles.left)}
+          className={clsx(styles.scrollButton)}
           onClick={scrollLeft}
           appearance="secondary-action-button"
           aria-label={ariaLabels.scrollLeftButton}

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

@@ -0,0 +1,88 @@
+.wrapper {
+  padding-block-start: 72px;
+  padding-block-end: 72px;
+  width: auto !important;
+}
+
+.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;
+}
+
+.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 {
+  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;
+}
+
+.cardSubTitle,
+.subTitle {
+  position: relative;
+  font-style: italic;
+  display: block;
+  margin-block-end: var(--utrecht-space-block-md);
+  font-size: var(--utrecht-document-font-size);
+}
+
+.cardDescription {
+  color: var(--conduction-card-wrapper-color) !important;
+}
+
+.image {
+  width: 50% !important;
+  object-fit: contain;
+}
+
+.title,
+.description,
+.subTitle {
+  color: var(--utrecht-page-header-color) !important;
+}
+
+.titleSingle {
+  margin-block-end: var(--utrecht-space-block-2xs);
+}

package/src/components/jumbotron/Jumbotron.tsx

@@ -0,0 +1,151 @@
+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 { Container } from "../container/Container";
+import { CardWrapper } from "../card";
+
+interface JumbotronProps {
+  title: string;
+  ariaLabel: {
+    container: string;
+    card: string;
+  };
+  role: string;
+  subTitle?: string;
+  description?: string;
+  image?: {
+    placement: "false" | "background" | "right";
+    url: string;
+  };
+  isCard?: boolean;
+  container?: boolean;
+  searchForm?: {
+    element: JSX.Element;
+    show: boolean;
+  };
+}
+
+export const Jumbotron: React.FC<JumbotronProps> = ({
+  title,
+  ariaLabel,
+  role,
+  subTitle,
+  description,
+  image,
+  isCard,
+  searchForm,
+  container,
+}) => {
+  return (
+    <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>
+  );
+};
+
+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}>
+        {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={clsx(image?.placement === "right" ? styles.cardAndImageTitle : 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 }) => {
+  return (
+    <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>
+  );
+};

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