@thecb/components 5.4.4 → 5.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.4.4",
+  "version": "5.6.1",
   "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/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",
@@ -24,7 +30,10 @@ const Reel = ({
       justifyContent={justifyContent}
       disableScroll={disableScroll}
       as={elementType}
+      useOrderedList={useOrderedList}
+      useUnorderedList={useUnorderedList}
       {...rest}
+      role={useOrderedList || useUnorderedList ? "list" : "section"}
     >
       {safeChildren(children, <Fragment />)}
     </ReelStyled>

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

@@ -14,4 +14,15 @@ export const ReelStyled = styled.div`
   > * {
     flex: 0 0 ${({ childWidth }) => childWidth};
   }
+
+  ${({ useOrderedList, useUnorderedList }) =>
+    useOrderedList || useUnorderedList
+      ? `
+      margin: 0;
+      margin-block-start: 0;
+      margin-block-end: 0;
+      padding-inline-start: 0;
+      list-style-type: none;
+    `
+      : ``}
 `;

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/molecules/collapsible-section/CollapsibleSection.js

@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import { fallbackValues } from "./CollapsibleSection.theme";
 import { AnimatePresence } from "framer-motion";
 import { themeComponent } from "../../../util/themeUtils";
-import Heading from "../../atoms/heading";
+import Title from "../../atoms/title";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { ChevronIcon } from "../../atoms/icons";
@@ -98,14 +98,14 @@ const CollapsibleSection = ({
                   {title}
                 </Box>
               ) : (
-                <Heading
-                  variant="h6"
+                <Title
                   weight={FONT_WEIGHT_SEMIBOLD}
                   color={themeValues.titleColor}
                   as="h6"
+                  variant="small"
                 >
                   {title}
-                </Heading>
+                </Title>
               )}
               <Motion
                 variants={icon}

package/src/components/molecules/editable-list/EditableList.js

@@ -111,7 +111,7 @@ const EditableList = ({
                           text="Remove"
                           action={() => removeItem(item.id)}
                           extraStyles={`min-width: 0;`}
-                          aria-label={`Remove ${itemName} ${title}`}
+                          aria-label={`Remove ${itemName}`}
                         />
                       )}
                     </Box>
@@ -129,7 +129,7 @@ const EditableList = ({
                         text="Edit"
                         action={() => editItem(item.id)}
                         extraStyles={`min-width: 0;`}
-                        aria-label={`Edit ${itemName} ${title}`}
+                        aria-label={`Edit ${itemName}`}
                       />
                     </Box>
                   )}

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/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()