Merge pull request #304 from dnum-mi/develop

RC8

Author: DaBadBunny

.storybook/preview.js

@@ -8,7 +8,7 @@ import '../src/main.css'
 
 import './theme.css'
 
-import VIcon from '../src/icons.js'
+import {OhVueIcon as VIcon} from 'oh-vue-icons'
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

cypress/plugins/index.js

@@ -12,15 +12,6 @@
 // For component testing 1/2
 const { startDevServer } = require('@cypress/vite-dev-server')
 
-module.exports = (on, config) => {
-  on('dev-server:start', options =>
-    startDevServer({
-      options,
-    }),
-  )
-
-  return config
-}
 module.exports = (on, config) => {
   // on('file:preprocessor', webpack({
   //  webpackOptions: require('@vue/cli-service/webpack.config'),

package-lock.json

@@ -14,7 +14,37 @@
   "types": "./types",
   "license": "MIT",
   "main": "./dist/vue-dsfr.umd.js",
-  "module": "./dist/vue-dsfr.esm.js",
+  "module": "./dist/vue-dsfr.mjs",
+  "exports": {
+    ".": {
+      "require": "./dist/vue-dsfr.umd.js",
+      "import": "./dist/vue-dsfr.mjs"
+    },
+    "./dist/vue-dsfr.css": {
+      "require": "./dist/vue-dsfr.css",
+      "import": "./dist/vue-dsfr.css"
+    },
+    "./dist/vue-dsfr-fonts.css": {
+      "require": "./dist/vue-dsfr-fonts.css",
+      "import": "./dist/vue-dsfr-fonts.css"
+    },
+    "./dist/vue-dsfr-fonts-essentials.css": {
+      "require": "./dist/vue-dsfr-fonts-essentials.css",
+      "import": "./dist/vue-dsfr-fonts-essentials.css"
+    },
+    "./styles": {
+      "require": "./dist/vue-dsfr.css",
+      "import": "./dist/vue-dsfr.css"
+    },
+    "./fonts": {
+      "require": "./dist/vue-dsfr-fonts.css",
+      "import": "./dist/vue-dsfr-fonts.css"
+    },
+    "./fonts-essentials": {
+      "require": "./dist/vue-dsfr-fonts-essentials.css",
+      "import": "./dist/vue-dsfr-fonts-essentials.css"
+    }
+  },
   "publishConfig": {
     "@laruiss:registry": "https://registry.npmjs.com",
     "access": "public"
@@ -30,7 +60,7 @@
     "build": "run-p build:css build:js",
     "postbuild": "copyfiles types/composable.d.ts dist/composable.d.ts",
     "build:css": "node build-css.mjs",
-    "build:js": "cross-env NODE_ENV=production rollup --config rollup.config.js",
+    "build:js": "cross-env NODE_ENV=production rollup -c",
     "demo-app": "vite",
     "vitest": "vitest",
     "coverage": "vitest run --coverage",
@@ -59,7 +89,7 @@
     "vue": "^3.2.31"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.8",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-syntax-jsx": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
@@ -82,15 +112,15 @@
     "@storybook/core-common": "^6.4.19",
     "@storybook/manager-webpack5": "^6.4.19",
     "@storybook/vue3": "^6.4.19",
-    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/user-event": "^13.5.0",
     "@testing-library/vue": "^6.5.1",
     "@types/jest": "^27.4.1",
     "@types/jsdom": "^16.2.14",
-    "@types/node": "^17.0.21",
+    "@types/node": "^17.0.23",
     "@types/vue": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.16.0",
+    "@typescript-eslint/parser": "^5.16.0",
     "@vitejs/plugin-vue": "^2.2.4",
     "@vitejs/plugin-vue-jsx": "^1.3.8",
     "@vue/compiler-sfc": "^3.2.31",
@@ -116,17 +146,17 @@
     "eslint-plugin-storybook": "^0.5.7",
     "eslint-plugin-vue": "^8.5.0",
     "globby": "^13.1.1",
-    "inquirer": "^8.2.1",
+    "inquirer": "^8.2.2",
     "jsdom": "^19.0.0",
-    "lint-staged": "^12.3.6",
+    "lint-staged": "^12.3.7",
     "mkdirp": "^1.0.4",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.12",
     "postcss-csso": "^6.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^14.0.2",
+    "postcss-import": "^14.1.0",
     "postcss-nested": "^5.0.6",
-    "postcss-preset-env": "^7.4.2",
+    "postcss-preset-env": "^7.4.3",
     "postcss-url": "^10.1.3",
     "rimraf": "^3.0.2",
     "rollup-plugin-css-only": "^3.1.0",
@@ -137,19 +167,20 @@
     "rollup-plugin-vue": "^6.0.0",
     "semantic-release": "^19.0.2",
     "start-server-and-test": "^1.14.0",
-    "storybook-builder-vite": "^0.1.20",
+    "storybook-builder-vite": "^0.1.21",
     "tsd-jsdoc": "^2.5.0",
-    "typescript": "^4.6.2",
+    "typescript": "^4.6.3",
     "vite": "^2.8.6",
-    "vitest": "^0.6.3",
+    "vitest": "^0.7.11",
     "vue-loader": "^17.0.0",
     "vue-router": "^4.0.14",
     "vue-router-mock": "^0.1.7",
-    "vue-tsc": "^0.32.1",
+    "vue-tsc": "^0.33.9",
     "vue-typegen": "^0.2.0",
     "yorkie": "^2.0.0"
   },
   "peerDependencies": {
+    "oh-vue-icons": "^1.0.0-rc2",
     "vue-router": "^4.0.14"
   },
   "optionalDependencies": {

package.json

@@ -1,3 +1,4 @@
+import { defineConfig } from 'rollup'
 import vue from 'rollup-plugin-vue'
 
 import { nodeResolve } from '@rollup/plugin-node-resolve'
@@ -23,15 +24,16 @@ const postcssPlugins = [
       'focus-visible-pseudo-class': false,
     },
   }),
