Feat/guidelines ds (#692)

* feat(delete): delete some files and unused components

* fix(glyphicon): size alert, badge, modal

* doc(contributing): update file, delete demo info

* build(copyicon): update path copyicon

* build(contributors): add gulp task

* build(githubinfo): add gulp task

* build(pug): update gulp task

* feat(index): add general styles and headerlinks instance

* feat(home): update pug

* feat(images): add all images

* feat(layout): update common layout pug

* feat(style): update common style

* feat(buttonlink): update buttonlink

* feat(cards): update cards

* feat(contributors): update contributors

* feat(footer): update footer

* feat(demo): update demo

* feat(header): update header

* feat(menu): update menu

* feat(headerlinks): add headerlinks

* feat(encart): update encart

* feat(component): update content, img, introheader, logo, page, pagelinks, tabs

* feat(data): update data menu

* build(gitignore): update pug icone ignore

* build(style): delete old

* feat(badge): update badge page

* feat(button): update button page

* feat(drawer): update drawer page

* feat(list): update list page

* feat(loader): update loader page

* feat(popover): update popover page

* feat(slider): update slider page

* feat(title): update title page

* feat(components): add components page

* feat(conduct): add code of conduct page

* feat(status): add component status page

* feat(contributors): add contributors page

* feat(changelog): add changelog page

* feat(issue): add issue page

* feat(howto): add howto page

* feat(github): add github page

* feat(getstarted): add getstarted page

* feat(access): add accessibility page

* feat(anim): add anim page

* feat(color): add color page

* feat(content): add content page

* feat(content): add grid page

* feat(icones): add icones page

* feat(spaces): add spaces page

* feat(typo): add typo page

* feat(guidelines): add guidelines page

* feat(home): update home page

* feat(alert): update alert page

* feat(footer): update footer page

* feat(checkbox): update checkbox page

* feat(datepicker): update datepicker page

* feat(file): update formfile page

* feat(pass): update pass page

* feat(radio): update radio page

* feat(radioswitch): update radio switch page

* feat(select): update select page

* feat(textinpu): update textinput page

* feat(textarea): update textarea page

* feat(nav): update nav page

* feat(pager): update pager page

* feat(step): update step page

* feat(stepnew): update step new page

* feat(table): update table page

* feat(tabs): update tabs page

* feat(titlebar): update titlebar page

* feat(accordion): update accordion page

* feat(footerclient): update footer-client page

* feat(form): update form page

* feat(formcard): update formcard page

* feat(formfilter): update formfilter page

* feat(formfilterinline): update formfilterinline page

* feat(header): update header page

* feat(modal): update modal page

* feat(paging): update paging page

* feat(panel): update panel page

* feat(restit): update restit page

* feat(fullform): update full form page

* feat(fulltable): update full table page

* feat(disabled): update disabled page

* feat(loading): add loading page

* feat(overtaking): add overtaking page

* feat(progress): add progress page

* feat(regress): add regress page

* feat(pattern): add pattern page

* build(ingore): contributors generate pug

* feat(home): update content

* doc(contributing): update docs

* ci(contributing): delete old css task npm

Co-authored-by: Samuel Gomez <contact@samuelgomez.fr>

.gitignore

@@ -30,7 +30,8 @@ tmp/
 .vs
 
 # Ignore icons pug file generate by Gulp task
-storybook/design-system/src/pages/style/icons/templates/*.pug
+storybook/design-system/src/pages/guidelines/icones/templates/*.pug
+storybook/design-system/src/pages/get-started/contributors/templates/contributors-page.pug
 
 # Ignore package-lock.json / yarn.lock in dependencies
 packages/**/package-lock.json

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing to @axa-fr/react-toolkit
 
-First, ensure you have Node.js < 12 and the [latest `npm`](https://docs.npmjs.com/).
+## Installation
 
 To get started with the repository:
 
@@ -10,42 +10,30 @@ cd react-toolkit
 npm install
 ```
 
-A post-install action is thrown. This action first install dependencies with ```lerna bootstrap``` & then build all packages with a custom command gulp.
+A post-install action is thrown. This action first install dependencies with `lerna bootstrap` & then build all packages with a custom command gulp.
 
 At this point you are ready to contribute.
 
 ## Additional installations
 
 This repository contains some projects used to display, explain components built previously.
 
-* *examples/demo* : a project using some components & react-oidc library
-* *storybook* :
-  * *design-system*: a design system web app rendering & exposing code to use components
-  * *storybook*: a storybook app to develop in isolated mode
-  * *styles*: part of design sytem & use as an explaination page of toolkit style
-
-
+```bash
+├───storybook
+│   ├───design-system : a design system web app rendering & exposing code to use components
+│   ├───storybook : a storybook app to develop in isolated mode
+```
 
 If you want to use these projects, you must:
 
-```sh
-cd examples/demo
-npm i
-```
-
 ```sh
 cd storybook/design-system
-npm i
+npm ci
 ```
 
 ```sh
 cd storybook/storybook
-npm i
-```
-
-```sh
-cd storybook/styles
-npm i
+npm ci
 ```
 
 ## How to work on a component
@@ -56,39 +44,28 @@ Into a terminal, to start to develop a component you can run
 npm run dev
 ```
 
-Or,if you want to run your component in watch mode, execting one of command below
+Or, if you want to run your component in watch mode, execting one of command below
 
 ```sh
 # If your component is in js
 npm run dev:js -- --scope=@axa-fr/react-toolkit-status
+
 # If your component is in TypeScript
 npm run dev:ts -- --scope=@axa-fr/react-toolkit-action
 ```
 
-*scope* refer to package name of your component you are working on.
+_scope_ refer to package name of your component you are working on.
 
 And then if you want to work on it, in isolation mode, you can run storybook
 
 ```sh
 npm run storybook
 ```
 
-After all this, if your development affect css, you can run
-
-```sh
-npx gulp all
-```
-
-to regenerate css
+After all this, if your development affect css, you can run `npm run style` to regenerate css
 
 ## Other usefull commands
 
-### Launch demo app
-
-```sh
-npm start
-```
-
 ### Run unit tests
 
 ```sh
@@ -99,9 +76,9 @@ By default, `npm test` also runs the linter.
 You can skip this by calling `jest` directly:
 
 ```sh
-$ npx jest
-$ npx jest --watch
-$ npx jest --config jest.config.json
+$ npm jest
+$ npm jest --watch
+$ npm jest --config jest.config.json
 # etc
 ```
 
@@ -111,8 +88,6 @@ $ npx jest --config jest.config.json
 npm test -- --coverage
 ```
 
-
-
 ## Pull Request
 
 Please respect the following [PULL_REQUEST_TEMPLATE.md](./PULL_REQUEST_TEMPLATE.md)

package.json

@@ -15,8 +15,6 @@
     "storybook:build": "npm -C ./storybook/storybook run storybook:build",
     "design": "npm -C ./storybook/design-system run start",
     "design:build": "npm -C ./storybook/design-system run build",
-    "css": "npm -C ./storybook/styles run css",
-    "css:build": "npm -C ./storybook/styles run css:build",
     "test": "jest --config jest.config.json",
     "cover": "jest --no-cache --config ./jest.config.json --coverage",
     "lint": "npm run lint:js && npm run lint:ts **/*.ts",

packages/Form/filter/src/filter.scss

@@ -70,6 +70,7 @@
         margin-right: 0.3125rem;
         color: $color-filter-selected-glyphicon-close;
         cursor: pointer;
+        width: 22px;
       }
     }
   }

