diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js index 8f8225825c..d1accaba9d 100644 --- a/build-tools/utils/custom-css-properties.js +++ b/build-tools/utils/custom-css-properties.js @@ -116,5 +116,10 @@ const customCssPropertiesList = [ 'alertFocusRingBorderWidth', 'alertFocusRingBoxShadow', 'alertIconColor', + // Progress bar style properties + 'progressBarBackgroundColor', + 'progressBarBorderRadius', + 'progressBarHeight', + 'progressValueBackgroundColor', ]; module.exports = customCssPropertiesList; diff --git a/pages/progress-bar/style-permutations.page.tsx b/pages/progress-bar/style-permutations.page.tsx new file mode 100644 index 0000000000..f998e8d9e5 --- /dev/null +++ b/pages/progress-bar/style-permutations.page.tsx @@ -0,0 +1,104 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 +import React from 'react'; + +import ProgressBar, { ProgressBarProps } from '~components/progress-bar'; + +import createPermutations from '../utils/permutations'; +import PermutationsView from '../utils/permutations-view'; +import ScreenshotArea from '../utils/screenshot-area'; + +const permutations = createPermutations([ + { + value: [45, 75, 99, 100], + status: ['in-progress'], + style: [ + { + progressBar: { + backgroundColor: '#ccfbf1', + borderRadius: '8px', + height: '8px', + }, + progressValue: { + backgroundColor: '#14b8a6', + }, + progressPercentage: { + color: 'light-dark(#0d5c54, #5eead4)', + fontSize: '14px', + fontWeight: '600', + }, + }, + { + progressBar: { + backgroundColor: '#fee2e2', + borderRadius: '4px', + height: '10px', + }, + progressValue: { + backgroundColor: '#ef4444', + }, + progressPercentage: { + color: 'light-dark(#7f1d1d, #fca5a5)', + fontSize: '14px', + fontWeight: '600', + }, + }, + { + progressBar: { + backgroundColor: '#fef3c7', + borderRadius: '16px', + height: '10px', + }, + progressValue: { + backgroundColor: '#f59e0b', + }, + progressPercentage: { + color: 'light-dark(#78350f, #fcd34d)', + fontSize: '16px', + fontWeight: '700', + }, + }, + { + progressBar: { + backgroundColor: '#dbeafe', + borderRadius: '4px', + height: '6px', + }, + progressValue: { + backgroundColor: '#3b82f6', + }, + progressPercentage: { + color: 'light-dark(#1e40af, #93c5fd)', + fontSize: '12px', + fontWeight: '500', + }, + }, + { + progressBar: { + backgroundColor: '#f3e8ff', + borderRadius: '0px', + height: '12px', + }, + progressValue: { + backgroundColor: '#a855f7', + }, + progressPercentage: { + color: 'light-dark(#6b21a8, #d8b4fe)', + fontSize: '16px', + fontWeight: '700', + }, + }, + ], + }, +]); + +export default function ProgressBarStylePermutations() { + return ( + <> +

Progress Bar Style permutations

+ + } /> + + + ); +} diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap index 21703d8df3..a9f0010e0a 100644 --- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap +++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap @@ -18381,6 +18381,88 @@ Add a button using the \`action\` property of the flashbar item instead.", "optional": true, "type": "string", }, + { + "inlineType": { + "name": "ProgressBarProps.Style", + "properties": [ + { + "inlineType": { + "name": "object", + "properties": [ + { + "name": "backgroundColor", + "optional": true, + "type": "string", + }, + { + "name": "borderRadius", + "optional": true, + "type": "string", + }, + { + "name": "height", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "progressBar", + "optional": true, + "type": "{ backgroundColor?: string | undefined; borderRadius?: string | undefined; height?: string | undefined; }", + }, + { + "inlineType": { + "name": "{ color?: string | undefined; fontSize?: string | undefined; fontWeight?: string | undefined; }", + "properties": [ + { + "name": "color", + "optional": true, + "type": "string", + }, + { + "name": "fontSize", + "optional": true, + "type": "string", + }, + { + "name": "fontWeight", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "progressPercentage", + "optional": true, + "type": "{ color?: string | undefined; fontSize?: string | undefined; fontWeight?: string | undefined; }", + }, + { + "inlineType": { + "name": "{ backgroundColor?: string | undefined; }", + "properties": [ + { + "name": "backgroundColor", + "optional": true, + "type": "string", + }, + ], + "type": "object", + }, + "name": "progressValue", + "optional": true, + "type": "{ backgroundColor?: string | undefined; }", + }, + ], + "type": "object", + }, + "name": "style", + "optional": true, + "systemTags": [ + "core", + ], + "type": "ProgressBarProps.Style", + }, { "defaultValue": "0", "description": "Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.", diff --git a/src/progress-bar/__tests__/styles.test.tsx b/src/progress-bar/__tests__/styles.test.tsx new file mode 100644 index 0000000000..fb2c32f77c --- /dev/null +++ b/src/progress-bar/__tests__/styles.test.tsx @@ -0,0 +1,138 @@ +// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. +// SPDX-License-Identifier: Apache-2.0 + +import customCssProps from '../../internal/generated/custom-css-properties'; +import { getProgressPercentageStyles, getProgressStyles, getProgressValueStyles } from '../styles'; + +// Mock the environment module +jest.mock('../../internal/environment', () => ({ + SYSTEM: 'core', +})); + +describe('getProgressStyles', () => { + afterEach(() => { + jest.resetModules(); + }); + + test('returns undefined when no style is provided', () => { + expect(getProgressStyles(undefined)).toBeUndefined(); + expect(getProgressStyles({})).toBeUndefined(); + }); + + test('returns progress bar styles when provided', () => { + const style = { + progressBar: { + backgroundColor: '#e0e0e0', + borderRadius: '8px', + height: '8px', + }, + }; + + expect(getProgressStyles(style)).toEqual({ + [customCssProps.progressBarBackgroundColor]: '#e0e0e0', + [customCssProps.progressBarBorderRadius]: '8px', + [customCssProps.progressBarHeight]: '8px', + }); + }); + + test('returns undefined when SYSTEM is not core', async () => { + jest.resetModules(); + jest.doMock('../../internal/environment', () => ({ + SYSTEM: 'visual-refresh', + })); + + const { getProgressStyles: getProgressStylesNonCore } = await import('../styles'); + + const style = { + progressBar: { + backgroundColor: '#e0e0e0', + }, + }; + + expect(getProgressStylesNonCore(style)).toBeUndefined(); + }); +}); + +describe('getProgressValueStyles', () => { + afterEach(() => { + jest.resetModules(); + }); + + test('returns undefined when no style is provided', () => { + expect(getProgressValueStyles(undefined)).toBeUndefined(); + expect(getProgressValueStyles({})).toBeUndefined(); + }); + + test('returns progress value styles when provided', () => { + const style = { + progressValue: { + backgroundColor: '#0073bb', + }, + }; + + expect(getProgressValueStyles(style)).toEqual({ + [customCssProps.progressValueBackgroundColor]: '#0073bb', + }); + }); + + test('returns undefined when SYSTEM is not core', async () => { + jest.resetModules(); + jest.doMock('../../internal/environment', () => ({ + SYSTEM: 'visual-refresh', + })); + + const { getProgressValueStyles: getProgressValueStylesNonCore } = await import('../styles'); + + const style = { + progressValue: { + backgroundColor: '#0073bb', + }, + }; + + expect(getProgressValueStylesNonCore(style)).toBeUndefined(); + }); +}); + +describe('getProgressPercentageStyles', () => { + afterEach(() => { + jest.resetModules(); + }); + + test('returns undefined when no style is provided', () => { + expect(getProgressPercentageStyles(undefined)).toBeUndefined(); + expect(getProgressPercentageStyles({})).toBeUndefined(); + }); + + test('returns progress percentage styles when provided', () => { + const style = { + progressPercentage: { + color: '#0073bb', + fontSize: '14px', + fontWeight: '600', + }, + }; + + expect(getProgressPercentageStyles(style)).toEqual({ + color: '#0073bb', + fontSize: '14px', + fontWeight: '600', + }); + }); + + test('returns undefined when SYSTEM is not core', async () => { + jest.resetModules(); + jest.doMock('../../internal/environment', () => ({ + SYSTEM: 'visual-refresh', + })); + + const { getProgressPercentageStyles: getProgressPercentageStylesNonCore } = await import('../styles'); + + const style = { + progressPercentage: { + color: '#0073bb', + }, + }; + + expect(getProgressPercentageStylesNonCore(style)).toBeUndefined(); + }); +}); diff --git a/src/progress-bar/index.tsx b/src/progress-bar/index.tsx index 19378a47ef..0d5228371a 100644 --- a/src/progress-bar/index.tsx +++ b/src/progress-bar/index.tsx @@ -35,6 +35,7 @@ export default function ProgressBar({ additionalInfo, resultText, onResultButtonClick, + style, ...rest }: ProgressBarProps) { const { __internalRootRef } = useBaseComponent('ProgressBar', { @@ -96,6 +97,7 @@ export default function ProgressBar({ ariaDescribedby )} isInFlash={isInFlash} + style={style} />