add SfProgressLinear

Author: gioboa

packages/storefront-ui/src/components/SfProgressLinear/SfProgressLinear.tsx

@@ -0,0 +1,38 @@
+import { component$ } from '@builder.io/qwik';
+import { SfProgressSize } from '../../shared/SfProgress';
+import { SfProgressLinearProps, SfProgressLinearSize } from './types';
+
+const sizeClasses = {
+  [SfProgressLinearSize.minimal]: 'h-1',
+  [SfProgressSize.xs]: 'h-4',
+  [SfProgressSize.sm]: 'h-5',
+  [SfProgressSize.base]: 'h-6',
+  [SfProgressSize.lg]: 'h-7',
+  [SfProgressSize.xl]: 'h-10',
+  [SfProgressSize['2xl']]: 'h-14',
+  [SfProgressSize['3xl']]: 'h-24',
+  [SfProgressSize['4xl']]: 'h-48',
+};
+
+export const SfProgressLinear = component$<SfProgressLinearProps>(
+  ({
+    value = 0,
+    size = SfProgressSize.base,
+    ariaLabel = 'Progress element',
+    class: _class,
+    ...attributes
+  }) => {
+    return (
+      <progress
+        data-testid="progress-linear"
+        max="100"
+        class={`bg-neutral-300 text-primary-700 [&::-webkit-progress-bar]:bg-inherit [&::-webkit-progress-value]:bg-current [&::-webkit-progress-value]:transition-[width] [&::-webkit-progress-value]:ease-in-out [&::-webkit-progress-value]:duration-200 [&::-moz-progress-bar]:bg-current
+          ${sizeClasses[size]}
+          ${_class}`}
+        aria-label={ariaLabel}
+        value={value}
+        {...attributes}
+      />
+    );
+  }
+);

packages/storefront-ui/src/components/SfProgressLinear/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export {  SfProgressLinear } from './SfProgressLinear';

packages/storefront-ui/src/components/SfProgressLinear/types.ts

@@ -0,0 +1,11 @@
+import { SfProgressSize } from '../../shared/SfProgress';
+
+export enum SfProgressLinearSize {
+  'minimal' = 'minimal',
+}
+export type SfProgressLinearProps = {
+  class?: string;
+  value?: number;
+  size?: `${SfProgressLinearSize | SfProgressSize}`;
+  ariaLabel?: string;
+};