design-system-next 1.1.2 → 1.2.0

package/src/components/sidenav/sidenav.vue

@@ -46,7 +46,7 @@
             }"
             @click="isQuckActionMenuVisible = !isQuckActionMenuVisible"
           >
-            <IconPlusCircleFill class="w-full" />
+            <Icon icon="ph:plus-circle-fill" class="w-full" />
           </div>
 
           <template #popper>
@@ -57,7 +57,8 @@
               ]"
             >
               <h3 class="body-sm-regular-medium m-0">Quick Actions</h3>
-              <IconX
+              <Icon
+                icon="ph:x"
                 :class="[
                   'text-color-weak h-[20px] w-[20px] cursor-pointer',
                   'transition duration-150 ease-in-out',
@@ -99,7 +100,7 @@
                           menuLinkItem.iconBgColor === 'purple',
                       }"
                     >
-                      <component :is="menuLinkItem.icon" v-if="menuLinkItem.icon" class="h-[1em] w-[1em] text-[20px]" />
+                      <Icon v-if="menuLinkItem.icon" :icon="menuLinkItem.icon" class="h-[1em] w-[1em] text-[20px]" />
                     </div>
                     <div class="grid justify-between">
                       <h5 class="body-sm-regular-medium text-color-strong m-0 truncate">
@@ -126,7 +127,7 @@
           ]"
           @click="emit('search', 'search-triggered')"
         >
-          <IconMagnifyingGlass />
+          <Icon icon="ph:magnifying-glass" />
         </div>
 
         <!-- Grouped Nav Links -->
@@ -150,8 +151,8 @@
                     'active:background-color-single-active active:scale-90': true,
                   }"
                 >
-                  <component :is="parentLink.icon" v-if="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
-                  <IconGlobe v-else />
+                  <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
+                  <Icon v-else icon="ph:globe" />
                 </div>
 
                 <template #popper>
@@ -195,7 +196,8 @@
                               class="background-color-brand-base absolute left-0 top-0 h-full w-[2px]"
                             ></div>
                             <span>{{ menuLinkItem.title }}</span>
-                            <IconCaretRight
+                            <Icon
+                              icon="ph:caret-right"
                               class="h-[16px] w-[16px] transform font-normal transition-transform duration-300"
                             />
                           </div>
@@ -293,8 +295,8 @@
                   }"
                   @click="handleRedirect(parentLink, parentLink.title, '', '')"
                 >
-                  <component :is="parentLink.icon" v-if="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
-                  <IconGlobe v-else />
+                  <Icon v-if="parentLink.icon" class="h-[1.25em] w-[1.25em]" :icon="parentLink.icon" />
+                  <Icon v-else icon="ph:globe" />
                 </div>
               </Tooltip>
             </template>
@@ -332,8 +334,8 @@
                     'active:background-color-single-active active:scale-90': true,
                   }"
                 >
-                  <component :is="parentLink.icon" v-if="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
-                  <IconGlobe v-else />
+                  <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
+                  <Icon v-else icon="ph:globe" />
                 </div>
 
                 <template #popper>
@@ -377,7 +379,8 @@
                               class="background-color-brand-base absolute left-0 top-0 h-full w-[2px]"
                             ></div>
                             <span>{{ menuLinkItem.title }}</span>
-                            <IconCaretRight
+                            <Icon
+                              icon="ph:caret-right"
                               class="h-[16px] w-[16px] transform font-normal transition-transform duration-300"
                             />
                           </div>
@@ -475,8 +478,8 @@
                   }"
                   @click="handleRedirect(parentLink, parentLink.title, '', '')"
                 >
-                  <component :is="parentLink.icon" v-if="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
-                  <IconGlobe v-else />
+                  <Icon v-if="parentLink.icon" :icon="parentLink.icon" class="h-[1.25em] w-[1.25em]" />
+                  <Icon v-else icon="ph:globe" />
                 </div>
               </Tooltip>
             </template>
@@ -500,7 +503,7 @@
         ]"
         @click="emit('notifications', 'notifications-triggered')"
       >
-        <IconBell class="h-[1.25em] w-[1.25em]" />
+        <Icon icon="ph:bell" class="h-[1.25em] w-[1.25em]" />
         <badge
           class="absolute -top-0.5 right-2.5"
           :text="String(props.notificationCount)"
@@ -519,7 +522,7 @@
         ]"
         @click="emit('requests', 'requests-triggered')"
       >
