@sebgroup/green-react 2.0.0 → 2.2.0

package/README.md

@@ -42,7 +42,7 @@ yarn
 3. Start the Storybook
 
 ```bash
-yarn storybook react
+npx nx run react:storybook
 ```
 
 4. Start the test runner (or make sure your IDE runs the tests continuously)

package/index.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, useRef, useLayoutEffect, useMemo } from 'react';
+import React, { useState, useEffect, useRef, useLayoutEffect, useMemo, memo, useCallback } from 'react';
 import { randomId, createDatepicker, months, years, debounce, validateClassName, delay, sliderColors, getSliderTrackBackground, createStepper } from '@sebgroup/extract';
 import { getScopedTagName, GdsDropdown, GdsOption } from '@sebgroup/green-core';
 import { registerTransitionalStyles } from '@sebgroup/green-core/transitional-styles';
@@ -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,
@@ -2221,7 +2252,6 @@ const Dropdown = ({
   id,
   informationLabel,
   label,
-  loop,
   multiSelect,
   onChange,
   options,
@@ -2232,12 +2262,10 @@ const Dropdown = ({
   validator,
   value
 }) => {
-  const [selectedOption, setSelectedOption] = React.useState(options.find(o => o.value === value));
   const handleOnChange = e => {
-    var _a, _b;
+    var _a;
     if ((_a = e.detail) === null || _a === void 0 ? void 0 : _a.value) {
-      setSelectedOption(options.find(o => o[_useValue] === e.detail.value));
-      onChange === null || onChange === void 0 ? void 0 : onChange((_b = e.detail) === null || _b === void 0 ? void 0 : _b.value);
+      onChange === null || onChange === void 0 ? void 0 : onChange(e.detail.value);
     }
   };
   // These adapter functions are used to maintain backwards compatibility with the old interface
@@ -2256,10 +2284,10 @@ const Dropdown = ({
       label: label,
       searchable: searchable,
       multiple: multiSelect,
-      value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value,
       onchange: handleOnChange,
       invalid: (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',
       compareWith: compareWithAdapter,
+      value: value,
       searchFilter: searchFilterAdapter
     }, {
       children: [informationLabel && jsx("span", Object.assign({
@@ -2276,8 +2304,7 @@ const Dropdown = ({
       }, {
         children: (texts === null || texts === void 0 ? void 0 : texts.placeholder) || 'Select'
       })), options.map(option => jsx(CoreOption, Object.assign({
-        value: option[_useValue],
-        selected: option.selected
+        value: option[_useValue]
       }, {
         children: option[_display]
       }), option[_useValue]))]
@@ -4216,6 +4243,61 @@ const RadioGroup = ({
   }));
 };
 
+const TextArea = /*#__PURE__*/memo(_a => {
+  var {
+      autoComplete = 'off',
+      expandableInfo,
+      expandableInfoButtonLabel,
+      id = randomId(),
+      label,
+      info,
+      onChange,
+      role,
+      rows = 4,
+      validator,
+      value,
+      'data-testid': dataTestId
+    } = _a,
+    props = __rest(_a, ["autoComplete", "expandableInfo", "expandableInfoButtonLabel", "id", "label", "info", "onChange", "role", "rows", "validator", "value", 'data-testid']);
+  const [uuid] = useState(id);
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  const localOnChange = useCallback(event => {
+    setLocalValue(event.target.value);
+    if (onChange) onChange(event);
+  }, [setLocalValue, onChange]);
+  const ariaDetails = [];
+  if (info) ariaDetails.push(`${uuid}_info`);
+  if (expandableInfo) ariaDetails.push(`gds-expandable-info-${uuid}`);
+  return jsx(FormItem, Object.assign({
+    expandableInfo: expandableInfo,
+    expandableInfoButtonLabel: expandableInfoButtonLabel,
+    inputId: uuid,
+    label: label,
+    labelInformation: info,
+    role: role,
+    validator: validator
+  }, {
+    children: jsx("div", Object.assign({
+      className: "gds-input-wrapper"
+    }, {
+      children: jsx("textarea", Object.assign({
+        "aria-describedby": ariaDetails.length > 0 ? ariaDetails.join(' ') : undefined,
+        autoComplete: autoComplete,
+        className: validator && validateClassName(validator.indicator),
+        id: uuid,
+        onChange: localOnChange,
+        role: role,
+        rows: rows,
+        value: localValue,
+        "data-testid": dataTestId
+      }, props))
+    }))
+  }));
+});
+
 const Flexbox = _a => {
   var {
       alignContent,
@@ -4254,6 +4336,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,
@@ -4954,6 +5091,7 @@ const Tabs = ({
 
 const ModalHeader = ({
   header: _header = '',
+  id,
   onClose
 }) => {
   const handleClose = event => {
@@ -4962,9 +5100,11 @@ const ModalHeader = ({
   return jsxs("div", Object.assign({
     className: "header"
   }, {
-    children: [jsx("h3", {
+    children: [jsx("h3", Object.assign({
+      id: id
+    }, {
       children: _header
-    }), jsxs("button", Object.assign({
+    })), jsxs("button", Object.assign({
       className: "close",
       onClick: handleClose
     }, {
@@ -4977,10 +5117,12 @@ const ModalHeader = ({
   }));
 };
 const ModalBody = ({
-  children
+  children,
+  id
 }) => {
   return jsx("div", Object.assign({
-    className: "body"
+    className: "body",
+    id: id
   }, {
     children: children
   }));
@@ -5019,38 +5161,59 @@ const ModalFooter = ({
 const Modal = _a => {
   var {
       type = 'default',
-      isOpen
+      id = randomId(),
+      isOpen,
+      size = 'sm'
     } = _a,
-    props = __rest(_a, ["type", "isOpen"]);
-  const modalContent = () => {
-    switch (type) {
-      case 'slideout':
-        {
-          return jsxs("aside", Object.assign({
-            role: "dialog"
-          }, {
-            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
-          }));
-        }
-      case 'takeover':
-        {
-          return jsxs("main", Object.assign({
-            role: "dialog"
-          }, {
-            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
-          }));
-        }
-      default:
-        {
-          return jsxs("section", Object.assign({
-            role: "dialog"
-          }, {
-            children: [jsx(ModalHeader, Object.assign({}, props)), jsx(ModalBody, Object.assign({}, props)), jsx(ModalFooter, Object.assign({}, props))]
-          }));
-        }
-    }
+    props = __rest(_a, ["type", "id", "isOpen", "size"]);
+  const [uuid, _] = useState(id);
+  if (!isOpen) return null;
+  const bodyId = `${uuid}_body`;
+  const headerId = `${uuid}_header`;
+  const dialogProps = {
+    id: uuid,
+    role: 'dialog',
+    "aria-modal": true,
+    "aria-labelledby": headerId,
+    "aria-describedby": bodyId
   };
-  return isOpen ? modalContent() : null;
+  switch (type) {
+    case 'slideout':
+      {
+        let className = undefined;
+        if (size === "lg") className = 'gds-slide-out--960';
+        if (size === "md") className = 'gds-slide-out--768';
+        return jsxs("aside", Object.assign({
+          className: className
+        }, dialogProps, {
+          children: [jsx(ModalHeader, Object.assign({
+            id: headerId
+          }, props)), jsx(ModalBody, Object.assign({
+            id: bodyId
+          }, props)), jsx(ModalFooter, Object.assign({}, props))]
+        }));
+      }
+    case 'takeover':
+      {
+        return jsxs("main", Object.assign({}, dialogProps, {
+          children: [jsx(ModalHeader, Object.assign({
+            id: headerId
+          }, props)), jsx(ModalBody, Object.assign({
+            id: bodyId
+          }, props)), jsx(ModalFooter, Object.assign({}, props))]
+        }));
+      }
+    default:
+      {
+        return jsxs("section", Object.assign({}, dialogProps, {
+          children: [jsx(ModalHeader, Object.assign({
+            id: headerId
+          }, props)), jsx(ModalBody, Object.assign({
+            id: bodyId
+          }, props)), jsx(ModalFooter, Object.assign({}, props))]
+        }));
+      }
+  }
 };
 
-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, TextArea, TextInput, valueList$1 as ValueList };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@sebgroup/green-react",
-  "version": "2.0.0",
+  "version": "2.2.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.3",
+    "@sebgroup/chlorophyll": "^2.2.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/dropdown/dropdown.d.ts

@@ -20,9 +20,7 @@ export interface DropdownArgs {
     id?: string;
     informationLabel?: string;
     label?: string;
-    loop?: boolean;
     multiSelect?: boolean;
-    onTouched?: () => void;
     options: DropdownOption[];
     searchFilter?: SearchFilter;
     searchable?: boolean;
@@ -32,12 +30,7 @@ export interface DropdownArgs {
     value?: any;
 }
 export interface DropdownTexts {
-    select?: string;
-    selected?: string;
     placeholder?: string;
-    searchPlaceholder?: string;
-    close?: string;
-    optionsDescription?: string;
 }
 export interface DropdownOption {
     label?: string;
@@ -52,5 +45,5 @@ export declare const CoreOption: import("@lit-labs/react").ReactWebComponent<Gds
 export interface DropdownProps extends DropdownArgs {
     onChange?: OnChange;
 }
-export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, loop, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ compareWith, display, id, informationLabel, label, multiSelect, onChange, options, searchFilter, searchable, texts, useValue, validator, value, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export default Dropdown;

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

@@ -7,3 +7,4 @@ export * from './group/group';
 export * from './input/input';
 export * from './text/text';
 export * from './radioButton/radioGroup';
+export * from './textarea/textarea';

package/src/lib/form/textarea/textarea.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { IExpandableInformation, ILabelAndLabelInformation, IValidator } from '@sebgroup/extract';
+export interface ITextAreaProps extends IExpandableInformation, ILabelAndLabelInformation, React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+    label: string;
+    info?: string;
+    validator?: IValidator | undefined;
+    value?: string;
+    'data-testid'?: string;
+}
+export declare const TextArea: import("react").MemoExoticComponent<({ autoComplete, expandableInfo, expandableInfoButtonLabel, id, label, info, onChange, role, rows, validator, value, "data-testid": dataTestId, ...props }: ITextAreaProps) => import("react/jsx-runtime").JSX.Element>;

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/lib/modal/modal.d.ts

@@ -8,10 +8,11 @@ export interface ModalProps {
     confirm?: string;
     dismiss?: string;
     size?: Size;
+    id?: string;
     isOpen?: boolean;
     onClose?: ModalEventListener;
     onConfirm?: ModalEventListener;
     onDismiss?: ModalEventListener;
 }
-export declare const Modal: ({ type, isOpen, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Modal: ({ type, id, isOpen, size, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
 export default Modal;

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 {