Merge pull request #8412 from shashkovdanil/neoloading-tailwindcss

NeoLoading to tailwindcss and added icons to historie

libs/ui/package.json

@@ -22,6 +22,8 @@
     "vite": "^4.5.0"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
     "@google/model-viewer": "^3.3.0",
     "@vueuse/core": "^9.13.0",
     "bulma": "0.9.4",

libs/ui/src/components/NeoLoading/NeoLoading.scss

@@ -1,13 +1,8 @@
-@import '../../scss/theme';
 @import '@oruga-ui/oruga-next/src/scss/utilities/expressions.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/variables.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/animations.scss';
 @import '@oruga-ui/oruga-next/src/scss/utilities/helpers.scss';
-@import '../../scss/variable.scss';
 
+$loading-overlay: rgb(0 0 0 / 0.5);
 
 @import '@oruga-ui/oruga-next/src/scss/components/loading.scss';
-
-.o-load__overlay {
-  background-color: rgba(0, 0, 0, 0.5);
-}

libs/ui/src/components/NeoLoading/NeoLoading.story.vue

@@ -1,7 +1,7 @@
 <template>
   <Story title="NeoLoading" :layout="{ type: 'grid', width: '200px' }">
     <Variant title="Loading">
-      <NeoLoading> Neo Loader</NeoLoading>
+      <NeoLoading :active="true" />
     </Variant>
   </Story>
 </template>

libs/ui/src/components/NeoLoading/NeoLoading.vue

@@ -1,7 +1,7 @@
 <template>
   <OLoading v-bind="$attrs">
     <slot>
-      <NeoIcon icon="spinner-third" spin size="large" class="has-text-white" />
+      <NeoIcon icon="spinner-third" spin size="large" class="text-white" />
     </slot>
   </OLoading>
 </template>

libs/ui/src/histoire.setup.ts

@@ -1 +1,28 @@
 import './histoire.scss'
+
+import { defineSetupVue3 } from '@histoire/plugin-vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { Neo } from './'
+
+export const setupVue3 = defineSetupVue3(({ app }) => {
+  const script = document.createElement('script')
+  script.src = 'https://kit.fontawesome.com/54f29b7997.js'
+  script.crossOrigin = 'anonymous'
+  script.async = true
+
+  document.body.appendChild(script)
+
+  app.component('FontAwesomeIcon', FontAwesomeIcon).use(Neo, {
+    customIconPacks: {
+      fass: {
+        iconPrefix: 'fa-fw fa-',
+      },
+      fasr: {
+        iconPrefix: 'fa-fw fa-',
+      },
+      fab: {
+        iconPrefix: 'fa-fw fa-',
+      },
+    },
+  })
+})