@thecb/components 9.0.3 → 9.0.4-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.0.3",
+  "version": "9.0.4-beta.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/atoms/alert/Alert.js

@@ -24,7 +24,10 @@ const Alert = ({
   enableSmallText = false,
   innerContentPadding = "1rem",
   iconPadding = "0 0 0 1rem",
-  contentFullHeight = false
+  contentFullHeight = false,
+  ariaRole = "group",
+  ariaAtomic = true,
+  ariaLive = "polite"
 }) => {
   const Icon = AlertIcons[variant];
   let contentPadding = maxContentWidth
@@ -92,8 +95,9 @@ const Alert = ({
       borderSize={noBorder ? "0px" : "1px"}
       boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
-      role="alert"
-      aria-atomic={true}
+      role={ariaRole}
+      aria-atomic={ariaAtomic}
+      aria-live={ariaLive}
     >
       {maxContentWidth ? (
         <Center maxWidth={maxContentWidth}>{content}</Center>

package/src/components/atoms/form-layouts/FormInput.js

@@ -221,6 +221,7 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            aria-busy={true}
             {...props}
           />
         ) : (
@@ -247,35 +248,36 @@ const FormInput = ({
             $extraStyles={extraStyles}
             data-qa={dataQa || labelTextWhenNoError}
             autoComplete={autocompleteValue}
+            aria-busy={true}
             {...props}
           />
         )}
       </Box>
-      <Stack
-        direction="row"
-        justify="space-between"
-        aria-live="polite"
-        aria-atomic={true}
-      >
-        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
-          <Text
-            color={ERROR_COLOR}
-            variant="pXS"
-            weight={themeValues.fontWeight}
-            extraStyles={`word-break: break-word;
-              font-family: Public Sans;
-              &::first-letter {
-                text-transform: uppercase;
-              }`}
-            id={createIdFromString(labelTextWhenNoError, "error message")}
-          >
-            {errorMessages[field.errors[0]]}
-          </Text>
-        ) : (
-          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
-        )}
-        {!isMobile && decorator && <Box padding="0 0 0 auto">{decorator}</Box>}
-      </Stack>
+      <div role="status" aria-atomic={true}>
+        <Stack direction="row" justify="space-between">
+          {(field.hasErrors && field.dirty) ||
+          (field.hasErrors && showErrors) ? (
+            <Text
+              color={ERROR_COLOR}
+              variant="pXS"
+              weight={themeValues.fontWeight}
+              extraStyles={`word-break: break-word;
+                font-family: Public Sans;
+                &::first-letter {
+                  text-transform: uppercase;
+                }`}
+              id={createIdFromString(labelTextWhenNoError, "error message")}
+            >
+              {errorMessages[field.errors[0]]}
+            </Text>
+          ) : (
+            <Text extraStyles={`height: ${themeValues.lineHeight};`} />
+          )}
+          {!isMobile && decorator && (
+            <Box padding="0 0 0 auto">{decorator}</Box>
+          )}
+        </Stack>
+      </div>
     </Stack>
   );
 };

package/src/components/molecules/partial-amount-form/PartialAmountForm.js

@@ -83,6 +83,7 @@ const PartialAmountForm = ({
                 }
               </Text>
             }
+            aria-busy={true}
           />
         ))}
       </FormInputColumn>

package/src/components/molecules/partial-amount-form/PartialAmountForm.stories.js

