[EuiTourStep] className consistency with EuiPopover + performance/cleanups

src/components/tour/_tour_footer.styles.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme, shade, tint } from '../../services';
+import { logicalCSS } from '../../global_styling';
+
+export const _tourFooterBgColor = ({ colorMode, euiTheme }: UseEuiTheme) =>
+  colorMode === 'DARK'
+    ? shade(euiTheme.colors.lightestShade, 0.45)
+    : tint(euiTheme.colors.lightestShade, 0.5);
+
+export const euiTourFooterStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  return {
+    // Base
+    euiTourFooter: css`
+      background-color: ${_tourFooterBgColor(euiThemeContext)};
+      ${logicalCSS('border-bottom-left-radius', euiTheme.border.radius.medium)}
+      ${logicalCSS('border-bottom-right-radius', euiTheme.border.radius.medium)}
+    `,
+  };
+};

src/components/tour/_tour_footer.tsx

@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, useMemo, memo } from 'react';
+
+import { useEuiTheme } from '../../services';
+import { EuiI18n } from '../i18n';
+import { EuiPopoverFooter } from '../popover';
+import { EuiButtonEmpty } from '../button';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+
+import {
+  EuiTourStepIndicator,
+  type EuiTourStepStatus,
+} from './tour_step_indicator';
+import type { EuiTourStepProps } from './tour_step';
+
+import { euiTourFooterStyles } from './_tour_footer.styles';
+
+type EuiTourFooterProps = Pick<
+  EuiTourStepProps,
+  'footerAction' | 'step' | 'stepsTotal' | 'onFinish'
+>;
+
+export const EuiTourFooter: FunctionComponent<EuiTourFooterProps> = memo(
+  ({ footerAction, step, stepsTotal, onFinish }) => {
+    const euiTheme = useEuiTheme();
+    const footerStyles = euiTourFooterStyles(euiTheme);
+
+    const customFooterAction = useMemo(() => {
+      if (!footerAction) return null;
+
+      return Array.isArray(footerAction) ? (
+        <EuiFlexGroup
+          gutterSize="s"
+          alignItems="center"
+          justifyContent="flexEnd"
+          responsive={false}
+          wrap
+        >
+          {footerAction.map((action, index) => (
+            <EuiFlexItem key={index} grow={false}>
+              {action}
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      ) : (
+        <EuiFlexItem grow={false}>{footerAction}</EuiFlexItem>
+      );
+    }, [footerAction]);
+
+    const indicators = useMemo(() => {
+      if (stepsTotal <= 1) return null;
+
+      return (
+        <EuiFlexItem grow={false}>
+          <ul className="euiTourFooter__stepList">
+            {[...Array(stepsTotal).keys()].map((_, i) => {
+              let status: EuiTourStepStatus = 'complete';
+              if (step === i + 1) {
+                status = 'active';
+              } else if (step <= i) {
+                status = 'incomplete';
+              }
+              return (
+                <EuiTourStepIndicator key={i} number={i + 1} status={status} />
+              );
+            })}
+          </ul>
+        </EuiFlexItem>
+      );
+    }, [step, stepsTotal]);
+
+    return (
+      <EuiPopoverFooter
+        css={footerStyles.euiTourFooter}
+        className="euiTourFooter"
+      >
+        <EuiFlexGroup
+          responsive={false}
+          justifyContent={stepsTotal > 1 ? 'spaceBetween' : 'flexEnd'}
+          alignItems="center"
+        >
+          {indicators}
+
+          {footerAction ? (
+            customFooterAction
+          ) : (
+            <EuiFlexItem grow={false}>
+              <EuiI18n
+                tokens={[
+                  'euiTourFooter.endTour',
+                  'euiTourFooter.skipTour',
+                  'euiTourFooter.closeTour',
+                ]}
+                defaults={['End tour', 'Skip tour', 'Close tour']}
+              >
+                {([endTour, skipTour, closeTour]: string[]) => (
+                  <EuiButtonEmpty
+                    onClick={onFinish}
+                    color="text"
+                    flush="right"
+                    size="xs"
+                  >
+                    {stepsTotal > 1
+                      ? stepsTotal === step
+                        ? endTour
+                        : skipTour
+                      : closeTour}
+                  </EuiButtonEmpty>
+                )}
+              </EuiI18n>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiPopoverFooter>
+    );
+  }
+);
+EuiTourFooter.displayName = '_EuiTourFooter';

src/components/tour/_tour_header.styles.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+import { logicalCSS } from '../../global_styling';
+
+export const euiTourHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({
+  // Base
+  euiTourHeader: css`
+    ${logicalCSS('border-bottom', 'none')}
+    /* Overriding default EuiPopoverTitle styles */
+    ${logicalCSS('margin-bottom', euiTheme.size.s)}
+  `,
+  // Elements
+  euiTourHeader__title: css`
+    /* Removes extra margin applied to sibling EuiTitle's */
+    ${logicalCSS('margin-top', 0)}
+  `,
+  euiTourHeader__subtitle: css`
+    color: ${euiTheme.colors.subduedText};
+    padding-block-end: ${euiTheme.size.xs};
+  `,
+});

src/components/tour/_tour_header.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, memo } from 'react';
+
+import { useEuiTheme } from '../../services';
+import { EuiPopoverTitle } from '../popover';
+import { EuiTitle } from '../title';
+
+import type { EuiTourStepProps } from './tour_step';
+
+import { euiTourHeaderStyles } from './_tour_header.styles';
+
+type EuiTourHeaderProps = { id: string } & Pick<
+  EuiTourStepProps,
+  'title' | 'subtitle'
+>;
+
+export const EuiTourHeader: FunctionComponent<EuiTourHeaderProps> = memo(
+  ({ id, title, subtitle }) => {
+    const euiTheme = useEuiTheme();
+    const headerStyles = euiTourHeaderStyles(euiTheme);
+
+    return (
+      <EuiPopoverTitle
+        css={headerStyles.euiTourHeader}
+        className="euiTourHeader"
+        id={id}
+      >
+        {subtitle && (
+          <EuiTitle css={headerStyles.euiTourHeader__subtitle} size="xxxs">
+            <h2>{subtitle}</h2>
+          </EuiTitle>
+        )}
+        <EuiTitle css={headerStyles.euiTourHeader__title} size="xxs">
+          {subtitle ? <h3>{title}</h3> : <h2>{title}</h2>}
+        </EuiTitle>
+      </EuiPopoverTitle>
+    );
+  }
+);
+EuiTourHeader.displayName = '_EuiTourHeader';

src/components/tour/tour.styles.ts

@@ -7,30 +7,18 @@
  */
 
 import { css } from '@emotion/react';
-import {
-  UseEuiTheme,
-  shade,
-  tint,
-  COLOR_MODES_STANDARD,
-  EuiThemeColorModeStandard,
-} from '../../services';
+import { UseEuiTheme } from '../../services';
 import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../global_styling';
 import { openAnimationTiming } from '../popover/popover_panel/_popover_panel.styles';
 import { popoverArrowSize } from '../popover/popover_arrow/_popover_arrow.styles';
 
-const backgroundColor = (color: string, colorMode: EuiThemeColorModeStandard) =>
-  colorMode === COLOR_MODES_STANDARD.dark
-    ? shade(color, 0.45)
-    : tint(color, 0.5);
+import { _tourFooterBgColor } from './_tour_footer.styles';
 
-export const euiTourStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
+export const euiTourStyles = (euiThemeContext: UseEuiTheme) => ({
   // Targets EuiPopoverPanel
   euiTour: css`
     [data-popover-arrow='top']::before {
-      ${logicalCSS(
-        'border-top-color',
-        backgroundColor(euiTheme.colors.lightestShade, colorMode)
-      )}
+      ${logicalCSS('border-top-color', _tourFooterBgColor(euiThemeContext))}
     }
   `,
 });
@@ -74,33 +62,3 @@ export const euiTourBeaconStyles = ({ euiTheme }: UseEuiTheme) => {
     `,
   };
 };
-
-export const euiTourHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({
-  // Base
-  euiTourHeader: css`
-    ${logicalCSS('border-bottom', 'none')}
-    /* Overriding default EuiPopoverTitle styles */
-    ${logicalCSS('margin-bottom', euiTheme.size.s)}
-  `,
-  // Elements
-  euiTourHeader__title: css`
-    /* Removes extra margin applied to sibling EuiTitle's */
-    ${logicalCSS('margin-top', 0)}
-  `,
-  euiTourHeader__subtitle: css`
-    color: ${euiTheme.colors.subduedText};
-    padding-block-end: ${euiTheme.size.xs};
-  `,
-});
-
-export const euiTourFooterStyles = ({ euiTheme, colorMode }: UseEuiTheme) => ({
-  // Base
-  euiTourFooter: css`
-    background-color: ${backgroundColor(
-      euiTheme.colors.lightestShade,
-      colorMode
-    )};
-    ${logicalCSS('border-bottom-left-radius', euiTheme.border.radius.medium)}
-    ${logicalCSS('border-bottom-right-radius', euiTheme.border.radius.medium)}
-  `,
-});