@conduction/components 2.2.48 → 2.2.50

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 (21) hide show
  1. package/README.md +6 -0
  2. package/lib/components/card/cardHeader/CardHeader.module.css +3 -1
  3. package/lib/components/card/cardWrapper/CardWrapper.module.css +10 -2
  4. package/lib/components/tabs/Tabs.js +2 -2
  5. package/lib/components/tabs/Tabs.module.css +1 -0
  6. package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css +7 -0
  7. package/lib/index.d.ts +1 -2
  8. package/lib/index.js +1 -2
  9. package/package.json +1 -1
  10. package/src/components/card/cardHeader/CardHeader.module.css +3 -1
  11. package/src/components/card/cardWrapper/CardWrapper.module.css +10 -2
  12. package/src/components/tabs/Tabs.module.css +1 -0
  13. package/src/components/tabs/Tabs.tsx +2 -2
  14. package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +7 -0
  15. package/src/index.ts +0 -2
  16. package/tsconfig.json +4 -1
  17. package/lib/components/jumbotron/Jumbotron.d.ts +0 -23
  18. package/lib/components/jumbotron/Jumbotron.js +0 -34
  19. package/lib/components/jumbotron/Jumbotron.module.css +0 -88
  20. package/src/components/jumbotron/Jumbotron.module.css +0 -88
  21. package/src/components/jumbotron/Jumbotron.tsx +0 -151
package/README.md CHANGED
@@ -4,6 +4,12 @@
4
4
 
5
5
  - **Version 2.2 (breaking changes from 2.1.x)**
6
6
 
7
+ - 2.2.50:
8
+ - Added transition and box-shadow to CardWrapper.
9
+ - Added font-style to CardHeader.
10
+ - Added tabindex and font-weight to Tab.
11
+ - Added border-color, border-style, border-width and transition to PrimaryTopNav.
12
+ - 2.2.49: Removed Jumbotron component.
7
13
  - 2.2.48: Updated CardHeader and package.json.
8
14
  - 2.2.46 / 2.2.47: Fixed minor css parse error.
9
15
  - 2.2.45: Updated Pagination and select to ensure more WCAG compliancy.
package/lib/components/card/cardHeader/CardHeader.module.css CHANGED
@@ -10,13 +10,14 @@
10
10
  --conduction-card-header-date-color: #000000;
11
11
  --conduction-card-header-date-font-size: 16px;
12
12
  --conduction-card-header-date-font-weight: 100;
13
+ /* --conduction-card-header-date-font-style: normal; */
13
14
  --conduction-card-header-date-margin-block-end: 8px;
14
15
  }
15
16
 
16
17
  .container {
17
18
  border-bottom-width: var(--conduction-card-header-border-bottom-width);
18
- border-bottom-style: var(--conduction-card-header-border-bottom-style);
19
19
  border-bottom-color: var(--conduction-card-header-border-bottom-color);
20
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
20
21
  }
21
22
 
22
23
  .container:hover {
@@ -37,5 +38,6 @@
37
38
  color: var(--conduction-card-header-date-color);
38
39
  font-size: var(--conduction-card-header-date-font-size);
39
40
  font-weight: var(--conduction-card-header-date-font-weight);
41
+ font-style: var(--conduction-card-header-date-font-style);
40
42
  margin-block-end: var(--conduction-card-header-date-margin-block-end);
41
43
  }
package/lib/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -3,23 +3,26 @@
3
3
  /* --conduction-card-wrapper-border-width: unset; */
4
4
  /* --conduction-card-wrapper-border-style: unset; */
5
5
  /* --conduction-card-wrapper-border-color: unset; */
6
+ --conduction-card-wrapper-border-radius: 16px;
6
7
  /* --conduction-card-wrapper-border-bottom-width: unset; */
7
8
  /* --conduction-card-wrapper-border-bottom-style: unset; */
8
9
  /* --conduction-card-wrapper-border-bottom-color: unset; */
9
10
  /* --conduction-card-wrapper-box-shadow: unset; */
11
+ /* --conduction-card-wrapper-hover-background-color: unset; */
10
12
  /* --conduction-card-wrapper-hover-border-width: unset; */
11
13
  /* --conduction-card-wrapper-hover-border-style: unset; */
12
14
  /* --conduction-card-wrapper-hover-border-color: unset; */
15
+ /* --conduction-card-wrapper-hover-border-radius: 16px; */
13
16
  /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
14
17
  /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
15
18
  /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
