add Button example

Author: gioboa

apps/qwik-demo-app/src/routes/Button/ButtonAsLink/index.tsx

@@ -0,0 +1,12 @@
+import { component$ } from '@builder.io/qwik';
+import { SfButton } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
+      <SfButton as="a" href="/">
+        Link
+      </SfButton>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Button/ButtonBlock/index.tsx

@@ -0,0 +1,10 @@
+import { component$ } from '@builder.io/qwik';
+import { SfButton } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <SfButton type="button" class="w-full">
+      Hello
+    </SfButton>
+  );
+});

apps/qwik-demo-app/src/routes/Button/ButtonContent/index.tsx

@@ -0,0 +1,31 @@
+import { component$ } from '@builder.io/qwik';
+import {
+  SfButton,
+  SfIconHome,
+  SfIconShoppingCart,
+  SfIconStar,
+} from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col items-center space-y-4 xs:flex-row xs:space-y-0 xs:space-x-4">
+      <SfButton>
+        <div q:slot="prefix">
+          <SfIconHome />
+        </div>
+        Home
+      </SfButton>
+
+      <SfButton>
+        <div q:slot="suffix">
+          <SfIconStar />
+        </div>
+        Hello
+      </SfButton>
+
+      <SfButton type="button" square aria-label="Add to cart">
+        <SfIconShoppingCart />
+      </SfButton>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Button/ButtonSizes/index.tsx

@@ -0,0 +1,20 @@
+import { component$ } from '@builder.io/qwik';
+import { SfButton } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
+      <SfButton type="button" size="sm">
+        Hello
+      </SfButton>
+
+      <SfButton type="button" size="base">
+        Hello
+      </SfButton>
+
+      <SfButton type="button" size="lg">
+        Hello
+      </SfButton>
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Button/ButtonTruncation/index.tsx

@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+import { SfButton } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <SfButton>
+      <span class="truncate max-w-[200px]">
+        {' '}
+        Too long description for button{' '}
+      </span>
+    </SfButton>
+  );
+});

apps/qwik-demo-app/src/routes/Button/ButtonVariants/index.tsx

@@ -0,0 +1,20 @@
+import { component$ } from '@builder.io/qwik';
+import { SfButton } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col items-center space-y-4 xs:block xs:space-x-4">
+      <SfButton type="button" variant="primary">
+        Hello
+      </SfButton>
+
+      <SfButton type="button" variant="secondary">
+        Hello
+      </SfButton>
+
+      <SfButton type="button" variant="tertiary">
+        Hello
+      </SfButton>
+    </div>
+  );
+});