@designcrowd/fe-shared-lib 1.5.23 → 1.6.0

package/.storybook-static/assets/HelloBar.stories-597Kxj0W.js

@@ -0,0 +1,342 @@
+import{B as a}from"./Button-DKdQT6Fq.js";import{H as o}from"./HelloBar-CYEZR2kQ.js";import"./ButtonPrimary-BvWW6Duz.js";import"./iframe-B3A6OXQU.js";import"./preload-helper-PPVm8Dsz.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./Icon-C17LFvsP.js";const c={title:"Components/HelloBar",component:o},t=()=>({components:{Button:a,HelloBar:o},methods:{doSomething(){alert("I'm doing something")}},template:`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">HelloBar</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="info" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="error" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="error" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" label="Lorem ipsum dolor sit amet" description="consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" label="" description="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="warning" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="warning" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar
+                variant="warning"
+                label="Logo image is low quality"
+                description="Your file is too small, make sure to upload at least 1000 x 1000px file to ensure the quality of your design."
+              >
+                <template v-slot:cta>
+                  <Button
+                    label="Replace logo"
+                    size="small"
+                    variant="secondary"
+                    @on-click="doSomething"
+                  />
+                </template>
+              </HelloBar>
+            </td>
+            <td class="tw-p-4" width="200">
+              <pre class="tw-block tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+&#x3C;HelloBar
+  variant=&#x22;warning&#x22;
+  label=&#x22;Logo image is low quality&#x22;
+  description=&#x22;Your file is too small.&#x22;
+&#x3E;
+  &#x3C;template v-slot:cta&#x3E;
+    &#x3C;Button
+      label=&#x22;Replace logo&#x22;
+      size=&#x22;small&#x22;
+      variant=&#x22;secondary&#x22;
+      @on-click=&#x22;doSomething&#x22;
+    /&#x3E;
+  &#x3C;/template&#x3E;
+&#x3C;/HelloBar&#x3E;</pre>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar label="Small font" font-size="sm" variant="info" description="This hello bar has smaller font." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" label="Small font" description="This hello bar has smaller font." /&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `}),e=()=>({components:{Button:a,HelloBar:o},data(){return{messages:["This is the first message","This is the second message","This is the third message"]}},template:`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">HelloBar</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="info" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="error" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="error" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="warning" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="warning" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    `});t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Button,
+      HelloBar
+    },
+    methods: {
+      doSomething() {
+        // eslint-disable-next-line no-alert
+        alert("I'm doing something");
+      }
+    },
+    template: \`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">HelloBar</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="info" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="error" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="error" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" label="Lorem ipsum dolor sit amet" description="consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" label="" description="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="warning" label="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="warning" label="" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar
+                variant="warning"
+                label="Logo image is low quality"
+                description="Your file is too small, make sure to upload at least 1000 x 1000px file to ensure the quality of your design."
+              >
+                <template v-slot:cta>
+                  <Button
+                    label="Replace logo"
+                    size="small"
+                    variant="secondary"
+                    @on-click="doSomething"
+                  />
+                </template>
+              </HelloBar>
+            </td>
+            <td class="tw-p-4" width="200">
+              <pre class="tw-block tw-bg-info-100 tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+&#x3C;HelloBar
+  variant=&#x22;warning&#x22;
+  label=&#x22;Logo image is low quality&#x22;
+  description=&#x22;Your file is too small.&#x22;
+&#x3E;
+  &#x3C;template v-slot:cta&#x3E;
+    &#x3C;Button
+      label=&#x22;Replace logo&#x22;
+      size=&#x22;small&#x22;
+      variant=&#x22;secondary&#x22;
+      @on-click=&#x22;doSomething&#x22;
+    /&#x3E;
+  &#x3C;/template&#x3E;
+&#x3C;/HelloBar&#x3E;</pre>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar label="Small font" font-size="sm" variant="info" description="This hello bar has smaller font." />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" label="Small font" description="This hello bar has smaller font." /&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    \`
+  };
+}`,...t.parameters?.docs?.source}}};e.parameters={...e.parameters,docs:{...e.parameters?.docs,source:{originalSource:`() => {
+  return {
+    components: {
+      Button,
+      HelloBar
+    },
+    data() {
+      return {
+        messages: ['This is the first message', 'This is the second message', 'This is the third message']
+      };
+    },
+    template: \`
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">HelloBar</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="info" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+              &lt;HelloBar variant="info" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="error" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="error" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="success" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="success" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+          <tr class="tw-bg-grayscale-200">
+            <td class="tw-p-4 tw-w-3/4">
+              <HelloBar variant="warning" :label="messages" />
+            </td>
+            <td class="tw-p-4 tw-w-3/4">
+              <code class="tw-bg-info-100 tw-block tw-p-2 tw-rounded tw-bg-gray-400 tw-border tw-border-solid tw-border-info-300 tw-text-info-900">
+                &lt;HelloBar variant="warning" :label="['first', 'second', 'third']" /&gt;
+              </code>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    \`
+  };
+}`,...e.parameters?.docs?.source}}};const b=["Sample","SampleWithArrayMessages"];export{t as Sample,e as SampleWithArrayMessages,b as __namedExportsOrder,c as default};