16
- --conduction-card-wrapper-border-radius: 16px;
19
+ /* --conduction-card-wrapper-hover-box-shadow: unset; */
17
20
  --conduction-card-wrapper-color: #000000;
18
- /* --conduction-card-wrapper-hover-background-color: unset; */
19
21
  --conduction-card-wrapper-padding-inline-end: 18px;
20
22
  --conduction-card-wrapper-padding-inline-start: 18px;
21
23
  --conduction-card-wrapper-padding-block-end: 18px;
22
24
  --conduction-card-wrapper-padding-block-start: 18px;
25
+ /* --conduction-card-wrapper-transition: unset; */
23
26
  }
24
27
 
25
28
  .container {
@@ -28,6 +31,8 @@
28
31
  position: relative;
29
32
  box-shadow: var(--conduction-card-wrapper-box-shadow);
30
33
 
34
+ transition: var(--conduction-card-wrapper-transition);
35
+
31
36
  border-radius: var(--conduction-card-wrapper-border-radius);
32
37
  border-width: var(--conduction-card-wrapper-border-width);
33
38
  border-style: var(--conduction-card-wrapper-border-style);
@@ -47,6 +52,9 @@
47
52
  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
48
53
  cursor: pointer;
49
54
 
55
+ box-shadow: var(--conduction-card-wrapper-hover-box-shadow, var(--conduction-card-wrapper-box-shadow));
56
+
57
+ border-radius: var(--conduction-card-wrapper-hover-border-radius, var(--conduction-card-wrapper-border-radius));
50
58
  border-width: var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width));
51
59
  border-style: var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style));
52
60
  border-color: var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color));
package/lib/components/tabs/Tabs.js CHANGED
@@ -6,7 +6,7 @@ import clsx from "clsx";
6
6
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
7
  import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons";
8
8
  // Tabs
9
- export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { className: styles.tabs, ...otherProps, children: children }));
9
+ export const Tabs = ({ children, ...otherProps }) => (_jsx(RTabs, { selectedIndex: 0, className: styles.tabs, ...otherProps, children: children }));
10
10
  Tabs.tabsRole = "Tabs";
11
11
  // TabList
12
12
  export const TabList = ({ children, ...otherProps }) => {
@@ -42,7 +42,7 @@ export const TabList = ({ children, ...otherProps }) => {
42
42
  };
43
43
  TabList.tabsRole = "TabList";
44
44
  // Tab
45
- export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { className: styles.tab, ...otherProps, children: children }));
45
+ export const Tab = ({ children, ...otherProps }) => (_jsx(RTab, { tabIndex: "0", className: styles.tab, ...otherProps, children: children }));
46
46
  Tab.tabsRole = "Tab";
47
47
  // TabPanel
48
48
  export const TabPanel = ({ children, ...otherProps }) => (_jsx(RTabPanel, { ...otherProps, children: children }));
package/lib/components/tabs/Tabs.module.css CHANGED
@@ -167,6 +167,7 @@
167
167
  background-color: var(--conduction-tabs-tab-hover-background-color);
168
168
  color: var(--conduction-tabs-tab-hover-color);
169
169
  text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
170
+ font-weight: var(--conduction-tabs-tab-hover-font-weight, var(--conduction-tabs-tab-font-weight));
170
171
  }
171
172
 
172
173
  .tabList {
package/lib/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -77,17 +77,24 @@
77
77
  align-items: center;
78
78
  max-height: 80vh;
79
79
  overflow-y: scroll;
80
+ border-color: var(--conduction-primary-top-nav-list-border-color);
81
+ border-style: var(--conduction-primary-top-nav-list-border-style);
82
+ border-width: var(--conduction-primary-top-nav-list-border-width);
80
83
  }
81
84
 
82
85
  .li {
83
86
  list-style-type: none;
84
87
  display: block;
85
88
  position: relative;
89
+ transition: var(--conduction-primary-top-nav-item-transition);
86
90
  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
87
91
  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
88
92
  padding-block-start: var(--conduction-primary-top-nav-item-padding);
89
93
  padding-block-end: var(--conduction-primary-top-nav-item-padding);
90
94
  border-radius: var(--conduction-primary-top-nav-item-border-radius);
95
+ border-color: var(--conduction-primary-top-nav-item-border-color);
96
+ border-style: var(--conduction-primary-top-nav-item-border-style);
97
+ border-width: var(--conduction-primary-top-nav-item-border-width);
91
98
  }
92
99
 
