Подключен phosphor вместо fa

.github/workflows/code-coverage-workflow.yml

@@ -11,7 +11,7 @@ jobs:
           node-version: 14
           cache: 'npm'
       - name: Install
-        run: npm i
+        run: npm i --force
       - name: Run
         run: npm run test:unit
   Linters:
@@ -24,6 +24,6 @@ jobs:
           node-version: 14
           cache: 'npm'
       - name: Install
-        run: npm i
+        run: npm i --force
       - name: Run
         run: npm run typecheck && npm run lint

.github/workflows/storybook-deploy.yml

@@ -13,7 +13,7 @@ jobs:
           node-version: 14
           cache: 'npm'
       - name: Install
-        run: npm i
+        run: npm i --force
       - name: Install and Build
         run: npx -p @storybook/storybook-deployer storybook-to-ghpages -- --ci
         env:

.storybook/preview.js

@@ -1,14 +1,5 @@
-import { app } from '@storybook/vue3'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { fas } from '@fortawesome/free-solid-svg-icons'
-import { far } from '@fortawesome/free-regular-svg-icons'
 import '../src/assets/styles/main.sass'
 
-library.add(fas, far)
-
-app.component('fa-icon', FontAwesomeIcon)
-
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' }
 }

README.md

@@ -6,6 +6,11 @@ This template should help get you started developing with Vue 3 in Vite.
 
 [Описаны здесь](./CONTRIBUTING.md)
 
+## Иконки
+Мы используем phosphor - https://phosphoricons.com/. Нажав на иконку, отобразится код для копирования.
+
+Если надо использовать иконки в компонентах, то используем слоты. 
+
 ## Recommended IDE Setup
 
 [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
@@ -28,7 +33,7 @@ See [Vite Configuration Reference](https://vitejs.dev/config/).
 ## Project Setup
 
 ```sh
-npm install
+npm install --force
 ```
 
 ### Compile and Hot-Reload for Development
@@ -62,4 +67,4 @@ npm run lint
 import { ChButton, ChInput } from 'choco-ui';
 import 'choco-ui/dist/style.css';
 </script>
-```
+```

package.json

@@ -13,7 +13,6 @@
     }
   },
   "scripts": {
-    "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview --port 5050",
     "test:unit": "vitest run --environment jsdom",
@@ -26,10 +25,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-regular-svg-icons": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/vue-fontawesome": "^3.0.0-5",
+    "phosphor-vue": "^4.4.0",
     "vue": "^3.2.33"
   },
   "devDependencies": {

src/components/ChInput/ChInput.stories.js

@@ -73,33 +73,6 @@ WithOuterLabel.args = {
   label: 'Input'
 }
 
-export const WithAppendSlot = Template.bind({})
-WithAppendSlot.args = {
-  label: 'Input',
-  slots: {
-    append: `<fa-icon :icon="['fas', 'user']" />`
-  }
-}
-
-export const ClearableWithAppendSlot = Template.bind({})
-ClearableWithAppendSlot.args = {
-  checked: true,
-  label: 'Input',
-  clearable: true,
-  value: 'Value',
-  slots: {
-    append: `<fa-icon :icon="['fas', 'user']" />`
-  }
-}
-
-export const WithPrependSlot = Template.bind({})
-WithPrependSlot.args = {
-  label: 'Input',
-  slots: {
-    prepend: `<fa-icon :icon="['fas', 'location']" />`
-  }
-}
-
 export const WithAfterText = Template.bind({})
 WithAfterText.args = {
   label: 'Input',

src/components/ChInput/ChInput.vue

@@ -33,7 +33,7 @@
         </div>
       </div>
       <div class="ch-input__clear-btn" v-if="isClearable" @click="onClear">
-        <fa-icon :icon="['fas', 'xmark']" />
+        <ph-x></ph-x>
       </div>
       <div class="ch-input__append" v-if="Boolean($slots.append)">
         <slot name="append" />
@@ -56,6 +56,7 @@
 <script setup lang="ts">
 import { computed, toRefs, ref } from 'vue'
 import uuid from '@/utils/uuid'
+import { PhX } from 'phosphor-vue'
 
 const props = defineProps({
   disabled: Boolean,

src/components/ChRadio/ChRadio.spec.ts

@@ -4,7 +4,11 @@ import ChRadio from './ChRadio.vue'
 
 describe('ChRadio', () => {
   it('renders properly', () => {
-    const wrapper = mount(ChRadio, { slots: { default: 'Hello Vitest' } })
-    expect(wrapper.text()).toContain('Hello Vitest')
+    const defaultText = 'Hello Vitest'
+    const wrapper = mount(ChRadio, {
+      props: { name: defaultText },
+      slots: { default: defaultText }
+    })
+    expect(wrapper.text()).toContain(defaultText)
   })
 })

src/components/ChTextBlock/ChTextBlock.stories.js

@@ -34,7 +34,6 @@ export const Full = Template.bind({})
 Full.args = {
   description: 'Description',
   label: 'Label',
-  icon: ['fas', 'location'],
   caption: 'Caption',
   additional: 'additional'
 }

src/components/ChTextBlock/ChTextBlock.vue

@@ -8,7 +8,6 @@
     <div class="ch-text-block__caption">
       <slot v-if="$slots.default" />
       <div class="ch-text-block__caption-item" v-else>
-        <fa-icon class="ch-text-block__caption-icon" v-if="icon" :icon="icon" />
         <p class="ch-text-block__caption-text">{{ caption }}</p>
       </div>
     </div>
@@ -21,7 +20,6 @@ defineProps<{
   additional?: string
   description?: string
   caption?: string
-  icon?: string[]
 }>()
 </script>
 

src/components/ChToggleButton/ChToggleButton.vue

@@ -3,11 +3,6 @@
     <slot v-if="$slots.default" />
     <template v-else>
       <p class="ch-toggle-button__text">{{ label }}</p>
-      <fa-icon
-        class="ch-toggle-button__icon ch-toggle-button__icon_right"
-        v-if="icon"
-        :icon="icon"
-      />
     </template>
   </div>
 </template>
@@ -16,13 +11,11 @@
 defineProps<{
   active?: boolean
   label: string
-  icon?: string[]
 }>()
 </script>
 
 <style lang="sass" scoped>
 .ch-toggle-button
-  border-radius: 12px
   display: flex
   justify-content: center
   align-items: center
@@ -42,10 +35,4 @@ defineProps<{
 
   &:not(:first-child)
     margin-left: 8px
-
-  &__icon_left
-    margin-right: 8px
-
-  &__icon_right
-    margin-left: 8px
 </style>

src/components/ChToggleButtonGroup/ChToggleButtonGroup.stories.js

@@ -15,5 +15,5 @@ const Template = args => ({
 
 export const WithLabel = Template.bind({})
 WithLabel.args = {
-  options: ['Label', { label: 'Label 2', icon: ['fas', 'location'], active: true }]
+  options: ['Label', { label: 'Label 2', active: true }]
 }

src/components/ChToggleButtonGroup/ChToggleButtonGroup.vue

@@ -6,7 +6,6 @@
       :key="i"
       :active="getActiveOption(option, i)"
       :label="typeof option === 'string' ? option : option.label"
-      :icon="typeof option === 'string' ? undefined : option.icon"
     />
   </div>
 </template>
@@ -17,7 +16,6 @@ import ChToggleButton from '../ChToggleButton'
 
 interface IOption {
   label: string
-  icon: string[]
   active?: boolean
 }