diff --git a/packages/design/src/Form/components/PageSet/PageMenu/PageMenu.tsx b/packages/design/src/Form/components/PageSet/PageMenu/PageMenu.tsx index a1f920e0..9e6dfa67 100644 --- 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) => (
  • - {page.title} + + {page.title} +
  • ))} diff --git a/packages/design/src/Form/components/PageSet/PageSet.tsx b/packages/design/src/Form/components/PageSet/PageSet.tsx index 9e05b63e..acfed9eb 100644 --- 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 = props => { })} /> -
    {props.children}
    +
    + {props.children} +
    ); }; diff --git a/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx b/packages/design/src/FormManager/FormEdit/AddPatternDropdown.tsx index 5514898e..04165741 100644 --- 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 (
    -

    Add Element

    +

    + Add Element +

    • - {isOpen && ( -
        +
          {availablePatterns.map((pattern, index) => ( -
        • handleSelect(pattern)}> - - {pattern.displayName} +
        • handleSelect(pattern)} + > + + + {pattern.displayName} +
        • ))}
        )}
      • -
      diff --git a/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx b/packages/design/src/FormManager/FormEdit/FormEdit.stories.tsx index 3ab4424f..71bbb992 100644 --- 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 = { 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 index 37bbdda3..d43f3b97 100644 --- 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 = props => { editComponent={} > ) : ( -
      - - {props.previewProps.title || 'untitled page'} * +
      + + {props.previewProps.title || 'untitled page'}{' '} + * + + + Page X - Page X
      )} = ({ previewProps }) => { - return ( <> diff --git a/packages/design/src/FormManager/FormEdit/index.tsx b/packages/design/src/FormManager/FormEdit/index.tsx index 3583d270..3ca54e97 100644 --- a/packages/design/src/FormManager/FormEdit/index.tsx +++ b/packages/design/src/FormManager/FormEdit/index.tsx @@ -24,7 +24,7 @@ const EditForm = () => { return (
      - +
      @@ -42,7 +42,7 @@ const EditForm = () => {
      - +
      ); diff --git a/packages/design/src/FormManager/FormEdit/store.ts b/packages/design/src/FormManager/FormEdit/store.ts index ec35173a..9ff5ae15 100644 --- 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 index 206add49..9544d884 100644 --- a/packages/design/src/FormManager/FormManagerLayout/BottomNavigation.tsx +++ b/packages/design/src/FormManager/FormManagerLayout/BottomNavigation.tsx @@ -13,12 +13,18 @@ export const BottomNavigation = ({
      {back && ( - + Back )} {close && ( - + Close )} diff --git a/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx b/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx index 30f3603c..4805bc6a 100644 --- a/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx +++ b/packages/design/src/FormManager/FormManagerLayout/TopNavigation.tsx @@ -57,7 +57,8 @@ export const TopNavigation = ({
      -
      @@ -107,26 +108,28 @@ export const TopNavigation = ({
    • - - {lastSaved - ? 'Saved ' + - lastSaved.toLocaleDateString('en-us', { - month: 'short', - day: 'numeric', - hour: 'numeric', - minute: 'numeric', - second: 'numeric', - }) - : 'Blueprint loaded'} - - {preview && ( - - Preview - - )} + + {lastSaved + ? 'Saved ' + + lastSaved.toLocaleDateString('en-us', { + month: 'short', + day: 'numeric', + hour: 'numeric', + minute: 'numeric', + second: 'numeric', + }) + : 'Blueprint loaded'} + + {preview && ( + + Preview + + )}
    @@ -175,7 +178,9 @@ const MobileStepIndicator = ({ curPage }: { curPage: NavPage }) => ( Step 1 - of 3{' '} + + of 3 + {' '}
    diff --git a/packages/design/src/FormManager/Notifications/NotificationAlert.tsx b/packages/design/src/FormManager/Notifications/NotificationAlert.tsx index e543934f..67444c07 100644 --- 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) => (