packages/Modal/default/src/modal.scss

@@ -36,7 +36,7 @@
     bottom: 0;
     left: 0;
     z-index: 1040;
-    background-color: $color;
+    background-color: $color-axa;
 
     &.show {
       opacity: 0.5;

packages/alert/src/alert.scss

@@ -86,6 +86,7 @@ $typesLite: (
         top: 50%;
         margin-top: -50%;
         display: block;
+        width: 22px;
       }
     }
 

packages/badge/src/badge.scss

@@ -22,5 +22,8 @@ $types: (
     display: inline-block;
     min-width: 38px;
     padding-top: 0.4rem;
+    .glyphicon {
+      width: 22px;
+    }
   }
 }

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

@@ -7,7 +7,7 @@ import config from './config';
 
 const { pathSrc, pathDest, pathFontToolkit } = config;
 
-const pathIconPugTemplate = path.join(`${pathSrc}/pages/style/icons/`, 'templates');
+const pathIconPugTemplate = path.join(`${pathSrc}/pages/guidelines/icones/`, 'templates');
 
 const copyIcons = () => src(`${pathFontToolkit}/*.svg`).pipe(dest(`${pathDest}/iconsToolkit`));
 
@@ -40,7 +40,7 @@ ul.icons-list\n`;
     contentFile += `    span.icons-list__item-name ${svgFile} \n`;
   });
 
-  fs.writeFileSync(`${pathSrc}/pages/style/icons/templates/icons-page.pug`, contentFile);
+  fs.writeFileSync(`${pathIconPugTemplate}/icons-page.pug`, contentFile);
 };
 
 export default copyIcons;

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

@@ -0,0 +1,48 @@
+/* eslint-disable arrow-parens */
+import path from 'path';
+import fs from 'fs';
+import config from './config';
+
+const { pathSrc } = config;
+
+const pathContributorsPugTemplate = path.join(
+  `${pathSrc}/pages/get-started/contributors/`,
+  'templates',
+);
+
+const getContributors = async () => {
+  const response = await fetch(
+    'https://api.github.com/repos/AxaGuilDEv/react-toolkit/stats/contributors',
+  );
+  const responseJson = await response.json();
+  return responseJson;
+};
+
+const generateContributors = async () => {
+  const contributors = await getContributors();
+  const reservedContributors = contributors.reverse();
+  let contentFile = '.tk-contributors\n';
+
+  reservedContributors.forEach((contributor, index) => {
+    const { author, total, weeks } = contributor;
+    const { avatar_url: avatarUrl, html_url: htmlUrl, login } = author;
+    const additions = weeks.map(({ a }) => a).reduce((acc, curr) => acc + curr);
+    const deletions = weeks.map(({ d }) => d).reduce((acc, curr) => acc + curr);
+
+    contentFile += '  .tk-contributor\n';
+    contentFile += `    a.tk-contributor__link(href="${htmlUrl}" title="${login}") ${login}\n`;
+    contentFile += `    img.tk-contributor__avatar(src="${avatarUrl}" loading="lazy")\n`;
+    contentFile += `    span.tk-contributor__badge #${index + 1}\n`;
+    contentFile += `    span.tk-contributor__commits Commits : ${total}\n`;
+    contentFile += `    span.tk-contributor__additions Additions : ${additions} ++\n`;
+    contentFile += `    span.tk-contributor__deletions Deletions : ${deletions} --\n`;
+  });
+
+  if (!fs.existsSync(pathContributorsPugTemplate)) {
+    fs.mkdirSync(pathContributorsPugTemplate, { recursive: true });
+  }
+
+  fs.writeFileSync(`${pathContributorsPugTemplate}/contributors-page.pug`, contentFile);
+};
+
+export default generateContributors;

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

