Add animated prop to ProgressBar (#4061)

* adds animated prop to ProgressBar

* updates component docs

* adds changeset

.changeset/serious-drinks-work.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Adds a new prop, `animated`, to the ProgressBar component. This allows the "filled" segment(s) to animate and indicate some process is still in progress.
+
+<!-- Changed components: ProgressBar -->

src/ProgressBar/ProgressBar.docs.json

@@ -5,6 +5,11 @@
   "a11yReviewed": false,
   "stories": [],
   "props": [
+    {
+      "name": "animated",
+      "type": "boolean",
+      "description": "Whether the filled in area(s) of the progress bar will be animated or not"
+    },
     {
       "name": "progress",
       "type": "number",

src/ProgressBar/ProgressBar.features.stories.tsx

@@ -25,3 +25,5 @@ export const MultipleItems = () => (
     <ProgressBar.Item progress={14} sx={{backgroundColor: 'severe.emphasis'}} />
   </ProgressBar>
 )
+
+export const Animated = () => <ProgressBar progress="50" aria-label="Upload test.png" animated />

src/ProgressBar/ProgressBar.tsx

@@ -1,15 +1,31 @@
 import React, {forwardRef} from 'react'
-import styled from 'styled-components'
+import styled, {keyframes} from 'styled-components'
 import {width, WidthProps} from 'styled-system'
 import {get} from '../constants'
 import sx, {SxProp} from '../sx'
 import {warning} from '../utils/warning'
 
 type ProgressProp = {progress?: string | number}
 
+const shimmer = keyframes`
+  from { mask-position: 200%; }
+  to { mask-position: 0%; }
+`
+
 export const Item = styled.span<ProgressProp & SxProp>`
   width: ${props => (props.progress ? `${props.progress}%` : 0)};
   background-color: ${get('colors.success.emphasis')};
+
+  @media (prefers-reduced-motion: no-preference) {
+    &[data-animated='true'] {
+      mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+      mask-size: 200%;
+      animation: ${shimmer};
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+    }
+  }
+
   ${sx};
 `
 
@@ -24,6 +40,7 @@ const sizeMap = {
 type StyledProgressContainerProps = {
   inline?: boolean
   barSize?: keyof typeof sizeMap
+  animated?: boolean
 } & WidthProps &
   SxProp
 
@@ -42,7 +59,10 @@ export type ProgressBarProps = React.HTMLAttributes<HTMLSpanElement> & {bg?: str
   ProgressProp
 
 export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
-  ({progress, bg = 'success.emphasis', barSize = 'default', children, ...rest}: ProgressBarProps, forwardRef) => {
+  (
+    {animated, progress, bg = 'success.emphasis', barSize = 'default', children, ...rest}: ProgressBarProps,
+    forwardRef,
+  ) => {
     if (children && progress) {
       throw new Error('You should pass `progress` or children, not both.')
     }
@@ -65,7 +85,7 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
 
     return (
       <ProgressContainer ref={forwardRef} role="progressbar" barSize={barSize} {...ariaAttributes} {...rest}>
-        {children ?? <Item progress={progress} sx={{backgroundColor: bg}} />}
+        {children ?? <Item data-animated={animated} progress={progress} sx={{backgroundColor: bg}} />}
       </ProgressContainer>
     )
   },

src/__tests__/__snapshots__/ProgressBar.test.tsx.snap

@@ -18,6 +18,21 @@ exports[`ProgressBar renders consistently 1`] = `
   height: 8px;
 }
 
+@media (prefers-reduced-motion:no-preference) {
+  .c1[data-animated='true'] {
+    -webkit-mask-image: linear-gradient(75deg,#000 30%,rgba(0,0,0,0.65) 80%);
+    mask-image: linear-gradient(75deg,#000 30%,rgba(0,0,0,0.65) 80%);
+    -webkit-mask-size: 200%;
+    mask-size: 200%;
+    -webkit-animation: jiNfbM;
+    animation: jiNfbM;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+  }
+}
+
 <span
   aria-busy={false}
   aria-valuemax={100}
@@ -49,6 +64,21 @@ exports[`ProgressBar respects the "progress" prop 1`] = `
   height: 8px;
 }
 
+@media (prefers-reduced-motion:no-preference) {
+  .c1[data-animated='true'] {
+    -webkit-mask-image: linear-gradient(75deg,#000 30%,rgba(0,0,0,0.65) 80%);
+    mask-image: linear-gradient(75deg,#000 30%,rgba(0,0,0,0.65) 80%);
+    -webkit-mask-size: 200%;
+    mask-size: 200%;
+    -webkit-animation: jiNfbM;
+    animation: jiNfbM;
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+  }
+}
+
 <span
   aria-busy={true}
   aria-label="Upload test.png"