@thecb/components 7.8.0 → 7.8.2-beta.3

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -1,7 +1,12 @@
-/*
-  For now I'm using string values, eventually shared components library will have its own constants file
-  for colors/values that should be used here instead
-*/
+import {
+  WHITE,
+  TRANSPARENT,
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
+  MATISSE_BLUE,
+  RASPBERRY,
+  ERROR_COLOR
+} from "../../../constants/colors";
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -19,18 +24,18 @@ const padding = {
 };
 
 const color = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#15749D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#15749D",
-  smallGhost: "#15749D",
-  ghost: "#15749D",
-  tertiary: "#15749D",
-  danger: "#FFFFFF",
-  dangerSecondary: "#D11053",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: MATISSE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: MATISSE_BLUE,
+  ghost: MATISSE_BLUE,
+  tertiary: MATISSE_BLUE,
+  danger: WHITE,
+  dangerSecondary: ERROR_COLOR,
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 const fontSizeVariant = {
@@ -94,123 +99,123 @@ const minWidth = {
 };
 
 const backgroundColor = {
-  primary: "#15749D",
-  secondary: "transparent",
-  back: "transparent",
-  smallPrimary: "#15749D",
-  smallSecondary: "transparent",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
-  danger: "#ED125F",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  primary: MATISSE_BLUE,
+  secondary: TRANSPARENT,
+  back: TRANSPARENT,
+  smallPrimary: MATISSE_BLUE,
+  smallSecondary: TRANSPARENT,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: RASPBERRY,
+  dangerSecondary: TRANSPARENT,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const border = {
-  primary: "2px solid #15749D",
-  secondary: "2px solid #15749D",
-  back: "2px solid #15749D",
-  smallPrimary: "2px solid #15749D",
-  smallSecondary: "2px solid #15749D",
+  primary: "2px solid " + MATISSE_BLUE,
+  secondary: "2px solid " + MATISSE_BLUE,
+  back: "2px solid " + MATISSE_BLUE,
+  smallPrimary: "2px solid " + MATISSE_BLUE,
+  smallSecondary: "2px solid " + MATISSE_BLUE,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
-  danger: "2px solid #ED125F",
-  dangerSecondary: "2px solid #D11053",
-  whiteSecondary: "2px solid white",
-  whitePrimary: "2px solid transparent"
+  danger: "2px solid " + RASPBERRY,
+  dangerSecondary: "2px solid " + ERROR_COLOR,
+  whiteSecondary: "2px solid " + WHITE,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverBackgroundColor = {
-  primary: "#116285",
+  primary: SAPPHIRE_BLUE,
   secondary: "#DBEAF0",
-  back: "transparent",
-  smallPrimary: "#116285",
+  back: TRANSPARENT,
+  smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: "#DBEAF0",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const hoverBorderColor = {
-  primary: "#116285",
-  secondary: "#15749D",
+  primary: SAPPHIRE_BLUE,
+  secondary: MATISSE_BLUE,
   back: "#DCEAF1",
-  smallPrimary: "#116285",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallPrimary: SAPPHIRE_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverColor = {
-  primary: "#FFFFFF",
-  secondary: "#116285",
-  back: "#116285",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#116285",
-  smallGhost: "#116285",
-  ghost: "#116285",
-  tertiary: "#116285",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: SAPPHIRE_BLUE,
+  back: SAPPHIRE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: SAPPHIRE_BLUE,
+  smallGhost: SAPPHIRE_BLUE,
+  ghost: SAPPHIRE_BLUE,
+  tertiary: SAPPHIRE_BLUE,
+  danger: WHITE,
   dangerSecondary: "#B10541",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 const activeBackgroundColor = {
-  primary: "#0E506D",
+  primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
-  back: "transparent",
-  smallPrimary: "#0E506D",
+  back: TRANSPARENT,
+  smallPrimary: PEACOCK_BLUE,
   smallSecondary: "#B8D5E1",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const activeBorderColor = {
-  primary: "#0E506D",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#0E506D",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  primary: PEACOCK_BLUE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: PEACOCK_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const activeColor = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#0E506D",
-  smallGhost: "#0E506D",
-  ghost: "#0E506D",
-  tertiary: "#0E506D",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: PEACOCK_BLUE,
+  smallGhost: PEACOCK_BLUE,
+  ghost: PEACOCK_BLUE,
+  tertiary: PEACOCK_BLUE,
+  danger: WHITE,
   dangerSecondary: "#910029",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 export const fallbackValues = {

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

@@ -24,6 +24,7 @@ const Cluster = ({
   flexGrow,
   extraStyles,
   children,
+  innerWrapperAs = "div",
   ...rest
 }) => (
   <ClusterWrapper
@@ -41,6 +42,7 @@ const Cluster = ({
       minHeight={minHeight}
       minWidth={minWidth}
       $nowrap={nowrap}
+      as={innerWrapperAs}
     >
       {safeChildren(children, <Fragment />)}
     </ClusterInnerWrapper>

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

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React from "react";
 import { repeat } from "ramda";
 
 import { fallbackValues } from "./HighlightTabRow.theme";
@@ -41,7 +41,7 @@ const HighlightTabRow = ({
       <Center maxWidth="76.5rem">
         <Reel
           padding="0"
-          childGap="4.5rem"
+          childGap="0"
           childWidth="11rem"
           justifyContent="space-evenly"
           disableScroll
@@ -60,6 +60,7 @@ const HighlightTabRow = ({
               extraStyles="text-align: center; display: block;"
               as="li"
               aria-current={highlightIndex == i ? "step" : ""}
+              id={`${t?.toLowerCase()?.replace(/\s/g, "-")}-tab`}
             >
               <Text
                 variant="p"
@@ -79,6 +80,8 @@ const HighlightTabRow = ({
   );
 };
 
-export default memo(
-  themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues)
+export default themeComponent(
+  HighlightTabRow,
+  "HighlightTabRow",
+  fallbackValues
 );

package/src/components/molecules/module/Module.js

@@ -1,9 +1,8 @@
 import React, { Fragment, memo } from "react";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./Module.theme";
-import Heading from "../../atoms/heading";
 import Title from "../../atoms/title";
-import { Box } from "../../atoms/layouts";
+import { Box, Cluster } from "../../atoms/layouts";
 
 /*
   New (01/22) - updated <Module /> to use <Title /> atom
@@ -25,6 +24,8 @@ const Module = ({
   variant = "default",
   fontSize,
   as,
+  titleID = "",
+  rightTitleContent,
   children
 }) => {
   const themedFontSize =
@@ -37,20 +38,28 @@ const Module = ({
   const themedElemType =
     variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   const computedElemType = as || themedElemType;
+  const headingText = (
+    <Title
+      weight={themeValues.fontWeight}
+      color={themeValues.fontColor}
+      margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
+      textAlign={themeValues.textAlign}
+      as={computedElemType}
+      extraStyles={`font-size: ${computedFontSize};`}
+      id={titleID}
+    >
+      {heading}
+    </Title>
+  );
 
   return (
     <Fragment>
-      {heading && (
-        <Title
-          weight={themeValues.fontWeight}
-          color={themeValues.fontColor}
-          margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}
-          textAlign={themeValues.textAlign}
-          as={computedElemType}
-          extraStyles={`font-size: ${computedFontSize};`}
-        >
-          {heading}
-        </Title>
+      {heading && !rightTitleContent && headingText}
+      {heading && rightTitleContent && (
+        <Cluster justify="space-between" align="center" nowrap>
+          {headingText}
+          {rightTitleContent}
+        </Cluster>
       )}
       <Box padding={`0 0 ${spacingBottom}`}>
         <Box

package/src/components/molecules/pagination/Pagination.js

@@ -23,6 +23,7 @@ const PrevNextPlaceholder = ({ buttonHeight, buttonWidth }) => (
 
 const PrevNextButton = ({
   action,
+  ariaLabel,
   arrowColor,
   borderRadius,
   buttonHeight,
@@ -34,11 +35,13 @@ const PrevNextButton = ({
     padding="0"
     minHeight={buttonHeight}
     extraStyles={`max-height: ${buttonHeight};`}
+    as="li"
   >
     <ButtonWithAction
       action={action}
       contentOverride
       dataQa={type}
+      aria-label={ariaLabel}
       extraStyles={`
         background-color: ${numberColor};
         border-color: ${numberColor};
@@ -48,9 +51,6 @@ const PrevNextButton = ({
         min-height: 100%;
         min-width: ${buttonWidth};
         padding: 0;
-        &:focus {
-          outline: none
-        }
       `}
     >
       <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
@@ -123,9 +123,6 @@ const Pagination = ({
     &:hover {
         background-color: ${themeValues.hoverBackgroundColor}
     }
-    &:focus {
-      outline: none
-    }
   `;
 
   const extraDisabledStyles = `
@@ -142,10 +139,18 @@ const Pagination = ({
   `;
 
   return (
-    <Cluster justify="center" childGap={childGap}>
+    <Cluster
+      justify="center"
+      childGap={childGap}
+      overflow={true}
+      as="nav"
+      innerWrapperAs="ul"
+      extraStyles="> ul { padding: 0px; > li { list-style-type: none; } };"
+    >
       {currentPage > 1 ? (
         <PrevNextButton
           action={pagePrevious}
+          ariaLabel={`Previous Page Button`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}
@@ -178,13 +183,21 @@ const Pagination = ({
           )
         : getPagesPanel(currentPage, pageCount).map((item, index) =>
             item.isButton ? (
-              <Box padding="0" extraStyles={`max-height: ${buttonHeight};`}>
+              <Box
+                padding="0"
+                extraStyles={`max-height: ${buttonHeight};`}
+                as="li"
+              >
                 <ButtonWithAction
                   variant="ghost"
                   key={item.index}
                   text={item.index}
                   disabled={item.active}
                   extraDisabledStyles={extraDisabledStyles}
+                  aria-current={item.active ? "page" : undefined}
+                  aria-label={`${item.active ? "Current " : ""}Page ${
+                    item.index
+                  } Button`}
                   action={
                     !item.active
                       ? () => setCurrentPage({ pageNumber: item.index })
@@ -215,6 +228,7 @@ const Pagination = ({
       {currentPage < pageCount ? (
         <PrevNextButton
           action={pageNext}
+          ariaLabel={`Next Page Button`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}

package/src/constants/colors.js

@@ -54,6 +54,8 @@ const HOVER_LIGHT_BLUE = "#EFFAFF";
 const MATISSE_BLUE = "#15749D";
 const ROYAL_BLUE = "#3181E3";
 const ASTRAL_BLUE = "#3176AA";
+const SAPPHIRE_BLUE = "#116285";
+const PEACOCK_BLUE = "#0E506D";
 // GREEN
 const FOREST_GREEN = "#19b03F";
 const MEADOW_GREEN = "#16C98D";
@@ -76,6 +78,7 @@ const RED = "#FF0000";
 const CRIMSON_RED = "#ED1C24";
 const THUNDERBIRD_RED = "#C3191F";
 const RAZZMATAZZ_RED = "#D11053";
+const RASPBERRY = "#ED125F";
 const FANTASY_RED = "#FCF4F4";
 const COSMOS_RED = "#FFD0D3";
 const BLUSH_RED = "#FFF0F5";
@@ -161,6 +164,8 @@ export {
   MATISSE_BLUE,
   ROYAL_BLUE,
   ASTRAL_BLUE,
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
   FOREST_GREEN,
   MEADOW_GREEN,
   POLAR_GREEN,
@@ -182,6 +187,7 @@ export {
   FANTASY_RED,
   COSMOS_RED,
   BLUSH_RED,
+  RASPBERRY,
   ALERT_COLORS,
   ERROR_COLOR
 };