@thecb/components 7.10.0 → 7.10.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.10.0",
+  "version": "7.10.1-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

@@ -14,6 +14,7 @@ const CheckboxContainer = styled.div`
 const CheckboxLabelContainer = styled.label`
   display: flex;
   align-items: center;
+  column-gap: 1rem;
 `;
 
 const CheckboxIcon = styled.svg`
@@ -44,7 +45,6 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
 
 const StyledCheckbox = styled.div`
   display: inline-block;
-  margin-right: 16px;
   width: 24px;
   height: 24px;
   border-radius: 2px;
@@ -92,6 +92,7 @@ const Checkbox = ({
   themeValues,
   hidden = false,
   error = false,
+  checkboxMargin = "0 16px 0 0",
   extraStyles,
   textExtraStyles
 }) => {
@@ -112,7 +113,7 @@ const Checkbox = ({
       onKeyDown={e => handleClick(e, onChange)}
       hiddenStyles={hidden}
       background={themeValues.backgroundColor}
-      extraStyles={`outline: none; ${extraStyles}`}
+      extraStyles={`outline: none; ${extraStyles}; margin: ${checkboxMargin};`}
     >
       <CheckboxLabelContainer>
         <CheckboxContainer data-qa="Checkbox">
@@ -125,7 +126,7 @@ const Checkbox = ({
             onChange={onChange}
             tabIndex="-1"
             aria-invalid={error}
-            aria-describedby={`${name}-error-message`}
+            aria-describedby={error ? `${name}-error-message` : ""}
           />
           <StyledCheckbox
             error={error}
@@ -149,20 +150,22 @@ const Checkbox = ({
             </CheckboxIcon>
           </StyledCheckbox>
         </CheckboxContainer>
-        <Text
-          variant="p"
-          weight={themeValues.textFontWeight}
-          color={themeValues.textColor}
-          extraStyles={
-            textExtraStyles
-              ? `${textExtraStyles} ${disabled &&
-                  `color: #6e727e; background-color: #f7f7f7;`} `
-              : `margin-left: 1rem ${disabled &&
-                  `color: #6e727e; background-color: #f7f7f7;`}`
-          }
-        >
-          {title}
-        </Text>
+        {title && (
+          <Text
+            variant="p"
+            weight={themeValues.textFontWeight}
+            color={themeValues.textColor}
+            extraStyles={
+              textExtraStyles
+                ? `${textExtraStyles} ${disabled &&
+                    `color: #6e727e; background-color: #f7f7f7;`} `
+                : `margin-left: 1rem ${disabled &&
+                    `color: #6e727e; background-color: #f7f7f7;`}`
+            }
+          >
+            {title}
+          </Text>
+        )}
       </CheckboxLabelContainer>
     </Box>
   );

package/src/components/atoms/icons/icons.stories.js

@@ -31,7 +31,6 @@ import {
   DuplicateIcon,
   ErroredIcon,
   FailedIcon,
-  PencilIcon,
   PendingIcon,
   RefundIcon,
   RejectedIcon,
@@ -76,7 +75,6 @@ export const chargebackReversalIcon = () => <ChargebackReversalIcon />;
 export const duplicateIcon = () => <DuplicateIcon />;
 export const erroredIcon = () => <ErroredIcon />;
 export const failedIcon = () => <FailedIcon />;
-export const pencilIcon = () => <PencilIcon />;
 export const pendingIcon = () => <PendingIcon />;
 export const refundIcon = () => <RefundIcon />;
 export const rejectedIcon = () => <RejectedIcon />;

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

@@ -35,7 +35,6 @@ import DuplicateIcon from "./DuplicateIcon";
 import ErroredIcon from "./ErroredIcon";
 import ExternalLinkIcon from "./ExternalLinkIcon";
 import FailedIcon from "./FailedIcon";
-import PencilIcon from "./PencilIcon";
 import PendingIcon from "./PendingIcon";
 import RefundIcon from "./RefundIcon";
 import RejectedIcon from "./RejectedIcon";
@@ -119,7 +118,6 @@ export {
   ErroredIcon,
   ExternalLinkIcon,
   FailedIcon,
-  PencilIcon,
   PendingIcon,
   RefundIcon,
   RejectedIcon,

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,89 @@
+import React, { useState } from "react";
+import Checkbox from "../../atoms/checkbox";
+import { Box, Stack, Cluster } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+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,
+  checkboxMargin = "4px 8px 4px 4px",
+  modalTitle = "Terms and Conditions"
+}) => {
+  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">
+        {html && <Box padding="0">{html}</Box>}
+        <Cluster justify="flex-start" align="center" nowrap>
+          {showCheckbox && (
+            <Checkbox
+              name={id}
+              error={hasError}
+              checked={isChecked}
+              onChange={onCheck}
+              checkboxMargin={checkboxMargin}
+              extraStyles={`align-self: flex-start;`}
+            />
+          )}
+          <Stack childGap="0.25rem" fullHeight>
+            <Cluster
+              justify="flex-start"
+              align="center"
+              nowrap
+              extraStyles={`padding-right: 2px; > div > * { margin: 4px 2px; };`}
+            >
+              {description && <Text color={CHARADE_GREY}>{description}</Text>}
+              {terms && (
+                <TermsAndConditionsModal
+                  link={linkText}
+                  terms={terms}
+                  isOpen={showTerms}
+                  toggleOpen={toggleShowTerms}
+                  linkVariant={modalVariant}
+                  title={modalTitle}
+                />
+              )}
+            </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
+  };
+};

package/src/components/atoms/icons/PencilIcon.js

@@ -1,22 +0,0 @@
-import React from "react";
-import { fallbackValues } from "./Icons.theme";
-import { themeComponent } from "../../../util/themeUtils";
-
-const PencilIcon = ({ ariaLabel = "Edit", themeValues }) => (
-  <svg
-    aria-label={ariaLabel}
-    width="24px"
-    height="24px"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M19.74 6.84a.885.885 0 0 1 0 1.253l-1.626 1.626-3.333-3.333 1.626-1.626a.885.885 0 0 1 1.253 0l2.08 2.08ZM4 20.5v-3.333l9.83-9.83 3.333 3.333-9.83 9.83H4Z"
-      fill={themeValues.subIconColor}
-    />
-  </svg>
-);
-
-export default themeComponent(PencilIcon, "Icons", fallbackValues, "info");