@thecb/components 7.9.2 → 7.9.4-beta.0

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -125,7 +125,7 @@ const Checkbox = ({
             onChange={onChange}
             tabIndex="-1"
             aria-invalid={error}
-            aria-describedby={`${name}-error-message`}
+            aria-describedby={error ? `${name}-error-message` : ""}
           />
           <StyledCheckbox
             error={error}

package/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -1,45 +1,14 @@
-import React, { useState } from "react";
-import Checkbox from "../../atoms/checkbox";
-import { Box, Stack } from "../../atoms/layouts";
-import DisplayBox from "../../atoms/display-box";
-import TermsAndConditionsModal from "../../molecules/terms-and-conditions-modal";
+import React from "react";
+import TermsAndConditionsControlV1 from "./TermsAndConditionsControlV1";
+import TermsAndConditionsControlV2 from "./TermsAndConditionsControlV2";
 
-const TermsAndConditions = ({
-  onCheck,
-  isChecked,
-  html,
-  terms,
-  error = false,
-  linkVariant
-}) => {
-  const [showTerms, toggleShowTerms] = useState(false);
-  return (
-    <DisplayBox>
-      <Stack>
-        <Checkbox
-          name="terms"
-          title="Terms and Conditions"
-          error={error}
-          checked={isChecked}
-          onChange={onCheck}
-        />
-        <Box padding="0 0 0 58px">
-          <Stack>
-            <Box padding="0">{html}</Box>
-            {terms && (
-              <TermsAndConditionsModal
-                link="Learn More"
-                terms={terms}
-                isOpen={showTerms}
-                toggleOpen={toggleShowTerms}
-                linkVariant={linkVariant}
-              />
-            )}
-          </Stack>
-        </Box>
-      </Stack>
-    </DisplayBox>
-  );
+const TermsAndConditions = ({ version = "v1", ...rest }) => {
+  const TermsAndConditionsControl =
+    version === "v1"
+      ? TermsAndConditionsControlV1
+      : TermsAndConditionsControlV2;
+
+  return <TermsAndConditionsControl {...rest} />;
 };
 
 export default TermsAndConditions;

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV1.js

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import Checkbox from "../../atoms/checkbox";
+import { Box, Stack } from "../../atoms/layouts";
+import DisplayBox from "../../atoms/display-box";
+import TermsAndConditionsModal from "../../molecules/terms-and-conditions-modal";
+
+const TermsAndConditionsControlV1 = ({
+  onCheck,
+  isChecked,
+  html,
+  terms,
+  error = false,
+  linkVariant
+}) => {
+  const [showTerms, toggleShowTerms] = useState(false);
+  return (
+    <DisplayBox>
+      <Stack>
+        <Checkbox
+          name="terms"
+          title="Terms and Conditions"
+          error={error}
+          checked={isChecked}
+          onChange={onCheck}
+        />
+        <Box padding="0 0 0 58px">
+          <Stack>
+            <Box padding="0">{html}</Box>
+            {terms && (
+              <TermsAndConditionsModal
+                link="Learn More"
+                terms={terms}
+                isOpen={showTerms}
+                toggleOpen={toggleShowTerms}
+                linkVariant={linkVariant}
+              />
+            )}
+          </Stack>
+        </Box>
+      </Stack>
+    </DisplayBox>
+  );
+};
+
+export default TermsAndConditionsControlV1;

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import Checkbox from "../../atoms/checkbox";
+import { Box, Stack, Cluster } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import Paragraph from "../../atoms/paragraph";
+import TermsAndConditionsModal from "../terms-and-conditions-modal";
+import {
+  ATHENS_GREY,
+  CHARADE_GREY,
+  ERROR_COLOR
+} from "../../../constants/colors";
+import { generateShadows } from "../../../util/generateShadows";
+
+const TermsAndConditionsControlV2 = ({
+  showCheckbox = true,
+  onCheck,
+  isChecked,
+  hasError,
+  errorMessage = "Please accept Terms and Conditions",
+  description = "",
+  linkText = "Terms and Conditions",
+  html,
+  terms,
+  id = "terms-and-conditions",
+  displayInline = true,
+  modalVariant = "default",
+  containerBackground = ATHENS_GREY
+}) => {
+  const [showTerms, toggleShowTerms] = useState(false);
+  const standardBoxShadow = generateShadows().standard.base;
+
+  return (
+    <Box
+      padding={displayInline ? "0" : "1.5rem"}
+      minWidth={displayInline ? "0" : "100%"}
+      background={displayInline ? "transparent" : containerBackground}
+      boxShadow={displayInline ? "none" : standardBoxShadow}
+      borderRadius={displayInline ? "0" : "4px"}
+    >
+      <Stack childGap="0.25rem">
+        {html && <Box padding="0">{html}</Box>}
+        <Cluster justify="flex-start" align="center" nowrap>
+          {showCheckbox && (
+            <Checkbox
+              name={id}
+              title="Terms and Conditions"
+              error={hasError}
+              checked={isChecked}
+              onChange={onCheck}
+            />
+          )}
+          <Stack childGap="0.25rem">
+            <Cluster justify="flex-start" align="center" nowrap>
+              {description && (
+                <Text color={CHARADE_GREY}>{description}&nbsp;</Text>
+              )}
+              {terms && (
+                <TermsAndConditionsModal
+                  link={linkText}
+                  terms={terms}
+                  isOpen={showTerms}
+                  toggleOpen={toggleShowTerms}
+                  linkVariant={modalVariant}
+                />
+              )}
+            </Cluster>
+            {showCheckbox && hasError && (
+              <Text
+                variant="pXS"
+                color={ERROR_COLOR}
+                id={`${id}-error-message`}
+              >
+                {errorMessage}
+              </Text>
+            )}
+          </Stack>
+        </Cluster>
+      </Stack>
+    </Box>
+  );
+};
+
+export default TermsAndConditionsControlV2;

package/src/util/generateShadows.js

@@ -0,0 +1,60 @@
+/* 
+
+A utility function that can generate box-shadow values for components
+Takes a string representing an rgb color value and returns an object
+with values for standard, inset, and overlay shadows.
+
+The objects for standard and inset shadows contain versions approiate
+for base, hover, and active interaction states.
+
+*/
+
+/* 
+  Function to convert string representing rgb color to rgba value with provided opacity
+  ("rgb(41, 42, 51)", "0.1") => "rgba(41, 42, 51, 0.1)"
+
+*/
+const rgbToRgba = (rgbValue = "", opacity = "") => {
+  if (
+    typeof rgbValue !== "string" ||
+    typeof opacity !== "string" ||
+    rgbValue.charAt(0) === "#"
+  ) {
+    return "";
+  }
+  return `${rgbValue.slice(0, 3)}a${rgbValue.slice(
+    3,
+    -1
+  )}, ${opacity}${rgbValue.slice(-1)}`;
+};
+
+export const generateShadows = baseColorRGB => {
+  const colorTen = rgbToRgba(baseColorRGB, "0.1") || "rgba(41, 42, 51, 0.1)";
+  const colorTwenty = rgbToRgba(baseColorRGB, "0.2") || "rgba(41, 42, 51, 0.2)";
+  const colorTwentyFive =
+    rgbToRgba(baseColorRGB, "0.25") || "rgba(41, 42, 51, 0.25)";
+  const colorThirty = rgbToRgba(baseColorRGB, "0.3") || "rgba(41, 42, 51, 0.3)";
+  const blackTwentyFive = "rgba(0, 0, 0, 0.25)";
+
+  const standard = {
+    base: `0px 1px 2px 0px ${colorTen}, 0px 2px 6px 0px ${colorTwenty}, inset 0px 1px 0px 0px ${colorTen}`,
+    hover: `0px 1px 2px 0px ${colorTwenty}, 0px 4px 8px 0px ${blackTwentyFive}, 0px 6px 12px 0px ${colorTen}`,
+    active: `0px 2px 8px 0px ${colorTwenty}, 0px 4px 8px 0px ${colorThirty}, 0px 6px 12px 0px ${colorTwentyFive}`
+  };
+
+  const inset = {
+    base: `0px 1px 2px 0px ${colorTen}, 0px 2px 4px 0px ${colorTwenty}, inset 0px 1px 0px 0px ${colorTen}`,
+    hover: `0px 1px 2px 0px ${colorTen}, 0px 2px 4px 0px ${colorTwentyFive}, 0px 4px 8px 0px ${colorTen}`,
+    active: `0px 1px 2px 2px ${colorTwenty}, 0px 3px 6px 0px ${colorThirty}, 0px 4px 8px 0px ${colorTwenty}`
+  };
+
+  const overlay = {
+    base: `0px 7px 32px 0px ${colorTwenty}, 0px 1px 4px 0px ${colorTwenty}, 0px 1px 8px -1px ${colorThirty}`
+  };
+
+  return {
+    standard,
+    inset,
+    overlay
+  };
+};