@thecb/components 11.1.1 → 11.1.2

package/package.json

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

package/src/components/atoms/loading-line/LoadingLine.js

@@ -1,12 +1,16 @@
 import React from "react";
 import { LoadingPill } from "./LoadingPill.styled";
+import { colors } from "../../../constants";
 
 const LoadingLine = ({
   minWidth,
   maxWidth,
   exactWidth = null,
   height = "16px",
-  margin = "0px"
+  margin = "0px",
+  backgroundColor = colors.SEASHELL_WHITE,
+  foregroundColor = colors.ALABASTER_WHITE,
+  ...props
 }) => {
   const calculatedWidth = Math.floor(
     Math.random() * (parseInt(maxWidth) - parseInt(minWidth) + 1) +
@@ -15,9 +19,13 @@ const LoadingLine = ({
 
   return (
     <LoadingPill
+      aria-label="loading"
       margin={margin}
       height={height}
       width={exactWidth || calculatedWidth}
+      backgroundColor={backgroundColor}
+      foregroundColor={foregroundColor}
+      {...props}
     />
   );
 };

package/src/components/atoms/loading-line/LoadingPill.styled.js

@@ -13,18 +13,19 @@ const shineFrames = keyframes`{
   }
 }`;
 
-export const LoadingPill = styled.div`
+export const LoadingPill = styled.span`
+  display: block;
   width: ${({ width }) => width}px;
-  background-color: ${colors.SEASHELL_WHITE};
+  background-color: ${({ backgroundColor }) => backgroundColor};
   margin: ${({ margin }) => margin};
   height: ${({ height }) => height};
   border-radius: 16px;
   background-image: linear-gradient(
     135deg,
-    ${colors.SEASHELL_WHITE} 0%,
-    ${colors.ALABASTER_WHITE} 40%,
-    ${colors.SEASHELL_WHITE} 60%,
-    ${colors.SEASHELL_WHITE} 100%
+    ${({ backgroundColor }) => backgroundColor} 0%,
+    ${({ foregroundColor }) => foregroundColor} 40%,
+    ${({ backgroundColor }) => backgroundColor} 60%,
+    ${({ backgroundColor }) => backgroundColor} 100%
   );
   background-size: 400%;
   animation: ${shineFrames} 2s infinite ease-in-out;