fix steps status

elastic · Oct 3, 2022 · 88cd82d · 88cd82d
1 parent 3bad881
commit 88cd82d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 42 deletions.
diff --git a/src/plugins/guided_onboarding/public/components/guide_panel_step.styles.ts b/src/plugins/guided_onboarding/public/components/guide_panel_step.styles.ts
@@ -8,18 +8,22 @@
 
 import { EuiThemeComputed } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { StepStatus } from '../../common/types';
 
-export const getGuidePanelStepStyles = (euiTheme: EuiThemeComputed) => ({
+export const getGuidePanelStepStyles = (euiTheme: EuiThemeComputed, stepStatus: StepStatus) => ({
   stepNumber: css`
     width: 24px;
     height: 24px;
     border-radius: 50%;
-    border: 2px solid ${euiTheme.colors.success};
+    border: 2px solid
+      ${stepStatus === 'inactive' ? euiTheme.colors.lightShade : euiTheme.colors.success};
     font-weight: ${euiTheme.font.weight.medium};
     text-align: center;
     line-height: 1.4;
+    color: ${stepStatus === 'inactive' ? euiTheme.colors.subduedText : euiTheme.colors.text};
   `,
   stepTitle: css`
     font-weight: ${euiTheme.font.weight.bold};
+    color: ${stepStatus === 'inactive' ? euiTheme.colors.subduedText : euiTheme.colors.text};
   `,
 });
diff --git a/src/plugins/guided_onboarding/public/components/guide_panel_step.tsx b/src/plugins/guided_onboarding/public/components/guide_panel_step.tsx
@@ -40,10 +40,10 @@ export const GuideStep = ({
   navigateToStep,
 }: GuideStepProps) => {
   const { euiTheme } = useEuiTheme();
-  const styles = getGuidePanelStepStyles(euiTheme);
+  const styles = getGuidePanelStepStyles(euiTheme, stepStatus);
 
-  const buttonContent = (
-    <EuiFlexGroup gutterSize="s" responsive={false} justifyContent="center" alignItems="center">
+  const stepTitleContent = (
+    <EuiFlexGroup gutterSize="s" responsive={false}>
       <EuiFlexItem grow={false}>
         {stepStatus === 'complete' ? (
           <EuiIcon type="checkInCircleFilled" size="l" color={euiTheme.colors.success} />
@@ -61,45 +61,49 @@ export const GuideStep = ({
 
   return (
     <div data-test-subj="guidePanelStep">
-      <EuiAccordion
-        id={accordionId}
-        buttonContent={buttonContent}
-        arrowDisplay="right"
-        forceState={stepStatus === 'in_progress' || stepStatus === 'active' ? 'open' : 'closed'}
-      >
-        <>
-          <EuiSpacer size="s" />
+      {stepStatus === 'complete' ? (
+        <>{stepTitleContent}</>
+      ) : (
+        <EuiAccordion
+          id={accordionId}
+          buttonContent={stepTitleContent}
+          arrowDisplay="right"
+          initialIsOpen={stepStatus === 'in_progress' || stepStatus === 'active'}
+        >
+          <>
+            <EuiSpacer size="s" />
 
-          <EuiText size="s">
-            <ul>
-              {stepConfig.descriptionList.map((description, index) => {
-                return <li key={`description-${index}`}>{description}</li>;
-              })}
-            </ul>
-          </EuiText>
+            <EuiText size="s">
+              <ul>
+                {stepConfig.descriptionList.map((description, index) => {
+                  return <li key={`description-${index}`}>{description}</li>;
+                })}
+              </ul>
+            </EuiText>
 
-          <EuiSpacer />
-          {(stepStatus === 'in_progress' || stepStatus === 'active') && (
-            <EuiFlexGroup justifyContent="flexEnd">
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  onClick={() => navigateToStep(stepConfig.id, stepConfig.location)}
-                  fill
-                  data-test-subj="activeStepButtonLabel"
-                >
-                  {stepStatus === 'active'
-                    ? i18n.translate('guidedOnboarding.dropdownPanel.startStepButtonLabel', {
-                        defaultMessage: 'Start',
-                      })
-                    : i18n.translate('guidedOnboarding.dropdownPanel.continueStepButtonLabel', {
-                        defaultMessage: 'Continue',
-                      })}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          )}
-        </>
-      </EuiAccordion>
+            <EuiSpacer />
+            {(stepStatus === 'in_progress' || stepStatus === 'active') && (
+              <EuiFlexGroup justifyContent="flexEnd">
+                <EuiFlexItem grow={false}>
+                  <EuiButton
+                    onClick={() => navigateToStep(stepConfig.id, stepConfig.location)}
+                    fill
+                    data-test-subj="activeStepButtonLabel"
+                  >
+                    {stepStatus === 'active'
+                      ? i18n.translate('guidedOnboarding.dropdownPanel.startStepButtonLabel', {
+                          defaultMessage: 'Start',
+                        })
+                      : i18n.translate('guidedOnboarding.dropdownPanel.continueStepButtonLabel', {
+                          defaultMessage: 'Continue',
+                        })}
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            )}
+          </>
+        </EuiAccordion>
+      )}
 
       <EuiHorizontalRule margin="l" />
     </div>