diff --git a/scripts/tasks/assets.js b/scripts/tasks/assets.js index 220a30cbf..d31d1ae1d 100644 --- a/scripts/tasks/assets.js +++ b/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 ); }); diff --git a/storybook/design-system/gulpfile.babel.js/clean.js b/storybook/design-system/gulpfile.babel.js/clean.js index 1e3fcd898..33921f418 100644 --- a/storybook/design-system/gulpfile.babel.js/clean.js +++ b/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}`]); diff --git a/storybook/design-system/gulpfile.babel.js/config.js b/storybook/design-system/gulpfile.babel.js/config.js index 2fbb1341e..bdfe64a91 100644 --- a/storybook/design-system/gulpfile.babel.js/config.js +++ b/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', }; diff --git a/storybook/design-system/gulpfile.babel.js/copy.js b/storybook/design-system/gulpfile.babel.js/copy.js index 697fcd872..e617e037d 100644 --- a/storybook/design-system/gulpfile.babel.js/copy.js +++ b/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`)); diff --git a/storybook/design-system/gulpfile.babel.js/copyiconfont.js b/storybook/design-system/gulpfile.babel.js/copyiconfont.js new file mode 100644 index 000000000..184ea73e1 --- /dev/null +++ b/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; diff --git a/storybook/design-system/gulpfile.babel.js/index.js b/storybook/design-system/gulpfile.babel.js/index.js index fb29f1ade..276a007ec 100644 --- a/storybook/design-system/gulpfile.babel.js/index.js +++ b/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, }; diff --git a/storybook/design-system/gulpfile.babel.js/pug.js b/storybook/design-system/gulpfile.babel.js/pug.js index 9a30f75d3..92faaa6e3 100644 --- a/storybook/design-system/gulpfile.babel.js/pug.js +++ b/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({ diff --git a/storybook/design-system/gulpfile.babel.js/sass.js b/storybook/design-system/gulpfile.babel.js/sass.js index b644446bf..65321f54e 100644 --- a/storybook/design-system/gulpfile.babel.js/sass.js +++ b/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'], diff --git a/storybook/design-system/gulpfile.babel.js/serve.js b/storybook/design-system/gulpfile.babel.js/serve.js index 8b8ad5292..76eea72b0 100644 --- a/storybook/design-system/gulpfile.babel.js/serve.js +++ b/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; diff --git a/storybook/design-system/package-lock.json b/storybook/design-system/package-lock.json index 2490aaca6..1faa5e797 100644 --- a/storybook/design-system/package-lock.json +++ b/storybook/design-system/package-lock.json @@ -1,6 +1,6 @@ { "name": "@axa-fr/design-system", - "version": "1.2.9", + "version": "1.2.13", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1058,6 +1058,14 @@ "integrity": "sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==", "dev": true }, + "add-dom-event-listener": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/add-dom-event-listener/-/add-dom-event-listener-1.1.0.tgz", + "integrity": "sha512-WCxx1ixHT0GQU9hb0KI/mhgRQhnU+U3GvwY6ZvVjYq8rsihIGoaIOUbY0yMPBxLH5MDtr0kz3fisWGNcbWW7Jw==", + "requires": { + "object-assign": "4.x" + } + }, "after": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", @@ -1068,7 +1076,6 @@ "version": "6.10.0", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.0.tgz", "integrity": "sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==", - "dev": true, "requires": { "fast-deep-equal": "^2.0.1", "fast-json-stable-stringify": "^2.0.0", @@ -1087,6 +1094,11 @@ "repeat-string": "^1.5.2" } }, + "amdefine": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", + "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=" + }, "ansi-colors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-1.1.0.tgz", @@ -1132,8 +1144,7 @@ "ansi-regex": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", - "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", - "dev": true + "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=" }, "ansi-styles": { "version": "3.2.1", @@ -1180,12 +1191,26 @@ "buffer-equal": "^1.0.0" } }, + "aproba": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz", + "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==" + }, "archy": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=", "dev": true }, + "are-we-there-yet": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz", + "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==", + "requires": { + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" + } + }, "argparse": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", @@ -1255,8 +1280,7 @@ "array-find-index": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", - "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=", - "dev": true + "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=" }, "array-includes": { "version": "3.0.3", @@ -1383,7 +1407,6 @@ "version": "0.2.4", "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz", "integrity": "sha512-jxwzQpLQjSmWXgwaCZE9Nz+glAG01yF1QnWgbhGwHI5A6FRIEY6IVqtHhIepHqI7/kyEyQEagBC5mBEFlIYvdg==", - "dev": true, "requires": { "safer-buffer": "~2.1.0" } @@ -1428,8 +1451,7 @@ "assert-plus": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", - "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true + "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=" }, "assign-symbols": { "version": "1.0.0", @@ -1487,6 +1509,11 @@ "integrity": "sha1-dhfBkXQB/Yykooqtzj266Yr+tDI=", "dev": true }, + "async-foreach": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", + "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI=" + }, "async-limiter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.0.tgz", @@ -1505,8 +1532,7 @@ "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", - "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=", - "dev": true + "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=" }, "atob": { "version": "2.1.2", @@ -1531,14 +1557,12 @@ "aws-sign2": { "version": "0.7.0", "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz", - "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=", - "dev": true + "integrity": "sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=" }, "aws4": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", - "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==", - "dev": true + "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, "axios": { "version": "0.17.1", @@ -2222,7 +2246,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", - "dev": true, "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" @@ -2231,14 +2254,12 @@ "core-js": { "version": "2.6.5", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", - "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==", - "dev": true + "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==" }, "regenerator-runtime": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" } } }, @@ -2450,7 +2471,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz", "integrity": "sha1-pDAdOJtqQ/m2f/PKEaP2Y342Dp4=", - "dev": true, "requires": { "tweetnacl": "^0.14.3" } @@ -2486,6 +2506,14 @@ "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==", "dev": true }, + "block-stream": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz", + "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=", + "requires": { + "inherits": "~2.0.0" + } + }, "bn.js": { "version": "4.11.8", "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz", @@ -2903,8 +2931,23 @@ "camelcase": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz", - "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=", - "dev": true + "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=" + }, + "camelcase-keys": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", + "requires": { + "camelcase": "^2.0.0", + "map-obj": "^1.0.0" + }, + "dependencies": { + "camelcase": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", + "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=" + } + } }, "caniuse-lite": { "version": "1.0.30000963", @@ -2915,8 +2958,7 @@ "caseless": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", - "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=", - "dev": true + "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=" }, "ccount": { "version": "1.0.3", @@ -3054,6 +3096,11 @@ } } }, + "classnames": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", + "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -3082,7 +3129,6 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", - "dev": true, "requires": { "string-width": "^1.0.1", "strip-ansi": "^3.0.1", @@ -3148,8 +3194,7 @@ "code-point-at": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", - "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=", - "dev": true + "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, "collapse-white-space": { "version": "1.0.4", @@ -3271,7 +3316,6 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz", "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==", - "dev": true, "requires": { "delayed-stream": "~1.0.0" } @@ -3292,12 +3336,25 @@ "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=", "dev": true }, + "component-classes": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/component-classes/-/component-classes-1.2.6.tgz", + "integrity": "sha1-xkI5TDYYpNiwuJGe/Mu9kw5c1pE=", + "requires": { + "component-indexof": "0.0.3" + } + }, "component-emitter": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=", "dev": true }, + "component-indexof": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/component-indexof/-/component-indexof-0.0.3.tgz", + "integrity": "sha1-EdCRMSI5648yyPJa6csAL/6NPCQ=" + }, "component-inherit": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", @@ -3393,6 +3450,11 @@ "date-now": "^0.1.4" } }, + "console-control-strings": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz", + "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=" + }, "constantinople": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz", @@ -3482,8 +3544,7 @@ "core-util-is": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz", - "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", - "dev": true + "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=" }, "cosmiconfig": { "version": "5.2.0", @@ -3616,6 +3677,15 @@ "urix": "^0.1.0" } }, + "css-animation": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/css-animation/-/css-animation-1.6.1.tgz", + "integrity": "sha512-/48+/BaEaHRY6kNQ2OIPzKf9A6g8WjZYjhiNDNuIVbsm5tXCGIAsHDjB4Xu1C4vXJtUWZo26O68OQkDpNBaPog==", + "requires": { + "babel-runtime": "6.x", + "component-classes": "^1.2.5" + } + }, "css-select": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.0.2.tgz", @@ -3713,7 +3783,6 @@ "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=", - "dev": true, "requires": { "array-find-index": "^1.0.1" } @@ -3743,7 +3812,6 @@ "version": "1.14.1", "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz", "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=", - "dev": true, "requires": { "assert-plus": "^1.0.0" } @@ -3800,8 +3868,7 @@ "decamelize": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=", - "dev": true + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=" }, "decamelize-keys": { "version": "1.1.0", @@ -3937,8 +4004,12 @@ "delayed-stream": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", - "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true + "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" + }, + "delegates": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", + "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=" }, "depd": { "version": "1.1.2", @@ -4089,6 +4160,11 @@ "integrity": "sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=", "dev": true }, + "dom-align": { + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.10.2.tgz", + "integrity": "sha512-AYZUzLepy05E9bCY4ExoqHrrIlM49PEak9oF93JEFoibqKL0F7w5DLM70/rosLOawerWZ3MlepQcl+EmHskOyw==" + }, "dom-serializer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.1.tgz", @@ -4192,7 +4268,6 @@ "version": "0.1.2", "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz", "integrity": "sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=", - "dev": true, "requires": { "jsbn": "~0.1.0", "safer-buffer": "^2.1.0" @@ -4381,7 +4456,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", - "dev": true, "requires": { "is-arrayish": "^0.2.1" } @@ -4470,8 +4544,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "eslint": { "version": "5.16.0", @@ -5017,8 +5090,7 @@ "extend": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", - "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", - "dev": true + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==" }, "extend-shallow": { "version": "2.0.1", @@ -5133,8 +5205,7 @@ "extsprintf": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", - "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", - "dev": true + "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=" }, "fancy-log": { "version": "1.3.3", @@ -5151,8 +5222,7 @@ "fast-deep-equal": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz", - "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=", - "dev": true + "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=" }, "fast-glob": { "version": "2.2.6", @@ -5188,8 +5258,7 @@ "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", - "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", - "dev": true + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" }, "fast-levenshtein": { "version": "2.0.6", @@ -5446,14 +5515,12 @@ "forever-agent": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", - "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=", - "dev": true + "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=" }, "form-data": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.3.tgz", "integrity": "sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==", - "dev": true, "requires": { "asynckit": "^0.4.0", "combined-stream": "^1.0.6", @@ -6049,6 +6116,17 @@ } } }, + "fstream": { + "version": "1.0.12", + "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz", + "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==", + "requires": { + "graceful-fs": "^4.1.2", + "inherits": "~2.0.0", + "mkdirp": ">=0.5 0", + "rimraf": "2" + } + }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -6061,6 +6139,29 @@ "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=", "dev": true }, + "gauge": { + "version": "2.7.4", + "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", + "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=", + "requires": { + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" + } + }, + "gaze": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz", + "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==", + "requires": { + "globule": "^1.0.0" + } + }, "get-assigned-identifiers": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/get-assigned-identifiers/-/get-assigned-identifiers-1.2.0.tgz", @@ -6070,8 +6171,12 @@ "get-caller-file": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz", - "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==", - "dev": true + "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==" + }, + "get-stdin": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz", + "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=" }, "get-stream": { "version": "4.1.0", @@ -6104,7 +6209,6 @@ "version": "0.1.7", "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=", - "dev": true, "requires": { "assert-plus": "^1.0.0" } @@ -6244,6 +6348,16 @@ "integrity": "sha1-L0SUrIkZ43Z8XLtpHp9GMyQoXUM=", "dev": true }, + "globule": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz", + "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==", + "requires": { + "glob": "~7.1.1", + "lodash": "~4.17.10", + "minimatch": "~3.0.2" + } + }, "glogg": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/glogg/-/glogg-1.0.2.tgz", @@ -6273,8 +6387,7 @@ "graceful-fs": { "version": "4.1.15", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz", - "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==", - "dev": true + "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==" }, "growl": { "version": "1.10.5", @@ -6731,14 +6844,12 @@ "har-schema": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", - "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=", - "dev": true + "integrity": "sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=" }, "har-validator": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz", "integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==", - "dev": true, "requires": { "ajv": "^6.5.5", "har-schema": "^2.0.0" @@ -6757,7 +6868,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=", - "dev": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6798,6 +6908,11 @@ "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q=", "dev": true }, + "has-unicode": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz", + "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=" + }, "has-value": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz", @@ -6899,8 +7014,7 @@ "hosted-git-info": { "version": "2.7.1", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.7.1.tgz", - "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==", - "dev": true + "integrity": "sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==" }, "html-tags": { "version": "2.0.0", @@ -6976,7 +7090,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz", "integrity": "sha1-muzZJRFHcvPZW2WmCruPfBj7rOE=", - "dev": true, "requires": { "assert-plus": "^1.0.0", "jsprim": "^1.2.2", @@ -7038,6 +7151,19 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, + "in-publish": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz", + "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=" + }, + "indent-string": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz", + "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=", + "requires": { + "repeating": "^2.0.0" + } + }, "indexes-of": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", @@ -7204,8 +7330,7 @@ "invert-kv": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", - "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=", - "dev": true + "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=" }, "is-absolute": { "version": "1.0.0", @@ -7251,8 +7376,7 @@ "is-arrayish": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", - "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=", - "dev": true + "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=" }, "is-binary-path": { "version": "1.0.1", @@ -7353,7 +7477,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz", "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=", - "dev": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7362,7 +7485,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "dev": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7514,8 +7636,7 @@ "is-typedarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz", - "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", - "dev": true + "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=" }, "is-unc-path": { "version": "1.0.0", @@ -7529,8 +7650,7 @@ "is-utf8": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz", - "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=", - "dev": true + "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=" }, "is-valid-glob": { "version": "1.0.0", @@ -7585,8 +7705,7 @@ "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", - "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=", - "dev": true + "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=" }, "isobject": { "version": "3.0.1", @@ -7619,18 +7738,22 @@ "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", - "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", - "dev": true + "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=" + }, + "js-base64": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz", + "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==" }, "js-beautify": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.9.1.tgz", - "integrity": "sha512-oxxvVZdOdUfzk8IOLBF2XUZvl2GoBEfA+b0of4u2EBY/46NlXasi8JdFvazA5lCrf9/lQhTjyVy2QCUW7iq0MQ==", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/js-beautify/-/js-beautify-1.10.2.tgz", + "integrity": "sha512-ZtBYyNUYJIsBWERnQP0rPN9KjkrDfJcMjuVGcvXOUJrD1zmOGwhRwQ4msG+HJ+Ni/FA7+sRQEMYVzdTQDvnzvQ==", "requires": { "config-chain": "^1.1.12", - "editorconfig": "^0.15.2", + "editorconfig": "^0.15.3", "glob": "^7.1.3", - "mkdirp": "~0.5.0", + "mkdirp": "~0.5.1", "nopt": "~4.0.1" } }, @@ -7649,8 +7772,7 @@ "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { "version": "3.13.1", @@ -7665,8 +7787,7 @@ "jsbn": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", - "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", - "dev": true + "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=" }, "jsesc": { "version": "2.5.2", @@ -7683,14 +7804,12 @@ "json-schema": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz", - "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=", - "dev": true + "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=" }, "json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", - "dev": true + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" }, "json-stable-stringify": { "version": "0.0.1", @@ -7710,8 +7829,7 @@ "json-stringify-safe": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz", - "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=", - "dev": true + "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=" }, "json5": { "version": "2.1.0", @@ -7755,7 +7873,6 @@ "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=", - "dev": true, "requires": { "assert-plus": "1.0.0", "extsprintf": "1.3.0", @@ -7781,6 +7898,15 @@ "markdown-it": "^8.0.0" } }, + "jstransformer-scss": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/jstransformer-scss/-/jstransformer-scss-1.0.0.tgz", + "integrity": "sha1-uuOMsRL104hxIQwiyc9KFqDp9zg=", + "requires": { + "extend-shallow": "^2.0.1", + "node-sass": "^4.0.0" + } + }, "jsx-ast-utils": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.1.0.tgz", @@ -7882,7 +8008,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=", - "dev": true, "requires": { "invert-kv": "^1.0.0" } @@ -7946,7 +8071,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", - "dev": true, "requires": { "graceful-fs": "^4.1.2", "parse-json": "^2.2.0", @@ -7958,8 +8082,7 @@ "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" } } }, @@ -8080,8 +8203,7 @@ "lodash._getnative": { "version": "3.9.1", "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz", - "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=", - "dev": true + "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=" }, "lodash._topath": { "version": "3.8.1", @@ -8107,14 +8229,12 @@ "lodash.isarguments": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz", - "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=", - "dev": true + "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=" }, "lodash.isarray": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz", - "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=", - "dev": true + "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=" }, "lodash.isfinite": { "version": "3.3.2", @@ -8138,7 +8258,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz", "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=", - "dev": true, "requires": { "lodash._getnative": "^3.0.0", "lodash.isarguments": "^3.0.0", @@ -8229,7 +8348,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -8238,7 +8356,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz", "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=", - "dev": true, "requires": { "currently-unhandled": "^0.4.1", "signal-exit": "^3.0.0" @@ -8321,8 +8438,7 @@ "map-obj": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz", - "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", - "dev": true + "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=" }, "map-visit": { "version": "1.0.0", @@ -8476,6 +8592,30 @@ "integrity": "sha1-htcJCzDORV1j+64S3aUaR93K+bI=", "dev": true }, + "meow": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", + "requires": { + "camelcase-keys": "^2.0.0", + "decamelize": "^1.1.2", + "loud-rejection": "^1.0.0", + "map-obj": "^1.0.1", + "minimist": "^1.1.3", + "normalize-package-data": "^2.3.4", + "object-assign": "^4.0.1", + "read-pkg-up": "^1.0.1", + "redent": "^1.0.0", + "trim-newlines": "^1.0.0" + }, + "dependencies": { + "minimist": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" + } + } + }, "merge2": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.2.3.tgz", @@ -8549,14 +8689,12 @@ "mime-db": { "version": "1.40.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz", - "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==", - "dev": true + "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==" }, "mime-types": { "version": "2.1.24", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz", "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==", - "dev": true, "requires": { "mime-db": "1.40.0" } @@ -8752,9 +8890,7 @@ "nan": { "version": "2.13.2", "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz", - "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==", - "dev": true, - "optional": true + "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==" }, "nanomatch": { "version": "1.2.13", @@ -8832,6 +8968,40 @@ "integrity": "sha512-YuZKluhWGJwCcUu4RlZstdAxr8bFfOVHakc1mplwHkk8J+tqM1Y5yraYvIUpeX8aY7+crCwiELJq7Vl0o0LWXw==", "dev": true }, + "node-gyp": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz", + "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==", + "requires": { + "fstream": "^1.0.0", + "glob": "^7.0.3", + "graceful-fs": "^4.1.2", + "mkdirp": "^0.5.0", + "nopt": "2 || 3", + "npmlog": "0 || 1 || 2 || 3 || 4", + "osenv": "0", + "request": "^2.87.0", + "rimraf": "2", + "semver": "~5.3.0", + "tar": "^2.0.0", + "which": "1" + }, + "dependencies": { + "nopt": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz", + "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=", + "requires": { + "abbrev": "1" + } + }, + "semver": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=" + } + } + }, "node-modules-regexp": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz", @@ -8846,6 +9016,63 @@ "semver": "^5.3.0" } }, + "node-sass": { + "version": "4.12.0", + "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz", + "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==", + "requires": { + "async-foreach": "^0.1.3", + "chalk": "^1.1.1", + "cross-spawn": "^3.0.0", + "gaze": "^1.0.0", + "get-stdin": "^4.0.1", + "glob": "^7.0.3", + "in-publish": "^2.0.0", + "lodash": "^4.17.11", + "meow": "^3.7.0", + "mkdirp": "^0.5.1", + "nan": "^2.13.2", + "node-gyp": "^3.8.0", + "npmlog": "^4.0.0", + "request": "^2.88.0", + "sass-graph": "^2.2.4", + "stdout-stream": "^1.4.0", + "true-case-path": "^1.0.2" + }, + "dependencies": { + "ansi-styles": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", + "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=" + }, + "chalk": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", + "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=", + "requires": { + "ansi-styles": "^2.2.1", + "escape-string-regexp": "^1.0.2", + "has-ansi": "^2.0.0", + "strip-ansi": "^3.0.0", + "supports-color": "^2.0.0" + } + }, + "cross-spawn": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", + "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=", + "requires": { + "lru-cache": "^4.0.1", + "which": "^1.2.9" + } + }, + "supports-color": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", + "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=" + } + } + }, "nopt": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", @@ -8859,7 +9086,6 @@ "version": "2.5.0", "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz", "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==", - "dev": true, "requires": { "hosted-git-info": "^2.1.4", "resolve": "^1.10.0", @@ -8981,6 +9207,17 @@ "path-key": "^2.0.0" } }, + "npmlog": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", + "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "requires": { + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" + } + }, "nth-check": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz", @@ -8999,20 +9236,17 @@ "number-is-nan": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz", - "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", - "dev": true + "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=" }, "oauth-sign": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", - "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==", - "dev": true + "integrity": "sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ==" }, "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", - "dev": true + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, "object-component": { "version": "0.0.3", @@ -9235,7 +9469,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", - "dev": true, "requires": { "lcid": "^1.0.0" } @@ -9375,7 +9608,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", - "dev": true, "requires": { "error-ex": "^1.2.0" } @@ -9459,8 +9691,7 @@ "path-parse": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz", - "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==", - "dev": true + "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==" }, "path-platform": { "version": "0.11.15", @@ -9487,7 +9718,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", - "dev": true, "requires": { "graceful-fs": "^4.1.2", "pify": "^2.0.0", @@ -9497,8 +9727,7 @@ "pify": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", - "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", - "dev": true + "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=" } } }, @@ -9524,8 +9753,7 @@ "performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", - "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=", - "dev": true + "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=" }, "phantomjs-prebuilt": { "version": "2.1.16", @@ -9592,14 +9820,12 @@ "pinkie": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz", - "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=", - "dev": true + "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=" }, "pinkie-promise": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", - "dev": true, "requires": { "pinkie": "^2.0.0" } @@ -9852,8 +10078,7 @@ "process-nextick-args": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz", - "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", - "dev": true + "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==" }, "progress": { "version": "2.0.3", @@ -9870,6 +10095,16 @@ "asap": "~2.0.3" } }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", @@ -9883,8 +10118,7 @@ "psl": { "version": "1.1.31", "resolved": "https://registry.npmjs.org/psl/-/psl-1.1.31.tgz", - "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==", - "dev": true + "integrity": "sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw==" }, "public-encrypt": { "version": "4.0.3", @@ -10090,8 +10324,7 @@ "punycode": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz", - "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=", - "dev": true + "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=" }, "q": { "version": "1.5.1", @@ -10123,6 +10356,14 @@ "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=", "dev": true }, + "raf": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", + "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", + "requires": { + "performance-now": "^2.1.0" + } + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -10160,6 +10401,92 @@ "unpipe": "1.0.0" } }, + "rc-align": { + "version": "2.4.5", + "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-2.4.5.tgz", + "integrity": "sha512-nv9wYUYdfyfK+qskThf4BQUSIadeI/dCsfaMZfNEoxm9HwOIioQ+LyqmMK6jWHAZQgOzMLaqawhuBXlF63vgjw==", + "requires": { + "babel-runtime": "^6.26.0", + "dom-align": "^1.7.0", + "prop-types": "^15.5.8", + "rc-util": "^4.0.4" + } + }, + "rc-animate": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/rc-animate/-/rc-animate-2.10.0.tgz", + "integrity": "sha512-gZM3WteZO0e3X8B71KP0bs95EY2tAPRuiZyKnlhdLpOjTX/64SrhDZM3pT2Z8mJjKWNiiB5q2SSSf+BD8ljwVw==", + "requires": { + "babel-runtime": "6.x", + "classnames": "^2.2.6", + "css-animation": "^1.3.2", + "prop-types": "15.x", + "raf": "^3.4.0", + "rc-util": "^4.8.0", + "react-lifecycles-compat": "^3.0.4" + } + }, + "rc-slider": { + "version": "8.7.1", + "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.7.1.tgz", + "integrity": "sha512-WMT5mRFUEcrLWwTxsyS8jYmlaMsTVCZIGENLikHsNv+tE8ThU2lCoPfi/xFNUfJFNFSBFP3MwPez9ZsJmNp13g==", + "requires": { + "babel-runtime": "6.x", + "classnames": "^2.2.5", + "prop-types": "^15.5.4", + "rc-tooltip": "^3.7.0", + "rc-util": "^4.0.4", + "react-lifecycles-compat": "^3.0.4", + "shallowequal": "^1.1.0", + "warning": "^4.0.3" + } + }, + "rc-tooltip": { + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-3.7.3.tgz", + "integrity": "sha512-dE2ibukxxkrde7wH9W8ozHKUO4aQnPZ6qBHtrTH9LoO836PjDdiaWO73fgPB05VfJs9FbZdmGPVEbXCeOP99Ww==", + "requires": { + "babel-runtime": "6.x", + "prop-types": "^15.5.8", + "rc-trigger": "^2.2.2" + } + }, + "rc-trigger": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-2.6.5.tgz", + "integrity": "sha512-m6Cts9hLeZWsTvWnuMm7oElhf+03GOjOLfTuU0QmdB9ZrW7jR2IpI5rpNM7i9MvAAlMAmTx5Zr7g3uu/aMvZAw==", + "requires": { + "babel-runtime": "6.x", + "classnames": "^2.2.6", + "prop-types": "15.x", + "rc-align": "^2.4.0", + "rc-animate": "2.x", + "rc-util": "^4.4.0", + "react-lifecycles-compat": "^3.0.4" + } + }, + "rc-util": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-4.11.0.tgz", + "integrity": "sha512-nB29kXOXsSVjBkWfH+Z1GVh6tRg7XGZtZ0Yfie+OI0stCDixGQ1cPrS6iYxlg+AV2St6COCK5MFrCmpTgghh0w==", + "requires": { + "add-dom-event-listener": "^1.1.0", + "babel-runtime": "6.x", + "prop-types": "^15.5.10", + "react-lifecycles-compat": "^3.0.4", + "shallowequal": "^0.2.2" + }, + "dependencies": { + "shallowequal": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz", + "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=", + "requires": { + "lodash.keys": "^3.1.2" + } + } + } + }, "react-datepicker": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-2.5.0.tgz", @@ -10209,8 +10536,12 @@ "react-is": { "version": "16.8.6", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", - "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==", - "dev": true + "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" + }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, "react-onclickoutside": { "version": "6.8.0", @@ -10231,7 +10562,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", - "dev": true, "requires": { "load-json-file": "^1.0.0", "normalize-package-data": "^2.3.2", @@ -10242,7 +10572,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", - "dev": true, "requires": { "find-up": "^1.0.0", "read-pkg": "^1.0.0" @@ -10252,7 +10581,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", - "dev": true, "requires": { "path-exists": "^2.0.0", "pinkie-promise": "^2.0.0" @@ -10262,7 +10590,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", - "dev": true, "requires": { "pinkie-promise": "^2.0.0" } @@ -10273,7 +10600,6 @@ "version": "2.3.6", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", - "dev": true, "requires": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -10287,8 +10613,7 @@ "isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", - "dev": true + "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=" } } }, @@ -10312,6 +10637,15 @@ "resolve": "^1.1.6" } }, + "redent": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz", + "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=", + "requires": { + "indent-string": "^2.1.0", + "strip-indent": "^1.0.1" + } + }, "regenerate": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.0.tgz", @@ -10521,7 +10855,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz", "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=", - "dev": true, "requires": { "is-finite": "^1.0.0" } @@ -10547,7 +10880,6 @@ "version": "2.88.0", "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz", "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==", - "dev": true, "requires": { "aws-sign2": "~0.7.0", "aws4": "^1.8.0", @@ -10574,8 +10906,7 @@ "qs": { "version": "6.5.2", "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz", - "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==", - "dev": true + "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==" } } }, @@ -10591,14 +10922,12 @@ "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", - "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=", - "dev": true + "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=" }, "require-main-filename": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", - "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", - "dev": true + "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=" }, "requires-port": { "version": "1.0.0", @@ -10610,7 +10939,6 @@ "version": "1.10.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.10.1.tgz", "integrity": "sha512-KuIe4mf++td/eFb6wkaPbMDnP6kObCaEtIDuHOUED6MNUo4K670KZUHuuvYPZDxNF0WVLw49n06M2m2dXphEzA==", - "dev": true, "requires": { "path-parse": "^1.0.6" } @@ -10702,7 +11030,6 @@ "version": "2.6.3", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", "integrity": "sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==", - "dev": true, "requires": { "glob": "^7.1.3" } @@ -10744,8 +11071,7 @@ "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", - "dev": true + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" }, "safe-regex": { "version": "1.1.0", @@ -10759,8 +11085,48 @@ "safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "sass-graph": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz", + "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=", + "requires": { + "glob": "^7.0.0", + "lodash": "^4.0.0", + "scss-tokenizer": "^0.2.3", + "yargs": "^7.0.0" + }, + "dependencies": { + "yargs": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", + "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", + "requires": { + "camelcase": "^3.0.0", + "cliui": "^3.2.0", + "decamelize": "^1.1.1", + "get-caller-file": "^1.0.1", + "os-locale": "^1.4.0", + "read-pkg-up": "^1.0.1", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^1.0.2", + "which-module": "^1.0.0", + "y18n": "^3.2.1", + "yargs-parser": "^5.0.0" + } + }, + "yargs-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz", + "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", + "requires": { + "camelcase": "^3.0.0" + } + } + } }, "sax": { "version": "1.2.4", @@ -10768,6 +11134,25 @@ "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true }, + "scss-tokenizer": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", + "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=", + "requires": { + "js-base64": "^2.1.8", + "source-map": "^0.4.2" + }, + "dependencies": { + "source-map": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", + "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", + "requires": { + "amdefine": ">=0.0.4" + } + } + } + }, "semver": { "version": "5.7.0", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz", @@ -10921,8 +11306,7 @@ "set-blocking": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", - "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=", - "dev": true + "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=" }, "set-value": { "version": "2.0.0", @@ -10958,6 +11342,11 @@ "safe-buffer": "^5.0.1" } }, + "shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "shasum": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/shasum/-/shasum-1.0.2.tgz", @@ -11057,8 +11446,7 @@ "signal-exit": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz", - "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=", - "dev": true + "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=" }, "simple-concat": { "version": "1.0.0", @@ -11432,7 +11820,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==", - "dev": true, "requires": { "spdx-expression-parse": "^3.0.0", "spdx-license-ids": "^3.0.0" @@ -11441,14 +11828,12 @@ "spdx-exceptions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz", - "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==", - "dev": true + "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==" }, "spdx-expression-parse": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", - "dev": true, "requires": { "spdx-exceptions": "^2.1.0", "spdx-license-ids": "^3.0.0" @@ -11457,8 +11842,7 @@ "spdx-license-ids": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz", - "integrity": "sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA==", - "dev": true + "integrity": "sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA==" }, "specificity": { "version": "0.4.1", @@ -11505,7 +11889,6 @@ "version": "1.16.1", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.16.1.tgz", "integrity": "sha512-HXXqVUq7+pcKeLqqZj6mHFUMvXtOJt1uoUx09pFW6011inTMxqI8BA8PM95myrIyyKwdnzjdFjLiE6KBPVtJIg==", - "dev": true, "requires": { "asn1": "~0.2.3", "assert-plus": "^1.0.0", @@ -11569,6 +11952,14 @@ "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=", "dev": true }, + "stdout-stream": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz", + "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==", + "requires": { + "readable-stream": "^2.0.1" + } + }, "stream-browserify": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz", @@ -11638,7 +12029,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "dev": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -11660,7 +12050,6 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, "requires": { "safe-buffer": "~5.1.0" } @@ -11681,7 +12070,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", - "dev": true, "requires": { "ansi-regex": "^2.0.0" } @@ -11690,7 +12078,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", - "dev": true, "requires": { "is-utf8": "^0.2.0" } @@ -11707,6 +12094,14 @@ "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, + "strip-indent": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz", + "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=", + "requires": { + "get-stdin": "^4.0.1" + } + }, "strip-json-comments": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz", @@ -12424,6 +12819,16 @@ } } }, + "tar": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz", + "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==", + "requires": { + "block-stream": "*", + "fstream": "^1.0.12", + "inherits": "2" + } + }, "text-hex": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz", @@ -12644,7 +13049,6 @@ "version": "2.4.3", "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.4.3.tgz", "integrity": "sha512-Q5srk/4vDM54WJsJio3XNn6K2sCG+CQ8G5Wz6bZhRZoAe/+TxjWB/GlFAnYEbkYVlON9FMk/fE3h2RLpPXo4lQ==", - "dev": true, "requires": { "psl": "^1.1.24", "punycode": "^1.4.1" @@ -12656,6 +13060,11 @@ "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", "dev": true }, + "trim-newlines": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz", + "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM=" + }, "trim-right": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz", @@ -12680,6 +13089,14 @@ "integrity": "sha512-fwkLWH+DimvA4YCy+/nvJd61nWQQ2liO/nF/RjkTpiOGi+zxZzVkhb1mvbHIIW4b/8nDsYI8uTmAlc0nNkRMOw==", "dev": true }, + "true-case-path": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz", + "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==", + "requires": { + "glob": "^7.1.2" + } + }, "tslib": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz", @@ -12696,7 +13113,6 @@ "version": "0.6.0", "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz", "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=", - "dev": true, "requires": { "safe-buffer": "^5.0.1" } @@ -12704,8 +13120,7 @@ "tweetnacl": { "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", - "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", - "dev": true + "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" }, "type-check": { "version": "0.3.2", @@ -13078,7 +13493,6 @@ "version": "4.2.2", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz", "integrity": "sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==", - "dev": true, "requires": { "punycode": "^2.1.0" }, @@ -13086,8 +13500,7 @@ "punycode": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", - "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==", - "dev": true + "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" } } }, @@ -13133,8 +13546,7 @@ "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", - "dev": true + "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=" }, "util.promisify": { "version": "1.0.0", @@ -13155,8 +13567,7 @@ "uuid": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.2.tgz", - "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", - "dev": true + "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==" }, "v8flags": { "version": "3.1.2", @@ -13171,7 +13582,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", - "dev": true, "requires": { "spdx-correct": "^3.0.0", "spdx-expression-parse": "^3.0.0" @@ -13187,7 +13597,6 @@ "version": "1.10.0", "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz", "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=", - "dev": true, "requires": { "assert-plus": "^1.0.0", "core-util-is": "1.0.2", @@ -13347,7 +13756,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "dev": true, "requires": { "loose-envify": "^1.0.0" } @@ -13377,7 +13785,6 @@ "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dev": true, "requires": { "isexe": "^2.0.0" } @@ -13385,8 +13792,15 @@ "which-module": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz", - "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=", - "dev": true + "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=" + }, + "wide-align": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", + "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==", + "requires": { + "string-width": "^1.0.2 || 2" + } }, "window-size": { "version": "0.2.0", @@ -13471,7 +13885,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", - "dev": true, "requires": { "string-width": "^1.0.1", "strip-ansi": "^3.0.1" @@ -13533,8 +13946,7 @@ "y18n": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", - "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", - "dev": true + "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=" }, "yallist": { "version": "2.1.2", diff --git a/storybook/design-system/package.json b/storybook/design-system/package.json index f2f6107e8..50aed43dd 100644 --- a/storybook/design-system/package.json +++ b/storybook/design-system/package.json @@ -97,6 +97,7 @@ "gulp-svg-sprite": "^1.5.0", "gulp-uglify": "^3.0.2", "gulplog": "^1.0.0", + "js-beautify": "^1.10.2", "node-fetch": "^2.4.1", "npm-run-all": "^4.1.5", "pug-lint": "^2.5.0", @@ -110,7 +111,9 @@ "dependencies": { "@babel/register": "^7.0.0", "jstransformer-markdown-it": "^2.1.0", + "jstransformer-scss": "^1.0.0", "normalize-scss": "^7.0.1", - "pretty": "^2.0.0" + "pretty": "^2.0.0", + "rc-slider": "^8.6.4" } -} +} \ No newline at end of file diff --git a/storybook/design-system/src/assets/images/browserify.png b/storybook/design-system/src/assets/images/browserify.png deleted file mode 100644 index b17dc244b..000000000 Binary files a/storybook/design-system/src/assets/images/browserify.png and /dev/null differ diff --git a/storybook/design-system/src/assets/images/button/button-cas1.png b/storybook/design-system/src/assets/images/button/button-cas1.png new file mode 100644 index 000000000..87354458b Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-cas1.png differ diff --git a/storybook/design-system/src/assets/images/button/button-cas2.png b/storybook/design-system/src/assets/images/button/button-cas2.png new file mode 100644 index 000000000..4f00e2196 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-cas2.png differ diff --git a/storybook/design-system/src/assets/images/button/button-cas3.png b/storybook/design-system/src/assets/images/button/button-cas3.png new file mode 100644 index 000000000..0701c2684 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-cas3.png differ diff --git a/storybook/design-system/src/assets/images/button/button-cas4.png b/storybook/design-system/src/assets/images/button/button-cas4.png new file mode 100644 index 000000000..208662b48 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-cas4.png differ diff --git a/storybook/design-system/src/assets/images/button/button-cas5.png b/storybook/design-system/src/assets/images/button/button-cas5.png new file mode 100644 index 000000000..99bfa1f5c Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-cas5.png differ diff --git a/storybook/design-system/src/assets/images/button/button-danger.png b/storybook/design-system/src/assets/images/button/button-danger.png new file mode 100644 index 000000000..15546c598 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-danger.png differ diff --git a/storybook/design-system/src/assets/images/button/button-disabled.png b/storybook/design-system/src/assets/images/button/button-disabled.png new file mode 100644 index 000000000..5b653fe43 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-disabled.png differ diff --git a/storybook/design-system/src/assets/images/button/button-main-icon.png b/storybook/design-system/src/assets/images/button/button-main-icon.png new file mode 100644 index 000000000..0edf03c02 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-main-icon.png differ diff --git a/storybook/design-system/src/assets/images/button/button-main.png b/storybook/design-system/src/assets/images/button/button-main.png new file mode 100644 index 000000000..074b89745 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-main.png differ diff --git a/storybook/design-system/src/assets/images/button/button-modal-do.png b/storybook/design-system/src/assets/images/button/button-modal-do.png new file mode 100644 index 000000000..ec3d83213 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-modal-do.png differ diff --git a/storybook/design-system/src/assets/images/button/button-modal-dont.png b/storybook/design-system/src/assets/images/button/button-modal-dont.png new file mode 100644 index 000000000..a91a3a47f Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-modal-dont.png differ diff --git a/storybook/design-system/src/assets/images/button/button-secondary.png b/storybook/design-system/src/assets/images/button/button-secondary.png new file mode 100644 index 000000000..fa959e2db Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-secondary.png differ diff --git a/storybook/design-system/src/assets/images/button/button-small.png b/storybook/design-system/src/assets/images/button/button-small.png new file mode 100644 index 000000000..d9cb4b283 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-small.png differ diff --git a/storybook/design-system/src/assets/images/button-structure.jpg b/storybook/design-system/src/assets/images/button/button-structure.jpg similarity index 100% rename from storybook/design-system/src/assets/images/button-structure.jpg rename to storybook/design-system/src/assets/images/button/button-structure.jpg diff --git a/storybook/design-system/src/assets/images/button/button-success.png b/storybook/design-system/src/assets/images/button/button-success.png new file mode 100644 index 000000000..10f74e010 Binary files /dev/null and b/storybook/design-system/src/assets/images/button/button-success.png differ diff --git a/storybook/design-system/src/assets/images/button-usage-danger.png b/storybook/design-system/src/assets/images/button/button-usage-danger.png similarity index 100% rename from storybook/design-system/src/assets/images/button-usage-danger.png rename to storybook/design-system/src/assets/images/button/button-usage-danger.png diff --git a/storybook/design-system/src/assets/images/favicon.ico b/storybook/design-system/src/assets/images/favicon.ico deleted file mode 100644 index 61a2425f5..000000000 Binary files a/storybook/design-system/src/assets/images/favicon.ico and /dev/null differ diff --git a/storybook/design-system/src/assets/images/pug.png b/storybook/design-system/src/assets/images/pug.png deleted file mode 100644 index 91c7abe2d..000000000 Binary files a/storybook/design-system/src/assets/images/pug.png and /dev/null differ diff --git a/storybook/design-system/src/assets/sprite/sprite.symbol.html b/storybook/design-system/src/assets/sprite/sprite.symbol.html index 542311e87..947b5c24f 100644 --- a/storybook/design-system/src/assets/sprite/sprite.symbol.html +++ b/storybook/design-system/src/assets/sprite/sprite.symbol.html @@ -771,7 +771,7 @@

twitter

diff --git a/storybook/design-system/src/commons/layout.pug b/storybook/design-system/src/commons/layout.pug index 49c3eff19..e630d8aea 100644 --- a/storybook/design-system/src/commons/layout.pug +++ b/storybook/design-system/src/commons/layout.pug @@ -1,3 +1,4 @@ +include ../components/blocks/blocks include ../components/icon/icon include ../components/title/title include ../components/logo/logo @@ -14,12 +15,20 @@ include ../components/pagelinks/pagelinks include ../components/tabs/tabs include ../components/tabs/tabs-nav-item include ../components/tabs/tabs-content-item +include ../components/code/code include ../components/demo/demo +include ../components/colors/colors +include ../components/colors/color +include ../components/page/page-content +include ../components/page/page-content-component +include ../components/page/page-title +include ../components/page/page-markdown +include ../components/page/page-summary block locals - - const {setClassActive, setClass, pugg, pretty} = functions + - const {setClassActive, setClass, pugg, pretty, scssTransformer, fs, beautifyCss, beautifyHtml} = functions - const {title, author, geography, copyright, email, description, keywords, lang, avatar} = general - - const {prefixjs, prefix, pathImg, pathFavicons, storybookBaseUrl, githubBaseUrl, badgeBaseUrl} = base + - const {prefixjs, prefix, pathImg, pathFavicons, storybookBaseUrl, storybookIframeUrl, githubBaseUrl, badgeBaseUrl} = base - const {main, layouts, style, components, structure, form} = menu block vars @@ -40,8 +49,8 @@ html(lang=lang id=`${prefix}-${id}-html` class=`${prefix}-html ${prefix}-html--$ link(rel="shortcut icon" href="img/favicon.ico") link(href=`${basedir}bundle.css` rel="stylesheet" type="text/css") link(rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/sunburst.min.css") - style - block style + style. + block style body(id=`${prefix}-${id}-body` class=`${prefix}-body`) block menu include ../components/header/header diff --git a/storybook/design-system/src/commons/scss/grid.scss b/storybook/design-system/src/commons/scss/grid.scss new file mode 100644 index 000000000..fb606dcb0 --- /dev/null +++ b/storybook/design-system/src/commons/scss/grid.scss @@ -0,0 +1,1037 @@ +.container { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto +} + +@media (min-width:576px) { + .container { + max-width: 540px + } +} + +@media (min-width:768px) { + .container { + max-width: 720px + } +} + +@media (min-width:992px) { + .container { + max-width: 960px + } +} + +@media (min-width:1200px) { + .container { + max-width: 1440px + } +} + +.container-fluid { + width: 100%; + padding-right: 15px; + padding-left: 15px; + margin-right: auto; + margin-left: auto +} + +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px +} + +.no-gutters { + margin-right: 0; + margin-left: 0 +} + +.no-gutters>.col, +.no-gutters>[class*=col-] { + padding-right: 0; + padding-left: 0 +} + +.col, +.col-1, +.col-10, +.col-11, +.col-12, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-auto, +.col-lg, +.col-lg-1, +.col-lg-10, +.col-lg-11, +.col-lg-12, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-auto, +.col-md, +.col-md-1, +.col-md-10, +.col-md-11, +.col-md-12, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-auto, +.col-sm, +.col-sm-1, +.col-sm-10, +.col-sm-11, +.col-sm-12, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-auto, +.col-xl, +.col-xl-1, +.col-xl-10, +.col-xl-11, +.col-xl-12, +.col-xl-2, +.col-xl-3, +.col-xl-4, +.col-xl-5, +.col-xl-6, +.col-xl-7, +.col-xl-8, +.col-xl-9, +.col-xl-auto { + position: relative; + width: 100%; + padding-right: 15px; + padding-left: 15px +} + +.col { + flex-basis: 0; + flex-grow: 1; + max-width: 100% +} + +.col-auto { + flex: 0 0 auto; + width: auto; + max-width: 100% +} + +.col-1 { + flex: 0 0 8.33333%; + max-width: 8.33333% +} + +.col-2 { + flex: 0 0 16.66667%; + max-width: 16.66667% +} + +.col-3 { + flex: 0 0 25%; + max-width: 25% +} + +.col-4 { + flex: 0 0 33.33333%; + max-width: 33.33333% +} + +.col-5 { + flex: 0 0 41.66667%; + max-width: 41.66667% +} + +.col-6 { + flex: 0 0 50%; + max-width: 50% +} + +.col-7 { + flex: 0 0 58.33333%; + max-width: 58.33333% +} + +.col-8 { + flex: 0 0 66.66667%; + max-width: 66.66667% +} + +.col-9 { + flex: 0 0 75%; + max-width: 75% +} + +.col-10 { + flex: 0 0 83.33333%; + max-width: 83.33333% +} + +.col-11 { + flex: 0 0 91.66667%; + max-width: 91.66667% +} + +.col-12 { + flex: 0 0 100%; + max-width: 100% +} + +.order-first { + order: -1 +} + +.order-last { + order: 13 +} + +.order-0 { + order: 0 +} + +.order-1 { + order: 1 +} + +.order-2 { + order: 2 +} + +.order-3 { + order: 3 +} + +.order-4 { + order: 4 +} + +.order-5 { + order: 5 +} + +.order-6 { + order: 6 +} + +.order-7 { + order: 7 +} + +.order-8 { + order: 8 +} + +.order-9 { + order: 9 +} + +.order-10 { + order: 10 +} + +.order-11 { + order: 11 +} + +.order-12 { + order: 12 +} + +.offset-1 { + margin-left: 8.33333% +} + +.offset-2 { + margin-left: 16.66667% +} + +.offset-3 { + margin-left: 25% +} + +.offset-4 { + margin-left: 33.33333% +} + +.offset-5 { + margin-left: 41.66667% +} + +.offset-6 { + margin-left: 50% +} + +.offset-7 { + margin-left: 58.33333% +} + +.offset-8 { + margin-left: 66.66667% +} + +.offset-9 { + margin-left: 75% +} + +.offset-10 { + margin-left: 83.33333% +} + +.offset-11 { + margin-left: 91.66667% +} + +@media (min-width:576px) { + .col-sm { + flex-basis: 0; + flex-grow: 1; + max-width: 100% + } + + .col-sm-auto { + flex: 0 0 auto; + width: auto; + max-width: 100% + } + + .col-sm-1 { + flex: 0 0 8.33333%; + max-width: 8.33333% + } + + .col-sm-2 { + flex: 0 0 16.66667%; + max-width: 16.66667% + } + + .col-sm-3 { + flex: 0 0 25%; + max-width: 25% + } + + .col-sm-4 { + flex: 0 0 33.33333%; + max-width: 33.33333% + } + + .col-sm-5 { + flex: 0 0 41.66667%; + max-width: 41.66667% + } + + .col-sm-6 { + flex: 0 0 50%; + max-width: 50% + } + + .col-sm-7 { + flex: 0 0 58.33333%; + max-width: 58.33333% + } + + .col-sm-8 { + flex: 0 0 66.66667%; + max-width: 66.66667% + } + + .col-sm-9 { + flex: 0 0 75%; + max-width: 75% + } + + .col-sm-10 { + flex: 0 0 83.33333%; + max-width: 83.33333% + } + + .col-sm-11 { + flex: 0 0 91.66667%; + max-width: 91.66667% + } + + .col-sm-12 { + flex: 0 0 100%; + max-width: 100% + } + + .order-sm-first { + order: -1 + } + + .order-sm-last { + order: 13 + } + + .order-sm-0 { + order: 0 + } + + .order-sm-1 { + order: 1 + } + + .order-sm-2 { + order: 2 + } + + .order-sm-3 { + order: 3 + } + + .order-sm-4 { + order: 4 + } + + .order-sm-5 { + order: 5 + } + + .order-sm-6 { + order: 6 + } + + .order-sm-7 { + order: 7 + } + + .order-sm-8 { + order: 8 + } + + .order-sm-9 { + order: 9 + } + + .order-sm-10 { + order: 10 + } + + .order-sm-11 { + order: 11 + } + + .order-sm-12 { + order: 12 + } + + .offset-sm-0 { + margin-left: 0 + } + + .offset-sm-1 { + margin-left: 8.33333% + } + + .offset-sm-2 { + margin-left: 16.66667% + } + + .offset-sm-3 { + margin-left: 25% + } + + .offset-sm-4 { + margin-left: 33.33333% + } + + .offset-sm-5 { + margin-left: 41.66667% + } + + .offset-sm-6 { + margin-left: 50% + } + + .offset-sm-7 { + margin-left: 58.33333% + } + + .offset-sm-8 { + margin-left: 66.66667% + } + + .offset-sm-9 { + margin-left: 75% + } + + .offset-sm-10 { + margin-left: 83.33333% + } + + .offset-sm-11 { + margin-left: 91.66667% + } +} + +@media (min-width:768px) { + .col-md { + flex-basis: 0; + flex-grow: 1; + max-width: 100% + } + + .col-md-auto { + flex: 0 0 auto; + width: auto; + max-width: 100% + } + + .col-md-1 { + flex: 0 0 8.33333%; + max-width: 8.33333% + } + + .col-md-2 { + flex: 0 0 16.66667%; + max-width: 16.66667% + } + + .col-md-3 { + flex: 0 0 25%; + max-width: 25% + } + + .col-md-4 { + flex: 0 0 33.33333%; + max-width: 33.33333% + } + + .col-md-5 { + flex: 0 0 41.66667%; + max-width: 41.66667% + } + + .col-md-6 { + flex: 0 0 50%; + max-width: 50% + } + + .col-md-7 { + flex: 0 0 58.33333%; + max-width: 58.33333% + } + + .col-md-8 { + flex: 0 0 66.66667%; + max-width: 66.66667% + } + + .col-md-9 { + flex: 0 0 75%; + max-width: 75% + } + + .col-md-10 { + flex: 0 0 83.33333%; + max-width: 83.33333% + } + + .col-md-11 { + flex: 0 0 91.66667%; + max-width: 91.66667% + } + + .col-md-12 { + flex: 0 0 100%; + max-width: 100% + } + + .order-md-first { + order: -1 + } + + .order-md-last { + order: 13 + } + + .order-md-0 { + order: 0 + } + + .order-md-1 { + order: 1 + } + + .order-md-2 { + order: 2 + } + + .order-md-3 { + order: 3 + } + + .order-md-4 { + order: 4 + } + + .order-md-5 { + order: 5 + } + + .order-md-6 { + order: 6 + } + + .order-md-7 { + order: 7 + } + + .order-md-8 { + order: 8 + } + + .order-md-9 { + order: 9 + } + + .order-md-10 { + order: 10 + } + + .order-md-11 { + order: 11 + } + + .order-md-12 { + order: 12 + } + + .offset-md-0 { + margin-left: 0 + } + + .offset-md-1 { + margin-left: 8.33333% + } + + .offset-md-2 { + margin-left: 16.66667% + } + + .offset-md-3 { + margin-left: 25% + } + + .offset-md-4 { + margin-left: 33.33333% + } + + .offset-md-5 { + margin-left: 41.66667% + } + + .offset-md-6 { + margin-left: 50% + } + + .offset-md-7 { + margin-left: 58.33333% + } + + .offset-md-8 { + margin-left: 66.66667% + } + + .offset-md-9 { + margin-left: 75% + } + + .offset-md-10 { + margin-left: 83.33333% + } + + .offset-md-11 { + margin-left: 91.66667% + } +} + +@media (min-width:992px) { + .col-lg { + flex-basis: 0; + flex-grow: 1; + max-width: 100% + } + + .col-lg-auto { + flex: 0 0 auto; + width: auto; + max-width: 100% + } + + .col-lg-1 { + flex: 0 0 8.33333%; + max-width: 8.33333% + } + + .col-lg-2 { + flex: 0 0 16.66667%; + max-width: 16.66667% + } + + .col-lg-3 { + flex: 0 0 25%; + max-width: 25% + } + + .col-lg-4 { + flex: 0 0 33.33333%; + max-width: 33.33333% + } + + .col-lg-5 { + flex: 0 0 41.66667%; + max-width: 41.66667% + } + + .col-lg-6 { + flex: 0 0 50%; + max-width: 50% + } + + .col-lg-7 { + flex: 0 0 58.33333%; + max-width: 58.33333% + } + + .col-lg-8 { + flex: 0 0 66.66667%; + max-width: 66.66667% + } + + .col-lg-9 { + flex: 0 0 75%; + max-width: 75% + } + + .col-lg-10 { + flex: 0 0 83.33333%; + max-width: 83.33333% + } + + .col-lg-11 { + flex: 0 0 91.66667%; + max-width: 91.66667% + } + + .col-lg-12 { + flex: 0 0 100%; + max-width: 100% + } + + .order-lg-first { + order: -1 + } + + .order-lg-last { + order: 13 + } + + .order-lg-0 { + order: 0 + } + + .order-lg-1 { + order: 1 + } + + .order-lg-2 { + order: 2 + } + + .order-lg-3 { + order: 3 + } + + .order-lg-4 { + order: 4 + } + + .order-lg-5 { + order: 5 + } + + .order-lg-6 { + order: 6 + } + + .order-lg-7 { + order: 7 + } + + .order-lg-8 { + order: 8 + } + + .order-lg-9 { + order: 9 + } + + .order-lg-10 { + order: 10 + } + + .order-lg-11 { + order: 11 + } + + .order-lg-12 { + order: 12 + } + + .offset-lg-0 { + margin-left: 0 + } + + .offset-lg-1 { + margin-left: 8.33333% + } + + .offset-lg-2 { + margin-left: 16.66667% + } + + .offset-lg-3 { + margin-left: 25% + } + + .offset-lg-4 { + margin-left: 33.33333% + } + + .offset-lg-5 { + margin-left: 41.66667% + } + + .offset-lg-6 { + margin-left: 50% + } + + .offset-lg-7 { + margin-left: 58.33333% + } + + .offset-lg-8 { + margin-left: 66.66667% + } + + .offset-lg-9 { + margin-left: 75% + } + + .offset-lg-10 { + margin-left: 83.33333% + } + + .offset-lg-11 { + margin-left: 91.66667% + } +} + +@media (min-width:1200px) { + .col-xl { + flex-basis: 0; + flex-grow: 1; + max-width: 100% + } + + .col-xl-auto { + flex: 0 0 auto; + width: auto; + max-width: 100% + } + + .col-xl-1 { + flex: 0 0 8.33333%; + max-width: 8.33333% + } + + .col-xl-2 { + flex: 0 0 16.66667%; + max-width: 16.66667% + } + + .col-xl-3 { + flex: 0 0 25%; + max-width: 25% + } + + .col-xl-4 { + flex: 0 0 33.33333%; + max-width: 33.33333% + } + + .col-xl-5 { + flex: 0 0 41.66667%; + max-width: 41.66667% + } + + .col-xl-6 { + flex: 0 0 50%; + max-width: 50% + } + + .col-xl-7 { + flex: 0 0 58.33333%; + max-width: 58.33333% + } + + .col-xl-8 { + flex: 0 0 66.66667%; + max-width: 66.66667% + } + + .col-xl-9 { + flex: 0 0 75%; + max-width: 75% + } + + .col-xl-10 { + flex: 0 0 83.33333%; + max-width: 83.33333% + } + + .col-xl-11 { + flex: 0 0 91.66667%; + max-width: 91.66667% + } + + .col-xl-12 { + flex: 0 0 100%; + max-width: 100% + } + + .order-xl-first { + order: -1 + } + + .order-xl-last { + order: 13 + } + + .order-xl-0 { + order: 0 + } + + .order-xl-1 { + order: 1 + } + + .order-xl-2 { + order: 2 + } + + .order-xl-3 { + order: 3 + } + + .order-xl-4 { + order: 4 + } + + .order-xl-5 { + order: 5 + } + + .order-xl-6 { + order: 6 + } + + .order-xl-7 { + order: 7 + } + + .order-xl-8 { + order: 8 + } + + .order-xl-9 { + order: 9 + } + + .order-xl-10 { + order: 10 + } + + .order-xl-11 { + order: 11 + } + + .order-xl-12 { + order: 12 + } + + .offset-xl-0 { + margin-left: 0 + } + + .offset-xl-1 { + margin-left: 8.33333% + } + + .offset-xl-2 { + margin-left: 16.66667% + } + + .offset-xl-3 { + margin-left: 25% + } + + .offset-xl-4 { + margin-left: 33.33333% + } + + .offset-xl-5 { + margin-left: 41.66667% + } + + .offset-xl-6 { + margin-left: 50% + } + + .offset-xl-7 { + margin-left: 58.33333% + } + + .offset-xl-8 { + margin-left: 66.66667% + } + + .offset-xl-9 { + margin-left: 75% + } + + .offset-xl-10 { + margin-left: 83.33333% + } + + .offset-xl-11 { + margin-left: 91.66667% + } +} diff --git a/storybook/design-system/src/commons/scss/main.scss b/storybook/design-system/src/commons/scss/main.scss index be258e54a..761046feb 100644 --- a/storybook/design-system/src/commons/scss/main.scss +++ b/storybook/design-system/src/commons/scss/main.scss @@ -1,6 +1,15 @@ +*, +*:before, +*:after { + box-sizing: border-box; +} + +* { + font-family: $font-family-base; +} + .#{$prefix} { &-html { - font-size: 1rem; font-family: $font-family-base; color: $color-scorpion; letter-spacing: 0.01em; @@ -8,13 +17,6 @@ } } -@media screen and (min-width: 980px) { - .#{$prefix} { - &-body { - } - } -} - /* TODO A reporter sur le toolkit */ .af-container { @@ -22,3 +24,30 @@ padding: 0 2em; margin: 0 auto; } + +a { + text-decoration: none; + color: $color-axa; + + &:hover { + text-decoration: underline; + } + + &:focus { + color: $color-burnt-sienna; + } +} + +body { + margin: 0; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + font-family: $font-family-base; + font-size: 1rem; +} diff --git a/storybook/design-system/src/commons/scss/markdown.scss b/storybook/design-system/src/commons/scss/markdown.scss index e7b3cda7a..e0c871024 100644 --- a/storybook/design-system/src/commons/scss/markdown.scss +++ b/storybook/design-system/src/commons/scss/markdown.scss @@ -3,24 +3,29 @@ padding: 2em 1em 1em 0; font-size: 1rem; line-height: 1.25; + img, svg { max-width: 100%; } + a { color: $color-links; } + h1, h2, h3 { font-family: $font-family-headings; letter-spacing: -1px; - font-weight: 900; } + h1 { font-size: 2.5rem; margin: 2rem 0; + font-weight: 900; } + h2 { font-size: 1.8rem; margin: 3rem 0 1rem 0; @@ -29,53 +34,70 @@ letter-spacing: -1px; border-bottom: 1px solid $color-gray-1; padding-bottom: .7rem; + font-weight: 700; + &:first-child { margin-top: 0; } } + h3 { font-size: 1.2rem; margin-bottom: 1rem; + font-weight: 500; } + p { margin-bottom: 1rem; } + table { table-layout: fixed; background: $white; border: 1px solid $color-gray-1; margin-bottom: 1em; + thead { border-bottom: 2px solid $color-axa; + th { padding: 1rem 3rem 1rem 1rem; font-weight: 600; text-align: left; } } + tbody { tr { border-bottom: 1px solid $color-gray-1; + td { padding: 1rem 3rem 1rem 1rem; line-height: 1.25; vertical-align: top; - &:first-child { - white-space: nowrap; - font-weight: 600; - } + } } } } + + ol { + list-style: decimal; + padding-left: 1rem; + } + ul { list-style: disc inside; + padding-left: 1rem; + margin-bottom: 1rem; + li { padding: 0.5rem 0; } } + code { - background: $color-mercury; + font-size: 0.9rem; padding: 1rem 0.4rem; margin: 1rem 0; @@ -83,14 +105,50 @@ border: $color-silver 1px solid; border-radius: 5px; } + blockquote { padding: 1rem; } + strong { font-weight: bold; } - em{ + + em { font-style: italic; } + + + &__usecases { + &-container { + display: flex; + width: 100%; + flex-wrap: wrap; + } + + display: flex; + max-width: 250px; + flex-direction: column; + text-align: center; + flex-basis: 30% 30% 40%; + margin-top: 15px; + box-shadow: rgba(black, 0.19) 0 0 8px 0; + margin: 10px; + + img { + width: auto; + } + + h4 { + font-size: 1.2rem; + font-weight: 600; + margin: 1rem 0; + padding: 0 1rem; + } + + p { + padding: 0 1rem; + } + } } } diff --git a/storybook/design-system/src/commons/scss/reset.scss b/storybook/design-system/src/commons/scss/reset.scss index 9e0bb3054..c2d82bdbe 100644 --- a/storybook/design-system/src/commons/scss/reset.scss +++ b/storybook/design-system/src/commons/scss/reset.scss @@ -3,7 +3,7 @@ License: none (public domain) */ -html, +/* html, body, div, span, @@ -91,7 +91,22 @@ video { font-size: 100%; font: inherit; vertical-align: baseline; +} */ + +header, +a, +div, +img, +h2, +h3 { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + /* HTML5 display-role reset for older browsers */ article, aside, @@ -107,24 +122,13 @@ nav, section { display: block; } + body { line-height: 1; } -ol, -ul { - list-style: none; -} -blockquote, -q { - quotes: none; -} -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ''; - content: none; -} + + + table { border-collapse: collapse; border-spacing: 0; @@ -151,14 +155,3 @@ html { -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } - -a { - text-decoration: none; - color: $color-axa; - &:hover { - text-decoration: underline; - } - &:focus { - color: $color-burnt-sienna; - } -} diff --git a/storybook/design-system/src/components/blocks/blocks.pug b/storybook/design-system/src/components/blocks/blocks.pug new file mode 100644 index 000000000..b6c2e6301 --- /dev/null +++ b/storybook/design-system/src/components/blocks/blocks.pug @@ -0,0 +1,4 @@ +- blocks = {} + +mixin setBlocks(key) + - blocks[key] = this.block diff --git a/storybook/design-system/src/components/code/code.pug b/storybook/design-system/src/components/code/code.pug index a1ca6e623..206368475 100644 --- a/storybook/design-system/src/components/code/code.pug +++ b/storybook/design-system/src/components/code/code.pug @@ -1,10 +1,14 @@ -mixin Code() - div(class=`${prefix}-code__wrapper-outer`) - div(class=`${prefix}-code__wrapper-middle`) - div(class=`${prefix}-code__wrapper-inner`) - div(class=`${prefix}-code__icon`) - +Icon({id:'copy'}) - span(class=`${prefix}-code__icon-text`) Copied - pre(class="pre") - code(class="html") - block \ No newline at end of file +mixin Code({ htmlCode = '', sassCode = '' }) + div(class=`${prefix}-code__wrapper-outer`) + div(class=`${prefix}-code__wrapper-middle`) + div(class=`${prefix}-code__wrapper-inner`) + div(class=`${prefix}-code__icon`) + +Icon({id:'copy', modifier: 'copy'}) + span(class=`${prefix}-code__icon-text`) Copied + pre.pre + if htmlCode !== '' + code.html + | #{htmlCode} + if sassCode !== '' + code.css + | #{sassCode} diff --git a/storybook/design-system/src/components/code/code.scss b/storybook/design-system/src/components/code/code.scss index 0a2f088b3..e26c5ef36 100644 --- a/storybook/design-system/src/components/code/code.scss +++ b/storybook/design-system/src/components/code/code.scss @@ -5,37 +5,47 @@ position: relative; height: 300px; } + &-middle { position: absolute; width: 100%; overflow: hidden; } + &-inner { height: 300px; display: flex; overflow: auto; - background: $color-code-background; + background: $black; } } + &__icon { display: flex; flex-direction: column; + align-items: center; position: absolute; - right: 20px; - top: 10px; + right: 15px; + top: 15px; height: 39px; width: 50px; cursor: pointer; - fill: $white; + &--copied { fill: $color-btn-success; + .#{$prefix}-code__icon-text { color: $color-btn-success; } } + &-text { - color: $color-code-background; + color: $black; } } } + + &-icon--copy { + fill: $white; + } } diff --git a/storybook/design-system/src/components/colors/Color.pug b/storybook/design-system/src/components/colors/Color.pug new file mode 100644 index 000000000..dcf993c6f --- /dev/null +++ b/storybook/design-system/src/components/colors/Color.pug @@ -0,0 +1,6 @@ +mixin Color({ hex = '#ccc', name = 'name color', sass= 'SASS variable' }) + div(class=`${prefix}-color`) + div(class=`${prefix}-color__pantone` style=`background-color:${hex}`) + span(class=`${prefix}-color__name`) #{name} + span(class=`${prefix}-color__hex`) #{hex} + span(class=`${prefix}-color__sass`) #{sass} diff --git a/storybook/design-system/src/components/colors/Colors.pug b/storybook/design-system/src/components/colors/Colors.pug new file mode 100644 index 000000000..3029dba1d --- /dev/null +++ b/storybook/design-system/src/components/colors/Colors.pug @@ -0,0 +1,7 @@ + +mixin Colors({ colors }) + div(class=`${prefix}-colors`) + h2(class=`${prefix}-colors__title`) Colors + div(class=`${prefix}-colors__list`) + each color in colors + +Color({ hex: color.hex, name: color.name, sass: color.sass }) diff --git a/storybook/design-system/src/components/colors/colors.scss b/storybook/design-system/src/components/colors/colors.scss new file mode 100644 index 000000000..451936b90 --- /dev/null +++ b/storybook/design-system/src/components/colors/colors.scss @@ -0,0 +1,67 @@ +.#{$prefix} { + &-colors { + padding: 2em 1em 1em 0; + font-size: 1rem; + line-height: 1.25; + + &__list { + display: flex; + flex-wrap: wrap; + padding: 1em; + } + + &__title { + font-family: $font-family-headings; + letter-spacing: -1px; + font-size: 1.8rem; + margin: 3rem 0 1rem 0; + margin-bottom: 1.3rem; + display: block; + border-bottom: 1px solid $color-gray-1; + padding-bottom: .7rem; + + &:first-child { + margin-top: 0; + } + } + } + + &-color { + display: flex; + flex-wrap: wrap; + border: 1px solid $color-action-2; + background: $white; + text-align: center; + margin: 0 1em 1em 0; + width: 200px; + + &:hover { + box-shadow: 0 0 10px $color-action-2; + } + + &__pantone { + height: 100px; + width: 100%; + } + + &__name { + font-weight: 600; + width: 100%; + padding: .2rem; + text-transform: uppercase; + font-size: 1.2rem; + } + + &__hex { + width: 100%; + padding: .2rem; + font-weight: 600; + font-size: 1.2rem; + } + + &__sass { + width: 100%; + padding: .2rem .2rem 1rem .2rem; + } + } +} diff --git a/storybook/design-system/src/components/demo/demo.js b/storybook/design-system/src/components/demo/demo.js index cf182aa52..3a80b8cd2 100644 --- a/storybook/design-system/src/components/demo/demo.js +++ b/storybook/design-system/src/components/demo/demo.js @@ -6,15 +6,11 @@ const classJsClose = `${prefixjs}-icon--demo-close`; const activeModifier = 'fullscreen'; const classDisplay = `${prefix}-demo__display`; -const openFullScreen = e => { - e.currentTarget.closest(`.${classDisplay}`).classList.add(`${classDisplay}--${activeModifier}`); -}; +const openFullScreen = e => e.currentTarget.closest(`.${classDisplay}`).classList.add(`${classDisplay}--${activeModifier}`); -const closeFullScreen = e => { - e.currentTarget - .closest(`.${classDisplay}--${activeModifier}`) - .classList.remove(`${classDisplay}--${activeModifier}`); -}; +const closeFullScreen = e => e.currentTarget + .closest(`.${classDisplay}--${activeModifier}`) + .classList.remove(`${classDisplay}--${activeModifier}`); class Demo { constructor() { @@ -31,12 +27,8 @@ class Demo { } initEvents() { - [].forEach.call(this.openElts, elt => - elt.addEventListener('click', e => openFullScreen(e), true), - ); - [].forEach.call(this.closeElts, elt => - elt.addEventListener('click', e => closeFullScreen(e), true), - ); + [].forEach.call(this.openElts, elt => elt.addEventListener('click', e => openFullScreen(e), true)); + [].forEach.call(this.closeElts, elt => elt.addEventListener('click', e => closeFullScreen(e), true)); } isNotExitingElement() { diff --git a/storybook/design-system/src/components/demo/demo.pug b/storybook/design-system/src/components/demo/demo.pug index 1d70f13c2..91532c468 100644 --- a/storybook/design-system/src/components/demo/demo.pug +++ b/storybook/design-system/src/components/demo/demo.pug @@ -1,22 +1,32 @@ -include ../code/code -mixin Demo({modifier='', title="Set Demo Title"}) +mixin Demo({ modifier='', title="Set Demo Title", tmpl = '', storybook='', activePath, sassPath = '', absTmpl= '', iframe = false }) -const classComponent = `${setClass('demo', modifier, true)}` - div(class=classComponent) + -const tmplPath = absTmpl !== '' ? absTmpl : tmpl!== '' ? `./src/pages${activePath}/templates/${tmpl}.pug` : '' + -const htmlCode = tmplPath !== '' ? pugg.compileFile(tmplPath, { pretty: true }) : 'No HTML' + -const sassCode = sassPath !== '' ? fs.readFileSync(`node_modules/@axa-fr/${sassPath}`, 'utf8') : 'No style' + block + article(class=classComponent) +Title({level: "h2", modifier:"demo"}) | #{title} div(class=`${prefix}-demo__display`) +Icon({id:'full-screen', modifier:"demo-open", js:true}) +Icon({id:'cross-full', modifier:"demo-close", js:true}) div(class=`${prefix}-demo__template`) - block preview + if iframe + iframe(class=`${prefix}-demo__iframe` src=`${activePath}/templates/iframe-${tmpl}.html`) + else + | !{htmlCode()} +Tabs({modifier:'demo'}) +TabsNavLayout() +TabsNavItem({index:11,modifier:'active', active:true}) span HTML +TabsNavItem({index:12}) - span CSS + span SASS + +TabsNavItem({index:13}) + span REACT +TabsContentLayout() +TabsContentItem({index:11, modifier:'active' , active:true}) - block code + +Code({ htmlCode: beautifyHtml(htmlCode()) }) +TabsContentItem({index:12}) - block css + +Code({ sassCode: beautifyCss(sassCode) }) + +TabsContentItem({index:13}) + iframe(class=`${prefix}-demo__iframe` src=`${storybookIframeUrl}${storybook}`) diff --git a/storybook/design-system/src/components/demo/demo.scss b/storybook/design-system/src/components/demo/demo.scss index 3ebfb4d42..460b9f001 100644 --- a/storybook/design-system/src/components/demo/demo.scss +++ b/storybook/design-system/src/components/demo/demo.scss @@ -17,22 +17,18 @@ background-color: $white; border: 1px solid $color-mercury; background-image: - linear-gradient( - 45deg, + linear-gradient(45deg, $color-mercury 25%, transparent 25%, transparent 75%, $color-mercury 75%, - $color-mercury - ), - linear-gradient( - 45deg, + $color-mercury), + linear-gradient(45deg, $color-mercury 25%, transparent 25%, transparent 75%, $color-mercury 75%, - $color-mercury - ); + $color-mercury); background-size: 20px 20px; background-position: 0 0, 10px 10px; position: relative; @@ -56,12 +52,19 @@ &--demo-close { display: block; fill: $white; + position: fixed; } } } } } + &__iframe { + height: 300px; + border: 1px solid $color-mercury; + width: 100%; + } + &__css { height: 300px; } @@ -89,14 +92,18 @@ &--demo-open, &--demo-close { position: absolute; - width: 20px; - height: 20px; + width: 30px; + height: 30px; right: 5px; top: 5px; cursor: pointer; + z-index: 2; + background: rgba(255, 255, 255, .5); + padding: 5px; } &--demo-close { + background: rgba(0, 0, 0, .5); display: none; } } diff --git a/storybook/design-system/src/components/footer/footer.pug b/storybook/design-system/src/components/footer/footer.pug index 665d4ef69..b8c583a98 100644 --- a/storybook/design-system/src/components/footer/footer.pug +++ b/storybook/design-system/src/components/footer/footer.pug @@ -1,4 +1,4 @@ -const classComponent = `${setClass('footer', 'opened', true)}` footer(class=classComponent) span(class=`${prefix}-footer__privacy`) - | Privacy Policy © 2019 AXA All Rights Reserved \ No newline at end of file + | Privacy Policy © 2020 AXA All Rights Reserved diff --git a/storybook/design-system/src/components/form/layouts/layout-form-card-group.pug b/storybook/design-system/src/components/form/layouts/layout-form-card-group.pug new file mode 100644 index 000000000..8de5d180d --- /dev/null +++ b/storybook/design-system/src/components/form/layouts/layout-form-card-group.pug @@ -0,0 +1,3 @@ +.af-form__group.row + .col-md-8 + block input diff --git a/storybook/design-system/src/components/form/layouts/layout-form-card.pug b/storybook/design-system/src/components/form/layouts/layout-form-card.pug new file mode 100644 index 000000000..80f09a69a --- /dev/null +++ b/storybook/design-system/src/components/form/layouts/layout-form-card.pug @@ -0,0 +1,3 @@ +.af-form__group.row + .col-md-3 + block input diff --git a/storybook/design-system/src/components/form/layouts/layout-form-field.pug b/storybook/design-system/src/components/form/layouts/layout-form-field.pug new file mode 100644 index 000000000..3efbb7d21 --- /dev/null +++ b/storybook/design-system/src/components/form/layouts/layout-form-field.pug @@ -0,0 +1,5 @@ +.af-form__group.row + .col-md-2 + block label + .col-md-10 + block input diff --git a/storybook/design-system/src/components/form/layouts/layout-form-filter-inline.pug b/storybook/design-system/src/components/form/layouts/layout-form-filter-inline.pug new file mode 100644 index 000000000..45c8d16d6 --- /dev/null +++ b/storybook/design-system/src/components/form/layouts/layout-form-filter-inline.pug @@ -0,0 +1,3 @@ +.row + .col + block children \ No newline at end of file diff --git a/storybook/design-system/src/components/form/layouts/layout-form-filter.pug b/storybook/design-system/src/components/form/layouts/layout-form-filter.pug new file mode 100644 index 000000000..b258d930f --- /dev/null +++ b/storybook/design-system/src/components/form/layouts/layout-form-filter.pug @@ -0,0 +1,3 @@ +.row + .col.col-sm-12.col-md-12.col-lg-6.col-xl-4 + block children \ No newline at end of file diff --git a/storybook/design-system/src/components/form/layouts/layout-form-textarea.pug b/storybook/design-system/src/components/form/layouts/layout-form-textarea.pug new file mode 100644 index 000000000..b72c2bf5c --- /dev/null +++ b/storybook/design-system/src/components/form/layouts/layout-form-textarea.pug @@ -0,0 +1,5 @@ +.row.af-form__group.af-form__group--label-top + .col-md-2 + block label + .col-md-10 + block input diff --git a/storybook/design-system/src/components/form/mixins/mixin-form-field-card.pug b/storybook/design-system/src/components/form/mixins/mixin-form-field-card.pug new file mode 100644 index 000000000..0462ae2f7 --- /dev/null +++ b/storybook/design-system/src/components/form/mixins/mixin-form-field-card.pug @@ -0,0 +1,54 @@ +mixin formFieldCardHeaderCheckbox({ name='', modifier= '', disabled=false, forId="test", checked=false}) + header.af-rccard-header + .af-form__checkbox(class=(modifier !== '') ? ` af-form__checkbox--${modifier}` : '') + input.af-form__input-checkbox(name=name type="checkbox" value="on" id=forId disabled= disabled || null checked= checked || null) + label.af-form__label(for=forId) + span.af-form__indicator + i.glyphicon.glyphicon-ok + span.af-form__description + p.af-rccard-header__title Référence + p.af-rccard-header__subtitle 50 € / mois + +mixin formFieldCardHeaderRadio({ name='', modifier= '', disabled=false, forId, checked=false}) + header.af-rccard-header + .af-form__radio(class=(modifier !== '') ? ` af-form__radio--${modifier}` : '') + input.af-form__input-radio(name=name type="radio" value="on" id=forId disabled= disabled || null checked= checked || null) + label.af-form__label(for=forId) + span.af-form__description + p.af-rccard-header__title Référence + p.af-rccard-header__subtitle 50 € / mois + +mixin formFieldCardLabel({forId}) + label.af-rccard-content.af-rccard-group__label(for=forId) + p.af-rccard-group__text John Doe + dl + dt.af-rccard__term Statut: + dd.af-rccard__def En cours + dt.af-rccard__term Epargne atteinte: + dd.af-rccard__def 125 000€ + +mixin formFieldCardFooter({forId}) + footer.af-rccard-footer + label.af-rccard-group__label(for=forId) + button.btn.af-btn(type="submit") Valider mon action + +mixin formFieldCard({ name='cardname', modifier= '', disabled=false, id="0", checked=false, type="checkbox" }) + - const forId = `${type}card${id}` + .af-rccard(class=(modifier !== '') ? ` af-rccard--${modifier}` : '') + if type === 'checkbox' + +formFieldCardHeaderCheckbox({name, modifier, disabled, checked, forId}) + else + +formFieldCardHeaderRadio({name, modifier, disabled, checked, forId}) + +formFieldCardLabel({forId}) + +formFieldCardFooter({forId}) + +mixin formFieldCardGroup({ active=false, meta='', title= '' }) + .af-rccard-group(class=(active) ? ` af-rccard-group--active` : '') + if meta !== '' + p.af-rccard-header__meta #{meta} + if title !== '' + h1.af-rccard-group__title #{title} + .af-rccard-group__content + if block + block + \ No newline at end of file diff --git a/storybook/design-system/src/components/form/mixins/mixin-form-field-checkbox.pug b/storybook/design-system/src/components/form/mixins/mixin-form-field-checkbox.pug new file mode 100644 index 000000000..adf5d6f3e --- /dev/null +++ b/storybook/design-system/src/components/form/mixins/mixin-form-field-checkbox.pug @@ -0,0 +1,8 @@ +mixin formFieldCheckbox({ name='defaultname', modifier= '', label= 'default label', disabled=false, id="0", className= "af-form__checkbox"}) + div(class=className class=(modifier !== '') ? ` ${className}--${modifier}` : '') + input.af-form__input-checkbox(name=name type="checkbox" id=`checkbox${id}` disabled= disabled || null) + label.af-form__label(for=`checkbox${id}`) + span.af-form__indicator + i.glyphicon.glyphicon-ok + span.af-form__description + | #{label} \ No newline at end of file diff --git a/storybook/design-system/src/components/form/mixins/mixin-form-field-radio.pug b/storybook/design-system/src/components/form/mixins/mixin-form-field-radio.pug new file mode 100644 index 000000000..188493450 --- /dev/null +++ b/storybook/design-system/src/components/form/mixins/mixin-form-field-radio.pug @@ -0,0 +1,6 @@ +mixin formFieldRadio({ name='defaultname', modifier= '', label= 'default label', disabled=false, id="0", className= "af-form__radio"}) + div(class=className class=(modifier !== '') ? ` ${className}--${modifier}` : '') + input.af-form__input-radio(name=name type="radio" id=`radio${id}` disabled= disabled || null) + label.af-form__label(for=`radio${id}`) + span.af-form__description + | #{label} \ No newline at end of file diff --git a/storybook/design-system/src/components/form/mixins/mixin-form-field-select.pug b/storybook/design-system/src/components/form/mixins/mixin-form-field-select.pug new file mode 100644 index 000000000..008b00f9c --- /dev/null +++ b/storybook/design-system/src/components/form/mixins/mixin-form-field-select.pug @@ -0,0 +1,15 @@ +include ./mixin-form-message +include ./mixin-form-help +mixin formFieldSelect({ className= '', hasInfobulle= false, hasClear=false, modifier= '', textMessage= 'Aide à la saisie', modifierMessage='', iconMessage='', disabled=false}) + .af-form__select(class=(modifier !== '') ? ` af-form__select--${modifier}` : '', class=className) + .af-form__select-container + select.af-form__input-select(class=(hasInfobulle) ? ` af-form__input-select--hasinfobulle` : '' name="inputtextname" type="text" disabled= disabled || null) + option(value="0") -Sélectionner- + option(value="1") Option 1 + option(value="2") Option 2 + option(value="3") Option 3 + option(value="4") Option 4 + span.glyphicon.glyphicon-menu-down + if(hasInfobulle) + +formHelp() + +formMessage({modifierMessage, textMessage, iconMessage}) \ No newline at end of file diff --git a/storybook/design-system/src/components/form/mixins/mixin-form-field-text.pug b/storybook/design-system/src/components/form/mixins/mixin-form-field-text.pug new file mode 100644 index 000000000..e9fcb31e7 --- /dev/null +++ b/storybook/design-system/src/components/form/mixins/mixin-form-field-text.pug @@ -0,0 +1,11 @@ +include ./mixin-form-message +include ./mixin-form-help +mixin formFieldText({ hasInfobulle= false, hasClear=false, modifier= '', textMessage= 'Aide à la saisie', modifierMessage='', iconMessage='', disabled=false}) + .af-form__text(class=(modifier !== '') ? ` af-form__text--${modifier}` : '' class=(hasInfobulle) ? ` af-form__text--hasinfobulle` : '') + .af-form__text-wrapper + input.af-form__input-text(class=(hasInfobulle) ? ` af-form__input-text--hasinfobulle` : '' name="inputtextname" type="text" disabled= disabled || null) + if(hasClear) + .glyphicon.glyphicon-close.af-form__clear(role="button" tabindex="-1") + if(hasInfobulle) + +formHelp() + +formMessage({modifierMessage, textMessage, iconMessage}) diff --git a/storybook/design-system/src/components/form/mixins/mixin-form-help.pug b/storybook/design-system/src/components/form/mixins/mixin-form-help.pug new file mode 100644 index 000000000..3cae50838 --- /dev/null +++ b/storybook/design-system/src/components/form/mixins/mixin-form-help.pug @@ -0,0 +1,3 @@ +mixin formHelp() + button.btn.af-btn--circle-small(type="button") + span.af-more-help i \ No newline at end of file diff --git a/storybook/design-system/src/components/form/mixins/mixin-form-message.pug b/storybook/design-system/src/components/form/mixins/mixin-form-message.pug new file mode 100644 index 000000000..aa6e192de --- /dev/null +++ b/storybook/design-system/src/components/form/mixins/mixin-form-message.pug @@ -0,0 +1,7 @@ +mixin formMessage({modifierMessage= '', textMessage='', iconMessage= ''}) + small.af-form__message(class=(modifierMessage !== '') ? ` af-form__message--${modifierMessage}` : '') + if(!iconMessage) + | #{textMessage} + else + span.glyphicon(class=`glyphicon-${iconMessage}`) + span.af-form__error-text #{textMessage} \ No newline at end of file diff --git a/storybook/design-system/src/components/logo/logo.scss b/storybook/design-system/src/components/logo/logo.scss index 9fac99c0e..79deeb529 100644 --- a/storybook/design-system/src/components/logo/logo.scss +++ b/storybook/design-system/src/components/logo/logo.scss @@ -1,5 +1,6 @@ .#{$prefix} { &-logo { + line-height: 1; display: flex; align-items: center; border-bottom: 1px solid $color-gray-2; @@ -38,6 +39,7 @@ position: relative; display: inline-flex; letter-spacing: -1px; + margin-bottom: 0; &::after { content: '®'; @@ -57,6 +59,7 @@ font-weight: 100; color: $white; font-style: italic; + margin-bottom: 0; } } diff --git a/storybook/design-system/src/components/menu/menu.scss b/storybook/design-system/src/components/menu/menu.scss index 972095b69..2a303681f 100644 --- a/storybook/design-system/src/components/menu/menu.scss +++ b/storybook/design-system/src/components/menu/menu.scss @@ -4,7 +4,7 @@ &__nav { position: fixed; - z-index: 2; + z-index: 4; width: $menu-width; height: calc(100% - 53px); transition: all .5s ease; @@ -14,9 +14,13 @@ margin-top: 53px; overflow-x: auto; box-shadow: 0 16px 19px rgba(0, 0, 0, .4); + line-height: 1; } &__list { + margin: 0; + padding: 0; + &:not(.tk-menu__list--child) { background: $color-gray-3; } @@ -29,7 +33,7 @@ &__item { &-link { - padding: 1rem 0 1rem 2rem; + padding: .8rem 0 .8rem 2rem; display: block; transition: all .5s linear; background: $white; diff --git a/storybook/design-system/src/components/page/page-content-component.pug b/storybook/design-system/src/components/page/page-content-component.pug new file mode 100644 index 000000000..94265759e --- /dev/null +++ b/storybook/design-system/src/components/page/page-content-component.pug @@ -0,0 +1,15 @@ +mixin PageContentComponent() + +PageContent() + section#pageguidelines + +Title({ level: "h1", modifier: 'page' }) + | Generales Guidelines + block guidelines + section#pagecode + +Title({ level: "h1", modifier: 'page' }) + | Source Code + block code + section#pagestyle + +Title({ level: "h1", modifier: 'page' }) + | Style + block style + diff --git a/storybook/design-system/src/components/page/page-content.pug b/storybook/design-system/src/components/page/page-content.pug index d68435455..6e17ef523 100644 --- a/storybook/design-system/src/components/page/page-content.pug +++ b/storybook/design-system/src/components/page/page-content.pug @@ -1,2 +1,3 @@ -div(class=`${prefix}-page__content`) - block page-content \ No newline at end of file +mixin PageContent() + div(class=`${prefix}-page__content`) + block diff --git a/storybook/design-system/src/components/page/page-markdown.pug b/storybook/design-system/src/components/page/page-markdown.pug new file mode 100644 index 000000000..343e99fde --- /dev/null +++ b/storybook/design-system/src/components/page/page-markdown.pug @@ -0,0 +1,3 @@ +mixin PageMarkdown() + article(class=`${prefix}-markdown`) + block diff --git a/storybook/design-system/src/components/page/page-summary.pug b/storybook/design-system/src/components/page/page-summary.pug new file mode 100644 index 000000000..22330ef38 --- /dev/null +++ b/storybook/design-system/src/components/page/page-summary.pug @@ -0,0 +1,8 @@ +mixin PageSummary() + ul(class=`${prefix}-page__summary`) + li(class=`${prefix}-page__summary-item`) + span(class=`${prefix}-page__summary-link ${prefixjs}-smooth-links` data-target="pageguidelines") Guidelines + li(class=`${prefix}-page__summary-item`) + span(class=`${prefix}-page__summary-link ${prefixjs}-smooth-links` data-target="pagecode") Code + li(class=`${prefix}-page__summary-item`) + span(class=`${prefix}-page__summary-link ${prefixjs}-smooth-links` data-target="pagestyle") Style diff --git a/storybook/design-system/src/components/page/page-title.pug b/storybook/design-system/src/components/page/page-title.pug index b4206d51a..ff7717b15 100644 --- a/storybook/design-system/src/components/page/page-title.pug +++ b/storybook/design-system/src/components/page/page-title.pug @@ -1,2 +1,6 @@ -div(class=`${prefix}-page__header`) - block page-title \ No newline at end of file +mixin PageTitle({ title, subtitle }) + div(class=`${prefix}-page__header`) + +Title({level:"h1", modifier:""}) + | #{title} + +Title({level:"h2", modifier:""}) + | #{subtitle} diff --git a/storybook/design-system/src/components/page/page.scss b/storybook/design-system/src/components/page/page.scss index 7829a0f94..df2d5724d 100644 --- a/storybook/design-system/src/components/page/page.scss +++ b/storybook/design-system/src/components/page/page.scss @@ -1,11 +1,12 @@ .#{$prefix} { &-page { - background: $white; + background: $color-gray-3; &__header { padding: .8rem 1rem .8rem 30px; position: relative; - + line-height: 1; + background: $white; &::after { content: ''; position: absolute; @@ -18,24 +19,25 @@ h1 { color: $color-marine; - margin-top: 0; + margin: 0; font-size: 2.5rem; font-family: $font-family-headings; transform: skewX(-15deg); + letter-spacing: -2px; } h2 { color: $color-gray-dark; - margin-top: 0; + font-size: 1.2rem; + margin: 0; font-family: $font-family-base; - font-weight: 400; + font-weight: 100; font-style: italic; } } &__content { padding: 0 30px 2em 30px; - width: 85%; .hljs { padding: 1em; @@ -48,8 +50,44 @@ } &__links { + position: sticky; + z-index: 3; + top: 53px; padding: 1em 1em 1em 30px; - background: $color-mercury; + background: $color-action-2; + display: flex; + justify-content: space-between; + align-items: center; + } + + &__summary { + display: flex; + list-style: none; + padding: 0; + margin: 0; + + &-item { + margin: 0 6px; + font-size: 1.2rem; + + &:first-child { + margin-left: 0; + } + } + + &-link { + text-decoration: underline; + cursor: pointer; + + &:hover { + text-decoration: none; + } + + &:active, + &:focus { + color: red; + } + } } &__info { @@ -64,4 +102,12 @@ } } } + + &-title { + &--page { + font-size: 2.2rem; + margin: 1.5rem 0; + font-weight: 800; + } + } } diff --git a/storybook/design-system/src/components/smoothscrollto/smoothScrollTo.js b/storybook/design-system/src/components/smoothscrollto/smoothScrollTo.js new file mode 100644 index 000000000..7f1664594 --- /dev/null +++ b/storybook/design-system/src/components/smoothscrollto/smoothScrollTo.js @@ -0,0 +1,54 @@ +const noClick = (e) => { + e.preventDefault(); + e.stopPropagation(); +}; + +const ease = (t, b, c, d) => (c * t) / d + b; + +class SmoothScrollTo { + constructor(selector) { + this.smoothLinks = document.querySelectorAll(`.${selector}`); + this.delay = 1000; + this.offset = 80; + } + + init() { + if (this.isNotExitingElement()) { + return; + } + this.initEvents(); + } + + initEvents = () => { + [].forEach.call(this.smoothLinks, smoothLink => smoothLink.addEventListener('click', e => this.smoothScroll(e), true)); + }; + + isNotExitingElement() { + return !this.smoothLinks; + } + + smoothScroll(e) { + const duration = this.delay; + noClick(e); + const id = e.currentTarget.getAttribute('data-target'); + const smoothTarget = document.getElementById(id); + const targetPosition = smoothTarget.getBoundingClientRect().top; + const startPosition = window.pageYOffset; + const distance = targetPosition - 113; + let startTime = null; + + function animation(currentTime) { + if (startTime === null) { + startTime = currentTime; + } + const timeElapsed = currentTime - startTime; + const runAnimation = ease(timeElapsed, startPosition, distance, duration); + window.scrollTo(0, runAnimation); + if (timeElapsed < duration) requestAnimationFrame(animation); + } + + requestAnimationFrame(animation); + } +} + +export default SmoothScrollTo; diff --git a/storybook/design-system/src/components/tabs/tabs.js b/storybook/design-system/src/components/tabs/tabs.js index b5977c220..7a1655b26 100644 --- a/storybook/design-system/src/components/tabs/tabs.js +++ b/storybook/design-system/src/components/tabs/tabs.js @@ -1,5 +1,3 @@ -import $$ from '../../commons/js/selectorAll'; -import $ from '../../commons/js/selector'; import { prefix, prefixjs } from '../../data/base.json'; const classJsItemTabs = `${prefixjs}-tabs__nav-item`; @@ -7,9 +5,24 @@ const activeModifier = 'active'; const activeContentClassJs = `${prefix}-tabs__content-item--${activeModifier}`; const activeNavClassJs = `${prefix}-tabs__nav-item--${activeModifier}`; +const setActive = (e) => { + const target = e.currentTarget; + const targetTab = target.closest(`.${prefix}-tabs`); + targetTab.querySelector(`.${activeContentClassJs}`).classList.remove(activeContentClassJs); + targetTab.querySelector(`.${activeNavClassJs}`).classList.remove(activeNavClassJs); + target.classList.add(activeNavClassJs); + targetTab + .querySelector(`section[data-id=tabs__content-item--${target.getAttribute('data-nav-id')}]`) + .classList.add(activeContentClassJs); +}; + +const initEvents = (tabNavItems) => { + [].forEach.call(tabNavItems, tab => tab.addEventListener('click', e => setActive(e), true)); +}; + class Tabs { constructor(selector) { - this.selector = $(selector); + this.tabs = document.querySelectorAll(`.${selector}`); } init() { @@ -17,35 +30,18 @@ class Tabs { return; } this.initElements(); - this.initEvents(); } initElements() { - this.tabNav = this.selector.querySelector(`.${prefix}-tabs__nav`); - this.tabContent = this.selector.querySelector(`.${prefix}-tabs__content`); - this.tabs = $$(this.tabNav)(`.${classJsItemTabs}`); - this.contents = $$(this.tabContent)(`.${classJsItemTabs}`); - } - - initEvents() { - [].forEach.call(this.tabs, tab => tab.addEventListener('click', e => this.setActive(e), true)); - } - - setActive(e) { - this.tabContent - .querySelector(`:scope > .${activeContentClassJs}`) - .classList.remove(activeContentClassJs); - this.tabNav.querySelector(`:scope > .${activeNavClassJs}`).classList.remove(activeNavClassJs); - e.currentTarget.classList.add(activeNavClassJs); - this.tabContent - .querySelector( - `section[data-id=tabs__content-item--${e.currentTarget.getAttribute('data-nav-id')}]`, - ) - .classList.add(activeContentClassJs); + [].forEach.call(this.tabs, (tab) => { + const tabNav = tab.querySelector(`.${prefix}-tabs__nav`); + const tabNavItems = tabNav.querySelectorAll(`.${classJsItemTabs}`); + initEvents(tabNavItems); + }); } isNotExitingElement() { - return !this.selector; + return !this.tabs; } } diff --git a/storybook/design-system/src/components/tabs/tabs.scss b/storybook/design-system/src/components/tabs/tabs.scss index c620674c6..0092b2540 100644 --- a/storybook/design-system/src/components/tabs/tabs.scss +++ b/storybook/design-system/src/components/tabs/tabs.scss @@ -34,6 +34,7 @@ &--active { display: block; + box-shadow: 0 0 11px 5px rgba(0,0,0,0.2); } } } diff --git a/storybook/design-system/src/components/title/title.scss b/storybook/design-system/src/components/title/title.scss index 5a2ddb2cb..3d9b317f2 100644 --- a/storybook/design-system/src/components/title/title.scss +++ b/storybook/design-system/src/components/title/title.scss @@ -2,6 +2,5 @@ &-title { margin-top: 0; font-family: $font-family-headings; - font-weight: 900; } } diff --git a/storybook/design-system/src/data/base.json b/storybook/design-system/src/data/base.json index f27abbf3b..a8ed6f5ef 100644 --- a/storybook/design-system/src/data/base.json +++ b/storybook/design-system/src/data/base.json @@ -4,6 +4,7 @@ "pathImg": "./assets/images/", "pathFavicons": "./assets/favicons/", "storybookBaseUrl": "https://axaguildev.github.io/react-toolkit/latest/storybook/?path=/story/", + "storybookIframeUrl": "https://axaguildev.github.io/react-toolkit/latest/storybook/iframe.html?id=", "githubBaseUrl": "https://github.com/AxaGuilDEv/react-toolkit/tree/master/packages/", "badgeBaseUrl": "https://badge.fury.io/js/", "baseUrlProd": "https://axaguildev.github.io/react-toolkit/latest/design-system" diff --git a/storybook/design-system/src/data/menu.json b/storybook/design-system/src/data/menu.json index 53bcd00e4..1723dc580 100644 --- a/storybook/design-system/src/data/menu.json +++ b/storybook/design-system/src/data/menu.json @@ -10,20 +10,24 @@ { "href": "/get-started", "label": "Get started" + }, + { + "href": "/github", + "label": "Github" } ] } ], "layouts": [ { - "label": "Layouts", + "label": "Pages", "childsmenu": [ { - "href": "/layouts/form", + "href": "/pages/form", "label": "Page form" }, { - "href": "/layouts/table", + "href": "/pages/table", "label": "Page table" } ] @@ -100,7 +104,6 @@ "href": "/atoms/slider", "label": "Slider" }, - { "href": "/molecules/table", "label": "Table" @@ -125,7 +128,7 @@ "label": "Title Bar" }, { - "href": "/organisms/navigation", + "href": "/molecules/navigation", "label": "Navigation" }, { @@ -133,7 +136,7 @@ "label": "Header" }, { - "href": "/organisms/footer", + "href": "/molecules/footer", "label": "Footer" }, { @@ -214,4 +217,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/storybook/design-system/src/index.js b/storybook/design-system/src/index.js index 9ef7229f2..449e96940 100644 --- a/storybook/design-system/src/index.js +++ b/storybook/design-system/src/index.js @@ -1,15 +1,16 @@ import Menu from './components/menu/menu'; import Tabs from './components/tabs/tabs'; import Demo from './components/demo/demo'; +import SmoothScrollTo from './components/smoothscrollto/smoothScrollTo'; const menu = new Menu(); -const tabs = new Tabs('js-tabs'); const tabsDemo = new Tabs('js-tabs--demo'); const demo = new Demo(); +const smoothScrollTo = new SmoothScrollTo('js-smooth-links'); document.addEventListener('DOMContentLoaded', () => { menu.init(); - tabs.init(); tabsDemo.init(); demo.init(); + smoothScrollTo.init(); }); diff --git a/storybook/design-system/src/index.pug b/storybook/design-system/src/index.pug index e691451de..94528a4dd 100644 --- a/storybook/design-system/src/index.pug +++ b/storybook/design-system/src/index.pug @@ -14,7 +14,7 @@ block content div(class=`${prefix}-home__getstarted-content`) h3(class=`${prefix}-home__getstarted-title`) Personnalized p(class=`${prefix}-home__getstarted-text`) - | With over thirty modules, personalize your tools so they best fit your needs. + | With over thirty modules, personalize your tools so they best fit your needs. | Select only the modules you needs and get quicky functionals and web normalized pages. h3(class=`${prefix}-home__getstarted-title`) Simple p(class=`${prefix}-home__getstarted-text`) @@ -24,8 +24,8 @@ block content +ButtonLink({ modifier:'has-icon-right', label: 'GET STARTED', icon:'arrowthin-right', href:'/get-started'}) section(class=`${prefix}-home__explore`) h3(class=`${prefix}-home__explore-title`) - | Explore the - span(class=`${prefix}-slash`) Slash + | Explore the + span(class=`${prefix}-slash`) Slash | Design System div(class=`${prefix}-home__encarts`) +Encart({ image:"ux.svg", title:"UX Guidelines" , text:"All rules and guidelines for all components and UX patterns."}) @@ -36,10 +36,9 @@ block content h3(class=`${prefix}-home__demo-title`) Demo p(class=`${prefix}-home__demo-text`) | Discover our sample application and start your own. - +ButtonLink({right:Boolean(true), modifier:'demo has-icon-right', label: 'See demo', icon:'arrowthin-right', target:"_blank", href:'https://axaguildev.github.io/react-toolkit/demo/latest/#/'}) - + +ButtonLink({ right:Boolean(true), modifier:'demo has-icon-right', label: 'See demo', icon:'arrowthin-right', target:"_blank", href:'https://axaguildev.github.io/react-toolkit/latest/demo/' }) article(class=`${prefix}-home__tuto`) h3(class=`${prefix}-home__tuto-title`) Tutorial p(class=`${prefix}-home__tuto-text`) | Discover our video tutorial and learn how to use. - +ButtonLink({ modifier:'tuto has-icon-right', label: 'Watch tutorial', icon:'arrowthin-right', target:"_blank", href:'https://axaguildev.github.io/react-toolkit/demo/latest/#/'}) + +ButtonLink({ modifier:'tuto has-icon-right', label: 'Watch tutorial', icon:'arrowthin-right', target:"_blank", href:'https://axaguildev.github.io/react-toolkit/latest/demo/' }) diff --git a/storybook/design-system/src/index.scss b/storybook/design-system/src/index.scss index 138dee1d4..8fa06d656 100644 --- a/storybook/design-system/src/index.scss +++ b/storybook/design-system/src/index.scss @@ -1,20 +1,22 @@ @charset "UTF-8"; -@import '@axa-fr/react-toolkit-core/dist/assets/scss/core.scss'; -@import '@axa-fr/react-toolkit-all/dist/style/af-components.scss'; +/* Import Normalize **********************************************************/ -@import './commons/scss/font-face'; -@import './commons/scss/variables'; +/* @import './commons/scss/normalize'; +@import './commons/scss/reset'; */ -/* Import Normalize ******************************/ +/* Import Toolkit styles *****************************************************/ -@import './commons/scss/normalize'; -@import './commons/scss/reset'; +@import '@axa-fr/react-toolkit-all/dist/style/af-components.scss'; +@import '@axa-fr/react-toolkit-core/dist/assets/fonts/icons/af-icons.scss'; -/* Import components *****************************/ +/* Import components *********************************************************/ /* Commons */ +@import './commons/scss/grid'; +@import './commons/scss/font-face'; +@import './commons/scss/variables'; @import './commons/scss/mixins'; @import './commons/scss/markdown'; @import './commons/scss/main.scss'; @@ -34,14 +36,42 @@ @import './components/menu/menu'; @import './components/repo/repo'; @import './components/encart/encart'; +@import './components/colors/colors.scss'; /* Organisms */ + @import './components/tabs/tabs'; @import './components/demo/demo'; +@import './components/code/code'; /* Layouts */ + @import './components/content/content'; @import './components/page/page'; /* Pages */ + @import './pages/home/home'; +@import './pages/atoms/button/index'; +@import './pages/atoms/list/index'; +@import './pages/atoms/popover/index'; +@import './pages/atoms/slider/index'; +@import './pages/atoms/drawer/index'; +@import './pages/molecules/title-bar/index'; +@import './pages/molecules/alert/index'; +@import './pages/molecules/table/index'; +@import './pages/molecules/footer/index'; +@import './pages/molecules/form-text/index'; +@import './pages/molecules/form-select/index'; +@import './pages/molecules/form-radio-switch/index'; +@import './pages/organisms/accordion/index'; +@import './pages/organisms/paging/index'; +@import './pages/organisms/panel/index'; +@import './pages/organisms/header/index'; +@import './pages/organisms/footer-client/index'; +@import './pages/organisms/form-card/index'; +@import './pages/organisms/modal/index'; +@import './pages/pages/form/index'; +@import './pages/pages/table/index'; +@import './pages/style/colors/index'; +@import './pages/style/icons/index'; diff --git a/storybook/design-system/src/pages/atoms/badge/data.json b/storybook/design-system/src/pages/atoms/badge/data.json new file mode 100644 index 000000000..78759b0c1 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/badge/data.json @@ -0,0 +1,25 @@ +{ + "metatitle": "Badge Component UI - Slash Design System", + "metadescription": "UI Component Badge for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Badge design system, ui Badge, design system axa, design system ui, design system react, design", + "github": "badge", + "storybook": "badge--simple-badge", + "badge": "%40axa-fr%2Freact-toolkit-badge", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/atoms/badge/index.pug b/storybook/design-system/src/pages/atoms/badge/index.pug new file mode 100644 index 000000000..0ea56e130 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/badge/index.pug @@ -0,0 +1,33 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/atoms/badge'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-badge/dist/badge.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Badge', subtitle: 'Atom' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it(html) ./markdown/guidelines.md + block code + +Demo({ title:'Classic Badge', storybook, activePath, tmpl: `classic`, sassPath }) + +Demo({ title:'Badge With Icon', storybook, activePath, tmpl: `infoIcon`, sassPath }) + block style + +PageMarkdown() + include:markdown-it(html) ./markdown/style.md + +Colors({ colors }) diff --git a/storybook/design-system/src/pages/atoms/badge/index.scss b/storybook/design-system/src/pages/atoms/badge/index.scss new file mode 100644 index 000000000..1ef8a39e7 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/badge/index.scss @@ -0,0 +1,16 @@ +/* Just for demo *****************************************************/ +.af-btn { + margin: 0 1rem 1rem 0; +} + +.tk-block-demo { + display: flex; + align-content: space-between; + flex-wrap: wrap; + padding: 1em; + background: $white; + + .af-btn--circle { + margin: 0 1rem 1rem 0; + } +} diff --git a/storybook/design-system/src/pages/molecules/title-bar/markdown/usage.md b/storybook/design-system/src/pages/atoms/badge/markdown/guidelines.md similarity index 68% rename from storybook/design-system/src/pages/molecules/title-bar/markdown/usage.md rename to storybook/design-system/src/pages/atoms/badge/markdown/guidelines.md index 980b2617f..243a5262b 100644 --- a/storybook/design-system/src/pages/molecules/title-bar/markdown/usage.md +++ b/storybook/design-system/src/pages/atoms/badge/markdown/guidelines.md @@ -1,4 +1,10 @@ -## General Guidelines +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . **Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. @@ -18,12 +24,12 @@ Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitu ## Icon usage -- Use glyphs (16px) within buttons. -- Glyphs are distinguished by their solid shape and knocked-out details. -- Glyphs should always appear to the right of the text. -- Glyphs used in buttons must be directly related to the action that the user is taking. -- Glyphs must be the same color value as the text within a button. -- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). ## Danger version usage diff --git a/storybook/design-system/src/pages/atoms/badge/markdown/style.md b/storybook/design-system/src/pages/atoms/badge/markdown/style.md new file mode 100644 index 000000000..e091c376f --- /dev/null +++ b/storybook/design-system/src/pages/atoms/badge/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-badge/dist/badge.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------- | ------------------ | ----------- | ----------------------- | +| **.af-badge** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/atoms/badge/templates/classic.pug b/storybook/design-system/src/pages/atoms/badge/templates/classic.pug new file mode 100644 index 000000000..e5ea41d00 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/badge/templates/classic.pug @@ -0,0 +1,9 @@ +.tk-block-demo + .fordemo + span.af-badge.af-badge--info Info + .fordemo + span.af-badge.af-badge--error Error + .fordemo + span.af-badge.af-badge--danger Danger + .fordemo + span.af-badge.af-badge--success Success diff --git a/storybook/design-system/src/pages/atoms/badge/templates/infoIcon.pug b/storybook/design-system/src/pages/atoms/badge/templates/infoIcon.pug new file mode 100644 index 000000000..eb39e908d --- /dev/null +++ b/storybook/design-system/src/pages/atoms/badge/templates/infoIcon.pug @@ -0,0 +1,2 @@ +span.af-badge.af-badge--error + i.glyphicon.glyphicon-bell diff --git a/storybook/design-system/src/pages/atoms/button/data.json b/storybook/design-system/src/pages/atoms/button/data.json new file mode 100644 index 000000000..698cf89df --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/data.json @@ -0,0 +1,70 @@ +{ + "metatitle": "Button Component UI - Slash Design System", + "metadescription": "UI Component Button for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Button design system, ui Button, design system axa, design system ui, design system react, design", + "github": "button", + "storybook": "button--simple-button", + "badge": "%40axa-fr%2Freact-toolkit-button", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + }, + { + "name": "Button Disabled", + "sass": " $color-btn-disabled", + "hex": "#c9c9c9" + }, + { + "name": "Button success", + "sass": " $color-btn-success", + "hex": " #1cc578" + }, + { + "name": "Button success dark", + "sass": " $color-btn-success-dark", + "hex": " #0d844e" + }, + { + "name": "Button success focuced", + "sass": " $color-btn-success-focused", + "hex": " #bdffe1" + }, + { + "name": "Button danger", + "sass": " $color-btn-danger", + "hex": " #f02849" + }, + { + "name": "Button danger dark", + "sass": " $color-btn-danger-dark", + "hex": " #8f182c" + }, + { + "name": "Button danger focuced", + "sass": " $color-btn-danger-focused", + "hex": " #ffa0af" + } + ] +} diff --git a/storybook/design-system/src/pages/atoms/button/index.pug b/storybook/design-system/src/pages/atoms/button/index.pug new file mode 100644 index 000000000..dd8bb54f0 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/index.pug @@ -0,0 +1,36 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/atoms/button'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-button/dist/button.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Button', subtitle: 'Atom' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it(html) ./markdown/guidelines.md + block code + +Demo({ title:'Classic Button', storybook, activePath, tmpl: `button`, modifier:"button", sassPath }) + +Demo({ title:'Button with icon', storybook, activePath, tmpl: `button-icon` , modifier:"button", sassPath }) + +Demo({ title:'Button reverse', storybook, activePath, tmpl: `button-reverse` , modifier:"button", sassPath }) + +Demo({ title:'Button circle', storybook, activePath, tmpl: `circle` , modifier:"button", sassPath }) + +Demo({ title:'Button ghost', storybook, activePath, tmpl: `ghost` , modifier:"button", sassPath }) + block style + +PageMarkdown() + include:markdown-it(html) ./markdown/style.md + +Colors({ colors }) diff --git a/storybook/design-system/src/pages/atoms/button/index.scss b/storybook/design-system/src/pages/atoms/button/index.scss new file mode 100644 index 000000000..84e7eb9b6 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/index.scss @@ -0,0 +1,19 @@ +/* Just for demo *****************************************************/ + +.tk-demo--button{ + .af-btn { + margin: 0 1rem 1rem 0; + } +} + +.tk-block-demo { + display: flex; + align-content: space-between; + flex-wrap: wrap; + padding: 1em; + background: $white; + + .af-btn--circle { + margin: 0 1rem 1rem 0; + } +} diff --git a/storybook/design-system/src/pages/atoms/button/markdown/guidelines.md b/storybook/design-system/src/pages/atoms/button/markdown/guidelines.md new file mode 100644 index 000000000..c8d22853d --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/markdown/guidelines.md @@ -0,0 +1,117 @@ +Aussi nommés CTA (Call To Action), les boutons sont utilisés pour rendre les actions de navigation ou d'actions immédiatement visibles et faciles à exécuter en un clic. + +## Tone of voice + +Les boutons doivent toujours comporter un verbe qui encourage l'action. + +- Utilisez la formule {verbe} + {substantif} sur les boutons, +- Les termes utilisés doivent permettre d’anticiper ce qui va se passer. +- Le premier mot est en majuscule et le reste en minuscule (sauf si un terme est un nom propre). + +## Usage + +
+
+ Main button PNG +

Bouton principal

+

Pour mettre en évidence une action "forte" dans la page. Ne pas utiliser plus d'un bouton principal par page ou section.

+
+ +
+ Main button with icon PNG +

Bouton principal avec pictogramme

+

Un pictogramme peut être inclus dans un bouton principal, lorsqu’on souhaite mettre en avant l’action principale d’une page.Ne pas multiplier les boutons avec des pictogrammes. Point d’attention : n’utiliser un pictogramme que si celui-ci est auto-porteur (ex : téléchargement).

+
+ +
+ Secondary button PNG +

Bouton secondaire

+

Pour toutes les autres actions "moins fortes" que celle de l'action principale de la page (bouton de retour ou étape précédente). Un bouton secondaire peut être utilisé sans qu’un bouton principal ne soit présent dans la page.

+
+ +
+ Secondary button PNG +

Bouton small

+

Il est toujours associé à un champ de formulaire et positionné à droite de celui-ci.

+
+
+ +## Bests practices + +Différentes couleurs peuvent être utilisées en fonction de la gravité du résultat d’une action : + +
+
+ Main button PNG +

Bouton rouge

+

Utilisé lorsque « supprimer » des fichiers indique une gravité élevée.

+
+
+ Success button PNG +

Bouton vert

+

Utilisé pour une action de validation

+
+
+ Success button PNG +

Bouton bleu

+

Utilisé pour des actions principales.

+
+
+ Disabled button PNG +

Bouton gris

+

Utilisé pour montrer qu'une action est existante mais que celle-ci n'est pas disponible pour l'utilisateur.

+
+
+ +Prioriser les actions les plus importantes : Trop de boutons d'action sèment la confusion et rendent les utilisateurs incertains de la suite des choses. + +## Positionnement + +Les boutons sont positionnés en fonction du contexte : + +1. En bas à droite des éléments sur lesquels porte l’action : pour clore une action (par exemple, enregistrer une modification dans un formulaire, fermer la page). +2. Les boutons de navigation sont positionnés en bas de la page (ou de l’écran en cas de barre sticky) à droite pour passer à l’étape suivante ou à gauche pour revenir à l’étape précédente +3. Quand la page présente un groupe de boutons (3 et plus), présenter le même espacement. Cependant, il est possible de créer des sous-regroupements, en augmentant l’espacement (entre le bouton isolé et les sous-groupes de boutons] +4. Cas particulier : les actions portant sur le contenu d’un tableau (l’ensemble ou une sélection) sont positionnées en tête du tableau +5. Pour les formulaires de page unique et les tâches ciblées, alignez les boutons à droite et triez les CTA par ordre d'importance de droite à gauche. + +## Use cases + +### Cas 1 : + +Pour distinguer clairement deux options, utiliser un bouton principal / un bouton secondaire. Le bouton principal attirera davantage l'attention. + +![Button Case 1 PNG](../../assets/images/button/button-cas1.png) + +### Cas 2 : + +Quand l'action principale est irréversible (ex : «Remplacer» ou «Supprimer») : Privilégié la CTA "warning" en rouge. + +![Button Case 2 PNG](../../assets/images/button/button-cas2.png) + +### Cas 3 : + +Dans une modal, les CTA sont alignés à gauche + +![Button Case 3 PNG](../../assets/images/button/button-cas3.png) + +### Cas 4 : + +Pour les champs de recherche, utilisez le CTA small, il doit être collé au champ de recherche : + +![Button Case 4 PNG](../../assets/images/button/button-cas4.png) + +### Cas 5 : + +Lorsqu'une action impacte le contenu d’un tableau, la CTA principal est aligné à gauche et positionné au-dessus du tableau + +![Button Case 5 PNG](../../assets/images/button/button-cas5.png) + +## DO / DONT + +Positionnement des CTA dans une modal : + +| DO | DONT | +| ------------------------------------------------------------------ | -------------------------------------------------------------------- | +| ![Button Dont PNG](../../assets/images/button/button-modal-do.png) | ![Button Dont PNG](../../assets/images/button/button-modal-dont.png) | +| Il est préférable de ferrer les boutons à droite ou à gauche | Ne pas centrer les boutons | diff --git a/storybook/design-system/src/pages/atoms/button/markdown/style.md b/storybook/design-system/src/pages/atoms/button/markdown/style.md new file mode 100644 index 000000000..13810895d --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-button/dist/button.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ----------- | ------------------ | ----------- | ----------------------- | +| **.af-btn** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/atoms/button/templates/button-icon.pug b/storybook/design-system/src/pages/atoms/button/templates/button-icon.pug new file mode 100644 index 000000000..f9c2fafc1 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/templates/button-icon.pug @@ -0,0 +1,24 @@ +button.btn.af-btn.af-btn--hasiconLeft + span.af-btn__text Button with left icon + i.glyphicon.glyphicon-arrowthin-left +button.btn.af-btn.af-btn--hasiconLeft.af-btn--disabled + span.af-btn__text Button disabled with left icon + i.glyphicon.glyphicon-arrowthin-left +button.btn.af-btn.af-btn--hasiconLeft.af-btn--success + span.af-btn__text Button success with left icon + i.glyphicon.glyphicon-arrowthin-left +button.btn.af-btn.af-btn--hasiconLeft.af-btn--danger + span.af-btn__text Button danger with left icon + i.glyphicon.glyphicon-arrowthin-left +button.btn.af-btn.af-btn--hasiconRight + span.af-btn__text Button with right icon + i.glyphicon.glyphicon-arrowthin-right +button.btn.af-btn.af-btn--hasiconRight.af-btn--disabled + span.af-btn__text Button disabled with right icon + i.glyphicon.glyphicon-arrowthin-right +button.btn.af-btn.af-btn--hasiconRight.af-btn--success + span.af-btn__text Button success with right icon + i.glyphicon.glyphicon-arrowthin-right +button.btn.af-btn.af-btn--hasiconRight.af-btn--danger + span.af-btn__text Button danger with right icon + i.glyphicon.glyphicon-arrowthin-right diff --git a/storybook/design-system/src/pages/atoms/button/templates/button-reverse.pug b/storybook/design-system/src/pages/atoms/button/templates/button-reverse.pug new file mode 100644 index 000000000..69a4e17b8 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/templates/button-reverse.pug @@ -0,0 +1,14 @@ +button.btn.af-btn.af-btn--reverse(tabindex="-1") Button AF reverse +button.btn.af-btn.af-btn--reverse.af-btn--disabled(tabindex="-1") Button AF disabled reverse +button.btn.af-btn.af-btn--reverse.af-btn--hasiconLeft(tabindex="-1") + span.af-btn__text Button with left icon + i.glyphicon.glyphicon-arrowthin-left +button.btn.af-btn.af-btn--reverse.af-btn--hasiconRight(tabindex="-1") + span.af-btn__text Button with right icon + i.glyphicon.glyphicon-arrowthin-right +button.btn.af-btn.af-btn--reverse.af-btn--hasiconLeft(tabindex="-1") + span.af-btn__text Button with left icon + i.glyphicon.glyphicon-globe +button.btn.af-btn.af-btn--reverse.af-btn--disabled.af-btn--hasiconRight(tabindex="-1") + span.af-btn__text Button disabled with right icon + i.glyphicon.glyphicon-arrowthin-right \ No newline at end of file diff --git a/storybook/design-system/src/pages/atoms/button/templates/button.pug b/storybook/design-system/src/pages/atoms/button/templates/button.pug new file mode 100644 index 000000000..90d2291bb --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/templates/button.pug @@ -0,0 +1,10 @@ +button.af-btn + | Button AF +button.af-btn.af-btn--disabled + | Button AF Disabled +button.af-btn.af-btn--success + | Button AF success +button.af-btn.af-btn--danger + | Button AF danger +button.af-btn.af-btn--small + | OK diff --git a/storybook/design-system/src/pages/atoms/button/templates/circle.pug b/storybook/design-system/src/pages/atoms/button/templates/circle.pug new file mode 100644 index 000000000..2ecea00d9 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/templates/circle.pug @@ -0,0 +1,12 @@ +-var exemples = ["pushpin", "print", "arrow-xs-down", "heart", "eye-open", "menu-hamburger", "remove", "filter", "floppy-disk", "open"]; + +.tk-block-demo + each ex in exemples + div.fordemo + a.af-btn--circle(href="#" role="button" ) + i.glyphicon(class=`glyphicon-${ex}`) +.tk-block-demo + each ex in exemples + div.fordemo + a.af-btn--circle-small(href="#" role="button" ) + i.glyphicon(class=`glyphicon-${ex}`) diff --git a/storybook/design-system/src/pages/atoms/button/templates/ghost.pug b/storybook/design-system/src/pages/atoms/button/templates/ghost.pug new file mode 100644 index 000000000..0ae82904b --- /dev/null +++ b/storybook/design-system/src/pages/atoms/button/templates/ghost.pug @@ -0,0 +1,30 @@ +.tk-block-demo + a.af-link(href="#") Simple link +.tk-block-demo + a.af-link.af-link--hasIconLeft(href="#") + i.glyphicon.glyphicon-plus + span.af-link__text Link with icon +.tk-block-demo + a.af-link.af-link--hasIconLeft(href="#") + i.glyphicon.glyphicon-arrowthin-left + span.af-link__text Back Link +.tk-block-demo + a.af-link.af-link--hasIconLeft(href="#") + i.glyphicon.glyphicon-plus-sign + span.af-link__text Link plus +.tk-block-demo + a.af-link.af-link--hasIconLeft(href="#") + i.glyphicon.glyphicon-pencil + span.af-link__text Link edition +.tk-block-demo + a.af-link.af-link--hasIconLeft(href="#") + i.glyphicon.glyphicon-print + span.af-link__text Link print +.tk-block-demo + a.af-link.af-link--hasIconLeft(href="#") + i.glyphicon.glyphicon-question-sign + span.af-link__text Link question +.tk-block-demo + a.af-link.af-link--hasIconRight(href="#") + span.af-link__text Link new window + i.glyphicon.glyphicon-new-window diff --git a/storybook/design-system/src/pages/atoms/drawer/data.json b/storybook/design-system/src/pages/atoms/drawer/data.json new file mode 100644 index 000000000..e59adde79 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/drawer/data.json @@ -0,0 +1,25 @@ +{ + "metatitle": "Drawer Component UI - Slash Design System", + "metadescription": "UI Component Drawer for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Drawer design system, ui Drawer, design system axa, design system ui, design system react, design", + "github": "", + "storybook": "get-started--introduction", + "badge": "%40axa-fr%2Freact-toolkit-all", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/atoms/drawer/index.pug b/storybook/design-system/src/pages/atoms/drawer/index.pug new file mode 100644 index 000000000..31e6b9fbe --- /dev/null +++ b/storybook/design-system/src/pages/atoms/drawer/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/atoms/drawer'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-layout-header/dist/Drawer/drawer.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Drawer', subtitle: 'Atom' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it(html) ./markdown/guidelines.md + block code + +Demo({ title:'Classic Drawer', storybook, activePath, tmpl: `classic`, sassPath }) + block style + +PageMarkdown() + include:markdown-it(html) ./markdown/style.md + +Colors({ colors }) diff --git a/storybook/design-system/src/pages/atoms/drawer/index.scss b/storybook/design-system/src/pages/atoms/drawer/index.scss new file mode 100644 index 000000000..ac1509f94 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/drawer/index.scss @@ -0,0 +1,15 @@ +/* TODO A reporter sur le toolkit */ +/* Dans le composant drawer, il faut supprimer l'appel à la fonction transition de bootstrap */ +.af-drawer { + &__part { + font-family: $font-family-headings; + background: $color-axa; + color: $white; + text-align: center; + font-size: 2rem; + padding: 2em; + width: 100%; + height: 100%; + font-weight: 900; + } +} diff --git a/storybook/design-system/src/pages/atoms/drawer/markdown/guidelines.md b/storybook/design-system/src/pages/atoms/drawer/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/atoms/drawer/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/atoms/drawer/markdown/style.md b/storybook/design-system/src/pages/atoms/drawer/markdown/style.md new file mode 100644 index 000000000..247c13bc8 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/drawer/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-drawer/dist/drawer.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| -------------- | ------------------ | ----------- | ----------------------- | +| **.af-drawer** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/atoms/drawer/templates/classic.pug b/storybook/design-system/src/pages/atoms/drawer/templates/classic.pug new file mode 100644 index 000000000..f12c1901f --- /dev/null +++ b/storybook/design-system/src/pages/atoms/drawer/templates/classic.pug @@ -0,0 +1,4 @@ +.af-drawer.left.fade.show + .af-drawer__part left drawer +.af-drawer.right.fade.show + .af-drawer__part right drawer diff --git a/storybook/design-system/src/pages/atoms/list/data.json b/storybook/design-system/src/pages/atoms/list/data.json new file mode 100644 index 000000000..e4da8262a --- /dev/null +++ b/storybook/design-system/src/pages/atoms/list/data.json @@ -0,0 +1,20 @@ +{ + "metatitle": "List Component UI - Slash Design System", + "metadescription": "UI Component List for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "List design system, ui List, design system axa, design system ui, design system react, design", + "github": "list", + "storybook": "get-started--introduction", + "badge": "%40axa-fr%2Freact-toolkit-list", + "colors": [ + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/atoms/list/index.pug b/storybook/design-system/src/pages/atoms/list/index.pug new file mode 100644 index 000000000..85012c0ea --- /dev/null +++ b/storybook/design-system/src/pages/atoms/list/index.pug @@ -0,0 +1,33 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/atoms/list'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-list/dist/list.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'List', subtitle: 'Atom' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it(html) ./markdown/guidelines.md + block code + +Demo({ title:'Classic List', storybook, activePath, tmpl: `classic`, sassPath }) + +Demo({ title:'List With Icon', storybook, activePath, tmpl: `withIcon`, sassPath }) + block style + +PageMarkdown() + include:markdown-it(html) ./markdown/style.md + +Colors({ colors }) diff --git a/storybook/design-system/src/pages/atoms/list/index.scss b/storybook/design-system/src/pages/atoms/list/index.scss new file mode 100644 index 000000000..1a37860c4 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/list/index.scss @@ -0,0 +1,11 @@ +/* Correction toolkit *****************************************************/ + +.af { + &-list--check { + .af-list__item { + .glyphicon { + margin-top: 0; + } + } + } +} diff --git a/storybook/design-system/src/pages/atoms/list/markdown/guidelines.md b/storybook/design-system/src/pages/atoms/list/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/atoms/list/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/title-bar/markdown/structure.md b/storybook/design-system/src/pages/atoms/list/markdown/style.md similarity index 54% rename from storybook/design-system/src/pages/molecules/title-bar/markdown/structure.md rename to storybook/design-system/src/pages/atoms/list/markdown/style.md index ccc47f27d..25d0cc0fe 100644 --- a/storybook/design-system/src/pages/molecules/title-bar/markdown/structure.md +++ b/storybook/design-system/src/pages/atoms/list/markdown/style.md @@ -1,3 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-list/dist/list.scss'; +``` + ## Structure A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------ | ------------------ | ----------- | ----------------------- | +| **.af-list** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/atoms/list/templates/classic.pug b/storybook/design-system/src/pages/atoms/list/templates/classic.pug new file mode 100644 index 000000000..a91ce6c6c --- /dev/null +++ b/storybook/design-system/src/pages/atoms/list/templates/classic.pug @@ -0,0 +1,8 @@ +.tk-block-demo + ul.af-list + li.af-list__item Olivier Youf + li.af-list__item Arnaud Bernard + li.af-list__item Guillaume Chervet + li.af-list__item Samuel Gomez + li.af-list__item Jean-Baptiste Rudant + li.af-list__item Romain Petigny diff --git a/storybook/design-system/src/pages/atoms/list/templates/withIcon.pug b/storybook/design-system/src/pages/atoms/list/templates/withIcon.pug new file mode 100644 index 000000000..23ad219b8 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/list/templates/withIcon.pug @@ -0,0 +1,23 @@ +.tk-block-demo + ul.af-list.af-list--check + li.af-list__item + span.glyphicon.glyphicon-ok + | CSS et SASS + li.af-list__item + span.glyphicon.glyphicon-ok + | ReactJS + li.af-list__item + span.glyphicon.glyphicon-ok + | ES6 + li.af-list__item + span.glyphicon.glyphicon-ok + | GIT + li.af-list__item + span.glyphicon.glyphicon-ok + | Webpack + li.af-list__item + span.glyphicon.glyphicon-ok + | Typescript + li.af-list__item + span.glyphicon.glyphicon-ok + | ReasonML diff --git a/storybook/design-system/src/pages/atoms/loader/data.json b/storybook/design-system/src/pages/atoms/loader/data.json new file mode 100644 index 000000000..1bd82aec0 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/loader/data.json @@ -0,0 +1,25 @@ +{ + "metatitle": "Loader Component UI - Slash Design System", + "metadescription": "UI Component Loader for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Loader design system, ui Loader, design system axa, design system ui, design system react, design", + "github": "loader", + "storybook": "loader--default", + "badge": "%40axa-fr%2Freact-toolkit-loader", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/atoms/loader/index.pug b/storybook/design-system/src/pages/atoms/loader/index.pug new file mode 100644 index 000000000..c09a67ba2 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/loader/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/atoms/loader'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-loader/dist/spinner.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Loader', subtitle: 'Atom' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it(html) ./markdown/guidelines.md + block code + +Demo({ title:'Classic Loader', storybook, activePath, tmpl: `classic`, sassPath }) + block style + +PageMarkdown() + include:markdown-it(html) ./markdown/style.md + +Colors({ colors }) diff --git a/storybook/design-system/src/pages/atoms/loader/markdown/guidelines.md b/storybook/design-system/src/pages/atoms/loader/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/atoms/loader/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/atoms/loader/markdown/style.md b/storybook/design-system/src/pages/atoms/loader/markdown/style.md new file mode 100644 index 000000000..8bd8912b5 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/loader/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-loader/dist/loader.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| -------------- | ------------------ | ----------- | ----------------------- | +| **.af-loader** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/atoms/loader/templates/classic.pug b/storybook/design-system/src/pages/atoms/loader/templates/classic.pug new file mode 100644 index 000000000..b9a945257 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/loader/templates/classic.pug @@ -0,0 +1,4 @@ +.af-spinner.af-spinner--active + .af-spinner__animation + .af-spinner__caption + span Loading... diff --git a/storybook/design-system/src/pages/atoms/popover/data.json b/storybook/design-system/src/pages/atoms/popover/data.json new file mode 100644 index 000000000..3a6a56624 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/popover/data.json @@ -0,0 +1,25 @@ +{ + "metatitle": "Popover Component UI - Slash Design System", + "metadescription": "UI Component Popover for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Popover design system, ui Popover, design system axa, design system ui, design system react, design", + "github": "popover", + "storybook": "popover--popover", + "badge": "%40axa-fr%2Freact-toolkit-popover", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/atoms/popover/index.pug b/storybook/design-system/src/pages/atoms/popover/index.pug new file mode 100644 index 000000000..9aa01bece --- /dev/null +++ b/storybook/design-system/src/pages/atoms/popover/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/atoms/popover'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-popover/dist/popover.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Popover', subtitle: 'Atom' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it(html) ./markdown/guidelines.md + block code + +Demo({ title:'Classic Popover', storybook, activePath, tmpl: `classic`, modifier: 'popover', sassPath }) + block style + +PageMarkdown() + include:markdown-it(html) ./markdown/style.md + +Colors({ colors }) diff --git a/storybook/design-system/src/pages/atoms/popover/index.scss b/storybook/design-system/src/pages/atoms/popover/index.scss new file mode 100644 index 000000000..e2c919184 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/popover/index.scss @@ -0,0 +1,17 @@ +/* Style just for demo */ +.#{$prefix} { + &-demo { + &--popover { + .#{$prefix}-block-demo { + display: flex; + align-content: space-between; + flex-wrap: wrap; + margin-top: 5rem; + + .af-btn--circle { + margin: 3rem; + } + } + } + } +} diff --git a/storybook/design-system/src/pages/atoms/popover/markdown/guidelines.md b/storybook/design-system/src/pages/atoms/popover/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/atoms/popover/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/atoms/popover/markdown/style.md b/storybook/design-system/src/pages/atoms/popover/markdown/style.md new file mode 100644 index 000000000..6bd005bf4 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/popover/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-popover/dist/popover.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| --------------- | ------------------ | ----------- | ----------------------- | +| **.af-popover** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/atoms/popover/templates/classic.pug b/storybook/design-system/src/pages/atoms/popover/templates/classic.pug new file mode 100644 index 000000000..caf9b5541 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/popover/templates/classic.pug @@ -0,0 +1,12 @@ +-var exemples = ["pushpin", "print", "arrow-xs-down", "heart", "eye-open", "menu-hamburger", "remove", "filter", "floppy-disk", "open"]; +-var translate = ["32px, -7px, 0px", "44px, -7px, 0px", "9px, -7px, 0px", "42px, -7px, 0px", "27px, -7px, 0px", "0, -17px, 0px", "32px, -7px, 0px", "43px, -7px, 0px", "19px, -7px, 0px", "41px, -7px, 0px"]; + +.tk-block-demo + each ex, index in exemples + .af-popover__container + .af-popover__container-over + a.btn.af-btn--circle(href="#" role="button" ) + i.glyphicon(class=`glyphicon-${ex}`) + .af-popover__container-pop(data-placement="top" style=`text-align: center;position: absolute; transform: translate3d(${translate[index]}); top: 0px; left: 0px; will-change: transform;` ) + | #{ex} + span.af-popover__arrow diff --git a/storybook/design-system/src/pages/atoms/slider/data.json b/storybook/design-system/src/pages/atoms/slider/data.json new file mode 100644 index 000000000..cd945306d --- /dev/null +++ b/storybook/design-system/src/pages/atoms/slider/data.json @@ -0,0 +1,25 @@ +{ + "metatitle": "Slider Component UI - Slash Design System", + "metadescription": "UI Component Slider for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Slider design system, ui Slider, design system axa, design system ui, design system react, design", + "github": "Form/Input/slider", + "storybook": "form-input-slider--sliderinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-slider", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/atoms/slider/index.pug b/storybook/design-system/src/pages/atoms/slider/index.pug new file mode 100644 index 000000000..fdeba7797 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/slider/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/atoms/slider'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-slider/dist/slider.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Slider', subtitle: 'Atom' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it(html) ./markdown/guidelines.md + block code + +Demo({ title:'Classic Slider', storybook, activePath, tmpl: `classic`, sassPath }) + block style + +PageMarkdown() + include:markdown-it(html) ./markdown/style.md + +Colors({ colors }) diff --git a/storybook/design-system/src/pages/atoms/slider/index.scss b/storybook/design-system/src/pages/atoms/slider/index.scss new file mode 100644 index 000000000..e98cdac56 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/slider/index.scss @@ -0,0 +1,300 @@ +/* jut for demo */ + +.rc-slider { + position: relative; + height: 14px; + padding: 5px 0; + width: 100%; + border-radius: 6px; + -ms-touch-action: none; + touch-action: none; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider * { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-rail { + position: absolute; + width: 100%; + background-color: #e9e9e9; + height: 4px; + border-radius: 6px; +} + +.rc-slider-track { + position: absolute; + left: 0; + height: 4px; + border-radius: 6px; + background-color: #abe2fb; +} + +.rc-slider-handle { + position: absolute; + margin-left: -7px; + margin-top: -5px; + width: 14px; + height: 14px; + cursor: pointer; + cursor: -webkit-grab; + cursor: grab; + border-radius: 50%; + border: solid 2px #96dbfa; + background-color: #fff; + -ms-touch-action: pan-x; + touch-action: pan-x; +} + +.rc-slider-handle:focus { + border-color: #57c5f7; + box-shadow: 0 0 0 5px #96dbfa; + outline: none; +} + +.rc-slider-handle-click-focused:focus { + border-color: #96dbfa; + box-shadow: unset; +} + +.rc-slider-handle:hover { + border-color: #57c5f7; +} + +.rc-slider-handle:active { + border-color: #57c5f7; + box-shadow: 0 0 5px #57c5f7; + cursor: -webkit-grabbing; + cursor: grabbing; +} + +.rc-slider-mark { + position: absolute; + top: 18px; + left: 0; + width: 100%; + font-size: 12px; +} + +.rc-slider-mark-text { + position: absolute; + display: inline-block; + vertical-align: middle; + text-align: center; + cursor: pointer; + color: #999; +} + +.rc-slider-mark-text-active { + color: #666; +} + +.rc-slider-step { + position: absolute; + width: 100%; + height: 4px; + background: transparent; +} + +.rc-slider-dot { + position: absolute; + bottom: -2px; + margin-left: -4px; + width: 8px; + height: 8px; + border: 2px solid #e9e9e9; + background-color: #fff; + cursor: pointer; + border-radius: 50%; + vertical-align: middle; +} + +.rc-slider-dot-active { + border-color: #96dbfa; +} + +.rc-slider-disabled { + background-color: #e9e9e9; +} + +.rc-slider-disabled .rc-slider-track { + background-color: #ccc; +} + +.rc-slider-disabled .rc-slider-handle, +.rc-slider-disabled .rc-slider-dot { + border-color: #ccc; + box-shadow: none; + background-color: #fff; + cursor: not-allowed; +} + +.rc-slider-disabled .rc-slider-mark-text, +.rc-slider-disabled .rc-slider-dot { + cursor: not-allowed !important; +} + +.rc-slider-vertical { + width: 14px; + height: 100%; + padding: 0 5px; +} + +.rc-slider-vertical .rc-slider-rail { + height: 100%; + width: 4px; +} + +.rc-slider-vertical .rc-slider-track { + left: 5px; + bottom: 0; + width: 4px; +} + +.rc-slider-vertical .rc-slider-handle { + margin-left: -5px; + margin-bottom: -7px; + -ms-touch-action: pan-y; + touch-action: pan-y; +} + +.rc-slider-vertical .rc-slider-mark { + top: 0; + left: 18px; + height: 100%; +} + +.rc-slider-vertical .rc-slider-step { + height: 100%; + width: 4px; +} + +.rc-slider-vertical .rc-slider-dot { + left: 2px; + margin-bottom: -4px; +} + +.rc-slider-vertical .rc-slider-dot:first-child { + margin-bottom: -4px; +} + +.rc-slider-vertical .rc-slider-dot:last-child { + margin-bottom: -4px; +} + +.rc-slider-tooltip-zoom-down-enter, +.rc-slider-tooltip-zoom-down-appear { + animation-duration: .3s; + animation-fill-mode: both; + display: block !important; + animation-play-state: paused; +} + +.rc-slider-tooltip-zoom-down-leave { + animation-duration: .3s; + animation-fill-mode: both; + display: block !important; + animation-play-state: paused; +} + +.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active, +.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active { + animation-name: rcSliderTooltipZoomDownIn; + animation-play-state: running; +} + +.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active { + animation-name: rcSliderTooltipZoomDownOut; + animation-play-state: running; +} + +.rc-slider-tooltip-zoom-down-enter, +.rc-slider-tooltip-zoom-down-appear { + transform: scale(0, 0); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); +} + +.rc-slider-tooltip-zoom-down-leave { + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); +} + +@keyframes rcSliderTooltipZoomDownIn { + 0% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(0, 0); + } + + 100% { + transform-origin: 50% 100%; + transform: scale(1, 1); + } +} + +@keyframes rcSliderTooltipZoomDownOut { + 0% { + transform-origin: 50% 100%; + transform: scale(1, 1); + } + + 100% { + opacity: 0; + transform-origin: 50% 100%; + transform: scale(0, 0); + } +} + +.rc-slider-tooltip { + position: absolute; + left: -9999px; + top: -9999px; + visibility: visible; + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-tooltip * { + box-sizing: border-box; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} + +.rc-slider-tooltip-hidden { + display: none; +} + +.rc-slider-tooltip-placement-top { + padding: 4px 0 8px 0; +} + +.rc-slider-tooltip-inner { + padding: 6px 2px; + min-width: 24px; + height: 24px; + font-size: 12px; + line-height: 1; + color: #fff; + text-align: center; + text-decoration: none; + background-color: #6c6c6c; + border-radius: 6px; + box-shadow: 0 0 4px #d9d9d9; +} + +.rc-slider-tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} + +.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow { + bottom: 4px; + left: 50%; + margin-left: -4px; + border-width: 4px 4px 0; + border-top-color: #6c6c6c; +} diff --git a/storybook/design-system/src/pages/atoms/slider/markdown/guidelines.md b/storybook/design-system/src/pages/atoms/slider/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/atoms/slider/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/atoms/slider/markdown/style.md b/storybook/design-system/src/pages/atoms/slider/markdown/style.md new file mode 100644 index 000000000..d66140849 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/slider/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-input-slider/dist/slider.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ---------------------- | ------------------ | ----------- | ----------------------- | +| **.af-form\_\_slider** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/atoms/slider/templates/classic.pug b/storybook/design-system/src/pages/atoms/slider/templates/classic.pug new file mode 100644 index 000000000..16574fd12 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/slider/templates/classic.pug @@ -0,0 +1,17 @@ +.af-form__slider + .md-10 + div(style="width: 100%; margin: 0px;") + .rc-slider.rc-slider-with-marks + .rc-slider-rail + .rc-slider-track(style="visibility: visible; left: 0%; width: 33.3333%;") + .rc-slider-step + span.rc-slider-dot.rc-slider-dot-active(style="left: 0%;") + span.rc-slider-dot.rc-slider-dot-active(style="left: 33.3333%;") + span.rc-slider-dot(style="left: 66.6667%;") + span.rc-slider-dot(style="left: 100%;") + .rc-slider-handle(role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="3" aria-valuenow="1" aria-disabled="false" style="left: 33.3333%;") + .rc-slider-mark + span.rc-slider-mark-text.rc-slider-mark-text-active(style="width: 30%; margin-left: -15%; left: 0%;") VERY BAD + span.rc-slider-mark-text.rc-slider-mark-text-active(style="width: 30%; margin-left: -15%; left: 33.3333%;") BAD + span.rc-slider-mark-text(style="width: 30%; margin-left: -15%; left: 66.6667%;") NICE + span.rc-slider-mark-text(style="width: 30%; margin-left: -15%; left: 100%;") VERY NICE diff --git a/storybook/design-system/src/pages/atoms/title/data.json b/storybook/design-system/src/pages/atoms/title/data.json new file mode 100644 index 000000000..fbd81536f --- /dev/null +++ b/storybook/design-system/src/pages/atoms/title/data.json @@ -0,0 +1,25 @@ +{ + "metatitle": "Title Component UI - Slash Design System", + "metadescription": "UI Component Title for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Title design system, ui Title, design system axa, design system ui, design system react, design", + "github": "title", + "storybook": "title--default", + "badge": "%40axa-fr%2Freact-toolkit-title", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/atoms/title/index.pug b/storybook/design-system/src/pages/atoms/title/index.pug new file mode 100644 index 000000000..96261d9f3 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/title/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/atoms/title'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-title/dist/title.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Title', subtitle: 'Atom' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it(html) ./markdown/guidelines.md + block code + +Demo({ title:'Classic Title', storybook, activePath, tmpl: `classic`, sassPath }) + block style + +PageMarkdown() + include:markdown-it(html) ./markdown/style.md + +Colors({ colors }) diff --git a/storybook/design-system/src/pages/atoms/title/markdown/guidelines.md b/storybook/design-system/src/pages/atoms/title/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/atoms/title/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/atoms/title/markdown/style.md b/storybook/design-system/src/pages/atoms/title/markdown/style.md new file mode 100644 index 000000000..5960d7d12 --- /dev/null +++ b/storybook/design-system/src/pages/atoms/title/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-title/dist/title.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------- | ------------------ | ----------- | ----------------------- | +| **.af-title** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/atoms/title/templates/classic.pug b/storybook/design-system/src/pages/atoms/title/templates/classic.pug new file mode 100644 index 000000000..56816644a --- /dev/null +++ b/storybook/design-system/src/pages/atoms/title/templates/classic.pug @@ -0,0 +1,26 @@ +div(style="background:white; padding: 2rem;") + h1.af-title.af-title--bigTitle Super titre + h1.af-title Title h1 + h2.af-title Title h2 + h3.af-title Title h3 + h4.af-title Title h4 + h5.af-title Title h5 + h6.af-title Title h6 + h1.af-title--content Header 1 + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + h2.af-subtitle Header 2 + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + h3.af-subtitle Header 3 + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + h4.af-subtitle Header 4 + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + h5.af-subtitle Header 5 + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + h6.af-subtitle Header 6 + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. + p Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, blanditiis alias placeat pariatur animi doloremque consequatur adipisci esse, numquam officiis soluta ipsam laboriosam? Reprehenderit iusto magni obcaecati quos, hic ab. diff --git a/storybook/design-system/src/pages/get-started/index.pug b/storybook/design-system/src/pages/get-started/index.pug index 3547435d5..fa13472d8 100644 --- a/storybook/design-system/src/pages/get-started/index.pug +++ b/storybook/design-system/src/pages/get-started/index.pug @@ -1,21 +1,20 @@ extends ../../commons/layout -block vars - - var id = "getstarted" +block vars + - var id = "getstarted" block meta - -const { metatitle, metadescription, metakeywords } = require('../src/pages/get-started/meta.json') - -var metaTitle = metatitle - -var metaDescription = metadescription - -var metaKeywords = metakeywords - -var basedir='../' + -const { metatitle, metadescription, metakeywords } = require('../src/pages/get-started/meta.json') + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../' block menu - +Menu({activePath:'/get-started'}) + +Menu({activePath:'/get-started'}) block page - include ../../components/page/page-title - block page-title - include:markdown-it ./markdown/title.md - include ../../components/page/page-content - block page-content - div(class=`${prefix}-markdown`) - include:markdown-it ./markdown/content.md \ No newline at end of file + +PageTitle({ title: 'Get started', subtitle: ` + Slash Design System contain multiples packages on NPM. Use npm install @axa-fr/react-toolkit-all for all +or just component you need @axa-fr/react-toolkit-xxxxx.` }) + +PageContent() + +PageMarkdown() + include:markdown-it ./markdown/content.md diff --git a/storybook/design-system/src/pages/get-started/markdown/content.md b/storybook/design-system/src/pages/get-started/markdown/content.md index cd57af979..6c0be4a5f 100644 --- a/storybook/design-system/src/pages/get-started/markdown/content.md +++ b/storybook/design-system/src/pages/get-started/markdown/content.md @@ -6,13 +6,13 @@ Pour une utilisation simple et rapide, vous pouvez importer l'ensemble des styles des composants en important le fichier : -```scss +```javascript import '@axa-fr/react-toolkit-all/dist/style/af-components.css'; ``` Ou la version SASS -```scss +```javascript import '@axa-fr/react-toolkit-all/dist/style/af-components.scss'; ``` @@ -25,8 +25,8 @@ Vous pouvez utiliser **Slash Design System** indépendemment des [composants Rea **Component** : import du style par composant. Dans cette méthode, vous allez utiliser des fichiers sources des composants. De cette manière, importer uniquement les styles dont vous avez besoin afin de réduire votre bundles. -```scss -// @file: myheader.scss +```css +/* @file: myheader.scss */ @import '@axa-fr/react-toolkit-layout-header/dist/Header/header.scss'; @import '@axa-fr/react-toolkit-layout-header/dist/Infos/infos.scss'; @import '@axa-fr/react-toolkit-layout-header/dist/Name/name.scss'; @@ -47,7 +47,7 @@ La liste des variables est de couleurs est disponibles sur la [page des couleurs Vous pouvez importer les variables dans le fichier SASS de votre composant : -```scss +```css @import '@axa-fr/react-toolkit-core/dist/assets/scss/core.scss'; ``` @@ -74,9 +74,9 @@ Solution 2 : **sprite SVG** import sprite from '@axa-fr/react-toolkit-core/dist/assets/icons-sprite.svg'; const IconOk = () => ( - - } - + + } + ); ``` diff --git a/storybook/design-system/src/pages/github/index.pug b/storybook/design-system/src/pages/github/index.pug new file mode 100644 index 000000000..d43493035 --- /dev/null +++ b/storybook/design-system/src/pages/github/index.pug @@ -0,0 +1,18 @@ +extends ../../commons/layout + +block vars + - var id = "github" + +block meta + -const { metatitle, metadescription, metakeywords } = require('../src/pages/get-started/meta.json') + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../' +block menu + +Menu({activePath:'/github'}) +block page + +PageTitle({ title: 'Github' }) + +PageContent() + +PageMarkdown() + include:markdown-it ./markdown/content.md diff --git a/storybook/design-system/src/pages/github/markdown/content.md b/storybook/design-system/src/pages/github/markdown/content.md new file mode 100644 index 000000000..f3c261da8 --- /dev/null +++ b/storybook/design-system/src/pages/github/markdown/content.md @@ -0,0 +1,134 @@ +# @axa-fr/react-toolkit + +[![Build status](https://dev.azure.com/axaguildev/react-toolkit/_apis/build/status/AxaGuilDEv.react-toolkit?branch=master)](https://dev.azure.com/axaguildev/react-toolkit) +[![Quality Gate](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-toolkit&metric=alert_status)](https://sonarcloud.io/dashboard?id=AxaGuilDEv_react-toolkit) [![Reliability](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-toolkit&metric=reliability_rating)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-toolkit&metric=reliability_rating) [![Security](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-toolkit&metric=security_rating)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-toolkit&metric=security_rating) [![Code Corevage](https://sonarcloud.io/api/project_badges/measure?project=AxaGuilDEv_react-toolkit&metric=coverage)](https://sonarcloud.io/component_measures?id=AxaGuilDEv_react-toolkit&metric=Coverage) +[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lernajs.io/) [![Twitter](https://img.shields.io/twitter/follow/GuildDEvOpen?style=social)](https://twitter.com/intent/follow?screen_name=GuildDEvOpen) + +- [About](#about) +- [Getting Started](#getting-started) +- [Packages](#packages) +- [Concept](#concept) +- [How Does It Work](#how-does-it-work) +- [Contribute](#contribute) +- [Roadmap](#roadmap) +- [Demo](#demo) + +## About + +A set of independent components. Awesome library based on HTML and CSS using BEM convention with the JavaScript ReactJS implementation. Each components are autonomous and extensible. Pick and use only what you need! + +**How _React-toolkit_ does CSS isolation?** + +Only by using [BEM (Block Element Modifier)](http://getbem.com) CSS convention. No need of the intricate technologies, just pragatism. + +Components are simple to use (just drag and drog it), simple to customize (by using CSS modifier) to your own need. Each component may evaluate internally (HTML, CSS, JS) and minimize an impact on your application. + +You can easily build a new app from scratch or integrate some component into existing application. + +[html+css documentation website](https://axaguildev.github.io?target=react_toolkit_storybook) +[react storybook website](https://axaguildev.github.io?target=react_toolkit_design) + +## Getting Started + +Install what you need + +```sh +npm install @axa-fr/react-toolkit-alert --save +``` + +Use only what you need + +```javascript +import React from 'react'; +import Alert from '@axa-fr/react-toolkit-alert'; +import '@axa-fr/react-toolkit-alert/dist/alert.scss'; + +const MyAlertComponent => () => ( + +) +``` + +## Packages + +- [@axa-fr/react-toolkit-all](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/all/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-all.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-all) +- [@axa-fr/react-toolkit-form-input-text](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/text/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-text.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-text) +- [@axa-fr/react-toolkit-form-input-date](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/date/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-date.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-date) +- [@axa-fr/react-toolkit-form-input-choice](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/choice/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-choice.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-choice) +- [@axa-fr/react-toolkit-form-input-select](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/select/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-select.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-select) +- [@axa-fr/react-toolkit-form-input-select-multi](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/select-multi/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-select-multi.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-select-multi) +- [@axa-fr/react-toolkit-form-input-file](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/file/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-file.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-file) +- [@axa-fr/react-toolkit-form-input-slider](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/slider/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-slider.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-slider) +- [@axa-fr/react-toolkit-form-input-checkbox](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/checkbox/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-checkbox.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-checkbox) +- [@axa-fr/react-toolkit-form-input-textarea](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/textarea/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-textarea.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-textarea) +- [@axa-fr/react-toolkit-form-input-radio](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/radio/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-radio.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-radio) +- [@axa-fr/react-toolkit-form-summary](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/summary/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-summary.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-summary) +- [@axa-fr/react-toolkit-form-steps](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/steps/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-steps.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-steps) +- [@axa-fr/react-toolkit-form-core](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/core/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-core.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-core) +- [@axa-fr/react-toolkit-form-input-number](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/number/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-number.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-number) +- [@axa-fr/react-toolkit-form-input-card](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/card/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-card.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-card) +- [@axa-fr/react-toolkit-form-input-select](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/select/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-select.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-select) +- [@axa-fr/react-toolkit-form-input-switch](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/Input/switch/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-switch.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-input-switch) +- [@axa-fr/react-toolkit-layout-footer](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Layout/footer/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-layout-footer.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-layout-footer) +- [@axa-fr/react-toolkit-layout-footer-client](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Layout/footer-client/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-layout-footer-client.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-layout-footer-client) +- [@axa-fr/react-toolkit-layout-header](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Layout/header/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-layout-header.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-layout-header) +- [@axa-fr/react-toolkit-table](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/table/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-table.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-table) +- [@axa-fr/react-toolkit-collapse](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/collapse/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-collapse.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-collapse) +- [@axa-fr/react-toolkit-loader](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/loader/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-loader.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-loader) +- [@axa-fr/react-toolkit-help](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/help/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-help.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-help) +- [@axa-fr/react-toolkit-popover](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/popover/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-popover.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-popover) +- [@axa-fr/react-toolkit-modal](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/modal/default/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-modal-default.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-modal-default) +- [@axa-fr/react-toolkit-modal](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/modal/boolean/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-modal-boolean.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-modal-boolean) +- [@axa-fr/react-toolkit-action](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/action/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-action.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-action) +- [@axa-fr/react-toolkit-alert](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/alert/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-alert.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-alert) +- [@axa-fr/react-toolkit-tabs](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/tabs/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-tabs.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-tabs) +- [@axa-fr/react-toolkit-badge](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/badge/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-badge.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-badge) +- [@axa-fr/react-toolkit-button](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/button/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-button.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-button) +- [@axa-fr/react-toolkit-icon](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/icon/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-icon.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-icon) +- [@axa-fr/react-toolkit-core](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/core/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-core.svg)](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-core) +- [@axa-fr/react-toolkit-title](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/title/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-title.svg)](https://badge.fury.io/js/%40axa-fr%2F/react-toolkit-title) +- [@axa-fr/react-toolkit-link](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/link/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-link.svg)](https://badge.fury.io/js/%40axa-fr%2F/react-toolkit-link) +- [@axa-fr/react-toolkit-list](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/list/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-list.svg)](https://badge.fury.io/js/%40axa-fr%2F/react-toolkit-list) +- [@axa-fr/react-toolkit-panel](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/panel/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-panel.svg)](https://badge.fury.io/js/%40axa-fr%2F/react-toolkit-panel) +- [@axa-fr/react-toolkit-restitution](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/restitution/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-restitution.svg)](https://badge.fury.io/js/%40axa-fr%2F/react-toolkit-restitution) +- [@axa-fr/react-toolkit-form-filter-inline](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/filter-inline/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-filter-inline.svg)](https://badge.fury.io/js/%40axa-fr%2F/react-toolkit-form-filter-inline) +- [@axa-fr/react-toolkit-form-filter](https://github.com/AxaGuilDEv/react-toolkit/blob/master/packages/Form/filter/README.md) [![npm version](https://badge.fury.io/js/%40axa-fr%2Freact-toolkit-form-filter.svg)](https://badge.fury.io/js/%40axa-fr%2F/react-toolkit-form-filter) + +## Concept + +Each component should be autonomous (HTML + CSS + JS) and extensible. + +## How Does It Work + +### HTML/CSS : + +- BEM convention is used in order to break CSS cascading problem +- SCSS and CSS files are avalaible for every component and can be overrided or extended +- [HTML/CSS Documentation](https://axaguildev.github.io?target=react_toolkit_storybook) + +### React : + +- Components are stateless by default +- Some Higher Order Components (HOC) are stateful but feel free to use the stateless one if it fits your use case +- [React documentation](https://axaguildev.github.io?target=react_toolkit_design) + +## Contribute + +- [How to run the solution and to contribute](https://github.com/AxaGuilDEv/react-toolkit/blob/master/CONTRIBUTING.md) +- [Please respect our code of conduct](https://github.com/AxaGuilDEv/react-toolkit/blob/master/CODE_OF_CONDUCT.md) + +## Roadmap + +- Update general documentation +- Migrating to TypeScript all components +- Fix the issues and clean code. Make it simpler, faster, lighter + +## Demo + +- [Online](https://axaguildev.github.io/react-toolkit/latest/demo/index.html) +- [Guideline](https://github.com/AxaGuilDEv/react-toolkit/blob/master/examples/README.md) +- [Source code](https://github.com/AxaGuilDEv/react-toolkit/blob/master/examples/demo) + +![sample demo](https://raw.githubusercontent.com/AxaGuilDEv/react-toolkit/master/examples/demo.png) diff --git a/storybook/design-system/src/pages/github/meta.json b/storybook/design-system/src/pages/github/meta.json new file mode 100644 index 000000000..f7a2c47f3 --- /dev/null +++ b/storybook/design-system/src/pages/github/meta.json @@ -0,0 +1,5 @@ +{ + "title": "Github Slash Design System - Axa UI/UX Design System for software applications", + "description": "Github Slash Design System. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "keywords": "Github Axa design system, slash design system, design system axa, design system ui, design system react, design system ux, Github axa france" +} diff --git a/storybook/design-system/src/pages/home/home.scss b/storybook/design-system/src/pages/home/home.scss index 4cb7acfb7..8e81450a6 100644 --- a/storybook/design-system/src/pages/home/home.scss +++ b/storybook/design-system/src/pages/home/home.scss @@ -121,13 +121,14 @@ font-size: 4rem; font-weight: 200; color: $white; - margin-bottom: 2rem; + margin: 0 0 2rem auto; } &-text { color: $white; - font-size: 2.5rem; + font-size: 2rem; font-weight: 200; + margin: 0; } } @@ -157,12 +158,14 @@ font-weight: 200; color: $white; margin-bottom: 2rem; + margin: 0 0 2rem auto; } &-text { color: $white; - font-size: 2.5rem; + font-size: 2rem; font-weight: 200; + margin: 0; } } } diff --git a/storybook/design-system/src/pages/molecules/alert/data.json b/storybook/design-system/src/pages/molecules/alert/data.json new file mode 100644 index 000000000..1a397aae7 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/data.json @@ -0,0 +1,70 @@ +{ + "metatitle": "Alert Component UI - Slash Design System", + "metadescription": "UI Component Alert for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Alert design system, ui Alert, design system axa, design system ui, design system react, design", + "github": "alert", + "storybook": "alert-alert--default", + "badge": "%40axa-fr%2Freact-toolkit-alert", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + }, + { + "name": "Button Disabled", + "sass": " $color-btn-disabled", + "hex": "#c9c9c9" + }, + { + "name": "Button success", + "sass": " $color-btn-success", + "hex": " #1cc578" + }, + { + "name": "Button success dark", + "sass": " $color-btn-success-dark", + "hex": " #0d844e" + }, + { + "name": "Button success focuced", + "sass": " $color-btn-success-focused", + "hex": " #bdffe1" + }, + { + "name": "Button danger", + "sass": " $color-btn-danger", + "hex": " #f02849" + }, + { + "name": "Button danger dark", + "sass": " $color-btn-danger-dark", + "hex": " #8f182c" + }, + { + "name": "Button danger focuced", + "sass": " $color-btn-danger-focused", + "hex": " #ffa0af" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/alert/index.pug b/storybook/design-system/src/pages/molecules/alert/index.pug new file mode 100644 index 000000000..cab73a2e7 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/index.pug @@ -0,0 +1,36 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/alert'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-alert/dist/alert.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Alert', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Alert Info', storybook, activePath, tmpl: 'alertSimpleInfo', sassPath }) + +Demo({ title:'Alert Success', storybook, activePath, tmpl: 'alertSimpleDanger', sassPath }) + +Demo({ title:'Alert Danger', storybook, activePath, tmpl: 'alertSimpleSuccess', sassPath }) + +Demo({ title:'Alert Info Complex', storybook: 'alert-alert--with-child-and-custom-icon', activePath, tmpl: 'alertComplex', sassPath }) + +Demo({ title:'Alert Success', storybook: 'alert-alert--with-child-and-custom-icon', activePath, tmpl: 'alertComplexDanger', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/alert/index.scss b/storybook/design-system/src/pages/molecules/alert/index.scss new file mode 100644 index 000000000..968b6fa9c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/index.scss @@ -0,0 +1,9 @@ +/* Correction Toolkit */ + +@include media-breakpoint-up(md) { + .af-title-bar { + &__mobile-menu { + display: none; + } + } +} diff --git a/storybook/design-system/src/pages/molecules/alert/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/alert/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/alert/markdown/style.md b/storybook/design-system/src/pages/molecules/alert/markdown/style.md new file mode 100644 index 000000000..4d234bd75 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/markdown/style.md @@ -0,0 +1,19 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-button/dist/button.scss'; +@import '@axa-fr/react-toolkit-layout-header/dist/Title/title-bar.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------------- | ------------------ | ----------- | ----------------------- | +| **.classComponent** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/alert/templates/alertComplex.pug b/storybook/design-system/src/pages/molecules/alert/templates/alertComplex.pug new file mode 100644 index 000000000..0f5d50db5 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/templates/alertComplex.pug @@ -0,0 +1,16 @@ +.af-alert.af-alert--success + button.af-alert__icon-close + i.glyphicon.glyphicon-close + h3.af-alert__title + .af-alert__title-icon + i.glyphicon.glyphicon-ok + .af-alert__title-text + | Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office + .af-alert__content + .af-alert__content__left + .af-alert__content__right + ul + li L'adresse du risque ou le capital total déclaré ont été modifiés. + li Vous devez relancer la vérification des équipements de protection contre le vol. + li Lorem ipsum + li Lorem ipsum diff --git a/storybook/design-system/src/pages/molecules/alert/templates/alertComplexDanger.pug b/storybook/design-system/src/pages/molecules/alert/templates/alertComplexDanger.pug new file mode 100644 index 000000000..d60beb121 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/templates/alertComplexDanger.pug @@ -0,0 +1,16 @@ +.af-alert.af-alert--error + button.af-alert__icon-close + i.glyphicon.glyphicon-close + h3.af-alert__title + .af-alert__title-icon + i.glyphicon.glyphicon-exclamation-sign + .af-alert__title-text + | Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office + .af-alert__content + .af-alert__content__left + .af-alert__content__right + ul + li L'adresse du risque ou le capital total déclaré ont été modifiés. + li Vous devez relancer la vérification des équipements de protection contre le vol. + li Lorem ipsum + li Lorem ipsum diff --git a/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleDanger.pug b/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleDanger.pug new file mode 100644 index 000000000..de90f18a2 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleDanger.pug @@ -0,0 +1,8 @@ +.af-alert.af-alert--danger + button.af-alert__icon-close + i.glyphicon.glyphicon-close + h3.af-alert__title + .af-alert__title-icon + i.glyphicon.glyphicon-alert + .af-alert__title-text + | Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office diff --git a/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleInfo.pug b/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleInfo.pug new file mode 100644 index 000000000..b80aeda47 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleInfo.pug @@ -0,0 +1,8 @@ +.af-alert.af-alert--info + button.af-alert__icon-close + i.glyphicon.glyphicon-close + h3.af-alert__title + .af-alert__title-icon + i.glyphicon.glyphicon-info-sign + .af-alert__title-text + | Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office diff --git a/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleSuccess.pug b/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleSuccess.pug new file mode 100644 index 000000000..98a04b258 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/alert/templates/alertSimpleSuccess.pug @@ -0,0 +1,8 @@ +.af-alert.af-alert--success + button.af-alert__icon-close + i.glyphicon.glyphicon-close + h3.af-alert__title + .af-alert__title-icon + i.glyphicon.glyphicon-ok + .af-alert__title-text + | Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d'office diff --git a/storybook/design-system/src/pages/molecules/footer/data.json b/storybook/design-system/src/pages/molecules/footer/data.json new file mode 100644 index 000000000..ff620f6b1 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/footer/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Footer Component UI - Slash Design System", + "metadescription": "UI Component Footer for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Footer design system, ui Footer, design system axa, design system ui, design system react, design", + "github": "Layout/footer", + "storybook": "layout-footer--default", + "badge": "%40axa-fr%2Freact-toolkit-layout-footer", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/footer/index.pug b/storybook/design-system/src/pages/molecules/footer/index.pug new file mode 100644 index 000000000..78065433b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/footer/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/footer'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-layout-footer/dist/footer.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Footer', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Footer', storybook, activePath, tmpl: 'classic', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/footer/index.scss b/storybook/design-system/src/pages/molecules/footer/index.scss new file mode 100644 index 000000000..30003e2a7 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/footer/index.scss @@ -0,0 +1,3 @@ +.af-footer { + background: $white; +} diff --git a/storybook/design-system/src/pages/molecules/footer/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/footer/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/footer/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/footer/markdown/style.md b/storybook/design-system/src/pages/molecules/footer/markdown/style.md new file mode 100644 index 000000000..9a8f9fb05 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/footer/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-footer/dist/footer.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| -------------- | ------------------ | ----------- | ----------------------- | +| **.af-footer** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/footer/templates/classic.pug b/storybook/design-system/src/pages/molecules/footer/templates/classic.pug new file mode 100644 index 000000000..c0333ab59 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/footer/templates/classic.pug @@ -0,0 +1,6 @@ +footer.af-footer + .af-container + a.af-logo(href="https://www.axa.fr/" title="Site Axa France" target="blank" ) + img.af-logo__brand(src="../../assets/images/slash-logo.svg" alt="Logo Slash Design System") + .af-footer-content + | @ 2020 AXA Tous droits réservés diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/data.json b/storybook/design-system/src/pages/molecules/form-checkbox/data.json new file mode 100644 index 000000000..4cea8fc8d --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input Checkbox Component UI - Slash Design System", + "metadescription": "UI Component Form Input Checkbox for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input Checkbox design system, ui Form Input Checkbox, design system axa, design system ui, design system react, design", + "github": "Form/Input/checkbox", + "storybook": "form-input-checkbox--checkboxinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-checkbox", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/index.pug b/storybook/design-system/src/pages/molecules/form-checkbox/index.pug new file mode 100644 index 000000000..f45f57359 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/index.pug @@ -0,0 +1,40 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-checkbox'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-checkbox/dist/checkbox.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form Checkbox', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Input Checkbox', storybook, activePath, tmpl: 'form-checkbox', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Checkbox Success', storybook, activePath, tmpl: 'form-checkbox-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Checkbox Error', storybook, activePath, tmpl: 'form-checkbox-error', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Classic Input Checkbox Inline', storybook, activePath, tmpl: 'form-checkbox-inline', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Checkbox Success Inline', storybook, activePath, tmpl: 'form-checkbox-inline-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Checkbox Error Inline', storybook, activePath, tmpl: 'form-checkbox-inline-error', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Classic Input Checkbox Custom', storybook, activePath, tmpl: 'form-checkbox-custom', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Checkbox Success Custom', storybook, activePath, tmpl: 'form-checkbox-custom-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Checkbox Error Custom', storybook, activePath, tmpl: 'form-checkbox-custom-error', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-checkbox/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/markdown/style.md b/storybook/design-system/src/pages/molecules/form-checkbox/markdown/style.md new file mode 100644 index 000000000..804647c2c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-input-checkbox/dist/checkbox.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| --------------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-checkbox** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom-error.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom-error.pug new file mode 100644 index 000000000..228d062e9 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom-error.pug @@ -0,0 +1,14 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox +include ../../../../components/form/mixins/mixin-form-message + +block label + label.af-form__group-label Classic checkbox + +block input + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"21", name:"classic", label: "Check 1", modifier:'error'}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"22", name:"classic", label: "Check 2", modifier:'error'}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"23", name:"classic", label: "Check 3", modifier:'error'}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"24", name:"classic", label: "Check 4", modifier:'error'}) + +formMessage({modifierMessage: 'error', textMessage:"Message d'erreur", iconMessage: 'exclamation-sign'}) + diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom-success.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom-success.pug new file mode 100644 index 000000000..f5ea96955 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom-success.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox + +block label + label.af-form__group-label Classic checkbox + +block input + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"17", name:"classic", label: "Check 1", modifier:'success'}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"18", name:"classic", label: "Check 2", modifier:'success'}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"19", name:"classic", label: "Check 3", modifier:'success'}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"20", name:"classic", label: "Disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom.pug new file mode 100644 index 000000000..a87dff1a3 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-custom.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox + +block label + label.af-form__group-label Classic checkbox + +block input + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"13", name:"classic", label: "Check 1"}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"14", name:"classic", label: "Check 2"}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"15", name:"classic", label: "Check 3"}) + +formFieldCheckbox({className:'af-form__checkbox-custom', id:"16", name:"classic", label: "Disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-error.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-error.pug new file mode 100644 index 000000000..733edf5c6 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-error.pug @@ -0,0 +1,13 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox +include ../../../../components/form/mixins/mixin-form-message + +block label + label.af-form__group-label Classic checkbox + +block input + +formFieldCheckbox({id:"9", name:"classic", label: "lorem ipsum dolor sit amet", modifier:'error'}) + +formFieldCheckbox({id:"10", name:"classic", label: "Nam sem nisi, auctor sit amet massa sit amet", modifier:'error'}) + +formFieldCheckbox({id:"11", name:"classic", label: "Ut sollicitudin eleifend tincidunt", modifier:'error'}) + +formFieldCheckbox({id:"12", name:"classic", label: "eleifend", modifier:'error'}) + +formMessage({modifierMessage: 'error', textMessage:"Message d'erreur", iconMessage: 'exclamation-sign'}) diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline-error.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline-error.pug new file mode 100644 index 000000000..838c02be2 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline-error.pug @@ -0,0 +1,13 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox +include ../../../../components/form/mixins/mixin-form-message + +block label + label.af-form__group-label Inline checkbox + +block input + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"33", name:"classic", label: "Check 1", modifier:'error'}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"34", name:"classic", label: "Check 2", modifier:'error'}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"35", name:"classic", label: "Check 3", modifier:'error'}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"36", name:"classic", label: "Check 4", modifier:'error'}) + +formMessage({modifierMessage: 'error', textMessage:"Message d'erreur", iconMessage: 'exclamation-sign'}) diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline-success.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline-success.pug new file mode 100644 index 000000000..a1decf409 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline-success.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox + +block label + label.af-form__group-label Inline checkbox + +block input + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"29", name:"classic", label: "Check 1", modifier:'success'}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"30", name:"classic", label: "Check 2", modifier:'success'}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"31", name:"classic", label: "Check 3", modifier:'success'}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"32", name:"classic", label: "Disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline.pug new file mode 100644 index 000000000..63b5fa4be --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-inline.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox + +block label + label.af-form__group-label Inline checkbox + +block input + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"25", name:"classic", label: "Check 1"}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"26", name:"classic", label: "Check 2"}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"27", name:"classic", label: "Check 3"}) + +formFieldCheckbox({className:'af-form__checkbox-inline', id:"28", name:"classic", label: "Disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-success.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-success.pug new file mode 100644 index 000000000..7d6d4c08e --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox-success.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox + +block label + label.af-form__group-label Classic checkbox + +block input + +formFieldCheckbox({id:"5", name:"classic", label: "lorem ipsum dolor sit amet", modifier:'success'}) + +formFieldCheckbox({id:"6", name:"classic", label: "Nam sem nisi, auctor sit amet massa sit amet", modifier:'success'}) + +formFieldCheckbox({id:"7", name:"classic", label: "Ut sollicitudin eleifend tincidunt", modifier:'success'}) + +formFieldCheckbox({id:"8", name:"classic", label: "disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox.pug b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox.pug new file mode 100644 index 000000000..6e0faffb5 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-checkbox/templates/form-checkbox.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-checkbox + +block label + label.af-form__group-label Classic checkbox + +block input + +formFieldCheckbox({id:"1", name:"classic", label: "lorem ipsum dolor sit amet"}) + +formFieldCheckbox({id:"2", name:"classic", label: "Nam sem nisi, auctor sit amet massa sit amet"}) + +formFieldCheckbox({id:"3", name:"classic", label: "Ut sollicitudin eleifend tincidunt"}) + +formFieldCheckbox({id:"4", name:"classic", label: "disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-datepicker/data.json b/storybook/design-system/src/pages/molecules/form-datepicker/data.json new file mode 100644 index 000000000..110f9edf6 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-datepicker/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input Datepicker Component UI - Slash Design System", + "metadescription": "UI Component Form Input Datepicker for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input Datepicker design system, ui Form Input Datepicker, design system axa, design system ui, design system react, design", + "github": "Form/Input/date", + "storybook": "form-input-date--dateinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-date", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-datepicker/index.pug b/storybook/design-system/src/pages/molecules/form-datepicker/index.pug new file mode 100644 index 000000000..aa4350d87 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-datepicker/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-datepicker'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-date/dist/datepicker.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form Datepicker', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Input Datepicker', storybook, activePath, tmpl: 'form-datepicker', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-datepicker/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-datepicker/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-datepicker/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-datepicker/markdown/style.md b/storybook/design-system/src/pages/molecules/form-datepicker/markdown/style.md new file mode 100644 index 000000000..43c26a3aa --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-datepicker/markdown/style.md @@ -0,0 +1,21 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '~@axa-fr/react-toolkit-all/dist/style/bootstrap/grid.css'; +@import '@axa-fr/react-toolkit-form-core/dist/form.scss'; +@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss'; +@import '@axa-fr/react-toolkit-form-input-pass/dist/pass.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ----------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-pass** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-datepicker/templates/form-datepicker.pug b/storybook/design-system/src/pages/molecules/form-datepicker/templates/form-datepicker.pug new file mode 100644 index 000000000..a3c34c781 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-datepicker/templates/form-datepicker.pug @@ -0,0 +1,13 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-select + +block label + label.af-form__group-label(for="datepicker") Input DatePicker * + +block input + .af-datepicker__container + .react-datepicker-wrapper + .react-datepicker__input-container + input#uniqueid.af-datepicker.react-datepicker-ignore-onclickoutside(type='text', name='placeName', value='11/26/2017') + include ./popper + span.glyphicon.glyphicon-calendar \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-datepicker/templates/popper.pug b/storybook/design-system/src/pages/molecules/form-datepicker/templates/popper.pug new file mode 100644 index 000000000..e24d5de58 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-datepicker/templates/popper.pug @@ -0,0 +1,75 @@ +.react-datepicker-popper(style='position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(155px, 0px, 0px);', data-placement='right-start') + .react-datepicker + .react-datepicker__triangle + button.react-datepicker__navigation.react-datepicker__navigation--previous(type='button') Previous Month + button.react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next--with-today-button(type='button') Next month + .react-datepicker__month-container + .react-datepicker__header + .react-datepicker__current-month.react-datepicker__current-month--hasYearDropdown.react-datepicker__current-month--hasMonthDropdown novembre 2017 + .react-datepicker__header__dropdown.react-datepicker__header__dropdown--scroll + .react-datepicker__month-dropdown-container.react-datepicker__month-dropdown-container--scroll + .react-datepicker__month-read-view(style='visibility: visible;') + span.react-datepicker__month-read-view--down-arrow + span.react-datepicker__month-read-view--selected-month novembre + .react-datepicker__year-dropdown-container.react-datepicker__year-dropdown-container--scroll + .react-datepicker__year-read-view(style='visibility: visible;') + span.react-datepicker__year-read-view--down-arrow + span.react-datepicker__year-read-view--selected-year 2017 + .react-datepicker__day-names + .react-datepicker__day-name lu + .react-datepicker__day-name ma + .react-datepicker__day-name me + .react-datepicker__day-name je + .react-datepicker__day-name ve + .react-datepicker__day-name sa + .react-datepicker__day-name di + .react-datepicker__month(role='listbox', aria-label='month-2017-11') + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--mon.react-datepicker__day--outside-month(aria-label='day-30', role='option') 30 + .react-datepicker__day.react-datepicker__day--tue.react-datepicker__day--outside-month(aria-label='day-31', role='option') 31 + .react-datepicker__day.react-datepicker__day--wed(aria-label='day-1', role='option') 1 + .react-datepicker__day.react-datepicker__day--thu(aria-label='day-2', role='option') 2 + .react-datepicker__day.react-datepicker__day--fri(aria-label='day-3', role='option') 3 + .react-datepicker__day.react-datepicker__day--sat.react-datepicker__day--weekend(aria-label='day-4', role='option') 4 + .react-datepicker__day.react-datepicker__day--sun.react-datepicker__day--weekend(aria-label='day-5', role='option') 5 + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--mon(aria-label='day-6', role='option') 6 + .react-datepicker__day.react-datepicker__day--tue(aria-label='day-7', role='option') 7 + .react-datepicker__day.react-datepicker__day--wed(aria-label='day-8', role='option') 8 + .react-datepicker__day.react-datepicker__day--thu(aria-label='day-9', role='option') 9 + .react-datepicker__day.react-datepicker__day--fri(aria-label='day-10', role='option') 10 + .react-datepicker__day.react-datepicker__day--sat.react-datepicker__day--weekend(aria-label='day-11', role='option') 11 + .react-datepicker__day.react-datepicker__day--sun.react-datepicker__day--weekend(aria-label='day-12', role='option') 12 + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--mon(aria-label='day-13', role='option') 13 + .react-datepicker__day.react-datepicker__day--tue(aria-label='day-14', role='option') 14 + .react-datepicker__day.react-datepicker__day--wed(aria-label='day-15', role='option') 15 + .react-datepicker__day.react-datepicker__day--thu(aria-label='day-16', role='option') 16 + .react-datepicker__day.react-datepicker__day--fri(aria-label='day-17', role='option') 17 + .react-datepicker__day.react-datepicker__day--sat.react-datepicker__day--weekend(aria-label='day-18', role='option') 18 + .react-datepicker__day.react-datepicker__day--sun.react-datepicker__day--weekend(aria-label='day-19', role='option') 19 + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--mon(aria-label='day-20', role='option') 20 + .react-datepicker__day.react-datepicker__day--tue(aria-label='day-21', role='option') 21 + .react-datepicker__day.react-datepicker__day--wed(aria-label='day-22', role='option') 22 + .react-datepicker__day.react-datepicker__day--thu(aria-label='day-23', role='option') 23 + .react-datepicker__day.react-datepicker__day--fri(aria-label='day-24', role='option') 24 + .react-datepicker__day.react-datepicker__day--sat.react-datepicker__day--weekend(aria-label='day-25', role='option') 25 + .react-datepicker__day.react-datepicker__day--sun.react-datepicker__day--selected.react-datepicker__day--weekend(aria-label='day-26', role='option') 26 + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--mon(aria-label='day-27', role='option') 27 + .react-datepicker__day.react-datepicker__day--tue(aria-label='day-28', role='option') 28 + .react-datepicker__day.react-datepicker__day--wed(aria-label='day-29', role='option') 29 + .react-datepicker__day.react-datepicker__day--thu(aria-label='day-30', role='option') 30 + .react-datepicker__day.react-datepicker__day--fri.react-datepicker__day--outside-month(aria-label='day-1', role='option') 1 + .react-datepicker__day.react-datepicker__day--sat.react-datepicker__day--weekend.react-datepicker__day--outside-month(aria-label='day-2', role='option') 2 + .react-datepicker__day.react-datepicker__day--sun.react-datepicker__day--weekend.react-datepicker__day--outside-month(aria-label='day-3', role='option') 3 + .react-datepicker__week + .react-datepicker__day.react-datepicker__day--mon.react-datepicker__day--outside-month(aria-label='day-4', role='option') 4 + .react-datepicker__day.react-datepicker__day--tue.react-datepicker__day--outside-month(aria-label='day-5', role='option') 5 + .react-datepicker__day.react-datepicker__day--wed.react-datepicker__day--outside-month(aria-label='day-6', role='option') 6 + .react-datepicker__day.react-datepicker__day--thu.react-datepicker__day--outside-month(aria-label='day-7', role='option') 7 + .react-datepicker__day.react-datepicker__day--fri.react-datepicker__day--outside-month(aria-label='day-8', role='option') 8 + .react-datepicker__day.react-datepicker__day--sat.react-datepicker__day--weekend.react-datepicker__day--outside-month(aria-label='day-9', role='option') 9 + .react-datepicker__day.react-datepicker__day--sun.react-datepicker__day--weekend.react-datepicker__day--outside-month(aria-label='day-10', role='option') 10 + .react-datepicker__today-button Aujourd'hui \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-file/data.json b/storybook/design-system/src/pages/molecules/form-file/data.json new file mode 100644 index 000000000..c0c1e5304 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-file/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input File Component UI - Slash Design System", + "metadescription": "UI Component Form Input File for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input File design system, ui Form Input File, design system axa, design system ui, design system react, design", + "github": "Form/Input/file", + "storybook": "form-input-file--fileinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-file", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-file/index.pug b/storybook/design-system/src/pages/molecules/form-file/index.pug new file mode 100644 index 000000000..e548bce96 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-file/index.pug @@ -0,0 +1,34 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-file'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-file/dist/file.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form File', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Input File', storybook, activePath, tmpl: 'form-file', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Classic Input File with list files', storybook: "form-input-file--file-with-values", activePath, tmpl: 'form-file-list', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Classic Input File with errors', storybook: "form-input-file--file-with-errors", activePath, tmpl: 'form-file-list-error', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-file/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-file/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-file/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-file/markdown/style.md b/storybook/design-system/src/pages/molecules/form-file/markdown/style.md new file mode 100644 index 000000000..e7436967e --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-file/markdown/style.md @@ -0,0 +1,22 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '~@axa-fr/react-toolkit-all/dist/style/bootstrap/grid.css'; +@import '@axa-fr/react-toolkit-button/dist/button.scss'; +@import '@axa-fr/react-toolkit-form-core/dist/form.scss'; +@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss'; +@import '@axa-fr/react-toolkit-form-input-file/dist/file.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ----------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-file** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-file/templates/form-file-list-error.pug b/storybook/design-system/src/pages/molecules/form-file/templates/form-file-list-error.pug new file mode 100644 index 000000000..1faf5e57e --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-file/templates/form-file-list-error.pug @@ -0,0 +1,49 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input File * + +block input + .af-form__file-input + #uniqueid.drop-box.hidden-mobile(style='position: relative;' aria-disabled='false') + div Glissez/déposez vos fichiers + input(accept='image/jpeg, image/png, application/*' type='file' style='position: absolute; inset: 0px; opacity: 0.00001; pointer-events: none;' autocomplete='off' name='placeImage') + button.af-btn.af-btn--file.af-btn--hasiconLeft(type='button') + i.glyphicon.glyphicon-open + | Parcourir + small.af-form__help Enter the place name, ex : Webcenter + .custom-table-file.af-file-table + .af-form__file-errors + span Le chargement de certains fichiers a échoué : + ul.af-form__file-errors-list + li refused-extension-file.svg (100ko) + li too-big-file.jpg (100Mo) + li error-file.jpg (100Mo) + ul.af-form__file-list + li.af-form__file-line + span + .af-popover__container + .af-popover__container-over(role='presentation') + i.glyphicon.glyphicon-picture + span error-file.jpg + span 100Mo + button.af-link.af-link--delete-file(type='button') + span.af-link__text Supprimer + li.af-form__file-line + span + .af-popover__container + .af-popover__container-over(role='presentation') + i.glyphicon.glyphicon-picture + span fichier.png + span 100Mo + button.af-link.af-link--delete-file(type='button') + span.af-link__text Supprimer + li.af-form__file-line + i.glyphicon.glyphicon-file + span fichier.csv + span 100ko + button.af-link.af-link--delete-file(type='button') + span.af-link__text Supprimer + + diff --git a/storybook/design-system/src/pages/molecules/form-file/templates/form-file-list.pug b/storybook/design-system/src/pages/molecules/form-file/templates/form-file-list.pug new file mode 100644 index 000000000..6b1b1c6f8 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-file/templates/form-file-list.pug @@ -0,0 +1,42 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input File * + +block input + .af-form__file-input + #uniqueid.drop-box.hidden-mobile(style='position: relative;' aria-disabled='false') + div Glissez/déposez vos fichiers + input(accept='image/jpeg, image/png, application/*' type='file' style='position: absolute; inset: 0px; opacity: 0.00001; pointer-events: none;' autocomplete='off' name='placeImage') + button.af-btn.af-btn--file.af-btn--hasiconLeft(type='button') + i.glyphicon.glyphicon-open + | Parcourir + small.af-form__help Enter the place name, ex : Webcenter + .custom-table-file.af-file-table + ul.af-form__file-list + li.af-form__file-line + span + .af-popover__container + .af-popover__container-over(role='presentation') + i.glyphicon.glyphicon-picture + span error-file.jpg + span 100Mo + button.af-link.af-link--delete-file(type='button') + span.af-link__text Supprimer + li.af-form__file-line + span + .af-popover__container + .af-popover__container-over(role='presentation') + i.glyphicon.glyphicon-picture + span fichier.png + span 100Mo + button.af-link.af-link--delete-file(type='button') + span.af-link__text Supprimer + li.af-form__file-line + i.glyphicon.glyphicon-file + span fichier.csv + span 100ko + button.af-link.af-link--delete-file(type='button') + span.af-link__text Supprimer + diff --git a/storybook/design-system/src/pages/molecules/form-file/templates/form-file.pug b/storybook/design-system/src/pages/molecules/form-file/templates/form-file.pug new file mode 100644 index 000000000..cc222a9dc --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-file/templates/form-file.pug @@ -0,0 +1,15 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input File * + +block input + .af-form__file + .af-form__file-input + #uniqueid.drop-box.hidden-mobile(style='position: relative;' aria-disabled='false') + div Glissez/déposez vos fichiers + input(accept='image/jpeg, image/png, application/*' type='file' style='position: absolute; inset: 0px; opacity: 0.00001; pointer-events: none;' multiple='' autocomplete='off' name='placeImage') + button.af-btn.af-btn--file.af-btn--hasiconLeft(type='button') + i.glyphicon.glyphicon-open + | Parcourir diff --git a/storybook/design-system/src/pages/molecules/form-pass/data.json b/storybook/design-system/src/pages/molecules/form-pass/data.json new file mode 100644 index 000000000..fa2a75910 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-pass/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input Pass Component UI - Slash Design System", + "metadescription": "UI Component Form Input Pass for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input Pass design system, ui Form Input Pass, design system axa, design system ui, design system react, design", + "github": "Form/Input/pass", + "storybook": "form-input-pass--passinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-pass", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-pass/index.pug b/storybook/design-system/src/pages/molecules/form-pass/index.pug new file mode 100644 index 000000000..4aaf6ce3d --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-pass/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-pass'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-pass/dist/pass.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form Pass', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Input Pass', storybook, activePath, tmpl: 'form-pass', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-pass/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-pass/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-pass/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-pass/markdown/style.md b/storybook/design-system/src/pages/molecules/form-pass/markdown/style.md new file mode 100644 index 000000000..43c26a3aa --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-pass/markdown/style.md @@ -0,0 +1,21 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '~@axa-fr/react-toolkit-all/dist/style/bootstrap/grid.css'; +@import '@axa-fr/react-toolkit-form-core/dist/form.scss'; +@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss'; +@import '@axa-fr/react-toolkit-form-input-pass/dist/pass.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ----------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-pass** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-pass/templates/form-pass.pug b/storybook/design-system/src/pages/molecules/form-pass/templates/form-pass.pug new file mode 100644 index 000000000..fcb4a98b4 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-pass/templates/form-pass.pug @@ -0,0 +1,17 @@ +-const levels = ["","bad", "okay", "good", "verygood", "excellent"] +each level in levels + .af-form__group.row(class=(level !== "") ? `af-form__group--${level}` : "") + .col-md-2 + label.af-form__group-label(for="inputpassword") Input password * + .col-md-10 + .af-form__pass-container + .af-form__pass.af-form__pass--hasinfobulle(class=(level !== "") ? `af-form__pass--${level}` : "") + .af-form__pass-strength + input#uniqueid.af-form__input-text(name="inputpassword" value="" tabindex="" type="password") + button.af-form__pass-btn(type="button") + i.glyphicon.glyphicon-eye-open + .af-popover__container + .af-popover__container-over + button.af-btn--circle-small + span.af-more-help i + small.af-form__help 8 caractères minimum \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-radio-switch/data.json b/storybook/design-system/src/pages/molecules/form-radio-switch/data.json new file mode 100644 index 000000000..a26aeec88 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio-switch/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input Switch Component UI - Slash Design System", + "metadescription": "UI Component Form Input Switch for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input Switch design system, ui Form Input Switch, design system axa, design system ui, design system react, design", + "github": "Form/Input/switch", + "storybook": "form-input-switch--switchinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-switch", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/form-radio-switch/index.pug b/storybook/design-system/src/pages/molecules/form-radio-switch/index.pug new file mode 100644 index 000000000..508ebb45c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio-switch/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-radio-switch'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-switch/dist/switch.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form Radio Switch', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Radio Switch', storybook, activePath, tmpl: 'form-radio-switch', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-radio-switch/index.scss b/storybook/design-system/src/pages/molecules/form-radio-switch/index.scss new file mode 100644 index 000000000..65209a614 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio-switch/index.scss @@ -0,0 +1,7 @@ +/* fix toolkit */ + +.af-form-switch .af-form__radio-custom { + display: inline-flex; + align-items: center; + padding: 0 11px; +} diff --git a/storybook/design-system/src/pages/molecules/form-radio-switch/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-radio-switch/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio-switch/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-radio-switch/markdown/style.md b/storybook/design-system/src/pages/molecules/form-radio-switch/markdown/style.md new file mode 100644 index 000000000..576495ee5 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio-switch/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-input-switch/dist/switch.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-switch** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-radio-switch/templates/form-radio-switch.pug b/storybook/design-system/src/pages/molecules/form-radio-switch/templates/form-radio-switch.pug new file mode 100644 index 000000000..4218b239b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio-switch/templates/form-radio-switch.pug @@ -0,0 +1,24 @@ +extends ../../../../components/form/layouts/layout-form-field + +block label + label.af-form__group-label(for="radioswitch") Switch radios * + +block input + .af-form-switch + .af-form__radio-custom + input#check0.af-form__input-radio(name="placeName" value="0" type="radio") + label.af-form__label(for="check0") + span.af-form__description Choix 1 + .af-form__radio-custom + input#check1.af-form__input-radio(name="placeName" value="1" type="radio" checked="checked") + label.af-form__label(for="check1") + span.af-form__description Choix 2 + .af-form__radio-custom + input#check2.af-form__input-radio(name="placeName" value="2" type="radio") + label.af-form__label(for="check2") + span.af-form__description Choix 3 + .af-form__radio-custom + input#check3.af-form__input-radio(name="placeName" value="3" type="radio") + label.af-form__label(for="check3") + span.af-form__description Choix 44444444444444 + span.af-btn-switch-slider(style="left:64px;width:64px;") diff --git a/storybook/design-system/src/pages/molecules/form-radio/data.json b/storybook/design-system/src/pages/molecules/form-radio/data.json new file mode 100644 index 000000000..f2adf5d34 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input Radio Component UI - Slash Design System", + "metadescription": "UI Component Form Input Radio for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input Radio design system, ui Form Input Radio, design system axa, design system ui, design system react, design", + "github": "Form/Input/radio", + "storybook": "form-input-radio--radioinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-radio", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-radio/index.pug b/storybook/design-system/src/pages/molecules/form-radio/index.pug new file mode 100644 index 000000000..a024cfb55 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/index.pug @@ -0,0 +1,40 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-radio'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-radio/dist/radio.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form Radio', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Input Radio', storybook, activePath, tmpl: 'form-radio', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Radio Success', storybook, activePath, tmpl: 'form-radio-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Radio Error', storybook, activePath, tmpl: 'form-radio-error', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Classic Input Radio Inline', storybook, activePath, tmpl: 'form-radio-inline', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Radio Success Inline', storybook, activePath, tmpl: 'form-radio-inline-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Radio Error Inline', storybook, activePath, tmpl: 'form-radio-inline-error', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Classic Input Radio Custom', storybook, activePath, tmpl: 'form-radio-custom', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Radio Success Custom', storybook, activePath, tmpl: 'form-radio-custom-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Radio Error Custom', storybook, activePath, tmpl: 'form-radio-custom-error', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-radio/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-radio/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-radio/markdown/style.md b/storybook/design-system/src/pages/molecules/form-radio/markdown/style.md new file mode 100644 index 000000000..ffeed3a42 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-input-radio/dist/radio.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| --------------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-radio** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom-error.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom-error.pug new file mode 100644 index 000000000..0e32dad8c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom-error.pug @@ -0,0 +1,14 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio +include ../../../../components/form/mixins/mixin-form-message + +block label + label.af-form__group-label Custom radio + +block input + +formFieldRadio({className:'af-form__radio-custom', id:"21", name:"classic-custom-error", label: "Radio 1", modifier:'error'}) + +formFieldRadio({className:'af-form__radio-custom', id:"22", name:"classic-custom-error", label: "Radio 2", modifier:'error'}) + +formFieldRadio({className:'af-form__radio-custom', id:"23", name:"classic-custom-error", label: "Radio 3", modifier:'error'}) + +formFieldRadio({className:'af-form__radio-custom', id:"24", name:"classic-custom-error", label: "Radio 4", modifier:'error'}) + +formMessage({modifierMessage: 'error', textMessage:"Message d'erreur", iconMessage: 'exclamation-sign'}) + diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom-success.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom-success.pug new file mode 100644 index 000000000..af198ac3b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom-success.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio + +block label + label.af-form__group-label Custom Radio + +block input + +formFieldRadio({className:'af-form__radio-custom', id:"17", name:"classic-custom-success", label: "Radio 1", modifier:'success'}) + +formFieldRadio({className:'af-form__radio-custom', id:"18", name:"classic-custom-success", label: "Radio 2", modifier:'success'}) + +formFieldRadio({className:'af-form__radio-custom', id:"19", name:"classic-custom-success", label: "Radio 3", modifier:'success'}) + +formFieldRadio({className:'af-form__radio-custom', id:"20", name:"classic-custom-success", label: "Disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom.pug new file mode 100644 index 000000000..c67d0b51f --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-custom.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio + +block label + label.af-form__group-label Custom Radio + +block input + +formFieldRadio({className:'af-form__radio-custom', id:"13", name:"classic-custom", label: "Radio 1"}) + +formFieldRadio({className:'af-form__radio-custom', id:"14", name:"classic-custom", label: "Radio 2"}) + +formFieldRadio({className:'af-form__radio-custom', id:"15", name:"classic-custom", label: "Radio 3"}) + +formFieldRadio({className:'af-form__radio-custom', id:"16", name:"classic-custom", label: "Disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-error.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-error.pug new file mode 100644 index 000000000..01520da6d --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-error.pug @@ -0,0 +1,13 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio +include ../../../../components/form/mixins/mixin-form-message + +block label + label.af-form__group-label Classic radio + +block input + +formFieldRadio({id:"9", name:"classic-error", label: "lorem ipsum dolor sit amet", modifier:'error'}) + +formFieldRadio({id:"10", name:"classic-error", label: "Nam sem nisi, auctor sit amet massa sit amet", modifier:'error'}) + +formFieldRadio({id:"11", name:"classic-error", label: "Ut sollicitudin eleifend tincidunt", modifier:'error'}) + +formFieldRadio({id:"12", name:"classic-error", label: "error", modifier:'error'}) + +formMessage({modifierMessage: 'error', textMessage:"Message d'erreur", iconMessage: 'exclamation-sign'}) diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline-error.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline-error.pug new file mode 100644 index 000000000..bbbe4fa06 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline-error.pug @@ -0,0 +1,13 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio +include ../../../../components/form/mixins/mixin-form-message + +block label + label.af-form__group-label Inline radio + +block input + +formFieldRadio({className:'af-form__radio-inline', id:"33", name:"classic-inline-error", label: "Radio 1", modifier:'error'}) + +formFieldRadio({className:'af-form__radio-inline', id:"34", name:"classic-inline-error", label: "Radio 2", modifier:'error'}) + +formFieldRadio({className:'af-form__radio-inline', id:"35", name:"classic-inline-error", label: "Radio 3", modifier:'error'}) + +formFieldRadio({className:'af-form__radio-inline', id:"36", name:"classic-inline-error", label: "Radio 4", modifier:'error'}) + +formMessage({modifierMessage: 'error', textMessage:"Message d'erreur", iconMessage: 'exclamation-sign'}) \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline-success.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline-success.pug new file mode 100644 index 000000000..e1ac9f51a --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline-success.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio + +block label + label.af-form__group-label Inline radio + +block input + +formFieldRadio({className:'af-form__radio-inline', id:"29", name:"classic-inline-success", label: "Radio 1", modifier:'success'}) + +formFieldRadio({className:'af-form__radio-inline', id:"30", name:"classic-inline-success", label: "Radio 2", modifier:'success'}) + +formFieldRadio({className:'af-form__radio-inline', id:"31", name:"classic-inline-success", label: "Radio 3", modifier:'success'}) + +formFieldRadio({className:'af-form__radio-inline', id:"32", name:"classic-inline-success", label: "Disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline.pug new file mode 100644 index 000000000..4cd055eb8 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-inline.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio + +block label + label.af-form__group-label Inline radio + +block input + +formFieldRadio({className:'af-form__radio-inline', id:"25", name:"classic-inline", label: "Radio 1"}) + +formFieldRadio({className:'af-form__radio-inline', id:"26", name:"classic-inline", label: "Radio 2"}) + +formFieldRadio({className:'af-form__radio-inline', id:"27", name:"classic-inline", label: "Radio 3"}) + +formFieldRadio({className:'af-form__radio-inline', id:"28", name:"classic-inline", label: "Disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-success.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-success.pug new file mode 100644 index 000000000..d4794d62f --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio-success.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio + +block label + label.af-form__group-label Classic radio + +block input + +formFieldRadio({id:"5", name:"classic-success", label: "lorem ipsum dolor sit amet", modifier:'success'}) + +formFieldRadio({id:"6", name:"classic-success", label: "Nam sem nisi, auctor sit amet massa sit amet", modifier:'success'}) + +formFieldRadio({id:"7", name:"classic-success", label: "Ut sollicitudin eleifend tincidunt", modifier:'success'}) + +formFieldRadio({id:"8", name:"classic-success", label: "disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio.pug b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio.pug new file mode 100644 index 000000000..ec4a29f42 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-radio/templates/form-radio.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-field-radio + +block label + label.af-form__group-label Classic radio + +block input + +formFieldRadio({id:"1", name:"classic", label: "lorem ipsum dolor sit amet"}) + +formFieldRadio({id:"2", name:"classic", label: "Nam sem nisi, auctor sit amet massa sit amet"}) + +formFieldRadio({id:"3", name:"classic", label: "Ut sollicitudin eleifend tincidunt"}) + +formFieldRadio({id:"4", name:"classic", label: "disabled", disabled: true, modifier:'disabled'}) diff --git a/storybook/design-system/src/pages/molecules/form-select/data.json b/storybook/design-system/src/pages/molecules/form-select/data.json new file mode 100644 index 000000000..6fd62756b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input Text Component UI - Slash Design System", + "metadescription": "UI Component Form Input Text for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input Text design system, ui Form Input Text, design system axa, design system ui, design system react, design", + "github": "Form/Input/text", + "storybook": "form-input-text--textinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-text", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/form-select/index.pug b/storybook/design-system/src/pages/molecules/form-select/index.pug new file mode 100644 index 000000000..92ea8b952 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/index.pug @@ -0,0 +1,38 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-select'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-select/dist/select.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form Select', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Input Select', storybook, activePath, tmpl: 'form-select', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Select Success', storybook, activePath, tmpl: 'form-select-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Select Error', storybook, activePath, tmpl: 'form-select-error', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Select Disabled', storybook, activePath, tmpl: 'form-select-disabled', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Select inline', storybook, activePath, tmpl: 'form-select-inline', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Select inline Error', storybook, activePath, tmpl: 'form-select-inline-error', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Select inline Success', storybook, activePath, tmpl: 'form-select-inline-success', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-select/index.scss b/storybook/design-system/src/pages/molecules/form-select/index.scss new file mode 100644 index 000000000..d63332718 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/index.scss @@ -0,0 +1,48 @@ +/* Corrections à reporter sur le toolkit */ + +.af-form { + &__error-text { + font-size: .8rem; + } + + &__input-inline { + .af-form { + &__select { + &-container { + min-width: 200px; + } + } + } + } + + &__select { + &-container { + border: none; + min-width: 200px; + } + + &--error { + .af-form { + &__select-container { + border: none; + } + + &__input-select { + box-shadow: 0 0 0 1px $color-red-axa; + } + } + } + } + + &__input-select { + padding: 0 1.8rem 0 .5rem; + height: 38px; + box-shadow: 0 0 0 1px $color-gray-1; + border-radius: 0; + + &:focus { + box-shadow: 0 0 0 1px $color-axa; + outline: none; + } + } +} diff --git a/storybook/design-system/src/pages/molecules/form-select/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-select/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-select/markdown/style.md b/storybook/design-system/src/pages/molecules/form-select/markdown/style.md new file mode 100644 index 000000000..c8dcbe3dc --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-input-select/dist/select.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-select** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-select/templates/form-select-disabled.pug b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-disabled.pug new file mode 100644 index 000000000..64bfa358a --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-disabled.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-select + +block label + label.af-form__group-label(for="select1") Input Select * + +block input + +formFieldSelect({modifier: 'disabled', disabled: true}) diff --git a/storybook/design-system/src/pages/molecules/form-select/templates/form-select-error.pug b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-error.pug new file mode 100644 index 000000000..1881a5813 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-error.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-select + +block label + label.af-form__group-label(for="select1") Input Select * + +block input + +formFieldSelect({modifier:'error',modifierMessage:'error', iconMessage:'exclamation-sign', textMessage:"Message d'erreur"}) diff --git a/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline-error.pug b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline-error.pug new file mode 100644 index 000000000..3cca4aa27 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline-error.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-select +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="select1") Inline fields * + +block input + .af-form__fields-inline + +formFieldSelect({className:'af-form__input-inline',modifier:'error',modifierMessage:'error', iconMessage:'exclamation-sign', textMessage:"Message d'erreur"}) + +formFieldText({hasInfobulle: true, modifier:'error',modifierMessage:'error', iconMessage:'exclamation-sign', textMessage:"Message d'erreur"}) diff --git a/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline-success.pug b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline-success.pug new file mode 100644 index 000000000..508bf3493 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline-success.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-select +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="select1") Inline fields * + +block input + .af-form__fields-inline + +formFieldSelect({className:'af-form__input-inline',modifier: 'success'}) + +formFieldText({hasInfobulle: true, modifier: 'success'}) diff --git a/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline.pug b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline.pug new file mode 100644 index 000000000..d7adef3f7 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-inline.pug @@ -0,0 +1,11 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-select +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="select1") Inline fields * + +block input + .af-form__fields-inline + +formFieldSelect({className:'af-form__input-inline'}) + +formFieldText({hasInfobulle: true}) diff --git a/storybook/design-system/src/pages/molecules/form-select/templates/form-select-success.pug b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-success.pug new file mode 100644 index 000000000..3b449a4f4 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/templates/form-select-success.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-select + +block label + label.af-form__group-label(for="select1") Input Select * + +block input + +formFieldSelect({modifier: 'success'}) diff --git a/storybook/design-system/src/pages/molecules/form-select/templates/form-select.pug b/storybook/design-system/src/pages/molecules/form-select/templates/form-select.pug new file mode 100644 index 000000000..27f9be96e --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-select/templates/form-select.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-select + +block label + label.af-form__group-label(for="select1") Input Select * + +block input + +formFieldSelect({}) diff --git a/storybook/design-system/src/pages/molecules/form-text/data.json b/storybook/design-system/src/pages/molecules/form-text/data.json new file mode 100644 index 000000000..ce676b2d8 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input Select Component UI - Slash Design System", + "metadescription": "UI Component Form Input Select for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input Select design system, ui Form Input Select, design system axa, design system ui, design system react, design", + "github": "Form/Input/select", + "storybook": "form-input-select--selectinput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-select", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/form-text/index.pug b/storybook/design-system/src/pages/molecules/form-text/index.pug new file mode 100644 index 000000000..fe0702744 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/index.pug @@ -0,0 +1,40 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-text'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-text/dist/inputtext.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form Text', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Input Text', storybook, activePath, tmpl: 'form-text', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Text Success', storybook, activePath, tmpl: 'form-text-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Text Error', storybook, activePath, tmpl: 'form-text-error', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Text Disabled', storybook, activePath, tmpl: 'form-text-disabled', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Text with Clear', storybook, activePath, tmpl: 'form-text-clear', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Text with Clear Error', storybook, activePath, tmpl: 'form-text-clear-error', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Text with Info Bulle', storybook, activePath, tmpl: 'form-text-bulle', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Text with Info Bulle Success', storybook, activePath, tmpl: 'form-text-bulle-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Text with Info Bulle Error', storybook, activePath, tmpl: 'form-text-bulle-error', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-text/index.scss b/storybook/design-system/src/pages/molecules/form-text/index.scss new file mode 100644 index 000000000..42218c397 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/index.scss @@ -0,0 +1,64 @@ +/* Style just for demo */ + +.#{$prefix}-demo { + &--forminputtext { + .#{$prefix}-demo { + &__display { + &--fullscreen { + .#{$prefix}-demo { + &__template { + margin: 2em; + } + } + } + } + + &__template { + background: $white; + padding: 1em; + } + } + } +} + +/* Corrections à reporter sur le toolkit */ + +.af-form { + &__clear { + &.glyphicon { + position: absolute; + top: .75rem; + } + } + + &__fields-inline { + align-items: flex-start; + justify-content: flex-start; + } + + &__text { + &-wrapper { + display: inline-flex; + align-items: center; + } + + &--success { + position: relative; + display: inline-block; + + &.af-form__text--hasinfobulle { + &::after { + position: absolute; + right: -30px; + } + } + + &::after { + position: absolute; + top: 10px; + right: -5px; + } + } + } + +} diff --git a/storybook/design-system/src/pages/molecules/form-text/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-text/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-text/markdown/style.md b/storybook/design-system/src/pages/molecules/form-text/markdown/style.md new file mode 100644 index 000000000..a26bbdb68 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-input-text/dist/inputtext.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ----------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-text** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle-error.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle-error.pug new file mode 100644 index 000000000..829e0229c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle-error.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({hasInfobulle: true, modifier: 'error', modifierMessage:'error'}) diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle-success.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle-success.pug new file mode 100644 index 000000000..f9be2596c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle-success.pug @@ -0,0 +1,9 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({hasInfobulle: true, modifier: 'success'}) + diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle.pug new file mode 100644 index 000000000..7824332bc --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-bulle.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({hasInfobulle: true}) diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text-clear-error.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-clear-error.pug new file mode 100644 index 000000000..ada51fdc2 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-clear-error.pug @@ -0,0 +1,9 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({hasInfobulle: true, hasClear: true, modifier: 'error', modifierMessage:'error'}) + diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text-clear.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-clear.pug new file mode 100644 index 000000000..435076c84 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-clear.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({hasInfobulle: true, hasClear: true}) diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text-disabled.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-disabled.pug new file mode 100644 index 000000000..eb1ddaad1 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-disabled.pug @@ -0,0 +1,9 @@ + +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({modifier: 'disabled', disabled: true }) diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text-error.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-error.pug new file mode 100644 index 000000000..d0f3b6d44 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-error.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({modifier:'error',modifierMessage:'error', iconMessage:'exclamation-sign', textMessage:"Message d'erreur"}) diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text-success.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-success.pug new file mode 100644 index 000000000..d1d3e4bca --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text-success.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({modifier: 'success'}) diff --git a/storybook/design-system/src/pages/molecules/form-text/templates/form-text.pug b/storybook/design-system/src/pages/molecules/form-text/templates/form-text.pug new file mode 100644 index 000000000..c0bfe8c4f --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-text/templates/form-text.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-field +include ../../../../components/form/mixins/mixin-form-field-text + +block label + label.af-form__group-label(for="inputtext1") Input text * + +block input + +formFieldText({}) diff --git a/storybook/design-system/src/pages/molecules/form-textarea/data.json b/storybook/design-system/src/pages/molecules/form-textarea/data.json new file mode 100644 index 000000000..7bf1f3e5e --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-textarea/data.json @@ -0,0 +1,35 @@ +{ + "metatitle": "Form Input Textarea Component UI - Slash Design System", + "metadescription": "UI Component Form Input Textarea for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Form Input Textarea design system, ui Form Input Textarea, design system axa, design system ui, design system react, design", + "github": "Form/Input/textarea", + "storybook": "form-input-textarea--textareainput", + "badge": "%40axa-fr%2Freact-toolkit-form-input-textarea", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/form-textarea/index.pug b/storybook/design-system/src/pages/molecules/form-textarea/index.pug new file mode 100644 index 000000000..ce342297c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-textarea/index.pug @@ -0,0 +1,34 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/form-textarea'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-input-textarea/dist/textarea.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Form Textarea', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Input Textarea', storybook, activePath, tmpl: 'form-textarea', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Textarea Success', storybook, activePath, tmpl: 'form-textarea-success', modifier: 'forminputtext', sassPath }) + +Demo({ title:'Input Textarea Error', storybook, activePath, tmpl: 'form-textarea-error', modifier: 'forminputtext', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/form-textarea/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/form-textarea/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-textarea/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/form-textarea/markdown/style.md b/storybook/design-system/src/pages/molecules/form-textarea/markdown/style.md new file mode 100644 index 000000000..b6cd72e44 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-textarea/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-input-textarea/dist/textarea.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| --------------------- | ------------------ | ----------- | ----------------------- | +| **.af-form-textarea** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-disabled.pug b/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-disabled.pug new file mode 100644 index 000000000..57a6f8063 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-disabled.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-textarea + +block label + label.af-form__group-label(for="textarea1") Input Textarea * + +block input + .af-form__textarea.af-form__textarea--disabled + textarea.af-form__input-textarea(name="textarea1" rows="5" cols="50" placeholder="Texte long long long" disabled) diff --git a/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-error.pug b/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-error.pug new file mode 100644 index 000000000..eb926a79c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-error.pug @@ -0,0 +1,10 @@ +extends ../../../../components/form/layouts/layout-form-textarea +include ../../../../components/form/mixins/mixin-form-message + +block label + label.af-form__group-label(for="textarea1") Input Textarea * + +block input + .af-form__textarea.af-form__textarea--error + textarea.af-form__input-textarea(name="textarea1" rows="5" cols="50" placeholder="Texte long long long") + +formMessage({modifierMessage: 'error', textMessage:"Message d'erreur", iconMessage: 'exclamation-sign'}) diff --git a/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-success.pug b/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-success.pug new file mode 100644 index 000000000..45fd1f913 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea-success.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-textarea + +block label + label.af-form__group-label(for="textarea1") Input Textarea * + +block input + .af-form__textarea.af-form__textarea--success + textarea.af-form__input-textarea(name="textarea1" rows="5" cols="50" placeholder="Texte long long long") diff --git a/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea.pug b/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea.pug new file mode 100644 index 000000000..2b996bf24 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/form-textarea/templates/form-textarea.pug @@ -0,0 +1,8 @@ +extends ../../../../components/form/layouts/layout-form-textarea + +block label + label.af-form__group-label(for="textarea1") Input Textarea * + +block input + .af-form__textarea + textarea.af-form__input-textarea(name="textarea1" rows="5" cols="50" placeholder="Texte long long long") diff --git a/storybook/design-system/src/pages/molecules/navigation/data.json b/storybook/design-system/src/pages/molecules/navigation/data.json new file mode 100644 index 000000000..2181a9b07 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/navigation/data.json @@ -0,0 +1,25 @@ +{ + "metatitle": "Navigation Component UI - Slash Design System", + "metadescription": "UI Component Navigation for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Navigation design system, ui Navigation, design system axa, design system ui, design system react, design", + "github": "Layout/header/src/NavBar", + "storybook": "layout-header-navbar--navbarbase", + "badge": "%40axa-fr%2Freact-toolkit-layout-header", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/navigation/index.pug b/storybook/design-system/src/pages/molecules/navigation/index.pug new file mode 100644 index 000000000..a6bee1901 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/navigation/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/navigation'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-layout-header/dist/NavBar/nav.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Navigation', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Navigation', storybook, activePath, tmpl: 'classic', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/navigation/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/navigation/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/navigation/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/navigation/markdown/style.md b/storybook/design-system/src/pages/molecules/navigation/markdown/style.md new file mode 100644 index 000000000..8cfeb1141 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/navigation/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-layout-header/dist/NavBar/nav.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ----------- | ------------------ | ----------- | ----------------------- | +| **.af-nav** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/navigation/templates/classic.pug b/storybook/design-system/src/pages/molecules/navigation/templates/classic.pug new file mode 100644 index 000000000..8afb6305a --- /dev/null +++ b/storybook/design-system/src/pages/molecules/navigation/templates/classic.pug @@ -0,0 +1,18 @@ +-const menu = [{ "label":"Home", "href":"/home", "active": true }, { "label":"Forms", "href":"/form" }, { "label":"Fileupload", "href":"/fileupload" }, { "label":"Table", "href":"/table" }, { "label":"Accordions", "href":"/collapse" }, { "label":" Drag n drop", "href":"/table" }, { "label":"Alerts", "href":"/alert" }, { "label":"Validation", "href":"/contributing" }, { "label":"Doc", "href":"/doc", "children": [ { "label":"Sous lien", "href":"/doc/sous-lien" }, { "label":"Sous lien 2", "href":"/doc/sous-lien2" }, { "label":"Sous lien 3", "href":"/doc/sous-lien3" }, { "label":"Sous lien 4", "href":"/doc/sous-lien4" }] } ] +.af-nav-container + button.mask.fade.show(type="button") + nav.af-nav.af-drawer.left.show(role="navigation" aria-label="Menu principal") + .af-container.af-nav__wrapper + .af-nav__aside-header + h4.af-nav__aside-title Menu + a.af-nav__aside-close(href="#" role="button" aria-haspopup="true" aria-controls="idmenu" id="menubutton") × + ul.af-nav__list(role="menubar" aria-labelledby="menubutton" id="idmenu") + each item, index in menu + li.af-nav__item(role="none" class=(item.active) ? "af-nav__item--active" : "" class=(item.children) ? "af-nav__item--haschild" : "") + a.af-nav__link(role="menuitem" href=item.href tabindex=(index === 0) ? "0" : "-1" aria-haspopup=(item.children) ? true : false aria-expanded=(item.children) ? true : false) #{item.label} + if item.children + i.glyphicon.glyphicon-arrow-xs-down + ul.af-nav__list.af-nav__list--children(role="menu" aria-label=item.label) + each child in item.children + li.af-nav__item(role="none" class=(child.active) ? "af-nav__item--active" : "") + a.af-nav__link(role="menuitem" href=child.href tabindex="-1") #{child.label} diff --git a/storybook/design-system/src/pages/molecules/pager/data.json b/storybook/design-system/src/pages/molecules/pager/data.json new file mode 100644 index 000000000..2e4fbed58 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/pager/data.json @@ -0,0 +1,70 @@ +{ + "metatitle": "Pager Component UI - Slash Design System", + "metadescription": "UI Component Pager for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Pager design system, ui Pager, design system axa, design system ui, design system react, design", + "github": "table/src/Pager", + "storybook": "table-pager--default", + "badge": "%40axa-fr%2Freact-toolkit-table", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + }, + { + "name": "Button Disabled", + "sass": " $color-btn-disabled", + "hex": "#c9c9c9" + }, + { + "name": "Button success", + "sass": " $color-btn-success", + "hex": " #1cc578" + }, + { + "name": "Button success dark", + "sass": " $color-btn-success-dark", + "hex": " #0d844e" + }, + { + "name": "Button success focuced", + "sass": " $color-btn-success-focused", + "hex": " #bdffe1" + }, + { + "name": "Button danger", + "sass": " $color-btn-danger", + "hex": " #f02849" + }, + { + "name": "Button danger dark", + "sass": " $color-btn-danger-dark", + "hex": " #8f182c" + }, + { + "name": "Button danger focuced", + "sass": " $color-btn-danger-focused", + "hex": " #ffa0af" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/pager/index.pug b/storybook/design-system/src/pages/molecules/pager/index.pug new file mode 100644 index 000000000..387bd10ba --- /dev/null +++ b/storybook/design-system/src/pages/molecules/pager/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/pager'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-table/dist/Pager/pager.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Pager', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic TitleBar', storybook, activePath, tmpl: 'classic', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/pager/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/pager/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/pager/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/pager/markdown/style.md b/storybook/design-system/src/pages/molecules/pager/markdown/style.md new file mode 100644 index 000000000..41b2ace6b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/pager/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-table/dist/Pager/pager.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------- | ------------------ | ----------- | ----------------------- | +| **.af-pager** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/pager/templates/classic.pug b/storybook/design-system/src/pages/molecules/pager/templates/classic.pug new file mode 100644 index 000000000..4e28c9a57 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/pager/templates/classic.pug @@ -0,0 +1,24 @@ + +nav.af-pager + ul.af-pager__pagination + li.af-pager__item + a.af-pager__item-link(href="#") + span.af-pager__item-icon « + span.af-pager__item-text Précédent + li.af-pager__item + a.af-pager__item-link(href="#") 1 + li.af-pager__item.af-pager__item--disabled + span.af-pager__item-link ... + li.af-pager__item + a.af-pager__item-link(href="#") 4 + li.af-pager__item.af-pager__item--active + a.af-pager__item-link(href="#") 5 + li.af-pager__item + a.af-pager__item-link(href="#") 6 + li.af-pager__item.af-pager__item--disabled ... + li.af-pager__item + a.af-pager__item-link(href="#") 23 + li.af-pager__item + a.af-pager__item-link(href="#") + span.af-pager__item-text Suivant + span.af-pager__item-icon » diff --git a/storybook/design-system/src/pages/molecules/steps-new/data.json b/storybook/design-system/src/pages/molecules/steps-new/data.json new file mode 100644 index 000000000..aba030810 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps-new/data.json @@ -0,0 +1,70 @@ +{ + "metatitle": "Steps Component UI - Slash Design System", + "metadescription": "UI Component Steps for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Steps design system, ui Steps, design system axa, design system ui, design system react, design", + "github": "Form/steps", + "storybook": "form-steps--new", + "badge": "%40axa-fr%2Freact-toolkit-form-steps", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + }, + { + "name": "Button Disabled", + "sass": " $color-btn-disabled", + "hex": "#c9c9c9" + }, + { + "name": "Button success", + "sass": " $color-btn-success", + "hex": " #1cc578" + }, + { + "name": "Button success dark", + "sass": " $color-btn-success-dark", + "hex": " #0d844e" + }, + { + "name": "Button success focuced", + "sass": " $color-btn-success-focused", + "hex": " #bdffe1" + }, + { + "name": "Button danger", + "sass": " $color-btn-danger", + "hex": " #f02849" + }, + { + "name": "Button danger dark", + "sass": " $color-btn-danger-dark", + "hex": " #8f182c" + }, + { + "name": "Button danger focuced", + "sass": " $color-btn-danger-focused", + "hex": " #ffa0af" + } + ] +} \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/steps-new/index.pug b/storybook/design-system/src/pages/molecules/steps-new/index.pug new file mode 100644 index 000000000..621b38c48 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps-new/index.pug @@ -0,0 +1,34 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/steps-new'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-steps/dist/step-form-new.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'New Steps', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic New Steps', storybook, activePath, tmpl: 'steps-new', sassPath }) + +Demo({ title:'New Steps with more steps', storybook, activePath, tmpl: 'steps-new-sample2', sassPath }) + +Demo({ title:'New Steps with icon', storybook, activePath, tmpl: 'steps-new-sample3', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/steps-new/index.scss b/storybook/design-system/src/pages/molecules/steps-new/index.scss new file mode 100644 index 000000000..968b6fa9c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps-new/index.scss @@ -0,0 +1,9 @@ +/* Correction Toolkit */ + +@include media-breakpoint-up(md) { + .af-title-bar { + &__mobile-menu { + display: none; + } + } +} diff --git a/storybook/design-system/src/pages/molecules/steps-new/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/steps-new/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps-new/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/steps-new/markdown/style.md b/storybook/design-system/src/pages/molecules/steps-new/markdown/style.md new file mode 100644 index 000000000..6a392384d --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps-new/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-steps/dist/step-form-new.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ----------------- | ------------------ | ----------- | ----------------------- | +| **.af-steps-new** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new-sample2.pug b/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new-sample2.pug new file mode 100644 index 000000000..83d5df2bc --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new-sample2.pug @@ -0,0 +1,27 @@ +.af-steps-new + ol.af-steps-list + li.af-steps-list-step.past(title="Etape 1") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 1 + .af-steps-list-stepTitle Previous step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.past(title="Etape 2") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 2 + .af-steps-list-stepTitle Previous step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.on(title="Etape 3") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 3 + .af-steps-list-stepTitle Current step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.disabled(title="Etape 3") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 4 + .af-steps-list-stepTitle Next step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.disabled(title="Etape finale") + .af-steps-list-stepLabel + .af-steps-list-stepNumber   + i.glyphicon.glyphicon-ok + .af-steps-list-stepTitle Confirmation \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new-sample3.pug b/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new-sample3.pug new file mode 100644 index 000000000..26888ff4b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new-sample3.pug @@ -0,0 +1,27 @@ +.af-steps-new + ol.af-steps-list + li.af-steps-list-step.past(title="Etape 1") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 1 + .af-steps-list-stepTitle Previous step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.past(title="Etape 2") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 2 + .af-steps-list-stepTitle Previous step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.past(title="Etape 3") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 3 + .af-steps-list-stepTitle Previous step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.past(title="Etape 3") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 4 + .af-steps-list-stepTitle Previous step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.on(title="Etape finale") + .af-steps-list-stepLabel + .af-steps-list-stepNumber   + i.glyphicon.glyphicon-ok.glyphicon-success + .af-steps-list-stepTitle Confirmation \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new.pug b/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new.pug new file mode 100644 index 000000000..d10fffb53 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps-new/templates/steps-new.pug @@ -0,0 +1,17 @@ +.af-steps-new + ol.af-steps-list + li.af-steps-list-step.on(title="Etape 1") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 1 + .af-steps-list-stepTitle Current step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.disabled(title="Etape 2") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 2 + .af-steps-list-stepTitle Next step + i.glyphicon.glyphicon-arrow-rounded-right + li.af-steps-list-step.disabled(title="Etape finale") + .af-steps-list-stepLabel + .af-steps-list-stepNumber   + i.glyphicon.glyphicon-ok + .af-steps-list-stepTitle Confirmation diff --git a/storybook/design-system/src/pages/molecules/steps/data.json b/storybook/design-system/src/pages/molecules/steps/data.json new file mode 100644 index 000000000..bfd6c7e7b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps/data.json @@ -0,0 +1,70 @@ +{ + "metatitle": "Steps Component UI - Slash Design System", + "metadescription": "UI Component Steps for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Steps design system, ui Steps, design system axa, design system ui, design system react, design", + "github": "Form/steps", + "storybook": "form-steps--default", + "badge": "%40axa-fr%2Freact-toolkit-form-steps", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + }, + { + "name": "Button Disabled", + "sass": " $color-btn-disabled", + "hex": "#c9c9c9" + }, + { + "name": "Button success", + "sass": " $color-btn-success", + "hex": " #1cc578" + }, + { + "name": "Button success dark", + "sass": " $color-btn-success-dark", + "hex": " #0d844e" + }, + { + "name": "Button success focuced", + "sass": " $color-btn-success-focused", + "hex": " #bdffe1" + }, + { + "name": "Button danger", + "sass": " $color-btn-danger", + "hex": " #f02849" + }, + { + "name": "Button danger dark", + "sass": " $color-btn-danger-dark", + "hex": " #8f182c" + }, + { + "name": "Button danger focuced", + "sass": " $color-btn-danger-focused", + "hex": " #ffa0af" + } + ] +} \ No newline at end of file diff --git a/storybook/design-system/src/pages/molecules/steps/index.pug b/storybook/design-system/src/pages/molecules/steps/index.pug new file mode 100644 index 000000000..c07645a58 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/steps'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-form-steps/dist/step-form.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Steps', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Steps', storybook, activePath, tmpl: 'classic', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/steps/index.scss b/storybook/design-system/src/pages/molecules/steps/index.scss new file mode 100644 index 000000000..968b6fa9c --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps/index.scss @@ -0,0 +1,9 @@ +/* Correction Toolkit */ + +@include media-breakpoint-up(md) { + .af-title-bar { + &__mobile-menu { + display: none; + } + } +} diff --git a/storybook/design-system/src/pages/molecules/steps/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/steps/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/steps/markdown/style.md b/storybook/design-system/src/pages/molecules/steps/markdown/style.md new file mode 100644 index 000000000..5fd5471ed --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-form-steps/dist/step-form.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ----------------- | ------------------ | ----------- | ----------------------- | +| **.af-steps** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/steps/templates/classic.pug b/storybook/design-system/src/pages/molecules/steps/templates/classic.pug new file mode 100644 index 000000000..44f490bce --- /dev/null +++ b/storybook/design-system/src/pages/molecules/steps/templates/classic.pug @@ -0,0 +1,23 @@ +.af-steps + ol.af-steps-list + li.af-steps-list-step.past(title="Etape 1") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 1 + .af-steps-list-stepTitle Previous step + li.af-steps-list-step.past(title="Etape 2") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 2 + .af-steps-list-stepTitle Previous step + li.af-steps-list-step.on(title="Etape 3") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 3 + .af-steps-list-stepTitle Current step + li.af-steps-list-step(title="Etape 3") + .af-steps-list-stepLabel + .af-steps-list-stepNumber 4 + .af-steps-list-stepTitle Next step + li.af-steps-list-step(title="Etape finale") + .af-steps-list-stepLabel + .af-steps-list-stepNumber + i.glyphicon.glyphicon-ok + .af-steps-list-stepTitle Confirmation diff --git a/storybook/design-system/src/pages/molecules/table/data.json b/storybook/design-system/src/pages/molecules/table/data.json new file mode 100644 index 000000000..18c139ac2 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/data.json @@ -0,0 +1,70 @@ +{ + "metatitle": "Table Component UI - Slash Design System", + "metadescription": "UI Component Table for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Table design system, ui Table, design system axa, design system ui, design system react, design", + "github": "table", + "storybook": "table-table--table", + "badge": "%40axa-fr%2Freact-toolkit-table", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + }, + { + "name": "Button Disabled", + "sass": " $color-btn-disabled", + "hex": "#c9c9c9" + }, + { + "name": "Button success", + "sass": " $color-btn-success", + "hex": " #1cc578" + }, + { + "name": "Button success dark", + "sass": " $color-btn-success-dark", + "hex": " #0d844e" + }, + { + "name": "Button success focuced", + "sass": " $color-btn-success-focused", + "hex": " #bdffe1" + }, + { + "name": "Button danger", + "sass": " $color-btn-danger", + "hex": " #f02849" + }, + { + "name": "Button danger dark", + "sass": " $color-btn-danger-dark", + "hex": " #8f182c" + }, + { + "name": "Button danger focuced", + "sass": " $color-btn-danger-focused", + "hex": " #ffa0af" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/table/index.pug b/storybook/design-system/src/pages/molecules/table/index.pug new file mode 100644 index 000000000..da44812d8 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/index.pug @@ -0,0 +1,32 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/table'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-table/dist/table.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Table', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Table', storybook, activePath, tmpl: 'classic', modifier: "table", sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/table/index.scss b/storybook/design-system/src/pages/molecules/table/index.scss new file mode 100644 index 000000000..ab1dd0684 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/index.scss @@ -0,0 +1,14 @@ +/* Just for demo */ +.#{$prefix} { + &-demo { + &--table { + .#{$prefix}-demo__display { + height: 600px; + + &--fullscreen { + height: 100%; + } + } + } + } +} diff --git a/storybook/design-system/src/pages/molecules/table/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/table/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/table/markdown/style.md b/storybook/design-system/src/pages/molecules/table/markdown/style.md new file mode 100644 index 000000000..2ce72a56e --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-table/dist/table.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------- | ------------------ | ----------- | ----------------------- | +| **.af-table** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/table/templates/classic.pug b/storybook/design-system/src/pages/molecules/table/templates/classic.pug new file mode 100644 index 000000000..ffdbcf69a --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/templates/classic.pug @@ -0,0 +1,11 @@ +include headerCell.pug +include line.pug +include data.pug +table.af-table + thead.af-table__thead + tr.af-table__tr + each headElt in headers + +headerCell(headElt) + tbody.af-table__body + each lineElt in lines + +line(lineElt) diff --git a/storybook/design-system/src/pages/molecules/table/templates/data.pug b/storybook/design-system/src/pages/molecules/table/templates/data.pug new file mode 100644 index 000000000..58064d2af --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/templates/data.pug @@ -0,0 +1,2 @@ +-const headers = [{"isSortable":true,"isActive":true,"label":"N° de contrat"},{"isSortable":true,"label":"N° de dossier"},{"isSortable":true,"label":"N° de demande"},{"isSortable":true,"label":"Site"},{"isSortable":true,"label":"Date de mise à jour"},{"isSortable":true,"label":"Décision"},{"isSortable":true,"label":"Statut du dossier"},{"label":"Action"}]; +-const lines = [{"contractId":25487696,"folderId":1594458644,"request":7359,"site":"BellBoeuf","update":"01/03/2017","decision":"Acceptation totale","status":1},{"contractId":25487296,"folderId":1594458044,"request":7059,"site":"Toulouse","update":"01/06/2007","decision":"Acceptation partielle","status":2},{"contractId":22487296,"folderId":1594428044,"request":7052,"site":"NA","update":"11/06/2000","decision":"Refus","status":3},{"contractId":25487696,"folderId":1594458644,"request":7359,"site":"BellBoeuf","update":"01/03/2017","decision":"Acceptation totale","status":1},{"contractId":25487296,"folderId":1594458044,"request":7059,"site":"Toulouse","update":"01/06/2007","decision":"Acceptation partielle","status":2},{"contractId":22487296,"folderId":1594428044,"request":7052,"site":"NA","update":"11/06/2000","decision":"Refus","status":3},{"contractId":25487696,"folderId":1594458644,"request":7359,"site":"BellBoeuf","update":"01/03/2017","decision":"Acceptation totale","status":1},{"contractId":25487296,"folderId":1594458044,"request":7059,"site":"Toulouse","update":"01/06/2007","decision":"Acceptation partielle","status":2},{"contractId":22487296,"folderId":1594428044,"request":7052,"site":"NA","update":"11/06/2000","decision":"Refus","status":3},{"contractId":25487296,"folderId":1594458044,"request":7059,"site":"Toulouse","update":"01/06/2007","decision":"Acceptation partielle","status":2}]; diff --git a/storybook/design-system/src/pages/molecules/table/templates/headerCell.pug b/storybook/design-system/src/pages/molecules/table/templates/headerCell.pug new file mode 100644 index 000000000..f4d718007 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/templates/headerCell.pug @@ -0,0 +1,12 @@ +mixin headerCell(item) + th.af-table__th(class=item.isSortable ? 'af-table__th--sortable' : '') + span.af-table__th-content + if item.isSortable + button.af-btn.af-btn--table-sorting(class=item.isActive ? "af-btn--table-sorting--active" : "" role="button") + | #{item.label} + if item.isActive + span.glyphicon.glyphicon-arrow-xs-down + else + span.glyphicon.glyphicon-sorting + else + | #{item.label} diff --git a/storybook/design-system/src/pages/molecules/table/templates/line.pug b/storybook/design-system/src/pages/molecules/table/templates/line.pug new file mode 100644 index 000000000..f00ee4f7d --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/templates/line.pug @@ -0,0 +1,24 @@ +include status.pug +mixin line(item) + tr.af-table__tr + td.af-table__cell + a.af-link(href="") + | #{item.contractId} + td.af-table__cell + a.af-link(href="") + | #{item.folderId} + td.af-table__cell + | #{item.request} + td.af-table__cell + | #{item.site} + td.af-table__cell + | #{item.update} + td.af-table__cell + | #{item.decision} + td.af-table__cell + +status(item.status) + td.af-table__cell + a.af-link.af-link--hasIconLeft(href="#") + span.glyphicon.glyphicon-pencil + span.af-link__text + | Consulter diff --git a/storybook/design-system/src/pages/molecules/table/templates/status.pug b/storybook/design-system/src/pages/molecules/table/templates/status.pug new file mode 100644 index 000000000..18183ec23 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/table/templates/status.pug @@ -0,0 +1,12 @@ +mixin status(code) + .af-status + case code + when 1 + span.glyphicon.glyphicon--ring.glyphicon--banque.glyphicon-option-horizontal + | En cours + when 2 + span.glyphicon.glyphicon--ring.glyphicon--warning.glyphicon-arrowthin-right + | Transmis + default + span.glyphicon.glyphicon--ring.glyphicon--success.glyphicon-ok + | Clos diff --git a/storybook/design-system/src/pages/molecules/tabs/data.json b/storybook/design-system/src/pages/molecules/tabs/data.json new file mode 100644 index 000000000..1a82d235a --- /dev/null +++ b/storybook/design-system/src/pages/molecules/tabs/data.json @@ -0,0 +1,70 @@ +{ + "metatitle": "Tabs Component UI - Slash Design System", + "metadescription": "UI Component Tabs for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "Tabs design system, ui Tabs, design system axa, design system ui, design system react, design", + "github": "tabs", + "storybook": "tabs--default", + "badge": "%40axa-fr%2Freact-toolkit-tabs", + "colors": [ + { + "name": "BLEU AXA", + "sass": "$color-axa", + "hex": "#00008f" + }, + { + "name": "BLEU Action", + "sass": "$color-azur", + "hex": "#3032c1" + }, + { + "name": "BLEU Action focus", + "sass": "$color-azur-focused", + "hex": "#aaabf9" + }, + { + "name": "Mercury", + "sass": "$color-mercury", + "hex": "#e5e5e5" + }, + { + "name": "Silver", + "sass": " $color-silver", + "hex": "#cccccc" + }, + { + "name": "Button Disabled", + "sass": " $color-btn-disabled", + "hex": "#c9c9c9" + }, + { + "name": "Button success", + "sass": " $color-btn-success", + "hex": " #1cc578" + }, + { + "name": "Button success dark", + "sass": " $color-btn-success-dark", + "hex": " #0d844e" + }, + { + "name": "Button success focuced", + "sass": " $color-btn-success-focused", + "hex": " #bdffe1" + }, + { + "name": "Button danger", + "sass": " $color-btn-danger", + "hex": " #f02849" + }, + { + "name": "Button danger dark", + "sass": " $color-btn-danger-dark", + "hex": " #8f182c" + }, + { + "name": "Button danger focuced", + "sass": " $color-btn-danger-focused", + "hex": " #ffa0af" + } + ] +} diff --git a/storybook/design-system/src/pages/molecules/tabs/index.pug b/storybook/design-system/src/pages/molecules/tabs/index.pug new file mode 100644 index 000000000..ce95d1837 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/tabs/index.pug @@ -0,0 +1,34 @@ +extends ../../../commons/layout + +block meta + -var activePath = '/molecules/tabs'; + -const { metatitle, metadescription, metakeywords, github, storybook, badge, colors } = require(`../src/pages${activePath}/data.json`) + -var sassPath = 'react-toolkit-tabs/dist/tabs.scss' + -var metaTitle = metatitle + -var metaDescription = metadescription + -var metaKeywords = metakeywords + -var basedir='../../' + +block vars + - var id = "component" + +block menu + +Menu({ activePath }) + +block page + +PageTitle({ title: 'Tabs', subtitle: 'Molecule' }) + .tk-page__links + +PageSummary() + +PageLinks({github, storybook, badge}) + +PageContentComponent() + block guidelines + +PageMarkdown() + include:markdown-it ./markdown/guidelines.md + block code + +Demo({ title:'Classic Tabs', storybook, activePath, tmpl: 'tabs', sassPath }) + +Demo({ title:'Complex Tabs', storybook, activePath, tmpl: 'tabs-complex', sassPath }) + +Demo({ title:'Tabs with long text', storybook, activePath, tmpl: 'tabs-long-text', sassPath }) + block style + +Colors({ colors }) + +PageMarkdown() + include:markdown-it ./markdown/style.md diff --git a/storybook/design-system/src/pages/molecules/tabs/markdown/guidelines.md b/storybook/design-system/src/pages/molecules/tabs/markdown/guidelines.md new file mode 100644 index 000000000..243a5262b --- /dev/null +++ b/storybook/design-system/src/pages/molecules/tabs/markdown/guidelines.md @@ -0,0 +1,36 @@ +## Tone of voice + +Quapropter a natura mihi **bold** potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, [link to Google!](http://google.com) quibusdam animadverti potest, quae ex se _italic_ ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. + +- Quapropter a natura mihi videtur potius quam ab +- sit, etiam in bestiis quibusdam animadverti potest, +- quae ex se natos ita amant ad quoddam tempus . + +**Component** Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Usage + +| Component type | Purpose | +| ---------------- | -------------------- | +| Primary | Use for ... when ... | +| Secondary | Use for ... when ... | +| With icon | Use for ... when ... | +| Disabled version | Use for ... when ... | +| Light version | Use for ... when ... | + +## Label + +Component labels ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Icon usage + +- Use glyphs (16px) within buttons. +- Glyphs are distinguished by their solid shape and knocked-out details. +- Glyphs should always appear to the right of the text. +- Glyphs used in buttons must be directly related to the action that the user is taking. +- Glyphs must be the same color value as the text within a button. +- Ghost buttons require a glyph icon (cannot be stand alone text because of poor affordance). + +## Danger version usage + +Danger ... Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. diff --git a/storybook/design-system/src/pages/molecules/tabs/markdown/style.md b/storybook/design-system/src/pages/molecules/tabs/markdown/style.md new file mode 100644 index 000000000..1b024ae3f --- /dev/null +++ b/storybook/design-system/src/pages/molecules/tabs/markdown/style.md @@ -0,0 +1,18 @@ +## Imports SASS + +``` +@import '@axa-fr/react-toolkit-core/src/common/scss/core.scss'; +@import '@axa-fr/react-toolkit-tabs/dist/tabs.scss'; +``` + +## Structure + +A Component Inter has ruinarum varietates a Nisibi quam tuebatur accitus Vrsicinus, cui nos obsecuturos iunxerat imperiale praeceptum, dispicere litis exitialis certamina cogebatur abnuens et reclamans, adulatorum oblatrantibus turmis, bellicosus sane milesque semper et militum ductor sed forensibus iurgiis longe discretus, qui metu sui discriminis anxius cum accusatores quaesitoresque subditivos sibi consociatos ex isdem foveis cerneret emergentes, quae clam palamve agitabantur, occultis Constantium litteris edocebat inplorans subsidia, quorum metu tumor notissimus Caesaris exhalaret. + +## Typography + +Component text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. + +| Class | Font-size (px/rem) | Font-weight | Font-family | +| ------------ | ------------------ | ----------- | ----------------------- | +| **.af-tabs** | 16 / 1 | 400 | Source Sans Pro Regular | diff --git a/storybook/design-system/src/pages/molecules/tabs/templates/tabs-complex.pug b/storybook/design-system/src/pages/molecules/tabs/templates/tabs-complex.pug new file mode 100644 index 000000000..19e903c85 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/tabs/templates/tabs-complex.pug @@ -0,0 +1,25 @@ +.af-tabs + ul.af-tabs__control + li.af-tabs__item.af-tabs__item--has-icon-left.af-tabs__item--active + button.af-tabs__link + span + i.glyphicon.glyphicon-ok + | Title with left icon + li.af-tabs__item.af-tabs__item--has-icon-right + button.af-tabs__link + span + | Title with right icon + i.glyphicon.glyphicon-facetime-video + li.af-tabs__item + button.af-tabs__link + span + | Title with badge + span.af-badge.af-badge--danger 42 + li.af-tabs__item.af-tabs__item--has-icon-left + button.af-tabs__link + span + | Title with badge and left icon + span.af-badge.af-badge--error Lorem ipsum + i.glyphicon.glyphicon-facetime-video + .af-tabs__content + .af-tabs__pane Content of my first tab diff --git a/storybook/design-system/src/pages/molecules/tabs/templates/tabs-long-text.pug b/storybook/design-system/src/pages/molecules/tabs/templates/tabs-long-text.pug new file mode 100644 index 000000000..9e693cc07 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/tabs/templates/tabs-long-text.pug @@ -0,0 +1,22 @@ +.af-tabs + ul.af-tabs__control + li.af-tabs__item.af-tabs__item--active.af-tabs__item--has-icon-left + button.af-tabs__link + span + i.glyphicon.glyphicon-ok + | Title with left icon + li.af-tabs__item.af-tabs__item--has-icon-right + button.af-tabs__link + span + | Title with right icon + i.glyphicon.glyphicon-facetime-video + li.af-tabs__item + button.af-tabs__link + span + | Title with badge + span.af-badge.af-badge--danger 42 + li.af-tabs__item + button.af-tabs__link + | I try to write a very long title without any sense just to see what is the behavior of my title component in this case + .af-tabs__content + .af-tabs__pane Content of my first tab diff --git a/storybook/design-system/src/pages/molecules/tabs/templates/tabs.pug b/storybook/design-system/src/pages/molecules/tabs/templates/tabs.pug new file mode 100644 index 000000000..bb4f30044 --- /dev/null +++ b/storybook/design-system/src/pages/molecules/tabs/templates/tabs.pug @@ -0,0 +1,8 @@ +.af-tabs + ul.af-tabs__control + li.af-tabs__item.af-tabs__item--active + button.af-tabs__link My first title + li.af-tabs__item + button.af-tabs__link My second title + .af-tabs__content + .af-tabs__pane Content of my first tab diff --git a/storybook/design-system/src/pages/molecules/title-bar/data.json b/storybook/design-system/src/pages/molecules/title-bar/data.json index 29b350181..51fcc9dff 100644 --- a/storybook/design-system/src/pages/molecules/title-bar/data.json +++ b/storybook/design-system/src/pages/molecules/title-bar/data.json @@ -1,7 +1,7 @@ { - "title": "TitleBar Component UI - Axa Toolkit App Design System", - "description": "UI Component TitleBar for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", - "keywords": "TitleBar design system, ui TitleBar, design system axa, design system ui, design system react, design", + "metatitle": "TitleBar Component UI - Slash Design System", + "metadescription": "UI Component TitleBar for design system Axa. Toolkit Axa is the design system for Axa web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.", + "metakeywords": "TitleBar design system, ui TitleBar, design system axa, design system ui, design system react, design", "github": "Layout/header/src/Title", "storybook": "layout-header-title--default", "badge": "%40axa-fr%2Freact-toolkit-layout-header", diff --git a/storybook/design-system/src/pages/molecules/title-bar/index.js.old b/storybook/design-system/src/pages/molecules/title-bar/index.js.old deleted file mode 100644 index 6810a7124..000000000 --- a/storybook/design-system/src/pages/molecules/title-bar/index.js.old +++ /dev/null @@ -1,54 +0,0 @@ -import Markdown from 'components/Markdown'; -import Layout from 'components/Layout/ComponentPage'; -import Head from 'components/Layout/Head'; -import Demo from 'components/Demo'; -import Style from 'components/Style'; -import getInitialProps from 'shared/getInitialProps'; -import template from './templates/title-bar.pug'; -import templateComplex from './templates/title-bar-complex.pug'; -import './index.scss'; -import 'node_modules/@axa-fr/react-toolkit-core/dist/assets/fonts/icons/af-icons.css'; - -const TitleBar = ({ - title, - content, - meta, - importcss, - usage, - typography, - headerLinks, - colors, - structure, - type -}) => ( - - - - - } - usage={} - style={ -