@thecb/components 4.4.2 → 4.5.0-beta.1

package/dist/index.cjs.js

@@ -16403,7 +16403,7 @@ function parseToRgb(color) {
     };
   }
 
-  var rgbaMatched = rgbaRegex.exec(normalizedColor);
+  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
 
   if (rgbaMatched) {
     return {
@@ -16434,7 +16434,7 @@ function parseToRgb(color) {
     };
   }
 
-  var hslaMatched = hslaRegex.exec(normalizedColor);
+  var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
 
   if (hslaMatched) {
     var _hue = parseInt("" + hslaMatched[1], 10);
@@ -21633,7 +21633,6 @@ var Jumbo$1 = withWindowSize(Jumbo);
 
 var fontWeight$4 = {
   "default": "600",
-  pS: "600",
   p: "600",
   pL: "600",
   h6: "700"
@@ -21648,8 +21647,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
       label = _ref.label,
       amount = _ref.amount,
       themeValues = _ref.themeValues,
-      as = _ref.as,
-      extraStyles = _ref.extraStyles;
+      as = _ref.as;
   var LabeledAmountText = variant === "h6" ? Heading$1 : Paragraph$1;
   return /*#__PURE__*/React__default.createElement(Stack, {
     direction: "row"
@@ -21657,12 +21655,12 @@ var LabeledAmount = function LabeledAmount(_ref) {
     variant: variant,
     as: as,
     weight: themeValues.fontWeight,
-    extraStyles: "".concat(extraStyles, "; text-align: start; flex: 3;")
+    extraStyles: "text-align: start; flex: 3;"
   }, label, ":"), /*#__PURE__*/React__default.createElement(LabeledAmountText, {
     variant: variant,
     as: as,
     weight: themeValues.fontWeight,
-    extraStyles: "".concat(extraStyles, "; text-align: end; flex: 1;")
+    extraStyles: "text-align: end; flex: 1;"
   }, amount));
 };
 
@@ -21674,7 +21672,7 @@ var weightTitle = {
 };
 var paragraphVariant = {
   "default": "pL",
-  small: "pS"
+  small: "p"
 };
 var fallbackValues$l = {
   weightTitle: weightTitle,
@@ -39014,53 +39012,43 @@ var Modal$1 = function Modal(_ref) {
 
 var fontSize$8 = {
   "default": "1.375rem",
-  largeTitle: "1.75rem",
-  small: "1.25rem"
+  largeTitle: "1.75rem"
 };
 var fontWeight$5 = {
   "default": "600",
-  largeTitle: "700",
-  small: "600"
+  largeTitle: "700"
 };
 var fontColor = {
   "default": CHARADE_GREY,
-  largeTitle: CHARADE_GREY,
-  small: CHARADE_GREY
+  largeTitle: CHARADE_GREY
 };
 var lineHeight$4 = {
   "default": "2rem",
-  largeTitle: "2rem",
-  small: "2rem"
+  largeTitle: "2rem"
 };
 var textAlign = {
   "default": "left",
-  largeTitle: "left",
-  small: "left"
+  largeTitle: "left"
 };
 var titleType = {
   "default": "h5",
-  largeTitle: "h1",
-  small: "h6"
+  largeTitle: "h1"
 };
 var titleSpacing = {
   "default": "0.5rem",
-  largeTitle: "1.125rem",
-  small: "0.5rem"
+  largeTitle: "1.125rem"
 };
 var boxShadow$1 = {
   "default": "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  small: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
+  largeTitle: "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
 };
 var borderRadius = {
   "default": "0.25rem",
-  largeTitle: "0.25rem",
-  small: "0.25rem"
+  largeTitle: "0.25rem"
 };
 var backgroundColor$6 = {
   "default": WHITE,
-  largeTitle: WHITE,
-  small: WHITE
+  largeTitle: WHITE
 };
 var fallbackValues$v = {
   fontSize: fontSize$8,
@@ -39088,7 +39076,7 @@ var Module = function Module(_ref) {
       variant = _ref$variant === void 0 ? "default" : _ref$variant,
       children = _ref.children;
   return /*#__PURE__*/React__default.createElement(React.Fragment, null, heading && /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: variant === "small" ? "h6" : variant === "default" ? "h5" : "h2",
+    variant: variant === "default" ? "h5" : "h2",
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
@@ -39915,11 +39903,11 @@ var lineItem = {
 };
 var labeledAmountSubtotal = {
   "default": "pL",
-  small: "pS"
+  small: "p"
 };
 var labeledAmountTotal = {
   "default": "h6",
-  small: "p"
+  small: "pL"
 };
 var fallbackValues$y = {
   backgroundColor: backgroundColor$8,
@@ -39933,7 +39921,6 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
       feeElems = _ref.feeElems,
       subtotal = _ref.subtotal,
       total = _ref.total,
-      variant = _ref.variant,
       themeValues = _ref.themeValues;
   return /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "16px"
@@ -39947,8 +39934,7 @@ var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
     as: "h2",
     variant: themeValues.labeledAmountTotal,
     label: "Total",
-    amount: displayCurrency(total),
-    extraStyles: variant === "small" && "font-weight: ".concat(FONT_WEIGHT_BOLD, ";")
+    amount: displayCurrency(total)
   }));
 };
 
@@ -39993,8 +39979,6 @@ var PaymentDetails = function PaymentDetails(_ref4) {
       _fees = _ref4.fees,
       subtotal = _ref4.subtotal,
       total = _ref4.total,
-      _ref4$variant = _ref4.variant,
-      variant = _ref4$variant === void 0 ? "default" : _ref4$variant,
       _ref4$hideTitle = _ref4.hideTitle,
       hideTitle = _ref4$hideTitle === void 0 ? false : _ref4$hideTitle,
       _ref4$titleText = _ref4.titleText,
@@ -40060,15 +40044,13 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     feeElems: feeElems,
     subtotal: subtotal,
     total: total,
-    themeValues: themeValues,
-    variant: variant
+    themeValues: themeValues
   })) : /*#__PURE__*/React__default.createElement(PaymentDetailsContent, {
     lineItemElems: lineItemElems,
     feeElems: feeElems,
     subtotal: subtotal,
     total: total,
-    themeValues: themeValues,
-    variant: variant
+    themeValues: themeValues
   });
   var title = hideTitle ? /*#__PURE__*/React__default.createElement(React.Fragment, null) : isCollapsible ? /*#__PURE__*/React__default.createElement(Box, {
     width: "100%",

package/package.json

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

package/src/components/atoms/detail/Detail.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { DetailText } from "./Detail.styled";
+import { safeChildren } from "../../../util/general";
+import {
+  fallbackValues,
+  mobileFallbackValues,
+  MOBILE_BREAKPOINT
+} from "./Detail.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+/*
+  New responsive text component for Detail elements
+  (Block level text elements which are smaller than "Title" elements)
+  Size is decoupled from tag
+  Comes with two variants - "large" and "small"
+  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
+  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
+  
+  If you need a smaller larger size, use the <Title /> atom, which has larger variants
+  
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
+
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+
+  Mobile breakpoint value is specified in Detail.theme.js
+
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set all of the variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+
+const isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
+const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+const mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;
+const fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues;
+
+const Detail = ({
+  themeValues,
+  weight = FONT_WEIGHT_REGULAR,
+  color = FIREFLY_GREY,
+  margin = 0,
+  textAlign,
+  extraStyles = ``,
+  className,
+  variant = "regular",
+  as = "p",
+  dataQa,
+  children,
+  ...rest
+}) => {
+  return (
+    <DetailText
+      variant={variant}
+      as={as}
+      weight={weight}
+      color={color}
+      margin={margin}
+      textAlign={textAlign}
+      extraStyles={extraStyles}
+      className={className}
+      fontFamily={themeValues.fontFamily}
+      fontSize={themeValues.fontSize}
+      data-qa={dataQa}
+      {...rest}
+    >
+      {safeChildren(children, <span />)}
+    </DetailText>
+  );
+};
+
+export default themeComponent(Detail, "Detail", fallbacks, "regular");

package/src/components/atoms/detail/Detail.styled.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const DetailText = styled.p`
+  font-size: ${({ fontSize }) => fontSize};
+  line-height: 1.5;
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  margin: ${({ margin }) => margin};
+  text-align: ${({ textAlign }) => textAlign};
+  font-family: ${({ fontFamily }) => fontFamily};
+
+  ${({ extraStyles }) => extraStyles};
+`;

package/src/components/atoms/detail/Detail.theme.js

@@ -0,0 +1,32 @@
+const fontSize = {
+  large: "1.125rem",
+  regular: "1rem",
+  small: "0.875rem",
+  extraSmall: "0.75rem"
+};
+
+const fontFamily = {
+  large: "Public Sans",
+  regular: "Public Sans",
+  small: "Public Sans",
+  extraSmall: "Public Sans"
+};
+
+const mobileFontSize = {
+  large: "1.14285rem",
+  regular: "1",
+  small: "0.85714rem",
+  extraSmall: "0.71428rem"
+};
+
+export const fallbackValues = {
+  fontFamily,
+  fontSize
+};
+
+export const mobileFallbackValues = {
+  fontFamily,
+  fontSize: mobileFontSize
+};
+
+export const MOBILE_BREAKPOINT = 768;

package/src/components/atoms/detail/index.js

@@ -0,0 +1,3 @@
+import Detail from "./Detail";
+
+export default Detail;

package/src/components/atoms/heading/Heading.js

@@ -1,3 +1,9 @@
+/*
+SOON TO BE DEPRECATED AS OF 8/1/2021
+
+For new pages/applications, please us <Title /> and <Detail /> atoms
+
+*/
 import React from "react";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import { FIREFLY_GREY } from "../../../constants/colors";

package/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -5,14 +5,7 @@ import { Stack } from "../layouts";
 import Heading from "../heading";
 import Paragraph from "../paragraph";
 
-const LabeledAmount = ({
-  variant = "pL",
-  label,
-  amount,
-  themeValues,
-  as,
-  extraStyles
-}) => {
+const LabeledAmount = ({ variant = "pL", label, amount, themeValues, as }) => {
   const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
   return (
     <Stack direction="row">
@@ -20,7 +13,7 @@ const LabeledAmount = ({
         variant={variant}
         as={as}
         weight={themeValues.fontWeight}
-        extraStyles={`${extraStyles}; text-align: start; flex: 3;`}
+        extraStyles="text-align: start; flex: 3;"
       >
         {label}:
       </LabeledAmountText>
@@ -28,7 +21,7 @@ const LabeledAmount = ({
         variant={variant}
         as={as}
         weight={themeValues.fontWeight}
-        extraStyles={`${extraStyles}; text-align: end; flex: 1;`}
+        extraStyles="text-align: end; flex: 1;"
       >
         {amount}
       </LabeledAmountText>

package/src/components/atoms/labeled-amount/LabeledAmount.theme.js

@@ -1,6 +1,5 @@
 const fontWeight = {
   default: "600",
-  pS: "600",
   p: "600",
   pL: "600",
   h6: "700"

package/src/components/atoms/line-item/LineItem.theme.js

@@ -1,5 +1,5 @@
 const weightTitle = { default: "600", small: "400" };
-const paragraphVariant = { default: "pL", small: "pS" };
+const paragraphVariant = { default: "pL", small: "p" };
 
 export const fallbackValues = {
   weightTitle,

package/src/components/atoms/paragraph/Paragraph.js

@@ -1,3 +1,9 @@
+/*
+SOON TO BE DEPRECATED AS OF 8/1/2021
+
+For new pages/applications, please us <Title /> and <Detail /> atoms
+
+*/
 import React from "react";
 import { fallbackValues } from "./Paragraph.theme";
 import { themeComponent } from "../../../util/themeUtils";

package/src/components/atoms/title/Title.js

@@ -0,0 +1,75 @@
+import React from "react";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FIREFLY_GREY } from "../../../constants/colors";
+import { TitleText } from "./Title.styled";
+import { safeChildren } from "../../../util/general";
+import {
+  fallbackValues,
+  mobileFallbackValues,
+  MOBILE_BREAKPOINT
+} from "./Title.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+/*
+  New responsive text component for Title elements
+  Size is decoupled from tag
+  Comes with two variants - "large" and "small"
+  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
+  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
+  
+  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
+  
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
+
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+
+  Mobile breakpoint value is specified in Title.theme.js
+
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+
+const isBelowBreakpoint = window.innerWidth < MOBILE_BREAKPOINT;
+const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+const mobileDeviceDetected = isBelowBreakpoint && isTouchDevice;
+const fallbacks = mobileDeviceDetected ? mobileFallbackValues : fallbackValues;
+
+const Title = ({
+  themeValues,
+  weight = FONT_WEIGHT_REGULAR,
+  color = FIREFLY_GREY,
+  margin = 0,
+  textAlign,
+  extraStyles = ``,
+  className,
+  variant = "large",
+  as = "h1",
+  dataQa,
+  children,
+  ...rest
+}) => {
+  return (
+    <TitleText
+      variant={variant}
+      as={as}
+      weight={weight}
+      color={color}
+      margin={margin}
+      textAlign={textAlign}
+      extraStyles={extraStyles}
+      className={className}
+      fontFamily={themeValues.fontFamily}
+      fontSize={themeValues.fontSize}
+      data-qa={dataQa}
+      {...rest}
+    >
+      {safeChildren(children, <span />)}
+    </TitleText>
+  );
+};
+
+export default themeComponent(Title, "Title", fallbacks, "large");

package/src/components/atoms/title/Title.styled.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const TitleText = styled.h1`
+  font-size: ${({ fontSize }) => fontSize};
+  line-height: 1.5;
+  color: ${({ color }) => color};
+  font-weight: ${({ weight }) => weight};
+  margin: ${({ margin }) => margin};
+  text-align: ${({ textAlign }) => textAlign};
+  font-family: ${({ fontFamily }) => fontFamily};
+
+  ${({ extraStyles }) => extraStyles};
+`;

package/src/components/atoms/title/Title.theme.js

@@ -0,0 +1,26 @@
+const fontSize = {
+  large: "1.5rem",
+  small: "1.25rem"
+};
+
+const fontFamily = {
+  large: "Public Sans",
+  small: "Public Sans"
+};
+
+const mobileFontSize = {
+  large: "1.5rem",
+  small: "1.2142rem"
+};
+
+export const fallbackValues = {
+  fontFamily,
+  fontSize
+};
+
+export const mobileFallbackValues = {
+  fontFamily,
+  fontSize: mobileFontSize
+};
+
+export const MOBILE_BREAKPOINT = 768;

package/src/components/atoms/title/index.js

@@ -0,0 +1,3 @@
+import Title from "./Title";
+
+export default Title;

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

@@ -16,9 +16,7 @@ const Module = ({
   <Fragment>
     {heading && (
       <Heading
-        variant={
-          variant === "small" ? "h6" : variant === "default" ? "h5" : "h2"
-        }
+        variant={variant === "default" ? "h5" : "h2"}
         weight={themeValues.fontWeight}
         color={themeValues.fontColor}
         margin={`${spacing} 0 ${themeValues.titleSpacing} 0`}

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

@@ -1,38 +1,20 @@
 import { WHITE, CHARADE_GREY } from "../../../constants/colors";
 
-const fontSize = {
-  default: "1.375rem",
-  largeTitle: "1.75rem",
-  small: "1.25rem"
-};
-const fontWeight = { default: "600", largeTitle: "700", small: "600" };
-const fontColor = {
-  default: CHARADE_GREY,
-  largeTitle: CHARADE_GREY,
-  small: CHARADE_GREY
-};
-const lineHeight = { default: "2rem", largeTitle: "2rem", small: "2rem" };
-const textAlign = { default: "left", largeTitle: "left", small: "left" };
-const titleType = { default: "h5", largeTitle: "h1", small: "h6" };
-const titleSpacing = {
-  default: "0.5rem",
-  largeTitle: "1.125rem",
-  small: "0.5rem"
-};
+const fontSize = { default: "1.375rem", largeTitle: "1.75rem" };
+const fontWeight = { default: "600", largeTitle: "700" };
+const fontColor = { default: CHARADE_GREY, largeTitle: CHARADE_GREY };
+const lineHeight = { default: "2rem", largeTitle: "2rem" };
+const textAlign = { default: "left", largeTitle: "left" };
+const titleType = { default: "h5", largeTitle: "h1" };
+const titleSpacing = { default: "0.5rem", largeTitle: "1.125rem" };
 const boxShadow = {
   default:
     "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
   largeTitle:
-    "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)",
-  small:
     "0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
 };
-const borderRadius = {
-  default: "0.25rem",
-  largeTitle: "0.25rem",
-  small: "0.25rem"
-};
-const backgroundColor = { default: WHITE, largeTitle: WHITE, small: WHITE };
+const borderRadius = { default: "0.25rem", largeTitle: "0.25rem" };
+const backgroundColor = { default: WHITE, largeTitle: WHITE };
 
 export const fallbackValues = {
   fontSize,

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -10,14 +10,12 @@ import LabeledAmount from "../../atoms/labeled-amount";
 import LineItem from "../../atoms/line-item";
 import Heading from "../../atoms/heading";
 import SolidDivider from "../../atoms/solid-divider";
-import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
 
 const PaymentDetailsContent = ({
   lineItemElems,
   feeElems,
   subtotal,
   total,
-  variant,
   themeValues
 }) => (
   <Stack childGap="16px">
@@ -37,7 +35,6 @@ const PaymentDetailsContent = ({
       variant={themeValues.labeledAmountTotal}
       label="Total"
       amount={displayCurrency(total)}
-      extraStyles={variant === "small" && `font-weight: ${FONT_WEIGHT_BOLD};`}
     />
   </Stack>
 );
@@ -77,7 +74,6 @@ const PaymentDetails = ({
   fees: _fees,
   subtotal,
   total,
-  variant = "default",
   hideTitle = false,
   titleText = "Payment Details",
   initiallyOpen = false,
@@ -117,12 +113,12 @@ const PaymentDetails = ({
       <SolidDivider />
       <Box padding="8px" />
       <PaymentDetailsContent
-        {...{ lineItemElems, feeElems, subtotal, total, themeValues, variant }}
+        {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
       />
     </Stack>
   ) : (
     <PaymentDetailsContent
-      {...{ lineItemElems, feeElems, subtotal, total, themeValues, variant }}
+      {...{ lineItemElems, feeElems, subtotal, total, themeValues }}
     />
   );
   const title = hideTitle ? (

package/src/components/molecules/payment-details/PaymentDetails.theme.js

@@ -1,7 +1,7 @@
 const backgroundColor = { default: "transparent", small: "transparent" };
 const lineItem = { default: "default", small: "small" };
-const labeledAmountSubtotal = { default: "pL", small: "pS" };
-const labeledAmountTotal = { default: "h6", small: "p" };
+const labeledAmountSubtotal = { default: "pL", small: "p" };
+const labeledAmountTotal = { default: "h6", small: "pL" };
 
 export const fallbackValues = {
   backgroundColor,