@thecb/components 9.5.1 → 9.5.2

package/package.json

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

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

@@ -39,7 +39,8 @@ const EditableList = ({
   as = "p",
   listPadding = "0rem 0rem 1.5rem 0rem",
   qaPrefix,
-  ariaLabel
+  ariaLabel,
+  editItemAriaRole = ""
 }) => {
   const addText = `Add a${
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
@@ -151,6 +152,7 @@ const EditableList = ({
                         action={() => editItem(item.id)}
                         extraStyles={`min-width: 0;`}
                         aria-label={`Edit ${ariaLabel || itemName}`}
+                        role={editItemAriaRole}
                       />
                     </Box>
                   )}

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

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { boolean } from "@storybook/addon-knobs";
+
+import EditableList from "./EditableList";
+import page from "../../../../.storybook/page";
+
+const story = page({
+  title: "Components|Molecules/EditableList",
+  Component: EditableList
+});
+export default story;
+
+export const editableList = () => {
+  return (
+    <EditableList
+      as="h2"
+      canRemove={false}
+      title="Contact first name"
+      titleWeight="600"
+      editItem={() => console.log("edit click")}
+      editItemAriaRole="link"
+      itemName="Contact first name"
+      listPadding="0"
+      renderItem={contactFirstName => contactFirstName}
+      maxItems={1}
+      items={["Ronald"]}
+      qaPrefix="Contact first name"
+      ariaLabel="Contact first name"
+    />
+  );
+};