Feat/design system (#379)

* accordion, badge,buttontitlebar

* feat(design-system): list,loader, popover, slider, pager, paging, panel, restitution

* feat(design-system) : table, tabs, title

* feat(design-system) : navigation

* feat(design-system) : header

* build(design-system): watch images gulp task

* feat(design-system) : drawer,footer,footer-client

* feat(design-system) : github

* feat(design-system) : form text

* feat(design-system) : form radioswitch, select, textarea and display code css

* feat(design-system) : form checkbox, datepicker, file, pass, radio, card, filter

* feat(design-system) : form filter, steps

* feat(design-system) : pages layouts

* feat(design-system) : style

* feat(design-system) : update sassPath code display

* feat(design-system): modal iframe

scripts/tasks/assets.js

@@ -116,14 +116,22 @@ gulp.task('iconfont', () =>
     .pipe(gulp.dest(path.join(coreDist, 'fonts/icons')))
 );
 
+gulp.task('copyiconfontcsstosass', () =>
+  gulp
+    .src(path.join(coreDist, 'fonts/icons', '*.css'))
+    .pipe(rename({ extname: '.scss' }))
+    .pipe(gulp.dest(path.join(coreDist, 'fonts/icons')))
+);
+
 gulp.task('assets', callback => {
   runSequence(
     'copymedia',
     'svgstore',
+    'iconfont',
     'copysvg',
     'copycore',
     'copyfonttypo',
-    'iconfont',
+    'copyiconfontcsstosass',
     callback
   );
 });

storybook/design-system/gulpfile.babel.js/clean.js

@@ -1,8 +1,11 @@
 import del from 'del';
 
 import config from './config';
-const { pathDest } = config;
+
+const { pathDest, pathImg } = config;
 
 const clean = () => del([`${pathDest}`]);
 
 export default clean;
+
+export const cleanImages = () => del([`${pathDest}/${pathImg}`]);

storybook/design-system/gulpfile.babel.js/config.js

@@ -16,4 +16,7 @@ export default {
   pathSvg: '/assets/icons',
   svgFiles: '/*.svg',
   pathSprite: '/assets/sprite',
+  pathImgFiles: '/assets/images',
+  imgFiles: '/*.{jpg,jpeg,svg,gif,png}',
+  pathFontToolkit: './node_modules/@axa-fr/react-toolkit-core/dist/assets/fonts/icons',
 };

storybook/design-system/gulpfile.babel.js/copy.js

@@ -5,8 +5,12 @@ import config from './config';
 
 const { pathSrc, pathDest, pathImgDist } = config;
 
-const copyImages = () => src(`${pathSrc}${pathImgDist}/**/*`)
+const copyAssets = () => src(`${pathSrc}${pathImgDist}/**/*`)
   .pipe(chmod(777))
   .pipe(dest(`${pathDest}${pathImgDist}`));
 
-export default copyImages;
+export default copyAssets;
+
+export const copyImages = () => src(`${pathSrc}${pathImgDist}/images/**/*`)
+  .pipe(chmod(777))
+  .pipe(dest(`${pathDest}${pathImgDist}/images`));

storybook/design-system/gulpfile.babel.js/copyiconfont.js

@@ -0,0 +1,8 @@
+import { src, dest } from 'gulp';
+import config from './config';
+
+const { pathDest, pathFontToolkit } = config;
+
+const copyIconfont = () => src(`${pathFontToolkit}/*.{svg,eot,ttf,woff}`).pipe(dest(`${pathDest}`));
+
+export default copyIconfont;

storybook/design-system/gulpfile.babel.js/index.js

@@ -1,17 +1,31 @@
 import { series } from 'gulp';
 
-import clean from './clean';
+import clean, { cleanImages } from './clean';
 import jsDev, { jsProd } from './js';
 import sassDev, { sassProd } from './sass';
 import pugDev, { pugProd } from './pug';
-import copyImages from './copy';
+import copyAssets, { copyImages } from './copy';
 import sprite from './sprite';
 import serve from './serve';
+import copyIconfont from './copyiconfont';
 
-const build = series(clean, jsProd, sassProd, sprite, pugProd, copyImages);
-const dev = series(clean, jsDev, sassDev, pugDev, copyImages, serve);
+const reloadImages = series(cleanImages, copyImages);
+const build = series(clean, jsProd, sassProd, sprite, pugProd, copyAssets, copyIconfont);
+const dev = series(clean, jsDev, sassDev, pugDev, copyAssets, copyIconfont, serve);
 
 export default build;
 export {
-  dev, build, clean, jsDev, jsProd, sassProd, sassDev, pugDev, pugProd, copyImages, sprite,
+  dev,
+  build,
+  clean,
+  jsDev,
+  jsProd,
+  sassProd,
+  sassDev,
+  pugDev,
+  pugProd,
+  copyAssets,
+  sprite,
+  copyIconfont,
+  reloadImages,
 };

storybook/design-system/gulpfile.babel.js/pug.js

@@ -5,12 +5,16 @@ import pretty from 'pretty';
 import pug from 'gulp-pug';
 import plumber from 'gulp-plumber';
 import fs from 'fs';
+import beautify from 'js-beautify';
 import fetch from 'node-fetch';
 import { reload } from './serve';
 import config from './config';
 import setClass from '../src/commons/js/setClass';
 import setClassActive from '../src/commons/js/setClassActive';
 
+const beautifyCss = beautify.css;
+const beautifyHtml = beautify.html;
+
 global.fetch = fetch;
 
 const { pathSrc, pathDest } = config;
@@ -33,12 +37,19 @@ const pugTsk = (baseurl = '') => {
       setClassActive,
       pugg,
       pretty,
+      fs,
+      beautifyCss,
+      beautifyHtml,
     },
     require,
     baseurl,
   };
 
