feat(ProgressBar): add to @carbon/styles (#9148)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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 = () => (
+  <ProgressBar
+    label="Progress bar label"
+    helperText="Optional helper text"
+    value={75}
+  />
+);
+
+export const Indeterminate = () => (
+  <ProgressBar label="Progress bar label" helperText="Optional helper text" />
+);
+
+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 (
+    <ProgressBar
+      value={running ? progress : null}
+      max={size}
+      label="Export data"
+      helperText={helperText}
+    />
+  );
+};

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';

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);
+  });
+});

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';

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;

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%;
+    }
+  }
+}