@thecb/components 7.10.1 → 7.10.3

package/package.json

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

package/src/components/atoms/icons/PencilIcon.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const PencilIcon = ({ ariaLabel = "Edit", themeValues }) => (
+  <svg
+    aria-label={ariaLabel}
+    width="24px"
+    height="24px"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.74 6.84a.885.885 0 0 1 0 1.253l-1.626 1.626-3.333-3.333 1.626-1.626a.885.885 0 0 1 1.253 0l2.08 2.08ZM4 20.5v-3.333l9.83-9.83 3.333 3.333-9.83 9.83H4Z"
+      fill={themeValues.subIconColor}
+    />
+  </svg>
+);
+
+export default themeComponent(PencilIcon, "Icons", fallbackValues, "info");

package/src/components/atoms/icons/icons.stories.js

@@ -31,6 +31,7 @@ import {
   DuplicateIcon,
   ErroredIcon,
   FailedIcon,
+  PencilIcon,
   PendingIcon,
   RefundIcon,
   RejectedIcon,
@@ -75,6 +76,7 @@ export const chargebackReversalIcon = () => <ChargebackReversalIcon />;
 export const duplicateIcon = () => <DuplicateIcon />;
 export const erroredIcon = () => <ErroredIcon />;
 export const failedIcon = () => <FailedIcon />;
+export const pencilIcon = () => <PencilIcon />;
 export const pendingIcon = () => <PendingIcon />;
 export const refundIcon = () => <RefundIcon />;
 export const rejectedIcon = () => <RejectedIcon />;

package/src/components/atoms/icons/index.js

@@ -35,6 +35,7 @@ import DuplicateIcon from "./DuplicateIcon";
 import ErroredIcon from "./ErroredIcon";
 import ExternalLinkIcon from "./ExternalLinkIcon";
 import FailedIcon from "./FailedIcon";
+import PencilIcon from "./PencilIcon";
 import PendingIcon from "./PendingIcon";
 import RefundIcon from "./RefundIcon";
 import RejectedIcon from "./RejectedIcon";
@@ -118,6 +119,7 @@ export {
   ErroredIcon,
   ExternalLinkIcon,
   FailedIcon,
+  PencilIcon,
   PendingIcon,
   RefundIcon,
   RejectedIcon,

package/src/components/molecules/editable-list/EditableList.js

@@ -13,6 +13,7 @@ import {
   BOSTON_BLUE,
   CHARADE_GREY
 } from "../../../constants/colors";
+import { createIdFromString } from "../../../util/general";
 
 const ACTIVE = "ACTIVE";
 const EXPIRED = "EXPIRED";
@@ -36,6 +37,7 @@ const EditableList = ({
   modalProps,
   autoPayMethods,
   as = "p",
+  listPadding = "0rem 0rem 1.5rem 0rem",
   qaPrefix,
   ariaLabel
 }) => {
@@ -43,7 +45,20 @@ const EditableList = ({
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
   } ${itemName}`;
   return (
-    <Box padding="0rem 0rem 1.5rem 0rem" as="section" aria-labelledby={`li`}>
+    <Box
+      padding={listPadding}
+      as="section"
+      aria-labelledby={
+        typeof title === "string"
+          ? `editable-list-${createIdFromString(title)}`
+          : ""
+      }
+      aria-label={
+        !title && typeof itemName === "string"
+          ? `editable-list-${createIdFromString(itemName)}`
+          : ""
+      }
+    >
       <Stack childGap="0rem">
         {title !== "" && (
           <Box padding="0rem 0rem 0.5rem 0rem">
@@ -52,6 +67,11 @@ const EditableList = ({
               weight={titleWeight}
               color={CHARADE_GREY}
               extraStyles="letter-spacing: 0.29px; font-size: 1.125rem;"
+              id={
+                typeof title === "string"
+                  ? `editable-list-${createIdFromString(title)}`
+                  : ""
+              }
             >
               {title}
             </Title>