Inline edit pattern UI (#109)

* Initial preview focus (rather than settings button) * Basic inline editing working * in-progress * Use "drag handle" icon bundled with USWDS * Remove original css styles from form edit * Replace inner nav contents with new design's navigation, currently only wired to the unused preview page. * Inline editing is styled, with some weirdness on the buttons on the bottom not included in the sizing properly.
GSA-TTS · Apr 17, 2024 · 30ed3c7 · 30ed3c7
1 parent 9549041
commit 30ed3c7
Show file tree

Hide file tree

Showing 23 changed files with 506 additions and 645 deletions.
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "build": "turbo run build --filter=!infra",
     "clean": "turbo run clean",
     "dev": "turbo run dev --concurrency 12",
-    "format": "prettier --write \"packages/**/*.{js,jsx,ts,tsx}\"",
+    "format": "prettier --write \"packages/*/src/**/*.{js,jsx,ts,tsx}\"",
     "lint": "turbo run lint",
     "pages": "rm -rf node_modules && npm i -g pnpm turbo && pnpm i && pnpm build && ln -sf ./apps/spotlight/dist _site",
     "test": "vitest run --coverage.enabled --coverage.reporter=text --coverage.reporter=json-summary --coverage.reporter=json --coverage.reportOnFailure --reporter vitest-github-actions-reporter",

diff --git a/packages/design/sass/styles.scss b/packages/design/sass/styles.scss
@@ -186,96 +186,6 @@ nav {
     padding-top: 2.6rem;
   }
 }
