Jim/fieldset legend style (#138)

* form summary from v1 api * default vals * split into two PRs
GSA-TTS · May 22, 2024 · 376e3e2 · 376e3e2
1 parent 09a42bb
commit 376e3e2
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 6 deletions.
diff --git a/packages/design/src/Form/components/Address/index.tsx b/packages/design/src/Form/components/Address/index.tsx
@@ -10,7 +10,7 @@ const Address: PatternComponent<AddressComponentProps> = props => {
   const { register } = useFormContext();
   return (
     <fieldset className="usa-fieldset width-full">
-      <legend className="usa-legend font-body-5 text-uppercase line-height-body-4">Mailing address</legend>
+      <legend className="usa-legend usa-legend--large text-uppercase line-height-body-4">Mailing address</legend>
       <label
         className={classNames('usa-label', {
           'usa-label--error': props.childProps.streetAddress.error,

diff --git a/packages/design/src/Form/components/Fieldset/index.tsx b/packages/design/src/Form/components/Fieldset/index.tsx
@@ -8,7 +8,7 @@ const Fieldset: PatternComponent<FieldsetProps> = props => {
   return (
     <fieldset className="usa-fieldset width-full margin-top-4">
       {props.legend !== '' && props.legend !== undefined && (
-        <legend className="usa-legend font-body-5 text-uppercase line-height-body-4 margin-top-2 margin-bottom-1">{props.legend}</legend>
+        <legend className="usa-legend usa-legend--large line-height-body-4 margin-top-2 margin-bottom-1">{props.legend}</legend>
       )}
 
       {props.children}     

diff --git a/packages/design/src/Form/components/RadioGroup/RadioGroup.tsx b/packages/design/src/Form/components/RadioGroup/RadioGroup.tsx
@@ -8,7 +8,7 @@ export type RadioGroupProps = {
 export default function RadioGroup({ legend, children }: RadioGroupProps) {
   return (
     <div className="usa-fieldset">
-      <legend className="usa-legend">{legend}</legend>
+      <legend className="usa-legend usa-legend--large">{legend}</legend>
       {children}
     </div>
   );

diff --git a/packages/design/src/Form/components/additional-fields.tsx b/packages/design/src/Form/components/additional-fields.tsx
@@ -107,7 +107,7 @@ export const SelectField = ({ field }: { field: Field }) => {
 export const RadioField = ({ field }: { field: Field }) => {
   return (
     <fieldset className="usa-fieldset width-full">
-      <legend className="usa-legend font-body-5 text-uppercase line-height-body-4">{field.label}</legend>
+      <legend className="usa-legend usa-legend--large text-uppercase line-height-body-4">{field.label}</legend>
       {field.options?.map((option, index) => (
         <div key={index} className="usa-radio">
           <input

diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
@@ -184,7 +184,7 @@ const FormContents = ({
           <div className="usa-form-group">
             <div className="usa-form-group">
               <fieldset className="usa-fieldset width-full">
-                <legend className="usa-legend font-body-5 text-uppercase line-height-body-4">
+                <legend className="usa-legend usa-legend--large text-uppercase line-height-body-4">
                   County where you live
                 </legend>
                 <label className="usa-label">Name of your county *</label>
@@ -203,7 +203,7 @@ const FormContents = ({
           <div className="usa-form-group">
             <div className="usa-form-group">
               <fieldset className="usa-fieldset width-full">
-                <legend className="usa-legend font-body-5 text-uppercase line-height-body-4">
+                <legend className="usa-legend usa-legend--large text-uppercase line-height-body-4">
                   Your current name
                 </legend>
                 <label className="usa-label">First name *</label>