-        <IconCheckSquare class="h-[1.25em] w-[1.25em]" />
+        <Icon icon="ph:check-square" class="h-[1.25em] w-[1.25em]" />
         <badge class="absolute -top-0.5 right-2.5" :text="String(props.requestCount)" variant="danger" size="small" />
       </div>
     </div>
@@ -600,7 +603,7 @@
                 ]"
                 @click="handleRedirect(userMenuItem, '', '', '')"
               >
-                <component :is="userMenuItem.icon" v-if="userMenuItem.icon" class="h-[1em] w-[1em] text-[20px]" />
+                <Icon v-if="userMenuItem.icon" :icon="userMenuItem.icon" class="h-[1em] w-[1em] text-[20px]" />
                 <h5 class="body-sm-regular text-color-strong m-0 truncate">
                   {{ userMenuItem.title }}
                 </h5>
@@ -618,17 +621,10 @@ import { sidenavPropTypes, sidenavEmitTypes } from './sidenav';
 import { useSidenav } from './use-sidenav';
 
 import { Menu, Tooltip } from 'floating-vue';
+import { Icon } from '@iconify/vue';
 
 import badge from '../badge/badge.vue';
 
-import IconPlusCircleFill from '~icons/ph/plus-circle-fill';
-import IconMagnifyingGlass from '~icons/ph/magnifying-glass';
-import IconGlobe from '~icons/ph/globe';
-import IconCaretRight from '~icons/ph/caret-right';
-import IconX from '~icons/ph/x';
-import IconBell from '~icons/ph/bell';
-import IconCheckSquare from '~icons/ph/check-square';
-
 import 'floating-vue/dist/style.css';
 
 const props = defineProps(sidenavPropTypes);

package/src/components/switch/switch.vue

@@ -1,22 +1,25 @@
 <template>
-  <div v-bind="switchProps" :class="['switch', switchTextClass]">
-    <label class="switch_text switch_left-text">
+  <div v-bind="switchProps" :class="['flex items-center gap-2', switchTextClass]">
+    <label>
       <slot name="leftText">
         <slot></slot>
       </slot>
     </label>
-    <div ref="switchWrapperRef" class="switch_wrapper">
+    <div
+      ref="switchWrapperRef"
+      :class="['relative flex items-center', 'transition duration-300 ease-in-out', 'active:scale-90']"
+    >
       <input
         ref="switchRef"
         v-model="proxyValue"
         type="checkbox"
         name="checkbox"
-        :class="['switch_input', switchInputClass]"
+        :class="['input absolute left-0 top-0 z-10 m-0 h-6 w-12 opacity-0', switchInputClass]"
         :disabled="props.disabled"
       />
-      <span :class="['switch_mark', switchMarkClass]"></span>
+      <span :class="['mark relative box-border inline-block h-6 w-12 rounded-[40px] p-1', switchMarkClass]"></span>
     </div>
-    <label class="switch_text switch_right-text">
+    <label>
       <slot name="rightText"></slot>
     </label>
   </div>
