@thecb/components 8.4.1 → 8.4.3-beta.0

package/package.json

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

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
 
-const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
+const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID, labelledBy = "" }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,7 +9,7 @@ const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
       height="20"
       viewBox="0 0 20 20"
       fill="none"
-      aria-labeledBy={labeledBy}
+      aria-labelledby={labelledBy}
     >
       <path
         fillRule="evenodd"

package/src/components/atoms/icons/{ExternalLinkIcon.js → ExternalLinkicon.js}

@@ -16,7 +16,7 @@ const ExternalLinkIcon = ({ linkColor, text }) => (
     />
     <mask
       id={`mask0_902_435-${text}`}
-      style={{ "mask-type": "alpha" }}
+      style={{ maskType: "alpha" }}
       maskUnits="userSpaceOnUse"
       x="1"
       y="1"

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
 
-const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
+const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID, labelledBy = "" }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -9,7 +9,7 @@ const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
       height="20"
       viewBox="0 0 20 20"
       fill="none"
-      aria-labelledby={labeledBy}
+      aria-labelledby={labelledBy}
     >
       <path
         fillRule="evenodd"

package/src/components/molecules/editable-table/TableListItem.js

@@ -5,15 +5,17 @@ import {
   ItemWrapper,
   ActionWrapper,
   TableItemKey,
-  TableItemValue
+  TableItemValue,
 } from "./EditableTable.styled";
 import { Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
 import { CHARADE_GREY, GHOST_GREY } from "../../../constants/colors";
+import { noop } from "../../../util/general";
 
 const TableListItem = ({
   title,
   value,
+  onClick = noop,
   canEdit = false,
   canRemove = false,
   isMobile,
@@ -36,7 +38,7 @@ const TableListItem = ({
   `}
   >
     <ItemWrapper>
-      <EditableTableListItem isMobile={isMobile}>
+      <EditableTableListItem isMobile={isMobile} onClick={onClick}>
         <TableItemKey isMobile={isMobile}>
           <Text variant="pS" color={CHARADE_GREY}>
             {title}

package/src/components/molecules/editable-table/index.d.ts

@@ -14,6 +14,7 @@ export const EditableTable: React.FC<Expand<EditableTableProps> &
 export interface TableListItemProps {
   title: string | JSX.Element;
   value: string | JSX.Element;
+  onClick?: () => void;
   canEdit?: boolean;
   canRemove?: boolean;
   isMobile?: boolean;

package/src/components/molecules/link-card/LinkCard.js

@@ -20,12 +20,14 @@ const LinkCard = ({
   extraActiveStyles = ""
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const regex = /\W/g;
+  const locatorSlug = title.toLowerCase().replaceAll(regex, "-");
 
   return (
     <Styled.Container
       border={`1px solid ${themeValues.background};`}
       borderRadius="8px"
-      dataQa={`link-card-${title}`}
+      dataQa={`link-card-${locatorSlug}`}
       width="100%"
       maxWidth={isMobile ? "100%" : "288px"}
       minWidth={isMobile ? "240px" : "288px"}