@@ -0,0 +1,146 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+import { createFormState, required } from "redux-freeform";
+import PartialAmountForm from "./PartialAmountForm";
+import page from "../../../../.storybook/page";
+import * as PartialAmountFormState from "./PartialAmountForm.state";
+
+const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
+  thing: {
+    validators: [required()]
+  }
+});
+const errorMessages = {
+  [required.error]: "thing is required"
+};
+const partialAmountFormFields = {
+  "3cd98097-1c95-43c6-848a-d44f95d312ec": {
+    dirty: false,
+    rawValue: "5000",
+    validators: [
+      {
+        type: "validator/REQUIRED",
+        args: [],
+        error: "error/REQUIRED"
+      },
+      {
+        type: "validator/VALIDATE_SUM",
+        args: [
+          {
+            type: "validator/NUMBER_GREATER_THAN_OR_EQUAL_TO",
+            args: [1],
+            error: "error/NUMBER_GREATER_THAN_OR_EQUAL_TO"
+          },
+          [
+            "ff4b6d84-7f6a-4692-8d50-05eab56a6351",
+            "4396e95d-e0eb-44e6-8691-f94d72c2f7e7"
+          ]
+        ],
+        error: "error/NUMBER_GREATER_THAN_OR_EQUAL_TO"
+      },
+      {
+        type: "validator/VALIDATE_SUM",
+        args: [
+          {
+            type: "validator/NUMBER_LESS_THAN_OR_EQUAL_TO",
+            args: [50000],
+            error: "error/NUMBER_LESS_THAN_OR_EQUAL_TO"
+          },
+          [
+            "ff4b6d84-7f6a-4692-8d50-05eab56a6351",
+            "4396e95d-e0eb-44e6-8691-f94d72c2f7e7"
+          ]
+        ],
+        error: "error/NUMBER_LESS_THAN_OR_EQUAL_TO"
+      }
+    ],
+    constraints: [
+      {
+        type: "validator/ONLY_NATURALS",
+        args: [],
+        error: "error/ONLY_NATURALS"
+      }
+    ],
+    errors: ["error/NUMBER_LESS_THAN_OR_EQUAL_TO"],
+    hasErrors: true,
+    id: "3cd98097-1c95-43c6-848a-d44f95d312ec"
+  },
+  "ff4b6d84-7f6a-4692-8d50-05eab56a6351": {
+    dirty: false,
+    rawValue: "25000",
+    id: "ff4b6d84-7f6a-4692-8d50-05eab56a6351",
+    validators: [
+      {
+        type: "validator/REQUIRED",
+        args: [],
+        error: "error/REQUIRED"
+      },
+      {
+        type: "validator/VALIDATE_SUM",
+        args: [
+          {
+            type: "validator/NUMBER_GREATER_THAN_OR_EQUAL_TO",
+            args: [1],
+            error: "error/NUMBER_GREATER_THAN_OR_EQUAL_TO"
+          },
+          [
+            "3cd98097-1c95-43c6-848a-d44f95d312ec",
+            "4396e95d-e0eb-44e6-8691-f94d72c2f7e7"
+          ]
+        ],
+        error: "error/NUMBER_GREATER_THAN_OR_EQUAL_TO"
+      },
+      {
+        type: "validator/VALIDATE_SUM",
+        args: [
+          {
+            type: "validator/NUMBER_LESS_THAN_OR_EQUAL_TO",
+            args: [50000],
+            error: "error/NUMBER_LESS_THAN_OR_EQUAL_TO"
+          },
+          [
+            "3cd98097-1c95-43c6-848a-d44f95d312ec",
+            "4396e95d-e0eb-44e6-8691-f94d72c2f7e7"
+          ]
+        ],
+        error: "error/NUMBER_LESS_THAN_OR_EQUAL_TO"
+      }
+    ],
+    constraints: [
+      {
+        type: "validator/ONLY_NATURALS",
+        args: [],
+        error: "error/ONLY_NATURALS"
+      }
+    ],
+    errors: ["error/NUMBER_LESS_THAN_OR_EQUAL_TO"],
+    hasErrors: true
+  }
+};
+const options = [
+  { value: "", text: "choose name" },
+  { value: "foo", text: "foo" },
+  { value: "bar", text: "bar" },
+  { value: "baz", text: "baz" },
+  { value: "disabled", text: "disabled" }
+];
+const story = page({
+  title: "Components|Molecules/PartialAmountForm",
+  Component: PartialAmountForm,
+  reducer: PartialAmountFormState.reducer,
+  mapStateToProps: PartialAmountFormState.mapStateToProps,
+  mapDispatchToProps: PartialAmountFormState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedPartialAmountForm = connect(
+  PartialAmountFormState.mapStateToProps,
+  PartialAmountFormState.mapDispatchToProps
+)(PartialAmountForm);
+export const partialAmountForm = () => (
+  <ConnectedPartialAmountForm
+    showErrors={boolean("showErrors", false, "props")}
+    lineItems={options}
+  />
+);