@thecb/components 4.4.4 → 4.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.4.4",
+  "version": "4.5.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,78 @@
+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 four variants - "large", "regular", "small", "extraSmall"
+  Large variant results in text that is 1.125rem/1.1428rem (18px desktop, 16px mobile)
+  Regular variant results in text that is 1rem (16px desktop, 14px mobile)
+  Small variant reuslts in text that is 0.875rem/0.8571rem (14px desktop, 12px mobile)
+  ExtraSmall variant results in text that is 0.75rem/0.7142rem (12px desktop, 10px mobile)
+  
+  If you need a larger font 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/index.js

@@ -9,6 +9,7 @@ export { default as cardRegistry } from "./card";
 export { default as Checkbox } from "./checkbox";
 export { default as CheckboxList } from "./checkbox-list";
 export { default as CountryDropdown } from "./country-dropdown";
+export { default as Detail } from "./detail";
 export { default as DisplayBox } from "./display-box";
 export { default as DisplayCard } from "./display-card";
 export { default as Dropdown } from "./dropdown";
@@ -37,5 +38,6 @@ export { default as SolidDivider } from "./solid-divider";
 export { default as Spinner } from "./spinner";
 export { default as StateProvinceDropdown } from "./state-province-dropdown";
 export { default as Text } from "./text";
+export { default as Title } from "./title";
 export { default as ToggleSwitch } from "./toggle-switch";
 export { default as TypeaheadInput } from "./typeahead-input";

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/payment-details/PaymentDetails.js

@@ -33,7 +33,7 @@ const PaymentDetailsContent = ({
     </Box>
     <SolidDivider />
     <LabeledAmount
-      as="h2"
+      as="p"
       variant={themeValues.labeledAmountTotal}
       label="Total"
       amount={displayCurrency(total)}