@designcrowd/fe-shared-lib 1.0.0-test-publish

package/src/atoms/components/Icon/Icon.stories.js

@@ -0,0 +1,382 @@
+import Icon from './Icon.vue';
+
+export default {
+  title: 'Components/Icons',
+  component: Icon,
+};
+
+export const IconSample = () => {
+  return {
+    components: {
+      Icon,
+    },
+    data() {
+      return {
+        sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
+        icons: [
+          { name: 'add-page' },
+          { name: 'ai' },
+          { name: 'arrow-down' },
+          { name: 'arrow-left' },
+          { name: 'arrow-right' },
+          { name: 'arrow-up' },
+          { name: 'arrow-up-underline' },
+          { name: 'attach' },
+          { name: 'auth-facebook' },
+          { name: 'auth-facebook-white' },
+          { name: 'auth-google' },
+          { name: 'brush' },
+          { name: 'banner' },
+          { name: 'banner-centered' },
+          { name: 'button-arrow' },
+          { name: 'button-arrow-left' },
+          { name: 'button-arrow-right' },
+          { name: 'button-brushstroke' },
+          { name: 'button-brushstroke-left' },
+          { name: 'button-brushstroke-right' },
+          { name: 'button-dashed-oval' },
+          { name: 'button-dashed-rectangle' },
+          { name: 'button-dashed-rounded' },
+          { name: 'button-doubleline-oval' },
+          { name: 'button-doubleline-rectangle' },
+          { name: 'button-doubleline-rounded' },
+          { name: 'button-paper' },
+          { name: 'button-paper-top' },
+          { name: 'button-paper-bottom' },
+          { name: 'button-softshadow-oval' },
+          { name: 'button-softshadow-rectangle' },
+          { name: 'button-softshadow-rounded' },
+          { name: 'business' },
+          { name: 'business-card-filled' },
+          { name: 'business-card-filled' },
+          { name: 'card' },
+          { name: 'calendar' },
+          { name: 'check' },
+          { name: 'check-thin' },
+          { name: 'chevron-down' },
+          { name: 'chevron-left' },
+          { name: 'chevron-right' },
+          { name: 'chevron-right-wide' },
+          { name: 'chevron-up' },
+          { name: 'close' },
+          { name: 'community' },
+          { name: 'column-1' },
+          { name: 'column-2' },
+          { name: 'column-3' },
+          { name: 'column-4' },
+          { name: 'copy' },
+          { name: 'delete' },
+          { name: 'designs' },
+          { name: 'desktop' },
+          { name: 'divider-thick' },
+          { name: 'divider-thin' },
+          { name: 'divider' },
+          { name: 'donate' },
+          { name: 'download' },
+          { name: 'duplicate' },
+          { name: 'edit' },
+          { name: 'edit-line' },
+          { name: 'ellipsis' },
+          { name: 'error' },
+          { name: 'envelope-email' },
+          { name: 'eye-crossed' },
+          { name: 'fees' },
+          { name: 'filter' },
+          { name: 'filter-crazy-domains' },
+          { name: 'flag' },
+          { name: 'folder' },
+          { name: 'form' },
+          { name: 'form-message' },
+          { name: 'contact-message' },
+          { name: 'fullscreen' },
+          { name: 'fullscreen-exit' },
+          { name: 'globe' },
+          { name: 'globe-crazy-domains' },
+          { name: 'godaddy' },
+          { name: 'hamburger' },
+          { name: 'hamburger-1' },
+          { name: 'hamburger-2' },
+          { name: 'hamburger-3' },
+          { name: 'hamburger-4' },
+
+          { name: 'nav-style-tab-display-style-1' },
+          { name: 'nav-style-tab-display-style-2' },
+          { name: 'nav-style-hamburger-display-style-1' },
+          { name: 'nav-style-hamburger-display-style-2' },
+          { name: 'nav-style-hamburger-display-style-3' },
+          { name: 'nav-style-hamburger-display-style-4' },
+
+          { name: 'header-desktop-nav-style-tab-display-style-1' },
+          { name: 'header-desktop-nav-style-tab-display-style-2' },
+          { name: 'header-desktop-nav-style-tab-display-style-3' },
+          { name: 'header-desktop-nav-style-tab-display-style-4' },
+          { name: 'header-desktop-nav-style-tab-display-style-5' },
+          { name: 'header-desktop-nav-style-tab-display-style-6' },
+          { name: 'header-desktop-nav-style-tab-display-style-no-logo-1' },
+          { name: 'header-desktop-nav-style-tab-display-style-no-logo-2' },
+          { name: 'header-desktop-nav-style-tab-display-style-no-logo-3' },
+          { name: 'header-mobile-nav-style-tab-display-style-1' },
+          { name: 'header-mobile-nav-style-tab-display-style-2' },
+
+          { name: 'header-desktop-nav-style-hamburger-display-style-1' },
+          { name: 'header-desktop-nav-style-hamburger-display-style-2' },
+          { name: 'header-desktop-nav-style-hamburger-display-style-no-logo-1' },
+          { name: 'header-desktop-nav-style-hamburger-display-style-no-logo-2' },
+          { name: 'header-desktop-nav-style-hamburger-display-style-no-logo-3' },
+          { name: 'header-mobile-nav-style-hamburger-display-style-1' },
+          { name: 'header-mobile-nav-style-hamburger-display-style-2' },
+          { name: 'header-mobile-nav-style-hamburger-display-style-3' },
+          { name: 'header-mobile-nav-style-hamburger-display-style-4' },
+
+          { name: 'footer-centered' }, // TODO - deprecate
+          { name: 'footer-left' }, // TODO - deprecate
+
+          { name: 'footer-display-style-1' },
+          { name: 'footer-display-style-2' },
+
+          { name: 'home' },
+          { name: 'home-crazy-domains' },
+          { name: 'info' },
+          { name: 'jobs' },
+          { name: 'display-style-about-1' },
+          { name: 'display-style-about-2' },
+          { name: 'display-style-about-3' },
+          { name: 'display-style-about-4' },
+          { name: 'display-style-about-5' },
+          { name: 'display-style-about-6' },
+          { name: 'display-style-images-1' },
+          { name: 'display-style-images-2' },
+          { name: 'display-style-images-3' },
+          { name: 'display-style-images-4' },
+          { name: 'display-style-images-5' },
+          { name: 'display-style-images-6' },
+          { name: 'display-style-banner-1' },
+          { name: 'display-style-banner-2' },
+          { name: 'display-style-banner-3' },
+          { name: 'display-style-banner-4' },
+          { name: 'display-style-banner-5' },
+          { name: 'display-style-banner-6' },
+          { name: 'display-style-banner-7' },
+          { name: 'display-style-banner-8' },
+          { name: 'display-style-banner-9' },
+          { name: 'display-style-contact-1' },
+          { name: 'display-style-contact-2' },
+          { name: 'display-style-contact-4' },
+          { name: 'display-style-contact-5' },
+          { name: 'display-style-contact-6' },
+          { name: 'letterhead-filled' },
+          { name: 'link' },
+          { name: 'location' },
+          { name: 'lock' },
+          { name: 'macos-command' },
+          { name: 'map' },
+          { name: 'message' },
+          { name: 'minus' },
+          { name: 'minus-circle-light' },
+          { name: 'mobile' },
+
+          { name: 'other' },
+          { name: 'pause' },
+          { name: 'page-buttons' },
+          { name: 'page-hamburger' },
+          { name: 'page-tabs' },
+          { name: 'palette' },
+          { name: 'payment' },
+          { name: 'payments-featured' },
+          { name: 'payments-textonly' },
+          { name: 'payments-thumbnail' },
+          { name: 'phone' },
+          { name: 'plus' },
+          { name: 'plus-circle' },
+          { name: 'plus-circle-light' },
+          { name: 'poll' },
+          { name: 'portfolio' },
+          { name: 'preview' },
+          { name: 'printing' },
+          { name: 'processing' },
+          { name: 'question' },
+          { name: 'reload' },
+          { name: 'reorderable' },
+          { name: 'search' },
+          { name: 'secure' },
+          { name: 'services' },
+          { name: 'settings' },
+          { name: 'share' },
+          { name: 'sms' },
+          { name: 'social-facebook' },
+          { name: 'social-facebook-color' },
+          { name: 'social-facebook-crazy-domains' },
+          { name: 'social-google' },
+          { name: 'social-google-crazy-domains' },
+          { name: 'social-instagram-color' },
+          { name: 'social-instagram-crazy-domains' },
+          { name: 'social-linkedin-color' },
+          { name: 'social-share' },
+          { name: 'social-twitter-color' },
+          { name: 'social-twitter-crazy-domains' },
+          { name: 'social-youtube-crazy-domains' },
+          { name: 'star-filled' },
+          { name: 'star-hollow' },
+          { name: 'submit' },
+          { name: 'time' },
+          { name: 'text-image' },
+          { name: 'testimonial-centered' },
+          { name: 'testimonial-big-image' },
+          { name: 'testimonial-columns' },
+          { name: 'text-image-left' },
+          { name: 'text-image-center' },
+          { name: 'text-image-only' },
+          { name: 'text-image-right' },
+          { name: 'tooltip-bottom' },
+          { name: 'tooltip-left' },
+          { name: 'tooltip-right' },
+          { name: 'tooltip-top' },
+          { name: 'upgrade' },
+          { name: 'upgrade-alt' },
+          { name: 'upload' },
+          { name: 'upload-arrow' },
+          { name: 'user-accounts' },
+          { name: 'watchlist-filled' },
+          { name: 'watchlist-hollow' },
+          { name: 'watchlist-hollow-alt' },
+          { name: 'website-filled' },
+          { name: 'website' },
+          { name: 'wholesale' },
+          { name: 'zoom' },
+          { name: 'background' },
+          { name: 'content' },
+          { name: 'images' },
+          { name: 'images-gallery' },
+          { name: 'image-gallery-grid' },
+          { name: 'image-gallery-carousel' },
+          { name: 'image-gallery-masonry' },
+          { name: 'bc-mast' },
+          { name: 'request-payment' },
+          { name: 'shop' },
+          { name: 'styles' },
+          { name: 'templates' },
+          { name: 'maker-animate' },
+          { name: 'maker-custom-landscape' },
+          { name: 'maker-email' },
+          { name: 'maker-email-symbol' },
+          { name: 'maker-etsy' },
+          { name: 'maker-facebook' },
+          { name: 'maker-favicon' },
+          { name: 'maker-flyer' },
+          { name: 'maker-gift-certificate' },
+          { name: 'maker-globe' },
+          { name: 'maker-image' },
+          { name: 'maker-instagram' },
+          { name: 'maker-invoice' },
+          { name: 'maker-invitation' },
+          { name: 'maker-link' },
+          { name: 'maker-linkedin' },
+          { name: 'maker-menu' },
+          { name: 'maker-phone' },
+          { name: 'maker-pinterest' },
+          { name: 'maker-postcard' },
+          { name: 'maker-poster' },
+          { name: 'maker-profile' },
+          { name: 'maker-qrcode' },
+          { name: 'maker-snapchat' },
+          { name: 'maker-soundcloud' },
+          { name: 'maker-text' },
+          { name: 'maker-thankyou-card' },
+          { name: 'maker-tiktok' },
+          { name: 'maker-tumblr' },
+          { name: 'maker-twitch' },
+          { name: 'maker-twitter' },
+          { name: 'maker-video' },
+          { name: 'maker-whatsapp' },
+          { name: 'maker-uppercase' },
+          { name: 'maker-youtube' },
+          { name: 'maker-zoom' },
+          { name: 'maker-align-center' },
+          { name: 'maker-align-justify' },
+          { name: 'maker-align-left' },
+          { name: 'maker-align-right' },
+          { name: 'maker-italic' },
+          { name: 'maker-bold' },
+          { name: 'maker-play' },
+          { name: 'maker-pause' },
+          { name: 'maker-eraser' },
+          { name: 'layout-ibn-tcn', altText: 'Layout' },
+          { name: 'layout-ibn-tcs', altText: 'Layout' },
+          { name: 'layout-ibs-tcn', altText: 'Layout' },
+          { name: 'layout-icn-ctc', altText: 'Layout' },
+          { name: 'layout-icn-ctt', altText: 'Layout' },
+          { name: 'layout-icn-ctb', altText: 'Layout' },
+          { name: 'layout-itn-tjn', altText: 'Layout' },
+          { name: 'layout-iln-tjn', altText: 'Layout' },
+          { name: 'layout-irn-tjn', altText: 'Layout' },
+          { name: 'layout-iln-tcn', altText: 'Layout' },
+          { name: 'layout-iln-tln', altText: 'Layout' },
+          { name: 'layout-ils-tln', altText: 'Layout' },
+          { name: 'layout-irn-tcn', altText: 'Layout' },
+          { name: 'layout-irn-trn', altText: 'Layout' },
+          { name: 'layout-irs-trn', altText: 'Layout' },
+          { name: 'layout-itn-tcn', altText: 'Layout' },
+          { name: 'layout-itn-tcs', altText: 'Layout' },
+          { name: 'layout-its-tcn', altText: 'Layout' },
+          { name: 'reset' },
+          { name: 'undo' },
+          { name: 'redo' },
+          { name: 'filters' },
+          { name: 'layer' },
+          { name: 'layer-bring-front' },
+          { name: 'layer-send-back' },
+          { name: 'opacity' },
+          { name: 'ban' },
+          { name: 'shape' },
+          { name: 'flip-horizontal' },
+          { name: 'flip-vertical' },
+          { name: 'volume' },
+          { name: 'volume-muted' },
+          { name: 'crop' },
+          { name: 'pages' },
+          { name: 'arrow-top-right' },
+          { name: 'aspect-ratio1_1' },
+          { name: 'aspect-ratio2_3' },
+          { name: 'aspect-ratio3_2' },
+          { name: 'aspect-ratio3_4' },
+          { name: 'aspect-ratio4_3' },
+          { name: 'aspect-ratio9_16' },
+          { name: 'aspect-ratio16_9' },
+          { name: 'aspect-ratio-circle' },
+          { name: 'aspect-ratio-original' },
+        ],
+      };
+    },
+    template: `
+      <table class="tw-w-full">
+        <thead>
+          <tr>
+            <th class="tw-text-center tw-p-4 tw-bg-grayscale-400 tw-font-sans">Icon ({{icons.length}})</th>
+            <th class="tw-text-left tw-p-4 tw-bg-grayscale-400 tw-font-sans">Code</th>
+          </tr>
+        </thead>
+        <tr v-for="(icon, i) in icons" :key="i" :class="{'tw-bg-grayscale-200': i % 2 !== 0}">
+          <td class="tw-p-4 tw-bg-grayscale-400">
+            <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
+              <Icon
+                v-for="size in sizes"
+                :name="icon.name"
+                :alt-text="icon.altText"
+                :size="size"
+              />
+            </div>
+          </td>
+          <td class="tw-p-4">
+            <code class="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">
+              &lt;Icon :name="{{ icon.name }}" :alt-text="{{ icon.altText }}" size="{{ sizes.join('|') }}" /&gt;
+            </code>
+          </td>
+        </tr>
+      </table>
+    `,
+  };
+};
+
+IconSample.story = {
+  name: 'Icon Library',
+};