93
100
  .li:hover {
package/lib/index.d.ts CHANGED
@@ -24,6 +24,5 @@ import { ToolTip } from "./components/toolTip/ToolTip";
24
24
  import { Pagination } from "./components/Pagination/Pagination";
25
25
  import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
26
26
  import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
27
- import { Jumbotron } from "./components/jumbotron/Jumbotron";
28
27
  import DisplaySwitch from "./components/displaySwitch/DisplaySwitch";
29
- 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 };
28
+ 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 CHANGED
@@ -17,6 +17,5 @@ import { ToolTip } from "./components/toolTip/ToolTip";
17
17
  import { Pagination } from "./components/Pagination/Pagination";
18
18
  import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
19
19
  import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
20
- import { Jumbotron } from "./components/jumbotron/Jumbotron";
21
20
  import DisplaySwitch from "./components/displaySwitch/DisplaySwitch";
22
- 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 };
21
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.2.48",
3
+ "version": "2.2.50",
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/card/cardHeader/CardHeader.module.css CHANGED
@@ -10,13 +10,14 @@
10
10
  --conduction-card-header-date-color: #000000;
11
11
  --conduction-card-header-date-font-size: 16px;
12
12
  --conduction-card-header-date-font-weight: 100;
13
+ /* --conduction-card-header-date-font-style: normal; */
13
14
  --conduction-card-header-date-margin-block-end: 8px;
14
15
  }
15
16
 
16
17
  .container {
17
18
  border-bottom-width: var(--conduction-card-header-border-bottom-width);
18
- border-bottom-style: var(--conduction-card-header-border-bottom-style);
19
19
  border-bottom-color: var(--conduction-card-header-border-bottom-color);
20
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
20
21
  }
21
22
 
22
23
  .container:hover {
@@ -37,5 +38,6 @@
37
38
  color: var(--conduction-card-header-date-color);
38
39
  font-size: var(--conduction-card-header-date-font-size);
39
40
  font-weight: var(--conduction-card-header-date-font-weight);
41
+ font-style: var(--conduction-card-header-date-font-style);
40
42
  margin-block-end: var(--conduction-card-header-date-margin-block-end);
41
43
  }
package/src/components/card/cardWrapper/CardWrapper.module.css CHANGED
@@ -3,23 +3,26 @@
3
3
  /* --conduction-card-wrapper-border-width: unset; */
4
4
  /* --conduction-card-wrapper-border-style: unset; */
5
5
  /* --conduction-card-wrapper-border-color: unset; */
6
+ --conduction-card-wrapper-border-radius: 16px;
6
7
  /* --conduction-card-wrapper-border-bottom-width: unset; */
7
8
  /* --conduction-card-wrapper-border-bottom-style: unset; */
8
9
  /* --conduction-card-wrapper-border-bottom-color: unset; */
9
10
  /* --conduction-card-wrapper-box-shadow: unset; */
11
+ /* --conduction-card-wrapper-hover-background-color: unset; */
10
12
  /* --conduction-card-wrapper-hover-border-width: unset; */
11
13
  /* --conduction-card-wrapper-hover-border-style: unset; */
12
14
  /* --conduction-card-wrapper-hover-border-color: unset; */
15
+ /* --conduction-card-wrapper-hover-border-radius: 16px; */
13
16
  /* --conduction-card-wrapper-hover-border-bottom-width: unset; */
14
17
  /* --conduction-card-wrapper-hover-border-bottom-style: unset; */
15
18
  /* --conduction-card-wrapper-hover-border-bottom-color: unset; */
16
- --conduction-card-wrapper-border-radius: 16px;
19
+ /* --conduction-card-wrapper-hover-box-shadow: unset; */
17
20
  --conduction-card-wrapper-color: #000000;
18
- /* --conduction-card-wrapper-hover-background-color: unset; */
19
21
  --conduction-card-wrapper-padding-inline-end: 18px;
20
22
  --conduction-card-wrapper-padding-inline-start: 18px;
21
23
  --conduction-card-wrapper-padding-block-end: 18px;
22
24
  --conduction-card-wrapper-padding-block-start: 18px;
25
+ /* --conduction-card-wrapper-transition: unset; */
23
26
  }
24
27
 
