add SfLink

Author: gioboa

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

@@ -0,0 +1,40 @@
+import { Slot, component$ } from '@builder.io/qwik';
+import { SfLinkVariant } from '../../shared';
+import { SfLinkProps } from './types';
+
+const defaultLinkTag = 'a';
+
+export const SfLink = component$<SfLinkProps>(
+  ({
+    as,
+    ref,
+    class: _class,
+    variant = SfLinkVariant.primary,
+    ...attributes
+  }) => {
+    const variantClasses = {
+      [SfLinkVariant.primary]:
+        'text-primary-700 underline hover:text-primary-800 active:text-primary-900',
+      [SfLinkVariant.secondary]:
+        'underline hover:text-primary-800 active:text-primary-900',
+    };
+    const Tag = as || defaultLinkTag;
+
+    return (
+      <Tag
+        {...(ref ? { ref } : {})}
+        class={[
+          'focus-visible:outline focus-visible:outline-offset focus-visible:rounded-sm',
+          variantClasses[variant],
+          _class,
+        ]}
+        data-testid="link"
+        {...attributes}
+      >
+        <Slot />
+      </Tag>
+    );
+  }
+);
+
+export default SfLink;

packages/storefront-ui/src/components/SfLink/index.tsx

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

packages/storefront-ui/src/components/SfLink/types.tsx

@@ -0,0 +1,9 @@
+import { QwikIntrinsicElements, Signal } from '@builder.io/qwik';
+import { SfLinkVariant } from '../../shared';
+
+export type SfLinkProps = QwikIntrinsicElements['a'] & {
+  as?: any;
+  ref?: Signal<Element | undefined>;
+  class?: string;
+  variant?: `${SfLinkVariant}`;
+};