@thecb/components 7.1.3-beta.2 → 7.1.4-beta.0

package/package.json

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

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

@@ -2,7 +2,7 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const WalletIconSmall = ({ themeValues }) => {
+const WalletIconSmall = ({ themeValues, iconIndex = 0 }) => {
   return (
     <svg
       width="20"
@@ -18,7 +18,7 @@ const WalletIconSmall = ({ themeValues }) => {
         fill={themeValues.singleIconColor}
       />
       <mask
-        id="mask0_503_574"
+        id={`mask0_503_574-${iconIndex}`}
         style={{ maskType: "alpha" }}
         maskUnits="userSpaceOnUse"
         x="3"
@@ -33,7 +33,7 @@ const WalletIconSmall = ({ themeValues }) => {
           fill="white"
         />
       </mask>
-      <g mask="url(#mask0_503_574)">
+      <g mask={`url(#mask0_503_574-${iconIndex})`}>
         <rect width="20" height="20" fill={themeValues.singleIconColor} />
       </g>
     </svg>

package/src/components/atoms/link/ExternalLink.d.ts

@@ -15,4 +15,4 @@ export interface ExternalLinkProps {
 }
 
 export const ExternalLink: React.FC<Expand<ExternalLinkProps> &
-  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/link/ExternalLink.js

@@ -6,22 +6,19 @@ import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { safeChildren } from "../../../util/general";
 
-const ExternalLink = (
-  {
-    href = "",
-    newTab = false,
-    size = "1rem",
-    lineHeight = "1.5rem",
-    weight = FONT_WEIGHT_REGULAR,
-    extraStyles = ``,
-    variant = "primary",
-    tabIndex = "0",
-    dataQa,
-    ariaLabel,
-    children
-  },
-  ref
-) => {
+const ExternalLink = ({
+  href = "",
+  newTab = false,
+  size = "1rem",
+  lineHeight = "1.5rem",
+  weight = FONT_WEIGHT_REGULAR,
+  extraStyles = ``,
+  variant = "primary",
+  tabIndex = "0",
+  dataQa,
+  ariaLabel,
+  children
+}) => {
   const themeContext = useContext(ThemeContext);
   const themeValues = createThemeValues(
     themeContext,
@@ -46,7 +43,6 @@ const ExternalLink = (
       rel={newTab ? "noopener" : ""}
       data-qa={dataQa}
       aria-label={ariaLabel}
-      ref={ref}
     >
       {safeChildren(children, <span />)}
     </StyledExternalLink>

package/src/components/atoms/link/ExternalLink.styled.js

@@ -8,9 +8,7 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const StyledExternalLink = styled(
-  ({ hoverColor, activeColor, extrastyles, ...props }, ref) => (
-    <a {...props} ref={ref} />
-  )
+  ({ hoverColor, activeColor, extrastyles, ...props }) => <a {...props} />
 )`
   display: flex;
   font-size: ${({ size }) => size};

package/src/components/atoms/link/InternalLink.d.ts

@@ -16,4 +16,4 @@ export interface InternalLinkProps {
 }
 
 export const InternalLink: React.FC<Expand<InternalLinkProps> &
-  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/atoms/link/InternalLink.js

@@ -5,23 +5,20 @@ import { createThemeValues } from "../../../util/themeUtils";
 import { StyledInternalLink } from "./InternalLink.styled";
 import { safeChildren } from "../../../util/general";
 
-const InternalLink = (
-  {
-    to = "",
-    color,
-    children,
-    active,
-    fontSize,
-    lineheight,
-    fontWeight,
-    variant = "primary",
-    margin,
-    tabIndex = "0",
-    dataQa,
-    extraStyles = ``
-  },
-  ref
-) => {
+const InternalLink = ({
+  to = "",
+  color,
+  children,
+  active,
+  fontSize,
+  lineheight,
+  fontWeight,
+  variant = "primary",
+  margin,
+  tabIndex = "0",
+  dataQa,
+  extraStyles = ``
+}) => {
   const themeContext = useContext(ThemeContext);
   const themeValues = createThemeValues(
     themeContext,
@@ -45,7 +42,6 @@ const InternalLink = (
       tabIndex={tabIndex}
       extrastyles={extraStyles}
       data-qa={dataQa}
-      ref={ref}
     >
       {safeChildren(children, <span />)}
     </StyledInternalLink>

package/src/components/atoms/link/InternalLink.styled.js

@@ -9,8 +9,8 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  ({ hoverColor, activeColor, active, color, extrastyles, ...props }, ref) => (
-    <Link {...props} ref={ref} />
+  ({ hoverColor, activeColor, active, color, extrastyles, ...props }) => (
+    <Link {...props} />
   )
 )`
   display: flex;