From 0d361b065bc0d9ccb8958c522c7b7c5ee2e87b8f Mon Sep 17 00:00:00 2001
From: CarolineGard <caroline.gard@mpyadigital.com>
Date: Mon, 19 Jun 2023 17:55:07 +0200
Subject: [PATCH] fix(inline classes): update inline classes for tag, tabs,
 steps, expandable, attention

---
 components/attention/w-attention.vue   |  7 +++-
 components/expandable/w-expandable.vue |  3 +-
 components/steps/w-steps.vue           | 11 ++++--
 components/tabs/w-tabs.vue             |  1 -
 components/tag/w-tag.vue               | 46 ++++++++++++++------------
 dev/pages/Tabs.vue                     | 29 ++++++++--------
 package.json                           |  4 +--
 pnpm-lock.yaml                         | 16 ++++-----
 8 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/components/attention/w-attention.vue b/components/attention/w-attention.vue
index 974c52d4..b5ba57c8 100644
--- a/components/attention/w-attention.vue
+++ b/components/attention/w-attention.vue
@@ -21,6 +21,11 @@
   const emit = defineEmits(['update:modelValue']);
   const directionName = computed(() => directions.find(e => props[e]));
 
+  const attentionClasses = computed(() => ({
+    [props.attentionClass]: true,
+    [ccAttention.notCallout]: !props.callout
+  }))
+  
   const wrapperClasses = computed(() => ({
     [ccAttention.base]: true,
     [ccAttention.tooltip]: props.tooltip,
@@ -66,7 +71,7 @@
 </script>
 
 <template>
-  <div :class="[{ 'absolute z-50': !callout }, attentionClass]" ref="attentionRef" v-show="model">
+  <div :class="attentionClasses" ref="attentionRef" v-show="model">
     <div :class="wrapperClasses" data-test="wrapper">
       <w-attention-arrow v-bind="$props" v-if="!noArrow" ref="arrowEl" :direction="actualDirection" />
       <div :class="ccAttention.content"><slot /></div>
diff --git a/components/expandable/w-expandable.vue b/components/expandable/w-expandable.vue
index 8b086cbd..a851e301 100644
--- a/components/expandable/w-expandable.vue
+++ b/components/expandable/w-expandable.vue
@@ -75,6 +75,7 @@ const chevronClasses = computed(() => ({
 
 const contentClasses = computed(() => ({
   [props.contentClass || '']: true,
-  [ccBox.box + (hasTitle.value ? ' pt-0' : '')]: props.box || props.info,
+  [ccBox.box]: props.box || props.info,
+  [ccExpandable.paddingTop]: hasTitle.value && (props.box || props.info),
 }))
 </script>
diff --git a/components/steps/w-steps.vue b/components/steps/w-steps.vue
index 969b449e..95bafc91 100644
--- a/components/steps/w-steps.vue
+++ b/components/steps/w-steps.vue
@@ -1,5 +1,6 @@
 <script setup>
-import { ref, provide, watchEffect } from 'vue';
+import { computed, ref, provide, watchEffect } from 'vue';
+import { steps as ccSteps } from '@warp-ds/component-classes';
 
 const props = defineProps({
   horizontal: Boolean,
@@ -12,14 +13,20 @@ const left = ref(!props.right);
 provide('steps-vertical', vertical);
 provide('steps-left', left);
 
+const stepsClasses = computed(() => ({
+    [ccSteps.steps]: true,
+    [ccSteps.stepsHorizontal]: props.horizontal 
+  }));
+
 watchEffect(() => {
   vertical.value = !props.horizontal;
   left.value = !props.right;
 });
+
 </script>
 
 <template>
-  <div class="w-full" :class="{ flex: horizontal }">
+  <div :class="stepsClasses">
     <slot />
   </div>
 </template>
diff --git a/components/tabs/w-tabs.vue b/components/tabs/w-tabs.vue
index 2c345e40..c0a9edb5 100644
--- a/components/tabs/w-tabs.vue
+++ b/components/tabs/w-tabs.vue
@@ -4,7 +4,6 @@ import {
   provide,
   computed,
   ref,
-  toRef,
   watch,
   nextTick,
   onMounted,
diff --git a/components/tag/w-tag.vue b/components/tag/w-tag.vue
index 385d6242..84ac1cb8 100644
--- a/components/tag/w-tag.vue
+++ b/components/tag/w-tag.vue
@@ -1,15 +1,5 @@
-<template>
-  <div :class="baseClasses">
-    <slot />
-  </div>
-</template>
-
-<script>
-export default { name: 'wTag' }
-</script>
-
 <script setup>
-import { ribbon as c } from '@fabric-ds/css/component-classes'
+import { ribbon as ccRibbon } from '@warp-ds/component-classes'
 import { computed } from 'vue'
 
 const props = defineProps({
@@ -28,18 +18,30 @@ const props = defineProps({
   disabled: Boolean,
   sponsored: Boolean,
   neutral: Boolean
-})
+});
 
 const baseClasses = computed(() => ({
-  [c.base]: props.primary,
-  ['rounded-tr-0 rounded-bl-0']: props.topLeft || props.bottomRight,
-  ['rounded-tl-0 rounded-br-0']: props.topRight || props.bottomLeft,
-  [c.info]: props.info,
-  [c.success]: props.success,
-  [c.warning]: props.warning,
-  [c.error]: props.error,
-  [c.disabled]: props.disabled,
-  [c.sponsored]: props.sponsored,
-  [c.neutral]: props.neutral
+  [ccRibbon.base]: props.primary,
+  [ccRibbon.roundedTopRightBottomLeft]: props.topLeft || props.bottomRight,
+  [ccRibbon.roundedTopLeftBottomRight]: props.topRight || props.bottomLeft,
+  [ccRibbon.info]: props.info,
+  [ccRibbon.success]: props.success,
+  [ccRibbon.warning]: props.warning,
+  [ccRibbon.error]: props.error,
+  [ccRibbon.disabled]: props.disabled,
+  [ccRibbon.sponsored]: props.sponsored,
+  [ccRibbon.neutral]: props.neutral
 }))
 </script>
+
+<template>
+  <div :class="baseClasses">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default { name: 'wTag' }
+</script>
+
+
diff --git a/dev/pages/Tabs.vue b/dev/pages/Tabs.vue
index d873ee25..685aaa0a 100644
--- a/dev/pages/Tabs.vue
+++ b/dev/pages/Tabs.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { wTabs, wTab, wTabPanel } from '#components';
-import { radio, useIsActive } from '#dev-util';
-import { ref, reactive, h } from 'vue';
+import { ref, h } from 'vue';
 
 const Stars = {
   name: 'stars-svg',
@@ -12,7 +11,7 @@ const Stars = {
     }),
 };
 
-const model = ref('home');
+const model = ref('one');
 </script>
 
 <template>
@@ -20,26 +19,26 @@ const model = ref('home');
     <component-title title="Tabs" />
     <token :state="[model]">
       <w-tabs v-model="model">
-        <w-tab label="Home" name="home">
+        <w-tab label="Tab 1" name="one">
           <stars />
         </w-tab>
-        <w-tab label="Car" name="car">
+        <w-tab label="Tab 2" name="two">
           <stars />
         </w-tab>
-        <w-tab label="Motorcycle" name="motorcycle">
+        <w-tab label="Tab 3" name="three">
           <stars />
         </w-tab>
       </w-tabs>
       <div>
-        <w-tab-panel name="home" v-if="model === 'home'"
-          ><h3 class="mb-0">Welcome home!</h3></w-tab-panel
-        >
-        <w-tab-panel name="car" v-if="model === 'car'"
-          ><h3 class="mb-0">I am a car page</h3></w-tab-panel
-        >
-        <w-tab-panel name="motorcycle" v-if="model === 'motorcycle'"
-          ><h3 class="mb-0">Something something two wheels</h3></w-tab-panel
-        >
+        <w-tab-panel name="one" v-if="model === 'one'">
+          <p class="mb-0">First tab content</p>
+        </w-tab-panel>
+        <w-tab-panel name="two" v-if="model === 'two'">
+          <p class="mb-0">Second tab content</p>
+        </w-tab-panel>
+        <w-tab-panel name="three" v-if="model === 'three'">
+          <p class="mb-0">Third tab content</p>
+          </w-tab-panel>
       </div>
     </token>
   </div>
diff --git a/package.json b/package.json
index b005ac61..8130a0ff 100644
--- a/package.json
+++ b/package.json
@@ -48,8 +48,8 @@
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
     "@warp-ds/core": "^1.0.0",
-    "@warp-ds/component-classes": "^1.0.0-alpha.101",
-    "@warp-ds/uno": "1.0.0-alpha.41",
+    "@warp-ds/component-classes": "^1.0.0-alpha.106",
+    "@warp-ds/uno": "1.0.0-alpha.45",
     "cleave-lite": "^1.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "drnm": "^0.9.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a58b3f42..9855eb95 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,14 +59,14 @@ devDependencies:
     specifier: ^2.0.2
     version: 2.3.0(vue@3.2.47)
   '@warp-ds/component-classes':
-    specifier: ^1.0.0-alpha.101
-    version: 1.0.0-alpha.101
+    specifier: ^1.0.0-alpha.106
+    version: 1.0.0-alpha.106
   '@warp-ds/core':
     specifier: ^1.0.0
     version: 1.0.0
   '@warp-ds/uno':
-    specifier: 1.0.0-alpha.41
-    version: 1.0.0-alpha.41
+    specifier: 1.0.0-alpha.45
+    version: 1.0.0-alpha.45
   cleave-lite:
     specifier: ^1.0.0
     version: 1.0.0
@@ -1309,8 +1309,8 @@ packages:
       '@vue/server-renderer': 3.2.47(vue@3.2.47)
     dev: true
 
-  /@warp-ds/component-classes@1.0.0-alpha.101:
-    resolution: {integrity: sha512-MQuihXPUQRG6WkwTmJzdglNIxobqp5zprjJC6cRyTMcou3dgR9cKdeC6Jy4c29FP1l6V/bQ0yMXUABJ1KfsMXQ==}
+  /@warp-ds/component-classes@1.0.0-alpha.106:
+    resolution: {integrity: sha512-WY6WEFlrflVA+QgRjEH4bl3UkcWqSRs7qNOuD5tFK0EWre/XzuBJQbp/XnWOaia2ZWztewlSFTq27J6fGOVWTg==}
     dev: true
 
   /@warp-ds/core@1.0.0:
@@ -1319,8 +1319,8 @@ packages:
       '@floating-ui/dom': 0.5.4
     dev: true
 
-  /@warp-ds/uno@1.0.0-alpha.41:
-    resolution: {integrity: sha512-Ni2c0Ec2SVAUwJqp+XPx8QUDXAMj+lzigBRrIqUZR+XhJ5AUNQKEkClY64o/eDlZWGLxbyJDsbUVkL7gQTxXGw==}
+  /@warp-ds/uno@1.0.0-alpha.45:
+    resolution: {integrity: sha512-Uemwf0EgmZV4En+aT74ZX6pw/+w+CLVhgTMV/4e6FouDq+e79MknNtHVpm/ktLHlUgb4fedFCChSxRExgU1/RQ==}
     dependencies:
       '@unocss/core': 0.50.6
       '@unocss/preset-mini': 0.50.6