change step indicator insets

CDCgov · Oct 21, 2024 · 36a1b04 · 36a1b04
1 parent fb7f67c
commit 36a1b04
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 8 deletions.
diff --git a/query-connector/src/app/query/page.tsx b/query-connector/src/app/query/page.tsx
@@ -54,9 +54,10 @@ const Query: React.FC = () => {
  <>
  <SiteAlert page={mode} />
  <div className={modeToCssContainerMap[mode]}>
- {Object.keys(CUSTOMIZE_QUERY_STEPS).includes(mode) && (
- <StepIndicator headingLevel="h4" curStep={mode} />
- )}
+ {Object.keys(CUSTOMIZE_QUERY_STEPS).includes(mode) &&
+ !showCustomizeQuery && (
+ <StepIndicator headingLevel="h4" curStep={mode} />
+ )}
  {/* Step 1 */}
  {mode === "search" && (
  <SearchForm

diff --git a/query-connector/src/app/query/stepIndicator/StepIndicator.tsx b/query-connector/src/app/query/stepIndicator/StepIndicator.tsx
@@ -5,10 +5,12 @@ import {
  HeadingLevel,
 } from "@trussworks/react-uswds";
 import styles from "./stepIndicator.module.css";
+import classNames from "classnames";
 
 type StepIndicatorProps = {
  headingLevel: HeadingLevel;
  curStep: Mode;
+ className?: string;
 };
 type StepStatus = "current" | "complete" | "incomplete";
 
@@ -41,11 +43,13 @@ export const RETURN_LABEL: { [mode in Mode]: string } = {
  * @param root0 - The props for the StepIndicator component.
  * @param root0.headingLevel - The heading level for the step indicator.
  * @param root0.curStep - The current step in the query process.
+ * @param root0.className - Custom styles for the container
  * @returns The step indicator component showing the current progress.
  */
 const StepIndicator: React.FC<StepIndicatorProps> = ({
  headingLevel,
  curStep,
+ className,
 }) => {
  const stepArray = Object.keys(CUSTOMIZE_QUERY_STEPS).map((key, index) => {
  return { [key]: index };
@@ -56,7 +60,11 @@ const StepIndicator: React.FC<StepIndicatorProps> = ({
  <TrussStepIndicator
  headingLevel={headingLevel}
  counters="default"
- className={`custom-query-step-indicator ${styles.container}`}
+ className={classNames(
+ "custom-query-step-indicator",
+ styles.container,
+ className,
+ )}
  >
  {Object.values(CUSTOMIZE_QUERY_STEPS).map((label, index) => {
  let status = "incomplete";

diff --git a/query-connector/src/app/query/stepIndicator/stepIndicator.module.css b/query-connector/src/app/query/stepIndicator/stepIndicator.module.css
@@ -1,5 +1,10 @@
 .container > ol {
- justify-content: center;
+ justify-content: space-between;
  background-color: rgba(247, 249, 250, 1);
  padding: 1.5rem 0;
+ padding-bottom: 2.25rem;
+}
+
+.container {
+ margin-bottom: 0;
 }
diff --git a/query-connector/src/styles/custom-styles.scss b/query-connector/src/styles/custom-styles.scss
@@ -190,7 +190,6 @@ body {
  display: grid;
  grid-template-columns: 1fr; // Defines a single column
  justify-content: center; // Centers the column in the container
- row-gap: 0.1em; // Adjusts the gap between rows/items
  background-color: rgba(247, 249, 250, 1);
 }
 
@@ -436,6 +435,20 @@ hr.custom-hr {
 .custom-query-step-indicator .usa-step-indicator__header {
  display: none !important;
 }
+
+.usa-step-indicator__segment:before {
+ box-shadow:
+ 0 0 0 0.25rem #919191,
+ 0 0 0 0 white !important;
+}
+
+.usa-step-indicator__segment--current:before,
+.usa-step-indicator__segment--complete:before {
+ box-shadow:
+ inset 0 0 0 0 #919191,
+ 0 0 0 0.25rem white !important;
+}
+
 .customize-accordion .usa-accordion__button[aria-expanded="true"],
 .customize-accordion .usa-accordion__button[aria-expanded="false"] {
  background-size: 16px 10px;
@@ -468,7 +481,8 @@ hr.custom-hr {
  cursor: pointer;
 }
 
-// Overrides
+// Overrides - numbers correspond to the USWDS spacing classes
+// https://designsystem.digital.gov/utilities/margin-and-padding/
 .margin-top-0-important {
  margin-top: 0 !important;
 }

diff --git a/query-connector/src/styles/layout.scss b/query-connector/src/styles/layout.scss
@@ -5,7 +5,7 @@
  width: 100%;
  margin: auto;
  margin-bottom: 5rem;
- margin-top: 3rem;
+ margin-top: 1.5rem;
  padding: 0 !important;
 
  &__wide {