add ProgressLinear example

Author: gioboa

apps/qwik-demo-app/src/routes/ProgressLinear/ProgressLinearColors/index.tsx

@@ -0,0 +1,12 @@
+import { component$ } from '@builder.io/qwik';
+import { SfProgressLinear } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex gap-4 flex-wrap">
+      <SfProgressLinear class="w-12 !text-cyan-700" value={60} size="lg" />
+      <SfProgressLinear class="w-12" size="lg" value={60} />
+      <SfProgressLinear class="w-12 !bg-yellow-200" value={60} size="lg" />
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/ProgressLinear/ProgressLinearLabel/index.tsx

@@ -0,0 +1,21 @@
+import { component$ } from '@builder.io/qwik';
+import { SfProgressLinear } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  const value = 70;
+
+  return (
+    <div class="flex flex-col gap-4">
+      <SfProgressLinear
+        size="lg"
+        value={value}
+        class="w-12"
+        aria-label={`${value}%`}
+      />
+      <label class="inline-flex items-center gap-2">
+        <SfProgressLinear class="w-12" size="lg" value={value} />
+        <span class="font-medium text-lg">{value}%</span>
+      </label>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/ProgressLinear/ProgressLinearSizes/index.tsx

@@ -0,0 +1,18 @@
+import { component$ } from '@builder.io/qwik';
+import { SfProgressLinear } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col gap-4 flex-wrap sm:flex-row">
+      <SfProgressLinear value={30} class="w-12" size="xs" />
+      <SfProgressLinear value={30} class="w-12" size="sm" />
+      <SfProgressLinear value={30} class="w-12" size="base" />
+      <SfProgressLinear value={30} class="w-12" />
+      <SfProgressLinear value={30} class="w-12" size="lg" />
+      <SfProgressLinear value={30} class="w-12" size="xl" />
+      <SfProgressLinear value={30} class="w-12" size="2xl" />
+      <SfProgressLinear value={30} class="w-12" size="3xl" />
+      <SfProgressLinear value={30} class="w-12" size="4xl" />
+    </div>
+  );
+});