Feat/sf badge: Add SfBadge component

apps/docs/content/_components/badge.md

@@ -111,7 +111,7 @@ The component itself does not provide any specific accessibility features. Pleas
 <<<../../../../packages/sfui/frameworks/react/components/SfBadge/SfBadge.tsx
 
 ::
-::react-only
+::qwik-only
 
 <<<../../../../dist/packages/qwik-storefront-ui/components/SfBadge/index.tsx
 

apps/website/src/routes/examples/SfBadge/index.tsx

@@ -0,0 +1,62 @@
+import { component$, useContext, useTask$ } from '@builder.io/qwik';
+import { SfBadge, SfBadgePlacement, SfBadgeVariant, SfButton, SfIconShoppingCart } from 'qwik-storefront-ui';
+import { ComponentExample } from '../../../components/utils/ComponentExample';
+import { ControlsType } from '../../../components/utils/types';
+import { EXAMPLES_STATE } from '../layout';
+
+export default component$(() => {
+
+    const examplesState = useContext(EXAMPLES_STATE);
+
+    useTask$(() => {
+        examplesState.data = {
+            controls: [
+                {
+                    type: 'text',
+                    modelName: 'content',
+                    description: 'Content to display in the badge.',
+                    propType: 'string | number',
+                },
+                {
+                    type: 'text',
+                    modelName: 'max',
+                    description: 'Maximum number of counter to show.',
+                    propType: 'number',
+                    propDefaultValue: '99',
+                },
+                {
+                    type: 'select',
+                    modelName: 'variant',
+                    description: 'Badge can have content or be a simple dot.',
+                    options: Object.values(SfBadgeVariant),
+                    propType: 'SfBadgeVariant',
+                    propDefaultValue: 'standard',
+                },
+                {
+                    type: 'select',
+                    modelName: 'placement',
+                    description: 'Position of the badge relatively to a container.',
+                    options: Object.values(SfBadgePlacement),
+                    propType: 'SfBadgePlacement',
+                    propDefaultValue: 'top-right',
+                },
+            ] satisfies ControlsType,
+
+            state: {
+                content: '1',
+                max: 99,
+                variant: SfBadgeVariant.standard,
+                placement: SfBadgePlacement['top-right'],
+            }
+        }
+    });
+
+    return (
+        <ComponentExample>
+            <SfButton class="relative" square variant="tertiary">
+                <SfIconShoppingCart />
+                <SfBadge {...examplesState.data.state} max={Number(examplesState.data.state.max)} />
+            </SfButton>
+        </ComponentExample>
+    );
+});

apps/website/src/routes/showcases/Badge/BadgeAvatar/index.tsx

@@ -0,0 +1,20 @@
+import { SfBadge } from 'qwik-storefront-ui';
+
+export default function BadgeAvatar() {
+  return (
+    <ul>
+      <li class="flex items-center mb-2">
+        <div class="relative">
+          <img src="/images/woman_avatar.png" alt="Avatar of a woman" width="36" height="36" />
+          <SfBadge variant="dot" placement="bottom-right" class="!bg-primary-600 outline outline-white" />
+        </div>
+      </li>
+      <li class="flex items-center">
+        <div class="relative">
+          <img src="/images/woman_avatar.png" alt="Avatar of a woman" width="36" height="36" />
+          <SfBadge variant="dot" placement="bottom-right" class="!bg-neutral-600 outline outline-white" />
+        </div>
+      </li>
+    </ul>
+  );
+}

apps/website/src/routes/showcases/Badge/BadgeBasic/index.tsx

@@ -0,0 +1,28 @@
+import { component$ } from '@builder.io/qwik';
+import { SfBadge, SfButton, SfIconShoppingCart } from 'qwik-storefront-ui';
+
+export default  component$(() => {
+  return (
+    <div class="flex gap-3">
+      <SfButton class="relative" square variant="tertiary">
+        <SfIconShoppingCart />
+        <SfBadge content={10} />
+      </SfButton>
+
+      <SfButton class="relative" square variant="tertiary">
+        <SfIconShoppingCart />
+        <SfBadge content={10000} />
+      </SfButton>
+
+      <SfButton class="relative" square variant="tertiary">
+        <SfIconShoppingCart />
+        <SfBadge content="New" />
+      </SfButton>
+
+      <SfButton class="relative" square variant="tertiary">
+        <SfIconShoppingCart />
+        <SfBadge variant="dot" />
+      </SfButton>
+    </div>
+  );
+})

apps/website/src/routes/showcases/Badge/BadgeOutline/index.tsx

