@conduction/components 2.2.21 → 2.2.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +1 -0
  2. package/lib/components/jumbotron/Jumbotron.d.ts +1 -0
  3. package/lib/components/jumbotron/Jumbotron.js +26 -13
  4. package/lib/components/jumbotron/Jumbotron.module.css +26 -31
  5. package/package.json +1 -1
  6. package/src/components/jumbotron/Jumbotron.module.css +26 -31
  7. package/src/components/jumbotron/Jumbotron.tsx +92 -60
package/README.md CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.22: Updated Jumbotron component to be more customizable.
7
8
  - 2.2.21:
8
9
  - Removed warning from HorizontalOverflowWrapper.
9
10
  - Added Jumbotron component.
package/lib/components/jumbotron/Jumbotron.d.ts CHANGED
@@ -13,6 +13,7 @@ interface JumbotronProps {
13
13
  url: string;
14
14
  };
15
15
  isCard?: boolean;
16
+ container?: boolean;
16
17
  searchForm?: {
17
18
  element: JSX.Element;
18
19
  show: boolean;
package/lib/components/jumbotron/Jumbotron.js CHANGED
@@ -1,21 +1,34 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import * as styles from "./Jumbotron.module.css";
3
3
  import clsx from "clsx";
4
4
  import { Paragraph, Page, PageContent, Heading1, Image } from "@utrecht/component-library-react/dist/css-module";
5
- import { CardWrapper } from "../card";
6
5
  import { Container } from "../container/Container";
7
- export const Jumbotron = ({ title, ariaLabel, role, subTitle, description, image, isCard, searchForm, }) => {
8
- return (_jsx("div", { "aria-label": ariaLabel.container, role: role, style: {
9
- backgroundImage: image?.placement === "background" ? `url(${image.url})` : "",
10
- }, 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 } }))] }) }) }));
6
+ import { CardWrapper } from "../card";
7
+ export const Jumbotron = ({ title, ariaLabel, role, subTitle, description, image, isCard, searchForm, container, }) => {
8
+ return (_jsx(OptionalContainer, { ...{ container }, children: _jsx("div", { "aria-label": ariaLabel.container, role: role, style: {
9
+ backgroundImage: image?.placement === "background" ? `url(${image.url})` : "",
10
+ }, 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 } }))] }) }) }) }) }) }));
11
+ };
12
+ const OptionalContainer = ({ children, container }) => {
13
+ if (container === true)
14
+ return _jsx(Container, { layoutClassName: styles.wrapper, children: children });
15
+ return _jsx(_Fragment, { children: children });
16
+ };
17
+ const ImageContainer = ({ children, image }) => {
18
+ if (image.placement === "right")
19
+ return (_jsxs("div", { className: styles.imageRightContainer, children: [children, _jsx(Image, { src: image.url, alt: "jumbotron-image", className: styles.image })] }));
20
+ if (image.placement === "false" || image.placement === "background")
21
+ return _jsx(_Fragment, { children: children });
22
+ return _jsx(_Fragment, { children: children });
23
+ };
24
+ const SearchForm = ({ children, searchForm, }) => {
25
+ if (searchForm.show)
26
+ return (_jsxs("section", { className: clsx(styles.headerSearchForm), children: [children, searchForm.element] }));
27
+ return _jsx(_Fragment, { children: children });
11
28
  };
12
- const JumbotronCard = ({ title, ariaLabel, subTitle, description, image }) => {
13
- if (image?.placement === "right")
14
- 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 })] }));
15
- 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 })] }));
29
+ const JumbotronCard = ({ title, ariaLabel, subTitle, description, image, searchForm }) => {
30
+ 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 })] }));
16
31
  };
17
32
  const JumbotronContent = ({ title, subTitle, description, image, searchForm }) => {
18
- if (image?.placement === "right")
19
- 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 })] }));
20
- 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] }) }));
33
+ 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 })] }));
21
34
  };
package/lib/components/jumbotron/Jumbotron.module.css CHANGED
@@ -1,3 +1,9 @@
1
+ .wrapper {
2
+ padding-block-start: 72px;
3
+ padding-block-end: 72px;
4
+ width: auto !important;
5
+ }
6
+
1
7
  .backgroundImageWrapper {
2
8
  background-size: cover;
3
9
  background-position: 48% 39%;
@@ -10,10 +16,22 @@
10
16
  background-color: var(--utrecht-page-header-background-color) !important;
11
17
  }
