Styled and updated the sections components (#113)

* Styled and updated the sections components * Updated the fieldset component to fix lint issue * Removed extra styling and unneeded component * Added back the register to FieldsetEdit * Removed the unused pattern variable
GSA-TTS · May 3, 2024 · 6821eee · 6821eee
1 parent 90d1760
commit 6821eee
Show file tree

Hide file tree

Showing 17 changed files with 262 additions and 244 deletions.
diff --git a/packages/design/sass/_uswds-custom-styles.scss b/packages/design/sass/_uswds-custom-styles.scss
@@ -0,0 +1,157 @@
+@use "uswds-core" as *;
+
+html {
+    scroll-behavior: smooth;
+  }
+
+  h1 {
+    font-size: units(5);
+
+    span {
+      display: inline-block;
+      vertical-align: top;
+      margin-right: units(2.5);
+    }
+  }
+
+  h2 {
+    margin-top: units(4);
+    margin-bottom: units(2);
+  }
+
+  p {
+    line-height: units(3);
+  }
+
+  .hide {
+    display: none;
+  }
+
+  .show  {
+    display: block;
+  }
+
+  .usa-app {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+  }
+
+  main {
+    flex: 1;
+    width: 100%;
+  }
+
+  .usa-combo-box__input,
+  .usa-input,
+  .usa-input-group,
+  .usa-range,
+  .usa-select,
+  .usa-textarea {
+    max-width: 40rem;
+    height: 3rem;
+  }
+
+  .usa-sidenav{
+
+    .usa-sidenav__item {
+      .usa-current {
+        color: #54278f;
+
+        &:after {
+          background-color: rebeccapurple;
+        }
+      }
+    }
+  }
+
+  .usa-section {
+    padding-top: units(5);
+    padding-bottom: units(5);
+  }
+
+  .usa-checkbox {
+    background: none;
+  }
+
+  .usa-table {
+    width: 100%;
+
+    .column1 {
+      width: 50%;
+    }
+
+    .column2 {
+      width: 30%;
+    }
+
+    .column3 {
+      width: 20%;
+    }
+
+    .actionColumn {
+      span {
+        margin: 0 30px 0 0;
+
+        &:last-child {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  .usa-form--large {
+    max-width: 32rem;
+  }
+
+  .usa-legend-wrapper {
+    word-wrap: break-word;
+    hyphens: auto;
+  }
+
+  .usa-legend {
+    width: -webkit-fill-available;
+  }
+
+  nav {
+    background: #F7F9FD;
+    padding: 0 units(3);
+
+    >ul {
+      padding-top: units(5);
+    }
+  }
+
+  [contentEditable=true]:focus,
+  [href]:focus,
+  [tabindex]:focus,
+  iframe:focus {
+    outline: units(0.5) solid #783cb9;
+  }
+
+  .usa-step-indicator__segment {
+    max-width: 22rem;
+
+    &--current {
+
+      .usa-step-indicator__segment-label {
+        color: #783cb9;
+      }
+
+      &::after {
+        background: #783cb9;
+      }
+    }
+  }
+
+  .videoWrapper {
+    position: relative;
+    padding-bottom: 62.5%;
+    height: 0;
+  }
+
+  .edit-component-panel {
+    .usa-fieldset {
+      margin-top: 0;
+    }
+  }
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
@@ -1,168 +1,3 @@
 @forward "uswds-theme";
 @forward "uswds";
-
-html {
-  scroll-behavior: smooth;
-}
-
-h1 {
-  font-size: 2.5em;
-
-  span {
-    display: inline-block;
-    vertical-align: top;
-    margin-right: 20px;
-  }
-}
-
-h2 {
-  margin-top: 2rem;
-  margin-bottom: 1rem;
-}
-
-p {
-  line-height: 1.5rem;
-}
-
-.usa-legend {
-  font-size: 1.7rem;
-  font-weight: 700;
-}
-
-
-.hide {
-  display: none;
-}
-
-.show  {
-  display: block;
-}
-
-.usa-app {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-main {
-  flex: 1;
-  width: 100%;
-/*
-  >section {
-    &.grid-container {
-      margin: 0;
-      padding: 0;
-    }
-  }
-*/
-}
-
-.usa-combo-box__input,
-.usa-input,
-.usa-input-group,
-.usa-range,
-.usa-select,
-.usa-textarea {
-  max-width: 40rem;
-  height: 3rem;
-}
-
-.usa-sidenav{
-
-  .usa-sidenav__item {
-    .usa-current {
-      color: #54278f;
-
-      &:after {
-        background-color: rebeccapurple;
-      }
-    }
-  }
-}
-
-.usa-section {
-  padding-top: 2.5rem;
-  padding-bottom: 2.5rem;
-}
-
-.usa-checkbox {
-  background: none;
-}
-
-.usa-table {
-  width: 100%;
-
-  .column1 {
-    width: 50%;
-  }
-
-  .column2 {
-    width: 30%;
-  }
-
-  .column3 {
-    width: 20%;
-  }
-
-  .actionColumn {
-    span {
-      margin: 0 30px 0 0;
-
-      &:last-child {
-        margin: 0;
-      }
-    }
-  }
-}
-
-.usa-form--large {
-  max-width: 32rem;
-}
-
-.usa-legend-wrapper {
-  word-wrap: break-word;
-  hyphens: auto;
-}
-
-.usa-legend {
-  max-width: 100%;
-  font-weight: 600;
-  width: -webkit-fill-available;
-}
-
-nav {
-  background: #F7F9FD;
-  padding: 0 1.5rem;
-
-  >ul {
-    padding-top: 2.6rem;
-  }
-}
-
-[contentEditable=true]:focus,
-[href]:focus,
-[tabindex]:focus,
-iframe:focus {
-  outline: 0.25rem solid #783cb9;
-}
-
-.usa-step-indicator__segment {
-  max-width: 22rem;
-
-  &--current {
-
-    .usa-step-indicator__segment-label {
-      color: #783cb9;
-    }
-
-    &::after {
-      background: #783cb9;
-    }
-  }
-}
-
-.videoWrapper {
-  position: relative;
-  padding-bottom: 62.5%;
-  height: 0;
-}
+@forward "uswds-custom-styles";
diff --git a/packages/design/src/Form/components/Address/index.tsx b/packages/design/src/Form/components/Address/index.tsx
@@ -9,8 +9,8 @@ import { type PatternComponent } from '../..';
 const Address: PatternComponent<AddressComponentProps> = props => {
   const { register } = useFormContext();
   return (
-    <fieldset className="usa-fieldset">
-      <legend className="usa-legend usa-legend--large">Mailing address</legend>
+    <fieldset className="usa-fieldset width-full">
+      <legend className="usa-legend font-body-5 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/Fieldset.stories.tsx b/packages/design/src/Form/components/Fieldset/Fieldset.stories.tsx
@@ -8,17 +8,9 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof Fieldset>;
 
-export const FieldsetSection1 = {
+export const FieldsetSection = {
   args: {
-    legend: 'Section 1',
-    type: 'fieldset',
-    _patternId: 'test-id',
-  },
-} satisfies StoryObj<typeof Fieldset>;
-
-export const FieldsetSection2 = {
-  args: {
-    legend: 'Section 2',
+    legend: 'Default Heading',
     type: 'fieldset',
     _patternId: 'test-id',
   },

diff --git a/packages/design/src/Form/components/Fieldset/index.tsx b/packages/design/src/Form/components/Fieldset/index.tsx
@@ -6,9 +6,12 @@ import { type PatternComponent } from '../../../Form';
 
 const Fieldset: PatternComponent<FieldsetProps> = props => {
   return (
-    <fieldset className="usa-fieldset margin-top-4">
-      <legend className="usa-legend">{props.legend}</legend>
-      {props.children}
+    <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>
+      )}
+
+      {props.children}     
     </fieldset>
   );
 };

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