@conduction/components 1.0.17 → 1.0.18

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 (14) hide show
  1. package/lib/components/card/detailsCard/DetailsCard.d.ts +1 -1
  2. package/lib/components/card/index.d.ts +2 -1
  3. package/lib/components/card/index.js +2 -1
  4. package/lib/components/card/infoCard/InfoCard.d.ts +7 -0
  5. package/lib/components/card/infoCard/InfoCard.js +5 -0
  6. package/lib/components/card/infoCard/InfoCard.module.css +37 -0
  7. package/lib/index.d.ts +2 -2
  8. package/lib/index.js +2 -2
  9. package/package.json +1 -1
  10. package/src/components/card/detailsCard/DetailsCard.tsx +1 -1
  11. package/src/components/card/index.tsx +2 -1
  12. package/src/components/card/infoCard/InfoCard.module.css +37 -0
  13. package/src/components/card/infoCard/InfoCard.tsx +17 -0
  14. package/src/index.ts +2 -0
package/lib/components/card/detailsCard/DetailsCard.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from "react";
2
2
  interface DetailsCardProps {
3
3
  title: string;
4
- introduction: string;
4
+ introduction?: string;
5
5
  link: {
6
6
  href: string;
7
7
  label: string;
package/lib/components/card/index.d.ts CHANGED
@@ -3,4 +3,5 @@ import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
3
3
  import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
4
4
  import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };
6
+ import { InfoCard } from "./infoCard/InfoCard";
7
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };
package/lib/components/card/index.js CHANGED
@@ -3,4 +3,5 @@ import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
3
3
  import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
4
4
  import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };
6
+ import { InfoCard } from "./infoCard/InfoCard";
7
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };
package/lib/components/card/infoCard/InfoCard.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ interface InfoCardProps {
3
+ title: string;
4
+ content: JSX.Element | string;
5
+ }
6
+ export declare const InfoCard: React.FC<InfoCardProps>;
7
+ export {};
package/lib/components/card/infoCard/InfoCard.js ADDED
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as styles from "./InfoCard.module.css";
3
+ export const InfoCard = ({ title, content }) => {
4
+ return (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.title, children: title }), _jsx("div", { className: styles.content, children: content })] }));
5
+ };
package/lib/components/card/infoCard/InfoCard.module.css ADDED
@@ -0,0 +1,37 @@
1
+ :root {
2
+ --conduction-info-card-background-color: #f2f2f2;
3
+ --conduction-info-card-border-radius: 3px;
4
+ --conduction-info-card-title-weight: bold;
5
+ --conduction-info-card-title-font-size: 24px;
6
+ --conduction-info-card-title-color: #000000;
7
+ --conduction-info-card-content-color: #000000;
8
+ --conduction-info-card-padding: 16px;
9
+ --conduction-info-card-content-margin: 8px;
10
+ }
11
+
12
+ .container {
13
+ background-color: var(--conduction-info-card-background-color);
14
+ border-radius: var(--conduction-info-card-border-radius);
15
+ padding-inline-start: var(--conduction-info-card-padding);
16
+ padding-inline-end: var(--conduction-info-card-padding);
17
+ padding-block-start: var(--conduction-info-card-padding);
18
+ padding-block-end: var(--conduction-info-card-padding);
19
+ }
20
+
21
+ .container > * {
22
+ display: block;
23
+ }
24
+
25
+ .container > *:not(:last-child) {
26
+ margin-block-end: var(--conduction-info-card-content-margin);
27
+ }
28
+
29
+ .container > .title {
30
+ font-weight: var(--conduction-info-card-title-weight);
31
+ font-size: var(--conduction-info-card-title-font-size);
32
+ color: var(--conduction-info-card-title-color);
33
+ }
34
+
35
+ .content {
36
+ color: var(--conduction-info-card-content-color);
37
+ }
package/lib/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard } from "./components/card";
2
+ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard } from "./components/card";
3
3
  import { Container } from "./components/container/Container";
4
4
  import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
5
5
  import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
@@ -19,4 +19,4 @@ declare const NotificationPopUp: {
19
19
  };
20
20
  NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
21
21
  };
22
- export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
22
+ export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
package/lib/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, } from "./components/card";
1
+ import { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, } from "./components/card";
2
2
  import { Container } from "./components/container/Container";
