@sebgroup/green-react 2.0.0 → 2.1.0

package/index.esm.js

@@ -1751,7 +1751,7 @@ const Check = ({
     focusable: _focusable,
     "aria-labelledby": id
   }, {
-    children: ["title && ", jsx("title", Object.assign({
+    children: [title && jsx("title", Object.assign({
       id: id
     }, {
       children: title
@@ -1776,7 +1776,7 @@ const ChevronDown = ({
     focusable: _focusable,
     "aria-labelledby": id
   }, {
-    children: ["title && ", jsx("title", Object.assign({
+    children: [title && jsx("title", Object.assign({
       id: id
     }, {
       children: title
@@ -1885,6 +1885,37 @@ const InfoCircle = _a => {
   }));
 };
 
+const Edit = _a => {
+  var {
+      focusable = false,
+      title,
+      fill = 'white',
+      width = 24,
+      height = 24
+    } = _a,
+    props = __rest(_a, ["focusable", "title", "fill", "width", "height"]);
+  let id;
+  if (title) id = randomId();
+  return jsxs("svg", Object.assign({
+    width: width,
+    height: height,
+    viewBox: "0 0 576 512",
+    xmlns: "http://www.w3.org/2000/svg",
+    focusable: focusable,
+    "aria-labelledby": id,
+    "aria-hidden": props['aria-hidden']
+  }, {
+    children: [title && jsx("title", Object.assign({
+      id: id
+    }, {
+      children: title
+    })), jsx("path", {
+      fill: fill,
+      d: "M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"
+    })]
+  }));
+};
+
 function AlertRibbon({
   type,
   header,
@@ -4254,6 +4285,61 @@ const Flexbox = _a => {
   }));
 };
 
+const InPageWizardStepCard = props => {
+  return jsxs("section", Object.assign({
+    className: `gds-in-page-wizard-step-card card ${props.stepStatus === 'IsActive' ? 'active' : ''} ${props.stepStatus === 'IsComplete' ? 'completed' : ''}`,
+    "data-testid": props.dataTestid
+  }, {
+    children: [jsxs("header", Object.assign({
+      className: "gds-in-page-wizard-step-card__header"
+    }, {
+      children: [jsx("div", Object.assign({
+        className: "gds-in-page-wizard-step-card__header__icon"
+      }, {
+        children: jsx(Check, {})
+      })), jsx("div", Object.assign({
+        className: "gds-in-page-wizard-step-card__header__progress"
+      }, {
+        children: props.stepText
+      })), jsx("div", Object.assign({
+        className: "gds-in-page-wizard-step-card__header__title"
+      }, {
+        children: jsx("h2", Object.assign({
+          className: "h4"
+        }, {
+          children: props.title
+        }))
+      })), props.stepStatus === 'IsComplete' && jsx("div", Object.assign({
+        className: "gds-in-page-wizard-step-card__header__edit"
+      }, {
+        children: jsxs("button", Object.assign({
+          className: "secondary small",
+          onClick: props.onEditClick
+        }, {
+          children: [jsx(Edit, {
+            fill: 'var(--color)',
+            height: 16,
+            width: 16
+          }), props.editBtnText]
+        }))
+      }))]
+    })), (props.stepStatus === 'IsActive' || props.stepStatus === 'IsComplete') && jsx("div", Object.assign({
+      className: "gds-in-page-wizard-step-card__content"
+    }, {
+      children: props.children
+    })), props.stepStatus === 'IsActive' && !props.hideFooter && jsx("footer", Object.assign({
+      className: "gds-in-page-wizard-step-card__footer"
+    }, {
+      children: jsxs("button", Object.assign({
+        className: "primary",
+        onClick: props.onNextClick
+      }, {
+        children: [props.nextBtnText, props.nextBtnIcon]
+      }))
+    }))]
+  }));
+};
+
 const Link = _a => {
   var {
       button,
@@ -5053,4 +5139,4 @@ const Modal = _a => {
   return isOpen ? modalContent() : null;
 };
 
-export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tab, Tabs, Text, TextInput, valueList$1 as ValueList };
+export { Accordion, AlertRibbon as Alert, AlertRibbon, Badge, Button, ButtonGroup, Card, Checkbox, CoreDropdown, CoreOption, Datepicker, Dropdown, EmailInput, Flexbox, Form, FormItem, FormItems, Group, InPageWizardStepCard, Link, List$1 as List, Modal, Navbar, NumberInput, Option, OptionGroup, RadioButton, RadioGroup, RenderInput, Select, Slider, Stepper, Tab, Tabs, Text, TextInput, valueList$1 as ValueList };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "peerDependencies": {
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.0.0",
-    "@sebgroup/chlorophyll": "^2.0.1",
+    "@sebgroup/green-core": "^1.0.2",
+    "@sebgroup/chlorophyll": "^2.1.0",
     "@sebgroup/extract": "^2.0.0",
     "classnames": "^2.3.2"
   },

package/src/index.d.ts

@@ -7,6 +7,7 @@ export * from './lib/dropdown/dropdown';
 export * from './lib/form';
 export * from './lib/formItem';
 export * from './lib/layout';
+export * from './lib/in-page-wizard';
 export * from './lib/link/link';
 export * from './lib/list';
 export * from './lib/navbar/navbar';

package/src/lib/icons/edit.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from '../../types/props';
+export declare const Edit: ({ focusable, title, fill, width, height, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/icons/index.d.ts

@@ -5,3 +5,4 @@ export * from './square-exclamation';
 export * from './square-info';
 export * from './times';
 export * from './infoCircle';
+export * from './edit';

package/src/lib/in-page-wizard/inPageWizardStepCard.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface InPageWizardStepCardProps {
+    stepText: string;
+    title: string;
+    editBtnText: string;
+    nextBtnText: string;
+    nextBtnIcon?: ReactNode;
+    stepStatus: WizardStepStatus;
+    hideFooter?: boolean;
+    children: React.ReactNode;
+    onNextClick: () => void;
+    onEditClick: () => void;
+    dataTestid?: string;
+}
+export declare type WizardStepStatus = 'NotStarted' | 'IsActive' | 'IsComplete';
+export declare const InPageWizardStepCard: (props: InPageWizardStepCardProps) => import("react/jsx-runtime").JSX.Element;

package/src/lib/in-page-wizard/index.d.ts

@@ -0,0 +1 @@
+export * from './inPageWizardStepCard';

package/src/types/props/index.d.ts

@@ -2,6 +2,8 @@ export interface IconProps {
     focusable?: boolean;
     title?: string;
     fill?: string;
+    width?: number;
+    height?: number;
     'aria-hidden'?: boolean;
 }
 export interface SelectorAttributesProps {