@conduction/components 2.1.35 → 2.1.36

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 (12) hide show
  1. package/README.md +3 -0
  2. package/lib/components/card/cardHeader/CardHeader.d.ts +4 -0
  3. package/lib/components/card/cardHeader/CardHeader.js +14 -0
  4. package/lib/components/card/cardHeader/CardHeader.module.css +36 -0
  5. package/lib/components/card/cardWrapper/CardWrapper.d.ts +0 -1
  6. package/lib/components/card/index.d.ts +2 -1
  7. package/lib/components/card/index.js +2 -1
  8. package/package.json +1 -1
  9. package/src/components/card/cardHeader/CardHeader.module.css +36 -0
  10. package/src/components/card/cardHeader/CardHeader.tsx +20 -0
  11. package/src/components/card/cardWrapper/CardWrapper.tsx +0 -1
  12. package/src/components/card/index.tsx +13 -1
package/README.md CHANGED
@@ -4,6 +4,9 @@
4
4
 
5
5
  - **Version 2.1 (breaking changes from 2.0.x)**
6
6
 
7
+ - 2.1.36:
8
+ - Updated CardWrapper.
9
+ - Added CardHeader.
7
10
  - 2.1.35: Added CardWrapper.
8
11
  - 2.1.34: Refactor Den Haag textbox and textarea to Utrecht; add Single Select design tokens.
9
12
  - 2.1.33: Added optional placeholder to all select elements.
package/lib/components/card/cardHeader/CardHeader.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ export declare const CardHeader: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
3
+ export declare const CardHeaderTitle: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
4
+ export declare const CardHeaderDate: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
package/lib/components/card/cardHeader/CardHeader.js ADDED
@@ -0,0 +1,14 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as styles from "./CardHeader.module.css";
3
+ export const CardHeader = (props) => {
4
+ const _props = { ...props, className: `${props.className} ${styles.container}` };
5
+ return _jsx("div", { ..._props, children: props.children });
6
+ };
7
+ export const CardHeaderTitle = (props) => {
8
+ const _props = { ...props, className: `${props.className} ${styles.title}` };
9
+ return _jsx("div", { ..._props, children: props.children });
10
+ };
11
+ export const CardHeaderDate = (props) => {
12
+ const _props = { ...props, className: `${props.className} ${styles.date}` };
13
+ return _jsx("div", { ..._props, children: props.children });
14
+ };
package/lib/components/card/cardHeader/CardHeader.module.css ADDED
@@ -0,0 +1,36 @@
1
+ :root {
2
+ /* --conduction-card-header-border-bottom-width: unset;
3
+ --conduction-card-header-border-bottom-style: unset;
4
+ --conduction-card-header-border-bottom-color: unset; */
5
+ /* --conduction-card-header-hover-border-bottom-width: unset; */
6
+ /* --conduction-card-header-hover-border-bottom-style: unset; */
7
+ /* --conduction-card-header-hover-border-bottom-color: unset; */
8
+ --conduction-card-header-title-color: #000000;
9
+ --conduction-card-header-date-color: #000000;
10
+ --conduction-card-header-date-font-size: 16px;
11
+ --conduction-card-header-date-font-weight: 100;
12
+ --conduction-card-header-date-margin-block-end: 8px;
13
+ }
14
+
15
+ .container {
16
+ border-bottom-width: var(--conduction-card-header-border-bottom-width);
17
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
18
+ border-bottom-color: var(--conduction-card-header-border-bottom-color);
19
+ }
20
+
21
+ .container:hover {
22
+ border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
23
+ border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
24
+ border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
25
+ }
26
+
27
+ .title > * {
28
+ color: var(--conduction-card-header-title-color) !important;
29
+ }
30
+
31
+ .date {
32
+ color: var(--conduction-card-header-date-color);
33
+ font-size: var(--conduction-card-header-date-font-size);
34
+ font-weight: var(--conduction-card-header-date-font-weight);
35
+ margin-block-end: var(--conduction-card-header-date-margin-block-end);
36
+ }
package/lib/components/card/cardWrapper/CardWrapper.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  import * as React from "react";
2
- import { HTMLAttributes } from "react";
3
2
  export declare const CardWrapper: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
package/lib/components/card/index.d.ts CHANGED
@@ -5,4 +5,5 @@ import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
6
  import { InfoCard } from "./infoCard/InfoCard";
