Merge pull request #1746 from datadryad/readme-wizard

README creation wizard
datadryad · Jul 30, 2024 · df4b2de · df4b2de
2 parents 1fe2afe + 6a6865e
commit df4b2de
Show file tree

Hide file tree

Showing 37 changed files with 670 additions and 247 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -72,6 +72,7 @@ a[role='button']:focus-visible, a[class*='button']:focus-visible {
 @import 'scss/select';
 @import 'scss/showhide';
 @import 'scss/table';
+@import 'scss/steps';
 
 // ***** Components ***** //
 

diff --git a/app/assets/stylesheets/scss/_buttons.scss b/app/assets/stylesheets/scss/_buttons.scss
@@ -15,6 +15,19 @@
   }
 }
 
+.o-button__plain-text {
+  @extend %o-button__plain-text;
+  padding: 8px 12px;
+  background-color: $lightest-blue;
+}
+
+.o-button__plain-text0 {
+  @extend %o-button__plain-text;
+  padding: 8px 12px;
+  background-color: $green;
+  color: white;
+}
+
 .o-button__plain-text1,
 input[type=file]::file-selector-button {
   @extend %o-button__plain-text;

diff --git a/app/assets/stylesheets/scss/_footer.scss b/app/assets/stylesheets/scss/_footer.scss
@@ -1,9 +1,17 @@
 // ##### Footer Component ##### //
 
 #maincontent {
-  min-height: 79vh;
-  @media (max-width: 1060px) { min-height: 75vh; } 
-  @media (max-width: 900px) { min-height: 70vh; } 
+  min-height: calc(100vh - 240px);
+  @media (max-width: 968px) { min-height: calc(100vh - 280px); } 
+  @media (max-width: 870px) { min-height: calc(100vh - 306px); } 
+  @media (max-width: 640px) { min-height: calc(100vh - 346px); } 
+
+  #submission-wizard {
+    min-height: calc(100vh - 320px);
+    @media (max-width: 968px) { min-height: calc(100vh - 360px); } 
+    @media (max-width: 870px) { min-height: calc(100vh - 386px); } 
+    @media (max-width: 640px) { min-height: calc(100vh - 426px); } 
+  }
 }
 
 .c-footer {

diff --git a/app/assets/stylesheets/scss/_headings.scss b/app/assets/stylesheets/scss/_headings.scss
@@ -83,6 +83,7 @@ h4, *[class^="o-heading__level4"]  {
 }
 
 h5, h6 {
+  color: $dark-blue;
   margin-top: $spacing-sm;
   margin-bottom: $spacing-base;
   font-size: 1.125rem;
@@ -91,6 +92,7 @@ h5, h6 {
 }
 
 h6 {
+  color: $dark-navy;
   font-style: italic;
 }
 

diff --git a/app/assets/stylesheets/scss/_list.scss b/app/assets/stylesheets/scss/_list.scss
@@ -1,10 +1,21 @@
 // ##### List Object ##### //
 
+ul, ol {
+	margin: .5rem auto;
+}
+
 li {
 	margin-top: $spacing-base;
 	margin-bottom: $spacing-base;
 }
 
+ul.c-text_styles {
+  li {
+    margin: 1.2ex 0;
+    padding: 0;
+  }
+}
+
 .o-list {
 	margin: 0 0 10px;
 	padding: 0;

diff --git a/app/assets/stylesheets/scss/_steps.scss b/app/assets/stylesheets/scss/_steps.scss
@@ -0,0 +1,60 @@
+.steps-wrapper {
+  margin: 1.5rem auto 2rem;
+  display: flex;
+  justify-content: space-between;
+
+  .step {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+
+    &::after {
+      position: absolute;
+      content: "";
+      border-bottom: 4px solid $lighter-gray;
+      width: 100%;
+      top: .9rem;
+      left: 50%;
+      z-index: 2;
+    }
+
+    &:last-child::after {
+      content: none;
+    }
+
+    .step-counter {
+      font-size: .85rem;
+      line-height: 0;
+      position: relative;
+      z-index: 3;
+      width: 1.8rem;
+      height: 1.8rem;
+      border-radius: 50%;
+      background-color: $lighter-gray;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-bottom: .5rem;
+    }
+
+    &.completed {
+      &::after {
+        border-color: $medium-blue;
+      }
+      .step-counter {
+        background-color: $medium-blue;
+        color: white;
+      }
+    }
+    &.current {
+      .step-counter {
+        background-color: $lighter-blue;
+      }
+      .step-name {
+        font-weight: bold;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/scss/_text-styles.scss b/app/assets/stylesheets/scss/_text-styles.scss
@@ -6,13 +6,6 @@ blockquote.c-text_styles {
   line-height: 150%;
 }
 
-ul.c-text_styles {
-  li {
-    margin: 1.2ex 0;
-    padding: 0;
-  }
-}
-
 code,
 kbd,
 samp {

diff --git a/app/assets/stylesheets/scss/_upload.scss b/app/assets/stylesheets/scss/_upload.scss
@@ -41,3 +41,38 @@
 .t-uploads__method-input {
   margin: 0 1ex 0 0;
 }
+
+.readme-columns, .readme-columns-final, .readme-buttons {
+  display: flex;
+  gap: 2ch;
+}
+.readme-columns {
+  flex-wrap: wrap;
+  margin: 2rem auto;
+  & > div {
+    flex-basis: calc(50% - 2ch);
+    flex-shrink: 1;
+    flex-grow: 1;
+
+    padding: 1.5rem 2rem;
+    background-color: $lightest-blue;
+    &:nth-child(odd) {
+      background-color: $lightest-green;
+    }
+  }
+}
+.readme-columns-final {
+  & > div:first-child {
+    min-width: 400px;
+    flex-grow: 2;
+  }
+  & > div:last-child {
+    padding: 0 1rem 1rem;
+    min-width: 500px;
+    background-color: $lightest-blue;
+    flex-shrink: 2;
+  }
+}
+.readme-buttons {
+  justify-content: center;
+}
diff --git a/app/javascript/react/components/FileUpload/FileList/File.jsx b/app/javascript/react/components/FileUpload/FileList/File.jsx
@@ -56,6 +56,7 @@ export default function File({file, clickRemove, clickValidationReport}) {
             <button
               className="o-button__plain-text5"
               onClick={clickValidationReport}
+              aria-haspopup="dialog"
               type="button"
               style={{padding: '10px'}}
             >

diff --git a/app/javascript/react/components/FileUpload/ModalUrl.jsx b/app/javascript/react/components/FileUpload/ModalUrl.jsx
@@ -5,6 +5,7 @@ const modal_url = React.forwardRef(({changedUrls, submitted, clickedClose}, ref)
   <dialog
     id="js-uploadmodal"
     className="modalDialog"
+    aria-modal="true"
     ref={ref}
   >
     <form method="dialog" onSubmit={submitted}>

diff --git a/app/javascript/react/components/FileUpload/ModalValidationReport/ModalValidationReport.jsx b/app/javascript/react/components/FileUpload/ModalValidationReport/ModalValidationReport.jsx
@@ -88,6 +88,7 @@ const ModalValidationReport = React.forwardRef(({file, clickedClose}, ref) => {
   return (
     <dialog
       className="modalDialog extra-wide"
+      aria-modal="true"
       ref={ref}
     >
       <div className="c-uploadmodal__header">

diff --git a/app/javascript/react/components/FileUpload/UploadSelect/UploadType.jsx b/app/javascript/react/components/FileUpload/UploadSelect/UploadType.jsx
@@ -39,6 +39,7 @@ function UploadType(
         id={`${type}_manifest`}
         className="js-uploadmodal__button-show-modal"
         onClick={clickedModal}
+        aria-haspopup="dialog"
       >
         {buttonURLs}
       </button>

diff --git a/app/javascript/react/components/MarkdownEditor/MarkdownEditor.jsx b/app/javascript/react/components/MarkdownEditor/MarkdownEditor.jsx
@@ -153,7 +153,7 @@ function MilkdownEditor({
   }, [initialCode]);
 
   useEffect(() => {
-    if (defaultVal && saveVal && saveVal !== defaultVal) onChange(saveVal);
+    if (saveVal !== defaultVal) onChange(saveVal);
   }, [saveVal]);
 
   useEffect(() => {
@@ -236,13 +236,15 @@ function MilkdownEditor({
 
 // <p className="screen-reader-only" role="status" aria-live="polite" id="menu-status">{status}</p>
 
-const MarkdownEditor = React.forwardRef((props, ref) => (
-  <div ref={ref} id={props.id} className="markdown_editor">
-    <MilkdownProvider>
-      <MilkdownEditor {...props} />
-    </MilkdownProvider>
-  </div>
-));
+function MarkdownEditor(props) {
+  return (
+    <div id={props.id} className="markdown_editor">
+      <MilkdownProvider>
+        <MilkdownEditor {...props} />
+      </MilkdownProvider>
+    </div>
+  );
+}
 
 MarkdownEditor.propTypes = {
   id: PropTypes.string.isRequired,

diff --git a/app/javascript/react/components/MarkdownEditor/milkdown_editor.css b/app/javascript/react/components/MarkdownEditor/milkdown_editor.css
@@ -17,6 +17,11 @@
   overflow: auto;
 }
 
+#readme_step_editor .md_editor_textarea {
+  height: 400px;
+  max-height: 65vh;
+}
+
 .md_editor_textarea > div:not(.c-alert--error) {
   overflow: auto;
   position: absolute;
@@ -310,18 +315,22 @@
   height: 100%;
 }
 
-.ProseMirror p {
-  white-space: normal;
-  white-space-collapse: preserve-spaces;
-}
-
 .markdown_editor .milkdown .ProseMirror.editor,
 .markdown_editor .cm-editor {
   padding: 1.5rem 1rem;
   font-size: 1rem;
   min-height: 100%;
 }
 
+.ProseMirror.editor *:first-child {
+  margin-top: 0;
+}
+
+.ProseMirror.editor p {
+  white-space: normal;
+  white-space-collapse: preserve-spaces;
+}
+
 .milkdown, .headingMenu li {
   font-family: 'Noto Sans', 'Helvetica Neue', 'Helvetica', 'Arial', '나눔바른고딕', 'Nanum Barun Gothic', '맑은고딕', 'Malgun Gothic', sans-serif;
   margin: 0 !important;
@@ -379,8 +388,8 @@
   margin-bottom: .75rem;
 }
 
-.milkdown h4, .headingMenu .h4, .cm-editor .md_h4, {
-  font-size: 1.125rem;
+.milkdown h4, .headingMenu .h4, .cm-editor .md_h4 {
+  font-size: 1.12rem !important;
   line-height: 1.5rem;
   margin-top: 1.15rem;
   margin-bottom: .75rem;

diff --git a/app/javascript/react/components/MetadataEntry/Cedar.jsx b/app/javascript/react/components/MetadataEntry/Cedar.jsx
@@ -186,10 +186,23 @@ export default function Cedar({
                   <strong>{template.title}</strong><br />
                   {updated && `Last modified ${moment(updated).local().format('H:mmA, MM/DD/YYYY')}`}
                 </p>
-                <button disabled={!template} type="submit" className="o-button__plain-text2" style={{margin: '0 1rem'}}>
+                <button
+                  aria-haspopup="dialog"
+                  aria-controls="cedarDialog"
+                  disabled={!template}
+                  type="submit"
+                  className="o-button__plain-text2"
+                  style={{margin: '0 1rem'}}
+                >
                   Edit form
                 </button>
-                <button type="button" className="o-button__remove" onClick={() => del.current.showModal()}>
+                <button
+                  type="button"
+                  className="o-button__remove"
+                  aria-haspopup="dialog"
+                  aria-controls="deleteCedarDialog"
+                  onClick={() => del.current.showModal()}
+                >
                   Delete form
                 </button>
               </div>
@@ -224,21 +237,29 @@ export default function Cedar({
           </Form>
         )}
       </Formik>
-      <dialog className="modalDialog" id="cedarDialog" ref={setRef}>
+      <dialog className="modalDialog" id="cedarDialog" aria-modal="true" ref={setRef}>
         <div className="modalClose">
           <button aria-label="Close" type="button" onClick={() => dialog.current.close()} />
         </div>
         <div className="c-modal-content__cedar">
           <cedar-embeddable-editor id="cedarEditor" ref={setRef} />
         </div>
       </dialog>
-      <dialog className="modalDialog" id="deleteCedarDialog" ref={setRef}>
+      <dialog
+        className="modalDialog"
+        id="deleteCedarDialog"
+        role="alertdialog"
+        aria-labelledby="cedar-alert-title"
+        aria-describedby="cedar-alert-desc"
+        aria-modal="true"
+        ref={setRef}
+      >
         <div className="modalClose">
           <button aria-label="Close" type="button" onClick={() => del.current.close()} />
         </div>
         <div className="c-modal-content__normal">
-          <h1 className="mat-card-title">Confirm Deletion</h1>
-          <p>Are you sure you want to delete this form? All answers will be lost.</p>
+          <h1 id="cedar-alert-title" className="mat-card-title">Confirm Deletion</h1>
+          <p id="cedar-alert-desc">Are you sure you want to delete this form? All answers will be lost.</p>
           <button
             type="button"
             className="o-button__plain-text2"