diff --git a/e2e/page_objects/common.ts b/e2e/page_objects/common.ts index b2b109d6ed..0ae0453bf5 100644 --- a/e2e/page_objects/common.ts +++ b/e2e/page_objects/common.ts @@ -49,6 +49,23 @@ interface KeyboardKey { count: number; } +interface ClickOptions { + /** + * Defaults to `left`. + */ + button?: 'left' | 'right' | 'middle'; + + /** + * defaults to 1. See [UIEvent.detail]. + */ + clickCount?: number; + + /** + * Time to wait between `mousedown` and `mouseup` in milliseconds. Defaults to 0. + */ + delay?: number; +} + type KeyboardKeys = Array; /** @@ -278,10 +295,16 @@ export class CommonPage { * @param selector */ clickMouseRelativeToDOMElement = - (page: Page) => async (mousePosition: MousePosition, selector: string, button?: 'left' | 'right' | 'middle') => { + (page: Page) => async (mousePosition: MousePosition, selector: string, options?: ClickOptions) => { const element = await this.getBoundingClientRect(page)(selector); const { x, y } = getCursorPosition(mousePosition, element); - await page.mouse.click(x, y, { button }); + + if (options?.delay) { + // need to skip await to resolve early and capture delay + void page.mouse.click(x, y, options); + } else { + await page.mouse.click(x, y, options); + } }; /** @@ -445,12 +468,12 @@ export class CommonPage { async ( url: string, mousePosition: MousePosition, - button?: 'left' | 'right' | 'middle', + clickOptions?: ClickOptions, options?: ScreenshotElementAtUrlOptions, ) => { const action = async () => { await options?.action?.(); - await this.clickMouseRelativeToDOMElement(page)(mousePosition, this.chartSelector, button); + await this.clickMouseRelativeToDOMElement(page)(mousePosition, this.chartSelector, clickOptions); }; await this.expectChartAtUrlToMatchScreenshot(page)(url, { ...options, diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png new file mode 100644 index 0000000000..0eae985246 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png new file mode 100644 index 0000000000..4584513407 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png new file mode 100644 index 0000000000..5b2f8d7e8a Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png new file mode 100644 index 0000000000..b0ce63d92f Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png new file mode 100644 index 0000000000..439ba257ec Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png new file mode 100644 index 0000000000..faeaa42659 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png new file mode 100644 index 0000000000..cc28ee67c1 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png new file mode 100644 index 0000000000..4e35d0f76b Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png new file mode 100644 index 0000000000..a911edb853 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png new file mode 100644 index 0000000000..4708c360bd Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png new file mode 100644 index 0000000000..6f2614840d Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png new file mode 100644 index 0000000000..c761a5f045 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png new file mode 100644 index 0000000000..2c412c970c Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png new file mode 100644 index 0000000000..fd2426392e Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png new file mode 100644 index 0000000000..6dfceabe26 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png new file mode 100644 index 0000000000..9cf4be7c30 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png new file mode 100644 index 0000000000..487c250291 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png differ diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png new file mode 100644 index 0000000000..05ef93db39 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png differ diff --git a/e2e/tests/metric_stories.test.ts b/e2e/tests/metric_stories.test.ts index 613207799b..f2c97f3de0 100644 --- a/e2e/tests/metric_stories.test.ts +++ b/e2e/tests/metric_stories.test.ts @@ -51,13 +51,26 @@ test.describe('Metric', () => { pwEach.describe(['trend', 'bar', 'none'])( (v) => `Metric - ${v} type`, (type) => { - eachTheme.test( - async ({ page, urlParam }) => { - await common.expectChartAtUrlToMatchScreenshot(page)( - `http://localhost:9001/?path=/story/metric-alpha--basic&${urlParam}&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-color=rgba(157, 66, 66, 0.44)&knob-extra=last 5m&knob-is numeric metric=true&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-subtitle=Cluster CPU usage&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-value=55.23&knob-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`, - ); + eachTheme.describe( + ({ urlParam }) => { + const metricUrl = `http://localhost:9001/?path=/story/metric-alpha--basic&${urlParam}&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-color=rgba(157, 66, 66, 0.44)&knob-extra=last 5m&knob-is numeric metric=true&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-subtitle=Cluster CPU usage&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend data points=30&knob-trend shape=area&knob-value=55.23&knob-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`; + test('should render metric with transparent bg color', async ({ page }) => { + await common.expectChartAtUrlToMatchScreenshot(page)(metricUrl); + }); + + test('should render metric with hover interaction', async ({ page }) => { + await common.expectChartWithMouseAtUrlToMatchScreenshot(page)(metricUrl, { top: 100, left: 100 }); + }); + + test('should render metric with click interaction', async ({ page }) => { + await common.expectChartWithClickAtUrlToMatchScreenshot(page)( + metricUrl, + { top: 100, left: 100 }, + { delay: 400 }, // 10ms delay to capture click and hold + ); + }); }, - (t) => `should render metric with transparent bg color - ${t} theme`, + (t) => `${t} theme`, ); }, ); diff --git a/e2e/tests/tooltip.test.ts b/e2e/tests/tooltip.test.ts index ebcb044192..a18ae95b72 100644 --- a/e2e/tests/tooltip.test.ts +++ b/e2e/tests/tooltip.test.ts @@ -17,7 +17,7 @@ test.describe('Tooltip', () => { await common.expectChartWithClickAtUrlToMatchScreenshot(page)( 'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true', { left: 240, bottom: 260 }, - 'right', + { button: 'right' }, ); }); @@ -25,7 +25,7 @@ test.describe('Tooltip', () => { await common.expectChartWithClickAtUrlToMatchScreenshot(page)( 'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0', { left: 220, bottom: 285 }, - 'right', + { button: 'right' }, ); }); @@ -33,7 +33,7 @@ test.describe('Tooltip', () => { await common.expectChartWithClickAtUrlToMatchScreenshot(page)( 'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=1000', { left: 220, bottom: 285 }, - 'right', + { button: 'right' }, ); }); @@ -42,7 +42,9 @@ test.describe('Tooltip', () => { 'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0', { action: async () => { - await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right'); + await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, { + button: 'right', + }); // table row not visible thus not clickable by playwright const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type'); await items.nth(5).click(); @@ -59,7 +61,9 @@ test.describe('Tooltip', () => { `http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=${delay}`, { action: async () => { - await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right'); + await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, { + button: 'right', + }); // table row not visible thus not clickable by playwright const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type'); await items.nth(2).click(); @@ -75,7 +79,7 @@ test.describe('Tooltip', () => { await common.expectChartWithClickAtUrlToMatchScreenshot(page)( 'http://localhost:9001/?path=/story/components-tooltip--partition-charts&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true', { left: 245, bottom: 185 }, - 'right', + { button: 'right' }, ); }); }); @@ -85,7 +89,7 @@ test.describe('Tooltip', () => { await common.expectChartWithClickAtUrlToMatchScreenshot(page)( 'http://localhost:9001/?path=/story/components-tooltip--heatmap-chart&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true', { left: 300, bottom: 180 }, - 'right', + { button: 'right' }, ); }); }); @@ -95,7 +99,7 @@ test.describe('Tooltip', () => { await common.expectChartWithClickAtUrlToMatchScreenshot(page)( 'http://localhost:9001/?path=/story/components-tooltip--flamegraph&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true', { left: 220, bottom: 220 }, - 'right', + { button: 'right' }, ); }); test('show prompt with actions ', async ({ page }) => { diff --git a/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx b/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx index e69f0249b8..b3dfaae861 100644 --- a/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx +++ b/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx @@ -12,8 +12,8 @@ import React, { CSSProperties, useState } from 'react'; import { ProgressBar } from './progress'; import { SparkLine, getSparkLineColor } from './sparkline'; import { MetricText } from './text'; -import { ColorContrastOptions } from '../../../../common/color_calcs'; -import { changeColorLightness } from '../../../../common/color_library_wrappers'; +import { ColorContrastOptions, combineColors } from '../../../../common/color_calcs'; +import { RGBATupleToString, changeColorLightness, colorToRgba } from '../../../../common/color_library_wrappers'; import { Color } from '../../../../common/colors'; import { DEFAULT_CSS_CURSOR } from '../../../../common/constants'; import { fillTextColor } from '../../../../common/fill_text_color'; @@ -79,7 +79,9 @@ export const Metric: React.FunctionComponent<{ }); const lightnessAmount = mouseState === 'leave' ? 0 : mouseState === 'enter' ? 0.05 : 0.1; - const interactionColor = changeColorLightness(datum.color, lightnessAmount, 0.8); + + const interactionColor = changeColorLightness(hasProgressBar ? backgroundColor : datum.color, lightnessAmount, 0.8); + const blendedBarColor = RGBATupleToString(combineColors(colorToRgba(datum.color), colorToRgba(backgroundColor))); const datumWithInteractionColor: MetricDatum = { ...datum, @@ -89,10 +91,7 @@ export const Metric: React.FunctionComponent<{ const event: MetricElementEvent = { type: 'metricElementEvent', rowIndex, columnIndex }; const containerStyle: CSSProperties = { - backgroundColor: - !isMetricWTrend(datumWithInteractionColor) && !isMetricWProgress(datumWithInteractionColor) - ? datumWithInteractionColor.color - : undefined, + backgroundColor: isMetricWTrend(datumWithInteractionColor) ? backgroundColor : datumWithInteractionColor.color, cursor: onElementClick ? 'pointer' : DEFAULT_CSS_CURSOR, borderColor: style.border, }; @@ -167,7 +166,11 @@ export const Metric: React.FunctionComponent<{ /> {isMetricWTrend(datumWithInteractionColor) && } {isMetricWProgress(datumWithInteractionColor) && ( - + )}
diff --git a/packages/charts/src/chart_types/metric/renderer/dom/progress.tsx b/packages/charts/src/chart_types/metric/renderer/dom/progress.tsx index e61b8258ef..557f793754 100644 --- a/packages/charts/src/chart_types/metric/renderer/dom/progress.tsx +++ b/packages/charts/src/chart_types/metric/renderer/dom/progress.tsx @@ -17,7 +17,8 @@ import { MetricWProgress } from '../../specs'; export const ProgressBar: React.FunctionComponent<{ datum: MetricWProgress; barBackground: Color; -}> = ({ datum: { title, domainMax, value, color, progressBarDirection }, barBackground }) => { + blendedBarColor: Color; +}> = ({ datum: { title, domainMax, value, progressBarDirection }, barBackground, blendedBarColor }) => { const verticalDirection = progressBarDirection === LayoutDirection.Vertical; // currently we provide only the small progress bar; const isSmall = true; @@ -38,7 +39,7 @@ export const ProgressBar: React.FunctionComponent<{