From aa81d13210884b5658ac1b87cb9c55ac5ae60e77 Mon Sep 17 00:00:00 2001
From: Remko <remko@conduction.nl>
Date: Mon, 25 Mar 2024 10:01:32 +0100
Subject: [PATCH] Removed Jumbotron component

---
 README.md                                     |   1 +
 package.json                                  |   2 +-
 src/components/jumbotron/Jumbotron.module.css |  88 ----------
 src/components/jumbotron/Jumbotron.tsx        | 151 ------------------
 src/index.ts                                  |   2 -
 5 files changed, 2 insertions(+), 242 deletions(-)
 delete mode 100644 src/components/jumbotron/Jumbotron.module.css
 delete mode 100644 src/components/jumbotron/Jumbotron.tsx

diff --git a/README.md b/README.md
index 9aadcf6..c8f2c4c 100644
--- a/README.md
+++ b/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.
diff --git a/package.json b/package.json
index 8ee2011..fd21c7d 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/jumbotron/Jumbotron.module.css b/src/components/jumbotron/Jumbotron.module.css
deleted file mode 100644
index bac4c3c..0000000
--- a/src/components/jumbotron/Jumbotron.module.css
+++ /dev/null
@@ -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);
-}
diff --git a/src/components/jumbotron/Jumbotron.tsx b/src/components/jumbotron/Jumbotron.tsx
deleted file mode 100644
index c27526c..0000000
--- a/src/components/jumbotron/Jumbotron.tsx
+++ /dev/null
@@ -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>
-  );
-};
diff --git a/src/index.ts b/src/index.ts
index 932337e..c5bbbe2 100644
--- a/src/index.ts
+++ b/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
 };