12
18
 
13
- .wrapper {
14
- padding-block-start: 72px;
15
- padding-block-end: 72px;
16
- width: auto !important;
19
+ .imageRightContainer {
20
+ display: flex;
21
+ margin: auto;
22
+ justify-content: space-between;
23
+ gap: var(--utrecht-space-inline-xl);
24
+ align-items: center;
25
+ }
26
+
27
+ .headerSearchForm > *:not(:last-child) {
28
+ margin-block-end: 32px;
29
+ }
30
+
31
+ .headerSearchForm > .subHeading2 {
32
+ width: 100%;
33
+ max-width: 800px;
34
+ margin-block-end: 48px;
17
35
  }
18
36
 
19
37
  .card {
@@ -41,10 +59,6 @@
41
59
  width: max-content;
42
60
  }
43
61
 
44
- .cardDescription {
45
- color: var(--conduction-card-wrapper-color) !important;
46
- }
47
-
48
62
  .cardSubTitle,
49
63
  .subTitle {
50
64
  position: relative;
@@ -54,12 +68,8 @@
54
68
  font-size: var(--utrecht-document-font-size);
55
69
  }
56
70
 
57
- .imageRightContainer {
58
- display: flex;
59
- margin: auto;
60
- justify-content: space-between;
61
- gap: var(--utrecht-space-inline-xl);
62
- align-items: center;
71
+ .cardDescription {
72
+ color: var(--conduction-card-wrapper-color) !important;
63
73
  }
64
74
 
65
75
  .image {
@@ -73,21 +83,6 @@
73
83
  color: var(--utrecht-page-header-color) !important;
74
84
  }
75
85
 
76
- .title {
77
- margin-block-end: var(--utrecht-space-block-md);
78
- }
79
-
80
- .headerSearchForm > *:not(:last-child) {
81
- margin-block-end: 32px;
82
- }
83
-
84
- .headerSearchForm > .subHeading2 {
85
- width: 100%;
86
- max-width: 800px;
87
- margin-block-end: 48px;
88
- }
89
-
90
- .searchFormContainer {
91
- width: 100%;
92
- max-width: 650px;
86
+ .titleSingle {
87
+ margin-block-end: var(--utrecht-space-block-2xs);
93
88
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.21",
3
+ "version": "2.2.22",
4
4
  "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
package/src/components/jumbotron/Jumbotron.module.css CHANGED
@@ -1,3 +1,9 @@
1
+ .wrapper {
2
+ padding-block-start: 72px;
3
+ padding-block-end: 72px;
4
+ width: auto !important;
5
+ }
6
+
1
7
  .backgroundImageWrapper {
2
8
  background-size: cover;
3
9
  background-position: 48% 39%;
@@ -10,10 +16,22 @@
10
16
  background-color: var(--utrecht-page-header-background-color) !important;
11
17
  }
12
18
 
13
- .wrapper {
14
- padding-block-start: 72px;
15
- padding-block-end: 72px;
16
- width: auto !important;
19
+ .imageRightContainer {
20
+ display: flex;
21
+ margin: auto;
22
+ justify-content: space-between;
23
+ gap: var(--utrecht-space-inline-xl);
24
+ align-items: center;
25
+ }
26
+
27
+ .headerSearchForm > *:not(:last-child) {
28
+ margin-block-end: 32px;
29
+ }
30
+
31
+ .headerSearchForm > .subHeading2 {
32
+ width: 100%;
33
+ max-width: 800px;
34
+ margin-block-end: 48px;
17
35
  }
18
36
 
19
37
  .card {
@@ -41,10 +59,6 @@
41
59
  width: max-content;
42
60
  }
43
61
 
44
- .cardDescription {
45
- color: var(--conduction-card-wrapper-color) !important;
46
- }
47
-
48
62
  .cardSubTitle,
49
63
  .subTitle {
50
64
  position: relative;
@@ -54,12 +68,8 @@
54
68
  font-size: var(--utrecht-document-font-size);
55
69
  }
56
70
 
57
- .imageRightContainer {
58
- display: flex;
59
- margin: auto;
60
- justify-content: space-between;
61
- gap: var(--utrecht-space-inline-xl);
62
- align-items: center;
71
+ .cardDescription {
72
+ color: var(--conduction-card-wrapper-color) !important;
63
73
  }
64
74
 
65
75
  .image {
@@ -73,21 +83,6 @@
73
83
  color: var(--utrecht-page-header-color) !important;
74
84
  }
75
85
 
76
- .title {
77
- margin-block-end: var(--utrecht-space-block-md);
78
- }
79
-
80
- .headerSearchForm > *:not(:last-child) {
81
- margin-block-end: 32px;
82
- }
83
-
84
- .headerSearchForm > .subHeading2 {
85
- width: 100%;
86
- max-width: 800px;
87
- margin-block-end: 48px;
88
- }
89
-
90
- .searchFormContainer {
91
- width: 100%;
92
- max-width: 650px;
86
+ .titleSingle {
87
+ margin-block-end: var(--utrecht-space-block-2xs);
93
88
  }
package/src/components/jumbotron/Jumbotron.tsx CHANGED
@@ -2,8 +2,8 @@ import * as React from "react";
2
2
  import * as styles from "./Jumbotron.module.css";
3
3
  import clsx from "clsx";
4
4
  import { Paragraph, Page, PageContent, Heading1, Image } from "@utrecht/component-library-react/dist/css-module";
5
- import { CardWrapper } from "../card";
6
5
  import { Container } from "../container/Container";
6
+ import { CardWrapper } from "../card";
7
7
 
8
8
  interface JumbotronProps {
9
9
  title: string;
@@ -19,6 +19,7 @@ interface JumbotronProps {
19
19
  url: string;
20
20
  };
21
21
  isCard?: boolean;
22
+ container?: boolean;
22
23
  searchForm?: {
23
24
  element: JSX.Element;
24
25
  show: boolean;
@@ -34,51 +35,103 @@ export const Jumbotron: React.FC<JumbotronProps> = ({
34
35
  image,
35
36
  isCard,
36
37
  searchForm,
38
+ container,
37
39
  }) => {
38
40
  return (
39
- <div
40
- aria-label={ariaLabel.container}
41
- role={role}
42
- style={{
43
- backgroundImage: image?.placement === "background" ? `url(${image.url})` : "",
44
- }}
45
- className={clsx(
46
- image?.placement === "background" && styles.backgroundImageWrapper,
47
- image?.placement === "right" && styles.rightImageWrapper,
48
- (!image || image.placement === "false") && styles.wrapper,
49
- )}
50
- >
51
- <Page>
52
- <PageContent>
53
- {isCard && (
54
- <JumbotronCard {...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm }} />
55
- )}
56
- {!isCard && (
57
- <JumbotronContent {...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm }} />
58
- )}
59
- </PageContent>
60
- </Page>
61
- </div>
41
+ <OptionalContainer {...{ container }}>
42
+ <div
43
+ aria-label={ariaLabel.container}
44
+ role={role}
45
+ style={{
46
+ backgroundImage: image?.placement === "background" ? `url(${image.url})` : "",
47
+ }}
48
+ className={clsx(
49
+ image?.placement === "background" && styles.backgroundImageWrapper,
50
+ image?.placement === "right" && styles.rightImageWrapper,
51
+ )}
52
+ >
53
+ <Page>
54
+ <PageContent>
55
+ <ImageContainer image={{ placement: image?.placement ?? "false", url: image?.url ?? "" }}>
56
+ <SearchForm searchForm={{ show: searchForm?.show ?? false, element: searchForm?.element ?? <></> }}>
57
+ {isCard && (
58
+ <JumbotronCard {...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm }} />
59
+ )}
60
+ {!isCard && (
61
+ <JumbotronContent {...{ title, ariaLabel, role, subTitle, description, image, isCard, searchForm }} />
62
+ )}
63
+ </SearchForm>
64
+ </ImageContainer>
65
+ </PageContent>
66
+ </Page>
67
+ </div>
68
+ </OptionalContainer>
62
69
  );
63
70
  };
64
71
 
65
- const JumbotronCard: React.FC<JumbotronProps> = ({ title, ariaLabel, subTitle, description, image }) => {
66
- if (image?.placement === "right")
72
+ interface ContainerProps {
73
+ children: React.ReactNode;
74
+ container: boolean | undefined;
75
+ }
76
+
77
+ const OptionalContainer: React.FC<ContainerProps> = ({ children, container }) => {
78
+ if (container === true) return <Container layoutClassName={styles.wrapper}>{children}</Container>;
79
+
80
+ return <>{children}</>;
81
+ };
82
+
83
+ interface ImageContainerProps {
84
+ children: React.ReactNode;
85
+ image: {
86
+ placement: "false" | "background" | "right";
87
+ url: string;
88
+ };
89
+ }
90
+
91
+ const ImageContainer: React.FC<ImageContainerProps> = ({ children, image }) => {
92
+ if (image.placement === "right")
67
93
  return (
68
94
  <div className={styles.imageRightContainer}>
69
- <CardWrapper aria-label={ariaLabel.card} role="contentinfo" className={styles.card}>
70
- <Heading1 className={styles.cardAndImageTitle}>{title} </Heading1>
71
- <span className={styles.cardSubTitle}>{subTitle}</span>
72
-
73
- <Paragraph className={styles.cardDescription}>{description}</Paragraph>
74
- </CardWrapper>
75
- <Image src={image?.url} alt={"jumbotron-image"} className={styles.image} />
95
+ {children}
96
+ {<Image src={image.url} alt={"jumbotron-image"} className={styles.image} />}
76
97
  </div>
77
98
  );
78
99
 
100
+ if (image.placement === "false" || image.placement === "background") return <>{children}</>;
101
+
102
+ return <>{children}</>;
103
+ };
104
+
105
+ interface SearchFormProps {
106
+ children: React.ReactNode;
107
+ searchForm: {
108
+ element: JSX.Element;
109
+ show: boolean;
110
+ };
111
+ }
112
+
113
+ const SearchForm: React.FC<SearchFormProps> = ({
114
+ children,
115
+
116
+ searchForm,
117
+ }) => {
118
+ if (searchForm.show)
119
+ return (
120
+ <section className={clsx(styles.headerSearchForm)}>
121
+ {children}
122
+ {searchForm.element}
123
+ </section>
124
+ );
125
+
126
+ return <>{children}</>;
127
+ };
128
+
129
+ const JumbotronCard: React.FC<JumbotronProps> = ({ title, ariaLabel, subTitle, description, image, searchForm }) => {
79
130
  return (
80
131
  <CardWrapper aria-label={ariaLabel.card} role="contentinfo" className={styles.card}>
81
- <Heading1 className={styles.cardTitle}>{title} </Heading1>
132
+ <Heading1 className={clsx(image?.placement === "right" ? styles.cardAndImageTitle : styles.cardTitle)}>
133
+ {title}{" "}
134
+ </Heading1>
82
135
  <span className={styles.cardSubTitle}>{subTitle}</span>
83
136
 
84
137
  <Paragraph className={styles.cardDescription}>{description}</Paragraph>
@@ -87,33 +140,12 @@ const JumbotronCard: React.FC<JumbotronProps> = ({ title, ariaLabel, subTitle, d
87
140
  };
88
141
 
89
142
  const JumbotronContent: React.FC<JumbotronProps> = ({ title, subTitle, description, image, searchForm }) => {
90
- if (image?.placement === "right")
91
- return (
92
- <div className={styles.imageRightContainer}>
93
- <div>
94
- <Heading1 className={styles.title}>{title}</Heading1>
95
-
96
- {subTitle && <span className={styles.subTitle}>{subTitle}</span>}
97
-
98
- {description && <Paragraph className={styles.description}>{description}</Paragraph>}
99
- </div>
100
-
101
- {image?.placement === "right" && <Image src={image?.url} alt={"jumbotron-image"} className={styles.image} />}
102
- </div>
103
- );
104
-
105
143
  return (
106
- <Container layoutClassName={styles.wrapper}>
107
- <section className={clsx(searchForm?.show && styles.headerSearchForm)}>
108
- <div>
109
- <Heading1 className={styles.title}>{title}</Heading1>
110
-
111
- {subTitle && <span className={styles.subTitle}>{subTitle}</span>}
144
+ <div>
145
+ <Heading1 className={clsx(clsx(styles.title, !subTitle && styles.titleSingle))}>{title}</Heading1>
146
+ {subTitle && <span className={styles.subTitle}>{subTitle}</span>}
112
147
 
113
- {description && <Paragraph className={styles.description}>{description}</Paragraph>}
114
- </div>
115
- {searchForm?.show && searchForm.element}
116
- </section>
117
- </Container>
148
+ {description && <Paragraph className={styles.description}>{description}</Paragraph>}
149
+ </div>
118
150
  );
119
151
  };