25
28
  .container {
@@ -28,6 +31,8 @@
28
31
  position: relative;
29
32
  box-shadow: var(--conduction-card-wrapper-box-shadow);
30
33
 
34
+ transition: var(--conduction-card-wrapper-transition);
35
+
31
36
  border-radius: var(--conduction-card-wrapper-border-radius);
32
37
  border-width: var(--conduction-card-wrapper-border-width);
33
38
  border-style: var(--conduction-card-wrapper-border-style);
@@ -47,6 +52,9 @@
47
52
  color: var(--conduction-card-wrapper-hover-color, var(--conduction-card-wrapper-color));
48
53
  cursor: pointer;
49
54
 
55
+ box-shadow: var(--conduction-card-wrapper-hover-box-shadow, var(--conduction-card-wrapper-box-shadow));
56
+
57
+ border-radius: var(--conduction-card-wrapper-hover-border-radius, var(--conduction-card-wrapper-border-radius));
50
58
  border-width: var(--conduction-card-wrapper-hover-border-width, var(--conduction-card-wrapper-border-width));
51
59
  border-style: var(--conduction-card-wrapper-hover-border-style, var(--conduction-card-wrapper-border-style));
52
60
  border-color: var(--conduction-card-wrapper-hover-border-color, var(--conduction-card-wrapper-border-color));
package/src/components/tabs/Tabs.module.css CHANGED
@@ -167,6 +167,7 @@
167
167
  background-color: var(--conduction-tabs-tab-hover-background-color);
168
168
  color: var(--conduction-tabs-tab-hover-color);
169
169
  text-decoration: var(--conduction-tabs-tab-hover-text-decoration);
170
+ font-weight: var(--conduction-tabs-tab-hover-font-weight, var(--conduction-tabs-tab-font-weight));
170
171
  }
171
172
 
172
173
  .tabList {
package/src/components/tabs/Tabs.tsx CHANGED
@@ -17,7 +17,7 @@ import { faChevronLeft, faChevronRight } from "@fortawesome/free-solid-svg-icons
17
17
 
18
18
  // Tabs
19
19
  export const Tabs: ReactTabsFunctionComponent<TabsProps> = ({ children, ...otherProps }) => (
20
- <RTabs className={styles.tabs} {...otherProps}>
20
+ <RTabs selectedIndex={0} className={styles.tabs} {...otherProps}>
21
21
  {children}
22
22
  </RTabs>
23
23
  );
@@ -102,7 +102,7 @@ TabList.tabsRole = "TabList";
102
102
 
103
103
  // Tab
104
104
  export const Tab: ReactTabsFunctionComponent<TabProps> = ({ children, ...otherProps }) => (
105
- <RTab className={styles.tab} {...otherProps}>
105
+ <RTab tabIndex="0" className={styles.tab} {...otherProps}>
106
106
  {children}
107
107
  </RTab>
108
108
  );
package/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css CHANGED
@@ -77,17 +77,24 @@
77
77
  align-items: center;
78
78
  max-height: 80vh;
79
79
  overflow-y: scroll;
80
+ border-color: var(--conduction-primary-top-nav-list-border-color);
81
+ border-style: var(--conduction-primary-top-nav-list-border-style);
82
+ border-width: var(--conduction-primary-top-nav-list-border-width);
80
83
  }
81
84
 
82
85
  .li {
83
86
  list-style-type: none;
84
87
  display: block;
85
88
  position: relative;
89
+ transition: var(--conduction-primary-top-nav-item-transition);
86
90
  padding-inline-start: var(--conduction-primary-top-nav-item-padding);
87
91
  padding-inline-end: var(--conduction-primary-top-nav-item-padding);
88
92
  padding-block-start: var(--conduction-primary-top-nav-item-padding);
89
93
  padding-block-end: var(--conduction-primary-top-nav-item-padding);
90
94
  border-radius: var(--conduction-primary-top-nav-item-border-radius);
95
+ border-color: var(--conduction-primary-top-nav-item-border-color);
96
+ border-style: var(--conduction-primary-top-nav-item-border-style);
97
+ border-width: var(--conduction-primary-top-nav-item-border-width);
91
98
  }
92
99
 
