@weni/unnnic-system 2.0.8 → 2.0.10

package/src/stories/StarRating.stories.js

@@ -4,7 +4,8 @@ export default {
   title: 'Rating/StarRating',
   component: unnnicStarRating,
   argTypes: {
-    value: { control: { type: 'number', min: 0, max: 5, step: 0.1 } },
+    showValue: { control: { type: 'boolean' } },
+    readonly: { control: { type: 'boolean' } },
   },
 };
 
@@ -15,10 +16,16 @@ const Template = (args, { argTypes }) => ({
     unnnicStarRating,
   },
 
+  data() {
+    return {
+      value: 4,
+    };
+  },
+
   template: `
     <div>
       <pre>v-model: {{ value }}</pre>
-      <unnnic-star-rating v-bind="$props">
+      <unnnic-star-rating v-model="value" showValue readonly>
       </unnnic-star-rating>
     </div>
   `,

package/src/stories/Tab.stories.js

@@ -6,37 +6,44 @@ export default {
   argTypes: {
     size: { control: { type: 'select', options: ['md', 'sm'] } },
   },
+  render: (args) => ({
+    components: {
+      unnnicTab,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+      <unnnic-tab v-bind="args">
+        <template #tab-head-first>
+          First
+        </template>
+        <template #tab-head-first-tooltip>
+          Tooltip text
+        </template>
+        <template #tab-panel-first>
+          <h2 class="title">First Content</h2>
+          <p class="description">
+          First description
+          </p>
+        </template>
+        <template #tab-head-second>
+          Second
+        </template>
+        <template #tab-panel-second>
+          <h2 class="title">Second Content</h2>
+          <p class="description">
+            Second description
+          </p>
+        </template>
+      </unnnic-tab>
+    `,
+  }),
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { unnnicTab },
-  template: `
-  <unnnic-tab v-bind="$props">
-      <template slot="tab-head-first">
-        First
-      </template>
-      <template slot="tab-panel-first">
-        <h2 class="title">First Content</h2>
-        <p class="description">
-        First description
-        </p>
-      </template>
-      <template slot="tab-head-second">
-        Second
-      </template>
-      <template slot="tab-panel-second">
-        <h2 class="title">Second Content</h2>
-        <p class="description">
-          Second description
-        </p>
-      </template>
-  </unnnic-tab>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  initialTab: 'first',
-  tabs: ['first', 'second'],
+export const Default = {
+  args: {
+    initialTab: 'first',
+    tabs: ['first', 'second'],
+  },
 };

package/src/stories/ToolTip.stories.js

@@ -12,6 +12,17 @@ export default {
     maxWidth: { control: { type: 'text' } },
     forceOpen: { control: { type: 'boolean' } },
   },
+  render: (args) => ({
+    components: {
+      unnnicToolTip,
+    },
+    setup() {
+      return { args };
+    },
+    template: `
+    <unnnic-tool-tip v-bind="args"> Hover over text </unnnic-tool-tip>
+    `,
+  }),
 };
 
 export const Normal = {