@conduction/components 2.2.20 → 2.2.21

package/README.md

@@ -4,6 +4,10 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 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,22 @@
+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;
+    searchForm?: {
+        element: JSX.Element;
+        show: boolean;
+    };
+}
+export declare const Jumbotron: React.FC<JumbotronProps>;
+export {};

package/lib/components/jumbotron/Jumbotron.js

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

package/lib/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/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.21",
   "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,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/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,
 };