7
7
  import { CardWrapper } from "./cardWrapper/CardWrapper";
8
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };
8
+ import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
9
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
package/lib/components/card/index.js CHANGED
@@ -5,4 +5,5 @@ import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
6
  import { InfoCard } from "./infoCard/InfoCard";
7
7
  import { CardWrapper } from "./cardWrapper/CardWrapper";
8
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };
8
+ import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
9
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "2.1.35",
3
+ "version": "2.1.36",
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 ADDED
@@ -0,0 +1,36 @@
1
+ :root {
2
+ /* --conduction-card-header-border-bottom-width: unset;
3
+ --conduction-card-header-border-bottom-style: unset;
4
+ --conduction-card-header-border-bottom-color: unset; */
5
+ /* --conduction-card-header-hover-border-bottom-width: unset; */
6
+ /* --conduction-card-header-hover-border-bottom-style: unset; */
7
+ /* --conduction-card-header-hover-border-bottom-color: unset; */
8
+ --conduction-card-header-title-color: #000000;
9
+ --conduction-card-header-date-color: #000000;
10
+ --conduction-card-header-date-font-size: 16px;
11
+ --conduction-card-header-date-font-weight: 100;
12
+ --conduction-card-header-date-margin-block-end: 8px;
13
+ }
14
+
15
+ .container {
16
+ border-bottom-width: var(--conduction-card-header-border-bottom-width);
17
+ border-bottom-style: var(--conduction-card-header-border-bottom-style);
18
+ border-bottom-color: var(--conduction-card-header-border-bottom-color);
19
+ }
20
+
21
+ .container:hover {
22
+ border-bottom-width: var(--conduction-card-header-hover-border-bottom-width);
23
+ border-bottom-style: var(--conduction-card-header-hover-border-bottom-style);
24
+ border-bottom-color: var(--conduction-card-header-hover-border-bottom-color);
25
+ }
26
+
27
+ .title > * {
28
+ color: var(--conduction-card-header-title-color) !important;
29
+ }
30
+
31
+ .date {
32
+ color: var(--conduction-card-header-date-color);
33
+ font-size: var(--conduction-card-header-date-font-size);
34
+ font-weight: var(--conduction-card-header-date-font-weight);
35
+ margin-block-end: var(--conduction-card-header-date-margin-block-end);
36
+ }
package/src/components/card/cardHeader/CardHeader.tsx ADDED
@@ -0,0 +1,20 @@
1
+ import * as React from "react";
2
+ import * as styles from "./CardHeader.module.css";
3
+
4
+ export const CardHeader = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
5
+ const _props = { ...props, className: `${props.className} ${styles.container}` };
6
+
7
+ return <div {..._props}>{props.children}</div>;
8
+ };
9
+
10
+ export const CardHeaderTitle = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
11
+ const _props = { ...props, className: `${props.className} ${styles.title}` };
12
+
13
+ return <div {..._props}>{props.children}</div>;
14
+ };
15
+
16
+ export const CardHeaderDate = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
17
+ const _props = { ...props, className: `${props.className} ${styles.date}` };
18
+
19
+ return <div {..._props}>{props.children}</div>;
20
+ };
package/src/components/card/cardWrapper/CardWrapper.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import * as React from "react";
2
2
  import * as styles from "./CardWrapper.module.css";
3
- import { HTMLAttributes } from "react";
4
3
 
5
4
  export const CardWrapper = (props: React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
6
5
  const _props = { ...props, className: `${props.className} ${styles.container}` };
package/src/components/card/index.tsx CHANGED
@@ -5,5 +5,17 @@ import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
6
  import { InfoCard } from "./infoCard/InfoCard";
7
7
  import { CardWrapper } from "./cardWrapper/CardWrapper";
8
+ import { CardHeader, CardHeaderDate, CardHeaderTitle } from "./cardHeader/CardHeader";
8
9
 
9
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, CardWrapper };
10
+ export {
11
+ DownloadCard,
12
+ HorizontalImageCard,
13
+ ImageAndDetailsCard,
14
+ RichContentCard,
15
+ DetailsCard,
16
+ InfoCard,
17
+ CardWrapper,
18
+ CardHeader,
19
+ CardHeaderTitle,
20
+ CardHeaderDate,
21
+ };