@conduction/components 2.0.6 → 2.0.7

package/README.md

@@ -4,6 +4,9 @@
 
 - **Version 2**
 
+  - 2.0.7: 
+    - Added new BadgeCounter component.
+    - Added CodeBlock component.
   - 2.0.6: 
     - Added optional icon with default icon to the primary and secondary button in NotificationPopUp
     - Added a handleClick function to the DownloadCard;

package/lib/components/badgeCounter/BadgeCounter.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+interface BadgeCounterProps {
+    number: string;
+    children: React.ReactNode;
+    layoutClassName?: string;
+}
+export declare const BadgeCounter: React.FC<BadgeCounterProps>;
+export {};

package/lib/components/badgeCounter/BadgeCounter.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as styles from "./BadgeCounter.module.css";
+import clsx from "clsx";
+export const BadgeCounter = ({ number, children, layoutClassName }) => (_jsxs("div", { className: styles.content, children: [children, _jsx("span", { className: clsx([layoutClassName && layoutClassName], styles.badge), children: number })] }));

package/lib/components/badgeCounter/BadgeCounter.module.css

@@ -0,0 +1,27 @@
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/lib/components/codeBlock/CodeBlock.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface CodeBlockProps {
+    codeBlock: string | JSX.Element;
+}
+export declare const CodeBlock: React.FC<CodeBlockProps>;
+export {};

package/lib/components/codeBlock/CodeBlock.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./CodeBlock.module.css";
+export const CodeBlock = ({ codeBlock }) => _jsx("div", { className: styles.code, children: codeBlock });

package/lib/components/codeBlock/CodeBlock.module.css

@@ -0,0 +1,6 @@
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/lib/index.d.ts

@@ -21,4 +21,6 @@ declare const NotificationPopUp: {
 };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };
+import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
+import { CodeBlock } from "./components/codeBlock/CodeBlock";
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, };

package/lib/index.js

@@ -14,4 +14,6 @@ import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, }
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
-export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, };
+import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
+import { CodeBlock } from "./components/codeBlock/CodeBlock";
+export { InputRadio, DownloadCard, HorizontalImageCard, ImageAndDetailsCard, RichContentCard, DetailsCard, InfoCard, Container, Breadcrumbs, EditableTableRow, InputText, InputPassword, InputEmail, InputDate, InputNumber, InputFile, Textarea, InputCheckbox, SelectMultiple, SelectSingle, ImageDivider, AuthenticatedLogo, UnauthenticatedLogo, MetaIcon, PrivateRoute, StatusSteps, PrimaryTopNav, SecondaryTopNav, Tag, NotificationPopUp, QuoteWrapper, Pagination, BadgeCounter, CodeBlock, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/badgeCounter/BadgeCounter.module.css

@@ -0,0 +1,27 @@
+:root {
+  --conduction-badge-counter-color: hsl(0 0% 0%);
+  --conduction-badge-counter-background-color: var(--skeleton-color-grey-1);
+  --conduction-badge-counter-height: var(--skeleton-size-md);
+  --conduction-badge-counter-width: var(--skeleton-size-md);
+  --conduction-badge-counter-font-size: var(--skeleton-font-size-xs);
+  --conduction-badge-counter-max-number-font-size: var(--skeleton-font-size-2xs);
+}
+
+.content {
+  display: flex;
+}
+
+.badge {
+  height: var(--conduction-badge-counter-height);
+  width: var(--conduction-badge-counter-width);
+  border-radius: 50%;
+  font-size: var(--conduction-badge-counter-font-size);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  background-color: var(--conduction-badge-counter-background-color);
+  color: var(--conduction-badge-counter-color);
+}
+.maxNumber {
+  font-size: var(--conduction-badge-counter-max-number-font-size);
+}

package/src/components/badgeCounter/BadgeCounter.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as styles from "./BadgeCounter.module.css";
+import clsx from "clsx";
+
+interface BadgeCounterProps {
+  number: string;
+  children: React.ReactNode;
+  layoutClassName?: string;
+}
+
+export const BadgeCounter: React.FC<BadgeCounterProps> = ({ number, children, layoutClassName }) => (
+  <div className={styles.content}>
+    {children}
+    <span className={clsx([layoutClassName && layoutClassName], styles.badge)}>{number}</span>
+  </div>
+);

package/src/components/codeBlock/CodeBlock.module.css

@@ -0,0 +1,6 @@
+.code {
+  margin-block: var(--skeleton-size-sm);
+  background-color: var(--skeleton-color-grey-1);
+  border-radius: var(--skeleton-size-2xs);
+  padding: var(--skeleton-size-lg);
+}

package/src/components/codeBlock/CodeBlock.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import * as styles from "./CodeBlock.module.css";
+
+interface CodeBlockProps {
+  codeBlock: string | JSX.Element;
+}
+
+export const CodeBlock: React.FC<CodeBlockProps> = ({ codeBlock }) => <div className={styles.code}>{codeBlock}</div>;

package/src/index.ts

@@ -36,6 +36,8 @@ import {
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
 import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 import { Pagination } from "./components/denhaag-wrappers/pagination/Pagination";
+import { BadgeCounter } from "./components/badgeCounter/BadgeCounter";
+import { CodeBlock } from "./components/codeBlock/CodeBlock";
 
 export {
   InputRadio,
@@ -70,4 +72,6 @@ export {
   NotificationPopUp,
   QuoteWrapper,
   Pagination,
+  BadgeCounter,
+  CodeBlock,
 };