@conduction/components 1.0.19 → 1.0.20

package/lib/components/quoteWrapper/QuoteWrapper.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+interface QuoteWrapperProps {
+    borderColor?: string;
+    borderWidth?: string;
+}
+export declare const QuoteWrapper: React.FC<QuoteWrapperProps>;
+export {};

package/lib/components/quoteWrapper/QuoteWrapper.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as styles from "./QuoteWrapper.module.css";
+export const QuoteWrapper = ({ children, borderColor, borderWidth }) => {
+    return (_jsx("div", { style: { borderLeftColor: borderColor, borderLeftWidth: borderWidth }, className: styles.container, children: children }));
+};

package/lib/components/quoteWrapper/QuoteWrapper.module.css

@@ -0,0 +1,12 @@
+:root {
+  --conduction-quote-border-width: 12px;
+  --conduction-quote-border-color: #f5f5f5;
+  --conduction-quote-padding-inline: 24px;
+}
+
+.container {
+  border-left-width: var(--conduction-quote-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-border-color);
+  padding-inline-start: var(--conduction-quote-padding-inline);
+}

package/lib/index.d.ts

@@ -19,4 +19,5 @@ declare const NotificationPopUp: {
     };
     NotificationPopUp: import("react").FC<import("./components/notificationPopUp/NotificationPopUp").NotificationPopUpProps>;
 };
-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, };
+import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
+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, };

package/lib/index.js

@@ -12,4 +12,5 @@ import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
 import { Tag } from "./components/tag/Tag";
 import { NotificationPopUpController, NotificationPopUp as _NotificationPopUp, } from "./components/notificationPopUp/NotificationPopUp";
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
-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, };
+import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
+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, };

package/package.json

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

package/src/components/quoteWrapper/QuoteWrapper.module.css

@@ -0,0 +1,12 @@
+:root {
+  --conduction-quote-border-width: 12px;
+  --conduction-quote-border-color: #f5f5f5;
+  --conduction-quote-padding-inline: 24px;
+}
+
+.container {
+  border-left-width: var(--conduction-quote-border-width);
+  border-left-style: solid;
+  border-left-color: var(--conduction-quote-border-color);
+  padding-inline-start: var(--conduction-quote-padding-inline);
+}

package/src/components/quoteWrapper/QuoteWrapper.tsx

@@ -0,0 +1,15 @@
+import * as React from "react";
+import * as styles from "./QuoteWrapper.module.css";
+
+interface QuoteWrapperProps {
+  borderColor?: string;
+  borderWidth?: string;
+}
+
+export const QuoteWrapper: React.FC<QuoteWrapperProps> = ({ children, borderColor, borderWidth }) => {
+  return (
+    <div style={{ borderLeftColor: borderColor, borderLeftWidth: borderWidth }} className={styles.container}>
+      {children}
+    </div>
+  );
+};

package/src/index.ts

@@ -29,13 +29,12 @@ import { PrivateRoute } from "./components/privateRoute/PrivateRoute";
 import { StatusSteps } from "./components/statusSteps/StatusSteps";
 import { PrimaryTopNav, SecondaryTopNav } from "./components/topNav/TopNav";
 import { Tag } from "./components/tag/Tag";
-
 import {
   NotificationPopUpController,
   NotificationPopUp as _NotificationPopUp,
 } from "./components/notificationPopUp/NotificationPopUp";
-
 const NotificationPopUp = { controller: NotificationPopUpController, NotificationPopUp: _NotificationPopUp };
+import { QuoteWrapper } from "./components/quoteWrapper/QuoteWrapper";
 
 export {
   InputRadio,
@@ -68,4 +67,5 @@ export {
   SecondaryTopNav,
   Tag,
   NotificationPopUp,
+  QuoteWrapper,
 };