@thecb/components 10.11.2-beta.2 → 10.12.0-beta.0

package/package.json

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

package/src/components/atoms/card/Card.js

@@ -14,6 +14,7 @@ import Stack from "../layouts/Stack";
 import CardImage from "./CardImage.styled";
 import CardText from "./CardText";
 import CardHeader from "./CardHeader";
+import { noop } from "../../../util/general";
 
 const Card = ({
   borderRadius = "4px",
@@ -26,8 +27,12 @@ const Card = ({
   imgHeight = "150px",
   imgObjectFit = "none",
   imgAltText,
+  onQuitClick = noop,
   padding = "24px",
+  showQuitLink = false,
   text,
+  textAs = "p",
+  titleAs = "h2",
   titleText,
   titleVariant = "small",
   themeValues,
@@ -90,9 +95,13 @@ const Card = ({
             <Box padding="0" width="100%" extraStyles="flex-basis: 100%;">
               {text && (
                 <CardText
+                  onQuitClick={onQuitClick}
                   padding={padding}
+                  showQuitLink={showQuitLink}
+                  titleAs={titleAs}
                   titleText={titleText}
                   text={text}
+                  textAs={textAs}
                   titleVariant={titleVariant}
                 />
               )}

package/src/components/atoms/card/CardText.js

@@ -10,10 +10,16 @@ import Cover from "../layouts/Cover";
 import Paragraph from "../paragraph";
 import Stack from "../layouts/Stack";
 import Title from "../title";
+import IconQuitLarge from "../../atoms/icons/IconQuitLarge";
+import { Cluster } from "../layouts";
 
 export const CardText = ({
+  showQuitLink,
+  onQuitClick,
+  titleAs,
   padding,
   text,
+  textAs = "p",
   titleText,
   titleVariant = "small",
   themeValues
@@ -22,17 +28,34 @@ export const CardText = ({
     <Box padding={padding}>
       <Cover>
         <Stack>
-          {titleText && (
-            <Title
-              as="p"
-              variant={titleVariant}
-              color={themeValues.titleColor}
-              weight={themeValues.titleWeight}
-            >
-              {titleText}
-            </Title>
-          )}
-          <Paragraph color={themeValues.textColor}>{text}</Paragraph>
+          <Cluster justify="space-between" align="center" overflow={true}>
+            {titleText && (
+              <Title
+                as={titleAs}
+                variant={titleVariant}
+                color={themeValues.titleColor}
+                weight={themeValues.titleWeight}
+              >
+                {titleText}
+              </Title>
+            )}
+            {showQuitLink && (
+              <Box
+                padding="0"
+                onClick={onQuitClick}
+                onKeyDown={e => e.key === "Enter" && onQuitClick()}
+                role="button"
+                tabIndex={0}
+                aria-label={`Close Card: ${titleText}`}
+                extraStyles="cursor: pointer;"
+              >
+                <IconQuitLarge />
+              </Box>
+            )}
+          </Cluster>
+          <Paragraph as={textAs} color={themeValues.textColor}>
+            {text}
+          </Paragraph>
         </Stack>
       </Cover>
     </Box>

package/src/components/atoms/card/index.d.ts

@@ -3,7 +3,9 @@ import Expand from "../../../util/expand";
 
 export interface CardProps {
   text?: string;
+  textAs?: string;
   titleText?: string;
+  titleAs?: string;
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
@@ -27,6 +29,10 @@ export interface CardProps {
   borderRadius?: string;
   width?: string;
   padding?: string;
+  showQuitLink?: boolean;
+  onQuitClick?: (
+    event: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>
+  ) => void;
 }
 
 export const Card: React.FC<Expand<CardProps> &

package/src/components/atoms/form-layouts/FormInput.js

@@ -119,8 +119,6 @@ const FormInput = ({
   isRequired = false,
   errorFieldExtraStyles,
   showFieldErrorRow = true,
-  labelTextVariant = "pS",
-  errorTextVariant = "pXS",
   ...props
 }) => {
   const [showPassword, setShowPassword] = useState(false);
@@ -150,7 +148,7 @@ const FormInput = ({
             <Text
               as="label"
               color={themeValues.labelColor}
-              variant={labelTextVariant}
+              variant="pS"
               weight={themeValues.fontWeight}
               extraStyles={`word-break: break-word;
                   font-family: Public Sans;
@@ -169,7 +167,7 @@ const FormInput = ({
               <Text
                 as="label"
                 color={themeValues.labelColor}
-                variant={labelTextVariant}
+                variant="pS"
                 fontWeight={themeValues.fontWeight}
                 extraStyles={`word-break: break-word;
                     font-family: Public Sans;
@@ -182,7 +180,7 @@ const FormInput = ({
               </Text>
               {type === "password" && (
                 <Text
-                  variant={labelTextVariant}
+                  variant="pS"
                   color={themeValues.linkColor}
                   weight={themeValues.fontWeight}
                   hoverStyles={themeValues.hoverFocusStyles}
@@ -284,7 +282,7 @@ const FormInput = ({
           (field.hasErrors && showErrors) ? (
             <Text
               color={ERROR_COLOR}
-              variant={errorTextVariant}
+              variant="pXS"
               weight={themeValues.fontWeight}
               extraStyles={`word-break: break-word;
               font-family: Public Sans;

package/src/components/atoms/form-layouts/index.d.ts

@@ -26,11 +26,6 @@ export interface FormInputProps {
   autocompleteValue?: string;
   removeFromValue?: RegExp;
   dataQa?: string | null;
-  isRequired?: boolean;
-  errorFieldExtraStyles?: string;
-  showFieldErrorRow?: boolean;
-  labelTextVariant?: string;
-  errorTextVariant?: string;
 }
 
 export const FormInput: React.FC<Expand<FormInputProps> &

package/src/components/atoms/form-select/FormSelect.js

@@ -25,9 +25,7 @@ const FormSelect = ({
   smoothScroll = true, // whether the browser should animate scroll to selected item on first open
   dataQa = null,
   widthFitOptions = false,
-  isRequired = false,
-  labelTextVariant = "pS",
-  errorLabelTextVariant = "pXS"
+  isRequired = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -56,7 +54,7 @@ const FormSelect = ({
         <Cluster justify="space-between" align="center">
           <Text
             as="label"
-            variant={labelTextVariant}
+            variant="pS"
             color={themeValues.labelColor}
             weight={themeValues.fontWeight}
             extraStyles={`word-break: break-word;
@@ -103,7 +101,7 @@ const FormSelect = ({
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}
-            variant={errorLabelTextVariant}
+            variant="pXS"
             weight={themeValues.fontWeight}
             extraStyles={`
             word-break: break-word;

package/src/components/atoms/form-select/index.d.ts

@@ -24,9 +24,6 @@ export interface FormSelectProps {
   smoothScroll?: boolean;
   dataQa?: string | null;
   widthFitOptions?: boolean;
-  isRequired?: boolean;
-  labelTextVariant?: string;
-  errorLabelTextVariant?: string;
 }
 
 export const FormSelect: React.FC<Expand<FormSelectProps> &

package/src/components/molecules/radio-group/RadioGroup.js

@@ -6,8 +6,8 @@ import styled from "styled-components";
 import { noop } from "../../../util/general";
 
 const DefaultHeading = styled.div`
-  ${({ fontSize }) => `font-size: ${fontSize};`}
-  color: ${colors.CHARADE_GREY};
+  font-size: 0.875rem;
+  color: ${colors.CHARADE_GREY}
   margin: 0;
   padding: 8px 0px;
 `;
@@ -19,13 +19,8 @@ const StyledFieldset = styled.fieldset`
 const RadioGroup = ({
   headingText,
   groupName,
-  headingFontSize = "0.875rem",
   heading: Heading = (
-    <DefaultHeading
-      role="heading"
-      id={`radio-group-${groupName}-heading`}
-      fontSize={headingFontSize}
-    >
+    <DefaultHeading role="heading" id={`radio-group-${groupName}-heading`}>
       {headingText}
     </DefaultHeading>
   ),

package/src/components/molecules/radio-group/index.d.ts

@@ -17,7 +17,6 @@ export interface RadioGroupProps {
   handleChange?: () => void;
   heading?: ReactNode;
   headingText: string;
-  headingFontSize?: string;
 }
 
 export const RadioGroup: React.FC<Expand<RadioGroupProps> &

package/src/components/atoms/form-layouts/FormInput.stories.js

@@ -1,33 +0,0 @@
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-import FormInput from "./FormInput";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
-const data = {
-  fieldOne: {
-    rawValue: "Form Input One"
-  }
-};
-export const formInputs = () => {
-  return (
-    <Box padding="1rem">
-      <FormInput
-        labelTextWhenNoError={text(
-          "labelTextWhenNoError",
-          "Label Text When No Error",
-          "props"
-        )}
-        type="text"
-        labelTextVariant={text("labelTextVariant", "pS", "props")}
-        errorLabelTextVariant={text("errorLabelTextVariant", "pS", "props")}
-        field={data.fieldOne}
-      />
-    </Box>
-  );
-};
-
-const story = page({
-  title: "Components|Atoms/FormInput",
-  Component: FormInput
-});
-export default story;