refactor: simplify Button component and begin BrandButton swap out.

Author: mdatelle

unraid-ui/src/components/common/badge/badge.variants.ts

@@ -8,15 +8,8 @@ export const badgeVariants = cva(
         red: 'bg-unraid-red text-white hover:bg-orange-dark',
         yellow: 'bg-yellow-100 text-black hover:bg-yellow-200',
         green: 'bg-green-200 text-green-800 hover:bg-green-300',
-        blue: 'bg-blue-100 text-blue-800 hover:bg-blue-200',
-        indigo: 'bg-indigo-100 text-indigo-800 hover:bg-indigo-200',
-        purple: 'bg-purple-100 text-purple-800 hover:bg-purple-200',
-        pink: 'bg-pink-100 text-pink-800 hover:bg-pink-200',
         orange: 'bg-orange text-white hover:bg-orange-dark',
-        black: 'bg-black text-white hover:bg-gray-800',
-        white: 'bg-white text-black hover:bg-gray-100',
         transparent: 'bg-transparent text-black hover:bg-gray-100',
-        current: 'bg-current text-current hover:bg-gray-100',
         gray: 'bg-gray-200 text-gray-800 hover:bg-gray-300',
         custom: '',
       },

unraid-ui/src/components/common/button/Button.vue

@@ -7,6 +7,7 @@ export interface ButtonProps {
   variant?: ButtonVariants['variant'];
   size?: ButtonVariants['size'];
   class?: string;
+  icon?: any;
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
@@ -21,6 +22,7 @@ const buttonClass = computed(() => {
 
 <template>
   <button :class="buttonClass">
+    <component :is="icon" v-if="icon" class="w-4 h-4" />
     <slot />
   </button>
 </template>

unraid-ui/src/components/common/button/button.variants.ts

@@ -1,21 +1,15 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-base font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        brand:
+        primary:
           'bg-gradient-to-r from-unraid-red to-orange text-white opacity-100 transition-all hover:opacity-60 focus:opacity-60',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline:
-          'border border-input border-2 bg-transparent hover:bg-accent hover:text-accent-foreground',
-        'outline-brand':
+        secondary:
           'text-orange bg-transparent border-orange border-2 hover:text-white focus:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange hover:text-white hover:bg-gradient-to-r hover:from-unraid-red hover:to-orange transition-[background,color,opacity] duration-300 ease-in-out rounded-md hover:opacity-100 focus:opacity-100',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        link: 'text-black underline-offset-4 hover:underline',
       },
       size: {
         sm: 'h-9 rounded-md px-3',

unraid-ui/stories/components/common/Button.stories.ts

@@ -1,9 +1,11 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import ButtonComponent from "../../../src/components/common/button/Button.vue";
+import { ArrowDownTrayIcon, KeyIcon, RocketLaunchIcon } from '@heroicons/vue/24/outline';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import ButtonComponent from '../../../src/components/common/button/Button.vue';
 
 const meta = {
-  title: "Components/Common",
+  title: 'Components/Common/Button',
   component: ButtonComponent,
+  tags: ['autodocs'],
 } satisfies Meta<typeof ButtonComponent>;
 
 export default meta;
@@ -12,9 +14,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Button: Story = {
   args: {
-    variant: "primary",
-    size: "md",
-    default: "Click me",
+    variant: 'primary',
+    size: 'md',
+    default: 'Click me',
   },
   render: (args) => ({
     components: { ButtonComponent },
@@ -32,3 +34,51 @@ export const Button: Story = {
     `,
   }),
 };
+
+export const ButtonLeftIcon: Story = {
+  args: {
+    variant: 'primary',
+    size: 'md',
+    default: 'Click me',
+    icon: ArrowDownTrayIcon,
+  },
+  render: (args) => ({
+    components: { ButtonComponent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ButtonComponent
+        :variant="args.variant"
+        :size="args.size"
+        :class="args.class"
+        :icon="args.icon"
+      >
+        {{ args.default }}
+      </ButtonComponent>
+    `,
+  }),
+};
+
+export const ButtonIcon: Story = {
+  args: {
+    variant: 'primary',
+    size: 'icon',
+    default: '',
+  },
+  render: (args) => ({
+    components: { ButtonComponent, RocketLaunchIcon },
+    setup() {
+      return { args };
+    },
+    template: `
+      <ButtonComponent
+        :variant="args.variant"
+        :size="args.size"
+        :class="args.class"
+      >
+        <RocketLaunchIcon class="w-4 h-4" />
+      </ButtonComponent>
+    `,
+  }),
+};

web/components/Activation/Modal.vue

@@ -2,9 +2,9 @@
 import { storeToRefs } from 'pinia';
 
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
-import { BrandButton } from '@unraid/ui';
+import { Button } from '@unraid/ui';
 
-import type { BrandButtonProps } from '@unraid/ui';
+import type { ButtonProps } from '@unraid/ui';
 import type { ComposerTranslation } from 'vue-i18n';
 
 import ActivationPartnerLogo from '~/components/Activation/PartnerLogo.vue';
@@ -24,25 +24,25 @@ const purchaseStore = usePurchaseStore();
 const title = computed<string>(() => props.t("Let's activate your Unraid OS License"));
 const description = computed<string>(() =>
   props.t(
-    `On the following screen, your license will be activated. You’ll then create an Unraid.net Account to manage your license going forward.`
+    `On the following screen, your license will be activated. You'll then create an Unraid.net Account to manage your license going forward.`
   )
 );
-const docsButtons = computed<BrandButtonProps[]>(() => {
+const docsButtons = computed<ButtonProps[]>(() => {
   return [
     {
-      variant: 'underline',
+      variant: 'link',
       external: true,
       href: 'https://docs.unraid.net/unraid-os/faq/licensing-faq/',
       iconRight: ArrowTopRightOnSquareIcon,
-      size: '14px',
+      size: 'md',
       text: props.t('More about Licensing'),
     },
     {
-      variant: 'underline',
+      variant: 'link',
       external: true,
       href: 'https://docs.unraid.net/account/',
       iconRight: ArrowTopRightOnSquareIcon,
-      size: '14px',
+      size: 'md',
       text: props.t('More about Unraid.net Accounts'),
     },
   ];
@@ -74,7 +74,7 @@ const handleKeydown = (event: KeyboardEvent) => {
 
   if (sequenceIndex === keySequence.length) {
     activationCodeStore.setActivationModalHidden(true);
-      window.location.href = '/Tools/Registration';
+    window.location.href = '/Tools/Registration';
   }
 };
 
@@ -108,11 +108,9 @@ onUnmounted(() => {
 
     <template #footer>
       <div class="w-full flex gap-8px justify-center mx-auto">
-        <BrandButton
-          :text="t('Activate Now')"
-          :icon-right="ArrowTopRightOnSquareIcon"
-          @click="purchaseStore.activate"
-        />
+        <Button :icon="ArrowTopRightOnSquareIcon" @click="purchaseStore.activate">{{
+          t('Activate Now')
+        }}</Button>
       </div>
     </template>
 
@@ -121,7 +119,7 @@ onUnmounted(() => {
         <ActivationSteps :active-step="2" class="hidden sm:flex mt-6" />
 
         <div class="flex flex-col sm:flex-row justify-center gap-4 mx-auto w-full">
-          <BrandButton v-for="button in docsButtons" :key="button.text" v-bind="button" />
+          <Button v-for="(button, index) in docsButtons" :key="index" v-bind="button"></Button>
         </div>
       </div>
     </template>

web/components/Auth.ce.vue

@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-import { BrandButton } from '@unraid/ui';
-import { useServerStore } from '~/store/server';
-import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+
+import { Button } from '@unraid/ui';
+
+import { useServerStore } from '~/store/server';
 
 const { t } = useI18n();
 
@@ -17,14 +19,16 @@ const { authAction, stateData } = storeToRefs(serverStore);
       <span class="text-14px" v-html="t(stateData.message)" />
     </span>
     <span v-if="authAction">
-      <BrandButton
+      <Button
+        variant="brand"
         :disabled="authAction?.disabled"
         :icon="authAction.icon"
-        size="12px"
-        :text="t(authAction.text)"
+        size="md"
         :title="authAction?.title ? t(authAction?.title) : undefined"
         @click="authAction.click?.()"
-      />
+      >
+        {{ t(authAction.text) }}
+      </Button>
     </span>
   </div>
 </template>

web/components/ConnectSettings/AllowedOrigins.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { BrandButton, Input } from '@unraid/ui';
+import { Button, Input } from '@unraid/ui';
 
 import { useUnraidApiSettingsStore } from '~/store/unraidApiSettings';
 
@@ -42,8 +42,7 @@ const setAllowedOrigins = () => {
       type="text"
       placeholder="https://abc.myreverseproxy.com,https://xyz.rvrsprx.com"
     />
-    <BrandButton type="button" variant="outline" text="Apply" @click="setAllowedOrigins()">
-    </BrandButton>
+    <Button type="button" variant="secondary" @click="setAllowedOrigins()">Apply</Button>
     <div v-for="(error, index) of errors" :key="index">
       <p>{{ error }}</p>
     </div>

web/components/ConnectSettings/ConnectSettings.ce.vue

@@ -5,7 +5,7 @@
 
 import { useMutation, useQuery } from '@vue/apollo-composable';
 
-import { BrandButton, jsonFormsRenderers, Label } from '@unraid/ui';
+import { Button, jsonFormsRenderers, Label } from '@unraid/ui';
 import { JsonForms } from '@jsonforms/vue';
 
 import type { ConnectSettingsValues } from '~/composables/gql/graphql';
@@ -119,15 +119,15 @@ const onChange = ({ data }: { data: Record<string, unknown> }) => {
         <p v-else-if="restartRequired">The API will restart after settings are applied.</p>
       </div>
       <div class="col-start-2 ml-10 space-y-4">
-        <BrandButton
-          variant="outline-primary"
+        <Button
+          variant="outline-brand"
           padding="lean"
-          size="12px"
+          size="md"
           class="leading-normal"
           @click="submitSettingsUpdate"
         >
           Apply
-        </BrandButton>
+        </Button>
         <p v-if="mutateSettingsError" class="text-sm text-unraid-red-500">
           ✕ Error: {{ mutateSettingsError.message }}
         </p>

web/components/DownloadApiLogs.ce.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+
 import { ArrowDownTrayIcon, ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
-import { BrandButton } from '@unraid/ui';
+import { Button } from '@unraid/ui';
 import { CONNECT_FORUMS, CONTACT, DISCORD, WEBGUI_GRAPHQL } from '~/helpers/urls';
-import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
 
@@ -26,15 +27,16 @@ const downloadUrl = computed(() => {
     </span>
     <span class="flex flex-col gap-y-16px">
       <div class="flex">
-        <BrandButton
+        <Button
+          variant="brand"
           class="grow-0 shrink-0"
           download
           :external="true"
           :href="downloadUrl.toString()"
           :icon="ArrowDownTrayIcon"
-          size="12px"
-          :text="t('Download unraid-api Logs')"
-        />
+          size="md"
+          >{{ t('Download unraid-api Logs') }}</Button
+        >
       </div>
 
       <div class="flex flex-row items-baseline gap-8px">

web/components/KeyActions.vue

@@ -2,7 +2,7 @@
 import { storeToRefs } from 'pinia';
 
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/solid';
-import { BrandButton, cn } from '@unraid/ui';
+import { Button, cn } from '@unraid/ui';
 
 import type { ServerStateDataAction } from '~/types/server';
 import type { ComposerTranslation } from 'vue-i18n';
@@ -47,18 +47,19 @@ const filteredKeyActions = computed((): ServerStateDataAction[] | undefined => {
 <template>
   <ul v-if="filteredKeyActions" class="flex flex-col gap-y-8px">
     <li v-for="action in filteredKeyActions" :key="action.name">
-      <BrandButton
+      <Button
         :class="cn('w-full', props.maxWidth ? 'sm:max-w-300px' : '')"
         :disabled="action?.disabled"
         :external="action?.external"
         :href="action?.href"
         :icon="action.icon"
         :icon-right="ArrowTopRightOnSquareIcon"
         :icon-right-hover-display="true"
-        :text="t(action.text)"
         :title="action.title ? t(action.title) : undefined"
         @click="action.click?.()"
-      />
+      >
+        {{ t(action.text) }}
+      </Button>
     </li>
   </ul>
 </template>