-.previewForm {
-  padding-left: 1rem;
-
-  >fieldset {
-    margin-bottom: 10em;
-
-    >legend {
-      border-bottom: 1px #DCDEE0 solid;
-      font-size: 2rem;
-    }
-
-    >.usa-form-group {
-      margin-left: 3rem;
-    }
-
-    .usa-form-group {
-      >fieldset {
-        border-bottom: 1px #DCDEE0 solid;
-        padding-bottom: 2rem;
-
-        legend {
-          font-size: 1.5rem;
-          border-bottom: none;
-        }
-
-        p {
-          font-weight: bold;
-        }
-      }
-    }
-  }
-
-  .usa-button {
-    margin: 1rem 0 0 1rem;
-  }
-}
-
-.innerPageTopNavWrapper {
-  margin-bottom: 50px;
-
-  .innerPageTopNav {
-    ul {
-      list-style: none;
-      padding: 0;
-      margin: 0 auto;
-
-      li {
-        margin: 0 1px;
-
-        &.currentPage {
-          a,
-          a:hover {
-            background: #454540;
-            color: white;
-          }
-        }
-
-        a {
-          display: block;
-          background: #ede3ff;
-          color: #39215e;
-          border: 1px solid #ede3ff;
-        }
-
-        a,
-        .usa-button {
-          text-decoration: none;
-          padding: 15px;
-          font-size: 20px;
-          text-align: center;
-
-          &:hover {
-            background: #f5f2ff;
-            border: 1px solid #e4deff;
-          }
-        }
-
-        .usa-button {
-          margin-top: 0;
-        }
-      }
-    }
-
-    .usa-button {
-      margin: 0;
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
 
 [contentEditable=true]:focus,
 [href]:focus,
@@ -284,162 +194,6 @@ iframe:focus {
   outline: 0.25rem solid #783cb9;
 }
 
-.editFormPage {
-
-  .usa-intro {
-    padding-bottom: 2rem;
-    border-bottom: 1px solid #bbb;
-    width: 100%;
-    max-width: 100%;
-    margin-bottom: 50px;
-  }
-
-  fieldset {
-    border: none;
-    padding: 0;
-    margin-bottom: 2em;
-  }
-
-  h1 {
-    margin-top: 0;
-  }
-
-  .form-group-row {
-    padding: 1rem;
-    cursor: pointer;
-    display: flex;
-
-    &:first-child {
-      .edit-button-icon {
-        padding: 0 10px;
-        flex: none;
-      }
-    }
-
-    &.field-selected {
-      background: #e7e3fa;
-    }
-
-    .usa-form-group-wrapper {
-      flex: 12;
-    }
-
-    .edit-button-icon {
-      flex: 1;
-      text-align: center;
-      padding: 30px 0 0;
-      align-self: flex-end;
-      margin: 0 0 14px 7px;
-    }
-
-    label {
-      cursor: pointer;
-    }
-
-    .usa-button {
-      background: none;
-      margin: 0;
-      padding: 2px;
-    }
-
-    .usa-icon {
-      height: 1.75em;
-      width: 1.75em;
-      fill: #777;
-    }
-  }
-
-  .usa-form-group {
-    margin: 0 0 0.5rem;
-  }
-
-  legend {
-    margin-top: 0;
-  }
-
-  .editFormContentWrapper {
-    .preview {
-      .grid-col-9 {
-        width: 100%;
-      }
-
-      .usa-form--large {
-        max-width: 46rem;
-      }
-    }
-  }
-}
-
-.editFormWrapper {
-  list-style: none;
-  padding: 0;
-  border-top: 1px solid #c9c9c9;
-  display: none;
-
-  li {
-    padding: 15px 0 20px;
-    border-bottom: 1px solid #c9c9c9;
-  }
-
-  .usa-label {
-    margin-top: 0;
-  }
-}
-
-.editPageGrabButtonWrapper {
-  font-size: 20px;
-  text-align: center;
-  width: 45px;
-
-  span {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .grabber2 {
-    margin-top: -6px;
-  }
-}
-
-.settingsContainer {
-  background: #e7e3fa;
-  padding: 30px;
-  position: -webkit-sticky; /* Safari */
-  top: 10px;
-
-  h3 {
-    margin-top: 0;
-    font-size: 1.2em;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    hyphens: auto;
-  }
-
-  .formRowEditFields {
-    .grid-col {
-      width: 100%;
-    }
-  }
-
-  .usa-button {
-    width: 100%;
-    padding: 1rem 1.25rem;
-    margin: 20px 0 0;
-
-    &.close-button {
-      background-color: #76766a;
-
-      &:hover {
-        background-color: #929285;
-      }
-    }
-  }
-
-  .usa-checkbox {
-    margin-top: 1.5rem;
-  }
-}
-
 .usa-step-indicator__segment {
   max-width: 22rem;
 
@@ -493,78 +247,3 @@ iframe:focus {
     color: #39215e;
   }
 }
-
-@media screen and (max-width: 879px) {
-
-  .editFormPage {
-
-    .usa-intro {
-      margin-bottom: 20px;
-    }
-
-    .editFormContentWrapper {
-      .grid-col,
-      .grid-col-8 {
-        width: 100%;
-      }
-
-      .usa-button{
-        margin-left: 0;
-      }
-
-      .grid-col-4 {
-        position: static;
-      }
-
-      .form-group-row {
-        padding: 0 0 1rem;
-      }
-
-      .settingsContainer {
-        position: fixed;
-        top: 10%;
-        left: 50%;
-        transform: translate(-50%, 0);
-        width: 90%;
-        margin: 0 auto;
-        height: auto;
-        box-shadow: 1px 4px 12px #76766a;
-      }
-    }
-  }
-
-}
-
-
-@media screen and (max-width: 480px) {
-  .usa-legend,
-  .usa-label {
-    word-break: break-all;
-  }
-
-  .innerPageTopNavWrapper {
-    .innerPageTopNav {
-      ul {
-        li {
-          flex: 0 1 auto;
-          width: 100%;
-          margin: 0 0 4px;
-        }
-      }
-    }
-  }
-
-  .editFieldsWrapper {
-    width: 85%;
-
-    .grid-col {
-      width: 100%;
-      flex: 0 1 auto;
-    }
-
-    .usa-label {
-      margin-bottom: 16px;
-    }
-  }
-
-}