add SfBadge component

thecoder93 · Oct 9, 2023 · 339ebfe · 339ebfe
1 parent ce9ff11
commit 339ebfe
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git a/packages/qwik-storefront-ui/src/components/SfBadge/SfBadge.tsx b/packages/qwik-storefront-ui/src/components/SfBadge/SfBadge.tsx
@@ -0,0 +1,38 @@
+import { component$ } from '@builder.io/qwik';
+import { SfBadgePlacement, SfBadgeProps } from './types';
+
+export const SfBadge = component$<SfBadgeProps>(
+  ({
+  content,
+  variant,
+  max = 99,
+  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',
+        },
+      ]}
+      data-testid="badge"
+      {...attributes}
+    >
+      {displayValue}
+    </span>
+  );
+})
diff --git a/packages/qwik-storefront-ui/src/components/SfBadge/index.ts b/packages/qwik-storefront-ui/src/components/SfBadge/index.ts
@@ -0,0 +1,3 @@
+export * from './types';
+
+export { SfBadge } from './SfBadge';
diff --git a/packages/qwik-storefront-ui/src/components/SfBadge/types.ts b/packages/qwik-storefront-ui/src/components/SfBadge/types.ts
@@ -0,0 +1,18 @@
+export type SfBadgeProps = {
+  content?: string | number;
+  max?: number;
+  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',
+  }
diff --git a/packages/qwik-storefront-ui/src/components/index.ts b/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';
+
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export * from './types';

		export { SfBadge } from './SfBadge';