Adding our style updates (#914)

* feat: Updated Group Checkbox State Colors (#854) Co-authored-by: Farhan Abdul <farhan.abdul@selectquote.com> * SSR-163: SQForms: Masked Read Only Field - Update component (#856) * feat: 🎸 Update SQForm Masked TextField (#866) * feat: 🎸 Update SQForm Masked TextField Updated font size and font weight BREAKING CHANGE: 🧨 no ✅ Closes: #865 * feat: 🎸 Update SQForm masked TextField Updated font weight and size BREAKING CHANGE: 🧨 No ✅ Closes: #865 --------- Co-authored-by: Mudassar Raza <mudasarraza049@gmail.com> * feat: SSR-161 SQFormsDropdown - Update component (#867) * feat: SQFormsDropdown - Update component * feat: move fontweight into classes * feat: 🎸 Update Component Multi-Select (#869) * feat: 🎸 Update Component Multi-Select Updated font weight and font size BREAKING CHANGE: 🧨 No ✅ Closes: #868 * fix: 🐛 Variant property into Form Control Positioned field title to the left as it was too far to the right side BREAKING CHANGE: 🧨 n ✅ Closes: #868 --------- Co-authored-by: Mudassar Raza <mudasarraza049@gmail.com> * 874 sqforms readonlyfield update component (#875) * feat: 🎸 ReadOnlyField-Update Component Removed underline and updated font weight BREAKING CHANGE: 🧨 n ✅ Closes: #874 * feat: 🎸 ReadOnlyField-Update Component Removed underline and updated font weight BREAKING CHANGE: 🧨 n ✅ Closes: #874 * feat: 🎸 ReadOnlyField-Update Component Removed underline and updated font weight BREAKING CHANGE: 🧨 No ✅ Closes: #874 * feat: 🎸 ReadOnlyField-Update Component Make field label not look actionable BREAKING CHANGE: 🧨 No ✅ Closes: #874 --------- Co-authored-by: Mudassar Raza <mudasarraza049@gmail.com> * style: 💄 SQForms: MultiValue - Update component (#878) * style: 💄 SQForms: MultiValue - Update component ✅ Closes: SSR-166 * style: 💄 Adding Variable for Input Size ✅ Closes: SSR-166 * style: 💄 Updating Code and Move some general Code in scplus-sha ✅ Closes: SSR-166 --------- Co-authored-by: Farhan Abdul <farhan.abdul@selectquote.com> * chore: 🤖 Update to latest SCPlus Shared Components Updating to the latest version of SCPlus Shared Components * chore: 🤖 Remove redundant story name Since the name of the story is already 'Default' setting the story name to the same is unnecessary --------- Co-authored-by: Malik Abdul Farhan <malikfarhan183@gmail.com> Co-authored-by: Farhan Abdul <farhan.abdul@selectquote.com> Co-authored-by: asim-sqfe <71133344+asim-sqfe@users.noreply.github.com> Co-authored-by: Mudassar-Raza <126600957+Mudassar-Raza@users.noreply.github.com> Co-authored-by: Mudassar Raza <mudasarraza049@gmail.com> Co-authored-by: Laurel Bean <laurel.bean@selectquote.com>
SelectQuoteLabs · Jul 21, 2023 · 89a0758 · 89a0758
1 parent 4a97486
commit 89a0758
Show file tree

Hide file tree

Showing 11 changed files with 3,887 additions and 13,702 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -177,7 +177,7 @@
     "react-textarea-autosize": "^8.4.0",
     "react-weekly-schedule": "0.0.0-development",
     "rimraf": "^3.0.2",
-    "scplus-shared-components": "https://npm-public.selectquotelabs.com/scplus-shared-components/12.0.1",
+    "scplus-shared-components": "https://npm-public.selectquotelabs.com/scplus-shared-components/12.1.0",
     "semantic-release": "^17.4.2",
     "storybook-addon-material-ui5": "^1.0.0",
     "ts-essentials": "^9.2.0",

diff --git a/src/components/fields/SQFormCheckboxGroup/SQFormCheckboxGroupItem.tsx b/src/components/fields/SQFormCheckboxGroup/SQFormCheckboxGroupItem.tsx
@@ -49,8 +49,14 @@ function SQFormCheckboxGroupItem({
   return (
     <FormControlLabel
       sx={(theme) => ({
-        mb: theme.spacing(1.5),
+        mb: theme.spacing(2),
         mr: isRowDisplay ? theme.spacing(3.75) : undefined,
+        '& .MuiCheckbox-root.Mui-disabled': {
+          color: 'var(--color-stone)',
+        },
+        '& .MuiCheckbox-root:not(.Mui-disabled)': {
+          color: 'var(--color-darkTeal)',
+        },
       })}
       label={label}
       control={

diff --git a/src/components/fields/SQFormDropdown/SQFormDropdown.tsx b/src/components/fields/SQFormDropdown/SQFormDropdown.tsx
@@ -47,6 +47,7 @@ const classes = {
     '& .MuiSelect-selectMenu': {
       height: '1.1876em',
     },
+    fontWeight: 600,
   },
 };
 
@@ -153,6 +154,7 @@ function SQFormDropdown({
                 key={`${name}_${option.value}`}
                 disabled={option.isDisabled}
                 value={option.value}
+                sx={{fontWeight: 600}}
               >
                 {option.label}
               </MenuItem>

diff --git a/src/components/fields/SQFormMasked/SQFormMaskedReadOnlyField.tsx b/src/components/fields/SQFormMasked/SQFormMaskedReadOnlyField.tsx
@@ -54,6 +54,9 @@ function SQFormMaskedReadOnlyField({
         ...InputProps,
         placeholder,
         inputComponent: TextFieldMask,
+        sx: {
+          fontWeight: 600,
+        },
       }}
       inputProps={{
         ...inputProps,

diff --git a/src/components/fields/SQFormMasked/SQFormMaskedTextField.tsx b/src/components/fields/SQFormMasked/SQFormMaskedTextField.tsx
@@ -77,6 +77,9 @@ function SQFormMaskedTextField({
       InputProps={{
         ...InputProps,
         inputComponent: TextFieldMask,
+        sx: {
+          fontWeight: 'var(--font-weight-semibold)',
+        },
       }}
       inputProps={{
         ...inputProps,

diff --git a/src/components/fields/SQFormMultiSelect/SQFormMultiSelect.tsx b/src/components/fields/SQFormMultiSelect/SQFormMultiSelect.tsx
@@ -107,6 +107,7 @@ const classes = {
     '& .MuiSelect-selectMenu': {
       height: '1.1876em',
     },
+    fontWeight: 'var(--font-weight-semibold)',
   },
   paperList: {
     maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
@@ -319,6 +320,7 @@ function SQFormMultiSelect({
         disabled={isDisabled}
         required={isFieldRequired}
         fullWidth={true}
+        variant="standard"
       >
         <InputLabel id={labelID}>{label}</InputLabel>
         <Tooltip

diff --git a/src/components/fields/SQFormMultiValue/SQFormMultiValue.tsx b/src/components/fields/SQFormMultiValue/SQFormMultiValue.tsx
@@ -279,6 +279,7 @@ function SQFormMultiValue({
           ...params.InputLabelProps,
           shrink: true,
         }}
+        error={isFieldError}
         inputProps={{
           ...params.inputProps,
           disabled: isDisabled,

diff --git a/src/components/fields/SQFormReadOnlyField/SQFormReadOnlyField.tsx b/src/components/fields/SQFormReadOnlyField/SQFormReadOnlyField.tsx
@@ -11,6 +11,20 @@ export type SQFormReadOnlyFieldProps = BaseFieldProps & {
   inputProps?: TextFieldProps['inputProps'];
 };
 
+const readOnlyInputProps = {
+  disableUnderline: true,
+  readOnly: true,
+};
+
+const styles = {
+  '& .MuiInput-input': {
+    fontWeight: 'var(--font-weight-semibold)',
+  },
+  '& .MuiInputLabel-root.Mui-focused': {
+    color: 'var(--color-jetBlack)',
+  },
+};
+
 function SQFormReadOnlyField({
   label,
   name,
@@ -41,10 +55,11 @@ function SQFormReadOnlyField({
         InputLabelProps={{shrink: true}}
         InputProps={{
           ...InputProps,
-          readOnly: true,
+          ...readOnlyInputProps,
         }}
         inputProps={inputProps}
         style={{marginBottom: 21}}
+        sx={styles}
         {...muiFieldProps}
       />
     </Grid>

diff --git a/src/hooks/useForm.tsx b/src/hooks/useForm.tsx
@@ -166,7 +166,7 @@ export function useForm<TValue, TChangeEvent>({
     if (isFulfilled) {
       return (
         <VerifiedIcon
-          sx={{color: 'var(--color-palmLeaf)', ...SUCCESS_ICON_STYLES}}
+          sx={{color: 'var(--color-textSuccessGreen)', ...SUCCESS_ICON_STYLES}}
         />
       );
     }

diff --git a/stories/SQFormDropdown.stories.tsx b/stories/SQFormDropdown.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import * as Yup from 'yup';
 import * as markdown from '../notes/SQFormDropdown.md';
 import getSizeProp from './utils/getSizeProp';
 import {createDocsPage} from './utils/createDocsPage';
@@ -56,6 +57,10 @@ const defaultArgs = {
   },
 };
 
+const validationSchema = Yup.object({
+  [defaultArgs.name]: Yup.string().required('Required'),
+});
+
 const Template: DropdownStoryType = (args) => {
   const {sqFormProps, schema, size, ...dropdownProps} = args;
   return (
@@ -73,6 +78,14 @@ const Template: DropdownStoryType = (args) => {
 
 export const Default = Template.bind({});
 Default.args = defaultArgs;
-Default.storyName = 'SQFormDropdown';
+
+export const WithValidation = Template.bind({});
+WithValidation.args = {
+  ...defaultArgs,
+  schema: validationSchema,
+};
+WithValidation.parameters = {
+  controls: {exclude: 'schema'},
+};
 
 export default meta;