@abgov/jsonforms-components 1.53.1 → 1.53.2

package/index.esm.js

@@ -1,6 +1,6 @@
 import * as runtime from 'react/jsx-runtime';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
+import { GoAFormItem, GoAInput, GoATextArea, GoACallout, GoAInputDate, GoAInputDateTime, GoAInputTime, GoARadioGroup, GoARadioItem, GoACheckbox, GoAIcon, GoAGrid, GoAFormStepper, GoAFormStep, GoAPages, GoAButton, GoAModal, GoAButtonGroup, GoAIconButton, GoAFileUploadInput, GoACircularProgress, GoAContainer, GoATable, GoADropdown, GoADropdownItem, GoADetails, GoASpinner } from '@abgov/react-components';
 import styled from 'styled-components';
 import React, { createContext, useContext, useReducer, useMemo, useEffect, useState, useRef, useCallback } from 'react';
 import axios from 'axios';
@@ -3081,14 +3081,14 @@ const onChangeForCheckboxData = (data, name, value) => data ? !value ? data ===
 
 let _$a = t => t,
   _t$a,
-  _t2$6;
+  _t2$7;
 styled.div(_t$a || (_t$a = _$a`
   height: 70vh;
   overflow-y: auto;
   padding-left: var(--goa-space-2xs);
   padding-right: var(--goa-space-2xs);
 `));
-const Visible = styled.div(_t2$6 || (_t2$6 = _$a`
+const Visible = styled.div(_t2$7 || (_t2$7 = _$a`
   display: ${0};
 `), p => p.visible ? 'initial' : 'none');
 
@@ -3849,10 +3849,26 @@ const JsonFormRegisterProvider = ({
 };
 
 let _$9 = t => t,
-  _t$9;
+  _t$9,
+  _t2$6,
+  _t3$5;
 const FormFieldWrapper = styled.div(_t$9 || (_t$9 = _$9`
   margin-bottom: var(--goa-space-l);
 `));
+const WarningIconDiv = styled.div(_t2$6 || (_t2$6 = _$9`
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.25rem;
+  font-size: var(--goa-font-size-2);
+  color: var(--goa-color-interactive-error);
+`));
+const RequiredTextLabel = styled.label(_t3$5 || (_t3$5 = _$9`
+  color: var(--goa-color-greyscale-700);
+  font-weight: var(--goa-font-weight-regular);
+  font-size: var(--goa-font-size-2);
+  line-height: var(--goa-line-height-1);
+  font-style: normal;
+`));
 
 const GoAInputBaseControl = props => {
   var _a, _b;
@@ -5234,24 +5250,57 @@ const EnumCheckboxControl = props => {
 const GoAEnumCheckboxGroupControl = withJsonFormsEnumProps(withTranslateProps(EnumCheckboxControl), true);
 const GoACheckoutGroupControlTester = rankWith(18, and(isEnumControl, optionIs('format', 'checkbox')));
 
+const warningIcon = errorMessage => {
+  return jsxs(WarningIconDiv, {
+    children: [jsx(GoAIcon, {
+      type: "warning",
+      size: "small",
+      theme: "filled",
+      mt: "2xs"
+    }), errorMessage]
+  });
+};
 const GoABaseInputReviewComponent = props => {
+  var _a, _b, _c, _d, _e;
   // eslint-disable-next-line
   const {
     data,
-    id
+    id,
+    uischema,
+    schema,
+    required
   } = props;
   let reviewText = data;
   const isBoolean = typeof data === 'boolean';
+  const requiredText = `${((_a = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _a === void 0 ? void 0 : _a.text) ? (_b = uischema === null || uischema === void 0 ? void 0 : uischema.options) === null || _b === void 0 ? void 0 : _b.text : (schema === null || schema === void 0 ? void 0 : schema.title) ? schema === null || schema === void 0 ? void 0 : schema.title : schema === null || schema === void 0 ? void 0 : schema.description}${required ? ' is required.' : ''}`;
+  const renderRequiredLabel = () => {
+    return data !== undefined && schema.type === 'boolean' && required ? jsx(RequiredTextLabel, {
+      children: ` (required)`
+    }) : null;
+  };
+  const renderWarningMessage = () => {
+    var _a;
+    if ((_a = uischema.options) === null || _a === void 0 ? void 0 : _a.radio) return null;
+    if (schema.type === 'boolean' && required && data === undefined) {
+      return warningIcon(requiredText.trim());
+    }
+    return null;
+  };
   if (isBoolean) {
-    reviewText = data ? 'Yes' : 'No';
+    const label = (_d = (_c = uischema.options) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d.trim();
+    if (((_e = uischema.options) === null || _e === void 0 ? void 0 : _e.radio) === true) {
+      reviewText = data ? `Yes` : `No`;
+    } else {
+      reviewText = data ? `Yes (${label})` : `No (${label})`;
+    }
   }
-  return jsx("div", {
+  return jsxs("div", {
     style: {
       textWrap: 'wrap',
       wordBreak: 'break-word'
     },
     "data-testid": `review-control-${id}`,
-    children: reviewText
+    children: [reviewText, renderRequiredLabel(), renderWarningMessage()]
   });
 };
 const GoInputBaseReview = props => jsx(GoAInputBaseControl, Object.assign({}, props, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/jsonforms-components",
-  "version": "1.53.1",
+  "version": "1.53.2",
   "license": "Apache-2.0",
   "description": "Government of Alberta - React renderers for JSON Forms based on the design system.",
   "repository": "https://github.com/GovAlta/adsp-monorepo",

package/src/lib/Controls/Inputs/InputBaseReviewControl.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { CellProps, WithClassname, ControlProps } from '@jsonforms/core';
+import { CellProps, WithClassname, ControlProps, StatePropsOfControl } from '@jsonforms/core';
 import { WithInputProps } from './type';
-export type WithBaseInputReviewProps = CellProps & WithClassname & WithInputProps;
+export type WithBaseInputReviewProps = CellProps & WithClassname & WithInputProps & StatePropsOfControl;
 export declare const GoABaseInputReviewComponent: (props: WithBaseInputReviewProps) => JSX.Element;
 export declare const GoInputBaseReview: (props: ControlProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GoInputBaseReviewControl: import("react").ComponentType<import("@jsonforms/core").OwnPropsOfControl>;

package/src/lib/Controls/Inputs/style-component.d.ts

@@ -1,2 +1,4 @@
 /// <reference types="react" />
 export declare const FormFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const WarningIconDiv: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RequiredTextLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;