@thecb/components 8.4.0 → 8.4.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thecb/components",
3
- "version": "8.4.0",
3
+ "version": "8.4.1-beta.0",
4
4
  "description": "Common lib for CityBase react components",
5
5
  "main": "dist/index.cjs.js",
6
6
  "typings": "dist/index.d.ts",
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
3
3
 
4
- const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
4
+ const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID, labelledBy = "" }) => {
5
5
  return (
6
6
  <svg
7
7
  xmlns="http://www.w3.org/2000/svg"
@@ -9,7 +9,7 @@ const ArrowRightIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
9
9
  height="20"
10
10
  viewBox="0 0 20 20"
11
11
  fill="none"
12
- aria-labeledBy={labeledBy}
12
+ aria-labelledby={labelledBy}
13
13
  >
14
14
  <path
15
15
  fillRule="evenodd"
@@ -16,7 +16,7 @@ const ExternalLinkIcon = ({ linkColor, text }) => (
16
16
  />
17
17
  <mask
18
18
  id={`mask0_902_435-${text}`}
19
- style={{ "mask-type": "alpha" }}
19
+ style={{ maskType: "alpha" }}
20
20
  maskUnits="userSpaceOnUse"
21
21
  x="1"
22
22
  y="1"
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { ROYAL_BLUE_VIVID } from "../../../constants/colors";
3
3
 
4
- const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
4
+ const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID, labelledBy = "" }) => {
5
5
  return (
6
6
  <svg
7
7
  xmlns="http://www.w3.org/2000/svg"
@@ -9,7 +9,7 @@ const PlusCircleIcon = ({ color = ROYAL_BLUE_VIVID, labeledBy = "" }) => {
9
9
  height="20"
10
10
  viewBox="0 0 20 20"
11
11
  fill="none"
12
- aria-labelledby={labeledBy}
12
+ aria-labelledby={labelledBy}
13
13
  >
14
14
  <path
15
15
  fillRule="evenodd"
@@ -20,12 +20,14 @@ const LinkCard = ({
20
20
  extraActiveStyles = ""
21
21
  }) => {
22
22
  const { isMobile } = useContext(ThemeContext);
23
+ const locatorSlug = title.toLowerCase.gsub(/\s/, "-");
24
+ console.log("locatorSlug", locatorSlug);
23
25
 
24
26
  return (
25
27
  <Styled.Container
26
28
  border={`1px solid ${themeValues.background};`}
27
29
  borderRadius="8px"
28
- dataQa={`link-card-${title}`}
30
+ dataQa={`link-card-${locatorSlug}`}
29
31
  width="100%"
30
32
  maxWidth={isMobile ? "100%" : "288px"}
31
33
  minWidth={isMobile ? "240px" : "288px"}