@conduction/components 2.2.48 → 2.2.49

package/README.md

@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.49: Removed Jumbotron component.
   - 2.2.48: Updated CardHeader and package.json.
   - 2.2.46 / 2.2.47: Fixed minor css parse error.
   - 2.2.45: Updated Pagination and select to ensure more WCAG compliancy.

package/lib/index.d.ts

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

package/lib/index.js

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

package/package.json

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

package/src/index.ts

@@ -41,7 +41,6 @@ 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";
 import DisplaySwitch from "./components/displaySwitch/DisplaySwitch";
 
 export {
@@ -84,6 +83,5 @@ export {
   Tab,
   TabPanel,
   HorizontalOverflowWrapper,
-  Jumbotron,
   DisplaySwitch
 };

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

@@ -1,23 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,88 +0,0 @@
-.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.module.css

@@ -1,88 +0,0 @@
-.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

@@ -1,151 +0,0 @@
-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>
-  );
-};