-  return src([`${pathSrc}/index.pug`, `${pathSrc}/pages/**/*.pug`])
+  return src([
+    `${pathSrc}/index.pug`,
+    `${pathSrc}/pages/**/index.pug`,
+    `${pathSrc}/pages/**/iframe-*.pug`,
+  ])
     .pipe(plumber())
     .pipe(
       pug({

storybook/design-system/gulpfile.babel.js/sass.js

@@ -20,6 +20,7 @@ export const sassProd = () => src(`${pathSrc}${sassIndex}`)
       includePaths: ['node_modules'],
     }).on('error', sass.logError),
   )
+
   .pipe(
     autoprefixer({
       browsers: ['last 2 versions'],

storybook/design-system/gulpfile.babel.js/serve.js

@@ -4,6 +4,7 @@ import sass from './sass';
 import js from './js';
 import pug from './pug';
 import sprite from './sprite';
+import { reloadImages } from '.';
 import config from './config';
 
 const browserSync = create();
@@ -18,17 +19,21 @@ const {
   jsonPageFiles,
   jsonFiles,
   svgFiles,
+  pathImgFiles,
+  imgFiles,
   pathSvg,
 } = config;
 
+const initBrowserSync = () => browserSync.init({
+  port: 5001,
+  server: {
+    watch: true,
+    baseDir: pathDest,
+  },
+});
+
 const serve = () => {
-  browserSync.init({
-    port: 5001,
-    server: {
-      watch: true,
-      baseDir: pathDest,
-    },
-  });
+  initBrowserSync();
 
   watch([`${pathSrc}${sassFiles}`], series(sass));
   watch([`${pathSrc}${jsFiles}`], series(js));
@@ -44,6 +49,7 @@ const serve = () => {
     series(pug),
   );
   watch([`${pathSrc}${pathSvg}${svgFiles}`], series(sprite));
+  watch([`${pathSrc}${pathImgFiles}${imgFiles}`], series(reloadImages));
 };
 
 export default serve;