-  csso,
+  csso(),
 ]
 
 const baseOutput = {
   globals: {
     vue: 'vue',
+    'oh-vue-icons': 'OhVueIcon',
+    'oh-vue-icons/icons': 'oh-vue-icons/icons',
+    'oh-vue-icons/icons/ri/index.js': 'oh-vue-icons/icons/ri/index.js',
     'vue-router': 'vue-router',
-    'oh-vue-icons/dist/v3/icon.es': 'VIcon',
-    'oh-vue-icons/icons': 'icons',
     'focus-trap': 'focus-trap',
     'focus-trap-vue': 'focus-trap-vue',
   },
@@ -42,8 +44,9 @@ const baseConfig = {
   external: [
     'vue',
     'vue-router',
-    'oh-vue-icons/dist/v3/icon.es',
+    'oh-vue-icons',
     'oh-vue-icons/icons',
+    'oh-vue-icons/icons/ri/index.js',
     'focus-trap',
     'focus-trap-vue',
   ],
@@ -62,13 +65,13 @@ const baseConfig = {
   ],
 }
 
-export default [
+export default defineConfig([
   // ESM build to be used with webpack/rollup.
   {
     ...baseConfig,
     output: {
       format: 'esm',
-      file: 'dist/vue-dsfr.esm.js',
+      file: 'dist/vue-dsfr.mjs',
       globals: baseOutput.globals,
       name: 'VueDsfr',
     },
@@ -113,4 +116,4 @@ export default [
       name: 'VueDsfr',
     },
   },
-]
+])

rollup.config.js

@@ -1,7 +1,7 @@
 import { mount } from '@cypress/vue'
 import DsfrAccordion from './DsfrAccordion.vue'
 import DsfrAccordionsGroup from './DsfrAccordionsGroup.vue'
-import VIcon from '../../icons.js'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 
 import '../../main.css'
 

src/components/DsfrAccordion/DsfrAccordion.e2e.js

@@ -1,10 +1,9 @@
 import { fireEvent, render } from '@testing-library/vue'
-import VIcon from '../../icons.js'
+import { OhVueIcon as VIcon } from 'oh-vue-icons'
 // import '@gouvfr/dsfr/dist/core/core.module.js'
 
 import DsfrAccordion from './DsfrAccordion.vue'
 
-
 describe('DsfrAccordion', () => {
   it('should render a simple accordion', async () => {
     const title = 'Intitulé de l’accordéon'

src/components/DsfrAccordion/DsfrAccordion.spec.js

@@ -9,10 +9,21 @@ export default {
       control: 'boolean',
       description: 'Permet de voir le composant dans les deux **thèmes** : **clair** (`false`, défaut) et **sombre** (`true`).\n\n*N.B. : Ne fait pas partie du composant.*',
     },
+    id: {
+      control: 'text',
+      description: '(optionnel) Valeur de l’attribut `id` de l’accordéon. Par défaut, un id pseudo-aléatoire sera donné.',
+    },
     title: {
       control: 'text',
       description: 'Intitulé de l’accordéon',
     },
+    expand: {
+      description: 'Événement déclenché au clic sur le titre de l’accordéon et qui renvoie l’`id` de l’accordéon correspondant.',
+    },
+    expandedId: {
+      control: 'text',
+      description: 'Id de l’accordéon déplié',
+    },
   },
 }
 
@@ -122,3 +133,50 @@ AccordeonDansUnAccordeon.args = {
   title: 'Un titre d’accordéon',
   titleSub: 'Accordéon dans l’accordéon',
 }
+
+export const AccordeonTitreCustom = (args) => ({
+  components: {
+    DsfrAccordion,
+    DsfrAccordionsGroup
+  },
+
+  data () {
+    return {
+      ...args,
+      title1: args.title1,
+      title2: args.title2,
+      expandedId: undefined,
+    }
+  },
+
+  template: `
+    <DsfrAccordionsGroup>
+      <li>
+        <DsfrAccordion
+          :expanded-id="expandedId"
+          @expand="expandedId = $event"
+        >
+        <template #title><h1>{{title1}}</h1></template>
+        </DsfrAccordion>
+      </li>
+      <li>
+        <DsfrAccordion
+          :title="title2"
+          :expanded-id="expandedId"
+          @expand="expandedId = $event"
+        >
+        </DsfrAccordion>
+      </li>
+    </DsfrAccordionsGroup>
+  `,
+
+  mounted () {
+    document.body.parentElement.setAttribute('data-fr-theme', this.dark ? 'dark' : 'light')
+  },
+
+})
+AccordeonTitreCustom.args = {
+  dark: false,
+  title1: 'Un titre d’accordéon customisé',
+  title2: 'Un autre titre d’accordéon'
+}

src/components/DsfrAccordion/DsfrAccordion.stories.js

@@ -24,7 +24,6 @@ export default defineComponent({
       default: 'Sans intitulé',
     },
   },
-
   emits: ['expand'],
 
   computed: {
@@ -51,20 +50,24 @@ export default defineComponent({
         :aria-controls="id"
         @click="toggleExpanded()"
       >
-        <span>{{ title }}</span>
+      <!-- @slot Slot pour le contenu personnalisé du titre de l’accordéon. Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
+        <slot name="title">
+          <span>{{ title }}</span>
+        </slot>
       </button>
     </h3>
     <div
       :id="id"
       class="fr-collapse"
       :class="{ 'fr-collapse--expanded': expanded }"
     >
+      <!-- @slot Slot par défaut pour le contenu de l’accordéon: sera dans `<div class="fr-collapse">` -->
       <slot />
     </div>
   </section>
 </template>
 
-<style src="@gouvfr/dsfr/dist/component/accordion/accordion.main.css" />
+<style src="@gouvfr/dsfr/dist/component/accordion/accordion.main.min.css" />
 
 <style scoped>
 .fr-collapse--expanded {