@designcrowd/fe-shared-lib 1.8.5-edge-fallback-6 → 1.8.6

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

@@ -1,342 +0,0 @@
-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};