diff --git a/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js b/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js new file mode 100644 index 000000000000..2afc1805db69 --- /dev/null +++ b/packages/carbon-react/src/components/ProgressBar/ProgressBar.stories.js @@ -0,0 +1,69 @@ +/** + * Copyright IBM Corp. 2021 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, { useState, useEffect } from 'react'; + +import { unstable_ProgressBar as ProgressBar } from 'carbon-components-react'; + +export default { + title: 'Experimental/unstable_ProgressBar', + + parameters: { + component: ProgressBar, + }, +}; + +export const _ProgressBar = () => ( + +); + +export const Indeterminate = () => ( + +); + +export const Example = () => { + const size = 728; + const [progress, setProgress] = useState(0); + + useEffect(() => { + setTimeout(() => { + const interval = setInterval(() => { + setProgress((currentProgress) => { + const advancement = Math.random() * 8; + if (currentProgress + advancement < size) { + return currentProgress + advancement; + } else { + clearInterval(interval); + return size; + } + }); + }, 50); + }, 3000); + }, []); + + const running = progress > 0; + + let helperText = running + ? `${progress.toFixed(1)}MB of ${size}MB` + : 'Fetching assets...'; + if (progress >= size) { + helperText = 'Done'; + } + + return ( + + ); +}; diff --git a/packages/carbon-react/src/components/ProgressBar/index.js b/packages/carbon-react/src/components/ProgressBar/index.js new file mode 100644 index 000000000000..9d7069e6c540 --- /dev/null +++ b/packages/carbon-react/src/components/ProgressBar/index.js @@ -0,0 +1,8 @@ +/** + * Copyright IBM Corp. 2016, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +export { ProgressBar } from 'carbon-components-react'; diff --git a/packages/styles/scss/components/__tests__/progress-bar-test.js b/packages/styles/scss/components/__tests__/progress-bar-test.js new file mode 100644 index 000000000000..1e7b87fd852d --- /dev/null +++ b/packages/styles/scss/components/__tests__/progress-bar-test.js @@ -0,0 +1,26 @@ +/** + * Copyright IBM Corp. 2018, 2018 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + * + * @jest-environment node + */ + +'use strict'; + +const { SassRenderer } = require('@carbon/test-utils/scss'); + +const { render } = SassRenderer.create(__dirname); + +describe('scss/components/progress-bar', () => { + test('Public API', async () => { + const { unwrap } = await render(` + @use 'sass:meta'; + @use '../progress-bar'; + + $_: get('mixin', meta.mixin-exists('progress-bar', 'progress-bar')); + `); + expect(unwrap('mixin')).toBe(true); + }); +}); diff --git a/packages/styles/scss/components/_index.scss b/packages/styles/scss/components/_index.scss index 35a6c7e67454..8740370dbd0c 100644 --- a/packages/styles/scss/components/_index.scss +++ b/packages/styles/scss/components/_index.scss @@ -42,6 +42,7 @@ @use 'pagination'; @use 'pagination-nav'; @use 'select'; +@use 'progress-bar'; @use 'progress-indicator'; @use 'tabs'; @use 'ui-shell'; diff --git a/packages/styles/scss/components/progress-bar/_index.scss b/packages/styles/scss/components/progress-bar/_index.scss new file mode 100644 index 000000000000..e3521031b965 --- /dev/null +++ b/packages/styles/scss/components/progress-bar/_index.scss @@ -0,0 +1,11 @@ +// +// Copyright IBM Corp. 2018, 2018 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@forward 'progress-bar'; +@use 'progress-bar'; + +@include progress-bar.progress-bar; diff --git a/packages/styles/scss/components/progress-bar/_progress-bar.scss b/packages/styles/scss/components/progress-bar/_progress-bar.scss new file mode 100644 index 000000000000..2e11cdbd5e28 --- /dev/null +++ b/packages/styles/scss/components/progress-bar/_progress-bar.scss @@ -0,0 +1,82 @@ +// +// Copyright IBM Corp. 2021 +// +// This source code is licensed under the Apache-2.0 license found in the +// LICENSE file in the root directory of this source tree. +// + +@use '../../config' as *; +@use '../../motion' as *; +@use '../../spacing' as *; +@use '../../theme' as *; +@use '../../type' as *; +@use '../../utilities/convert' as *; + +/// Progress Bar styles +/// @access public +/// @group progress-bar +@mixin progress-bar { + .#{$prefix}--progress-bar__label { + @include type-style('body-short-01'); + + display: block; + margin-bottom: $spacing-03; + color: $text-primary; + } + + .#{$prefix}--progress-bar__track { + position: relative; + width: 100%; + height: rem(8px); + background-color: $layer; + } + + .#{$prefix}--progress-bar__bar { + display: block; + width: 100%; + height: 100%; + background-color: $interactive; + transform: scaleX(0); + transform-origin: 0 50%; + transition: transform $duration-fast-02 motion(standard, productive); + } + + .#{$prefix}--progress-bar--indeterminate + .#{$prefix}--progress-bar__track::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + animation-duration: 1400ms; + animation-iteration-count: infinite; + animation-name: progress-bar-indeterminate; + animation-timing-function: linear; + background-image: linear-gradient( + 90deg, + $interactive 12.5%, + transparent 12.5% + ); + background-position-x: 0%; + background-size: 200% 100%; + content: ''; + } + + .#{$prefix}--progress-bar__helper-text { + @include type-style('helper-text-01'); + + margin-top: $spacing-02; + color: $text-secondary; + } + + @keyframes progress-bar-indeterminate { + 0% { + background-position-x: 25%; + } + + 80%, + 100% { + background-position-x: -105%; + } + } +}