@@ -37,64 +40,21 @@ const { switchWrapperRef, switchRef, switchProps, switchMarkClass, switchTextCla
 </script>
 
 <style lang="scss" scoped>
-.switch {
-  display: flex;
-  align-items: center;
-  width: fit-content;
-
-  &_left-text {
-    margin-right: 8px;
-  }
-
-  &_right-text {
-    margin-left: 8px;
-  }
-
-  &_wrapper {
-    position: relative;
-    display: inline;
-    height: 24px;
+.input {
+  &:checked ~ .mark:before {
+    @apply left-[1.7rem];
   }
+}
 
-  &_input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 1;
-    width: 48px;
-    height: 24px;
-    margin: 0;
-
-    &:checked ~ .switch_mark:before {
-      left: 28px;
-    }
+.mark {
+  &:before,
+  &:after {
+    @apply absolute;
+    content: '';
   }
 
-  &_mark {
-    display: inline-block;
-    position: relative;
-    box-sizing: border-box;
-    border-radius: 40px;
-    width: 48px;
-    height: 24px;
-    padding: 4px;
-
-    &:before,
-    &:after {
-      content: '';
-      position: absolute;
-    }
-
-    &:before {
-      @apply bg-white-50;
-
-      top: 4px;
-      left: 4px;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-    }
+  &:before {
+    @apply left-1 top-1 h-4 w-4 rounded-[50%] bg-white-50;
   }
 }
 </style>

package/src/components/switch/use-switch.ts

@@ -24,9 +24,11 @@ export const useSwitch = (props: SwitchPropTypes) => {
     if (props.disabled) {
       return getDisabledBackground();
     }
+
     if (pressed.value) {
       return getPressedBackground();
     }
+
     if (isHovered.value) {
       return getHoveredBackground();
     }

package/src/components/tabs/tabs.ts

@@ -4,7 +4,7 @@ export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<
 
 type List = {
   label: string;
-  icon?: Component;
+  icon?: string;
   iconFill?: Component;
   disabled?: boolean;
 };
@@ -32,4 +32,5 @@ export const tabsEmitTypes = {
 };
 
 export type TabsPropTypes = ExtractPropTypes<typeof tabsPropTypes>;
+
 export type TabsEmitTypes = typeof tabsEmitTypes;

package/src/components/tabs/tabs.vue

@@ -7,14 +7,29 @@
         tabsClasses,
         'body-sm-regular text-color-strong cursor-pointer border-solid',
         {
+          // Active tab without underline
           'background-color-single-active border': !underlined && selectedTabIndex === index,
+
+          // Inactive tab without underline
           'border-color-weak hover:background-color-hover border-x-[0.5px] border-y':
             !underlined && selectedTabIndex !== index,
+
+          // Underlined tab that is not selected
           'border-color-base border-b': underlined && selectedTabIndex !== index,
+
+          // Underlined and selected tab
           'border-b-2': underlined && selectedTabIndex === index,
+
+          // Disabled tab with underline
           'border-color-disabled text-color-disabled !cursor-not-allowed border-b': underlined && tab.disabled,
+
+          // Regular text for non-selected tabs
           'body-sm-regular': selectedTabIndex !== index,
+
+          // Active tab with custom text and border styles
           'body-sm-regular text-color-brand-base border-color-success-base': selectedTabIndex === index,
+
+          // Border adjustments for previous and next tab
           'border-l-0': selectedTabIndex - index === -1,
           'border-r-0': selectedTabIndex - index === 1,
         },
@@ -23,8 +38,8 @@
     >
       <div class="flex items-center gap-size-spacing-5xs leading-none">
         <div v-if="!!tab.icon">
-          <component
-            :is="selectedTabIndex === index && !!tab.iconFill ? tab.iconFill : tab.icon"
+          <Icon
+            :icon="selectedTabIndex === index && !!tab.iconFill ? tab.iconFill : tab.icon"
             class="body-sm-regular"
           />
         </div>
@@ -40,7 +55,10 @@
 import { tabsPropTypes, tabsEmitTypes } from './tabs';
 import { useTabs } from './use-tabs';
 
+import { Icon } from '@iconify/vue';
+
 const emit = defineEmits(tabsEmitTypes);
 const props = defineProps(tabsPropTypes);
+
 const { updateSelectedTabIndex, selectedTabIndex, tabsClasses } = useTabs(props, emit);
 </script>

package/src/components/tabs/use-tabs.ts

@@ -9,7 +9,9 @@ export const useTabs = (props: TabsPropTypes, emit: SetupContext<TabsEmitTypes>[
 
   function updateSelectedTabIndex(index: number, disabled = false) {
     if (disabled) return;
+
     if (selectedTabIndex.value === index) return;
+
     selectedTabIndex.value = index;
 
     emit('tabIndex', index);

package/src/components/timePicker/timePicker.vue

@@ -21,7 +21,7 @@
       />
 
       <div :class="iconClasses">
-        <IconClock />
+        <Icon icon="ph:clock" />
       </div>
     </div>
 
@@ -45,9 +45,9 @@
         >
           {{ option }}
 
-          <span v-if="option.toUpperCase() === selectedValue.toUpperCase()" class="text-color-brand-base font-bold"
-            ><IconCheck
-          /></span>
+          <span v-if="option.toUpperCase() === selectedValue.toUpperCase()" class="text-color-brand-base font-bold">
+            <Icon icon="ph:check" />
+          </span>
         </div>
       </div>
       <div v-else class="px-3 py-2 text-gray-500">No matching options found</div>
@@ -56,12 +56,10 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue';
+import { Icon } from '@iconify/vue';
 
 import { timePickerPropTypes, timePickerEmitTypes } from './timePicker';
 import { useTimePicker } from './use-timePicker';
-import IconCheck from '~icons/ph/check';
-import IconClock from '~icons/ph/clock';
 
 const props = defineProps(timePickerPropTypes);
 const emit = defineEmits(timePickerEmitTypes);

package/src/main.ts

@@ -4,10 +4,6 @@ import App from '@/App.vue';
 
 import '@/assets/styles/tailwind.css';
 
-import FloatingVue from 'floating-vue';
-
 const app = createApp(App);
 
-app.use(FloatingVue);
-
 app.mount('#app');