Styled and updated the sections components

GSA-TTS · Apr 25, 2024 · a399350 · a399350
1 parent d406581
commit a399350
Show file tree

Hide file tree

Showing 16 changed files with 164 additions and 53 deletions.
diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
@@ -166,3 +166,56 @@ iframe:focus {
   padding-bottom: 62.5%;
   height: 0;
 }
+
+.usa-fieldset {
+  width: 100%;
+
+  .usa-legend,
+  .usa-alert__text {
+    font-size: 1rem;
+  }
+
+  .usa-legend {    
+    font-weight: normal;
+    line-height: 1.5rem;
+    text-transform: uppercase;
+  }
+
+  h3.section-heading-h3 {
+    font-size: 1.375rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .usa-alert__text {
+    span {
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 1rem;
+    }
+  }
+}
+
+.edit-component-panel {
+  input,
+  select {
+    background: #f4f1f9;
+    font-weight: 700;
+  }
+}
+
+.draggable-list-item-wrapper {
+  .draggable-list-item {
+    cursor: pointer;
+  }
+  .draggable-list-button {
+    cursor: 'grab';
+  }
+}
+
+.pattern-edit-panel {
+  .usa-button--unstyled {
+    color: #565C65;
+
+  }
+}
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,18 @@ export default {
   tags: ['autodocs'],
 } satisfies Meta<typeof Fieldset>;
 
-export const FieldsetSection1 = {
+export const FieldsetSectionWithSubheader = {
   args: {
-    legend: 'Section 1',
+    legend: 'Default Heading',
+    subheader: 'Default Subhead',
     type: 'fieldset',
     _patternId: 'test-id',
   },
 } satisfies StoryObj<typeof Fieldset>;
 
-export const FieldsetSection2 = {
+export const FieldsetSectionWithoutSubheader = {
   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,16 @@ 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 test margin-top-4">
+      {props.legend !== '' && props.legend !== undefined && (
+        <legend className="usa-legend margin-top-2 margin-bottom-1">{props.legend}</legend>
+      )}
+
+      {props.subheader !== '' && props.subheader !== undefined && (
+        <h3 className="section-heading-h3 margin-top-2 margin-bottom-1">{props.subheader}</h3>
+      )}
+
+      {props.children}     
     </fieldset>
   );
 };

diff --git a/packages/design/src/Form/index.tsx b/packages/design/src/Form/index.tsx
@@ -137,7 +137,7 @@ export default function Form({
               </ul>
             </nav>
           )}
-          <div className="grid-col-9 usa-prose">
+          <div className="desktop:grid-col-9 mobile:grid-col-12 usa-prose">
             {!isPreview ? (
               <form
                 className="usa-form usa-form--large margin-bottom-3"

diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -8,8 +8,8 @@ export const AddPatternDropdown = () => {
   }));
 
   return (
-    <fieldset>
-      <label className="usa-label">
+    <fieldset className="padding-205 desktop:grid-col-9 mobile:grid-col-12">
+      <label className="usa-label margin-top-0">
         Add a pattern
         <select
           className="usa-select"
@@ -18,7 +18,7 @@ export const AddPatternDropdown = () => {
             event.target.selectedIndex = 0;
           }}
         >
-          <option></option>
+          <option>-- Select a pattern --</option>
           {store.availablePatterns.map((pattern, index) => (
             <option key={index} value={pattern.patternType}>
               {pattern.displayName}

diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx
@@ -8,7 +8,10 @@ import { useIsPatternSelected, usePattern } from '../store';
 import { PatternEditComponent } from '../types';
 
 import { PatternEditActions } from './common/PatternEditActions';
-import { PatternEditForm } from './common/PatternEditForm';
+import {
+  PatternEditForm,
+  usePatternEditFormContext,
+} from './common/PatternEditForm';
 
 const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
   const isSelected = useIsPatternSelected(props.previewProps._patternId);
@@ -30,24 +33,61 @@ const FieldsetEdit: PatternEditComponent<FieldsetProps> = props => {
 
 const FieldsetPreview = (props: FieldsetProps) => {
   const pattern = usePattern<FieldsetPattern>(props._patternId);
+
   return (
     <>
-      {pattern.data.patterns.length === 0 && <em>[Empty fieldset]</em>}
-      <Fieldset {...(props as FieldsetProps)} />
+      <Fieldset {...(props as FieldsetProps)}>
+        {pattern && pattern.data.patterns.length === 0 &&
+          <div className="usa-alert usa-alert--warning usa-alert--no-icon margin-bottom-3">
+            <div className="usa-alert__body">
+              <p className="usa-alert__text">
+                <span className="alert-text">Empty sections will not display.</span>
+                <span className="action-text add-question">
+                  <a className="usa-link" href="#">Add question</a>
+                </span>
+                <span className="action-text remove-section">
+                  <a className="usa-link" href="#">Remove section</a>
+                </span>
+              </p>
+            </div>
+          </div>
+        }
+      </Fieldset>
+
     </>
   );
 };
 
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const pattern = usePattern(patternId);
-  //const { register } = usePatternEditFormContext();
+  const { register } = usePatternEditFormContext();
   return (
-    <div>
-      Fieldset settings go here. {JSON.stringify(pattern)}
-      <Fieldset type="fieldset" _patternId={patternId} />
+
+    <div className="grid-row edit-component-panel">
+      <div className="grid-col-12 margin-bottom-3 flex-align-self-end">
+        <label className="usa-label width-full maxw-full">
+          Legend Text Element
+          <input
+            className="usa-input"
+            {...register(`${patternId}.data.legend`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      <div className="grid-col-12 margin-bottom-3 flex-align-self-end">
+        <label className="usa-label width-full maxw-full">
+          Subheader Text Element
+          <input
+            className="usa-input"
+            {...register(`${patternId}.data.subheader`)}
+            type="text"
+          ></input>
+        </label>
+      </div>
+      {/* <Fieldset type="fieldset" _patternId={patternId} /> */}
       <PatternEditActions />
     </div>
   );
 };
 
-export default FieldsetEdit;
+export default FieldsetEdit;
diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx
@@ -32,8 +32,8 @@ const FormSummaryEdit: PatternEditComponent<FormSummaryProps> = props => {
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const { register } = usePatternEditFormContext();
   return (
-    <div className="grid-row grid-gap">
-      <div className="grid-col grid-col-4">
+    <div className="grid-row grid-gap-1 edit-component-panel">
+      <div className="desktop:grid-col-4 mobile:grid-col-12">
         <label className="usa-label">
           Title
           <input
@@ -43,7 +43,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Description
           <textarea

diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx
@@ -35,7 +35,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
 
   const methods = usePatternEditFormContext();
   return (
-    <div className="grid-row grid-gap">
+    <div className="grid-row grid-gap-1 edit-component-panel">
       <div className="tablet:grid-col-6 mobile-lg:grid-col-12">
         <label className="usa-label" htmlFor={`${pattern.id}.data.label`}>
           Field label

diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx
@@ -33,8 +33,8 @@ const ParagraphPatternEdit: PatternEditComponent<ParagraphProps> = props => {
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const { register } = usePatternEditFormContext();
   return (
-    <div className="grid-row grid-gap">
-      <div className="grid-col grid-col-10 flex-align-self-end">
+    <div className="grid-row grid-gap-1 edit-component-panel">
+      <div className="desktop:grid-col-9 mobile:grid-col-12 flex-align-self-end">
         <label className="usa-label">
           Text Element
           <input
@@ -44,9 +44,9 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2 flex-align-self-end">
+      <div className="desktop:grid-col-3 mobile:grid-col-12 flex-align-self-end">
         <label className="usa-label">
-          <p className="usa-hint font-ui-3xs">Style</p>
+          <p className="usa-hint">Style</p>
           <select className="usa-select" {...register(`${patternId}.type`)}>
             <option value={'paragraph'}>Question</option> {/* this is a stub */}
             <option value={'paragraph'}>Title</option> {/* this is a stub */}

diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx
@@ -78,18 +78,18 @@ const SortableItem = ({
 
   return (
     <div
+      className="draggable-list-item-wrapper"
       ref={setNodeRef}
       style={{
         transform: CSS.Transform.toString(transform),
         transition,
       }}
     >
-      <div className="grid-row grid-gap">
+      <div className="grid-row grid-gap draggable-list-item">
         <div
-          className="grid-col-12 grid-col width-full"
+          className="grid-col-12 width-full draggable-list-button margin-top-2 margin-bottom-2"
           {...listeners}
           {...attributes}
-          style={{ cursor: 'grab' }}
         >
           <svg
             className="usa-icon margin-x-auto display-block"

diff --git a/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx b/packages/design/src/FormManager/FormEdit/components/SubmissionConfirmationEdit.tsx
@@ -34,8 +34,8 @@ const SubmissionConfirmationEdit: PatternEditComponent<
 const EditComponent = ({ patternId }: { patternId: PatternId }) => {
   const { register } = usePatternEditFormContext();
   return (
-    <div className="grid-row grid-gap">
-      <div className="grid-col grid-col-4">
+    <div className="grid-row grid-gap-1 edit-component-panel">
+      <div className="desktop:grid-col-4 mobile:grid-col-12">
         <label className="usa-label">
           Field label
           <input
@@ -45,7 +45,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Default field value
           <input
@@ -55,7 +55,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Maximum length
           <input
@@ -65,15 +65,15 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => {
           ></input>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <label className="usa-label">
           Field type
           <select className="usa-select" {...register(`${patternId}.type`)}>
             <option value={'input'}>Input</option>
           </select>
         </label>
       </div>
-      <div className="grid-col grid-col-2">
+      <div className="desktop:grid-col-2 mobile:grid-col-12">
         <div className="usa-checkbox">
           <input
             className="usa-checkbox__input"

diff --git a/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx b/packages/design/src/FormManager/FormEdit/components/common/PatternEditActions.tsx
@@ -16,22 +16,22 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
 
   return (
     <>
-      <div className="border-top-1px border-base-lighter padding-top-1 margin-top-1">
+      <div className="border-top-1px border-base-lighter margin-top-2 margin-bottom-2 padding-top-1 width-full text-right pattern-edit-panel">
         <span
-          className={classNames('display-inline', {
+          className={classNames('display-inline-block', {
             'border-base-lighter': children,
             'padding-right-1': children,
             'margin-right-1': children,
           })}
         >
           <button
             type="button"
-            aria-label="Delete this pattern"
-            title="Delete this pattern"
+            aria-label="Create a copy of this pattern"
+            title="Create a copy of this pattern"
             className="usa-button--outline usa-button--unstyled"
             onClick={event => {
               event.preventDefault();
-              deleteSelectedPattern();
+              alert('Unimplemented');
             }}
           >
             <svg
@@ -41,18 +41,19 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
               role="img"
             >
               <use
-                xlinkHref={`${context.uswdsRoot}img/sprite.svg#delete`}
+                xlinkHref={`${context.uswdsRoot}img/sprite.svg#content_copy`}
               ></use>
             </svg>
           </button>
+
           <button
             type="button"
-            aria-label="Create a copy of this pattern"
-            title="Create a copy of this pattern"
+            aria-label="Delete this pattern"
+            title="Delete this pattern"
             className="usa-button--outline usa-button--unstyled"
             onClick={event => {
               event.preventDefault();
-              alert('Unimplemented');
+              deleteSelectedPattern();
             }}
           >
             <svg
@@ -62,10 +63,11 @@ export const PatternEditActions = ({ children }: PatternEditActionsProps) => {
               role="img"
             >
               <use
-                xlinkHref={`${context.uswdsRoot}img/sprite.svg#content_copy`}
+                xlinkHref={`${context.uswdsRoot}img/sprite.svg#delete`}
               ></use>
             </svg>
           </button>
+
           {children ? (
             <span className="margin-left-1 padding-left-2 border-left-1px border-base-lighter">
               {children}