3
3
  import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
4
4
  import { EditableTableRow } from "./components/editableTableRow/EditableTableRow";
@@ -12,4 +12,4 @@ import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
12
12
  import { Tag } from "./components/tag/Tag";
13
13
  import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
14
14
  const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
15
- export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
15
+ export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@conduction/components",
3
- "version": "1.0.17",
3
+ "version": "1.0.18",
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/detailsCard/DetailsCard.tsx CHANGED
@@ -8,7 +8,7 @@ import { Tag } from "../../tag/Tag";
8
8
 
9
9
  interface DetailsCardProps {
10
10
  title: string;
11
- introduction: string;
11
+ introduction?: string;
12
12
  link: {
13
13
  href: string;
14
14
  label: string;
package/src/components/card/index.tsx CHANGED
@@ -3,5 +3,6 @@ import { HorizontalImageCard } from "./horizontalImageCard/HorizontalImageCard";
3
3
  import { ImageAndDetailsCard } from "./imageAndDetailsCard/ImageAndDetailsCard";
4
4
  import { RichContentCard } from "./richContentCard/RichContentCard";
5
5
  import { DetailsCard } from "./detailsCard/DetailsCard";
6
+ import { InfoCard } from "./infoCard/InfoCard";
6
7
 
7
- export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard };
8
+ export { DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard };
package/src/components/card/infoCard/InfoCard.module.css ADDED
@@ -0,0 +1,37 @@
1
+ :root {
2
+ --conduction-info-card-background-color: #f2f2f2;
3
+ --conduction-info-card-border-radius: 3px;
4
+ --conduction-info-card-title-weight: bold;
5
+ --conduction-info-card-title-font-size: 24px;
6
+ --conduction-info-card-title-color: #000000;
7
+ --conduction-info-card-content-color: #000000;
8
+ --conduction-info-card-padding: 16px;
9
+ --conduction-info-card-content-margin: 8px;
10
+ }
11
+
12
+ .container {
13
+ background-color: var(--conduction-info-card-background-color);
14
+ border-radius: var(--conduction-info-card-border-radius);
15
+ padding-inline-start: var(--conduction-info-card-padding);
16
+ padding-inline-end: var(--conduction-info-card-padding);
17
+ padding-block-start: var(--conduction-info-card-padding);
18
+ padding-block-end: var(--conduction-info-card-padding);
19
+ }
20
+
21
+ .container > * {
22
+ display: block;
23
+ }
24
+
25
+ .container > *:not(:last-child) {
26
+ margin-block-end: var(--conduction-info-card-content-margin);
27
+ }
28
+
29
+ .container > .title {
30
+ font-weight: var(--conduction-info-card-title-weight);
31
+ font-size: var(--conduction-info-card-title-font-size);
32
+ color: var(--conduction-info-card-title-color);
33
+ }
34
+
35
+ .content {
36
+ color: var(--conduction-info-card-content-color);
37
+ }
package/src/components/card/infoCard/InfoCard.tsx ADDED
@@ -0,0 +1,17 @@
1
+ import * as React from "react";
2
+ import * as styles from "./InfoCard.module.css";
3
+
4
+ interface InfoCardProps {
5
+ title: string;
6
+ content: JSX.Element | string;
7
+ }
8
+
9
+ export const InfoCard: React.FC<InfoCardProps> = ({ title, content }) => {
10
+ return (
11
+ <div className={styles.container}>
12
+ <span className={styles.title}>{title}</span>
13
+
14
+ <div className={styles.content}>{content}</div>
15
+ </div>
16
+ );
17
+ };
package/src/index.ts CHANGED
@@ -4,6 +4,7 @@ import {
4
4
  ImageAndDetailsCard,
5
5
  RichContentCard,
6
6
  DetailsCard,
7
+ InfoCard,
7
8
  } from "./components/card";
8
9
  import { Container } from "./components/container/Container";
9
10
  import { Breadcrumbs } from "./components/denhaag-wrappers/breadcrumbs/Breadcrumbs";
@@ -42,6 +43,7 @@ export {
42
43
  ImageAndDetailsCard,
43
44
  RichContentCard,
44
45
  DetailsCard,
46
+ InfoCard,
45
47
  Container,
46
48
  Breadcrumbs,
47
49
  EditableTableRow,