feat(Form + GridForm): Add actual required optional + required form text

packages/gamut-styles/README.md

@@ -1,19 +1,22 @@
 # Gamut Styles
+
 Base SCSS for Codecademy
 
 ## Variables/
+
 This folder houses all shared SCSS style variables.
 It also contains a JavaScript file with color variables.
 
 ## Core/
+
 This folder contains a base stylesheet for the app.
 This should be imported **once** in your application.
 
 ## Utils/
+
 This folder contains Sass functions (pure utilities with no stylesheet output values) and mixins (outputs CSS)
 to be used as needed both in Gamut and across the Codecademy app.
 
-
 The `utils.scss` and `core.scss` just import the index files from their respective folders, to make the syntax to import them from elsewhere easier, e.g.:
 
 `@import "~@codecademy/gamut-styles/utils";`

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -49,6 +49,7 @@ exports[`Gamut Exported Keys 1`] = `
   "FormGroupDescription",
   "FormGroupLabel",
   "FormPropsContext",
+  "FormRequiredText",
   "generateResponsiveClassnames",
   "GridBox",
   "GridForm",

packages/gamut/src/ConnectedForm/ConnectedForm.tsx

@@ -14,7 +14,7 @@ import {
 } from 'react-hook-form';
 
 import { Form } from '../Form';
-import { FormProps } from '../Form/Form';
+import { FormProps } from '../Form/elements/Form';
 import { FormValues } from '../Form/types';
 import { submitSuccessStatus } from './utils';
 
@@ -27,10 +27,6 @@ export interface FormContextProps {
    * If fields should be reset after successful submission.
    */
   resetOnSubmit?: boolean;
-  /**
-   * If required field should show asterisks in labels.
-   */
-  showRequired?: boolean;
   /**
    * Validation rules form fields. Fields with validation rules must have a defaultValue listed in the defaultValue prop.
    */
@@ -99,7 +95,6 @@ export const ConnectedForm = forwardRef(
       validation = 'onChange',
       disableFieldsOnSubmit = false,
       resetOnSubmit = false,
-      showRequired = false,
       validationRules,
       wasSubmitSuccessful = undefined,
       watchedFields,
@@ -147,14 +142,12 @@ export const ConnectedForm = forwardRef(
       return {
         disableFieldsOnSubmit,
         resetOnSubmit,
-        showRequired,
         validationRules,
         wasSubmitSuccessful,
       };
     }, [
       disableFieldsOnSubmit,
       resetOnSubmit,
-      showRequired,
       validationRules,
       wasSubmitSuccessful,
     ]);

packages/gamut/src/ConnectedForm/ConnectedFormGroup.tsx

@@ -33,7 +33,6 @@ export interface ConnectedFormGroupBaseProps
   name: string;
   label: React.ReactNode;
   required?: boolean;
-  showRequired?: boolean;
   infotip?: InfoTipProps;
 }
 
@@ -60,14 +59,10 @@ export function ConnectedFormGroup<T extends ConnectedField>({
   spacing = 'fit',
   infotip,
 }: ConnectedFormGroupProps<T>) {
-  const {
-    error,
-    isFirstError,
-    isDisabled,
-    showRequired,
-    setError,
-    validation,
-  } = useField({ name, disabled });
+  const { error, isFirstError, isDisabled, setError, validation } = useField({
+    name,
+    disabled,
+  });
   const { component: Component, ...rest } = field;
 
   useEffect(() => {
@@ -84,7 +79,7 @@ export function ConnectedFormGroup<T extends ConnectedField>({
       disabled={isDisabled}
       htmlFor={id || name}
       infotip={infotip}
-      showRequired={showRequired && !!validation}
+      required={!!validation?.required}
       size={labelSize}
     >
       {label}

packages/gamut/src/ConnectedForm/utils.tsx

@@ -16,6 +16,7 @@ import {
   useFormContext,
 } from 'react-hook-form';
 
+import { FormRequiredText } from '../Form';
 import {
   ConnectedForm,
   ConnectedFormGroup,
@@ -74,7 +75,9 @@ export const useConnectedForm = <
         validationRules,
         watchedFields,
       },
+      FormRequiredText,
     }),
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
@@ -109,7 +112,6 @@ export const useFormState = () => {
 
   const {
     disableFieldsOnSubmit,
-    showRequired,
     validationRules,
     wasSubmitSuccessful,
   } = useContext(FormPropsContext);
@@ -132,7 +134,6 @@ export const useFormState = () => {
     setFocus,
     setError,
     setValue,
-    showRequired,
     useFieldArray,
     validationRules,
     watch,
@@ -156,7 +157,6 @@ export const useField = ({ name, disabled, loading }: useFieldProps) => {
     isDisabled: formStateDisabled,
     setError,
     setValue,
-    showRequired,
     validationRules,
   } = useFormState();
 
@@ -190,7 +190,6 @@ export const useField = ({ name, disabled, loading }: useFieldProps) => {
     ref,
     setValue,
     setError,
-    showRequired,
   };
 };
 

packages/gamut/src/DataList/Controls/SelectControl.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Checkbox } from '../../Form/Checkbox';
+import { Checkbox } from '../../Form/inputs/Checkbox';
 import { Text } from '../../Typography/Text';
 import { RowChange } from '..';
 

packages/gamut/src/Form/SelectDropdown/SelectDropdown.tsx

@@ -11,7 +11,6 @@ import {
 import * as React from 'react';
 import { Options as OptionsType, StylesConfig } from 'react-select';
 
-import { getMemoizedStyles } from '../styles';
 import { parseOptions } from '../utils';
 import {
   CustomContainer,
@@ -26,6 +25,7 @@ import {
   SelectDropdownContext,
   TypedReactSelect,
 } from './elements';
+import { getMemoizedStyles } from './styles';
 import { ExtendedOption, OptionStrict, SelectDropdownProps } from './types';
 import {
   filterValueFromOptions,

packages/gamut/src/Form/SelectDropdown/types.tsx

@@ -8,7 +8,7 @@ import {
   Props as NamedProps,
 } from 'react-select';
 
-import { SelectComponentProps, SelectOptions } from '../Select';
+import { SelectComponentProps, SelectOptions } from '../inputs/Select';
 import { SelectOptionBase } from '../utils';
 import { conditionalBorderStates } from './styles';
 

packages/gamut/src/Form/__tests__/Checkbox.test.tsx

@@ -1,7 +1,7 @@
 import { setupRtl } from '@codecademy/gamut-tests';
 import { fireEvent } from '@testing-library/dom';
 
-import { Checkbox } from '../Checkbox';
+import { Checkbox } from '../inputs/Checkbox';
 
 const onChange = jest.fn();
 

packages/gamut/src/Form/__tests__/FormGroup.test.tsx

@@ -1,31 +1,48 @@
 import { setupRtl } from '@codecademy/gamut-tests';
 
-import { FormGroup } from '../FormGroup';
-import { Input } from '../Input';
+import { FormGroup } from '../elements/FormGroup';
+import { Input } from '../inputs/Input';
 
 const renderView = setupRtl(FormGroup, {
   children: <Input id="up-dog" />,
 });
 
+const label = 'up dog';
+const htmlFor = 'up-dog';
+const optional = '(optional)';
+const optionalLabelText = `${label} (optional)`;
+
 describe('FormGroup', () => {
-  it('renders Label as a label when htmlFor is provided', () => {
-    const { view } = renderView({ label: 'up dog', htmlFor: 'up-dog' });
+  describe('when htmlFor is provided', () => {
+    it('renders Label as a label', () => {
+      const { view } = renderView({ label, htmlFor });
 
-    view.getByLabelText('up dog');
+      view.getByLabelText(optionalLabelText);
+    });
+    it('render (optional) as aria-hidden', async () => {
+      const { view } = renderView({ label, htmlFor });
+      expect(view.getByText(optional)).toHaveAttribute('aria-hidden', 'true');
+    });
   });
+  describe('when htmlFor is not provided', () => {
+    it('renders Label as a div', () => {
+      const { view } = renderView({ label });
 
-  it('renders Label as a div when no htmlFor is provided', () => {
-    const { view } = renderView({ label: 'up dog' });
+      expect(view.queryByLabelText(optionalLabelText)).toBeNull();
+      view.getByText(label);
+    });
 
-    expect(view.queryByLabelText('up dog')).toBeNull();
-    view.getByText('up dog');
+    it('render (optional) as aria-hidden', () => {
+      const { view } = renderView({ label });
+      expect(view.getByText(optional)).toHaveAttribute('aria-hidden', 'true');
+    });
   });
 
-  it('adds an asterisk to showRequired labels', () => {
+  it('adds an asterisk to required labels', () => {
     const { view } = renderView({
-      label: 'up dog',
-      htmlFor: 'up-dog',
-      showRequired: true,
+      label,
+      htmlFor,
+      required: true,
     });
 
     view.getByLabelText('up dog *');

packages/gamut/src/Form/__tests__/Input.test.tsx

@@ -1,7 +1,7 @@
 import { StreakIcon } from '@codecademy/gamut-icons';
 import { setupRtl } from '@codecademy/gamut-tests';
 
-import { Input } from '../Input';
+import { Input } from '../inputs/Input';
 
 jest.mock('@codecademy/gamut-icons', () => ({
   AlertIcon: () => (

packages/gamut/src/Form/__tests__/Radio.test.tsx

@@ -1,7 +1,7 @@
 import { setupRtl } from '@codecademy/gamut-tests';
 import { fireEvent } from '@testing-library/dom';
 
-import { Radio } from '../Radio';
+import { Radio } from '../inputs/Radio';
 
 const onChangeCallback = jest.fn();
 const testid = 'my-test-id';

packages/gamut/src/Form/__tests__/RadioGroup.test.tsx

@@ -1,8 +1,8 @@
 import { setupRtl } from '@codecademy/gamut-tests';
 import { fireEvent } from '@testing-library/dom';
 
-import { Radio } from '../Radio';
-import { RadioGroup } from '../RadioGroup';
+import { Radio } from '../inputs/Radio';
+import { RadioGroup } from '../inputs/RadioGroup';
 
 const renderView = setupRtl(RadioGroup, {
   htmlForPrefix: 'what-salad-maker-do-you-prefer',

packages/gamut/src/Form/__tests__/Select.test.tsx

@@ -1,6 +1,6 @@
 import { setupRtl } from '@codecademy/gamut-tests';
 
-import { Select } from '../Select';
+import { Select } from '../inputs/Select';
 
 const selectOptions = ['red', 'yellow', 'green'];
 const defaultProps = {

packages/gamut/src/Form/FormGroup.tsx → packages/gamut/src/Form/elements/FormGroup.tsx

@@ -4,22 +4,21 @@ import styled from '@emotion/styled';
 import { ComponentProps } from 'react';
 import * as React from 'react';
 
-import { Box } from '../Box';
-import { InfoTipProps } from '../Tip';
+import { Box } from '../../Box';
+import { InfoTipProps } from '../../Tip';
+import { BaseInputProps } from '../types';
 import { FormError } from './FormError';
 import { FormGroupDescription } from './FormGroupDescription';
 import { FormGroupLabel } from './FormGroupLabel';
 
 export interface FormGroupProps
-  extends ComponentProps<typeof FormGroupContainer> {
-  label?: string;
+  extends ComponentProps<typeof FormGroupContainer>,
+    Omit<BaseInputProps, 'name' | 'error'> {
   /**
    * [The for/id string of a label or labelable form-related element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor). The outer FormGroup or FormLabel should have an identical string as the inner FormElement for accessibility purposes.
    */
-  htmlFor?: string;
-  description?: string;
-  showRequired?: boolean;
   error?: string;
+  description?: string;
   disabled?: boolean;
   labelSize?: 'small' | 'large';
   infotip?: InfoTipProps;
@@ -73,13 +72,13 @@ export const FormGroup: React.FC<FormGroupProps> = ({
   infotip,
   label,
   labelSize,
-  showRequired,
+  required,
   ...rest
 }) => {
   const labelComponent = label ? (
     <FormGroupLabel
       htmlFor={htmlFor}
-      showRequired={showRequired}
+      required={required}
       size={labelSize}
       disabled={disabled}
       infotip={infotip}

packages/gamut/src/Form/FormGroupDescription.tsx → packages/gamut/src/Form/elements/FormGroupDescription.tsx

@@ -1,6 +1,6 @@
 import { css } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 
-import { formBaseStyles } from './styles';
+import { formBaseStyles } from '../styles';
 
 export const FormGroupDescription = styled.div(css(formBaseStyles));