93
100
  .li:hover {
package/src/index.ts CHANGED
@@ -41,7 +41,6 @@ import { ToolTip } from "./components/toolTip/ToolTip";
41
41
  import { Pagination } from "./components/Pagination/Pagination";
42
42
  import { Tabs, TabList, Tab, TabPanel } from "./components/tabs/Tabs";
43
43
  import { HorizontalOverflowWrapper } from "./components/horizontalOverflowWrapper/HorizontalOverflowWrapper";
44
- import { Jumbotron } from "./components/jumbotron/Jumbotron";
45
44
  import DisplaySwitch from "./components/displaySwitch/DisplaySwitch";
46
45
 
47
46
  export {
@@ -84,6 +83,5 @@ export {
84
83
  Tab,
85
84
  TabPanel,
86
85
  HorizontalOverflowWrapper,
87
- Jumbotron,
88
86
  DisplaySwitch
89
87
  };
package/tsconfig.json CHANGED
@@ -14,5 +14,8 @@
14
14
  },
15
15
  "hooks": ["copy-files"],
16
16
  "include": ["src", "src/**/*.css"],
17
- "exclude": ["**/__tests__/*"]
17
+ "exclude": [
18
+ "**/__tests__/*",
19
+ "./lib/**/*"
20
+ ]
18
21
  }
