@thecb/components 5.5.0 → 5.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.5.0",
+  "version": "5.6.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/breadcrumb/Breadcrumb.js

@@ -22,7 +22,7 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
             <Fragment key={`breadcrumb-${linkText}`}>
               <InternalLink
                 aria-current={
-                  index === breadcrumbsList.length - 1 && "location"
+                  index === breadcrumbsList.length - 1 ? "location" : ""
                 }
                 to={linkDestination}
                 active={isActive.toString()}
@@ -46,7 +46,11 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
               >
                 {linkText}
               </InternalLink>
-              {index < breadcrumbsList.length - 1 && <IconChevron />}
+              {index < breadcrumbsList.length - 1 ? (
+                <IconChevron />
+              ) : (
+                <Fragment />
+              )}
             </Fragment>
           )
         )}

package/src/components/atoms/index.js

@@ -5,7 +5,7 @@ export { default as BoxWithShadow } from "./box-with-shadow";
 export { default as Breadcrumb } from "./breadcrumb";
 export { default as ButtonWithAction } from "./button-with-action";
 export { default as ButtonWithLink } from "./button-with-link";
-export { default as cardRegistry } from "./card";
+export { default as cardRegistry } from "./welcome-card";
 export { default as Checkbox } from "./checkbox";
 export { default as CheckboxList } from "./checkbox-list";
 export { default as CountryDropdown } from "./country-dropdown";

package/src/components/atoms/layouts/Reel.js

@@ -2,6 +2,12 @@ import React, { Fragment } from "react";
 import { safeChildren } from "../../../util/general";
 import { ReelStyled } from "./Reel.styled";
 
+/*
+  Safari has a bug where it refuses to recognize <ul /> tags as lists when list-style: none is used
+  This affects the apple voice over (mainly used on iOS devices)
+  The solution is to explicitly include "role=List"
+*/
+
 const Reel = ({
   childGap = "1rem",
   height = "auto",
@@ -27,6 +33,7 @@ const Reel = ({
       useOrderedList={useOrderedList}
       useUnorderedList={useUnorderedList}
       {...rest}
+      role={useOrderedList || useUnorderedList ? "list" : "section"}
     >
       {safeChildren(children, <Fragment />)}
     </ReelStyled>

package/src/components/atoms/processing-fee/ProcessingFee.js

@@ -4,7 +4,7 @@ import { fallbackValues } from "./ProcessingFee.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import Box from "../layouts/Box";
 import Alert from "../alert";
-import { displayCurrency } from "../../../util/general";
+import { displayCurrency, formatPercent } from "../../../util/general";
 const ProcessingFee = ({
   feeValue = 0,
   feeName = "",
@@ -23,7 +23,7 @@ const ProcessingFee = ({
       text={`There is a processing fee of ${
         feeType === "FLAT"
           ? `${displayCurrency(feeValue)}`
-          : `${feeValue * 100}%`
+          : `${formatPercent(feeValue * 100)}%`
       } ${ifElse(
         isNil,
         always(""),

package/src/components/atoms/{card → welcome-card}/Card.js

@@ -105,7 +105,10 @@ const Card = ({
                 </Box>
               </Cover>
             </Box>
-            <Box padding="0.5rem 1rem 1rem">
+            <Box
+              padding="0.5rem 1rem 1rem"
+              extraStyles={`display: flex; justify-content: center;`}
+            >
               <ButtonWithAction
                 variant="smallPrimary"
                 text={buttonText}

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -54,8 +54,9 @@ const HighlightTabRow = ({
                 highlightIndex == i ? themeValues.textColor : "transparent"
               }
               borderWidthOverride="0 0 3px 0"
-              extraStyles="text-align: center;"
+              extraStyles="text-align: center; display: block;"
               as="li"
+              aria-current={highlightIndex == i ? "step" : ""}
             >
               <Text
                 variant="p"

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -50,6 +50,7 @@ const WorkflowTile = ({
           minWidth={"100%"}
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}
+          linkExtraStyles={`justify-content: center;`}
         />
       </Box>
     </Stack>

package/src/util/general.js

@@ -10,6 +10,8 @@ export const displayCurrency = cents =>
 
 export const convertCentsToMoneyInt = n => (n / 100).toFixed(0);
 
+export const formatPercent = decimal => Number.parseFloat(decimal).toFixed(2);
+
 const createUniqueId = () =>
   "_" +
   Math.random()