@thecb/components 10.12.0-beta.0 → 10.12.0

package/package.json

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

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

@@ -2,7 +2,7 @@ import React from "react";
 import Expand from "../../../util/expand";
 
 export interface CardProps {
-  text?: string;
+  text?: string | React.ReactNode;
   textAs?: string;
   titleText?: string;
   titleAs?: string;

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

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

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

@@ -0,0 +1,33 @@
+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;

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

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

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

@@ -24,6 +24,9 @@ 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/editable-list/EditableList.js

@@ -100,7 +100,9 @@ const EditableList = ({
                 disabled={expiredItem === EXPIRED}
               >
                 <Text variant="p" color={CHARADE_GREY}>
-                  {renderItem(item)}
+                  {!!renderItem &&
+                    typeof renderItem === "function" &&
+                    renderItem(item)}
                 </Text>
                 <EditableListItemControls>
                   {item.isPrimary && (

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`
-  font-size: 0.875rem;
-  color: ${colors.CHARADE_GREY}
+  ${({ fontSize }) => `font-size: ${fontSize};`}
+  color: ${colors.CHARADE_GREY};
   margin: 0;
   padding: 8px 0px;
 `;
@@ -19,8 +19,13 @@ const StyledFieldset = styled.fieldset`
 const RadioGroup = ({
   headingText,
   groupName,
+  headingFontSize = "0.875rem",
   heading: Heading = (
-    <DefaultHeading role="heading" id={`radio-group-${groupName}-heading`}>
+    <DefaultHeading
+      role="heading"
+      id={`radio-group-${groupName}-heading`}
+      fontSize={headingFontSize}
+    >
       {headingText}
     </DefaultHeading>
   ),

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

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