package/lib/components/jumbotron/Jumbotron.d.ts DELETED
@@ -1,23 +0,0 @@
1
- import * as React from "react";
2
- interface JumbotronProps {
3
- title: string;
4
- ariaLabel: {
5
- container: string;
6
- card: string;
7
- };
8
- role: string;
9
- subTitle?: string;
10
- description?: string;
11
- image?: {
12
- placement: "false" | "background" | "right";
13
- url: string;
14
- };
15
- isCard?: boolean;
16
- container?: boolean;
17
- searchForm?: {
18
- element: JSX.Element;
19
- show: boolean;
20
- };
21
- }
22
- export declare const Jumbotron: React.FC<JumbotronProps>;
23
- export {};
package/lib/components/jumbotron/Jumbotron.js DELETED
@@ -1,34 +0,0 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
- import * as styles from "./Jumbotron.module.css";
3
- import clsx from "clsx";
4
- import { Paragraph, Page, PageContent, Heading1, Image } from "@utrecht/component-library-react/dist/css-module";
5
- import { Container } from "../container/Container";
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 });
28
- };
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 })] }));
31
- };
32
- const JumbotronContent = ({ title, subTitle, description, image, searchForm }) => {
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 })] }));
34
- };
package/lib/components/jumbotron/Jumbotron.module.css DELETED
@@ -1,88 +0,0 @@
1
- .wrapper {
2
- padding-block-start: 72px;
3
- padding-block-end: 72px;
4
- width: auto !important;
5
- }
6
-
7
- .backgroundImageWrapper {
8
- background-size: cover;
9
- background-position: 48% 39%;
10
- max-width: 100%;
11
- padding: 5rem 0 10rem;
12
- }
13
-
14
- .rightImageWrapper {
15
- padding-block: 48px;
16
- background-color: var(--utrecht-page-header-background-color) !important;
17
- }
18
-
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;
35
- }
36
-
37
- .card {
38
- width: fit-content;
39
- padding-inline-start: 48px;
40
- padding-inline-end: 48px;
41
- padding-block-start: 40px;
42
- padding-block-end: 40px;
43
- border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
44
- }
45
-
46
- .card:hover {
47
- background-color: var(--conduction-card-wrapper-background-color);
48
- cursor: default;
49
- border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
50
- }
51
-
52
- .cardTitle,
53
- .cardAndImageTitle {
54
- border-block-end: var(--conduction-card-wrapper-header-border-block-end);
55
- color: var(--conduction-card-header-title-color, var(--conduction-card-wrapper-color)) !important;
56
- }
57
-
58
- .cardAndImageTitle {
59
- width: max-content;
60
- }
61
-
62
- .cardSubTitle,
63
- .subTitle {
64
- position: relative;
65
- font-style: italic;
66
- display: block;
67
- margin-block-end: var(--utrecht-space-block-md);
68
- font-size: var(--utrecht-document-font-size);
69
- }
70
-
71
- .cardDescription {
72
- color: var(--conduction-card-wrapper-color) !important;
73
- }
74
-
75
- .image {
76
- width: 50% !important;
77
- object-fit: contain;
78
- }
79
-
80
- .title,
81
- .description,
82
- .subTitle {
83
- color: var(--utrecht-page-header-color) !important;
84
- }
85
-
86
- .titleSingle {
87
- margin-block-end: var(--utrecht-space-block-2xs);
88
- }
package/src/components/jumbotron/Jumbotron.module.css DELETED
@@ -1,88 +0,0 @@
1
- .wrapper {
2
- padding-block-start: 72px;
3
- padding-block-end: 72px;
4
- width: auto !important;
5
- }
6
-
7
- .backgroundImageWrapper {
8
- background-size: cover;
9
- background-position: 48% 39%;
10
- max-width: 100%;
11
- padding: 5rem 0 10rem;
12
- }
13
-
14
- .rightImageWrapper {
15
- padding-block: 48px;
16
- background-color: var(--utrecht-page-header-background-color) !important;
17
- }
18
-
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;
35
- }
36
-
37
- .card {
38
- width: fit-content;
39
- padding-inline-start: 48px;
40
- padding-inline-end: 48px;
41
- padding-block-start: 40px;
42
- padding-block-end: 40px;
43
- border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
44
- }
45
-
46
- .card:hover {
47
- background-color: var(--conduction-card-wrapper-background-color);
48
- cursor: default;
49
- border-bottom: var(--conduction-card-wrapper-border-width) var(--conduction-card-wrapper-border-style) var(--conduction-card-wrapper-border-color);
50
- }
51
-
52
- .cardTitle,
53
- .cardAndImageTitle {
54
- border-block-end: var(--conduction-card-wrapper-header-border-block-end);
55
- color: var(--conduction-card-header-title-color, var(--conduction-card-wrapper-color)) !important;
56
- }
57
-
58
- .cardAndImageTitle {
59
- width: max-content;
60
- }
61
-
62
- .cardSubTitle,
63
- .subTitle {
64
- position: relative;
65
- font-style: italic;
66
- display: block;
67
- margin-block-end: var(--utrecht-space-block-md);
68
- font-size: var(--utrecht-document-font-size);
69
- }
70
-
71
- .cardDescription {
72
- color: var(--conduction-card-wrapper-color) !important;
73
- }
74
-
75
- .image {
76
- width: 50% !important;
77
- object-fit: contain;
78
- }
79
-
80
- .title,
81
- .description,
82
- .subTitle {
83
- color: var(--utrecht-page-header-color) !important;
84
- }
85
-
86
- .titleSingle {
87
- margin-block-end: var(--utrecht-space-block-2xs);
88
- }
package/src/components/jumbotron/Jumbotron.tsx DELETED
@@ -1,151 +0,0 @@
1
- import * as React from "react";
2
- import * as styles from "./Jumbotron.module.css";
3
- import clsx from "clsx";
4
- import { Paragraph, Page, PageContent, Heading1, Image } from "@utrecht/component-library-react/dist/css-module";
5
- import { Container } from "../container/Container";
6
- import { CardWrapper } from "../card";
7
-
8
- interface JumbotronProps {
9
- title: string;
10
- ariaLabel: {
11
- container: string;
12
- card: string;
13
- };
14
- role: string;
15
- subTitle?: string;
16
- description?: string;
17
- image?: {
18
- placement: "false" | "background" | "right";
19
- url: string;
20
- };
21
- isCard?: boolean;
22
- container?: boolean;
23
- searchForm?: {
24
- element: JSX.Element;
25
- show: boolean;
26
- };
27
- }
28
-
29
- export const Jumbotron: React.FC<JumbotronProps> = ({
30
- title,
31
- ariaLabel,
32
- role,
33
- subTitle,
34
- description,
35
- image,
36
- isCard,
37
- searchForm,
38
- container,
39
- }) => {
40
- return (
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>
69
- );
70
- };
71
-
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")
93
- return (
94
- <div className={styles.imageRightContainer}>
95
- {children}
96
- {<Image src={image.url} alt={"jumbotron-image"} className={styles.image} />}
97
- </div>
98
- );
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 }) => {
130
- return (
131
- <CardWrapper aria-label={ariaLabel.card} role="contentinfo" className={styles.card}>
132
- <Heading1 className={clsx(image?.placement === "right" ? styles.cardAndImageTitle : styles.cardTitle)}>
133
- {title}{" "}
134
- </Heading1>
135
- <span className={styles.cardSubTitle}>{subTitle}</span>
136
-
137
- <Paragraph className={styles.cardDescription}>{description}</Paragraph>
138
- </CardWrapper>
139
- );
140
- };
141
-
142
- const JumbotronContent: React.FC<JumbotronProps> = ({ title, subTitle, description, image, searchForm }) => {
143
- return (
144
- <div>
145
- <Heading1 className={clsx(clsx(styles.title, !subTitle && styles.titleSingle))}>{title}</Heading1>
146
- {subTitle && <span className={styles.subTitle}>{subTitle}</span>}
147
-
148
- {description && <Paragraph className={styles.description}>{description}</Paragraph>}
149
- </div>
150
- );
151
- };