Run prettier against most recent push to main. (#149)

GSA-TTS · Jun 4, 2024 · f06f0a6 · f06f0a6
1 parent a2d0e2c
commit f06f0a6
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 60 deletions.
diff --git a/packages/design/src/Form/components/PageSet/PageMenu/PageMenu.tsx b/packages/design/src/Form/components/PageSet/PageMenu/PageMenu.tsx
@@ -17,11 +17,17 @@ export const PageMenu = ({ pages }: PageMenuProps) => {
         {pages.map((page, index) => (
           <li
             key={index}
-            className={classNames('usa-sidenav__item tablet:margin-left-0 margin-left-2', styles.sideNav, {
-              'usa-current text-primary': page.selected,
-            })}
+            className={classNames(
+              'usa-sidenav__item tablet:margin-left-0 margin-left-2',
+              styles.sideNav,
+              {
+                'usa-current text-primary': page.selected,
+              }
+            )}
           >
-            <a className={`${styles.usaNavLink}`} href={page.url}>{page.title}</a>
+            <a className={`${styles.usaNavLink}`} href={page.url}>
+              {page.title}
+            </a>
           </li>
         ))}
       </ul>

diff --git a/packages/design/src/Form/components/PageSet/PageSet.tsx b/packages/design/src/Form/components/PageSet/PageSet.tsx
@@ -23,7 +23,9 @@ const PageSet: PatternComponent<PageSetProps> = props => {
           })}
         />
       </nav>
-      <div className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper">{props.children}</div>
+      <div className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper">
+        {props.children}
+      </div>
     </div>
   );
 };

diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx
@@ -31,7 +31,7 @@ const icons: IconsType = {
   'template-icon.svg': templateIcon,
 };
 