@@ -0,0 +1,29 @@
+import { SfBadge, SfButton, SfIconShoppingCart } from "qwik-storefront-ui";
+
+export default function BadgeOutline() {
+  return (
+    <div class="flex gap-3">
+      <div class="p-3 bg-white">
+        <SfButton class="group relative" square variant="tertiary">
+          <SfIconShoppingCart />
+          <SfBadge
+            content={100}
+            max={99}
+            class="outline outline-white group-hover:outline-primary-100 group-active:outline-primary-200"
+          />
+        </SfButton>
+      </div>
+
+      <div class="p-3 bg-primary-700">
+        <SfButton class="group relative hover:bg-primary-800 active:bg-primary-900" square variant="tertiary">
+          <SfIconShoppingCart class="text-white" />
+          <SfBadge
+            content={100}
+            max={99}
+            class="outline outline-primary-700 bg-white !text-neutral-900 group-hover:outline-primary-800 group-active:outline-primary-900"
+          />
+        </SfButton>
+      </div>
+    </div>
+  );
+}

apps/website/src/routes/showcases/Badge/BadgePlacement/index.tsx

@@ -0,0 +1,28 @@
+import { SfBadge, SfButton, SfIconShoppingCart } from "qwik-storefront-ui";
+
+
+export default function BadgePlacement() {
+  return (
+    <div class="flex gap-3">
+      <SfButton class="relative" square variant="tertiary">
+        <SfIconShoppingCart />
+        <SfBadge content={100} max={99} placement="top-right" />
+      </SfButton>
+
+      <SfButton class="relative" square variant="tertiary">
+        <SfIconShoppingCart />
+        <SfBadge content={100} max={99} placement="bottom-right" />
+      </SfButton>
+
+      <SfButton class="relative" square variant="tertiary">
+        <SfIconShoppingCart />
+        <SfBadge content={100} max={99} placement="top-left" />
+      </SfButton>
+
+      <SfButton class="relative" square variant="tertiary">
+        <SfIconShoppingCart />
+        <SfBadge content={100} max={99} placement="bottom-left" />
+      </SfButton>
+    </div>
+  );
+}

packages/qwik-storefront-ui/src/components/SfBadge/SfBadge.tsx

@@ -0,0 +1,40 @@
+import { component$ } from '@builder.io/qwik';
+import { SfBadgePlacement, SfBadgeProps } from './types';
+
+export const SfBadge = component$<SfBadgeProps>(
+  ({
+  content,
+  variant,
+  max = 99,
+  class: className,
+  placement = SfBadgePlacement['top-right'],
+  ...attributes
+}: SfBadgeProps) => {
+  const isDot = variant === 'dot';
+  let displayValue = content;
+  if (isDot) {
+    displayValue = '';
+  } else if (!Number.isNaN(content) && Number(content) > max) {
+    displayValue = `${max}+`;
+  }
+  return (
+    <span
+      class={[
+        'block absolute py-0.5 px-1 bg-secondary-700 font-medium text-white text-[8px] leading-[8px] rounded-xl',
+        {
+          'min-w-[12px] min-h-[12px]': !isDot,
+          'w-[10px] h-[10px]': isDot,
+          'top-0 right-0 -translate-x-0.5 translate-y-0.5': placement === 'top-right',
+          'top-0 left-0 translate-x-0.5 translate-y-0.5': placement === 'top-left',
+          'bottom-0 right-0 -translate-x-0.5 -translate-y-0.5': placement === 'bottom-right',
+          'bottom-0 left-0 translate-x-0.5 -translate-y-0.5': placement === 'bottom-left',
+        },
+        className
+      ]}
+      data-testid="badge"
+      {...attributes}
+    >
+      {displayValue}
+    </span>
+  );
+})

packages/qwik-storefront-ui/src/components/SfBadge/index.ts

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

packages/qwik-storefront-ui/src/components/SfBadge/types.ts

@@ -0,0 +1,19 @@
+export type SfBadgeProps = {
+  content?: string | number;
+  max?: number;
+  class?: string;
+  placement?: `${SfBadgePlacement}`;
+  variant?: `${SfBadgeVariant}`;
+}
+
+  export enum SfBadgeVariant {
+    standard = 'standard',
+    dot = 'dot',
+  }
+
+  export enum SfBadgePlacement {
+    'top-right' = 'top-right',
+    'top-left' = 'top-left',
+    'bottom-right' = 'bottom-right',
+    'bottom-left' = 'bottom-left',
+  }

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

@@ -1,4 +1,5 @@
 export * from './SfAccordionItem';
+export * from './SfBadge';
 export * from './SfButton';
 export * from './SfCheckbox';
 export * from './SfChip';
@@ -21,3 +22,4 @@ export * from './SfSelect';
 export * from './SfSwitch';
 export * from './SfThumbnail';
 export * from './SfTooltip';
+