Add progress bar to ds

src/blocks/index.ts

@@ -7,6 +7,7 @@ export { Link, type LinkProps } from './link';
 export { Lozenge, type LozengeProps } from './lozenge';
 export { Menu, type MenuProps, MenuItem, type MenuItemComponentProps } from './menu';
 export { Modal, type ModalProps, modal } from './modal';
+export { ProgressBar, type ProgressBarProps } from './progressBar';
 export { Separator, type SeparatorProps } from './separator';
 export { Skeleton, type SkeletonProps } from './skeleton';
 export { Tabs, type TabsProps, type TabItem } from './tabs';

src/blocks/progressBar/ProgressBar.tsx

@@ -0,0 +1,41 @@
+import type { FC } from 'react';
+import styled from 'styled-components';
+
+import type { ProgressBarProps } from './ProgressBar.types';
+import { getProgressWidthPercentage } from './ProgressBar.utils';
+
+const StyledProgressBarContainer = styled.div<Omit<ProgressBarProps, 'progress' | 'max'>>`
+  /* Default CSS */
+  background-color: var(--components-progress-bar-background-default);
+  width: 100%;
+  height: 4px;
+  border-radius: var(--radius-xxs, 8px);
+
+  /* Extra CSS prop */
+  ${({ css }) => css || ''}
+`;
+
+const StyledProgressBar = styled.div<ProgressBarProps>`
+  /* Default CSS */
+  border-radius: var(--radius-xxs, 8px);
+  background-color: var(--components-progress-bar-background-progress);
+  height: 100%;
+  width: ${({ progress, max }) => `${getProgressWidthPercentage(progress, max)}%`};
+  transition: width 0.3s ease;
+`;
+
+const ProgressBar: FC<ProgressBarProps> = ({ progress, max = 100, ...rest }) => (
+  <StyledProgressBarContainer
+    role="progressbar"
+    aria-valuemin={0}
+    aria-valuemax={max}
+    aria-valuenow={progress}
+    {...rest}
+  >
+    <StyledProgressBar {...{ progress, max }} />
+  </StyledProgressBarContainer>
+);
+
+ProgressBar.displayName = 'ProgressBar';
+
+export { ProgressBar };

src/blocks/progressBar/ProgressBar.types.ts

@@ -0,0 +1,11 @@
+import { TransformedHTMLAttributes } from 'blocks/Blocks.types';
+import { FlattenSimpleInterpolation } from 'styled-components';
+
+export type ProgressBarProps = {
+  /* Additional prop from styled components to apply custom css to ProgressBar */
+  css?: FlattenSimpleInterpolation;
+  /* Progress value */
+  progress: number;
+  /* Max value */
+  max?: number;
+} & TransformedHTMLAttributes<HTMLDivElement>;

src/blocks/progressBar/ProgressBar.utils.ts

@@ -0,0 +1,4 @@
+export const getProgressWidthPercentage = (progress: number, total = 100) => {
+  const percentage = (progress / total) * 100;
+  return Math.min(Math.max(percentage, 0), 100);
+};

src/blocks/progressBar/index.ts

@@ -0,0 +1,3 @@
+export * from './ProgressBar';
+export * from './ProgressBar.utils';
+export * from './ProgressBar.types';

src/blocks/theme/colors/colors.semantics.ts

@@ -12,6 +12,7 @@ import { dropdownSemantics } from '../semantics/semantics.dropdown';
 import { iconSemantics } from '../semantics/semantics.icon';
 import { inputSemantics } from '../semantics/semantics.input';
 import { modalSemantics } from '../semantics/semantics.modal';
+import { progressBarSemantics } from '../semantics/semantics.progress-bar';
 import { radioSemantics } from '../semantics/semantics.radio';
 import { skeletonSemantics } from '../semantics/semantics.skeleton';
 import { strokeSemantics } from '../semantics/semantics.stroke';
@@ -37,6 +38,7 @@ type SemanticKeys = {
   icon: 'icon';
   input: 'components-inputs';
   modal: 'components-modal';
+  progressBar: 'components-progress-bar';
   radio: 'components-radio-button';
   surface: 'surface';
   stroke: 'stroke';
@@ -62,6 +64,7 @@ export const semanticKeys: SemanticKeys = {
   icon: 'icon',
   input: 'components-inputs',
   modal: 'components-modal',
+  progressBar: 'components-progress-bar',
   radio: 'components-radio-button',
   surface: 'surface',
   stroke: 'stroke',
@@ -87,6 +90,7 @@ export const colorSemantics = {
   [semanticKeys.icon]: iconSemantics,
   [semanticKeys.input]: inputSemantics,
   [semanticKeys.modal]: modalSemantics,
+  [semanticKeys.progressBar]: progressBarSemantics,
   [semanticKeys.radio]: radioSemantics,
   [semanticKeys.surface]: surfaceSemantics,
   [semanticKeys.stroke]: strokeSemantics,

src/blocks/theme/semantics/semantics.progress-bar.ts

@@ -0,0 +1,6 @@
+import { colorBrands } from '../colors/colors.brands';
+
+export const progressBarSemantics = {
+  'background-default': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-800'] },
+  'background-progress': { light: colorBrands['primary-600'], dark: colorBrands['primary-500'] },
+};