-export const AddPatternDropdown = ({ uswdsRoot }: { uswdsRoot: string; }) => {
+export const AddPatternDropdown = ({ uswdsRoot }: { uswdsRoot: string }) => {
   const { availablePatterns, addPattern } = useFormManagerStore(state => ({
     availablePatterns: state.availablePatterns,
     addPattern: state.addPattern,
@@ -45,7 +45,10 @@ export const AddPatternDropdown = ({ uswdsRoot }: { uswdsRoot: string; }) => {
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
         setIsOpen(false);
       }
     };
@@ -71,41 +74,88 @@ export const AddPatternDropdown = ({ uswdsRoot }: { uswdsRoot: string; }) => {
 
   return (
     <fieldset className="usa-fieldset">
-      <p className="tablet:display-block display-none usa-label margin-top-0 font-ui-3xs text-uppercase margin-bottom-3">Add Element</p>
+      <p className="tablet:display-block display-none usa-label margin-top-0 font-ui-3xs text-uppercase margin-bottom-3">
+        Add Element
+      </p>
       <div className="dropdownContainer margin-bottom-3" ref={dropdownRef}>
         <ul className="usa-list usa-list--unstyled grid-row tablet:flex-justify-end flex-justify-center">
           <li className="position-relative tablet:grid-col-12 grid-col-5 text-center">
-            <button className={`${styles.dropdownButton} tablet:width-full text-left width-auto text-base-darkest text-normal padding-0 bg-white border-0 cursor-pointer margin-bottom-3`} onClick={() => setIsOpen(!isOpen)}>
+            <button
+              className={`${styles.dropdownButton} tablet:width-full text-left width-auto text-base-darkest text-normal padding-0 bg-white border-0 cursor-pointer margin-bottom-3`}
+              onClick={() => setIsOpen(!isOpen)}
+            >
               <span className="tablet:display-inline-block tablet:width-auto tablet:margin-right-1 display-block width-full text-ttop text-center">
-                <svg className="usa-icon" width="24" height="24" aria-hidden="true" focusable="false" role="img">
-                  <use xlinkHref={`${uswdsRoot}img/sprite.svg#add_circle`}></use>
+                <svg
+                  className="usa-icon"
+                  width="24"
+                  height="24"
+                  aria-hidden="true"
+                  focusable="false"
+                  role="img"
+                >
+                  <use
+                    xlinkHref={`${uswdsRoot}img/sprite.svg#add_circle`}
+                  ></use>
                 </svg>
               </span>
 
               <span className="display-inline-block text-ttop tablet:width-auto text-center">
-                <span className="display-inline-block text-ttop margin-right-1 width-9">{displayValue}</span>
-                <img className="display-inline-block text-ttop" src={getIconPath('dropdown-icon.svg')} alt="" width="16" height="16" />
+                <span className="display-inline-block text-ttop margin-right-1 width-9">
+                  {displayValue}
+                </span>
+                <img
+                  className="display-inline-block text-ttop"
+                  src={getIconPath('dropdown-icon.svg')}
+                  alt=""
+                  width="16"
+                  height="16"
+                />
               </span>
-
             </button>
             {isOpen && (
-              <ul className={`${styles.dropdownMenu} usa-list usa-list--unstyled position-absolute width-full bg-white z-100 shadow-3 text-left`}>
+              <ul
+                className={`${styles.dropdownMenu} usa-list usa-list--unstyled position-absolute width-full bg-white z-100 shadow-3 text-left`}
+              >
                 {availablePatterns.map((pattern, index) => (
-                  <li key={index} className={`${styles.dropdownItem} padding-1 cursor-pointer margin-left-1`} onClick={() => handleSelect(pattern)}>
-                    <img className="display-inline-block text-ttop margin-right-1" src={getIconPath(pattern.iconPath || 'block-icon.svg')} alt="" width="24" height="24" />
-                    <span className="display-inline-block text-ttop">{pattern.displayName}</span>
+                  <li
+                    key={index}
+                    className={`${styles.dropdownItem} padding-1 cursor-pointer margin-left-1`}
+                    onClick={() => handleSelect(pattern)}
+                  >
+                    <img
+                      className="display-inline-block text-ttop margin-right-1"
+                      src={getIconPath(pattern.iconPath || 'block-icon.svg')}
+                      alt=""
+                      width="24"
+                      height="24"
+                    />
+                    <span className="display-inline-block text-ttop">
+                      {pattern.displayName}
+                    </span>
                   </li>
                 ))}
               </ul>
             )}
           </li>
           <li className="tablet:grid-col-12 grid-col-5 text-center">
-            <button className={`${styles.dropdownButton} tablet:width-full text-left width-auto text-base-darkest text-normal padding-0 bg-white border-0 cursor-pointer`}
-              onClick={() => { addPage(); }} >
+            <button
+              className={`${styles.dropdownButton} tablet:width-full text-left width-auto text-base-darkest text-normal padding-0 bg-white border-0 cursor-pointer`}
+              onClick={() => {
+                addPage();
+              }}
+            >
               <span className="tablet:display-inline-block tablet:width-auto tablet:margin-right-1 display-block width-full text-ttop text-center">
-                <img className="usa-icon" src={getIconPath('page-icon.svg')} alt="" width="24" height="24" />
+                <img
+                  className="usa-icon"
+                  src={getIconPath('page-icon.svg')}
+                  alt=""
+                  width="24"
+                  height="24"
+                />
+              </span>
+              <span className="display-inline-block text-ttop tablet:width-auto width-9 text-center">
+                Page
               </span>
-              <span className="display-inline-block text-ttop tablet:width-auto width-9 text-center">Page</span>
             </button>
           </li>
         </ul>

diff --git a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx
@@ -55,7 +55,7 @@ export const FormEditAddPattern: StoryObj<typeof FormEdit> = {
     await userEvent.click(canvas.getByText('Pattern 1'));
     //await userEvent.selectOptions(select, 'Text input');
 
-    select.forEach(async (element) => {
+    select.forEach(async element => {
       await userEvent.click(element);
     });
 
@@ -82,7 +82,7 @@ const editFieldLabel = async (
   await userEvent.type(input, updatedLabel);
   //await userEvent.click(canvas.getByText('Add Element'));
 
-  select.forEach(async (element) => {
+  select.forEach(async element => {
     await userEvent.click(element);
   });
 

diff --git a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx
@@ -22,11 +22,20 @@ export const PageEdit: PatternEditComponent<PageProps> = props => {
           editComponent={<PageEditComopnent pattern={props.focus.pattern} />}
         ></PatternEditForm>
       ) : (
-        <div className={`${styles.titleArea} display-flex flex-justify flex-align-center position-relative margin-bottom-205`}>
-          <span className={`${styles.titleText} padding-right-1 text-uppercase text-ls-1 text-base bg-primary-lighter`}>
-            {props.previewProps.title || 'untitled page'} <span className="text-red">*</span>
+        <div
+          className={`${styles.titleArea} display-flex flex-justify flex-align-center position-relative margin-bottom-205`}
+        >
+          <span
+            className={`${styles.titleText} padding-right-1 text-uppercase text-ls-1 text-base bg-primary-lighter`}
+          >
+            {props.previewProps.title || 'untitled page'}{' '}
+            <span className="text-red">*</span>
+          </span>
+          <span
+            className={`${styles.pageNumber} padding-left-1 text-base bg-primary-lighter`}
+          >
+            Page X
           </span>
-          <span className={`${styles.pageNumber} padding-left-1 text-base bg-primary-lighter`}>Page X</span>
         </div>
       )}
       <PatternPreviewSequence

diff --git a/packages/design/src/FormManager/FormEdit/components/PageSetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/PageSetEdit.tsx
@@ -7,7 +7,6 @@ import { PatternEditComponent } from '../types';
 import PageSet from '../../../Form/components/PageSet';
 
 const PageSetEdit: PatternEditComponent<PageSetProps> = ({ previewProps }) => {
-
   return (
     <>
       <PageSet {...previewProps} />

diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx
@@ -24,7 +24,7 @@ const EditForm = () => {
   return (
     <div className="grid-row position-relative">
       <div className="desktop:grid-col-2  tablet:grid-col-3 tablet:display-block grid-col-12 display-none padding-y-3 padding-right-3">
-          <AddPatternDropdown uswdsRoot={context.uswdsRoot} />
+        <AddPatternDropdown uswdsRoot={context.uswdsRoot} />
       </div>
       <div className="desktop:grid-col-10 tablet:grid-col-9 grid-col-12 tablet:border-left tablet:border-bottom tablet:border-right tablet:border-left-2px tablet:border-base-lighter bg-primary-lighter contentWrapper">
         <div className="grid-col-12">
@@ -42,7 +42,7 @@ const EditForm = () => {
         </div>
       </div>
       <div className="tablet:display-none grid-col-12 padding-y-3">
-          <AddPatternDropdown uswdsRoot={context.uswdsRoot} />
+        <AddPatternDropdown uswdsRoot={context.uswdsRoot} />
       </div>
     </div>
   );

diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts
@@ -53,7 +53,7 @@ export const createFormEditSlice =
       ([patternType, patternConfig]) => ({
         patternType,
         displayName: patternConfig.displayName,
-        iconPath: patternConfig.iconPath
+        iconPath: patternConfig.iconPath,
       })
     ),
     session,

diff --git a/packages/design/src/FormManager/FormManagerLayout/BottomNavigation.tsx b/packages/design/src/FormManager/FormManagerLayout/BottomNavigation.tsx
@@ -13,12 +13,18 @@ export const BottomNavigation = ({
     <div className="position-sticky bottom-0 bg-white padding-2 border-top border-bottom border-base-lighter">
       <div className="grid-container grid-row tablet:flex-justify-end flex-justify-center width-full">
         {back && (
-          <a className="usa-button usa-button--outline tablet:grid-col-auto grid-col-5" href={back}>
+          <a
+            className="usa-button usa-button--outline tablet:grid-col-auto grid-col-5"
+            href={back}
+          >
             Back
           </a>
         )}
         {close && (
-          <a className="usa-button usa-button--outline tablet:grid-col-auto grid-col-5" href={close}>
+          <a
+            className="usa-button usa-button--outline tablet:grid-col-auto grid-col-5"
+            href={close}
+          >
             Close
           </a>
         )}

diff --git a/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx b/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx
@@ -57,7 +57,8 @@ export const TopNavigation = ({
       </div>
       <div className="display-none tablet:display-block margin-top-1 margin-bottom-1">
         <div className="grid-container">
-          <div className="grid-row margin-bottom-0 classes usa-step-indicator "
+          <div
+            className="grid-row margin-bottom-0 classes usa-step-indicator "
             aria-label="progress"
           >
             <div className="margin-top-1 grid-col-2">
@@ -107,26 +108,28 @@ export const TopNavigation = ({
               </li>
             </ol>
             <div className="desktop:grid-col-4 tablet:grid-col-5 text-right">
-              <span className={`text-base font-ui-3xs padding-left-1 display-inline-block text-middle ${styles.savedStatus}`}>
-                  {lastSaved
-                    ? 'Saved ' +
-                      lastSaved.toLocaleDateString('en-us', {
-                        month: 'short',
-                        day: 'numeric',
-                        hour: 'numeric',
-                        minute: 'numeric',
-                        second: 'numeric',
-                      })
-                    : 'Blueprint loaded'}
-                </span>
-                {preview && (
-                  <a
-                    href={preview}
-                    className="usa-button usa-button--outline margin-left-1 display-inline-block text-middle"
-                  >
-                    Preview
-                  </a>
-                )}
+              <span
+                className={`text-base font-ui-3xs padding-left-1 display-inline-block text-middle ${styles.savedStatus}`}
+              >
+                {lastSaved
+                  ? 'Saved ' +
+                    lastSaved.toLocaleDateString('en-us', {
+                      month: 'short',
+                      day: 'numeric',
+                      hour: 'numeric',
+                      minute: 'numeric',
+                      second: 'numeric',
+                    })
+                  : 'Blueprint loaded'}
+              </span>
+              {preview && (
+                <a
+                  href={preview}
+                  className="usa-button usa-button--outline margin-left-1 display-inline-block text-middle"
+                >
+                  Preview
+                </a>
+              )}
             </div>
           </div>
         </div>
@@ -175,7 +178,9 @@ const MobileStepIndicator = ({ curPage }: { curPage: NavPage }) => (
       <span className="usa-step-indicator__heading-counter">
         <span className="usa-sr-only">Step</span>
         <span className="usa-step-indicator__current-step">1</span>
-        <span className="usa-step-indicator__total-steps margin-left-05">of 3</span>{' '}
+        <span className="usa-step-indicator__total-steps margin-left-05">
+          of 3
+        </span>{' '}
       </span>
     </div>
     <div className="grid-col grid-col-8">

diff --git a/packages/design/src/FormManager/Notifications/NotificationAlert.tsx b/packages/design/src/FormManager/Notifications/NotificationAlert.tsx
@@ -13,10 +13,7 @@ export const NotificationAlert = ({
   message,
 }: NotificationAlertProps) => (
   <div
-    className={classNames(
-      'usa-alert',
-      `usa-alert--${type}`
-    )}
+    className={classNames('usa-alert', `usa-alert--${type}`)}
     role="alert"
     aria-live="assertive"
     aria-atomic="true"
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,7 +23,9 @@ const PageSet: PatternComponent<PageSetProps> = props => { @@
               })}
             />
           </nav>
-          <div className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper">{props.children}</div>
+          <div className="tablet:grid-col-9 tablet:padding-left-4 padding-left-0 padding-bottom-3 padding-top-3 tablet:border-left tablet:border-base-lighter contentWrapper">
+            {props.children}
+          </div>
         </div>
       );
     };
@@ Expand Down @@