@thecb/components 9.0.4-beta.4 → 9.0.4

package/package.json

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

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

@@ -95,8 +95,8 @@ const Alert = ({
       borderSize={noBorder ? "0px" : "1px"}
       boxShadow={enableBoxShadow ? generateShadows()?.inset?.base : ""}
       extraStyles={extraStyles}
+      aria-live={ariaLive}
       {...(ariaAtomic !== null ? { "aria-atomic": ariaAtomic } : {})}
-      {...(ariaLive !== null ? { "aria-live": ariaLive } : {})}
       {...(ariaRole !== null ? { role: ariaRole } : {})}
     >
       {maxContentWidth ? (

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

@@ -251,31 +251,31 @@ const FormInput = ({
           />
         )}
       </Box>
-      <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
+        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>
     </Stack>
   );
 };

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

@@ -1,146 +0,0 @@
-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}
-  />
-);