Merge pull request #288 from dnum-mi/fix/bug-in-icons

laruiss · web-flow · commit a0663af31a5c · 2022-03-23T12:27:47.000+01:00
fix/bug in icons
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/DsfrAlert/DsfrAlert.spec.js b/src/components/DsfrAlert/DsfrAlert.spec.js
@@ -1,8 +1,11 @@
+import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
 import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrAlert from './DsfrAlert.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
+import { RiCloseLine } from 'oh-vue-icons/icons/ri/index.js'
+
+addIcons(RiCloseLine)
 
 describe('DsfrAlert', () => {
   it('should mount DsfrAlert with right content', () => {
diff --git a/src/components/DsfrBreadcrumb/DsfrBreadcrumb.spec.js b/src/components/DsfrBreadcrumb/DsfrBreadcrumb.spec.js
@@ -1,3 +1,4 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
@@ -26,8 +27,6 @@ const router = createRouter({
   ],
 })
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrBreadcrumb', () => {
   it('should render DsfrBreadcrumb with right content', async () => {
     // Given
diff --git a/src/components/DsfrButton/DsfrButton.spec.js b/src/components/DsfrButton/DsfrButton.spec.js
@@ -1,10 +1,9 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrButton from './DsfrButton.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrButton', () => {
   it('should mount DsfrButton with right content', () => {
     // Given
diff --git a/src/components/DsfrButton/DsfrButtonGroup.spec.js b/src/components/DsfrButton/DsfrButtonGroup.spec.js
@@ -1,3 +1,4 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/vue'
 
@@ -6,8 +7,6 @@ import { spy } from '@/../tests/unit/test-utils.js'
 
 import DsfrButtonGroup from './DsfrButtonGroup.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrButtonGroup', () => {
   it('should mount DsfrButtonGroup with content', async () => {
     // Given
diff --git a/src/components/DsfrCallout/DsfrCallout.spec.js b/src/components/DsfrCallout/DsfrCallout.spec.js
@@ -1,3 +1,4 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent, render } from '@testing-library/vue'
 
 import { spy } from '@/../tests/unit/test-utils.js'
@@ -6,8 +7,6 @@ import { spy } from '@/../tests/unit/test-utils.js'
 
 import DsfrCallout from './DsfrCallout.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrCallout', () => {
   it('should display a callout without a button', () => {
     const title = 'Titre de la mise en avant'
diff --git a/src/components/DsfrCard/DsfrCard.spec.js b/src/components/DsfrCard/DsfrCard.spec.js
@@ -1,3 +1,4 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/vue'
 
@@ -21,8 +22,6 @@ const router = createRouter({
   ],
 })
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrCard', () => {
   it('should render a nice card', async () => {
     // Given
diff --git a/src/components/DsfrCheckbox/DsfrCheckbox.spec.js b/src/components/DsfrCheckbox/DsfrCheckbox.spec.js
@@ -1,9 +1,8 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 
 import CheckBox from './DsfrCheckbox.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrCheckbox', () => {
   it('should render a checkbox with label in div', () => {
     // Given
diff --git a/src/components/DsfrCheckbox/DsfrCheckboxSet.spec.js b/src/components/DsfrCheckbox/DsfrCheckboxSet.spec.js
@@ -1,9 +1,8 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrCheckboxSet from './DsfrCheckboxSet.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="String(name)"></i>' }
-
 describe('DsfrCheckboxSet', () => {
   it('should render a group of checkboxes in fieldset', () => {
     // Given
diff --git a/src/components/DsfrFileUpload/DsfrFileUpload.spec.js b/src/components/DsfrFileUpload/DsfrFileUpload.spec.js
@@ -1,8 +1,7 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import DsfrFileUpload from './DsfrFileUpload.vue'
 import { render } from '@testing-library/vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrFileUpload', () => {
   it('should render file input without hint nor error', () => {
     const label = 'Texte du label'
diff --git a/src/components/DsfrFollow/DsfrFollow.spec.js b/src/components/DsfrFollow/DsfrFollow.spec.js
@@ -1,9 +1,8 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 
 import DsfrSocialNetworks from './DsfrSocialNetworks.vue'
 
-const VIcon = { name: 'v-icon', props: ['name'], template: '<div :class="name"></div>' }
-
 describe('DsfrSocialNetworks', () => {
   it('should mount DsfrSocialNetworks with right content', () => {
     // Given
diff --git a/src/components/DsfrFooter/DsfrFooter.spec.js b/src/components/DsfrFooter/DsfrFooter.spec.js
@@ -1,7 +1,13 @@
+import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
+import { RiExternalLinkLine } from 'oh-vue-icons/icons/ri/index.js'
+
 import DsfrFooter from './DsfrFooter.vue'
+
+addIcons(RiExternalLinkLine)
+
 const router = createRouter({
   history: createWebHistory('/'),
   routes: [
@@ -43,8 +49,6 @@ const router = createRouter({
   ],
 })
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrFooter', () => {
   it('should mount DsfrFooter with right content', async () => {
     // Given
diff --git a/src/components/DsfrHeader/DsfrHeader.spec.js b/src/components/DsfrHeader/DsfrHeader.spec.js
@@ -1,3 +1,4 @@
+import { OhVueIcon as VIcon, addIcons } from 'oh-vue-icons'
 import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
@@ -6,6 +7,10 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import DsfrHeader from './DsfrHeader.vue'
 
+import { RiNotification3Line, RiPhoneLine, RiSearchLine } from 'oh-vue-icons/icons/ri/index.js'
+
+addIcons(RiNotification3Line, RiPhoneLine, RiSearchLine)
+
 const router = createRouter({
   history: createWebHistory('/'),
   routes: [
@@ -31,8 +36,6 @@ const router = createRouter({
     },
   ],
 })
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrHeader', () => {
   it('should render DsfrHeader with a logo', async () => {
     // Given
diff --git a/src/components/DsfrHeader/DsfrHeader.vue b/src/components/DsfrHeader/DsfrHeader.vue
@@ -104,9 +104,6 @@ export default defineComponent({
                   data-testid="header-logo"
                 />
               </div>
-              <div class="fr-header__operator">
-                <slot name="operator" />
-              </div>
               <div
                 v-if="isWithSlotOperator"
                 class="fr-header__operator"
diff --git a/src/components/DsfrInput/DsfrInput.vue b/src/components/DsfrInput/DsfrInput.vue
@@ -44,6 +44,9 @@ export default defineComponent({
     isComponent () {
       return this.isTextarea ? 'textarea' : 'input'
     },
+    wrapper () {
+      return this.isWithWrapper || this.$attrs.type === 'date' || this.wrapperClass
+    },
   },
 })
 </script>
@@ -62,7 +65,23 @@ export default defineComponent({
       class="fr-hint-text"
     >{{ hint }}</span>
   </label>
+  <component
+    :is="isComponent"
+    v-if="!wrapper"
+    :id="id"
+    class="fr-input"
+    :class="{
+      'fr-input--error': isInvalid,
+      'fr-input--valid': isValid,
+    }"
+    :value="modelValue"
+    v-bind="$attrs"
+    :aria-aria-describedby="descriptionId || undefined"
+    @input="$emit('update:modelValue', $event.target.value)"
+    @keydown.esc="$emit('update:modelValue', '')"
+  />
   <div
+    v-else
     :class="[
       {
         'fr-input-wrap': isWithWrapper || $attrs.type === 'date',
diff --git a/src/components/DsfrModal/DsfrModal.spec.js b/src/components/DsfrModal/DsfrModal.spec.js
@@ -1,12 +1,11 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
 
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrModal from './DsfrModal.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrModal', () => {
   it('should render modal and emit "close" on click on close button', async () => {
     const content = 'Contenu de la modale'
diff --git a/src/components/DsfrNavigation/DsfrNavigation.spec.js b/src/components/DsfrNavigation/DsfrNavigation.spec.js
@@ -1,3 +1,4 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
@@ -16,8 +17,6 @@ const router = createRouter({
   }],
 })
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 const secondMenuTitle = 'Menu déroulant'
 const megaMenuTitle = 'Mega Menu déroulant'
 
diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenu.spec.js b/src/components/DsfrNavigation/DsfrNavigationMegaMenu.spec.js
@@ -1,11 +1,10 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrNavigationMegaMenu from './DsfrNavigationMegaMenu.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 const router = createRouter({
   history: createWebHistory('/'),
   routes: [{
diff --git a/src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.spec.js b/src/components/DsfrNavigation/DsfrNavigationMegaMenuCategory.spec.js
@@ -1,3 +1,4 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
 // import '@gouvfr/dsfr/dist/core/core.module.js'
@@ -13,8 +14,6 @@ const router = createRouter({
   }],
 })
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrNavigationMegaMenuCategory', () => {
   it('should render a navigation mega menu', async () => {
     const title = 'Nom de catégorie'
diff --git a/src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.js b/src/components/DsfrNavigation/DsfrNavigationMenuLink.spec.js
@@ -1,11 +1,10 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 import { createRouter, createWebHistory } from 'vue-router'
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrNavigationMenuLink from './DsfrNavigationMenuLink.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 const router = createRouter({
   history: createWebHistory('/'),
   routes: [{
diff --git a/src/components/DsfrPagination/DsfrPagination.spec.js b/src/components/DsfrPagination/DsfrPagination.spec.js
@@ -1,10 +1,9 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render, fireEvent } from '@testing-library/vue'
 import { ref } from 'vue'
 
 import Pagination from './DsfrPagination.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrPagination', () => {
   it('should render a list of links to give quick access to several pages', async () => {
     // Given
diff --git a/src/components/DsfrQuote/DsfrQuote.spec.js b/src/components/DsfrQuote/DsfrQuote.spec.js
@@ -1,9 +1,8 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 
 import DsfrQuote from './DsfrQuote.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrQuote', () => {
   it('should render a complete DsfrQuote', () => {
     const quote = 'LA citation'
diff --git a/src/components/DsfrRadioButton/DsfrRadioButton.spec.js b/src/components/DsfrRadioButton/DsfrRadioButton.spec.js
@@ -1,9 +1,8 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 
 import RadioButton from './DsfrRadioButton.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrRadioButton', () => {
   it('should render a radio button with label in div', () => {
     // Given
diff --git a/src/components/DsfrRadioButton/DsfrRadioButtonSet.spec.js b/src/components/DsfrRadioButton/DsfrRadioButtonSet.spec.js
@@ -1,9 +1,8 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent, render } from '@testing-library/vue'
 
 import RadioButtonSet from './DsfrRadioButtonSet.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrRadioButtonSet', () => {
   it('should render a set of radio buttons with label in div', () => {
     // Given
diff --git a/src/components/DsfrSearchBar/DsfrSearchBar.spec.js b/src/components/DsfrSearchBar/DsfrSearchBar.spec.js
@@ -1,11 +1,10 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { render } from '@testing-library/vue'
 
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import SearchBar from './DsfrSearchBar.vue'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('SearchBar', () => {
   it('should render searchbar with visible label', () => {
     // Given
diff --git a/src/components/DsfrSearchBar/DsfrSearchBar.vue b/src/components/DsfrSearchBar/DsfrSearchBar.vue
@@ -79,3 +79,9 @@ export default defineComponent({
 </template>
 
 <style src="@gouvfr/dsfr/dist/component/search/search.main.css" />
+
+<style>
+.fr-search-bar > .fr-label + .fr-input {
+  margin: 0;
+}
+</style>
diff --git a/src/components/DsfrTable/DsfrTableCell.spec.js b/src/components/DsfrTable/DsfrTableCell.spec.js
@@ -1,12 +1,11 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrTableCell from './DsfrTableCell.vue'
 import DsfrTag from '../DsfrTag/DsfrTag.vue'
 
 import { spy } from '@/../tests/unit/test-utils.js'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrTableCell', () => {
   it('should render simple cell', () => {
     // Given
diff --git a/src/components/DsfrTable/DsfrTableHeader.spec.js b/src/components/DsfrTable/DsfrTableHeader.spec.js
@@ -1,11 +1,10 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrTableHeader from './DsfrTableHeader.vue'
 
 import { spy } from '@/../tests/unit/test-utils.js'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrTableHeader', () => {
   it('should render simple header cell', async () => {
     const header = 'En-tête'
diff --git a/src/components/DsfrTable/DsfrTableHeaders.spec.js b/src/components/DsfrTable/DsfrTableHeaders.spec.js
@@ -1,11 +1,10 @@
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 import { fireEvent, render } from '@testing-library/vue'
 
 import DsfrTableHeaders from './DsfrTableHeaders.vue'
 
 import { spy } from '@/../tests/unit/test-utils.js'
 
-const VIcon = { props: ['name'], template: '<i :class="name"></i>' }
-
 describe('DsfrTableHeaders', () => {
   it('should render simple header row', async () => {
     // Given
diff --git a/src/components/DsfrTabs/DsfrTabs.spec.js b/src/components/DsfrTabs/DsfrTabs.spec.js
diff --git a/src/components/DsfrTag/DsfrTag.spec.js b/src/components/DsfrTag/DsfrTag.spec.js
diff --git a/src/components/DsfrToggleSwitch/DsfrToggleSwitch.spec.js b/src/components/DsfrToggleSwitch/DsfrToggleSwitch.spec.js
diff --git a/src/demo-app/App.vue b/src/demo-app/App.vue
diff --git a/src/demo-app/main.js b/src/demo-app/main.js
diff --git a/src/index.js b/src/index.js
diff --git a/src/stories/docs/02-guide.stories.mdx b/src/stories/docs/02-guide.stories.mdx