@@ -0,0 +1,20 @@
+/* eslint-disable arrow-parens */
+import fs from 'fs';
+import config from './config';
+
+const { pathSrc } = config;
+
+const files = ['CHANGELOG', 'CONTRIBUTING', 'CODE_OF_CONDUCT'];
+const components = ['changelog', 'how-to-contribute', 'code-of-conduct'];
+
+const generateGithubInfos = async () => {
+  files.forEach((file, index) => {
+    const content = fs.readFileSync(`../../${file}.md`, 'utf8');
+    fs.writeFileSync(
+      `${pathSrc}/pages/get-started/${components[index]}/markdown/content.md`,
+      content,
+    );
+  });
+};
+
+export default generateGithubInfos;

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

@@ -8,19 +8,34 @@ import copyAssets, { copyImages } from './copy';
 import sprite from './sprite';
 import serve from './serve';
 import copyIcons, { generatePugIcons } from './copyIcons';
+import generateGithubInfos from './generateGithubInfos';
+import generateContributors from './generateContributors';
 
 const reloadImages = series(cleanImages, copyImages);
 const build = series(
   clean,
   copyIcons,
+  generateGithubInfos,
   generatePugIcons,
   jsProd,
   sassProd,
   sprite,
   pugProd,
   copyAssets,
 );
-const dev = series(clean, copyIcons, generatePugIcons, jsDev, sassDev, pugDev, copyAssets, serve);
+
+const dev = series(
+  clean,
+  generateContributors,
+  copyIcons,
+  generateGithubInfos,
+  generatePugIcons,
+  jsDev,
+  sassDev,
+  pugDev,
+  copyAssets,
+  serve,
+);
 
 export default build;
 export {

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

@@ -47,8 +47,8 @@ const pugTsk = (baseurl = '') => {
 
   return src([
     `${pathSrc}/index.pug`,
-    `${pathSrc}/pages/**/index.pug`,
     `${pathSrc}/pages/**/iframe-*.pug`,
+    `${pathSrc}/pages/**/index.pug`,
   ])
     .pipe(plumber())
     .pipe(