feat: add suffix and prefix props on SfButton (#11)

Author: thecoder93

apps/website/src/components/utils/ControlsOptions.ts

@@ -0,0 +1,11 @@
+export const createControlsOptions = <TConfig extends object>(config: TConfig, defaultOption?: keyof TConfig) => {
+    const controlsOptions = Object.keys(config) as (keyof TConfig)[];
+
+    const getValue = <TLabel extends keyof TConfig>(label: TLabel) => config[label];
+
+    return {
+        controlsOptions,
+        defaultOption: defaultOption || controlsOptions[0],
+        getValue,
+    };
+};

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

@@ -1,4 +1,4 @@
-import { component$, useContext, useTask$ } from '@builder.io/qwik';
+import { component$, useContext, useSignal, useTask$ } from '@builder.io/qwik';
 import {
   SfButton,
   SfButtonSize,
@@ -7,12 +7,27 @@ import {
   SfIconSearch,
 } from 'qwik-storefront-ui';
 import { ComponentExample } from '../../../components/utils/ComponentExample';
+import { createControlsOptions } from '../../../components/utils/ControlsOptions';
 import { ControlsType } from '../../../components/utils/types';
 import { EXAMPLES_STATE } from '../layout';
 
+
+const prefixSlotOptions = createControlsOptions({
+  none: undefined,
+  'Search icon': <SfIconSearch />,
+});
+const suffixSlotOptions = createControlsOptions({
+  none: undefined,
+  'Lock icon': <SfIconLock />,
+});
+
 export default component$(() => {
+  const selectPrefix = useSignal<boolean>()
+  const selectSuffix = useSignal<boolean>()
+
   const examplesState = useContext(EXAMPLES_STATE);
 
+
   useTask$(() => {
     examplesState.data = {
       controls: [
@@ -21,6 +36,19 @@ export default component$(() => {
           modelName: 'slot',
           description: 'Only for demonstration purposes. Default slot',
         },
+        {
+          type: 'select',
+          modelName: 'slotPrefix',
+          description: 'slotPrefix',
+          options: prefixSlotOptions.controlsOptions,
+
+        },
+        {
+          type: 'select',
+          modelName: 'slotSuffix',
+          description: 'slotSuffix',
+          options: suffixSlotOptions.controlsOptions,
+        },
         {
           type: 'text',
           modelName: 'as',
@@ -52,14 +80,31 @@ export default component$(() => {
         disabled: undefined,
         variant: SfButtonVariant.primary,
         size: SfButtonSize.base,
+        slotPrefix: false,
+        slotSuffix: false,
         square: undefined,
       },
     };
   });
 
+  useTask$(({ track }) => {
+    track(() => examplesState.data.state);
+    if (selectPrefix.value === null) return;
+    selectPrefix.value = prefixSlotOptions.getValue(examplesState.data.state.slotPrefix)
+  });
+
+  useTask$(({ track }) => {
+    track(() => examplesState.data.state);
+    if (selectSuffix.value === null) return;
+    selectSuffix.value = suffixSlotOptions.getValue(examplesState.data.state.slotSuffix)
+  });
+
   return (
     <ComponentExample componentContainerClass="space-x-2">
-      <SfButton {...examplesState.data.state} class="max-w-[200px]">
+      <SfButton
+        slotPrefix={selectPrefix.value}
+        slotSuffix={selectSuffix.value}
+        {...examplesState.data.state} class="max-w-[200px]">
         <div q:slot="prefix">
           <SfIconSearch />
         </div>

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

@@ -32,6 +32,8 @@ export const SfButton = component$<SfButtonProps>(
     ref,
     class: className,
     size = SfButtonSize.base,
+    slotPrefix,
+    slotSuffix,
     variant = SfButtonVariant.primary,
     square,
     ...attributes
@@ -55,9 +57,9 @@ export const SfButton = component$<SfButtonProps>(
         data-testid="button"
         {...attributes}
       >
-        <Slot name="prefix" />
+        {slotPrefix && <Slot name="prefix" />}
         <Slot />
-        <Slot name="suffix" />
+        {slotSuffix && <Slot name="suffix" />}
       </Tag>
     );
   }

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

@@ -11,6 +11,8 @@ export type SfButtonProps = QwikIntrinsicElements['button'] &
     ref?: Signal<Element | undefined>;
     size?: `${SfButtonSize}`;
     variant?: `${SfButtonVariant}`;
+    slotPrefix?: boolean,
+    slotSuffix?: boolean,
     square?: boolean;
     onClick$?: PropFunction<
       (event: QwikMouseEvent<HTMLButtonElement, MouseEvent>) => void