{"_id":"@dts-stn/service-canada-design-system","_rev":"187-c785ebbff943dfbe0fb826565e88278f","name":"@dts-stn/service-canada-design-system","dist-tags":{"latest":"1.67.3","next":"1.67.12-dev.4a036dcbe"},"versions":{"1.47.0":{"name":"@dts-stn/service-canada-design-system","version":"1.47.0","_id":"@dts-stn/service-canada-design-system@1.47.0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"ef8a17f13e3ddd5a22c25753613abbe7cabafbac","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.47.0.tgz","fileCount":5,"integrity":"sha512-YwYwixyzzxe7xWngQsukii9kQqqgvKxd0nGLx6uDRFCw0TkMq3Ze5kP3w7Jwk96zdJ9NRK2YZs98SDl1DvYOSw==","signatures":[{"sig":"MEUCIG1yhHcgEzGC0FPgSJkuaDOEDElS8VmmPcfnfro/KGRQAiEAmyoIQj8JygQc+qOmM9JNaT+8BPVCEK+cFRYUrtUjOY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0HJkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYdg/6A60kgirq62RhCtpQ1yYiPn8nIp2CwAs/R6BoWYDz9MdjSmGd\r\nIi3cCRd9CbV2A6u4RNyywZvL4Oi6/H2+F+RY3dUXjNDZnQfO/YK5+SjqoKRe\r\nQwRQkkCO08xpHcjkWin93AABglMj6W3L0BcP6WZkk4yuFxCWtnNyVKux/4/G\r\n2ySLAZvCFkaODXvyiTxxzmGr72VelwaEFOPa/NkVr3rVQAF+ERyLqMlXCk7z\r\nmcdfH3YsUFy0sXsDTWJwqJD7CvmwbOSxRZkY8p9qkxKpmGT6hdMkfo7C7Xug\r\npcZ8bN0GZr+PP5NSkBHJ8Rho/oEnhWN1j3SHEiMH6O0226U/kdnf7dCLDS8u\r\ns6fegIfpFsTFbjmgtsiBJOaKpGPJ+/EKFjPTL6idVvGNPNsqdwRz9DM4edmS\r\nzHDL7BamZYTjJHXGzyyLI9YmUvIZzqmowzs1hnu2XmBcUaNzMa8MwLpqAKNH\r\nUR24gq+qZvIXpOSJTiviICHhW3aQPmwtIr6KmXtarcZQt2A6aHHZJDVb7pA3\r\nGBLmDIfmp5HcFeOsHoizFZnZ8Pvt02RybiU+HfjKQkEvuX8DX9kTU58AxvG8\r\ne3KsunAnbl+7uyViFHuL0adxPZj8MYXW+QI6iTUcdECyfT2FuORIosJGsAlJ\r\n51u5M3effVdImypf2rVfkuTA2CTxRMs5kAo=\r\n=Sc32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"302507022e7679faee7d50a4166b6d0e9974eef2","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","release":"standard-version","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","release:major":"standard-version --release-as major","release:minor":"standard-version --release-as minor","release:patch":"standard-version --release-as patch","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"daceytom2","email":"daceytom2@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.7.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"17.3.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.47.0_1657827940580_0.5771699164223989","host":"s3://npm-registry-packages"}},"1.48.0":{"name":"@dts-stn/service-canada-design-system","version":"1.48.0","_id":"@dts-stn/service-canada-design-system@1.48.0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"anthonya44","email":"aalaimo@deloitte.ca"},{"name":"jvaddinen","email":"jvaddineni@deloitte.ca"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"129a41495ab511d828a5de222da71e82d83c6939","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.48.0.tgz","fileCount":5,"integrity":"sha512-vhfzGqYXmD50DTbH4PJ5EvUJI94zoKKjEchxRJmcgoN8COGh77+lb86dBEbOSxGGB2BanWPe42thcphhH3JOvg==","signatures":[{"sig":"MEUCIEXWfzMywyATXJ/GBECuDOsuM6I5nNrkHG45rMjbjm+FAiEAvn67wo5weOn5wmXAEXQvi30S1Xo04h2Waauu7xaNP9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0HPWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoR8xAAgYSgFke/JY5OI+IwQTbzpUyrpTOKH7BZp1PQRwnQxPqL9HeY\r\nGdd3F4jd30GxMQce0I8+riZFygnvlRmsjn2o2tub949MyE10586cdgFlhM3v\r\n8pNK8GK02VHBr9M+aDAZ/0IB1iivx6SFZvhoEwN/WX70iUS3n9FYkVhJt4yf\r\nz44idb1yqHtAa11Z+1Z2/P0K9SohOIX019oAvbqmMR+BZbd/tx1CM4447lrx\r\nYpxuIIFpxc4+8Fv3f9Tmg5nePMayvU5/x4Sj/g9UnJkqBYgRGMw6sBuEQ+0D\r\neyFDm0/8nIT99u4Xsw/cuYLvxVP6XkKfPg998N9LBUidBod/+M0wBtUStdhS\r\n+D47OxXIlMzC2F8nlN39PaB6vI9lx9Ygbm8tA8M3XHhyAx1vHUN01nsuYBwL\r\nl5Niq98z+xUFWsCfwEmQWyDdzEzLo0GcvbrkHrMkGIvzKTWUp78o3DeYSSnx\r\ngUfG7xd6JoeuYIKabOLWt+8LK1w5zlTpOwcLSYPQBNymitlTO5TsZszmQNSH\r\ngAnFQds8bJmULVPiNHtzjOxTKk9KWnTgjrQ+rq1PVueftv+iZRcr4oRS723B\r\n6clRpbjI+bwODIKWAKQq6hexZLZLAsRq3rJdJ0dngY2TCylXACSXEJMvpU3r\r\nHqAcygeqgBk9Y1oi9Q06vriR41zk/M/B6f4=\r\n=MHCs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"f5798828ce2959eeeb5ac6d400edaa93e03d07fe","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","release":"standard-version","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","release:major":"standard-version --release-as major","release:minor":"standard-version --release-as minor","release:patch":"standard-version --release-as patch","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"anthonya44","email":"aalaimo@deloitte.ca"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.5.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.14.2","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.48.0_1657828309879_0.7745106926635936","host":"s3://npm-registry-packages"}},"1.49.0":{"name":"@dts-stn/service-canada-design-system","version":"1.49.0","_id":"@dts-stn/service-canada-design-system@1.49.0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"anthonya44","email":"aalaimo@deloitte.ca"},{"name":"jvaddinen","email":"jvaddineni@deloitte.ca"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"f285bbe7969bd6595b780efcba231e788c15d59d","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.49.0.tgz","fileCount":5,"integrity":"sha512-dG2EtJEJK+MxLjeqFptWmqwfisqa6JR4cLNVhreKZQjixVIlDvMe03e4CwAvZatSBLTgJhet/lv1/RKNSz5+0A==","signatures":[{"sig":"MEUCIQD6WAHqYNKFXPrCUGYE8roAHirj9pEI/1P7ZKVvIOn49wIgPdZiRfF16fpivIVTOduBgCWuw2GYXsQdg9VsQWAvugo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1WrPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLkQ/+IF0LUx4L4eZ6ba2ULH8Is1CvItVFBwu4fz2HQ132RoItaSnD\r\n12mt6ARGHp+oQ/kXjUFFv7E6K0fgLV5W+jfKnj30NOwUOoNvdusYYwjg5vNA\r\nrvcASqNuIufAk53Ne1YiHSzdHIBXBn/1+tjV9lAEn/6NgOh924/74ZlavgdS\r\nPOvGH0Ko6Hny/FwL325BDZ/sWVJK5skzQzwB35U4jNOwIgXLSIbmTpVxILtm\r\nU9/q8oOpKXeaaekv2LSJoNawAk5I5dUPlioXUp7MclwuQdZNSYo/S4Dp3ZVn\r\nSeGB8SpkTElmPI2rKRbmUr9Etv3bNKtzPoxMIT+L2lrt5AT/dR0CWOEd+w5f\r\nAvM4IHvAlWqqO1hAZFdUzfz2sWqAZ+cwn6xu4bZp5BLDsbD/xpEvSmHmJUmj\r\n0kR3t01WBQvXqlK7VXScxIKZEyCvN/MDzKEXi48fFC5JtUjnLCI42qfz3CY8\r\n3BkOqFus1+3MFptXGbDRuw+OGmNFkNFZt0K0gu4d5iWFGFJUsuBXYfIJwbM7\r\neSYLHEq856MB7vyn5GxfIO5r0sI/MXFRN5s1NJC+ErD3XKILwf2JItTe2Wam\r\nC3ely742/fIJ6SMgZrNjCtmvlIQEJm4ITezxK0qtO8TdsS5j5zRUp7HahhRL\r\nhp1zb7cKyABDmCFdeR5mr1AQ7ctDbfqkvVg=\r\n=pcYB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"ace5fb79e07c5926bfcaecd368ea2fb533417953","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","release":"standard-version","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","release:major":"standard-version --release-as major","release:minor":"standard-version --release-as minor","release:patch":"standard-version --release-as patch","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"anthonya44","email":"aalaimo@deloitte.ca"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.5.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.14.2","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.49.0_1658153678876_0.03936228152333987","host":"s3://npm-registry-packages"}},"1.50.0":{"name":"@dts-stn/service-canada-design-system","version":"1.50.0","_id":"@dts-stn/service-canada-design-system@1.50.0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"anthonya44","email":"aalaimo@deloitte.ca"},{"name":"jvaddinen","email":"jvaddineni@deloitte.ca"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"25adb79209a180117c73a6dee29fefdb0de84446","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.50.0.tgz","fileCount":5,"integrity":"sha512-+30EwNf8+Pp5ls7KBoHT4pNmteyUVSkhF01e2kVTNakQVWz52eoIU5Ewbxh/dOIuQnE2lBHNqvUOXzRSvDcYmA==","signatures":[{"sig":"MEUCIQCbw/gLoae3NFrjiu8NskUea5vUB6t9lh9phQ9SY/grsQIgSvyM8gV0aMlzVJKCeEYEl9rviORbalBCpUI+I7nN3Dc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501691,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1qqUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCEg//VU3LCBpCvztdHBxOUR7ydaE+LIpjR6OQSeZ5RFM1Rk0HexGU\r\nfxZldadd32H8cUaqFNFbrjm5vUwxAs0UfvY3RCnnF+rFS/CXZb2BdgXTTNUs\r\n5rPg1CjtKLLCyvoaMqyLTa34zdFPsAHvj+/Jtz1HtFKcp6cWbbGNSAOqe4YG\r\nCrc59+1lHnTOwfDmrLUJEVhgQcllxVUSvkYJTlWnbfpJZf6MIFkSSKdvH40X\r\nix7gsu7KXPimEXQR4NUJvnLqUO2M713MlnFJZK/1lZEigxKvfBEWMdDUhpNg\r\nK6ccsdW5S2CCaVyDG0bySbxkxTZ4/haxjhcd70bDCyTMUT43Zoshb5IUtbxR\r\nogrCrbq7k2M/x08whEyzpeExFcczbeS1W4I2PTqK+SqB+BdgekbbnFxWKv8F\r\n1BwMVtAw8l9UJcUULlliixxu6hQl+yJghlkApkshWqpQ3ZTnShz+oTvoK628\r\n3kwKieyg5q5dDbKMpb9F2pAnl9UTZ2UW/P+48bL2Y0RJdZPjzcSf3EHQXl3b\r\nJyipj/y3N2bhzUGWxxmgVLqnoetymY3iW+nrG6AiEzooKfn/+JMbpv8O0KHz\r\nQAu/auevc2pyE4fV2Ug7lWCma6GnKL0gVg0tL5ync93Vmb4vjUmks8sle6Dn\r\n1eVuuk4i7yzh81n9LXuIitjQstAfBIayzEU=\r\n=pxuF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"68e4c7f6a9ae9ee308cf869e1d3b59177a645c96","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","release":"standard-version","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","release:major":"standard-version --release-as major","release:minor":"standard-version --release-as minor","release:patch":"standard-version --release-as patch","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"anthonya44","email":"aalaimo@deloitte.ca"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.5.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.14.2","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.50.0_1658235540323_0.6184327537987293","host":"s3://npm-registry-packages"}},"1.51.0":{"name":"@dts-stn/service-canada-design-system","version":"1.51.0","_id":"@dts-stn/service-canada-design-system@1.51.0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2a5c0aa604a2a511ae6b478acd138a5aabbc10b6","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.51.0.tgz","fileCount":5,"integrity":"sha512-vbaVlJdT5RTlqxaw5pwylrivFbHMJ+mqkSnn9ePFjl2ET8pMZGY9XFlVwEybwb5LMtfdrHupS26XkQ4f1KZJqw==","signatures":[{"sig":"MEYCIQDcBSZJT2eO6zExfyFFvxvx1GHQpNVM01SnP9yGQ6RMLgIhAP2ft3YE2jVa30W47w08ExtGA52pCrHxea4Kddk8wc7Z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLK8sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyUg/6A6tjT34vdRS8CQYaCVsUsRFBRFZCSCWs0yBo/gMjjI/saoc/\r\ndj2tujX8un70kM//FHT3exfHlfiYW7WLPkEILT9/gTyc+2ynWI1WtogG07Lp\r\n+8t3IGD56cGT9pusnIW6HjaMRfjmiyqZKM7ye/W2/fuWu2IT47kRHlob2csl\r\nZxOloU/FyNQcdlLszGg7G8v1CEVpL6Ruj3Rwd9/lyDS7KuI0GWJMorXNK3Z7\r\naVoftFKZKi1Ycw+Oe6Em5suOiIXDgmOiFvfeMDADJMlcWMecN6x4ATzEzHkz\r\nYdbLX4P/5tOaBI/jHB++lhHFmbhNHbUwVhGig2Ta71foS2v/g12TL0ReUvv1\r\nNnl4s6OQ4ee0ATSc7aD4f8aBVrsZ9FHx+RTlQwuOj7uIqVki7Qu/VKr1ZO4y\r\n2KO/n41LeTU/2yZEQQS0CPLh2KQdC/o4sTOWTH7pcRBeStcp+EPKekNhJF8/\r\nWGK0GVdx5IbNYPArKVbuCULycwwdNJtzX8W8hDjiA6hGI0cYKYqdEHu/Bm/o\r\nbe0weTu8UouC8cLQv4zy9YupaoWSKzHYNaTyAKGwVJXRcIF95H0QwINb5OKL\r\nKE4Gw/m6qMFj+DEXPzkPYDCeD+UdcL9eQCqnY9MJ2SdgCnV00hVoZ/N7GdqT\r\nfmEtUch2j5CuigkfYpJUmIsXlJy5g97YSA0=\r\n=mkB5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"56f2b48d84bd801ec9fd73b84f58197d5a3b0770","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","release":"standard-version","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","release:major":"standard-version --release-as major","release:minor":"standard-version --release-as minor","release:patch":"standard-version --release-as patch","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.51.0_1663872811742_0.3579732354355081","host":"s3://npm-registry-packages"}},"1.51.1":{"name":"@dts-stn/service-canada-design-system","version":"1.51.1","_id":"@dts-stn/service-canada-design-system@1.51.1","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"05f61618c3c1063d063d9418a910339e33bd444d","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.51.1.tgz","fileCount":5,"integrity":"sha512-THnUtPAl6oOdmtYQuiZGMV/b7NnOF6u90W5J3Wr0qMgzspVObBGoigbBDr4dgMZbJ8BuJv4AFsiYkgoyiOPoLQ==","signatures":[{"sig":"MEYCIQCmu7TRr8/3w/3VnFDt0V5TiTkEeCfFRUCiGr15Kas/kwIhAL7arcQ8+0JR4fU5v93EwlBk+5pMFgm1WieG3q8bsC8L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLLE1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1Eg/9H5SqC2l6vXIbg7lLz4rP0P6bXMyL318ZHcI5EqKbIljBc+60\r\nuYTZaBBl+9YInNTJjlxhuPHT1uV8TIubF2MxjHjJ2oSgi0NautWoOKlLowar\r\nHiRUYmhxY//uLnThdL0X3ugC6DZ/h6Hdv/tSyrU9NP58mywuJLTIBLq8dZ6Q\r\ncPqhIGZWd5DjbED+jlnD50OJWgNJflZbwXjUPKXEWHlF2gG9YIPiEfRymw7c\r\n3NQEZioNe2a/VLy6d6aW7kYgz7o1wwQamL1J+2C5jsB5LS/lKZ9BstWb4AM7\r\nQUZtxgRsPRR7EX47Az0KfBZt3jc5pC4W2n7K9ay9o5BW0+pI+NwlgKJsnDee\r\nUfG2dp4zvE+H/oPTAtSdwFsfqdkKQT8dNiQ+yHT0+3w1yCoocpfZbJakvjK9\r\nYAmcVG2VAmXzSqzJDHZ3UIXFCImcvsJyiuZkCMWDn/VQH+xV2og5rn0+GF8j\r\nAUh8zeoNq7g7OHlqP4AtHywpO0w2IkUE1nHSphOlHuicoZij6s+cZPqOVGaM\r\nVVn5C7ejEn0AulAq+OqFbiBKL55I133/SNqXrUOSXQwnVBrE/GgqQmXrC5/0\r\nX0slTUbGD5iHRpqgo2GxrVD0ry5cAfaloqO1Pc8Vr836LnEV+X/C7vXzaRRM\r\nPYsftpkwQy2/TOr1K9wOVfth+7Y0yvrR9xs=\r\n=M91z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"5db7787901be72caa96db64e6f4c270dbee9a1e3","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","release":"standard-version","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","release:major":"standard-version --release-as major","release:minor":"standard-version --release-as minor","release:patch":"standard-version --release-as patch","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.51.1_1663873333341_0.115076519454955","host":"s3://npm-registry-packages"}},"1.51.2":{"name":"@dts-stn/service-canada-design-system","version":"1.51.2","_id":"@dts-stn/service-canada-design-system@1.51.2","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"0564f8da0904c9b92cd34320bb96c76cd0a58421","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.51.2.tgz","fileCount":5,"integrity":"sha512-g6PxuBUHUwAkzPf54FZd/6IAINcAEzmVEomG4lurLJzCfhXHULbqU1enyed+N/W99QCgb5wsXK+EWOsKv0e2aA==","signatures":[{"sig":"MEUCIAkSCy75GulmZzXc+vTQfgm8NBybfGyU7v45M2pKF+6WAiEAgoyECbdgGRsoKkeQVTBlDPp0eOOWEELClms/pLoCoUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":501787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGgdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhvRAAgpbIe1Pxv8HVllsaZ2AaD5aUFP1zZB0YVa/D0BHwYs/hNUPI\r\n+o4LM4noGz/wTl6OutbDpTyfQXyNK9AnIclxn1ShXdYW3olKPZCluIx5MDhh\r\n5PW8F2cCuJmKCC9QRluxASwvua+xp8S5v4i24oEDtOWzy1w9UiSS2dpHm/qQ\r\nxCaGUa7C1VgGTLKo6yKZ98rCctqgI7VJSsPwIbSgmB9udmq9cU15iQxENRlZ\r\n0MK4bUZx64GbrYqt15qr4JPxdp5M8PoU8hv5t5QLNms6kvRP4ovc2P6P6rIb\r\nx+QOefj8vmK5hwMZIEkqvzo1kF87CHpJ8xTotwXQ/C6P6GWljptWD2TSTwtA\r\n2IrqjjRlbR4IR6M/ttuATUgzi3s4qRB99f19DaYBp9foVwgqy4hGv5IhEpAH\r\nfOSqKvZ1M8DmfER5nDNXFCq2yYJp/5gIUVVOrK9dzztPELyTRZbsITp4uzaK\r\nMrJa+1a70j/xp0fylepaaa6lSMIpOP5Zw/M2hmcD4WkziCJokkf7sd+sSASe\r\ngRUakI87iqXStfR0LB5el5kd4Czww7Kbf2liDmZAJ9F3yDaEUDm1VIQyfj6q\r\nhm/kQwXwchQBwlJXgS+A3X5RytYb/H9nxs3R9zdeZp7tWKpXw1j83BPfOyCC\r\nBmBabK4RRJpxhDGx5vG3zbK1kKjX0lczcOU=\r\n=+zKf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"851053e80b58f0685c0598c96d70682f03a274ed","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","release":"standard-version","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","release:major":"standard-version --release-as major","release:minor":"standard-version --release-as minor","release:patch":"standard-version --release-as patch","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.51.2_1664903196908_0.5314016466208589","host":"s3://npm-registry-packages"}},"1.52.1":{"name":"@dts-stn/service-canada-design-system","version":"1.52.1","_id":"@dts-stn/service-canada-design-system@1.52.1","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"0c6ec77d0aaba505146cbd8e226dd623ebf2f827","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.1.tgz","fileCount":5,"integrity":"sha512-q2pQrPFK+qidjKUcF7jzECRTIpvjd+7RcxHVmCS/AiYJv1ke3ii8s2sBBP2xomM2drqZVJNfA0joOrFeOKqc8w==","signatures":[{"sig":"MEUCIChUmK7d4IxV9RzQ7HuUUc2qgi0ZTYgkl4ORCJArC59PAiEAv4rVKjrDYF41wbRAC1oHwHVKNAv+aZJ67dNsq+svg1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSHkYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHMw//Zq3KwL8VB2dxR0EAVk6pWSR5pv9FAsbDzTSYyrm2mtGo5zdg\r\nh+7ua/m8RfU6Bs/QQ070ZcT5QUBuo9NDixO3NcDM+486xgdyv8pZ8FiI9BRK\r\nDqJS8leCGX9pd/1PBaeaAL6qTCnoxDmfx6IEs3GxkEVy3Ws3jquu9kiVhyY6\r\nfc4A8S0xnPJaq0D+MW7yuj13TGJa4SsEyw5/MpUTa7mQ3LSKU5vL+DcSzs8O\r\nk8gMTTv35R0ENI928idk4aZUcAFSLlv8jOcHLXRdJ7a7SWTIP/hEUI3G4P2R\r\nGK7nmjyCfp+dIugYbpRZcvQvkFRuJ6t08EHFGqw/M2GaSj9qLmBttFhw33eB\r\nZvtZUboYwV9sVypwRXxopVuBoJRn4J5jO9CtxhWWqdeb9u4K58hgAZTDpiYO\r\nMhNN9rEJlaFumsdI16MqQxIYP/HkVxJ9gJ+kcITT4Qi9CsYb9cLE/RWtjzVa\r\nuMJCjQRE5L6rWrLWwkOAHawizAtjF9xbsDE3t35YM4UBG4SvGBGr6DFbV/Cs\r\nkywxRu+3Qfl1xvb1qKdZf99F9qMtDtJRPgxPqwA0ck/ZxSLElnh3xhVDNXy7\r\nEMWk4I8ZSBr2uTMNdGkCXIIj+q8zBBPXazC8p4GRo3tgq7C9poFr5cWlyTIa\r\n7s52N0R+QbdkaiMzYdKA9pSHwcKnpsKALk8=\r\n=2Hpg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"0e660c121ff308f007f882da0ace536c361bddf0","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.1_1665693976602_0.22888203075298708","host":"s3://npm-registry-packages"}},"1.52.4":{"name":"@dts-stn/service-canada-design-system","version":"1.52.4","_id":"@dts-stn/service-canada-design-system@1.52.4","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"9ba0df0d36a006887fd622ea66bf4854a503c4c4","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.4.tgz","fileCount":5,"integrity":"sha512-sWd+htTjGaqby/1XG+LiuddT7Wha/yMQC81jlljZHb6ovgsfgaEXEbeD0o0+SqUZTV5jJ15z5qau83WXiyFB9w==","signatures":[{"sig":"MEUCIQDDEddiWA0oAHt3MBELg4mKJukfb9QRALRxqztdGIYr4gIgfMAx+eFYrDP2wAMBM8ljVpaHStFbZSwYWBuKL4zb9M8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSIRBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3hA//XZJI62Sc64RC1aAhjRaxSDe8Rl/b2kZM6nNzNZT/PckLkhsB\r\nBbk3eKVHbcpjyYQRNerRfZuclJdgzhBDHSTdmIwKrQaVY03/gJUMJuGv5tUy\r\nqBZH3zf6FVDUn5uXLaQbkdmjB0pspWdSNTIgGYt8zJdjsIV9czi6/tDGxibf\r\nuOwRJOZ/7j+8d65WbucfQyyfkDx6Usokz0MRQkeZ3Sl//1S6YRb2dwcJ/rcX\r\npxF/2wxpLBZGM/7KU4L1lr9dxizfYJxX54flSUHZs0z8uD42ztkl/DJ9kCJN\r\n4nff/Fob/N6WGZRniYbmszWcEF+hAg47Ht+Ie5sdkq8vkXGpi6iINqsiQcm9\r\nbqwMaHdZMIftQY/fqbAHMZUcc3ke9vMiP7wlgDlIijL5JLXlU2iVx4HBoB7U\r\n8+6AL15mNCEnqANb+/0bYmaq0d+BvQ3nV47SZsBRHwyRKw+V2xl8xkgWf/+8\r\nXMwwaY2zIaXTcnkIKsES3iZH4J8BsEG8RZNX70E4mWc3vi5GyuM+iWIY9HWi\r\n2z9oqeD/+lGz26br2DRajO5zzchzZny9aFOanrNO4cVmUEgB5dHY60dyHLNv\r\nCZ2H1yLektMjl1Mj27kR0f4aRj2Ki00cG4WPdRESg1+alxGMNCyo+b/fS1QH\r\ne7Nule9U1i+0shr564N2zDsmQC4/ADsPzvE=\r\n=SIw4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"f0d0e2c035487dc37a3d79f39d5b7217898c8b22","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.4_1665696832900_0.8515373366476733","host":"s3://npm-registry-packages"}},"1.52.5":{"name":"@dts-stn/service-canada-design-system","version":"1.52.5","_id":"@dts-stn/service-canada-design-system@1.52.5","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"848534ec35135d2c758972ac36282a665bb8dd74","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.5.tgz","fileCount":5,"integrity":"sha512-kwX6xh1ECBZXA79JWe+C3fAFcWAT8HRigUTcWTx3Lf/nHV6W2H1NRZPTeJElGyqN/W+Cl3d0NKZCGdT9LQj7tg==","signatures":[{"sig":"MEQCIDnuqd/netevw1qIuvvnik3H86G5SjxW8p18lA+0AgZaAiBx2nuawyip0GvZ2IyWMpBHlaZMIHoI4X9pEGuaWeAXMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSKfrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5HA//QxI8Sbu5myQQF7VhWXwPikQt8Z7cR8ax9ZitGEJv0aX/9jTN\r\nXloyvuHzB42vi/yao6OJE3tFbjCBPyB+r3O2rONIH0RqlutA9ZanuCo6pjYh\r\nKEQ2mp63N0N6rFd8Uz7RmX1DM2XvS5cJnFYYBR3n1n2x6r2g3zlZfBftQBGH\r\nYEl9cNm4nCo3abUFIFMp/idQb+iSHxaMMHYQKQomF/ZnTQNC0XRQjMHuH03+\r\nFx0NaAetEBXcy/vSYjdt7+Yx1usjGUgtUl/f0kKjfEUPjMwlIa/mdkq8VPHY\r\ng/1JQhtkZupBP2+lnhrLVqQBlJ2sHN+xODeZWgrWDR1nMfox7XGTIjGx4N88\r\n7Efj4LN8rWSkh19hiNTgKdADRmw7KVpnP2GFCEnH0SysD/Ytrh996UB8Kx/S\r\nrXczueym2+hv4+IDv2wrU5rIKKaunMNPRT+nUAa89NQpxdQHtT+198to1+RE\r\nJMMcUGxliI5UXhyJPKjZXqRvlYVYPYFHB5IAL0WJ9hGrX15OfhTadbJYMBOJ\r\nHa7h/BpzuRnCXDEADlSv/8vRsXEWBcaBG/BqMCtYCSshTqyBStyYxFyrpL7S\r\n7E6b5wYFv36RoujFgOnYNwmwEFa/ewYNHdAcrMNCNRzrz8cEiL22u2zxBoMX\r\nhRVT8MB+ncoYr0w0hFO7EkiBXEw+DPTdmfM=\r\n=wyBS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"e4e53deb1ba4e56f3e1ef265f383664ada086fe7","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.5_1665705962891_0.27845246292668","host":"s3://npm-registry-packages"}},"1.52.6":{"name":"@dts-stn/service-canada-design-system","version":"1.52.6","_id":"@dts-stn/service-canada-design-system@1.52.6","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"948e466fafbc9668695ee502b4a51849ee0f1554","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.6.tgz","fileCount":5,"integrity":"sha512-cvH3ufga2fulfhYhJN8IerlZ+/RuYI6COQzc3ykuwvztChR2JvkxC6aw25mzFbhQqRdmBN67qmV9OIycOtzsGg==","signatures":[{"sig":"MEYCIQDIiOiVD6rHVkBILLKvweeF4pudkKjcfPC/jjePiLF8bQIhAN4iTqn2CgHTL9r9mgYLWOmAV6rFwLGAq9KAOrgjwP50","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSWiDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqdFg//aoeE+n29SLNS17dxBMm5ggp4Zmq1G7jg9ZOixYWdW8lo54Ag\r\nl7qCcBdulIp1X+7I/FktBvj3nINek0nyv/Hi46yD9f/uDPWbpYsAMeXScPoE\r\n7i/dwaPv38OdUABtGeq0y/S+nvBrxZAAd/6+JMQrzjhAWG9OQn1wrqzJRsHN\r\n5SFFJSZmp3Bv0y0FMErRZ/ZUYOfFVQLycBx/SFvUNuVadwic/BnLDvmEGY6e\r\n+eRdzZob6YEwrh/sPFFwXvvf3UwdnyUdFqcm5elah8GAgPFeRxek91L43XXI\r\nank6UHr8w8bzDX8iciy8dKUHq20DpAMYCebKEcY5ULHsCuYh8yVKz8BmkelB\r\nhaUty7cHglaLRz36zDde/iPXktQ0BSGUunKM3sL2f8AN/gMSgZ77CGzt2Ewj\r\n62RK/v1QOwZwdMDVnF0IkGGw7pYIGpUWex0wQi9Ukzkks/ajCAVoa1xTIPHP\r\nfMhOOW/pxvgDsESBTTH3JtxnBw5KtM9ZMeJ0bHOs+4vzE+L9Ip6/dEtEnZxX\r\nOAXq7RIXh/Ws9Er+aN6FOKyZujC6fQoaAAonbm9v5bjZTA/Ct1P42pj8JX4A\r\nXrS5etGpph937hgMC7eQcwx8r2D0JDl41TBFWqABfjVkxFBoFonyVxTBTxGw\r\nPY8hVXXHLSJ/tZPmPZwFiE+7rzxYIJ9akuQ=\r\n=0ppA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"9e707f0b3e9e64e4bba824b699699c6df3a05057","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.6_1665755266630_0.688766795068811","host":"s3://npm-registry-packages"}},"1.52.7":{"name":"@dts-stn/service-canada-design-system","version":"1.52.7","_id":"@dts-stn/service-canada-design-system@1.52.7","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2c06329e0e4a508d207954ec85f0426c5c4a14ed","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.7.tgz","fileCount":5,"integrity":"sha512-Z+WUCJvEoYAnj8SDWZR3NkZHXKndUMB5+aELRRKw5vZVaC+OQXDWRB1lXq7N5scKPWMTBPkQSpIemNM760mPAA==","signatures":[{"sig":"MEYCIQCd9QaM4EcxvJYCo3X8JItcUPl6oHoqDTK0yLJFwAwaqQIhAPOoR5fwZo0Oq8pC9vIFV5O7JBVYT9qgXnMriVI3+XVY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSXIHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhxhAAk6kIO2K9gReK9QD551WgCTgJOsbV1jywz66NfGTcnw8pKkSl\r\nLVVy2tpCgrswuk6kQMGGYkL8sB4Zjp0hPcKWUyqkv2cv8f5P8wX6PoiGCtUe\r\nbLwC2Ro4dgAQsrI8XAmF7FF7hjzUJNsRU7PfycwXGsLdnyg57PAw9b5bFcON\r\nJZsCGY+JqtagIHmTEIY/uVXSO+BZW0VJEbfd6NGltY1nEJp6kef56BeR408q\r\nNfYCpIj9p9GD4YxhbVEPr8hc8F/cqDqcafs/DV0xvyYUm7K7Q/WQPe/y3euN\r\ngUgLFomhM55ancSEw3tCTGzavCojtAXU0G6itpTks9cHW34pdly3CP0aJBb5\r\nnKHXkjQ28omdx7APF4A9DS5iYKRHfRQV5b2G4cmiObs0muo105IN5gNY5A+j\r\nqzOQc4yqs+c5lOV+Z5qVbouInuRQiAjkKx5rycr4ymDquBwDOBQrtIJibe4x\r\nkwTgZkZicKJw8Zy797rZmxSI42T4DUHi3QqEqOhqqriTUUsAcfDCKLoirn2H\r\ni8Y3O/g3BCr09sT+OzOFIKRjncDWh+42PWTZc0CiEr9SmZ9eRnUcRiVUDdg9\r\n2fwsmk/L/idqIw81As8sP4Pm7lwsQog8cgkTjH+0/wpSNSnpfRF+K2jqYGek\r\nyt3XT8Cod1nHq5aGkwm/6AJmJHGSa4xK6TQ=\r\n=cdEg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"9d325f5127ef3210c756e33193ad61b724f45c6f","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.7_1665757703557_0.8695716692135598","host":"s3://npm-registry-packages"}},"1.52.8":{"name":"@dts-stn/service-canada-design-system","version":"1.52.8","_id":"@dts-stn/service-canada-design-system@1.52.8","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"46e4af1a402248c1f6378be1a8449592cf4ae762","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.8.tgz","fileCount":5,"integrity":"sha512-kEY0R5Qoz+C5m3Pd4VOC0mPfgt0cM7tUrb29ExlNxXBaLMP4Uswh2YBjFo2ts9Af6QrP5JL8lEma03PSZOP9Sg==","signatures":[{"sig":"MEYCIQD0ybKMFx+012SeBy+S5tUe3EgsMLJMs/CG/7YQrnojQQIhAKctj9PotkZ9UyOBW53KtoX9GQ8P0oSHpO0T97mmNuv4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500459,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSahTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCJg//f2J7zsAKKEX0lx3FnBJCEEIAjVwNDx7uLcsOYWHH57I8lR3w\r\n2qrrfuzAmdlGrQJop7PQri0Mz6k6Fu+pFEYT1qQCHK8KhWZJlKMpVHW0MZ/Y\r\nfNUffn0cGv0EVpZTJ5VuIOJ4cEl7xPq38K+8Lyjx1P6/eVGquTl0w9ahFvTP\r\nZiPkBllrm4vL9eCODAkXIKrZ55gP9O/pcEpBnvMcbf1ePVX2xYPV6yjT+9Ou\r\n851Xn0jc8o10vui1E1pZZkbvjzlflwSCI/6GGG/dgj0YPAXZYNMOHSd4sl5P\r\nc9sOJ0QfCIOL/mXfM84WSo13KPASyAHicnfYpLcKaBsejwSosjp5lTqgWJP2\r\nolaRR89PDwepak2ZcuYC8v1wIYTxSg6e2YPIqcI4pHK8s/dAMv8/ZDUnVAGZ\r\n2rUVvmDhyo9g8cCwDM1J7e2nWZC8q0Fzx4odovyjFLYH2qJ5CVALsLmMTQpF\r\nywAEX/HSFBcUsAGFMjg7P7k1jc7NPM1Um5gtnVEmQ6A4EOjT7yywRASToF+u\r\nJPnKyqVBYzfeKXrHjs1drJKPDkzN5inVwUiD7fG2otdWqXZPmXSbvE60/kRy\r\nnNbzxgWaej2V611+Ngj6kWGhIPNN9wXGvg0XNAKjK7CK23e5uBIPJ2xmq6DK\r\nOJK1LygtJ/7DMxoH9sXttKQMiEnYaJN12hk=\r\n=UEtX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"d54f4e072dcbc501e40b38dd3d2b1eb547e02905","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.8_1665771602355_0.8062500072548449","host":"s3://npm-registry-packages"}},"1.52.9-dev.bd511a9c3":{"name":"@dts-stn/service-canada-design-system","version":"1.52.9-dev.bd511a9c3","_id":"@dts-stn/service-canada-design-system@1.52.9-dev.bd511a9c3","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"93e150fdb841473b1d1b419aa12d4f52451eb093","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.9-dev.bd511a9c3.tgz","fileCount":5,"integrity":"sha512-LO4kSKYPgiAsnMiROpbclaALF60DNNru1Bzi2CeqZx0u8/ziGWrpM8OgeQXn5TiiyTP5l9RSSYvnrBKtb1SoIQ==","signatures":[{"sig":"MEUCIEikSi5msAjgJURG/UP6/vDuEfcqbGm2pO9WDkv/ZSohAiEAlGdNp8fJlFylJdcWGUS/8h+67YBG7bX8jM5hig3OEGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSwa0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkSA/9Ho2SL4Uu1mG8M1p1MAyOf4Y8YI/pW2eyITL5jK6rSUvdgAAB\r\nYF167bruSp6CsST2Z6gQ0UFOhAubi6W/7q2tyHgIUmBeWxj5S1zllIiSItrj\r\nv3Vfdnd9ehYLM4JwNn2eHXerVlOribhpr6I4amhXBGMfnuuBCQehl/Z9BGv8\r\neU7NaN2o7d+byMeM4JEWF+RTOvKoqMlH4aBNcnxl00oS/MTuAfYV2/Am2wWg\r\nvyVSyrVedWAWurpqU0lb80ZU3GfUoHyAB0PIAd2cSualg1OUOvPSxC4aBO2u\r\ns66h8Z1im+i986csr9HCO4ZDdzmEq+6JNqbsEuyDsdEj0GbI0aRoHxBLXZKw\r\nG4eEQvGZzrYMilcC2vrKIC5/HtbhrlDV2X61BVPTeFf0BKERELFSwjoJvmsq\r\nz75QsxdU34pEf7wib3fGcYPRmUTftCIz+qVnTcbVQXjFlp5dvM3yJtRj9P/i\r\nDuHX1DI+JIbRuj2l5y/8+QvvKPzgZslriw/kaQHnjhZPPFBS3cvWs9vckU2C\r\nF5VGxCsKIHGIEQ2MqwA/BdP0qpZLvhzoD10fsX2nqG1O8+Q8a6ECUq0d32NG\r\nFTUVwW+qDH4FP5R86PGRGRo77RoJdtrK6RNmXDxrSFbHVcHqc6Nr8PYCWbws\r\nrQsy+ZVdTvSNIhcBFaZ99qSE5K9Qj/qfsZ4=\r\n=6xKB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"bd511a9c308bf0262e2116231d77018b61f9d628","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.9-dev.bd511a9c3_1665861300154_0.8792663068661484","host":"s3://npm-registry-packages"}},"1.52.9-dev.5531076f9":{"name":"@dts-stn/service-canada-design-system","version":"1.52.9-dev.5531076f9","_id":"@dts-stn/service-canada-design-system@1.52.9-dev.5531076f9","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2e9b67d21be31f0f3eae1f2fc9e47ed56311290e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.9-dev.5531076f9.tgz","fileCount":5,"integrity":"sha512-T+yTpE4arVXhqhTzAu5Fsru7hDU1eMaTbkg8rdPZupL192iuCkjtX1W0iriHFksxsp4LECZ0rVq3cGsKJn+UAA==","signatures":[{"sig":"MEUCIBeNvp/+QfQG4iK6IFXTjpNOD5P8+BtEwKVd5Mc3fKIMAiEAtUbuB+vITi1SaBhnUW9ESYr2taxDoPfKGIRmU10bDy8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSwexACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Ug//Urq1hAy5Nbs9tbvUXgEPYUzoyMO0foduGAkJIk+yTHfoxjUM\r\n6cTeJ+F0m4ArBZXvut5s6/qHdW5TsfEWNHtfawdQHuzCWgZHlv1O3RiNy0Jx\r\n6zIx2W83KFfJilAHFkAfZiusHQzR0+AtMzh0rMxUQlQE9Yu+vlvAewb7COK0\r\nqtK0r50HaXPLrWsbzhyD18kSsYQXxxK+UwwyF2G8IcHPsxsvcBPassZFF/Dl\r\nJJiGOYCBN5QswoopuKRb2rfG7vh3uRBZMQ4uyvWo7wz5coV5UkMCBSPxDFX9\r\nPulHHB8fGjO6dYRXOEiWS/qgKnCGYBk7bPdoZJFRk+QhEslBuXWYe7T9ofuS\r\nN+QIJmS94evUatzENfN1MbA32rxuWlZRcqd72+wcMba1yFIfJvBLHUDAlaSk\r\nCDn681EB6Ut5S4rg0aGzhlOcXmVxBhWRJyzxWjJRPf0ztp1IJeJ20HL/wi25\r\nxBKiy1S7R9UxyFmVN2U+m6brX0EijXHipDRrNxaYNbmN0K2WO4AhykkMV7Pg\r\npOGVrQU5nPC2mF+qcLYf3/Qy5c4lnH78xWvLskwOhB9W3ZzkwwUQyuXS7MMx\r\n9XNEtE+Kl2cpFPeIODsLFMTXu+7E/g9r7z8B/VN4FHEl8OBWeqYnft3Lrb23\r\nZgJAr6eZMQDcOUa5Pr4goQSSU87en5IU/h0=\r\n=rft/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"5531076f95e40529bc916b76119f3e90cef674b8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.9-dev.5531076f9_1665861553037_0.9001019005230981","host":"s3://npm-registry-packages"}},"1.52.14-dev.c79e0cd5a":{"name":"@dts-stn/service-canada-design-system","version":"1.52.14-dev.c79e0cd5a","_id":"@dts-stn/service-canada-design-system@1.52.14-dev.c79e0cd5a","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"c8ce565e27628849a863800f23f8525d4991ea8d","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.14-dev.c79e0cd5a.tgz","fileCount":5,"integrity":"sha512-CsGSxpOOdxSssNNPzx0BjfUxWXShy+0McZ6BWatBB6cGNajMB/6KQZaSH/8zTme+2Ly47GFBnZ0jfpEVehpthA==","signatures":[{"sig":"MEUCIQD6rhH2XMjb1LMKEfc7rOm2QjawvKsdGm5qYdGoomjgzQIgAQ44jM7QYcSR8XkbXX4aDMaAIpCksn4futPgjrSwTOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSwgxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoD3Q/+NQ+ZOJuBux7j9WtfsdpAsa1nM0Id0b+z3PcwUVvHRWVhx1Zq\r\nwtJ5is/In1M4ClsSLoKuGThFMJoFK0hH3A0xvSLOSuSdpHVTu+wllbR4+kL3\r\nGtQwiPJPme9hdtL17sTQcF3huSc552rI5eJSAbWAWpY3A1GlqiTjkEKrJJhG\r\n7aDgWkFAMLSOUvv95V4TTR3L9oWKX/Gftzz2Ejkd34mYS8NBGG/0fP6+4QaS\r\nOkL7l8y2GPFuZuPUSvCxJLAomRWcoHpbXEfAZfkEtts8QYerB6JiiVQjT4sL\r\nLMU5sfnPH5oAp2i3AGe/n/FNj6Wtk6C73VntBQvRD1vUluACcc/tuK3cWK/2\r\nZOddv67tMAR4M347S099IBNFE1Nr0ApmP7+85W6Dkx5pTbcN9VHGq70Ki7mv\r\nV2fnNas3NKfQkFb1rKzOSVvl7OCvqq43MnGerTp+EaB80GumCVhbifgEgQSa\r\ncVG/mNPzgZX5+m0Af0Yqw5RGwnfaWVCjdXOrVH0sp6fZWm+4YSiK7drYqDzC\r\nXOA1t0wFo/PUaMLFJDFx6wPVXOawdE/TsP4Bss7dWV37kxOVDM9Jyl/zzllt\r\n2BMytXMG0FKTzuwuCqyKDWXrmT1xFmr49N5NjWCB5krHD4qiXZlioiSZG8B/\r\n4b3jZyooi2lNnlG7MwKIK8sOztu4nw5Ej5k=\r\n=/Mwx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"c79e0cd5a6b02bbec607c31e7a93d81bc9560ef8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.14-dev.c79e0cd5a_1665861681282_0.7436054697958585","host":"s3://npm-registry-packages"}},"1.52.14-dev.c194c8d10":{"name":"@dts-stn/service-canada-design-system","version":"1.52.14-dev.c194c8d10","_id":"@dts-stn/service-canada-design-system@1.52.14-dev.c194c8d10","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"e14c44503366b629dd983589dd8fc00a79a134fe","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.14-dev.c194c8d10.tgz","fileCount":5,"integrity":"sha512-hqZw0E2TtVDgtlvKA1nPuK2C/El3P3uqzg0T+b6VwWW9uhqXfQFBIsnpBAnOcBecTdeG3t9T0+3Zt+aZv+FKag==","signatures":[{"sig":"MEQCIA040qjxnvkKAI1ToFxfC1KJNRviOy88mpGngshkwX5dAiB+AUrXuPOV+HT6rY4L+syA9PVBdPGlNqOyu/7YFl5xYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSw8dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3jg//R0kQIyXUTxlbA1lbi3tfMCowXMLSGqq0w9LZCHbbLI3jX6Az\r\nVhhVvT53J7+cVelIjZK3hw1py/RjObxq7f70meefis+Pqd9gAeFtP2DbKjl1\r\npa7mtvZT+3slAVyr94oR3wz/Wf3tjL2PPTwrkqsPgahQKeSUoT4nXdXXhDDJ\r\nDTNadLRDdO5r/WP5cz2IWABZ8gxtYSHXmbuaw7QAVYCGDrfJZquLxzbkQRSo\r\nBdEp5GnnSvJP86J0iMTs74slTvWCNd2vLw3xxzfb9d44clocBSPqO/f+AV1K\r\nT2Rdt7Vl8+laImtzEU3wWVTujZk7mtsemv8J+uoT6bu7022vthHenFumPX81\r\nBulTgH6SHz/pDKUnpYdEmy4DYoT/kfdtt3TLyzShkWOCcosN7nXJ8cFHZNEX\r\nCl783fNcRLO2PIDd9a/Hlmcs70BKU2zjZLsqC70j6vwmGzzWS1mUgFbHe771\r\nwWca2Vylq2duTgEvjd10JzI8upQUhRtMNcjgq/ZO2kXfLy268eEceMKotCPO\r\n2h83deh2KeMubcsuQJc0GKDtgKS0AQPf6Lv+qabgF5zDUxlwierontnHO5AI\r\nDbk/4MBYni8ze1kDbPuLCMXaFFmC1G2jCUA1NRsLceo9oJNMUEliAbch7tHq\r\nUxmjgyMt2FoMIHqr8TUfG4A5O7XQ3LgkPKs=\r\n=o6+O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"c194c8d101f1f9cd13699b0ebdc2eedce0e5f78f","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.14-dev.c194c8d10_1665863453407_0.1307849002517536","host":"s3://npm-registry-packages"}},"1.52.16-dev.166919175":{"name":"@dts-stn/service-canada-design-system","version":"1.52.16-dev.166919175","_id":"@dts-stn/service-canada-design-system@1.52.16-dev.166919175","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"081c31d2731f3227f703fffe72779b83dea99afd","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.16-dev.166919175.tgz","fileCount":5,"integrity":"sha512-tHOk+BxuCpqcb3VdB+81sw84jFu820uMzcz6NwSvHFrlh21kQBCQuETRjfuoLx+h5Kr4JGLuyYXvR24ismZ44Q==","signatures":[{"sig":"MEUCIQD8Bk6hPvPU0vWjFkaap8ih4E+M+hBnaV+hNF8CdCaUTAIgHHA72+USNvfGGq1gVmKcsQxCPYIUCGiHUyE/ZqQXtgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSxuYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJbQ//Sl8IX/oiJREgZZiOQj4jemGf0tdjj+kTWmxG0sKKL4PX+ABn\r\nXFKPHPZT+tJLxDmGFxItgbThS+PDkn02hhKcp/TZB+dtfSpLr2dx9Jr/c+Qg\r\nEfJQ4xuvofbGhUmDmzHTDDHRkHBRpDuGFlDk9hxCHsYBMvfSUywfPey7fTzE\r\nxRBJ39IpXI9z1vxNT4l/ZNx28YOxBWI4XD1tqGQhckaO4x8UFORbwAKCXLYa\r\nbWOsCym5GRI7EfTM5V0TZTC+xPkwRVX8t+MBAmKj2ZCSrE4Q1Dk8lXSlFMzw\r\nQQuMJq4Yxrp2+jRhgmy+AWaFgUg4lGxhEBNiMG9adxUBpfb1fUBHtZ7toJ2A\r\nHCEFD0Rot7gTFtLtRv4O8ErHug9TyTVXwE/PgYAvEmtNEhHiKFMp43JNFAn9\r\n0rHirbVYGpfguNKr446vvlAF0F0lpuPZajiczeZCytk8iRjAJiK6TqwDORA+\r\ngF/TsWoaJ3EvZZxOTUu/VnUafF/tcvfUihdXu4Ooyr5UiNbG+yu2RZzuTBnQ\r\nr780swkUkP+yE76x0QfTbb2aF9B7bz5vednBXoWaOFR6ubF3W724d8nLvmAK\r\nynFau6OHHyI2bZ8VyDx/uVdcU9OKVOlJe2ZEc1hbK5oRfvOQCkDpMceGgLni\r\nUXcV3n9sDVTFYJrfKiQUr69p0Qs5t4kGpV4=\r\n=M/Ba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"16691917579b0d60cdd51a9292f110e23b6556ff","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.16-dev.166919175_1665866648017_0.11790825930415916","host":"s3://npm-registry-packages"}},"1.52.16-dev.304bce456":{"name":"@dts-stn/service-canada-design-system","version":"1.52.16-dev.304bce456","_id":"@dts-stn/service-canada-design-system@1.52.16-dev.304bce456","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"382e23ee046ca11b9a9cc960bf05249bdc316b5a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.16-dev.304bce456.tgz","fileCount":5,"integrity":"sha512-hW69JA3j7en8Bb/ZVhGIbwiyqdyHQ3tROqPcyq32dNwKmHzr+eOLuXIWWSYuOA1IPQjc1BKbrP5+0sP15cms6w==","signatures":[{"sig":"MEUCIQDCTxvoH0Lk7XUloMjI5qSLZS1P3oWBoVQcVUGyVcV7xwIgeHEvQaS9617eWdT3KhOwvGcoWQb0/X3qYPz1+adVJd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSxx7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGmA/+LjXiNpo6TFacTiKXbIZiBP/HTSnFZ0BSUWwU8mnd9r4R0qzQ\r\nXGt/9VS12PHqQJnkH8M7fi2IEttnTa/aH8sVn+42rjXa7utnWyB4rFbKTQsB\r\noMu/28JUhKjz8hFne0T1ovCWwkJ6MUC951wh2nm3wl0Cw9QxZekJ+JMNhQZ+\r\niXcU1Z3PtWTFM+TSZD/A+Nw9rQYz9Y14eislKTAEXb3mw4d7luCphUuwgWCd\r\nhOyln6Gfer9u1qrNflpq9shHBa+uT0j7ZfgaLds8XmrUmz+Tw2QQ7PSFlEgl\r\ni6S26OFn9mJqXTSnlO9qFOHqK07X4Wtfqdhq9mSNtsuMfJbSPBUCYL8sPkqz\r\nmjxoBzemINCS7bVIBFIcImGO5qkusZYxjwhN8eS8dYtDVSm8DElCEtT1+SNj\r\nFTXgNjebAoCJcNzwf0Kzq6hWzdNkUbvowjqJUM+fTR/I5y0GYrZGZg6fgQ5v\r\nOvC76FYuLqtY584ODahqo6nWo1+exxeOtQ/7X46xHvSFxui7SVMRCva/MnCj\r\nGDi3gTBPtZG99Tf3jr2bsbdQUUvwmyUUY0TDw6WMDQVDVAH4U9RFARf745K/\r\n3ityIQwexrsbvOq+cu9r7bjuPbPOPOC713wbXVmaxn8EF6sjkG2BES4aQdD2\r\n6q/xZHm+5SRpOLZWvNxZxpD2bw68wvF+Ouw=\r\n=l1OC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"304bce456f19fee29b46132bd846fad6e96fefc5","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.16-dev.304bce456_1665866875453_0.1747803812984836","host":"s3://npm-registry-packages"}},"1.52.16-dev.f8a5a4875":{"name":"@dts-stn/service-canada-design-system","version":"1.52.16-dev.f8a5a4875","_id":"@dts-stn/service-canada-design-system@1.52.16-dev.f8a5a4875","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"582144792e8ba2128311b06d69a996b9eebaed28","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.16-dev.f8a5a4875.tgz","fileCount":5,"integrity":"sha512-11RQDKGaElcFqxQH/SoBreWlNsVSFBcTKvTtiqs1qloT6BYGv/ci6cGwP032ospz8cKxgW1RWG22lIQ7O3znzw==","signatures":[{"sig":"MEUCIQD7LXrfKUlXiwgSzPTxXKf+iHo6e1XnZKRNUsxb7aM8XgIgfH5Gva0O/e7OjZ9LMrh4q0Jg+GPMQu1pqdqXf8z59Fg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSx25ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvdxAAkb3+1MCjnPLv9BiyXs5vTDdVOOuTOq1HdWqSXV5gKXfRJbTl\r\nLLu3yy9GsBMID6GmwntI7/LNVZNvpTN0xRMu+gnwFhAck+TasvKAx12XZQKw\r\nggYL+KM5TJ/m0+4z/PWM40d9ZNmm8Xix//j12eaZP9YIpGLnVvt3UU+gNREY\r\nmmzegXOYG6KQLJ0m7l69WR5yLPKw3gQYoJxurCgneEXh2qjsNDiI5sgqQfYj\r\n5yCHwbirXsBhnPuu6CFLiaFCJvqd4d4K+U9SH8kUjYblRW+nfBk4OGTzQ+Cy\r\nVm9TJe/IotWvDrVcO6Xizj55ZI5g4b5+vFMCOTN//NGybnIIcY6c/Xk5VIgQ\r\ngizeerPjcxTgnkpG+oZzAaVIQ0YNRkUWcKDRLLb0ykqDfkkq6MIzx4J2yGJM\r\nvxI5BVDvwWP0GtSWO4l5ZYEdKdMXsj+v0VyqwFfUTxnWEIiquoSsYWwvX0Fv\r\nNnDYJl8cGHY+smUebmn4za3I92x85+6ZTzKr8NLrhiHrmZbjSPlWtTnq7Y97\r\nMmaH022N/aeXfmXIjfQNWvZu+CWE6C5dFKDY5eCVGeQNYpQyo6Aevs8SxjPf\r\n/1zmIPWCo37JKCaNHLd5uTxjiyILBdHbQsSHx9/NyPaVdxAslJ6udLeAJlgN\r\nVEhmpKVGg4x9BLr0BgvCHlywzyILM45nHd8=\r\n=ks3T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"f8a5a4875ac5d6fa877c1de9c49f6b46474a353f","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.16-dev.f8a5a4875_1665867193769_0.005103387112876279","host":"s3://npm-registry-packages"}},"1.52.16-dev.8e5db8c8a":{"name":"@dts-stn/service-canada-design-system","version":"1.52.16-dev.8e5db8c8a","_id":"@dts-stn/service-canada-design-system@1.52.16-dev.8e5db8c8a","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8afe58c5a5573e71f1ecc90274841ea69e3728f4","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.16-dev.8e5db8c8a.tgz","fileCount":5,"integrity":"sha512-Ib3uNSqoJXtzCWbYF2xsHLcFlJB2eBLq2q/6s7sUlbv5V7YzNZ7+whIHkCmE/2M5UeP5dYJaAokzlPuPbYhpVg==","signatures":[{"sig":"MEUCIEv5byedgPKdzDxjpp25Tr2QbhRVZt/b54SZT2q/7EIMAiEAyKAjSie0CalK5ooReQ9CrKuCGZptsSMoLlnSqDNZoHY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSx7sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKWQ/9HDAmYZvX9s0aFm2Pc98/Z2mKDUueI1rdtD/MOBYgjr5Qsg7H\r\nKgRA7TSjNp/e8Qji9qcpfUykVHXXgYw16sndAQASgXXLDXFaKp1qcmzLWwsr\r\n0m70fsQz2Pd8eihAYHtlRy6NgOMBdjkbFOrvzRLuAf/BEOrm8N2dqQ9fj94l\r\nWYBJ07MW6xLaXKCk1mMtYXzKDPOthM9fFgXJc2J9mrtYqI010waboTOF9vTo\r\no7wONM4MCpqGbNGWh71vCvKKSb9KXDyVeMLWvttziug29e/hF2AneWwj8qvi\r\ninsZZDDTkRAKwnbL2qcxJUCp9qHLCkrwgTgxiirKjSkzbGMY6q3DprZr7Y92\r\nCrMWjU+A95oIETloEuuvFULhtaOdBFspyyI4SDB241LOKngU5udoM9CSqyOM\r\nFjAkWaCtjfTywiSUZSiTgCXMLTz4RUh04Gv97EdEd7nklQ0m+rx44MEb+MG5\r\nloX8h1w1gVPo4usUt29dVTrnfIZho8j+Pvr2tb97pkLdkQFlmoKembEtaKSZ\r\nSU3IoyLFAcL63l2rIMUB5+HvS9SOQWOoo6DEFVa3ZL4ICK5lUtOfJUNrYfSd\r\nha4Xjnfw62iYg91OB5/xk2Lk+VD0Sp62zOS2HNtE7Y99GED9EitKrWZsrzg2\r\nNndql3UYvcDBc+k91+y14nH+mMQqUun7ukY=\r\n=95u/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"8e5db8c8aaadeb1cc3b1b1d32a1e0abea30d3852","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.16-dev.8e5db8c8a_1665867499759_0.41399859776491477","host":"s3://npm-registry-packages"}},"1.52.17-dev.9494737c0":{"name":"@dts-stn/service-canada-design-system","version":"1.52.17-dev.9494737c0","_id":"@dts-stn/service-canada-design-system@1.52.17-dev.9494737c0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"e03db85c4f0d496d815effa54cc3b7a72f62f18a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.17-dev.9494737c0.tgz","fileCount":5,"integrity":"sha512-k66sVyIYRWwCMIwh2mJGce68XGIBoiT9Eu6nbvW7ho5WxnFFLy+8UwePYTv89m+D4mLmc4/0FF59uxpbDt4/nA==","signatures":[{"sig":"MEUCIQDxvtQAgJjVQgL1bxRRiUyXwu0bDFmgGV1hAouzJ0H3VAIgLxoKLudZWntdBnXkehvOT4Q3FnTbCcFx9Rj0T8aV3Ys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSx+wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2nw//ZCxVFaXg0JkcTauX2pSaWxLVkTSJvud6yW9hNSLdfLJ4/02c\r\nzvEkq+MzUOAyuceyLTDE9YQApmWJ4aswPUrwl51Tn3RrqDCTmA5g2BxUzVXa\r\n9NEFSJPFe81CiBXbsDdsxDjGLgTm6Q+1ng1BDfprcqyMz4+TnwlmTInifFUq\r\n4IIolgU7stV4qmH28fedzf1LOToHwyg/w3kRE1krZwpQZw9G+UVkp22CbDBu\r\nhowaSM837AtiAWSqylWS+QcBEZVoBkb2FK2KwUBD6KfBvsDftXDzi9F/tEtT\r\ndgA+g/xSiaAL7sdGB+LXDpJgD3FIMeqg+CCM2q8FC1pwiMT8wQzgv0cJURGi\r\nFwpMuRX8JsPBUt+Z90kaFBun4TvJJ0p0nwO3jOypEIjZw7arjLn4iGDtIOLB\r\n3Zb8rQ09zT8bgUy5uzaF/2r7DBLHct0Isf44p5Y5ja/QDAaU/ZcNKzojuPlS\r\nXTRfE3SLq85Mvyi4WHNG52yhJ9FOl8NferpLzmkBfwy/SMf5uhJ2InqTjJ72\r\n/gcDENpGlMbHg8/aEYmROGdr57Vwv121NJCGj0hj+zekEHENKwKMYxtY2tgl\r\nYxsx61xqcfTGa82WXztWjLsp7alt33auBFCxeGM/4xNYV0/pcJjoN3IIGLNB\r\nAykuoaFYbZNG+iDu8Icu6cdM1VtSCRWu81E=\r\n=eFyh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"9494737c09277207a4e192d2188c20905a39ecb8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.17-dev.9494737c0_1665867696039_0.5112109887040663","host":"s3://npm-registry-packages"}},"1.52.17-dev.4d3bab2a0":{"name":"@dts-stn/service-canada-design-system","version":"1.52.17-dev.4d3bab2a0","_id":"@dts-stn/service-canada-design-system@1.52.17-dev.4d3bab2a0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2e7146b99740b318d889f617dc2ea607894b31b6","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.17-dev.4d3bab2a0.tgz","fileCount":5,"integrity":"sha512-JcNKaTv6PPGP9MlzrGI4zABjAqTzfUhsjPyvxtVV7pTuklDKE2gUpzxLXfzLbvlS0Cf3p1yf76P0p5an5WTnqg==","signatures":[{"sig":"MEUCIArq/WzAP9zQJjIYEVvVflj2U4MuS3ephbaQDoMMk9znAiEAzSV0p6M0iH3XTjXPW57OWiJErHsyXTRC2f5ilt1bYno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSyBrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0rA//TpQI2uRr0DQaTYRSConDbCGVqsK9O5KJ9MormiZaefCwmKn+\r\nOh9jUHTgn2bsgcpdIPxsq/OGOpCvnpLKU5uhyKp8DErmvyiWEQgcSlj0qpkJ\r\nHdPjOg49C0+J2fcjv56otBdom5C1mQvdZYDcBaVDgzV2yxmNQrf0xwdTp6GN\r\nC+tzHanY4HhOoNr51Y0xEc1iZzV4tpoqiIZU0AUsUNsxEIjrY0E2nG7z260d\r\n7BZI7vJlGtp7GseS4GB/OFW/H4MMumZXSMAtRJtn5wEY4Ok5QJ7y3y3YxOy1\r\nULxIx64m0QiI4T1108npJDlREkxFp1oR0SC8q4LNgWEt+zY/7GqdlIh15MJQ\r\nGElvewcRydoHtAPaqw626puxGwRBd00FQ6OvkyjTjSFJEw7TDdh2T49hbvLP\r\ne/XqRPH/k5dU0AmcbUFeBdiBfLodkUsommnC4J8hveQ/ldaipM4kxeK5aYkv\r\nAyL3NPGymGKss3CAwoa+hXUhLK2f2z3io6nFNKM7NHQgdsqLLE8x5wDDPssH\r\nMFAJeCBKddWiImjhMi0k0ZR/8dHz3UpeD7NGD8FRUX8bogqXPtmq4CFNbEaK\r\npKcjBpKekoyxtXQRUp+Y6jCnXKLB4/Cymk+zCUIC5ELmRcFRTy/QJc6MDnBd\r\nFzEzw4GaahXQKZ/UXICDV3Z8VzDCEAN8rcI=\r\n=VFwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"4d3bab2a07595e9440c72f8577f32ec8dd1be806","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.17-dev.4d3bab2a0_1665867882723_0.9498128641662751","host":"s3://npm-registry-packages"}},"1.52.17-dev.25a64a9a8":{"name":"@dts-stn/service-canada-design-system","version":"1.52.17-dev.25a64a9a8","_id":"@dts-stn/service-canada-design-system@1.52.17-dev.25a64a9a8","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7711b1b79c7ea78343468100b077536f1ca8e285","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.17-dev.25a64a9a8.tgz","fileCount":5,"integrity":"sha512-Nty36hYnpCOHBNtKwk8FlaCpaWAJOiNFCOiqgDHx5iL0/CUgv5CSBgjvxG9NqXk+LUR0xcYEL8pvR8dLdfO3XQ==","signatures":[{"sig":"MEUCIFjmFv7Pu//vn272fPR1jtYIEQzD5EtZcXq/YiBMaBRxAiEAnJzyfZsX4+8jWb+IsYzDS77VD5DRDyc88sAns5CGMDk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSyJrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo62g/9H/92i8IOle7FYGxXtAs0fyV4kQdq9vOT0HSqCHpB1jNF/9K5\r\nYz0wtPGvnkwxNw6apwgpENEljd2B7k7Ktu5ZjWsU/XpRL/ArauJYHFVLn52t\r\nivLF/jdPsFnaosksASgNVA5kiIlpNny+bk0O4GvJUeovdb7Z5hYYiuZAsr8b\r\nO/7wISw091rHscUtsrN0kR5Anw7XJL3ewpnP6LXk2ygAOtTMLuM3Vhbj88z4\r\n8n0hwC58axmMfznAPaXZATgKo9J9Gjx2fmZi88mj9luSAKT++Yuw4lUvuOCp\r\n8ztgonTQF/o0cewfzJskc1xrfi+dS95ks4RAttDRv75rfvSAkExPbXG0l3YU\r\nEQIqLbc8WbLjkM/nYq3JFR/z39rgGBYrt3h6P1CkQYCs6pz+ZEVoUgVCBdlY\r\n2J4IsXHmZX18Cw8ZPzmyYD3dQe+8Kw6rcf5BWUe6f6YSfcB1Havhzpf8EDxj\r\nT38mq845vPPjU38kQaTvINpoSMjh2l53USbrfvNMf9d7+jpn0wmZcyAddBvk\r\nF+qN8PUPLJqiPRuEvebFMbS7xMhFuy/SFoFN8az40UaA2USHefK7BvoBai63\r\n2OFdmorB4sXV3EQ/BQMGS3s5EaLWvXyat26k7iqzLDXJh7IDqqCJUPowhzYH\r\nI824+k90oIQFo1owRkKB3OFRLg/6EnFV8RM=\r\n=JBF2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"25a64a9a84e1d69666620693a55ffdd9a0f57eeb","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.17-dev.25a64a9a8_1665868395176_0.24122328231662826","host":"s3://npm-registry-packages"}},"1.52.18-dev.39915b633":{"name":"@dts-stn/service-canada-design-system","version":"1.52.18-dev.39915b633","_id":"@dts-stn/service-canada-design-system@1.52.18-dev.39915b633","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"973d0a14025c59c6d042b5c32cefac991eb9a6ec","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.18-dev.39915b633.tgz","fileCount":5,"integrity":"sha512-3wrjGL6cjP8AvzmnL832mG3btIznVMDzO6DhXHjsv6u3kyicFVMvCYADEqRd5wnwrg0wLhIiedO9KvR5FcyM9w==","signatures":[{"sig":"MEUCIQCUPXGZRtBpwocK/kREMXiuVRLstmJcxx71VWunIq03wwIgIWRLtdusPUWux2u6mbrTaaScURUJlGbgJBqs/rvN/QI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSyLGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPvg/5AA0rrE3bnvNMFGh+8pCH3uAJ1dkAll1K/iklU3xscBUP93sp\r\n+W98vJVFvCpOSELPv8H++R/gUQrGMiCwyn2PInzN1b+Amav32UrAnDKoCtQL\r\nzy1zHwHKdTGnHc2TDZ83Vxu/glOV8KLdc9rtg24sbZtFO6C0Z8FEBpsfWhjY\r\nP7+sSJ5KW4VETUh58vBK9pEa0/1Q4SRSeCd2zTPHJFZZ+Pfvo/66fRN2bef3\r\n6b9IiKOX5jEfXt6s7TNzV9w9wr0pNKCNRt64J4m6oDdHsGcrx07g14Yoa1Vo\r\n6N4OT2Aochx2oqaZs6dg/SDWX+DgJR401n9DFRLs/0iiesDYK9nFa0lSk3HL\r\nqhdOxvIDaVm6fU8Vwum79NvM8FysGgWuqTwslbvTngbvE5fbr6xxpM4p5VCL\r\nzk9VJ5ZizQipwPs7NTGj5/8kd9aILzcbwvggEQDC8z4IyFqY4frm1eQZvYhH\r\nSBiDPIznXFWkXLdqCfi3sxq5uiVK9xaJVkVSyMqVqQ91yIX4LF3pC10HuRBJ\r\n4EeT8eACBN6ezX6yZ6G8YCqSiO8NH1w1WR1ay6DxZjnHssVSvrnCjFihS8/5\r\ne5Kba9cHGGF8ejBCocO4j/hzTSDM+EJvr2JmQTgYSC+At5xb3nxXGKTvKnJS\r\ngfZd3DPY//XZPYCzbTTcMTTFvR/31e/bAeI=\r\n=zqZR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"39915b6331e07461484446ccba280c1a10f383f7","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.18-dev.39915b633_1665868485980_0.15398804103268415","host":"s3://npm-registry-packages"}},"1.52.18-dev.0f6085309":{"name":"@dts-stn/service-canada-design-system","version":"1.52.18-dev.0f6085309","_id":"@dts-stn/service-canada-design-system@1.52.18-dev.0f6085309","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d6832b90fad6880bf7a2606c331f5bdc0eb19f70","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.18-dev.0f6085309.tgz","fileCount":5,"integrity":"sha512-OAOWulrfZLHDOI9cDWPFljsA1scXtI4P2r28v2kt43NPBfXqixwvEulhu6ObfaANuR+H1xjDFI8W74IQvm9r0A==","signatures":[{"sig":"MEUCIBx+2OKZJ8ApdLw6bLM1qXFSBjZebVHWEg5pYLVzwqDkAiEAt7Yqt2AUNXAsTwTvd+eiHstv+I8WT0GrDYqXUkQK8vA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSyN6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8iRAAjmurahzzSEjbPaVzNz7WKOEwCH0szgdh77BAGFsv8z6bS4ni\r\ngEtH3EIGuuQKzYr5ZnObBfPcxdoLYbY4iMVO6vNNjRpaBG97oPib7wwYPJEw\r\nq/IBW2a17kJpp351MfW4GjCOBdyAx5Grbz/0xa4K4UsJPbK9yef4aasDt+0K\r\nbvYets0qVoUTk0AHuzhOu7+t8j9vT9QI4kD7DZAdS6paMPzFmVTyO56cN68p\r\nB9BaL0cl7QVkn43tRwSDOwW2+rJDZKm49bpus24it9+8mdFx0N+1mBMmPGir\r\nmyg8bHVgVpz46GLw5KrfzIIRU2ipV7fBcawZlyQFjWX/X77z5Wq4b4QlS4c5\r\nXhF6o7LYrPXtuVnk8OQV+zbwNCYXnhK4iqmUV2xtjzQm9Ak083U6NkBr9cMZ\r\nOo+kPZMNxZyPbH4b0OQ0rE/zLOBrmrRZFkSes1ANQTtXov+Ei28i3UNXi6ua\r\nnVX9R5H7odRvyrJJqXmcVoFa0Fs8/aytJjPx0/VHGfUyPODrhwXhgyIrYab6\r\nK3wu/X6mGdF/dIPARvohFfoMS0PPaecVT5TqFU8kafT8P8nTDSbWLTAggpSf\r\nrI9B1Pqr9z7/7+v4rZuK9+BiQKeYjrRVzEqAWy/0Hp0qHWfXKeNvvjj22/+o\r\ninDX9eaFt15E8oTuA4iMm89fGEdRzQz8MiQ=\r\n=pKX+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"0f6085309297ba3f71037e94cc73d71a63ec45aa","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.18-dev.0f6085309_1665868665883_0.7780986325134289","host":"s3://npm-registry-packages"}},"1.52.15":{"name":"@dts-stn/service-canada-design-system","version":"1.52.15","_id":"@dts-stn/service-canada-design-system@1.52.15","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"bcdad23c0fd868797e732ccaaab440b7ebb2c190","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.15.tgz","fileCount":5,"integrity":"sha512-IRIbQIFcVchw1Am30GGS9s+MEMzVys/bnPMWIR95grj4AsnaUqL8acSKMamEZ1BmUZ4K38tRMbhYyc7pG4waQg==","signatures":[{"sig":"MEYCIQCnzFtMHd+Z8dalTQnxgGBiE+U5eVF31GgM9bDvUAwBjQIhAMY7V80D//6s+iLxPaHqgsvOIBPQ1XeY8oBz6/fcPOac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSyaJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqPg/+O0Tb0TbhEVTX+87MYI29cKfTj7vDCsA8FgJ+5pBLVn05e2Vw\r\nCkfVpQi+jlzvy0oyMfu+5M3T6SH6ofPJU0u7qGncuo+Alu7ajQeTn+bl0/Mv\r\nFMYdkreTVR8RwkkjtBMv5UX/OgCRRb77Pe7fBspiISo/Z/qB2RtjWpEED/rl\r\nFsHeJbdZUy9UkiCBiTGKCr632Imor9AZVtBYdncLnLiaOA9ATT1254WnkDEX\r\nVQvSvU6CTR5aa/WvDgsrXWtQyyNEHKLFlJ0Fx4PEBX7l5BBIvtQsd2vQz3DE\r\n3Y7Udkt//HTjKJlLXvu55m1iG9pKvEuz/c2+pxYvvwd7SEOKvVpLps7df0e2\r\nPhXij4xfUHiirhFupd330iOaelxPL+ega3YAu4ClQIZGKQt2h45Xc35A1I5m\r\nFPFeGbFyEwTHiOtFsRc0QaFFjZzyUT58h6KgQf7QVczsOljGM5hID7sCMDK0\r\nuTmWdc1HfZx7hxOdUC8o+xmi1D+Y70wgOzosA/HlOy8++XfKeX989Sx0bTX/\r\nYm08CMOPvkedPF9l24s81Ymv1Zvd2Uf0BiAYiH5Qe8MIzlsXbAeXK/Ix41DP\r\nCF7ugNNTTUC6npHgmAfMKasOQCaHPiIIdGfzejijg9Mw8chxM0+w9xoMQ+Ha\r\noMA08HHB5eaLTQovHroC9GidpGjcr1UPxtE=\r\n=bOh3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"3db3de1863dc4d46ac33481b31448ad5eaaa8c25","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.15_1665869449260_0.817620446669916","host":"s3://npm-registry-packages"}},"1.52.1-5.beta":{"name":"@dts-stn/service-canada-design-system","version":"1.52.1-5.beta","_id":"@dts-stn/service-canada-design-system@1.52.1-5.beta","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"f9a25c9257173ed805034766679fd19995b6d9b1","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.1-5.beta.tgz","fileCount":5,"integrity":"sha512-phD0MkzYSnBMLd1EtULlsJ4yGTdaMz3yiJi49zrabDWHLYM7V4k1mtQ8mBrZTRmu6aG3Wz1sSdLUT7ODyCXgdA==","signatures":[{"sig":"MEQCIC07BDucudnfPZl1EfgFKflloClwtRtu5lB+8cNmT+5vAiACLZ+4LBX5W6l6q5bdWN/RtO0vQNj/opXvP9JRStebyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSysMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiFg/+NwN0EZd+EDT52Ed3RPN6oN7FgD91+aaXHAJyRpilmGaJmbII\r\nobM87rga7e59KitCqpPrkv4Xi+SBScZUXxF+ptVIZDHe5yRRcxTzVlzpSEzS\r\n78dDjhIcPZPCBiCdonx23s68TCUrF4aIOe8S35VeGZ2J38bUMsBmgLurzeX2\r\nxi6N3Kq6Y+K6ZGAURY2hSH8gwKdJIAqGRDKWO1MIOOce/5T2ZT8555SXa2KW\r\nayEYxYod/ow2kiVMHcURsF3atenKeERZhHIIyIDZASwYWs6SXU738GVxh559\r\nMAJ5T8MAckScw2ofu+EhCEyo5LpKJnbbLqqysK12HBzeC75Wp3fc5DL2Vxe1\r\nXBWInyZdmvLomppwPQJLLxgw8+4CaKg2Ob9SjzE0AzMTkmJAY/FsHwXBlzwo\r\nFgaxs7PXqQGFxNKte1IZ8tCZt8jQJDAfJJav7LVl40fiFJFvFyeFiS+GzlYR\r\npRu4wZB14eeypiPhz2wjlga0ztylphL8EVae3E7jTC7fXknzZV+RWjeYp4PU\r\nXWyG37OfC//GbuL0AkpyPQMvbXauOA57tDcaYwcf1gcShdd7FrVOITwIOwlD\r\nbzuVtLI2O++RsLb+xhA+k6RaFMcenfOpAcuDJ7QDhfDQ0BXTmgqSSqt8v8mY\r\nuJnWtbbnINLFTxTJdelt4cnK2GANTduu/RM=\r\n=8oHZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"ce7828d0e43e2178732f9421b2ffb873b00e133c","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.1-5.beta_1665870603889_0.979356391646536","host":"s3://npm-registry-packages"}},"1.52.18":{"name":"@dts-stn/service-canada-design-system","version":"1.52.18","_id":"@dts-stn/service-canada-design-system@1.52.18","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"a62d9247e9dcb66991f2acf4cdc59150027fa3a8","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.18.tgz","fileCount":5,"integrity":"sha512-Xi/5DltmndtfTtcOUX/RXKb2deh1k+OuhaBn38/HUtjNNuOmNbqY/NVgtnhjUuMkzH6OtgDgnD00zigvCkG2Cw==","signatures":[{"sig":"MEYCIQCXTlXFouxthsV5uOPts49sw+LY4fh9xuDMQyyL2yXvHwIhAOpuoDbHVdtNsV6GEBlMwEgT048Ij3Hh+c1fVL9fqPiR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSy41ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrtng//YcK0tYVG7A16LOZp2gSoUnBFotlBtsGDqzYzVobLztQaXmCW\r\n5rm7H+5QDYVYKDbwRxHytHBpXh6UxOA0CnXGg1/723QqQy5jfrt9rSFuTNJE\r\nbMO4q9qH+YKRpr3Degc3flDlpJ3LfmomEQ3C8OYwXBN+UajkkrmTeKL35LZ+\r\nKu52HjSim7oBjWEFGkF/+a+UeR7Kshtg7cuWKFWrEIrX2fDa2wsvMMFsj+pH\r\nX2a26uUh7kdT6bKS46YMIsvAl3rFkwhHXJRbUItVGyGfxJBgB1ahmNKAX6GM\r\nN3EeMERnu0ffBnx4G92veYjNwebKaFxaxoNDpBnzCc5fUt42n+aLpIu58Sf7\r\n4o7zhV8po6angjDGl6yZzpYUx5I4ZuHNdYiHabPCLsDogmAMzbQYcVJey2jA\r\nBgu66EPEWFZ8MhHxDPdn7jpSxtpvfU53A0WPVlCDI3Z1YDOjGIa9JztsPK9x\r\nwf7kfgf2g/3b3juMxL1T3WhhmPpkBJ8QcP/G6HCBSlq2aW1CYloTbmuhEAPP\r\nYD+EO83P1fkGCDCdYx1ZcE+1elKKcFMK0ddBgsrnOtIsOqfs8cA0zGqZrGsG\r\ngNNHcc8W14YY1gkkYkKd5pmjE0bWZdSixS0rToMzTOtSQ9bq0o0eITT3ivgH\r\nWNALO6q5mTMXQdrezenwcuoH4bUMmEgAi44=\r\n=0oX1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"c4a13f14c9a02a1c45a4577b1a63253b592e7a4d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.18_1665871413666_0.1736772885867186","host":"s3://npm-registry-packages"}},"1.52.19-dev.493e1d64b":{"name":"@dts-stn/service-canada-design-system","version":"1.52.19-dev.493e1d64b","_id":"@dts-stn/service-canada-design-system@1.52.19-dev.493e1d64b","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"46e3cf8d51acaad84fc1f8b1567caf5a00647635","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.19-dev.493e1d64b.tgz","fileCount":5,"integrity":"sha512-QjnRyD9vKzwj257MVInbBtowzcNXVkTs8NTsKxCVROBBDyh7Rjhv6WcmM9o1YSbblfbps//uVzqzAdw8foSALg==","signatures":[{"sig":"MEUCIEE7xa4iYH5dB02TU+M6921+TR41D0DDavLKos/HlKyzAiEA0wpIpx8V6qFuP/CKJE6SsohIQ2NhH7cuHtCTWEw6taY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSzDpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+6g/7BD0nngJjGh66Ty+JAvatGmzgGO2j7X3dvEuoxixP2PM9qi5R\r\nwKkIQI/0+A3y+GoMbsy36x1fKWLyEEQcnP8w4B1qQd5rxBuRd6J+orq6qaFE\r\nK+xK1iFLZNO++uN2ARNgmSQo7yehG8c41KHYN8tdamUBbFw0PIhILgQDMQIY\r\nlhg7SXfoMQ1j4W73YwjRtEf5BeI9zY51WAxEYRRDv8PLhzdCipYP9gfV9deG\r\nCsI6sI3rwWd24+ebpCRm6R3OmoC8jF+6pmbcHMuEQpHclagaaT9GnIa2FESK\r\nRFEBEFYW5M7dzTeCLEpjHlmJ8ydne17fY6LGV/DKvWv8hnkzL9F/jvNt88Uw\r\noGqviSQF+Ck+AIj6mtUNisr2en+csDEne07aaxJ3TDxLYtNpjKRSmojunCFy\r\nzO3HLvNFb2YH5318AxIN0C8CWCwYfuT4XXZLBr8txUMkdFi75VwrC/AxTibU\r\nkpaQAt8pjjzgtzPwK5CxwY8S/30bxw9KUURfXkH+7Xkc8N3F0jdnCamC4lwA\r\nd6bvUh4uUZE+iDTvRd83+HTBMIlasQcEfNjFMHvBAjbcHj+umOMwJ2ppmLBM\r\nv8qT7q6J0+h13WOGBZXIDI/fLWvDIvN19NrQ4hIutBuGKc8YCsQEukQZikEG\r\nDA29nk6R2FHj3ydDMCWnFpshcGzQ0k4Q728=\r\n=ta2W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"493e1d64bdc5e122035aa57ccfa1f5f0b4a907be","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.19-dev.493e1d64b_1665872105583_0.1550598320454073","host":"s3://npm-registry-packages"}},"1.52.19":{"name":"@dts-stn/service-canada-design-system","version":"1.52.19","_id":"@dts-stn/service-canada-design-system@1.52.19","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"e823d762f7ec9fe384a1d022367f5c0a48b1ed88","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.19.tgz","fileCount":5,"integrity":"sha512-bNA6XE42IeGUEpbJtCZ8eSKqCu2jDq66W/dRTaJM3E04LJDfOICPDX4z144U2ohiFgjXF86ELCYGGyHOyvBPkQ==","signatures":[{"sig":"MEUCIQCUt9/hnje6zivcrnB7PQaEAzD/TRA4qXsJyKmPo0/wKgIgTG+9rLXB1ZDzZEtXQCzKMohj7bQwMTHbPAkm+XazXqE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSzJCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQaxAAh+mGrH4zFkr0jBEo64ekM28z1fQAPJmN7pWzaNfVACLrU4U+\r\nyw5lBhonKpwk98efgFI7VMZBIeHO4zRNjhyqMJFzm3bswPQea9z8URSYTij7\r\nenpKXrwB4LNj+2r8q5qbT4RaS2aKfSK9/OIMXQjXDG8Hfr6mfhkzgNkyArbb\r\nd1moRReQPFaCq846FGCcjTLbAi8ESgvc7cHKHt4voLgexPLQwEU8Pm5scnsZ\r\nTPP/+IR95hJTzI8lEH46l71KDrfcPSJAd6JlaOW5Gn8hSl774AwCVmkGD1EO\r\nwnd0d+a7JopS8e170sGGkoWkEI0g+gvb6LOTtMlWs1wbwAiE6EyFZQqj9roR\r\nSdWaO0JBr2+TqjjrN5SjBP3n6+T0ZOcMYKP40JqR/HntvdlmclJlX+WxAAuF\r\nbE7xTplT1jCvczx3pLodcYp/BxgW6ggrcpEVXmyBrU3j+lrTTq9/dSzGnru6\r\nEKhNRiDnVF/O/zXzCrQzzagbvfDskyqrFpGuI7SiksIYTan8Mlms9OEwn7aQ\r\nf5AQn/ZVO6WUjJZoCmk91KZNKIhuDd8aTY0CHtFwoQVCTQSfuFYuMMHXzs0L\r\nDRzBEvoAdLhA9v6EDNNVFevMKRZjJezJNYTDuLPL9MPCJ9UbhFeUxV6PmDOQ\r\nP2uYJoP7zYq2bWEdgfB3sPU5sfsRlEOLvWM=\r\n=mPPI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"4f6f899b056e772f356f9aceee34b83fd97b2a8a","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.19_1665872450603_0.12846129784027704","host":"s3://npm-registry-packages"}},"1.52.20-dev.ca15b8128":{"name":"@dts-stn/service-canada-design-system","version":"1.52.20-dev.ca15b8128","_id":"@dts-stn/service-canada-design-system@1.52.20-dev.ca15b8128","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"72ce9c0a82c7b7b3e5178dc530a1a784d8b32b05","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.20-dev.ca15b8128.tgz","fileCount":5,"integrity":"sha512-70BU19GEhuxdeie6AWvusN1QHUE4dwlaoAxe1FMd26t6gLJxeCg1HzuwvdlIyiHC5LURX7M+VXpYfcebVM6dQA==","signatures":[{"sig":"MEUCIQCyba+UOC5lRnX4EykQVsD1libyG+mrLvxc5fadeSNjCgIgYa0NvDd0bIDS57Ok63sh4CednKzN07F6GQoLV/4YpPY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500955,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTZoBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrthg/+PLzi8D5RM7CUbUmRGLEMezuKw7fEF2oz0WvpOnFIy2kO6LH7\r\nT9tiXUFrQvPi4B7/maL98MW8tIAQPfXcqwYV3ZnR9D9IPB3xz0VjNLryDCNl\r\nOdzwEHTtGykjZTmAMdvCbgDmPiMSCgVu3c/9PWEe3e1knDF/jySDYBuTivug\r\nvDiys2rAteoowhUz/SOt1bVa0I8HSQqC0Uok73Cz36MTgNoAr0EN6QCVsw8O\r\nRftwcST3CzBNGjp8q7qKpE6wvV3ZWwTNVvISOl9yGm0m+HKJtSqsnwM9pFWA\r\nzw2RcFd+TLeTX1VOHzVi0chI9QQd+1482ZEjt0QdneHoxx3YiDdriF9A8nTk\r\n5zvpwjHQfakCLbtKQQbMgK1RtsXHehSZSOyI/XFEFN7eAyD6R8zuCHute8sX\r\nMXacYDh7YIM6bAeX9zBXHk5rT1Swh8z1M7oR18rR9t3M0UK1OlMX+PPUSNgP\r\ni77BR714UwMYFT+Lvr9JpqoHGxpMIqSs/WW7+HtzF7P7hG582kGW+V/EA3B0\r\nZmIBpomfIHHQeVNBjsHPuAc5fRwFlbK0bFZHv94g3UTxC30lj1E1L3myjDUj\r\n9qe4aMDi7sewpqjsRnBQt6xWi+oakp/xC9kG9hbFXIBBRg6/XuYK0uB4a42G\r\nwlzMJsP8JWXy1zkaSLEW3mW3RI6ZICAZGsA=\r\n=wFVb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html).\n\nThis library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Using this Package in Your Project ๐Ÿค“\n\nThe package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). To use it simply install it as one of your dependencies\n\nThis specifies that any package scoped @dts-stn should come from the github npm registry (where this package is located).\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Important Note** To see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Developing this Package ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n
\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\n
\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Pull Request Procedures\n\n**Branching Strategy:**\n\n| Branch | Description | Associated Github Actions |\n| :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Package on Release

Build and Deploy Storybooks |\n| hotfix | Can be created off of main to allow for immediate fixes to bugs and will not affect current development. Any changes should be pulled back into develop and feature branches | |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Generate Pre-Release

Build and Deploy Storybooks |\n| develop | Culmination of feature branches | Build and Deploy Storybooks |\n| features | Created off of develop to work on new features locally that are intended for the next release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer.

Feature branches should be merged into develop using a PR. Each PR should include an update to the CHANGELOG.md if necessary and have at least one person review it before it can be merged. Check out [these tips](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#code-review-helpful-tips) for giving productive and thoughtful feedback. | Build and Deploy Storybooks on PR |\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\n1. Simulating a client project in another code base:\n\n You can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n ```bash\n $ npm pack\n ```\n\n This will create a dts-stn-service-canada-design-system-0.0.0.tgz file in your project.\n\n Next follow steps 2 - 5 under [Testing a pre-release:](#testing-a-pre-release) to install the tarball file on another chosen application on your local and import individual components just as you would with an npm package.\n\n### Package Release Process\n\nA [pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) is a development build created whenever new components or bug fixes are ready to be tested by other teams before they are released to production as a new version of our npm package. Pre-release assets (a tarball file) that can be used for testing are created every time there is a change to the release branch.\n\nA [release](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413) is created whenever new components or bug fixes are ready to go to production. Releases should be completed by an member from the DECD Design System team. A new version of our npm package is created on every release.\n\n#### **Creating a pre-release:**\n\n1. Update documentation:\n\n - Create a new feature branch and add any changes to unreleased section in CHANGELOG.md\n - Merge feature branch into develop\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md directly to develop

\n\n2. Create a PR from the delevop branch into the release branch.\n\n3. Once the PR is approved and merged, the [Generate Pre-release](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/generate-pre-release.yml) Github Action will be triggered.\n\n4. A release will be created with the tag [\"latest\"](https://github.com/DTS-STN/Service-Canada-Design-System/releases/tag/latest) which will include a .tgz asset.\n\n#### **Testing a pre-release:**\n\nTo test the pre-release you will be downloading a tarball file onto your local machine to mimic an npm package. Once you download the tarball file, you can install it on your local application and import individual components just as you would with an npm package. Follow the steps below to test components using the pre-release:\n\n1. Download the asset onto your local machine (can be anywhere on your local).\n\n2. Go to the root folder of the project/application you want to test the new release on (or the folder with your package.json where you would be downlading our npm package).\n\n3. Run the below command with the correct version number and path to the .tgz asset. This will install the pre-release package that is sitting on your local.\n\n ```bash\n $ npm install ~/dts-stn-service-canada-design-system-0.0.0.tgz\n ```\n\n4. Start testing out the package by adding a component from the package to your repo (insert link to ).\n\n ```js\n import { Component } from \"@dts-stn/service-canada-design-system\";\n ```\n\n5. When testing is completed, to ensure you are no longer using the pre-release version of the package, run the below command in your repo with the [current version of the npm package](https://github.com/DTS-STN/Service-Canada-Design-System/packages/847413). This will uninstall the pre-relase .tgz file and reinstall the npm package back in your local project/application.\n\n ```bash\n $ npm install --save @dts-stn/service-canada-design-system\n ```\n\n**Creating a release:**\n\n1. Update documentation:\n\n - Create a new feature branch\n - Update version number in package.json & package-lock.json\n - Create a dated version entry in CHANGELOG.md and add any changes/fixes/additions\n - Merge feature branch into release\n - Note: If you are repo admin, you can commit any changes to CHANGELOG.md, package.json & package-lock.json directly to release

\n\n2. Create a PR from the release branch into the main branch.\n\n3. Once the PR is approved and merged, the package needs to be manually published to npm using the following commands.\n\n - npm add user\n - npm version minor\n - npm publish --access public\n\n4. Once the package has been published to npm, manually create release notes on github as follows:\n\n - Go to the [releases](https://github.com/DTS-STN/Service-Canada-Design-System/releases) tab on github page\n - Click the \"draft a new release\" button\n - Add a tag (package release number) and make sure the target is set to main branch (make sure the pre-release option is not checked)\n - Auto generate release notes or add them manually\n - Click the \"Publish release\" button\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"ca15b81280b618e95912203e5d53c160737aef11","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.20-dev.ca15b8128_1666030081211_0.954905195685138","host":"s3://npm-registry-packages"}},"1.52.20":{"name":"@dts-stn/service-canada-design-system","version":"1.52.20","_id":"@dts-stn/service-canada-design-system@1.52.20","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"29e130ff48ec147fe81eec6b0406aea97d936df8","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.20.tgz","fileCount":5,"integrity":"sha512-jcZw4MwwFIj8u6girujMYWwdf1ty2iUwLzL2FHsuCFqoTIQQgsvwIo6Wv52MRD62zMQSbLB+WQbmzMnpCPsi3g==","signatures":[{"sig":"MEQCIHqvMrAyYcgA+a6Gud/8zj35djBlxpNE+G6LAK3ulYj9AiAWUjrQ7ereGCMCIWhE4wGtKTZM3Z530zta+lF3yEd+iQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":500460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTZuaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp5BAAjGIeEaLPPbP6kjSvn2r0WjKsWRK6qMzFu3C086/D4eyuDOVD\r\n1b17/RTIWXN14+G11Q24N8RwpVIpvRlKlNcr99goI6yLzW1lXhqJV2swFLRr\r\nApGwDsyaQ72LmiP8CHb+o1Ae+9Hm574C+DrHzP/M8/eliVmP6ZBOvNEHnzc7\r\nOraZ9dPOfBtVd6Vbe6GvbVo8ZrpKU1CmYqz/hcVnZN1t6HfXUSXhv2c5wzya\r\narXjLZFdniW8rNPqgvVokVXhI0lXQL52ElCHUd2exTvE7pQ1vzjozFGKFVpv\r\nPukzLeMFOdKuw30Xhxiv2n1nE6aOacNWEBgNjDRX+9Z0tgoHlMMBQkIKulOQ\r\nVXyk1ExHuJBVl/OJi2wKx39mRfkwwntQ0EWOHx+M6Qo7rkAa4STQUud312/u\r\nC5bCD+s3QKZkrqkmHkdcqiF+a4DgWKMVwndQfaFVz5C+y3BFdsO3Yxnqsnbb\r\n6WDn3TVVEsWh7ZjQHyKG305W1oKvT/HufVCMGxv5atVFcd1lCil9yhwf5PQ8\r\nRwGeJiYMQXCjPRRJQqCqD+HwTwcTR3T6PiOPyZx7D0leRR74QHIh8rH6lc9f\r\nSYZuIqyRyeFL/ZFfIH79Bm0x/a6e665V5PJidKRu+ESkU4q0dUhKHXnYDU+5\r\nPVNDztjFzqcEVDr4uDOhhZHeNwdsPJBYMxE=\r\n=Ut1K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"ce31dc3b6ddcfe9971a0ac15b22ce1d8c22c6d8d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-and-deploy-storybooks.yml","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.20_1666030490631_0.3558708781684885","host":"s3://npm-registry-packages"}},"1.52.22-dev.c4cfcd1f3":{"name":"@dts-stn/service-canada-design-system","version":"1.52.22-dev.c4cfcd1f3","_id":"@dts-stn/service-canada-design-system@1.52.22-dev.c4cfcd1f3","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"838290d6f9168cb2d924242e992ec2cf4eebb45b","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.22-dev.c4cfcd1f3.tgz","fileCount":5,"integrity":"sha512-YpjZRHX5QCeQNywMJ7/n0yx7Loly3LIenblGmYriv35d1iXfgTmDCHr6PwoskHWHl35WWQCPEGan46MXllqZPQ==","signatures":[{"sig":"MEUCIFMYqJYrEG2ZtFZMazXKf2rvjPu/iPUIf57iZCQPXyBDAiEAu1NT6Vuyr7PPTZ7FJ9mv+Q6J/7DF/f0m+MUTpwTDT+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTbVoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQ5Q/8DuLQkSRw3S64EGY81N5AQMPv2dDj2c5gvNgbev8w7dx7ncLL\r\nVmp7LmzrQDtE+khKlbyUafmV2X7LHWTUPwgZKT+bbxZHJY9uZK+jw8iAdq1U\r\n6Lh+5r5DCHF5mcI6/zUrYZFLjonv2qRQ6n+cDXSqvfgr1xltkRecrR4/X4L4\r\nsQ0E/qkGrQnqGLJwObG0XMgJR6zO1cvUFsG9FumxWCW9kT5ML5ZBaTjHYV71\r\nEa7mq3mvmrcVsLE+pVniWrwEghTN5TQngB/z8+aCGo0b14gAwx8efHPiZHvW\r\ngyVNPkQU0PM/7IjcA9ut95axFXkMy4hGyx+Vau3m3JWjO+Jj4Lc0HL4EXwIs\r\n1R8Ni0JhHYGQJ/Nhza67zCpfyW2Vt9TIS/1Ym8n7TQbyTPzhyJ+HMOYWa6uH\r\n0lINtnELXmEP3GHJkolx6k3mDCqD5lxkb/cuodevgZeJgUu/mi3L2lgixbHI\r\nImg1f88Q8XuK8BbxcPmUX7DHXbIRIzdXgo3TJDtOx9nSIJwZDOfQF2cbC6E2\r\ny/gtOiwnlTW5LefTk38D2Sonz8VC1coDj9IZoiZvQFjieqW0S3qEnB9SNI8W\r\n8TjnE87aM4q24Sr/MNofA1HOuNCegQ8Zy4JvSsPO7HEH2vlnmXGYF74+ANUk\r\nrUX4VkK46pT67rKIuM41gG1IC88pH2ewCrg=\r\n=u9cF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybooks; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"c4cfcd1f368274b08aef4608b17d51fad38e507d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shi","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.22-dev.c4cfcd1f3_1666037095981_0.21626384943907073","host":"s3://npm-registry-packages"}},"1.52.22":{"name":"@dts-stn/service-canada-design-system","version":"1.52.22","_id":"@dts-stn/service-canada-design-system@1.52.22","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d2401cd7a103b631f1570baeeaf41be38acb0421","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.22.tgz","fileCount":5,"integrity":"sha512-1+1HeMtiu0gkCDGQ0jQbTvzJw46S5aPqf5nteg1+gdADKP1VTTWYmUJ/RHfFmd/LVaMUDCmvqAA/whoD2KWsqA==","signatures":[{"sig":"MEYCIQDlU3A8rZ+RkIHbTVq72usSrfhv587gvIis31BaJcSYdwIhAK3vmg+Df3teaXk5iGXVkAbBzxDofocu/GoL6hsFEX6k","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTbZPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppbxAAgY9ZnLgtt/FEg9vpv5fuXdG6+XUbT+fRc1iRTuRjqKXCjamm\r\nDWmHprpt4Rc7EshJrYXGsdB7uI37/ix98IQymeNmLg7vxfimLuLj93Uur9we\r\nWkdsIhTdAD87SULfvLuR6aNEkJRq5Sa2tk/FZH0DYNdeCl5p9o26dKdVoKQX\r\n+xEKXgVG6UJma1L6JI0LXX3OYR03ya9A+g3pu81qKSabhPoD+VljQoc92lW7\r\nxCL+xxHD66T3VMipZcS5BS9tfid9IOajm/KaDiAz8xlJ8cm3DwtmOpZFhbtM\r\n4R4P+dQGu50Zg1O99hxkjzQTBM+z1d35wO8n1tXt2tO68VgkwRdWQRDIINq+\r\n3JofBkz/zzRgrIpSiqdZKMw70IJW09fR4M/kirzaXkzKJqjxhGl1tFM5OjQL\r\n6tQOU7JkTLkACIHgL9d34xuHEJwvLGKW/HZEQAcPVo2FQkqdOpRu65kdALDd\r\nk/754i06JAYwmlowySHsCOjgOUyxbxtIgHtP5Aa8QsZhBcHcq1WGaRUvSWRK\r\ni6xuRSgJB8PiS824a0Y9eLjOqTjcwUANnzVoAaa3dklM/bMGtQK1x8+YUmLw\r\noOCvSmbOv0cyS4UeFbYv0M4qGd4Z8d6T/onweYWbj5xNimKfdMIojp4yrIZj\r\n13/TFbLa5TB2JSkzVmw6OqKAvThrs71jVlI=\r\n=2xbu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"b363e22b04c8a875478ccb1aaa94316b8952f4a7","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shi","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.22_1666037327034_0.24057705368027738","host":"s3://npm-registry-packages"}},"1.52.23-dev.0460ab020":{"name":"@dts-stn/service-canada-design-system","version":"1.52.23-dev.0460ab020","_id":"@dts-stn/service-canada-design-system@1.52.23-dev.0460ab020","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"1ec4b4efd735acb6734e926666dcf5b2b5c95d68","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.23-dev.0460ab020.tgz","fileCount":5,"integrity":"sha512-eIe1BvaDheHa4iWTXGNGr43+9bUQSB9Pvt1eCpo3db4WIxBJxxJ9EmH8KD2HpfBbpBdhjBDuvDfzZf65gvIY/A==","signatures":[{"sig":"MEUCIFFGo5vvvfYLXCwYWhQ6jrbjZJYukK1uDRBaeu3b4JpPAiEAisSvuVKS51wQxEZv/Q2F13NAkj8QHGBx/fJ0Iu8iY9k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTrCMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQKA/9F4Z47zJ9wwPgh+/511RiTJGJnDrwY88d5nfrbU9SHBjhjfwl\r\nGAhjUs1WnQhIE5KNdMJTz/Ui8qVpLFXjHU+x0+wHuTJaDxyOOfa0xA21s93+\r\nCzptPELHZC21ebIQlXO23MvYDKxXnRAacTMfGpbgPTSzHXGa3nYbD2bimHkQ\r\nRPXV1sCSeMxKGfPxZ2k1hWwQfWVmXUR2gf2JnHpyz09JPjrq4tsbcmM5iq6g\r\n83fjzni5I394z1a4+AasLP3cbz8gHIHvg1vCLb3Ba8rbvWwCb8lCzU5EewqS\r\nDjwnXMTcUhwECSVwDrD1t79ZLrjVMB/96DOcsoTPkELE0Z+fDbxXvWG0ODzw\r\nFOoWsxIPmdROi1Oazna3w/7Vleum7+e1V0/621QmvKUQt9I22Eo3dajU9Bvb\r\np5rZUVO4H0qOCxd+E2WiyJAk1IZ4Zbl4IhqTPhSVpMQB2DU1Ot+h12+bMfPh\r\nKc5uRkHIbShqAh12DXFfVezRzj+gFbwbdI10XKvolPMyHbjVnu9l0/LZdD5n\r\nBjYKQpVnb/lYSWKI21JiaKRqoosPuDYn0MgqUZUGMpJrA1BwpqdPoNAqkxVi\r\nfsRhQI8VaM0V1FSoOfwk5a/hyrmw608YOM5Xb9EF+3AsN0zX/A0pXlhw1Y5I\r\ndJxIav6vmm+IeW43ndDLFyH5c5ZFtR8xzmU=\r\n=ILxu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybooks; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"0460ab0208101829fbd322dc63bc2a5eb72d4f2f","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shi","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.23-dev.0460ab020_1666101388208_0.5514491691837251","host":"s3://npm-registry-packages"}},"1.52.23-dev.81b07c5e0":{"name":"@dts-stn/service-canada-design-system","version":"1.52.23-dev.81b07c5e0","_id":"@dts-stn/service-canada-design-system@1.52.23-dev.81b07c5e0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d2ba07a4ca3a9a9f608a7396bac1c2c967a7b8e2","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.23-dev.81b07c5e0.tgz","fileCount":5,"integrity":"sha512-zl5a2n8Lqyg7joITWWc6SkOuem6BqMnbz8Uyp0a29Y3FtEC+4Vdn3o/dMYgdp5K6uW/ED5T63jWGv49MpTNg/Q==","signatures":[{"sig":"MEUCIQCcaTJ1DOx8IBgcHlr5MCTfM2N6Ts/1Rajx4+faY0V6LQIgRQB/fvlddQE9ifrxIMK3G7iUmH13odHmFy6BfAAr7ME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTrIHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvyA/+PQ77p8knznqq3ofTasQKTxAjKcGlc5NiJnw7tge0Gs38TIny\r\nOUySeg8ghRl2k4H88cQsVqkRv+r1EAohUAw4atvyDdrdM0E28MmW/iXURpq+\r\nQewvW2VrTsipk7LrywlobGH/AmlXhB7b8rNpbeLhRCtvez3utXlClcqsG67I\r\nb8cyB4boLHCDeGkKOHWA/1iwvlLsl3k4pI+h9mjPqLLXcpP8Sw9VJ6Evot+s\r\nepmbaXKalgd7urk7MbAbSSq8zvugfIjE33GS9E2klNN9tLQ7ivaNN5ReAFth\r\n+/97iKlI6KXkukfSFRo43qWitGXf+u+F8rKQPhOdco5V3rMs6EX//z+YIzUe\r\nMc8a2zrLDTsDHlbB4YcUv5oeiV+BRnT3QSHDGg2cXTBbjZ50qQkCRrpGdS+e\r\nJpcDebF9fMXAAkvjGin0SVKS3kY7YmXP2VFWEeoIAz9orUJ3gTX4l0ENSVYr\r\n1ABoKy6o2MLyckpUv56LE7DXwfrEfRKgpRdQ1iG/g3ir3v8hS/alpY9ysYei\r\nHTA/Od3/YSCdFwetvSbfbDWpoMjdz1/SNAVdSVWb5XPjQmyVgmzZMq2qUKXx\r\ndZ6UgZIPZRHfR3UUD5BC73afYd37AUfxf5Tly2Vnb7vJHrZ13uln1Tm6rb1o\r\n8vyjoqJtBzzb2Ru8sBT8lZcFx/Cp+3M9jD8=\r\n=JpLA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybooks; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"81b07c5e036e6359bd8809bb4a5bddf5beacd190","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shi","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.23-dev.81b07c5e0_1666101767184_0.3891036407354236","host":"s3://npm-registry-packages"}},"1.52.23":{"name":"@dts-stn/service-canada-design-system","version":"1.52.23","_id":"@dts-stn/service-canada-design-system@1.52.23","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"f657ab4e500d7e3e76e9dba1a783bea7b1f7a2f9","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.23.tgz","fileCount":5,"integrity":"sha512-wDh/DJfPKbuCis/yjL/LKnjtxQRfww3ZzWlYRXSUUOkA/FzUz6EsIaBV7cCIqC9jg65tmbK8OucuWEiI0AxGTA==","signatures":[{"sig":"MEUCIE0TLK/UOmLSBtXPpeDa7otDhIyGjVvrDL0RIRVVN6YIAiEAsCiIsXgKbHlwrB5cUv9WW7wif+CrrU6Ir4r+N3JfdNw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494868,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTrSQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqY7w//bcAdT80zrSO/evqlOW9q5eTgugBpTtSwhBWTJyC5YAWUJe71\r\n8VXYUEQW1P2xSzMy6uzP9gg7XijndbVVh0ss41tBW/yccZVojn+zksrCpUy4\r\n6JC9/Oi1N7MGwDthLtVAzpBa4TI1RzALwCZ/JJ4EKF4znv1pXB12RvooIegz\r\ndYRTSiyscO6D5hDKj6VtWIZlKUFKBwhvsQSw47yWHqtnw/UJ2MqI5coxLAdj\r\nEbpB8oDq4GlTGTd42qbfIT7Kk4abYS5eiJqDEgdMkmJyeheFJwWSsHwSbFxP\r\nK+DXaF/BdVh79jc3vQU/qV+MqFNG1YZYl6HWHWceY0NBrSxaCQjJWurxfEum\r\nq39QSWM/iHKVeEswJD5biDLLG7I+zCwNX/l1lFx898jpg6BmK05PQ9mgMql2\r\nr0K9nLPqYl0mmPYWNL4/00vq+S/GDsP/Ztjt3q+OY8em+0ss40xKx7BMhkGi\r\nVoM0bw1+Y06Xm5bpbgYWImweasIJtR3sh8+RBRxx+JVkgO7dMq2o1+QJqzeD\r\nxGd7Cr+bz5xBcy1J2el+jMa9gT0cwYGa/7IROwYPe5SQHJa5N0R4BMjxW3gS\r\nmX83kqWHusE8RlPfhMivZYTQRlM1BKCwbq6phsC1ojBgu8+my/g2eN/6XGNo\r\nZJTbQgaIXBOXTMR14VEuY3GhoISv9iwXqes=\r\n=kOh+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"0f7da576908d5b786ae3f34db412f9bbe01a4f47","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shi","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.23_1666102415858_0.8478951880864771","host":"s3://npm-registry-packages"}},"1.52.24-dev.d59fd7a74":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.d59fd7a74","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.d59fd7a74","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8c854e65309550158cd235f49cc0c6988b07537d","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.d59fd7a74.tgz","fileCount":5,"integrity":"sha512-NCx/YD9pUp7RsL/9xREwLWTSXXOe/CeqZarqNQlthOtX1JAAMtR6wMLS6gK3AL+nifIvha9oU/MzmPviyiMsmA==","signatures":[{"sig":"MEYCIQCL1350d4EZJlOOAMC8zCwGzVWJcKiWquOev2h3gWJE9AIhAPgRVZ5ogAFWhY/AXl3j5o9BtruTPcA9MnF7Pskg6oBq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTshlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrskg//ZgXczZWp4Ce6tDFUo93ZJxtkk/ae9apZDG+/bg+9hpC8t571\r\nOvy5G3ErD7Utk8/jq6vKhws0zApziZ9ShF5UtZuZ8g6BFxomPHyCuNdcfT4F\r\nQYAvq/eccIq2t9MtXuT0BVACu2jiMxrycoSQ+AS+Ve5UjVM3OkUrWy7EEuYI\r\nXhXOf0O+bfppQj28EQLKrwFggqynhZSQLyHc5jTugeUz6jl7fd6JtIXNK4PO\r\n+zhKl1wgDAFtEjtNu6mP9usHTRb0nzqWbzfZe3+1LLDrgM0i7RdW3WC+ht/y\r\nniHDBs3NEpNcZ63a3N3tq+xcVygcztLzaAROzDhfHpFTdAj5ZdLnDqwVSybE\r\neCbURhsclin3LrujlO4/Gg6hn/EVQj7ITCpDoHfkt+yhra9SM/b4cOq90R36\r\n1KH4aD3ZAEvhlNwMYX0fPljXbZj/nqenL7/UCrjNjrMPQgFN0ZeakiGUoo8l\r\nkP29DNvua8PR02wU47kd397otVLtY4shr0XynbEqOTQna5TKNAxrqwvb8Jvp\r\nSoXeLXPfsYroZmt2pmnDlp45VyPncuY+JAs+EKVyTg5f953shR8CwVodNBFB\r\ngx4mXSVlAZb2EDypUDsy8n6uscy/w4bNib4ywvVIg/62urYWw9Jua33o5+K8\r\n7kiw2AfzknFnFkkvO6/tApoCWTuhvOsI7w4=\r\n=kvLQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybooks-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybooks; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"d59fd7a74dff1e1445a5e545cc42d840b38f9f84","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybooks](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shi","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.d59fd7a74_1666107493246_0.18070991789563728","host":"s3://npm-registry-packages"}},"1.52.24-dev.8ec8879df":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.8ec8879df","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.8ec8879df","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2867a2d8371824dcde7c680d0cae77c4457744ad","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.8ec8879df.tgz","fileCount":5,"integrity":"sha512-yAYoazPNLWog81D3ejceHLyQolBg8pCP4sNVQSgAiOIdqLvhqa7UDd+isHU8OOpM2gW+QvZKCm+ykB4PHzQ/AA==","signatures":[{"sig":"MEQCIFChJwwxXc3YFvmA/J7nMVTNsEjkPfcuLQM7qCpP0CxrAiBpMYZPtHgsVSdOKbLgh9Cdwopjpj1S8yKxfXXzzQvcKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTspIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOfA//S6teTRGyJGm2rCiR6pyoZSGKwbiptiPNE0ezpTXLM2EXjL30\r\nVRnEVkRkxkO8NgaYTrYRYjZ+zyq1l5Km8pAbUxF1IUGoqtFsmBX9m8sWQ9Sj\r\nVivMvOe9sxY2H+p/nAhvAtNycLGgIB+yFlOihyaEo47G9pRDbJeTTgZUi+35\r\n+8AKlgNNEib0Esh8BibLjk6yLGj+wU9x4oyoILAuQfjVDfyi3CGxgCnuNiwB\r\n3wCdmcUTSocc6yab+Lwh3YcY0H+1sTem8x4GT5WS5TeR4knlTKWrxj8E9IRN\r\nYQdx1GZUibK7pBw6ObgJ9uuzsf0jcFF2+Nhzf48TGyXEueCH0Lc13Mp5bpUT\r\nexvS7hrZ+Vj7RKsczHjxaqut5TOwHowsct2tECOWwOphQQNt/MROYaZA/E9e\r\njvIGiMFY151RVywZHFe6n7XLhFS0w5D4GZGxnREPSfpS44izpsNhKhh9TDUq\r\nskTq32y9I/bD8H+VQyoVMd7h+pR3Ko9rQgi8vo3f3ElCb+IfKPhSVQB77ve7\r\n5whOpZKQAaKkOHQe6oAp1IwJExTZkIpEaWb+xBM8XcV93LdmE912nzNRpWWI\r\nwnIRkiK3C0DnuT11Nkc5zLaq49O5qk+IH+1e5WqP2ZWnkFUxji+ccIi3vTb9\r\niobq/Lh0VeakzhsMJu/TD6vUWwtbl6EPnN0=\r\n=IAfh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"8ec8879dfc1cc6dda4c2c68247a7683f971ee37d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.8ec8879df_1666107976513_0.6389667458433912","host":"s3://npm-registry-packages"}},"1.52.24-dev.3322c65f6":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.3322c65f6","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.3322c65f6","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"1e6b8c88229dc59b231dd3368ab4a4a77f874bb2","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.3322c65f6.tgz","fileCount":5,"integrity":"sha512-g80H9kCORYJEB2Im+dDrZJDXwpM/94M+Ionv/bw9GLnf3GV57GeaMl712F3t2Ko47yTnOiAWbfoqoFv/OuV76A==","signatures":[{"sig":"MEQCIC4AX9n3nVxjwx3Kq50bumq1n+8g+UxlhTAwjEdE3WyXAiBGDvjoJNGMiQJFmgrOiA+307Xb0ti4NpnWpR7IiA419Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTs5qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGYg//W0KN1n+1EM3MJxR5Ca1niLrosX9L7R0xy3jzopJxVf/+lHht\r\n3xlg1v09KKuzNvbo00y7e6RF70R6RXWcMy9+AqaY4xq6Je02MZHu6QQSoIx5\r\njV/T5uZ1x0fFWfTh2i/uN7SWbxjT5Li4VJOIDXBXFtpfZfx6YYb/tMZQmPf+\r\npK3HcIz6odJK1K3/KX/63RfimLtWHOwK0ivGzt90Odnt/cvCkoxc9nAmqV79\r\nbxJEkd1o6Va32aaS4fGATWcFnHTtjEYKG0Tg+Ol5cDzNIsepZJvusDSMIRSy\r\n1uIDEQZdOCOifbuzHQ+UjbGcjjuqbhMUBuif6qjPqroyJPDzat2lReXYKUoS\r\nsI6DEFfPejEaen6HQps7E6FRcqcjx8Q7N670kh2x8lj27EEtO4cYSm8IJ/nv\r\noDMrhdi2W/4yeBUk+fkZOvDDSerHnVa2IaVlcdszVffiAKG3Qeo9ylD61pNx\r\ni9l03LoqdsQDwQHPwx5CXLJFYeUrnQOEXFD2/UhrL6Ci5PvADTriWlp771sp\r\n67dOtWodoRMr3lU1T4GQJD08MPbe2FYg55Ag5WLWiGiNAoF+sPym4Utdhq9r\r\ntJo67sqWRf73k7nJ9sNZ7Zo13fqwS9XuRRPubN5BXCOs2LNnmRInVXGb5CQx\r\ngz5JMtxvStIN16/ry93keStQHKuSe6rq6vw=\r\n=Siw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"3322c65f68bafc2937c3f968b41a120b77573a9d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.3322c65f6_1666109034410_0.9453898224735264","host":"s3://npm-registry-packages"}},"1.52.24-dev.307d22661":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.307d22661","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.307d22661","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"ff9b1ea071a1bbe2e9eeb837f3868d5a0b87b16e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.307d22661.tgz","fileCount":5,"integrity":"sha512-GTKEFJS7RrWROj0JABpgIReGOgKDxRmOj6igRoM40LJTsYUh2PadtaPAqq/r50Zi062QP5iU0ZOyejCzEiO8Wg==","signatures":[{"sig":"MEQCIDIzxfQvIC6XYt6IcdLVOwjLxP02sS3JbBtWXqu40bSgAiACLjww/SMSF6mUKJYXSJogHiboreX736ad06XkNJb1dA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTs//ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoX7Q//WHgq/j0jSO1prrjT3yZ61NgzgND3buREPk5HYEni++Gvl8FU\r\nwi40Q57F7EWqAVyaYQhJq/sHEKgvy52ZRLGCfO/xEN9NT3hKsXlJMhCjYTF7\r\n3QVgDW1wJuEZF+rVcApOiuQnXg3SJDNtmKD1ALgmzVKllbnKPQTlAOsJMrjU\r\nR4p9sa3ap2vS/6LjoBThVq0Q5/TSvpHeCTI0G4WGEMEAtKNXZGbA1cbWs3/X\r\nZl4Sulqyt4ayQKA6Wvn+km46M+2oAcftG7Xo5ptdCUGSFReSiN9lfg//amDf\r\nxI/9ziEQLnQ+CeIZFeI+KGpWCrcW1SMAH1VRIsKLlgWWmAywPd345zAx7TJ4\r\nSpxlkgzUhLnfoIOFg0upyK3Y1AAlCqimy1VgxMs+vznMj0S0ZQBkh5ATlii+\r\ngt0TsGVQ1+hhk8ElJn2TDFGd3zN+PPsZxro9E1bPdyoUWSnDqy77lfxJyCWY\r\n7VdABaIGQBz6bxDzM8gSkdFc5iINbYCAdZGqY26deANS8p879as2D/xitPCs\r\nSkocxNLKvvBX955uU9v0pEYyZLGIJHn/pn6Sw+2E25kbhoSXYTS+9sKRf148\r\ntELbG40VmLNrtg5fddKi221oftVzeO1nTvpET7ey4v2GPCpq0W6353vneIXc\r\nc11qIl/0sgXa4AQRlkUShz2vcQmaiIvy60A=\r\n=vUfk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"307d22661d2c9683ca80f194caf400055d5c123f","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.307d22661_1666109439119_0.38416836665009346","host":"s3://npm-registry-packages"}},"1.52.24-dev.74c14cd55":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.74c14cd55","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.74c14cd55","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8874de6e29222740b1587c3f78d1c062fde567f8","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.74c14cd55.tgz","fileCount":5,"integrity":"sha512-r+X0CTIdspBHmGLy7OWJcVExySNW5LUcfmouDU2JYTfs9bY6T+zj6X8MwIMH8Jg9WwvKzUbnt+xgElaqvvSj5Q==","signatures":[{"sig":"MEYCIQC0PRxtBOH3gXotFhx6HNU1i8LPfoQ8F7bzj5sMsxCJswIhAPKc9i5/vKC84vZ35tpp/V0BNdXE5om3Bk9IlTaHgEyq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTtKVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqTBAAlkE2Zb7M8sz7GzlGGjltqxcKyPYf621e9K3q4oQOPZe8k3CS\r\nzMuD1wnT7b5UPOMu2mtmtrcoTcsYqg+Uk+AznYY+Z0ovkKTTgHaXdL1epgDt\r\naGGpO0Eoljx+/Qm9KBFyF5yj0bIWcF/9s2NaC9YiipsOzhIwTR9kH+wVd5qr\r\nP9TQ9gMl1M+dmqe+wp80d7VbAPpzzKOnG+d5B/+d7RSqujFGkhZL6FqFRtlc\r\nXk5iXvKUC/V8PHc9VP0+0LY9rTsKLW3us4vBdPTKzhRyDbR5CFFmjrdstpnE\r\n2HQsd27DvuN+ffCq+e8NACXOlDV/cVhULaC4d2s9YoSIyMUE8R8Vce6bZ/Yc\r\neTNKVWGwQnQyD2llpfnDiWctrif3udc+YFHw9zc/oKZUqDoRCJ0pCtG4bbRG\r\nHQh75PImgCaQHlE/HAxM0WUvl2LqhFaLSXDyoUXe5xWiWjNwfgHOwKu0kGmq\r\npcEfv+dvy+7YoDXtlftpDRSa3XUYd+Vp/Wiyjprqqelg7ELcrXV0fr4732Gr\r\nhIqRkumcnknZjbsXevh54nqN4+BCsRZuc7wMi9k84LEo3yS+grSY0CyuZbjW\r\nhKPQcUGgkXW1IpvvsLGZwXTONJL1BHwXRHy8NT7YbOAtLxdKmSS13GhZ9nmy\r\nfsseP16i+ZvItqdQZxBYuiUv9wDaothFCws=\r\n=l+m8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"74c14cd553d56369d36397a62248536108c96330","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.74c14cd55_1666110101064_0.2957002996486866","host":"s3://npm-registry-packages"}},"1.52.24-dev.acdef5911":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.acdef5911","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.acdef5911","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d5bc75644ba76a52479c90a9b250771659d40057","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.acdef5911.tgz","fileCount":5,"integrity":"sha512-Us67n4MJ0ZiZS4ahs8F3kwTyF4vYqobrDwmAOyNFWh/TF7NKZPjYidrSX1dwdgwi242kMIm/kunjAnX3d8OD0Q==","signatures":[{"sig":"MEUCIGQmEaGPXtCUO10Wzkod2x91fiGIIuVwlAwb6RlfC3LKAiEA+YO1BRZ2XRxGbrnvR0Tq9+sxoQSZQPbT+Jlwx5OBz24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTtVfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqpA//Qej/H6hfrqVSsFDPE32zlHrqYuCTDW72eRT1wwsB46GflsRp\r\nnoJsBNYV/0dTer1QehJI07+EhwplgUO9hyOJ97nFcr+gwHRVPsVpUGdqbU30\r\n6GMGxzxdonk6sPenR/lfC1NrGpLAiJ1XzN33ONDatONLHR9leN5BhHhVJgqJ\r\n8NEHX7oQKanj2C2hbUT269SH1MRgTYiJs80aLipdzT+eSbZHh/eW2MZDcFmo\r\nArS2TMnSp6R5kDhFZ3uupOXtFacZmMYrfUu3O7E62OQ23QbbiBudKfBphnfA\r\nXXR2HeSSM660rxtOAMXTJeYmFvZgXn8A7C+UbsEdrCn61i68/8oWTd4U01fq\r\naCSUgLh5ojPJOQ05Ekm0Y7N6uc0YNz6xQBd9QAITOL+2gUF+VLrzY4sOdpPX\r\nTBqQ/wZ4YiIWetgZIwxcULdt7VV0Ys7xvr5HumBgMD3OItHyuMoZfVyYkZBF\r\ncuGmJsIjXtsiifdvLaIacMaD6W1+ejdjqrSzOCOyjy31TPkTn58rT5JH0rXK\r\nRtuXCEuMSpxuc/9i5qjNsQ8f1bPB9Spb8ntqt6uDGzMDwIy0tXDU7cgHvbC+\r\nsdyvdd7Gtfp2xSSAf6gn+XjFnmfAXOwyv2YTzpNHwYU9Zt6cUdxLTCHvkGNV\r\nNuyBDUJ9zzg5vkt1hpi512fDzStt31aUR40=\r\n=15FE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"acdef591195d680cc16b34338104a2f660e320a0","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.acdef5911_1666110815197_0.9553483146396509","host":"s3://npm-registry-packages"}},"1.52.24-dev.3ab225f62":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.3ab225f62","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.3ab225f62","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"e3be6a6efb06d86c7d760721be13dfd8c403b181","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.3ab225f62.tgz","fileCount":5,"integrity":"sha512-PWWakRMgf7B4T25O0rS94ibmbwovBtQEFkYIvvjHqhNxpcLGARyv2PXVLLjDdtCUryXw1eXq7tZ0pmr/bSMzWQ==","signatures":[{"sig":"MEQCIBe5WWS/8OkIKj+4SiyseZ0+ikkWik3LFLfR5ikPsf+KAiBSrkQ057P+tUm5uK/jCS+x/9atw2qeWMb3n9XpjDVZqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTtbHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJQxAAhFpQmbRJ6DuNU31r/BoY+SDMCyEhoBTVK4xHDgrsTWk8Cfme\r\nxvEoWm+0M3SWvmfmdJFjKYA5lgr0buVv0mtPHayUXtpRvMqEeOrx6axQAVl/\r\nib2ewhqrAxG1QmGrRSWqdSiqHx/YSVUC0673KHUoEEQgxKDwfSlC6mqwPSjz\r\nh0ZiYurTL9fHyG8kfPRrm6KONrbBqSVP/KQ7psSX+F7tyvloOadgE7VVTbzH\r\neVK3dadtxWpY94Y/cKdTH/uM40oLKQB8F6qW1QOCQvnj8aK4b75MWIt3ZO0N\r\nYJUfodAKnSOMD7w6Dsau1RqduhTE7X4QeZP3Xj5eJU3T7bAGMsJuwAd6L6xF\r\n86RH0ESh4GQKR6gDYxbELrLLKrmyxFoKjwhMryX5y6+L7gym/w1iKY4UDQdv\r\npKKFxrhm/OMvvfl7021+k3cFd6dsi/9NKQDsvdZ5RdRJTn+ZZ8Ug8bgGy4tx\r\nFRS4630kJt8hwev1ZSXLs67sO1ap7eYGhKv1NUKwTvV0IsoiRpQoqSxirS4Y\r\n48eYG6vxky65R6r+vGgheoubeASYmrNY57F8oXWk838vjUcKmNXt8qT8nwi8\r\nCkrbmC+7E0RY0HcVvlz2dPV0d3hbfJYAOhs3I4kj7nfNOVVc+fm1L1iOpzSQ\r\n4Q5Q7cNKbUmC821dHTqsFi+r80y4dP9hry4=\r\n=mQma\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"3ab225f62525480fc8cbc7dce9f3302dc270f9e4","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.3ab225f62_1666111175242_0.1516855259733656","host":"s3://npm-registry-packages"}},"1.52.24-dev.2c3dae401":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.2c3dae401","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.2c3dae401","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"622d74ce10346e23d6a4e194a24b126c9391eaf6","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.2c3dae401.tgz","fileCount":5,"integrity":"sha512-2vF2WNpkep2Qis4rDnsooeemxLKyWu2XaDZS9zbQe28AarC8GqdcpxwlCVnqwLTLMcgD5nRnlvdZDB2nFmk6bg==","signatures":[{"sig":"MEYCIQCUrdLxFyCLfts8YcQwTBfj92AjO5+qDZA9DYdH+jCdYwIhAIThpjT1R/OColfjI6XRZOff6crK9u/JTkSI2a7TH768","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTtgUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBvxAAiP13GvFKNKoD3tKUu6gxTBKerGwhD+OkDqcCRiQFey3GYCVW\r\nGu90MxuXvtza3QjZODBKjrGJUiPOCphhCPK/oMFeZIliXTmE6HAm1aElEmFp\r\n4ZCKhjr1GV5jQ+0VR1XFYFwVCuXb8u/ua5CUDcLhDA3IUU11HThTFBgv7oju\r\nofJZNl0sgzlUAL0nKwXnpTdCL/cJ7wIIniEqVk0NatWg/Lb92U08SNmh5mOU\r\n4EkQ6VDtSlccICHDIVW9Q59M6/olKsCI0w3s3pBW3R2yuQY9vTYFIrp+K2yO\r\nmIMROBySa2uQOK5vNgCyTldkNbaDfjw5ms667ks8B/0rr+TvKpI5iZSs8e1k\r\nO+N6AF81HcuKQ2aniQNSrvb45m4CGWzwKkI/c44c55FXqjNj4dp6JmeBbkH6\r\nwPnw9oiDYE1Oqm2PJoAWwnRUojXCiNw1trO1Zv1FywaFcYnaw5WwwDSf2MOW\r\n6Blft+uEadOUe8hlwoTYne30VxdnwqH5L1SH99S/zT4PXRxS3lO57J7mupJe\r\ndTQ6kcm8+BcoYdMevfix3dZqxWoEcqXSciwFt9+4GsxgC41tNyzOTdW5OsgE\r\nZd4x/leSY66p2G+G1roEOSA2qaf9bvpvlHA42ugSwF+9qsYtfG4NU1xj+A+u\r\np6+S+MVnnhLfvZSI5vq3/JrGIJ0zDkbK3a0=\r\n=eLOz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"2c3dae40191ae9154e91e2e550cefa0c92bff870","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.2c3dae401_1666111508379_0.41232488004022105","host":"s3://npm-registry-packages"}},"1.52.24-dev.1a2ac519f":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.1a2ac519f","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.1a2ac519f","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"dd458ee29dcec02c43c470c71b04f06184dcb956","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.1a2ac519f.tgz","fileCount":5,"integrity":"sha512-b6Zkme7Ps3BFy5NmToD5s2Pj8W1VFuC0+0GGQ9G9Y2WSX4vzW7LZwyVrTHBx7Cc/Dr1RZtSKkVctyjyd+HebYw==","signatures":[{"sig":"MEUCIQDJdTF5R1Y/RgQRJ91Qd6tllbOVzq4f+UsUarpy57lc3AIgZv87We7zqIVI274BpDpMtDBJraSB6kXReSQQxC6N2iw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTtstACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrvzxAAkiJdX/zE99x+kGOfW2kjm/Q57V1peRChxb5pPPGM8Dik9cV7\r\nCnFAST8GaDALRUu2HeDKTVcjbHE2Btn4Zl+q1QaV3U+xZAfYYrElaii+CPx4\r\njFEgIb8zevHI9aTYk81lUtxT40Haju6aTRdgL4D/Fi9DdJ1uP3D0GA1WeFD+\r\nq73jNP/VV18zh3SW947Svz+bwHG2eMXvOiAsPnsyo/srswMwHLcgZRb3SJ3V\r\nZGSXhBiuZc4/ZCeKzkIdM6D0Ni4R7PafudbR1o+SjYnAe7/1UngMzw++AEbs\r\n93MYR9ro3k13S8hNgQkQ5WIqGJAPcEVUN7ddE//gRzNOoKM+N4/btIq373Aj\r\n7QHWbQHHI3ZAD07zXDWBCFVa+NVfTpWLr48emZA0G523CPEFZkTk6YrYT8O2\r\n2KUy/OTh4rnPXGUYb90+lubFY4vnN22qFf+ro/47ubmqnWx6LGTjpRFFJpJY\r\nDF25mMWIJjbvBO5lQE7wG/UeK79IlR9tckhKdYHKoZeV3R7eNpfJOuRG/ycr\r\nymdLMHY/6WwtHVWvUHyNQ4/6e6JXzce3smU6VuWCRenScI0oIzcLcXcv6Zlx\r\nihPLZEw4uMPmYeOonF+buegLjz2ihR5xedVKVTQMlteGquk48oT81+RH1WXW\r\n+CpWCytaRynWIHtBeRnuh9uz8iWKm1ZKWms=\r\n=xrNP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"1a2ac519f43098c8ba342d1feb0ad76a5a948a98","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.1a2ac519f_1666112300853_0.5466495622396488","host":"s3://npm-registry-packages"}},"1.52.24-dev.e0fff8ad8":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.e0fff8ad8","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.e0fff8ad8","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"578b80342bb4fe1e34926d60534b8c70687870a3","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.e0fff8ad8.tgz","fileCount":5,"integrity":"sha512-mLA3QnTBfMEj87QFfX1ovxBaq8s5N4V7Kh/aWwt+ogMXQsIpG3R/fkuxiiSYONfw9DwkL8UXWVb9fZvzH8YVDA==","signatures":[{"sig":"MEUCIACanRIAqh710bgYC0Ps9I0PZymOjCKDyLUhCCURfxRcAiEA4pPc+Pj6hdlya0KALjPojXtB1BtVRVIPhjT8NKf0KM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTt0lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmolew//ZhzLZ7ClnkuOzAk5Hc2PTP9yQTMM8JBaHOLNG4bTg2rdtuNG\r\n0ffTr/b1Uf493T1QvmLgDnfX+dx1EzfRvmvb2Wmbg88azYX15TLNAdvjLj67\r\n8UlSMr6ddiC0pjmtfAoAoTDLelNS1ADiC7mDA+k+3OhSXt0NlcFH6kEKHpzx\r\nN+5HJagLuUnDf6O4NVSjrdfQErMDPIsZiQp0wTAo5fXPX4sOc2/V3I0AXApZ\r\nabDu51XoNzWs/kTrI7MJ7dSC1UWbKLej43dpyHLtcNoZsf48j4w974tjQ1sS\r\n7m4FffdIK402q1UNzWFW7YEQhEWhUBzmcMLGns7+xkoOI7hWNF2JmOWOKHxA\r\nPRDxgif2bJ1Mz4XRq0CezeO05sJfK6ubC4htsYBPrNBWqPkpWaxUCxWQ8uq8\r\nKyXe+ujptq/6OZ9RjokspLoSFqLWaNWVmIedA/pmBCUZ0NW5v2Xkjr7DtP0I\r\nS8HHGfAchFI2WGfGBIcom/9KuWLB9ngcg9duedSRMB9rB2ZvDL3mi/iKFZNG\r\nMwVfxw8kUpACTy+iOxzrqPvst8auPETanKxJdiRvFXeqshRH3uJX+KVKEveC\r\nsrpBs6NSNbTjb8UW5H6XdaAQWIKNbbMGMrvybWXb10jSYOb7Y4LVg6PC9z4O\r\nADpirngenVFCsFwwlEQRKmIGdQUHUE8TGyk=\r\n=eh2b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"e0fff8ad86885566e0440412673cc10baf94c00d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.e0fff8ad8_1666112804932_0.5094927765346418","host":"s3://npm-registry-packages"}},"1.52.24-dev.a9be2ba05":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.a9be2ba05","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.a9be2ba05","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"239b0efc764316a7765e08da3aac5eae21d1cc77","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.a9be2ba05.tgz","fileCount":5,"integrity":"sha512-W2aVLAU6oWlqImUWiK3wKWSUI82/ADnNBjL0HmuFLjQoGKFR4CoC5/HWz5sOCiI43tygF36fsol40LlD9fYU1Q==","signatures":[{"sig":"MEUCIQDZ33uVrFVIIyffXErcbPU6TZh43fgr3z16nFSjQ71O/wIgAlbDLjR6vPQ0Z4xIGy0ErmfJ/RqhQFXieInH1MIn4jo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTt8sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4HA//S+Ze9iGSog2ZJJG8lQQpk67xcJplbL5svv2jGBMIrYM+sfSQ\r\ntZ9c1jy9zxqRgFarvQJArzS+Q8o2e7pzzGymG1IB+o2pQ+H0+BMivZLg4ZW5\r\ngm//5fc+oa9FPjjE5SNKZMPXAUTks4+KL2foDJnLlZm7ohOyNyG8lKzYZjRS\r\n7ACBXxN10rzjTaU/vaZ0+RsG2ntUv2YLDUe56MiPts/GddbRhdh/FOXSTDN4\r\nn4pi7MIgYarx7dCFVUCtc4VFweS0+SQ+W55Lw9siGafyphr0c8RAUq0Jl5ND\r\n98J8dlj3PWoKIuDXXfZxnuaBi2BqlzkSIEeKJfREFJvdSKimwXCF84Bhw+wb\r\n+/dLIor/52FM1n2cnm0rYr3QPRMoMEaov4f29Cfdsfy8BM+63BF1BV+iPrJA\r\nqsOFuLfdgBkvRvgCHZRIHhvO1/C40w2hHAUtWPh0W9d8NRxgaHYC9FytiYRu\r\n5kKayWuV5g9Qp3uNprGfqKbI87CQSVq2qve1S4auGNHfyCwuIjA7137J3pna\r\nScRLDNnNoIJPcS2csDIhzTvzTsFflusajVxeAUpLHC23C0GwGrbSRMw/zanK\r\nMvneJ4Kr4sX97R8ac3ArtWxx5ZzU031UFhuR0KE93K2Sup9rCDtTllBCl3ZN\r\nWUuC7xWUz72BKEU8u48lt0pmrRjF3a+oODU=\r\n=V7Ea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### Contribution\n\nNew feature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"a9be2ba05627cf6972662ac6f6a43675009b2aa9","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.a9be2ba05_1666113324395_0.8224083675015521","host":"s3://npm-registry-packages"}},"1.52.24-dev.d8f8227eb":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24-dev.d8f8227eb","_id":"@dts-stn/service-canada-design-system@1.52.24-dev.d8f8227eb","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5f5d483efab061f807744161b20bc0f2e3511f7c","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24-dev.d8f8227eb.tgz","fileCount":5,"integrity":"sha512-e5vpwtCsddgch3MSFsQ1AZa4tpyoHMZFtmCGyjC/SlcSUPxqWzocBGUy4fN8TV4KksDmoSEysrQYVl3EtAPGag==","signatures":[{"sig":"MEYCIQD75S/hw4YTvP3yQ66n7hbQK0NKKyF332S2ItSZfYbcggIhAOEDlASxbn38djMto28Effti40Jq3Sv3/wJz/i2HwUz1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu0VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPNQ/7BUCgf48KgPuFvIwibnU/3IlV1Gz+jxYeUXZbTczRJYUtX7jV\r\nKNaHr1GsQHD5hxfPCQRwkP++JoZLwnNLeQTXCHA7H0rPxMWuOUt459c4TIw5\r\nSr5agJz20UC2JK26CUWbfGdzLJCio9oVAhfgXMP15firfRDuu9fBJTHU69EH\r\nYV0uRw4HYqzhusxB4Gy4y7J2RzewUB/udfjuYXJVasEkHKuuSjXJAUqNR8vm\r\nZJX3b1h9arLnyqJ4nyWzccZYXxlTq5fdTOI3Lbuc8mY0Z6uBCVCNWvZQqyK7\r\n6rWFlIkToNOCr0OgmxzuC9QQu/yNFKj4J59KodITqDm5C+TFgdwmOckvEYIj\r\n0JicgwmgOrcGmPqQ5bgIf74WubTCpD6WelFr1ZkIf34sOTwVKwdfFsTBniuZ\r\nDb0O6eSXP5GMIHTrcCo7DzSpx2MHpizpfxQ265gE+V4fgSJHjD1adwqXztky\r\n4CA8PKkw35K3SbAuhirTb7tX1Q6fsZdL9Y+BkIzsw2xe5m8lUb4hJHI3VBi3\r\nbT7K//bgjZWX/TsrREgZXY8zI9MkRv69awlVYV3N3PZKef4+qpswfrc6xEQe\r\npB/7KtjRLJWEYjYAk5PtYqiHnct/QR96qV6Uh6jHCol6JrimMF7VkrYk8lTY\r\n3b3F1yDr/oLGxr2EwKJh6ECgtkXsWGODUvw=\r\n=5ODe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"d8f8227eb8b50e6de97036a94ae64c7e2f10d202","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24-dev.d8f8227eb_1666116884978_0.8805794544456313","host":"s3://npm-registry-packages"}},"1.52.24":{"name":"@dts-stn/service-canada-design-system","version":"1.52.24","_id":"@dts-stn/service-canada-design-system@1.52.24","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"9ac8a4e31b46ecddaddb9a31551074b176469f2e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.24.tgz","fileCount":5,"integrity":"sha512-NlksbzZ/u9CnTMUJhMbwUubVt8YnvQAMIROhUbobeipENiStpBjqMfHDVfAoviee2Ua74bmPllAurGPQJKAOgA==","signatures":[{"sig":"MEUCIQDxh9ewZJjNBP9S5384ybthzz78ZtU3brqCKvJ7qMFDqQIgR3VZF4+rktIIA8Cg02hTfcQIQL/mDwDIPTxoorVxMFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvyTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojVRAAh9cvV4uh7Hiq9wAqmaoQSwrQ1kKaNqBXr8jIqiFszTmwK0LT\r\nKDxadz12AxTaKI+eqXNcZDwauV5JH+7ZzabQx/YNASpdNz7hIY92PuGJIgWF\r\n7Mm9mdeZw6YuWLHW16MaeY8HGBNbm+CSmIBeN/Q8RTscBryQ0OFn0EWRDY7U\r\nhX/zFB+WYOxLizeuKPzImNpKS9Adgn+K+h1mdQ9YwIply0iaTxCK59u4XWr3\r\ncOPd0dh8tZ05HfuL+efpxQeLqto04TljJsMJQK+tVnmEq+pi0it/LpVBOmfx\r\nH4eBcrrxNEiiFlyqF1DNkSd6xEmZVUrJR2m5LHe/Zjf7NAbVh0zXK6nrZISk\r\nGDoIhMHeia54xX13Y4GAlhOLNaXtxqXDKK6VaZIIYUzIuLuXEBOM370xvK/X\r\nFEchhcs8H4mHDayNvNH/fnBN9xZk61ug5d0o8IN744GqxJ2j76RvothSd5H8\r\nrDhsHsedWmiDh44aHuPgaxlspZUpNgaNQ4wF0WhDY3KEMpsHESQl+/T56Xmh\r\nYOUdvhK+QxlajQZ4QWHWZptcuh60Yu/3ASLB0lYXYjBYJcGwRrJJGq8ZfQaz\r\n9O+05YA6odnYgmVeA45SJ8gzNtG5xjpylJ/3Fq4R3+WNA379EMPS+ngfmRnV\r\nziGlbmDXbLtlL75GTaNRHvY0XpNKSKpguUU=\r\n=n7kY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"ef3a6a47513acf7b338f3bcdd035c9ed50d1c54a","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.24_1666120851611_0.5063799172778785","host":"s3://npm-registry-packages"}},"1.52.25-dev.b083cc491":{"name":"@dts-stn/service-canada-design-system","version":"1.52.25-dev.b083cc491","_id":"@dts-stn/service-canada-design-system@1.52.25-dev.b083cc491","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8515ec9d6211536b473365e49a505c0aade01ef3","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.25-dev.b083cc491.tgz","fileCount":5,"integrity":"sha512-Df3c7hKPMAD6Mz1sWy/U9+o/VI1xVirCvQ/u5yj4MRpT4EWp97l65YHZP6X/6StOz7ootyAnKzEk99+ZhWalxg==","signatures":[{"sig":"MEUCIQCuzI+bwUmb+jqBIUh1EN8wS3elr1KPPNkx+eRo6IZI0gIgEum08hIxESaSmhe/n1LQKziJNf/LVPKecJKjR+Og8YA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495357,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTwFqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNTQ/9Fz1NNdYC6WUBkTg/u9UYC7clwEJlI2Ezamq/uwHswgGVlB7V\r\nSi6rm3M7av5+3WCst5qP2ZzmbhsjkCoFBGCntZAwEIKbo4ieQUgonJkizAna\r\nG8Lrj/ZRSyEEeGD9TnkpPGnVvNcwZkKitN+Vwjl5zdOujNSA/b4NIRX/bhN3\r\n+ZUtGOT7EHPq0uf8izT/KCrZ4FWua8w1wxplNUOvIelSzR+Iu0W3hsq/DgdS\r\n4mnV2WJX/GpdhGyLYVINwrmbMAYbeQ8p9nE2iHKVSlchkdmXQQ+7EiaI//88\r\nYrbhqGbqQF1JxJkeoZ70SM0uXP3y5Gr1W5D91m6WIgR0sJzyT9e2s9V4fRz5\r\nM1X3xtlY2fghnDbji9Plu+G96OSRvNddGj4BF2RFRsbLSgD65+cMI9bXx9Tc\r\nYMJ+VagBbHKWKn1Kvt1R+fGEJB3KL3iI7o4rMhOFQ5rGLrXL+xTz/Y4N4Aus\r\nb1Dk8j8RW/BSsXNiP9P6SZC/K73cC+9rlF7DW4+EmkkLZ3rzX0baE4h+U8Oa\r\nrwnwmEvdwtD+bTmcX0GfAE/mjG89lVsqRm+Dh6IVH9VJEZ112ZXB/DOJlxW0\r\nChTIv4I0Baxpq4g17WxtY4r2tqNdBHB8TlZe3RGIyIkijgqwPSRoPh6uXxen\r\nSIS/zOeuKYp7K7RmubT7vvDtpN7J3VfASXs=\r\n=mjX0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","source":"src/index.js","gitHead":"b083cc4913338bf5fcd8bf8997a82c7f140c307d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.25-dev.b083cc491_1666122090381_0.19891556663036236","host":"s3://npm-registry-packages"}},"1.52.25":{"name":"@dts-stn/service-canada-design-system","version":"1.52.25","_id":"@dts-stn/service-canada-design-system@1.52.25","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"9273f4eb07069afae32f4363fbe379c9d02b058e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.25.tgz","fileCount":5,"integrity":"sha512-Ln/AjtYu20DEamgM8Z9TN9z65+V66C6ystjdZc3WQA8nH1U33m0kfLPq3q+v3KdsabvwecGQM4d97rPLJQqmBQ==","signatures":[{"sig":"MEUCIQCO7pNzVbZobxL2ZpFyRmATK3mnF3eF7dAIE0YEl1ROxwIgTlSMmSMDV9XciAHqacMv0ExdB7F/lrJZU/pOqdOxfy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTwIRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMHA/9F0bZRcXhlBNklAINzJvsWC9eLVrblHeNLmxIrRoU5JeE65HM\r\nm15WTxfxA19YdmI0Q9XoNndAkl/LakIi8z7CQuvTgYvZaeiHZflz13u1V5eR\r\nImFFJFA64HCBYKRRpcbD/EesmGyDakYGctbDxbhXC9UNbQRymPwyZqyAci9j\r\nF3ML3w9+CfgQuBprtToEnrYH7gQ9bI/nXr/N9a9vGfegl2Cx06/pM9hMoSi9\r\nBjt0M/CjXw8nBN8FPs9WAAOSnbejI9+aquHOl1vpPjwF3Ye2HIS6osdGPm/3\r\nH4WaRdBGNLOt72unHosk5+AmMPvni1M0BEmeYuy+mdKw9BP//nyiItnVxuBc\r\nsniFKaFECerg8Bd3bXUNw/vWYh+NHi0Ns4VWqRbvs5yKhj+lBJGsI5cWcp80\r\nxLsdYZ4eLrldkXRBkBzrAgWSByfFBp47iz2j+Y7ueKWMUi8wu6/bQU1notJh\r\n3vu5f7vOHT0v3gaxm0MQ+k24zTWOrzjw+WkD/y7Lhk4n2K/NG4tj7pjEFWCt\r\nA3uW/Tlp7nY5GF6tcC2uPqdfh3h6nD7vrADvj2z1jY22bLjwEJ/mR2T1OKCn\r\n0xrnIuhdNq9844iuEIx1sBHfYZmmExblNSiXtP4QwZuMuf9O1EmSwGFJg81n\r\nMK+8p42R6ZMnd72Ko6K5QQwGVxAK53lbFM8=\r\n=MTyW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","module":"dist/index.esm.js","source":"src/index.js","gitHead":"e0d1c3b56478f17ca2b32dfd78aca2a47456e7fa","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true react-scripts test","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.15.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.11.2","react-full-screen":"^1.1.1","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"husky":"^6.0.0","react":"^17.0.2","eslint":"7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","web-vitals":"^1.1.2","@babel/core":"^7.14.5","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^4.1.0","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^5.3.0","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@testing-library/jest-dom":"^5.14.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.25_1666122257148_0.26264159259284137","host":"s3://npm-registry-packages"}},"1.52.26-dev.69db1d095":{"name":"@dts-stn/service-canada-design-system","version":"1.52.26-dev.69db1d095","_id":"@dts-stn/service-canada-design-system@1.52.26-dev.69db1d095","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8cbc39b755032cba7534e0e28fe3d244c71aa1c1","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.26-dev.69db1d095.tgz","fileCount":9,"integrity":"sha512-P1b99Es6Ve1PYQOweIKZM1zI6dfs5ayoJA1B+tWsdocIUu7U7vgmAuhdeZyPuaTti3j6RZedqm9PKshtO5HcxA==","signatures":[{"sig":"MEUCIQDc/FZ8xYRgzlHzhzRvlfWHX1SM8nnMbZWF+7QnygZ4+QIgU6JY58U9ZPeUeu27M0BFINVughQUKYa8m2qGu7zAcPM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdTGdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5MBAAgukDT0uGNEk87rAWvWYsUChdd6stYXyZ5OsE4u/pb8XBxnFl\r\nAD6YugXwGOvo3n6BzSvAvzgkQmaXq9jWpyEOW159rvl7MZNeq9ydx2DibDCQ\r\nP82S2ynJD0r70FJh7ZiyRMKeS3gL6RtNyyVk+I8DsbF2Xpxg9noyTrFSBbdO\r\nTdAmRjtQBZQmegbtKaILtYTIr4hRqT8zZkdeap2wp9pfZPOFDIMTu+kFqfQQ\r\ncdZ7Zqhq/QTjNM39GPIVTdtOFm7WgRgzGq3ZP/4vS2Kw7Djr8GVtPm5OrvuQ\r\nUJmY1w/q0dmAOp5MGDJy8xbD5RN8iNtYzpiclfElwi18JFyytGMmnuB34Sqn\r\neusZMEMksrU8pCO/VZe2JchUAh+4rscJI3clYoaVp/oj2sbMn1q/MetST2Et\r\n9KESdel6Eajxej+rkhJrl8QZGQc/JQ+mgGApYpbamKCoHnNvNwLf8YjEbZWj\r\n2yojbmx++phcmJeZxBaP8QOXLkXPbrG8fjIfqSBF9zghhnB7dpO7LNkYQ49O\r\nKrhgozKzxXP1xCwIs65w0CoFGLx0qAHuhdj285of1jUTm3oNOQGruDpgi75J\r\nV9ROUsN133VKLvovCuSe+CXLNVKuc29DlBI7kloJssp2UIVDuUwGV/qAtcRF\r\ncoLqMobPSjARx/SMzq4C9EaqxaHN9r5OL6I=\r\n=5PgW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"69db1d0953bfb58eb55e1c7498de87f44c3239d9","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.26-dev.69db1d095_1668624797685_0.9408523414362646","host":"s3://npm-registry-packages"}},"1.52.26-dev.40ac28199":{"name":"@dts-stn/service-canada-design-system","version":"1.52.26-dev.40ac28199","_id":"@dts-stn/service-canada-design-system@1.52.26-dev.40ac28199","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5780f31613e473910f52a7402725c8027a0632ff","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.26-dev.40ac28199.tgz","fileCount":9,"integrity":"sha512-W1waMaOJR/TyCSIawIAXtMhg2+xJmMGI30J09RVxMiQDVTaJqfSisy0z82lyUc9uoFnUzZboJ9NVRWlQAiIQvA==","signatures":[{"sig":"MEYCIQC5dRhBELORXAPYlduUAWsJxmfam6cUzMl/XSVjbdZeDQIhAIOvgsoITj5jnvdJ4mKjcHEXn0vObmKslAihen7ovUDc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdlwMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB7RAAiqT4xFdDoluLr2fsbSUfsoLFgBmt06c14Fdl4Eh0JezdHEON\r\npl96GuFTVqoN7uj1rCO9EQ4bMbJbQdaaBGANYbL5HZxDbwkBCkyz54UYKOBr\r\n0Gm7wSBxCYKnturoWjNjUWtFIm+qB8YWE81OszCh5u3CuvsPIyWZKbOF11rF\r\nuP3hJiK8QkoRYTMlxd9deBD9NGoQu9Ibqgpmsfq6a1W9sK6+N+dTt7WuVEBR\r\nrf4uYA46SZCfivgM/QbR2VNP0RM+PM2oBsAyinFg+48Ul02POcYP/URmm0AA\r\ncs+h8cfLGaYyXW4WC+OQ81bs3ehhGys7box+3OkDj6/EVwNNba4aAmr6MlL+\r\nWtTsoHtuGv/BfXcm/XXKik8gJySkh/zJdU7Aw8g8XZxC46AjHWG7ESJ0Hkf0\r\npj6kXvnURDcRItJqzuD5z9t0zDMfMDT/8sExXN1h2OquY4ER2Ai+tuWLSvQ2\r\nZZLR5OthHYjraWY6nIVx6FKutaYLvptmu+AMYNWYn35GTMK8dC1KLeAxy3EE\r\nC51q9e6n1G5MMKb7kGkHsgx614jDxxutHz5H2BOSuOx8bKQwbv64xSqp4cPG\r\nWOmao+DwuNPcs1fJMQKIVtwj3qJtx3c9KqtDMQY2H5uDM0glQqAY9GLyghpv\r\nFloQcyqlXcIaU7VVDTO7fQ6XTfkeW6t4Aro=\r\n=xxE8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"40ac28199cda418e39e53166fb27e40e27450c5d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.26-dev.40ac28199_1668701196218_0.8493044821463203","host":"s3://npm-registry-packages"}},"1.52.26-dev.889771385":{"name":"@dts-stn/service-canada-design-system","version":"1.52.26-dev.889771385","_id":"@dts-stn/service-canada-design-system@1.52.26-dev.889771385","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"a3669aa1efb09d8beb3121024b10a287f333d8b9","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.26-dev.889771385.tgz","fileCount":9,"integrity":"sha512-kvesPQHURXvpmTrFpu609BYYKyseK31miUJ2ysjzUrs2tzuJYSfysSEFoGE7itZ+mGNP7VXvmbrDsREfoORmPQ==","signatures":[{"sig":"MEUCIQCKnBIj6cfwbEK99QO2GFLgGWB4bSIcdyp0Z3HBHYoeNAIgR9rMfUh6Ylf6j3JgXf4VBnpknKR9mnHbnmF0wa29PEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494180,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje4tRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyNQ/+K11ehihyeCBv6P7eGwbrkwQt4XAVHOlFlt3OoXPqrBJZ4ezs\r\nvqW75h3/3oOGKu0EEGoR4NrbAdGfBb9Hr0tFvIdG2OTBUVetVCvkXjZq3x5n\r\nLEuf/mgQh6jInjsd++/Xyjqs7zjbQ/Ym2tAKc9WaKggECJdAopAMAck7jLaC\r\nNvlUt8grE0tCUuYCSFTI1G24AcvmZFojjzohO4VCkuv3Y5IHcWVN0HmRzaJk\r\nXMj0rwpifPXyholNYj6chhqCo1CVaF+esdwJOeGC59oy3j177aNMNyI3Q9Db\r\nBo9IS0berTUDcYdS2C9nUT+xcdaloNI7tLt01qNJLV2YMtJIWlN92KfuuilC\r\nFLgHpSIsVD8dLgmaG6DwmfA8PUdsm8D81nI4ufQECcDxCmnk2i0JqZ2DrXtY\r\nQpcIuJKnJI3nqjHgyIo6nhUQcIn5sHX2lc6fggwbwdi1OlCKcF1NAmNtoKBv\r\nXIH0Pbl2knY8l+ZdpPEf/ArR376Lvi8JFJ1y8aRop/LRDQm6mIu4oKqadZ1c\r\nsWyBg8bw0dJqxpptCByM68uEeenb5oqOSMQp+vOxR1B2CuF/TjJF41918SgI\r\nBCR8QVwVDv2veT1ewW5IY0OTmSG1t+wgiUwlG/LAIhNt75w4PFtOX8K/r7QN\r\nNWOwYBqYj8MnzAGUS2VsR2FgMcbTXbsLGDI=\r\n=//Wc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"889771385adedf46a7e715a82d8b2cf1161a54ad","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.26-dev.889771385_1669040977411_0.5543775808321783","host":"s3://npm-registry-packages"}},"1.52.26-dev.edd93191d":{"name":"@dts-stn/service-canada-design-system","version":"1.52.26-dev.edd93191d","_id":"@dts-stn/service-canada-design-system@1.52.26-dev.edd93191d","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"87652124e8a0ac4ba783b584fedb4b1e701a257f","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.26-dev.edd93191d.tgz","fileCount":9,"integrity":"sha512-QcUY3AIYY6P+F1OWVI0D8sriTqzD1osTNPl+ErbuMfSvsuNRvZKt7fpcq4SOwukKGDT6T+7hQIb7TGg1kpQAYg==","signatures":[{"sig":"MEYCIQDkUQXwVmnFsYoSzpi3pJNewW3ieyfYZLNLH4R1v5Np6QIhAMPSaX/OLCyvhtyA/NNE9XzqaRxrRROKFN6laZEjGq8s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf908ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2ig//Y84KW8ZqGOMvgneeKIUIkiZr+Ab+sfH9Ucd4/TnH7HFS1HVX\r\nVEXUxeCWZi5xq7mQuT2ajnTQ9YICrIXskCJ7HQGg3EGGDJ5nUYPOsoRh/18X\r\nyuCZeG+rkckLJKdlpO5o6Xds5yh8b/PHvr8oFwK3FNv+oNc6CmAmoqMKGkcy\r\nMO6j0AYptfYXE+qIBtB7NhPlvkqOvR45Q58T+X2TLcMbNVZVLmI7RBVoJBsW\r\n8Iyks2U6ivp8xu07GE1ImsaAxVzCU3Jcniqal1L2dVjlkIcVgeEBsmZo5XLP\r\ntWLTLzICjwLeF+S6w8kLXgRWqg9suzbtOOZOZHMzJMzpi2Yb98nTKouowHN2\r\nMmi6NO4/NoMycXzOeBaPwJMcOClQesZVMFPzRbuY5Y1JrPebQ5M80gPAJzpJ\r\nq1PvgW67vOy3j1wb08+nulqs7SrCTnKauM2T8XU6zZl9EMWl2VowqlOEL03+\r\n+50O4z27a+DndJ99Y9qEdfu8sUN2SnqSr2sJ7ZTM12fc5f9RDOYZA2S63GkO\r\nXnkwSKRbMm0SUHWPT2BkBxv39DvIkVpfaN8rvsNZvHK0vU6FmfWPze6AL3CO\r\n5JATZwvSzsWtdGpNT1HgQ+VJTve8B8yZXwCfwLgtb+bfC6rsXgETrGuXxQzG\r\nu1hd4ymW+LNKLS/1/VMX5chpxr33GfV4iPw=\r\n=g6bL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"edd93191dbadb5955722731c57f73a560ef8d61a","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.26-dev.edd93191d_1669324092122_0.6087035134295005","host":"s3://npm-registry-packages"}},"1.52.26-dev.6f8b64f57":{"name":"@dts-stn/service-canada-design-system","version":"1.52.26-dev.6f8b64f57","_id":"@dts-stn/service-canada-design-system@1.52.26-dev.6f8b64f57","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"819eed41214dcf832e30c85acc528d87ca0998d5","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.26-dev.6f8b64f57.tgz","fileCount":9,"integrity":"sha512-K2gZNzfo19Pwgd7gjXd3gs3XJsNTI17ZynRH6rfE+dTaCnYo01Ft6Qv+5uLXbZJladQPzfoMMuWR1YnWIGwLHw==","signatures":[{"sig":"MEYCIQC9qMDN05lAvsuBvEy9Ma2Krb2v3th2emtzQ289aeGUoQIhAMqwK6DEEHX0/ueC6wIERN/MvWixnqnCiSgkRml6Tr5W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjgTnCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWTg/+PzXMYpTgDvgl/i6O8UO54dDRujc++7zVjaA7HzRohRjc1JHX\r\nfpB0JQNVPGxALBAZtDR5pbS85HmQjfYiXVpTKUD37khdd1bQAMb5cEhm0cTt\r\nlu2pkaz+lcLbTeS3FLW94/pniVJRaplhy8iWm+mefiyNCwBMTjcEGUnZ8c1I\r\nMjqApYzmrSnASitbQsN6y88IYPWwbpRbj4qBVA0Im79WGrDOxh84YGk/4crN\r\nzf/B85XM3qNwUnYDwlAulGl30/3AO5AnHYmcvMrzbMGZRBU/s8BqjY+CvZ5y\r\nbF6lAMXrkSYdG098569f3Fbcx9/zcVILq/yYUWPrIGztUaWFo4FgUSSsIBKG\r\nwVBpMJTyin6aEL0KSxqj0CknkeL00XSLrt3JIXrN+DjTS5OLRqcSaYTWdZVS\r\neGJgFZiL4lmCLHh+aANK4uWbCO07Rdat9oBV4HkAxc4rRySOslHfs7nmY0+s\r\n/EHYzi8+2zTVRQ3/7y9iHJ8ozCpO+wWVOp87LtzfuMn2dLxbJ59s+5nAL/FI\r\neXbepDPNXeG3hMaAowGtD9rxNAG1vCi2rUdjsMQN1GYRDNEXhGxRsc0Zp+Di\r\n5cGlohqpik3RKAnYUyE1yvx0YfSW7wMceuKxyKnMEHcZCY9hH+UQSYCFYdRG\r\nCGECNRcTi3V8+Bo0Ru+/VNqw3Htm3YHm1kc=\r\n=MyJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"6f8b64f572218451533e33924ff3692b717b0a13","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.26-dev.6f8b64f57_1669413314238_0.8203954136431497","host":"s3://npm-registry-packages"}},"1.52.26-dev.b70d01390":{"name":"@dts-stn/service-canada-design-system","version":"1.52.26-dev.b70d01390","_id":"@dts-stn/service-canada-design-system@1.52.26-dev.b70d01390","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"f0a412798ff7e88b20487155bf7e28018af20cf7","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.52.26-dev.b70d01390.tgz","fileCount":9,"integrity":"sha512-kmLXGt2gfgdCxmZ/x6qEnIrWCv9066AGMMw+2+P3D62KVP5eHuSsuZ8oR2pRU/Fn4otaQvOicvrNMsAfhCXzxA==","signatures":[{"sig":"MEYCIQCoNL5XYtmEEpW/nqPMJbBseTlFd2Rwlpnc3+7Y8Y/5KAIhAMsYGWR1AMyrSp4KfgNR26qLlNHZfrcPJLR/vQYpWqGy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495236,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhiObACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqEpA/+Kb5mwnijMOqWidRn5fSg/BJSwfeMYlRQQbBlgAAU0LR98gHu\r\nozedgV7iG7RXsjXKEvwW7mUIUJV6/xWLhWVy+lR4g8evobGDnzdjILXNV+vF\r\nabpSRHvi/U+94z0PKfko5KXK1fH8/ARFLek7d7YuA9p9seyWYytZl7KSoLtQ\r\nwrhExcDoJuDxLGJ/akI/tlIPBFr6kcxsseAfiH3DQFYfDgIemg8v5yYPjLd/\r\nYI6kAXcnhjQ84srcZyZGwOCXFkkAAVeSOi+WE16yGyQehp9vWkgAGLSrg8jZ\r\n3OluI83Qlz6Sjyc0w1IzzKxJF7AM8wOqyKzMZjCBT8rlACe6x9LbY3YdrQyh\r\nPrjAdgHYPgrhyB7WmlhFIdfsM8HJBUh6LBjXaj6MAr189ghNTxCbbbNVqzXx\r\nMG83q7E4GuKGw+SrcKbwjpdV55fYAzoI1OuN1pSFyzj46zrvERLLNnolXo2X\r\nZRN4ct9Huz8B04LwfOAwR8za+FxU4DNKu0RM2PxnHopPQyApN1tYemaxzqS+\r\nMv7pOuf+Ufq20diMu729022kTAocHQwcxfHKTWyy+DSWnz+hey18lKxwOfVQ\r\n1yiENR8vZjrxz3yE/FkWPpuWnzPhfQtdULHwcc7hinwrB1UDy605aycoEgxW\r\nZEIjjJaigpr6oJn8NdQUdBf9ZwJ8lH6/WBE=\r\n=Efo/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"b70d01390740dac6b29d4cfcc954c98616fb892c","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.52.26-dev.b70d01390_1669735323398_0.7469087351758976","host":"s3://npm-registry-packages"}},"1.53.0":{"name":"@dts-stn/service-canada-design-system","version":"1.53.0","_id":"@dts-stn/service-canada-design-system@1.53.0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5f9d79ab90820bd7c725823e1d5b0b32efeeb1f9","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.0.tgz","fileCount":9,"integrity":"sha512-NWlbOWg55R4LK77B0bjSmaAJk7Xuhx5OIvhDWvbazsTqarL8Qr+uOMgbsV+93g1C1/kCLSnqpMq9LcPlU57EZQ==","signatures":[{"sig":"MEYCIQCjcqnwUOrQ1D8X7A7oZT19bwHTjkEMnpWWm9tMB+hQIAIhAKCwWjmlg/Q0TJ8akQKrN/H4YA9d/btFqU6AR6iqOj8z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494696,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkw7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5tA/7BHSD29aRdZwg29vE24ofHvVnO1FOb0Go5L/WClyuAW1s4geb\r\nqTvKWHsVnAYDRQxOKwENABhh6kKa7TXAzaDu4mLKK9+e0EFkmsVFKjXRjW2J\r\numUAEbK54T0fr0+cipzsuyh2yeOprcNnu4shgcOndbMPdJcSaC/XW/GoMdM/\r\nGLRZJ93CWjOjgwIJsCzSGtu8CjQH9xsJoEgGstO66hN7Scx/Y6nIyiQ4tCYB\r\nkamHppbf74ZEFHfj5WQ++rWpfqKEZtShe43wWClGWOrKRpr5b0Nepw0PHZYS\r\nBaKVHAMoQwKtQSitIb4jjc9koR3h1rIBTWt6qveeW2irbMFSxCf+VDSk6+q9\r\nZhYCqkNO2fhwOeb0/bdIctvh44voR3u3FAdcsLgzE8QMfWpEPLg1E56gHH5z\r\n+rnnjsUIYLLoZDgn001ralnVExYgvZnT3n2WemMgseEQYhgkVSHn0szG0tHE\r\naUA/ClYUYTl61/hGxloWYSafQvdqJpO++jNcSLbXdXZWUeSds1ubwpvqgRL1\r\nwK2sn1wwF/4fc93zFHS1LqfXC9rfqBWfCnj5jecKHDvN5xcdm/mJpBYTnHTA\r\nMzA18HSYl/6XT4dn+FTEoLW4FyNhebVuYeYOeuxtq22z7XNSm3vn+Ml8tv1M\r\nTa6WqPflvO4glR99tKnU1+7DvDhF+TpvlM0=\r\n=q5D1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"f10fd48e97dfade4ec6b5aac3505fc39c573e87b","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.0_1669745723547_0.6623130886009965","host":"s3://npm-registry-packages"}},"1.53.1-dev.798b971e4":{"name":"@dts-stn/service-canada-design-system","version":"1.53.1-dev.798b971e4","_id":"@dts-stn/service-canada-design-system@1.53.1-dev.798b971e4","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"b48d8542f06d4b4bf5eeb4b5d7de68269f3c8fe1","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.1-dev.798b971e4.tgz","fileCount":9,"integrity":"sha512-oOzZgewTUAbyIM8g/MejS5gzkIbwqgCK7W6klKcCEIcBrrksoeN9urIF8eIMeZBwJgifWBwWq+fIq/k0M4MrDg==","signatures":[{"sig":"MEUCIAwv2QSoT05F8/I3BE9Ea64/G3KNxOxNeeKzNhgV5AUjAiEAisHxias2qbwIcnR8rVOD/oZOuqbp0wMj5A8sLqwQyK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiKy1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5AQ/+P2+phIhoE/NxOP1ZlVPgv9QpTLae9C4zuxf+ZabWnksilCyO\r\nMV1kz1wgQI+Ia9cmj/rJXABIaO4G2OsjLv8PxRu+OlbBn1sNGi0nT0Z+UfKm\r\nLHpsDe5/l40kVvvb+ngq8/kTP6/ZNAlhVaV9De3A/EiQEq6ClMlBZLFGLGE3\r\nd36TM49q6V4tDm+mVGVhTb3mbcGW+PDOR07cGekuvF1JoE9/eZ6Y72VN8UYD\r\n1cWBAvSQFUG118GYBOCCcVDJV2B3BSt651mDMYH7CAVonhQnhOdhdRW4Hpyj\r\nZCz8z+G/I8VSDHbyoiB4aWgfz8/bs68MWZb4J/4C+gk5+2VqEFfg0lV7Ks6V\r\nq610Na2Gu84kh1K438OVMjl7baHW0QvKn8reLeLuOHO1DxWelHpLfOfb+pRv\r\nkL3mYa+bpuuGOqPvA/37Y4bPh7AmtiGSPeEppV2XpkImGqYBv23ytLcqxUyU\r\nITKb/MRSTR9nljZ1FbwxIhdUR5X785b/x0AgPptWqdJt519AS2isQl7F+UPN\r\nMZGMSXyNLfrZBEjFX03ul/AKPLgHCP3d8XWSl/g4mISHFGVWPd4OQpSuPcFS\r\nvTO0l2V1TrbkgXNU0cNrW+pXsmifnqGxqZofoqjsDP8R1Us1VApA+YcnGBbe\r\nC9okucO19KL0uCv5z33R5vtEBgOBJ1BwfHA=\r\n=9n2R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"798b971e4245f3c3ed8dbe3555c22012caa97b2d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.1-dev.798b971e4_1669901492779_0.8098123412382296","host":"s3://npm-registry-packages"}},"1.53.1-dev.66676ac16":{"name":"@dts-stn/service-canada-design-system","version":"1.53.1-dev.66676ac16","_id":"@dts-stn/service-canada-design-system@1.53.1-dev.66676ac16","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"1c21e58d7f3d533cb13e7925617478d66f9d0316","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.1-dev.66676ac16.tgz","fileCount":9,"integrity":"sha512-kt/U1t1qAC8hQanMiQWb1De4VvW8cpcM4IaebJ1NUItcTy+GL/lbiz6G5pzWohx/0VBW1WEkZpz+eYPeodzOyQ==","signatures":[{"sig":"MEUCIFD6B1V7VYvqr0VNvbftLnt3KTqDfRLl2CjW4AAtsiBKAiEAselI9rNM7M/CBkkhM2MKDkiWiyycjKEuW6T/xxbiQAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjimH8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq27BAAm7HwUwrsHRHlyF7LutfZ1gAxaUJAQmc3Dsn7SEfpwGBV3cri\r\n4jDAtBVe5oSY0r8vB70zysbJnL0fJq9glQh7GKkf8BODMYIY3AK4UrllFMfw\r\nvf5HU2sIw7yBzuwbHC7zkO8Sb8ujL7vLcfN0mCpqkilH5ovi6MSRgGgUgZgP\r\nzsU8r/4oqGvH/sxfqj+fxah8o8Ype3ZpnUN9tL/h4EQIdIM8b83Y2Kc8HyOO\r\nQhL5KcLF9xgVjYzriJq/NELqLVhepotJZBhqat8JUKoHNa5CogE8tFdquVW9\r\nbg0ge+ZAb5AeZJaFFSyryiRbuoGxxlmlWSdXt5MwpXoLuiBcICNMJG8sFaPA\r\nv2VOL/2LGlDXG7T5YDG8kHeQElxdWHFtL3lJm7aeJrHPwe9JNMeVvs00D2zd\r\ns6ZcNxApazXTHvVnghUfcBaUX1qCjcL/gwLa/+IxdkXiFQ59XVCiCnWKXHDz\r\nO34LRDl1gmEKql2ZawBTBIynzfV6Zu4JuR/b/+4A8CQpwng7ygnuyK3oOZ6L\r\n1aW/k6dWsUy4N2RiP7leFGkEC+138JV74ma216Mn82p52C9AaBmfxl38WEdt\r\nZGjj4JgmwDv0F+o9b/zTjGWZjDsMqYCC6WYV8Sg4bY7SPFJJADjnjyTx95Wm\r\npx1D4C/4nVkhx9boRuoECYlTYYz7oxJmVKQ=\r\n=Ij2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"66676ac16551ff77597e1d73a4e85db65acdd263","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.1-dev.66676ac16_1670013436356_0.06754268038334521","host":"s3://npm-registry-packages"}},"1.53.1":{"name":"@dts-stn/service-canada-design-system","version":"1.53.1","_id":"@dts-stn/service-canada-design-system@1.53.1","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"a1ed3ae87b5b87c36f38ac172f7351886d8ae378","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.1.tgz","fileCount":9,"integrity":"sha512-DcPU8y22+dKSWTd+pnyt7FzyIrZjV49ZE1wlTTP2KoBNp12vv+lx/vvVGR0iDiQyE4afOfHelWw1etzJt4i4Xw==","signatures":[{"sig":"MEYCIQDKDq7MayxsoivIK1UpUCxlK6u3tuCLOjLlLsDljwtz8gIhAJzXIR/MD6mli0b3Zta3jOfj5hhqL8WusLvgR9R65IU7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjimbQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWfxAAoNNUgEogp5jU29pYNT9XSYkzwXQNd+e9S9eckONyo1O/dFWl\r\nb4WU3Wgqy4QCfwe2wz+T7i+m9lPo20cVVP080ViX/01gb5yZuQNEWw241pge\r\nWKJ+s6+uW8g94eAKyRSEi9YrHOGJ162Xu9dpXDnZ8PP58DodG7OvQyWo3DkQ\r\ncNr6bmyZRNeBs7mpwNrBsq49i+7UV+EoRKlppO6/gwRl6j48bL869WYGBI3W\r\nH0YKBjCiiIQEqdFYk+2HbzrSNEkbxjU3PO8ATKXs1j+TheKSp98b/PdG8dIS\r\nu85rxkKrSOmamSeIMS8cbGEx9T2ONeW0lu1/bUgXBToOAhdRWiDzMaNQzyP0\r\nFjTbQZBroTmkURqW1fSjt8/1qyJF6iokqBa0fJXaZp210yeG+yCfz4KXlwVq\r\nLjgh1c46Fen1x6TXrCxWrZz0p5cie8GFWzQaRt7VE4hlbguVLMua2Q/932eP\r\ncappUzRfOgs4i9YjOKpq2IVxzLwTOi2+nvFIaGe7ckT8SvN/U948igvhfGd7\r\nHbRS5nFniejEB5JAz0roKjHXwmOGgV/gu2NlPl7azM/a/A27wkaGyA9Jw39s\r\ncMPHfo/bjzDDtcW3xqbL0t4LgMtyAf6GnD/75WC7docUfKg8tL/GVjserHQ7\r\nHfB0f/CiRBiT+6hHaCTxFjpfskNi5TvQEYo=\r\n=WFv+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"8cdecbefbc7b1d69d8b7ad564a73eebf1ae75456","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.1_1670014672205_0.14891525287571916","host":"s3://npm-registry-packages"}},"1.53.2-dev.4acc0ea54":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.4acc0ea54","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.4acc0ea54","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"054604749a1c695a5cb261d93c3533743a60fa23","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.4acc0ea54.tgz","fileCount":9,"integrity":"sha512-7Je8zRAv2CMYit8makiMeL1Dk7jgDbcRO/eEuIV3R0JSBQJ3Oxp1MX4uowu0A/krmPFHqBrEH+sE8PfEu3Limw==","signatures":[{"sig":"MEYCIQCHVHl1tNWnzr6GRVsS008v4Ymx4lhfss0sntAtiDdhJQIhAMTe0kWmi7F7p14w+Pc8NJ0Yp9C7epGqOcc6jeuLGGXJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmK4YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6ZQ//R/bBXJCI7k+4Ue54ludFuXqHOCeTTF5tkkCPmeNVTKRUG9jN\r\n+Y0hJ1+G5aebahRb4pQavC1Yld65y66a5tenF8GRLfYKv99yL9RBzx5VhvRv\r\nhX1fFuvYGUiTckQ0jKOejFN4leKw8DHGit23GAQJAoS7yYVvFUidOk5QpZ0u\r\nUqQw91Lp5RcIkAbkwqyhmPEhO4jaTMwUq+Gal8nZqI+53qnJlyywCNCXeC0a\r\nzIrJjIQWubYe6LS674ag8Z5RO2S/1hQNSbSIFoNxCOpfijtoBBBTdxp+GlPS\r\nrzhzSqJTCNddzohoVhD1r7N6pQk+kBLyzK5iEFLsg1p21f4n76G3rmCdZgHL\r\nB3ffF1Pqp5YyeI+/daEV4NaEpFAZVq9smcPWBihANxccFu3Rtl7nHe584i/q\r\nIOCGwm/ha5xK6Skvsw7oLSA1uFn32WAzcbMTm59ecWKaLbXDuf1xcx/t/54a\r\nYMlmHSDUuQfxhWSpeBmkXrd2Y0IAH/vLjsUNY68qSCbzcDiWMWsuw4Bkzdlv\r\nQGocNj6V2+45zNq6dRnvD0m+IxZnhAR1oU0HVEcTMALVzgnMIee9CsnX3u7S\r\nmS0vByj9FMwHQ7Q0Yncf0wKZna/R7che5Z0NtkPL033qQjz4X8EgVFClPlbO\r\n2CORz8Be63q0xbl5npukkReHJlDZSqx5DqQ=\r\n=2Ytu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"4acc0ea5425eb2214f17e6993f016ac0c48df5a0","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.4acc0ea54_1670950424202_0.5327823336375737","host":"s3://npm-registry-packages"}},"1.53.2-dev.e64669b00":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.e64669b00","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.e64669b00","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"089e423522f78fd59050211e13a09b5763458a0d","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.e64669b00.tgz","fileCount":9,"integrity":"sha512-qDEAELLSwWRjbPCXljM86qOtnrG9KCcZQlGnJMYpFRrFW+eBQhviT6rDhlmmJcmQZil9H6vbUphj9jH5OY85Jw==","signatures":[{"sig":"MEUCIQCWT1SuVEOGIl5vE5EfZNrhcg6JnTqZGXuOFflw0T1tWwIgHrOIBCsQZCEfnyPkRY62MA/H6J8jGxEiRdNmexivqCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmMh3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/rQ/8CnsFJ+C01BAAErQhzCGqcW2VvCuLC4w1OPNbsk+6e/jgBmIu\r\njQgkPufLBW3yvwVvz/KiwqfZnPbSYtNRlxGRJEua7oXK3MPGuZwQ1Tea5bFh\r\nKuIgREjGz9x9tjKN9gvP/p4u2avtPQrp7cU+bCB4+4ARP0pJxWvKltB4/7pm\r\nLLcnP8qvlmjQI8fnJ7ElT8rWCrytQx3kD5Q4ATlUGQbKWL25o7Ieqtx8Y7k7\r\nVsfDqbLHVLfR40JYdQDw4cUCH4oOyOdFb6LiQZ+XHMvjshjcNY1qfdaoQ1+4\r\ni36ezJ/AEA3ANWA2Ql6IU2h27b4kpqQc2HC2Gr2KbHTsqg/i5HCiruOn8CUr\r\n6yCtnTQryMwbgv4VKs0FRZsvFHX0VsuitslvS6r5M1qwSKf2YNJ4+oQtkopN\r\n0C9axhmaOn9vwpC3qPJd08WlgF3B+/jS/XMOWFDhY/Xj7lUd0BvYrvTq8Pbo\r\n0TnZ4fs1grk2lBOz/wsaYCFnbMKctkD4DQCNu3EP5A8KfGn85+qdMkGtl8fs\r\nzqSsHjktgXLaxMsGZjJ4Ngzp4rh/J8z5cE6EfNRfs6qhgbHUbwhqq7kwcE8T\r\nrPp9id43uSQNTujMewBdUO3i3iH+gPnSrj97+CxFoNVZyhnqBH/1sl1AF7TD\r\n9gdq0Gf7WAXIDx7Umhbk1CNxQmIgS36kZNE=\r\n=4ljn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"e64669b00e4ca34d85b6207124b423f378428216","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.e64669b00_1670957175512_0.891745446232612","host":"s3://npm-registry-packages"}},"1.53.2-dev.d748ddc50":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.d748ddc50","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.d748ddc50","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7e09aa735022da01f0644fab2daf5e9addbdb8e7","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.d748ddc50.tgz","fileCount":9,"integrity":"sha512-C4RI2uOjCdqg/r7JYdJmL4dFizJyJOotKUWK9XhjaitLD8rWrRTIKGm8ivwI5WQIBiK3IDouJrQ0b1/AZgIwbw==","signatures":[{"sig":"MEQCIGaW2PW8NpVn4fmUZwg3OI6Ks8/xgCA2YY40bMvQLYNTAiAsg+5jCz38TotI2LIQi7tnZwuEoODqTsr5ucqGUqq/Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmM4/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVow//chkWOQICD6HYOGMYP2PIi8nYxTylVd7W8LxjVrLwJeq2PIHL\r\nLl92455DbeI3FRJLtx4f9kU8Ha+C473XBf5slKHAAzpMPQSyVA1cithQZYYR\r\n5e/gVPKzQBLkh0FFtcux+dA95Qe5VzTS+NtRig7PHl5pNcxrvjSEThQcYucZ\r\nI/G/zfkb5K9dH97djTdRhojMKg/tRVCH66uUeajLsQOulEST1b+FFB7rpnIB\r\nF5Ti2O+/IuIExXeBMFPsMirFnozZbfxd2nLJLtnKL1xm/N/Z7rWNrD11f/Bb\r\nXUDi9Qh+cKMriG53qp6l9hYQu/wXc48DkIegSeH6pnOlL1IZV7Vb/zRxRJOl\r\n01+15i1/5bS+Eu3seOur4JNQ9VrHjpDElSHHu5RYGMnGArj0HLXc7Fc0zNLB\r\nPxKg0UV/B7IK0pDw0f6fB2PPwARuAo/65eaE9K88phVHUoowaGht3inKpxNg\r\nUlHWDsRlqFV8uPgpxdCJav1Z7ZCbZ4NqGLT8I6xCouu7DXFtQ6bQjMMT74sW\r\nfK1Pa36yPThHFVgZwHnjSs/ezr2x+66IAkMkMVWWmeX7ON1fD/L907Tj/AS7\r\nTA13Aulyap/1tpDLHbXhFyBJidC8IdPvCZjwYqs90PpgGsRtWBrLQ06eTBnh\r\nlMu6OENVppZbwIAceoTSyIHcNnCk2p+ZjOQ=\r\n=U7Fc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"d748ddc5057bfc5339deb3c1a04b1a769cefb4d7","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.d748ddc50_1670958655043_0.05116306997447939","host":"s3://npm-registry-packages"}},"1.53.2-dev.f2dd32111":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.f2dd32111","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.f2dd32111","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"c5b8cdac334c3b2279532a51e7d2e766738b573b","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.f2dd32111.tgz","fileCount":9,"integrity":"sha512-IW6S0qwgaXuJ8w+5TWORvuesWl3SMDFtC9/0ZMv/uHuoXnt9cXGnJFp+FslwULGFKL+mlsB2b2UjZW0bmKQFuw==","signatures":[{"sig":"MEUCIQCoQ2zJXkKTI61vPnAJmdK8ZJzk969FBAGibbgsUeReogIgCf3sgHLkBt/tqf2sDV6cbaGLV79HlRMRlo4+/FNLvVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoNYzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOAA//YI9kEK0UnHa8d2jhOQoIwBqvb+ISQj2gjODH+3vnBU+18KFl\r\nwghr6Z692zaKBDsFzSAGRzjOZS9BGwWcAyrLnBKZq4xZyCT+HAlZwcId+sVi\r\ndcOIDOyj1c2ulKO9gvBytfminHvZ4ubmtTFIMStZFka2pMphRMTq1L68LOY6\r\n1DSn4fdu1qRWT27MhJrFOWPfSusA37w9GhDrXC1kHESjPCzAVUMmHg9XAnfs\r\niGXHOFiTSyfLV+YsYrvL0SjIATByk3y8r/GIOyDyZGOquoJ00rzonIK5f/hC\r\ngKwSR8uQterc7GHFa6n9THyBzI/NjnU4/ajfnvWojOPnyDYwiHo/8skEF2Ct\r\ncylYo0IyHAl3ZrCUmSktXFqMn40n6uuh+b5jg7BNN63lotDAvGuKnFeVHmHt\r\nSc3cF8f4YVBkz8lsDjGNPfosl/WVSem/NG1UWE9XHKRQDAE/GUoMlWRjTSiP\r\nSwgtLbRO+6KNEJa1zv/V+VHghLSNiBFPIr83e266+P9UwmQnEAkh3pXjlmnU\r\nHYV6RJPRDPkvHVoCTGJGHpujEMwzxbjC2gJWletqZPHNnAFvBvEET99mu/ge\r\nlfari2RLC2QkPKOmMUCu8YM/K7GwhPvts5gvxOU4hkdLM8m8+Xa6nUyTurnZ\r\nzbND3kfZqiAh1M4LjQxwhNGrWWE0FcqDkW4=\r\n=mvYv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"f2dd32111754ec81a68c577f04163f9eeac7493b","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.13.2","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.f2dd32111_1671484979541_0.4476968457922563","host":"s3://npm-registry-packages"}},"1.53.2-dev.5c2a062ea":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.5c2a062ea","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.5c2a062ea","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8b29d70517baa0631bd650e37b3e639b5927eb5a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.5c2a062ea.tgz","fileCount":9,"integrity":"sha512-49f2oo19OlrfOz6ebhXbgJ15G36hRJFZ+5wlTaBOY50WmbnrUvpx9OJANvjWybJmmfI1ihi0vaAmh1RaXL1guw==","signatures":[{"sig":"MEYCIQDAyDZUcNwmU525OQd51jAsFVEQ9fyBRQT1vNwGR70T4gIhAPLrmOmBRr8i+DGn6DyLMhvT1AH0nqiqcLUJtJOfRzPu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjob8qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGOA//d7Z+OXK9D8bdC08XcKj9Bf2/22DLtpApJs/yoY58+Wx2X4g1\r\ndzEFQ/2eQ1lDtN1W56ngsTMiOpBHUInfLXbACl6Am/6FnFNISiVlZ1dyRCKN\r\nhYG6Li9wFOvovGp+TxYHvR1O5MXANKiRp0S2abjZJBh/+CjdZtu5nL3/qLpD\r\nacPeS7VjYcdRUU4ugniG39p5qdp9oouclX8oNxxdlG2BB4f7HTIg4Z2Z2qHE\r\nsfwM3zMGOK+C/gIkQjc0BBJG1fCSZEfO2Bw57hE/1z6z0VsRV+aKimgiI6np\r\n+RdBRZVcmOj+DLb/AzVSW+lHbI2OdQaaGPwhHQDjF9g764R0C/En7uz1aj5H\r\n1cvujWxdgkId+axfeqRNKvqcyUqlwuOSzl1yoRQXL/CTDfpjopdKMTDHdHAe\r\nFik9nclyyA7N9orGoUVKATQ10jpVXqAeag7KHJ6FEZgnoXScVEUFQ/dg9ggI\r\n1//Cthsss7Z7PelB2nNEG00fwkcuxEqAWOULekp5JNSIr+W8RB2aWpMx0bbw\r\nOnA2riMZznL9tg/CMF5Pp70b7TJmWFzKM/j9tWcyNSa9Q0KyujfYADU7U07y\r\n6xjJGD+lR0UszIL793P6qIBo3FgXlicbffXErcmdhubqOIkaeHKKcKgfqDvB\r\nU+0UIAiCygmRN++RVgrrZx2GxJ7VX/fpf+E=\r\n=w7NP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"5c2a062ea5bda2a43a9d26287d0e1b35932d18f3","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.5c2a062ea_1671544617818_0.2929836424645953","host":"s3://npm-registry-packages"}},"1.53.2-dev.7b21bfda6":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.7b21bfda6","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.7b21bfda6","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"0794346547e90e3dacb74436b5400a25561808e4","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.7b21bfda6.tgz","fileCount":9,"integrity":"sha512-ShwKBM0ml6BqbNX35nZTfpCXGxXCmc0K+UhHNgvaADdCtZ0z+ysTlYHt4pXZPqRk8TKpmAA03u3+hFBTYpdNWw==","signatures":[{"sig":"MEQCIBBzxYwLKCFa/+xEqim3SSC6HHbgHZZSVbkqon9QkKdnAiBcvpDjvOzbTwIKUPz/vOzrXg4yGfbOVdxkw4VSp2+BVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjocMQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0fhAAgdu7kA2IHeCiPWQaf8qNytUXQc0y3Y5QJSUXVVkK9QH9gZb9\r\nE7NguMm+mFyc7Lbs7Ii/JFszbC+cP70SP7fZOYXu+glQxfiyywfxQiB9kB9t\r\n/OG41j0DfUsGQ2hS2FEJcdPZl45z1iEmRRbGgb8NWXzPiKkgI7MK0Jw1Ry5N\r\n/MZzPSMZayJlCikA99t7XCZAC8JAaaeYQrInp1fTddZVa0LHSPToiJoppmBE\r\nqr5YmHLL0Prst4xyaIHIU5es6otiG0+nMywdxxnhw54Q6bdfmUV7MMXPUmgN\r\nasH5MKuBxfTq3CmUd/QtykdvZXTLol8fAQdRZihw5o/7dp9pemHY7HGO0ovc\r\n+eBvigxveLDGUUI6C70eAjhJzyGFtH8/sozvkqZJFdCvk8dpA5DVZlN+AV8j\r\nDiA1J++JDMPB7MZVXT8oRj0Of9M4U/K9lZLKSr/vojHfWH9h5LktIFuK76Cx\r\nu1ChcCT8rYQyyaSvXtC08Zqon01SKXAcvvYrHfUWxegPNi+mTyvbCH7djrxW\r\n17GSpOz2HEcdJ9OtY5LAFG8WWbYpifYWMLRVgyZ4LYjNKa3FMHuPWU+X6Tjv\r\nB+1pl1JuGtPGnDa+xRLbTRHcePkKDPaU4aMoo6BGhoEswKLj6bcYNNLsL7X3\r\nC+nxJ6QSaiJmDcqQJhpDwU1Sy18LQ3S1g14=\r\n=XslU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"7b21bfda6a1067ac06a667bc0eba0a17f66e07fa","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.7b21bfda6_1671545616128_0.6209839019606145","host":"s3://npm-registry-packages"}},"1.53.2-dev.6713cc943":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.6713cc943","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.6713cc943","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2354e979eedd1fc0d350d59a3444d5c6f5b9792a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.6713cc943.tgz","fileCount":9,"integrity":"sha512-6yOjJzjB3O+k3n46urmzObWLia8wAq/l0EkGUCAFrg6n5tccPO6fTL8X8dIHcQXlXIKtmC0htUlKPekyU7PmZw==","signatures":[{"sig":"MEUCIHSccULVF4gVInKA7rYbXESLIXPtwzjyuOyAKU9LdD09AiEAlFnz4faHGqbQ+wap79NMKoLvY8yh54CIEfeNO+UBfs8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoxz9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSSBAAlgqebEx27MvGn/ITpBTCqdOsBxr6ZJKkfNgTnLSjXsbOeKGH\r\nUSdj/yeKi/jhD/om2jORudtN8VnwTMKSZcCypdsjIRSOv/ZFaVoaMVlbQxXz\r\nM7A8bElFQBeEUFgx7eGDT2qMCmNRlkJOHer3Oe2U8RCRSTmy8oSCZXdxtf9j\r\njuBf+JIRaE7qssCJr2P2CTOkBXgLoxg8x1pGs1UPYgYJdhZebhra9H8zPEfH\r\ndSjKAlxR+7qqhk0tbfg36YlyAYRGLS8mHymLptNxGqLrf5jbYPWwGvr7Ldeq\r\nqY/92U04/88Zpxjg72O1VuKVQ6E1NzMBSrPZrSitwlfk0I8DIDoCI42W8EgU\r\niDcGpDYceja3/yzfSB60hpZbQW/zMXZniL/SIssWAdyAwGSR9CCwdHdH87JZ\r\niEvMUh7hEz+/QLd9OneDnjw2hpT2Z6iiUQzGeR+yqhciPCWY0qZMDgfX/smz\r\n9LwqdUy37u/7MK7cmaW+wSLvWVd8WqPWcqynSvgosErb5MONCXoDWYBhaSRz\r\nHsWwTMwSRMF0Ia38Uu+yvybBpWwONjKZOZmANqVNPrSFJuYjhXvvVp+9/2pH\r\nRV9kNTxeqQH7Nzv0/xO3gGlKHSZ1+hTuNkr2ve98Ck5pS5QEQ4jzForcSbHf\r\nDXaYovSEv1Pb8PtJN7crj0avlqOLwC8pKVU=\r\n=hTWo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"6713cc943a8e61e62791040ff507ccd13bd923fd","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.6713cc943_1671634173606_0.7784761999937146","host":"s3://npm-registry-packages"}},"1.53.2-dev.944bfa4df":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.944bfa4df","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.944bfa4df","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8e1fb22d8f9b7c230e4f521e3d0d8a7144d76ee3","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.944bfa4df.tgz","fileCount":9,"integrity":"sha512-fauaAU0IBOnK9UglsM4YRgAaM9QyihlaOww2Tk5QaqEomi3gXCnqwpMPCFpdVBgqr7ySugBppbf97/c72FRO2A==","signatures":[{"sig":"MEUCIQCFw+1oWj3edDJs/uvHkf0EiCBsxUh3/nz7KaRr+ZFmTAIgGdAK2o5J5hCRvo3INWPVQ5bCQdDQhFlUmGSGSjEiI+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoy5dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4GQ//VsVMvaffseFV9jUVP/egkW9FzlPMrkb0jVSGFT3q4nGClXeK\r\nB68Mj/zoSAWpaqG8yV6id35xCGJAYm8hlnzNolobgRisHN0cm4Jr5zGO+QI/\r\nM94l1sx4RZE1pT5nK9TWkpb4MwxPqfVHoK1Oe7Uy+4u8sWQgvXQyYbvYYMXd\r\nZlhiRYw+Kxmy3KuFXaLNfcq9fzhCKmtRseUXYVvNRkFu5I8P5piQz5DwPMuZ\r\nNmsBtkVDIVo2zKuSLPeIlRlDAhBvpTluKtxYUckbsB2K6oRsLr8M0DvjpY+T\r\nvjxPAGZy4jYz07hCmW/99mBtrHr7lS9iSXmiNrxE7f4YzcO16K+6ry+chRRV\r\nqC2KK52/oCKAOHIzzeZrTk294ce0Nw3JyNPtuUfSjJMCTaT0ceitCGA6iWBP\r\nMmhbj6Eo41owViJ2/gSIgQLDOE3GHHsMokf7OC/Gup9S/xxgThrJEdPIb5K4\r\ntfGqnaBKtBnvG4Wn25JgcWOLvu14koapU7JgXezb9Oux/schewygs+IPGQN1\r\nXwZEaYmnXfYurS1Lgk/WBENOXhshvw7umoNPdS5iohn2wUV6odOGIrYsALGO\r\nVCRUQY0G1iHLeuZ+wA/YYN9SPfppNIPsJ9JbWf/t8s0IjnPe7QCq4fiUpyVX\r\nTzrLU+d2bN4CSP9k+P7OYOEKo8lm+MZZdHU=\r\n=7N1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"944bfa4df73cac90d54d9e2ef2e4fdaf92358761","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"5","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.8","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.8","@storybook/addon-docs":"^6.5.8","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.8","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.8","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.8","@storybook/builder-webpack5":"^6.5.8","@storybook/manager-webpack5":"^6.5.8","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.0.0","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.944bfa4df_1671638621082_0.5086639880701482","host":"s3://npm-registry-packages"}},"1.53.2-dev.9eee86f0c":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.9eee86f0c","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.9eee86f0c","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5e371962238a783fb157e3bead8ffa7fc5354c3f","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.9eee86f0c.tgz","fileCount":9,"integrity":"sha512-l5oUQcQRf9eBzWM8Gpk/NTnRQxSBFH3Zcm3X9QjQA6ZgGxtucc6isShBu0CCwgbRRi9pUkJu/IQfTdY3zelrvw==","signatures":[{"sig":"MEQCIFxk59IwY0zDnojPcqCxDg6Hx8ryqVLhDerAlK/MJ+Q2AiB7Flv22HFZ9bolG4KT/7+V2jKgSZxM3sJ4PENTZ/GFDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwwxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrh/Q/+MrDVietiEX9KCrLzAOHBbNM8du9/o7mwmKNqIZjGI0q69e71\r\nwvgyqjcMvbovDs/iCEKIXVUgwmcWR1uGPP0jpzXpqOI/qyck7pI7fJ2rvyje\r\nxGKAXpblEwHxl/ZsdgjYIVrL5Etm+6WnnPqndGjqEkUXhS7814uooAgW+Lhv\r\nA1vVdOxNG0iv+kz6AZnDy2JqTxUXsshRlPj1H3dpTEa1btv7YTKGPDCzOSbq\r\nfuDHGWIqYU/C5c1PeR+Qt1EyqqF2D5bDmiWVy7Gd2XkXZ/aqmr24E207TSYD\r\ntLYeYN0uDGtYmnTQuI+6Um60OSKLLxpXoDvozliw0Q6OBaq4b3JPjovwJAQR\r\nnznDC2sYhiU73Eg5tst2ahHHgNOa+XZAzUnVEup918mpXgkvsP2HHyVdNbfD\r\n5KO7YIwE02F6yKsTRIxJxMRVrLAE6xEpqcCcJHESeo79bfO1dzOYDl09vjOb\r\nwNcgnO/kHDuVEiDL8fI1UT1R187YW3ipq+WgsVZogRUfMM89ZJqSfLau9sMZ\r\nh5rOwEj/tLt0ERayNX7eYBNoa51gGqsvJPn1hxpzuCwH8azshfyFTfX7ekt3\r\nih/F3zFWM7qHPZUF3eNDMFQ+H/8tzFHrYAQP/rSJo44HnuCDFsEu7zIJ3MJW\r\nr43deBBU6xt5SkISVkQ8lfSV0u+7o6x75Z0=\r\n=5O8j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"9eee86f0c319af31eba34dca048741a4a7f5e3d6","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.3","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.9eee86f0c_1673464881678_0.6686589639589344","host":"s3://npm-registry-packages"}},"1.53.2-dev.856c562ab":{"name":"@dts-stn/service-canada-design-system","version":"1.53.2-dev.856c562ab","_id":"@dts-stn/service-canada-design-system@1.53.2-dev.856c562ab","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"c7c9d81abba4f2c125f830e672c5dda470c4ec41","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.2-dev.856c562ab.tgz","fileCount":9,"integrity":"sha512-xQJtAy9Y5bypcJa1m9fIH+YTOhG9aCak4FnsyB66io6GRBuDxeWnWvPkspuQD6NXeZD1sHixkKlN25Zkw22+DA==","signatures":[{"sig":"MEYCIQCsmezOtsAxbpIpZX062Z3L7kg6tfvO6OBSxThKqwFP5AIhAKYUHKHaKT+bg18axdqzvwTSzS0I1ZF9sjNmTz337xXC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvw8TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Xw//RzYF8u9bNWhOQEziq+QCkNbeSFbgAM1Cfigc1qkFn/lfdY9Q\r\n3DVAag95AqMIA/G9IDE95hOHD6qsjsD2HdbJgIMnPzmyrrKQkeFQzn+R8SrY\r\nxFFzJtUZb5KwlN0GBebrKQMtS5hBYweu0zLmyY9VbMihE4n2YmRCSQZ5Rr8y\r\ntsVuMyj2D9GghKWCXeRhdyQbzZ8wclkP0WepqDo/AJN00y8+OK5N+qxllB5e\r\nBZmtJEKPnV1uk9gOEjtGRWiN/LStkxYcXneAstA7PmyB2w0qaO6CmuAEW6uv\r\ngX5XwKCTLcDxIAcRs3U/6IXbBg2gbM0y3+sZbtgjAVLa+FveFQIYdle0LfbA\r\nASyO98qKYxjdU3YBBx7f7lmTY6/VlbUYoX/XJ1UiEVEHV6LMAdVwtwBNQFSQ\r\nz1YJznRLZnUOjd3xnSGqNdEjpHJDFYancfIPf0DgxQqPei4kPfpUmwRhrj90\r\nYMIl4zjXzQ2wrp7GR9TArI/+KDvW8TMca5IHjg8AIDrMxn6kAzFmsiiV4GKn\r\noIP8/7uatNZIHPG8lhjHRv/PihveXy4zns3q2Odd/pIkrI0oWwCp+VrR5YG6\r\nWhum1I2CwViA2UlZfNyxaHWp1di32P+dOBMLhUne8jlJNvigHcuZds4d/1Wq\r\nuBdMy38K172oRironW0zAMfhC3kZToYCTBQ=\r\n=wkOg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada)\n","gitHead":"856c562abfe24f8abc6e0e350d2351f4ac59df63","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.2-dev.856c562ab_1673465619519_0.2501561630897464","host":"s3://npm-registry-packages"}},"1.0.1-dev.8e91cb63d":{"name":"@dts-stn/service-canada-design-system","version":"1.0.1-dev.8e91cb63d","_id":"@dts-stn/service-canada-design-system@1.0.1-dev.8e91cb63d","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"51080cebe72df465152e538b5e038eaf88e3f800","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.0.1-dev.8e91cb63d.tgz","fileCount":9,"integrity":"sha512-vXGsMRzEmyW5JvLHUH4fvbB7EL+vbWXuOkQKkj2sFgD0lzj07ExAWBijHSYR/Ywmmn8p3nBM2OjYWc7yQkQhVQ==","signatures":[{"sig":"MEUCIQDtoWcqhfC0m6DUigodaWEU7UwSuD6USoey/s2Q6cslYwIgXmNd1qqRhWpGo3L3908EKojXoAO0pQlKLrD07GVCcKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvx+uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZtg/5ADkmGGhFMsE2uncpTEIfldbklDScP16IR0sePnHiZgE3/pjo\r\nOon+IIWY9SAZpLzczGd+m9fUtrkjGFn0vRjIEEAUwfZ0h1XbESLsjs6JRRSB\r\nVH1Di1zVrghc9WEcNcw+ag5KKv0QECzPxFfUuCzBC2Av+fAIVvgpNIh8YP4k\r\njMcLqrhjaew935stKhTDxlpNg6+siEd1zRUpU5+otrgF4/c64bi+cbYbhaHX\r\nKSX6mjCoFbc4IOGdwoCPDQE1kVHFyPij+r6kXrr7IoTBWYOyagw5qHt+qL9W\r\nDqN68x1aAS8hWYIu44L1FrhuBz8/R1EH6tokIS3LG0sqVRFOVVFmwZ8t5Tzz\r\nm1D7OncRVfmHKi0bOxw+urfjCm03fHzfpYmUNZkONAL4Xzy8sLwBv0RenPi2\r\npWSWqjEm0KLmAXuXWvFsvNpKACGXIik6WAuZ35pKugvzOFIX6XOmBeAAsowy\r\nsLyLZxiyut5RNEquX9DJhn/tZhgEgSAyTdJfv3we2qpgj2sxcMKkr72EYugC\r\nRwR4C3POaO007m8wIFlg9yVuUSjgVl++QFKC9iol75O5RS6SqMyYTSvB4Le/\r\nZEpF+jXWiuPOS6ktKX3Z9yR47+L4zwYqebchBzYW+T/aNdSMBoy72gbqdSjt\r\n+HdaSvWf/JGZicuM97bH/W5nzO9JGBSVlUI=\r\n=bLug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library ๐ŸŽจ\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution ๐Ÿ‘จ๐Ÿฝโ€๐Ÿ’ป๐Ÿ‘ฉ๐Ÿฝโ€๐Ÿ’ป\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"8e91cb63d0cdef0a4ced5230c2419ed724a5ec3b","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.0.1-dev.8e91cb63d_1673469870160_0.10101654157723394","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@dts-stn/service-canada-design-system","version":"1.0.1","_id":"@dts-stn/service-canada-design-system@1.0.1","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7b888e04b9dcd0485589a9acc3272eb4d57573d9","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.0.1.tgz","fileCount":9,"integrity":"sha512-Aw+P1tWZd3lN4IkWa1/TqJZ1nown9TUmBreaVcgIP+BZICVc8pCkhdnCttuRyq0uwHteSiacnvisQxTV7BCrsA==","signatures":[{"sig":"MEQCIDbl9ru8xPNnqGRWy0WH3Q6YFYLRt0nRnUacu424vsWeAiAxgpbvZuhNK+HFTByM3dfU03pDGqHotNNfEVQohPTdMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvydWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvCRAAjxb+Jj2eVM0BxDYenJLgig5Nknd1tvDuDSJ1jmXeEOd/Atkh\r\nDt3Dwn9DOqaIXvU+orhjALB0RKU7+FJSshR7CnFhL31aBNImVjtZJ57AkLbB\r\nq/ZiB4T/KxqWwyCkxQB+227chsJ+HTHGaDzW9iBXz07Ya/2LgI8fWEOmShMK\r\nvsp2eEYGIFw08mdPv36qqYFzgryigSkTLq8zLzXtx2xSq9YwJfrMV7TbQIQO\r\n9yYgfvI39u3XuWSgnTq1xHqFJFLWVPbMmlzAS9xV89c0tjFyjqxoeTQGb7ot\r\nL9qhhkJehlddpcsvzw74bcS02oaHzgR5R8G8TkpVnHdcvd/Txo68wRYDmPBr\r\nQO8oiuGct+9P4nG3U/eGdnqS1nk2qZV47CDxTeZC37h2ssC+rcUA0sx1zt+m\r\nkONftnRgSk5PKAftYBW8+QOWnW3QaZxITM5ZXKknyXH/QnMN2RD2ElBdoruO\r\nyKLTL9GswADgvWaUXmGuPDYTYzJBYiid3vv05noPa+z1U+X9peujZwpM5jxx\r\n0tIsgH4zpJBgWslm5/4+ucaMLVqsSQtShzFFdZjUBRxrKXByRG8MskqfsYV/\r\nU2WWfG4uUSgpp3cYxofTCUkklXyxBzJB/lJl+GYSLQ6E3Ur+EwFQs4PgDzw6\r\nU74OGI8dnzq/rN9TvrPrtMhcH05EEbyRk6M=\r\n=Hb8M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"2455a3954289cdcafaf2ed523a6c8e6d6d2723d6","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.0.1_1673471829911_0.7121256178955793","host":"s3://npm-registry-packages"}},"1.0.2-dev.cf515cf49":{"name":"@dts-stn/service-canada-design-system","version":"1.0.2-dev.cf515cf49","_id":"@dts-stn/service-canada-design-system@1.0.2-dev.cf515cf49","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8388e502ce3005f8d55799647b1a4f41a476e3ef","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.0.2-dev.cf515cf49.tgz","fileCount":9,"integrity":"sha512-szqaXG/UUi8i63fRd+pK+lN3yTcSRa2PblNQtfAVZ5QeB+wk0dfa2Pn3+W1ca7wwV5kANqfZOLQyVJKDR2FNZw==","signatures":[{"sig":"MEUCIDAYd8v5PcClp3uHb58dldA+pBWmBHLVSUoGR8lg08yCAiEA7QFvCZdm8cAmUk5K+YsTdlwDQtb+cVuOZz4UpLVIx7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvysFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoLEA//ecSveDAhf8PeNnI+uJ6GFuB1hRqgkmZJlgeXelLE2smpqVAY\r\nknBYdzlmO5Ibj6Jbl6RRcA9EdbJGKs7OfFmeIMT0OVc2Fq8Vt17hq9kI4pX3\r\nGugWYMmgOTgGCRPCaUO+aDs7rUoHrXfe8dB1hQQQpTk4GVQUui49mPEDkA3o\r\n7/jvb3qaZYOt5Y6HifDp+eIYdfQSLZNyy+KHafxfFPwHuCahpg1UfwoHv6OG\r\n0EmyGZM7jhG98oMViFYFxegzzANnvGBKzg1n0ikXvRwym1o36kQZCAbFzty2\r\nyKFM7Alhg07nr+JsGIOdKoW65ECWHf7y8Wv5QMwxIIY+/fEA2//iGEEGfaj1\r\nEcqEL3Kgj4M8MM+U5vBDZXtL0F+rgkSjaX6xfKID5hNeB+mf8whX+CEn4Xpj\r\noPKsFcfoHPxlJwqQnC64qjH3NTnS3Z2EMBKDuacXl+PufnyP0ESP/RKqueek\r\nBCGZrDCd6jCXjvAsuODNLcILCSN037Kep0Uqdtk/JZ+bGGQlmoOS1IK6DN/s\r\nNu8t6/Z3eeVDLV1p7vYqwqJOzb72kiQuXWZ2mwON2PYx+qrh3+QaGyV004+H\r\nfneikcr7NYYSE6Wj+hr4qa+xmET+m2eK1CNMeULGBfBGuQYEwLnHpZPU7YOM\r\n74fMgHD/MOYhE3mzEf6/wrV9PzB5MszKJhU=\r\n=Lbkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"cf515cf490c2b2a2dbf12ad660ca91dd0d98d073","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.0.2-dev.cf515cf49_1673472773379_0.8759482851492051","host":"s3://npm-registry-packages"}},"1.53.7-dev.d9bae0247":{"name":"@dts-stn/service-canada-design-system","version":"1.53.7-dev.d9bae0247","_id":"@dts-stn/service-canada-design-system@1.53.7-dev.d9bae0247","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"18c7126280272ec800414d48429239b2c0cd0f90","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.7-dev.d9bae0247.tgz","fileCount":9,"integrity":"sha512-EVwvsGW3KGnpBHFeADQ01Ksl12qjXWxMvCi8ms0XXlbZ1XuQJeTKcNFlgnY02CqcnlcGWOSdXefDsFizE7bY1w==","signatures":[{"sig":"MEUCIQDA5GZ/A6yR68dLxmqRmLJt7sLHggHJgEsj/DaJuHsgawIgOuYU+PYJZoL8D2E2Pio4w+A8S5IdXeKM6/0u3WDCy80=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvy+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEmg/7Bt74z/pz6cGG8RWUE3Cs0oX3p4jYY74MhuonzBsegcB4YYzu\r\nY8sg7Boq1RTOR2YAELJm7Kz983HsA0gSKimMrzhD0qMYW+FAMwP9ryZ7NL+j\r\n2608TXsi49ZrdZqkeBC8RxO5nP8iUIuofZwhf4UzWWEupJl1uD0J4oNEfCkV\r\naBIV5rMW6zXNgYHCg1DKJrrQMm0nzcoiwcNDkmad63PDxk+t6ku34y7cnGMR\r\nb+QY+p9SxtbXK9rEQSuzVHEVDGNfgzNNBlYVMV1xHGxWpdTmBl+OMHumDy50\r\nkc4qJEBCD5rbH6EOEy/NBGySg8jvkQJOCvUxbUdhbqH5R6ns9zAkwt5sOnYM\r\nDZJE51xVlYfl296XYn3drnYucGIVMxUbonldHF3Hvir3f1dd6s1AW5h6sT+o\r\nG9SXttVyHNDeiPSWNrrNrniAd+FHQtx6/BNCvm5c5hJsmTQC40pvd3nKSXvd\r\nsp2nrFdPUdakpB8mV+R8ZlZerdSo0YPojMO2NV/YV4aK4xn2rNS6j/eWWNrm\r\nO7faM6neG+WCsxOf2DDlz42kJk37OBWCALUdMSdVGhJc8kpXY+KWN2YvegRf\r\nvDHgV1UkOatmL7dXcQcxzp9ITw5JYVrI9FbKPsCuY6DhlYtDMZDpGr5n9Fq+\r\nn/CEsYQi+TylPEq9js3ex/64pZquj5PTmeI=\r\n=zFOC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"d9bae02470044cd2b99b7b8e2a067a564b31b3f8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.7-dev.d9bae0247_1673473941180_0.9010505031227058","host":"s3://npm-registry-packages"}},"1.53.7-dev.5ffbf2a2a":{"name":"@dts-stn/service-canada-design-system","version":"1.53.7-dev.5ffbf2a2a","_id":"@dts-stn/service-canada-design-system@1.53.7-dev.5ffbf2a2a","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"c25f62dc5ca4a481d8ce5470fd5eeed90939e287","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.7-dev.5ffbf2a2a.tgz","fileCount":9,"integrity":"sha512-RW3UvLNTwXt74uxbs3uXZMxdGUBB4nFCL68HZyijYjsi0Aw9gS2ooEmr8r8xBdKYFqRZSYKJ1bW+dSOEdqFsnw==","signatures":[{"sig":"MEYCIQCw+SrorBSKMm1fe36mdgMi3eXnF5BS/8luAi4bGBsUewIhAJuWr040N1u6lF4XPautcI4WmWLqzqNG9H4b8ohmgW6U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzEPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmouLhAAku4rzuifg8Q3sxmrz2nkNCazmhG86N7GKQQr5r07ADfpbkeR\r\ny55hdKEpW2zfKgyrk2pDdivQN1TdZU5N13FKe1Qa7vncAniyE+YZJhc/ZSqc\r\nTGQ0XnyiR7TWmc89wLHcL9U3rhu7sxDvMud1bPgYgEMX5m1HUvLxno5f9dXK\r\nTd2NOHhK+TisXoGh0KIKKs15oOvkj0gmP7RTFhEqWNEhJYubUf9PDkDvmcsJ\r\n6PHw15Mou7m8iW+YMBkErY9QPWKlxQU2i1736JqLkOHFbSaMqbU7XKE2IQxV\r\nGlGbSvyTIOIO/8bBSo4uIXfKmuVHWS+84N8jZKs99qidD5tMsQDFrTCpj7L2\r\nTyY9szMaBTdirGu6BfZt5XeKzhkIpECyJrKOGhc8kD+ED2BF+7nyTuBIsx22\r\nFtzRMUQBZMc5GPcjKQia59/YHkR62bzYsaV9in7xqgoIHyi9mf5b/PDEmSZz\r\nr9OGRkRbLxL0qybXpj7q+WLNnA3SZtsfazEj1kHDRGywmVMtTKtqsOm29OXp\r\noJNT85sOwEn1JkLdyImASShS7zc1uHkkNBV9lfFDeFXYuHNL8FT0uVEkAybK\r\nzWrFt/Xrnaw43ffRRrq5BuS6PN0fUgb8OkA6fjXmq4M1RnnBQACOALWAFHR9\r\n1f1kYFIlTs7maBC02MvYMH/2GlT2bTDlg1k=\r\n=/5rV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS, TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"5ffbf2a2acc8e5d2418529bcfb8ac7fb8ca12748","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.7-dev.5ffbf2a2a_1673474319419_0.04352377540021268","host":"s3://npm-registry-packages"}},"1.53.7":{"name":"@dts-stn/service-canada-design-system","version":"1.53.7","_id":"@dts-stn/service-canada-design-system@1.53.7","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"17322a705db77f3355f1827614fb15d4a9e887c6","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.7.tgz","fileCount":9,"integrity":"sha512-T5zgXHFS2WuSaM4bKy6AKOJvrKgt06JY7hqSkwXbNCuExJe/1smWeQWyqUvNo1/Gq1CJfJPuoHd0jptn5lJc+g==","signatures":[{"sig":"MEUCIBeVkvr2g5OhEP2EOCs/vT27cOffj/iX/dv95HrSHW/QAiEA0diQaHB8J35Kphq11uAky5NOegN9E0iZPrE5y8RL/o4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzaGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe7A//e/xWNaFwfGT6X+sU9VLd3RtSqVWLmVr9kBfNvmevHdgpK2Yz\r\nH0F8mQhi9I74jCDv5HlZ2DXy5QmaAYglNRnV9kZG2P3NLckwEbWXv/ouiUjR\r\n0Os00um5B8p817nzyky7/QFS8dXmuzt7ZbAHTSp7gU6QBt/MJbiUepIA6SPv\r\n9DANhQtGKaXv8e3yDc1opJEwoqIAMzwj3DRZA0ULUG4VeXusx5tgwggHv1Bm\r\nht3gkpQ/H312/vbk/+MkqxwMhozFdetu+pzoVuM6uhrN6X03dCmpQ+hGR8EF\r\nDbxtaDhlHFSuFwxuaVbwRG0mRoRTMP6OmRHwZtw38W/zKBXMjZz+XKEsqcIg\r\nka1/DCSAOAXSr73TeFMz4l6G2zeqnffhFGl5aXKlqKjFSfocKKoZCZK10nUi\r\nBcqcMteEvoPEDHrulp9kb/KgfkLYRcFceXbJK0eHjYSfdnMdxNIB7+R69bHR\r\nsxZHO8y7CXtq04ldgK4H48inoVDh0gKpzoo6FknttLnFDd0WPmLLNwPgmENu\r\nML3Huz3DDPKJ/V0Hl0htm51rq7qz25bb4AfqvsDHOVGnAb2FJr2tH7C4CqMA\r\nWUIObsxv6EuI6vnzSzuEdTQz1iEK2HE7jDGRPA6tVoHdMAbwCNzn4ouNAjOy\r\nByYjItXvcwwAScE3uyfcbr0CCgtUSlrNIJo=\r\n=tfbX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"000e7a8298e5e8209979856254487c36a73d27fb","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.2","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.18.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.7_1673475717789_0.09262559326430364","host":"s3://npm-registry-packages"}},"1.53.8-dev.ace7b0f13":{"name":"@dts-stn/service-canada-design-system","version":"1.53.8-dev.ace7b0f13","_id":"@dts-stn/service-canada-design-system@1.53.8-dev.ace7b0f13","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"4b1e5df2d7f0a892103de014a14a87b72c5bf971","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.8-dev.ace7b0f13.tgz","fileCount":9,"integrity":"sha512-W+Sx1ESUD979tGLC8VDbyXrjJWfnPuVnzg+sCwZb8vd1ynMfuSzg5l2sZaVRnl0tEj+MzVZduuz+dx7A9ZC0HA==","signatures":[{"sig":"MEUCIQC2tI+YOUV1jKFbXQgTFKtgpmU38E0EfUI5AmhLuS1yPQIgIPKuWmPIdbkXy1sHkJ6VJAD5HIo5QD5OFqp+twBRHyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBW0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6MQ/+IsKWuYoFKwaAaKsY80pAbXibr8BB3tW2FXWFlkCtmJpIe4IJ\r\nZQSNd2OUjscqn+vLdnWFgvwMeytnlavZ8Eyruwhaxf6gIKiDaEtzewoN+ZrJ\r\nRpOUMCNNgUoC1nsO58k8EIGmJQYRH4NCsg/1JX7ca4MXffqbcQ6FXmhX4tAx\r\nuVR5s/x4k3DZGEo0B3h3Xb376G1HqWde7RbCYQVuQT5v4gZW51VR8u3vGsZB\r\nvvqRZpS+lSBhDDtw2tPRZu0yJSsnU42QUs6TPcMB5hIYXd8NpQRKloxJ+awZ\r\nHozKTaTGm7tfPFCQljGCgos/f3zfCRTSaRdwkeRF5gCJ8lD2/WsgwFtFbL4t\r\nwSBAizQJ+BI/JxXNiFVWtlfO6fcT5ZChrP93oX1CchqvnbvUgFftXIhCSa+O\r\n+lARYwZAy5ocf/C2qhmyPW9kfacv59PjJysoD8VjEEygPpBGTSefxn2hhV2a\r\nfb00oHHGKq04trwRj/aStHR1+8tctfugTCIOEFeTseN+I5ZGR8qBL9sMT5LM\r\nY05AiiLOLy4EvY43D4Wyi0rj+s6qvHCaxLr7tBE0oqUOTB8XMfp7YvUDVxqd\r\namDC/LxeDvKbjDE+qIq3NhLNGSLbtL25798JuI+GFb7EazJNEqYyj0+SK734\r\nfrh2BiSllwWAVXJRNgmdc9i6GNtXRueP9yU=\r\n=U8K3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS, TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"ace7b0f13fbf220867307724fb893e36b9887d1d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.8-dev.ace7b0f13_1673532852182_0.18825311301957792","host":"s3://npm-registry-packages"}},"1.53.8-dev.7063caae5":{"name":"@dts-stn/service-canada-design-system","version":"1.53.8-dev.7063caae5","_id":"@dts-stn/service-canada-design-system@1.53.8-dev.7063caae5","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"e525b1b54283a1872d5a775fb9c76fafbf0fefeb","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.8-dev.7063caae5.tgz","fileCount":9,"integrity":"sha512-IMJbuA+ug7Z1Wh7bWM1n2lCllALfrRPn7x1dJAaxIWgHGlCGQY7FGqDw/5VdM63gOsiN1TSF7UAJJGkPwgWwUg==","signatures":[{"sig":"MEUCIQD5iyA9YThxz3lt6kePenFjSxh+RXdsC9od3oDgpvH5yQIgdxkP21zCZ0pOzemFrNGN+LCCtSvlD7SxGTTnOC79drs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBjnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZNA//UH4+pdh8y9X92wDaUSEFPFLKgNnHiexTdceSLOhjXE/HzG9y\r\nLdAEQt/ofgkyFtVAailK5OEADmll3naH30QIJmXLqVQATFM4tvWlfvyvUCmY\r\nyXakADZASSZQcpQ04YwhlYNgZP7Bg0paqCvUBw+X3yF4xokw76st6lC8m+2P\r\nAIrpaivMCo9qXOnTEr/XUzuT22vfv7oXHag53CwvYjlSCIB7nOuaWuj+ntk0\r\nHcgcc0qu6ioXOv5j9iVTJRYezVRtKDRCh9A6mUPED+Ph0vZCLSFGabkzJtFD\r\nr+3rObb87bV9R+dhgwWqxdK14HPHLCpj54HT81D4OJVJDcEflQakVBwiCJbL\r\nVATBLl7zsyXCAn3JELnFwY3SmyZ3FzYZcqXl5N7CkVM4YSOjUZvIv1+s3B8J\r\npy8ssY/bSmPmNXHDL8SZSoQCqqosztdihrReto+yTsiBbOZ3EQyldZrsNigf\r\n8PeZ+ppZnEKpwtDVYkWw4Rx5kSZ9JQLv/nS/36fFC+ZQRQkqTilJbgaCkjG6\r\nVwJ5NMRLE4ojuWfu90k3uv0fVrCa0GwfmY3kNUmTBtQ90OrvyHM6pl8NoVbV\r\nBwGfpDhdtoUVxkb+BuMsESA7FRSmbFDlLokL7Abu4lH/FWdwA7Av/U+KJj8n\r\nwPHBWXJccKd9d+waRhuFeqGrBDqk3N72BTc=\r\n=WOvi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML5, CSS3+, JS, TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"7063caae521a76ee5491e8d8d84f9d473bb84882","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.8-dev.7063caae5_1673533671752_0.7163524166361503","host":"s3://npm-registry-packages"}},"1.53.8-dev.454219728":{"name":"@dts-stn/service-canada-design-system","version":"1.53.8-dev.454219728","_id":"@dts-stn/service-canada-design-system@1.53.8-dev.454219728","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"70ebd5e91aa37906acc80f23ca523be4c301f06b","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.8-dev.454219728.tgz","fileCount":9,"integrity":"sha512-naUh5PLz5NoI6sqIbRck9kfV18rYJTPs8ZWGEbPAPG9ZgdJMOH3STSDv4CmwToazmcPC5r1cI8dzF9ENMBT5yA==","signatures":[{"sig":"MEYCIQDFPcghDPr20GMGVPvSB/EHWzbHquj/i5Whdbvk3Y1zmgIhAPcOOF03V3wC44BqDis0pTKXVTgRO9bbbXhDGYjCjxY1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBy+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpx2g/9ENGOrafKyIO8bRkr9KZgGLhaYzCCEidaX0/gsFi58XQqzsjf\r\njK/L6N13PyWMy3fWJU45MOmppq1btSIR38wx93xQRrqLGnO6bbMWp1KTaFK7\r\nspRaVa5lEhUq9xaVCs96egRjbpKWcTO0UktBZD6f66TuBh69DMbokzB2CCpR\r\nCW/AtP5BN8Ho/YwH8Vg8/lqIsx65j2G4FspmDRch+R3D5iR4FxkidONarwzp\r\n4kFc4GW1kSeHEdiNY1RpJg+DOhsHRiwQmkLe6v8lb7MOEfNx4YPLuxq+wdIE\r\nXINQEat9LeZD1ZHc2NIlXbd5mkKGP7b5qHkCIOdJlbertjD2/VAtG2VPglc5\r\nPjTOovyjbjoiK37NRpQjTFrkqZFFr7c5v9SMXe66Ckti6zF0j1wRqQQFJoDG\r\n2zT1+zoY0RhuAPMNS+aRdDKHS3KDiueDCPrW60RqS6dVPmbGP6YQGkmHNMPh\r\nmNK7oQp5xIuqa8lnfS50ZX5it7csatgg49Utyq86BPRT2vm25tegNwEqbj29\r\ncPDzjk+fc4FHoqw0VhNiS7/SpnS+eY/xnLaf4GPQvU8cabK/3i+ng8qrTi0V\r\n5WGRab5TMF5clH4YqMPDGrv7Jbenb6W/cAewYKQutHCtEgyLUbIhVhSxe7Wo\r\npWizjCUatGeNMIxvOIPjAHc2fpVdRV9Pos4=\r\n=iyDD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"4542197289f60d91886132dca9ad8478dcc188e8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.8-dev.454219728_1673534654587_0.10504829490336709","host":"s3://npm-registry-packages"}},"1.53.8":{"name":"@dts-stn/service-canada-design-system","version":"1.53.8","_id":"@dts-stn/service-canada-design-system@1.53.8","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"0e65eeda3a23af9183f02940be62838b15f671a0","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.8.tgz","fileCount":9,"integrity":"sha512-7oLtVEFLJ3ws+wC5J+LYfpJDd9kMI++WMHmwGd3uSm8y4HUrAia/BpkHZgzIjHOzBaTGGBMna10SKqZFc/XVQw==","signatures":[{"sig":"MEUCIFZr+0+EXQQE6pKAX2nRO8pp+0LzcZorbMKdxCHG3pdlAiEAyV6M0LW5alTDDJDa3wHLiMkZ8+UXFHyUojAHo2zagEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwCB7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqVBQ//XH2zqBgjux2ubmVvwVBvYGLiieTeXfIpadqDOOYC5huyla2Y\r\nzVKtFQBUGG9/N5X4+E94GoVxAdJwWoBTGSE2t9G33TQljQElqF4CN+QNJEZp\r\ndu2LFEls0a/T/azoDh0jCAHGWDAyTaESnuDK0WFGsXx5omTOSnWXeywRQEC2\r\n224aeIIUS1bpKYnTXmGs3LjJvwtN+NdqPYH7zhkVI3Wgk/Gi3YtffcBY7+kP\r\n1naPZkkk4IF3rbynpjKTLwnjLN+QeG8TQc1q16DtJd7iTEK1Kzi+QvDDYdBn\r\nCN10eBV4b4KGBwM6JxMz4QLyo5wcQfAIYdj9gTlQvmJQoS99QTjhaFhL+Teu\r\nIlHEUB/Hs+3zgcZ+yrJqIj/cYeWmmxxtNoaNpigAEJEVtkiSFMxVuN1jo+5N\r\nxY+e79ob4XHdXCj2JGrUDKZji4EUK1OCGmGd5DJL9CKc3InInq7+Z6DLgmgt\r\nkeKBzM8+UMXEjyvZ/EjkuCt+BVL4tKvscizxYdphb+hs/pNVsQzd2+WVBQFm\r\nCJJvkCM0f8n1MvMW9MeaFQHYSkRQwLx2RHmO2RwcipwheRXYqoNXntoO48/H\r\ne8V+wDfqYq4IhZ+8tCGNfwMaNblmtXuObpSaGfKEG6jW6LU3aokVBq3hQofi\r\nGdraqRbQGAzBv/cSJTEIBN1DJbzm/KEp5cM=\r\n=4chK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"0c11383d8d6b2fe9fd774f1018a8e957fb049501","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.8_1673535611347_0.9584500295043674","host":"s3://npm-registry-packages"}},"1.53.9-dev.2d75d3a92":{"name":"@dts-stn/service-canada-design-system","version":"1.53.9-dev.2d75d3a92","_id":"@dts-stn/service-canada-design-system@1.53.9-dev.2d75d3a92","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"ba3447a670747f5e2652c770f059b88f71d64bf8","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.9-dev.2d75d3a92.tgz","fileCount":9,"integrity":"sha512-xtpXhHQVsiWF8VwV2Eqn5/WfacJaU+83JPoYw8/jdO8avTATMVKwYkockSvMJ2kApa+GVMzUObtdMN/mHHTUTA==","signatures":[{"sig":"MEQCIAT/pod2D1i7Yvc4hG+DhvY3rG/bCElneFM4xHLOjWsoAiBXC+gYA1IPNF4kGa2Wm+sp3jlA66gZKEGQpWmmBGPA2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495735,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwGkWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowfA//SwXuTLdU2EZIfhWFb2Y1Wa4jm/V4E6sZ6WWyKMSK4v5dHDCU\r\nK0bWAnbhEQtV8/VMyEn44X/0NOWl+0KfOvkqoOWnRZMgBEG9jDDNTufrdVWD\r\n6JK2KvxgVd4QZp9mGCZALgtHqGmn/jxNDa5PLE0aDh1Ev2yogZa1NnV7Tqo3\r\nhJ9wu5Gj3C8mbeNlISXcmKy2P47q/SzZezQhj7UwZPD0n4/04aiYIyu5E2m4\r\nth39b+8vYlSRewhhqq8FT1dSS4jbZtHpBUv7il0xWN9tFy5rbWofxyhaKcbM\r\nRqxfwuivqJDsxWi9t5B6WP1LWi3hSqoK/biFAOGuYVP5FUjDeGh11pF/CJZN\r\nACxa9GXV5K/YN1XofqxWMTmx3ZzDsrxuLkTZ2nfyR1kGMzZ3N1VGMXfCUSHx\r\n6dAdwI+yDit+oyp8MTsJjdIX4c7mSYpVV41aFwvwqTWUSfsnUSKJfLOQhjt0\r\nOfljRPslW8exba4WNUy9VtgDq/x3waN7hPxMHMiMrJHfD+09r78shd2aaJOx\r\ny/8fUz+CVppQADEbLGEqgAhhNfVPgmd9N1h+BDtU1/3ErkUVn8fJTsXegP+P\r\nRWulF9HQym/3VT2KQaDIqWCyTHFKWYElpXnmMSTUI9EZG3lvpXw9YtqBs2Lh\r\n88l7TJ9LD/0dIr6kuIM9Fd/1XsMQYXZyV24=\r\n=hoA0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"2d75d3a923a6d1cc36b0d4e2857b7d9133e4f713","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.9-dev.2d75d3a92_1673554198561_0.6767555085331125","host":"s3://npm-registry-packages"}},"1.53.9":{"name":"@dts-stn/service-canada-design-system","version":"1.53.9","_id":"@dts-stn/service-canada-design-system@1.53.9","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"73fa4c7ab692e35294df2b6cef957cfef667df09","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.9.tgz","fileCount":9,"integrity":"sha512-9uYHP4zXA6eFuSoz2+WvQs40gvBCxR3Fus5Q2skgswG+7R6DawEtzUDNu55+8LibGlpLHoYyTdhyBJbeyXBaOQ==","signatures":[{"sig":"MEUCIQDFXpud3sFDkFkWHDR7JoD0hiS1VYNMz1+81K5oFNrZJQIgaUnfXpQnqMaT62PO9AgvUn9KD8C8SYQ1xWPMVSA2P14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495188,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwG4DACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreUQ/+K4pSf3H0sFv6hwz8bW/Eoob35Wq2eOc9pXkf2u/Fb5anZ9Am\r\nJ+xvB72HjkxxqQMT4o4fUhuSZ10SmXiM8HnyDztUvJvI2s5BBzyNMyVpqETn\r\nUM1uYzHSDE/I5zsIRtJls2oR39e04fva4iv2o5C2VyMNgtAZNEuhEZ/LYfMK\r\n4pQpDe70JUraIbqQcvt5OKe/tu/L3+XrO/sLalaCtbCBUyeXZf7Ok53iME0Z\r\nishJFsozM1WkoWQCzaN3ahh5G3DXR8gLn/GHAEOzlMnZSRjrf44LfxbiA/0m\r\nxAvZVf5C2mHO2mOI40hlsojicux1Jux9hzUuezGuzxrpXvHksvyL1FfUia9V\r\nzCCv3+xG8UGvSoAi0L68x2uYkTyFmgQ7LAlMGv6mHfSAA/Mjq98/Sj/SZ2ze\r\nrT+x8msDfdfoaM3yb/rrZxt86HG9hc87mdK4N4Hsi6KGpkEt+9Y8do1PIXoz\r\nCfGPjcj2nuvP/YxFTEqlWOvbdQFzzUNABBlihjzdTLuJ1F5pUS8mkekU/Zhf\r\nQVXYSl3PAL4crqHM0hnFd/98O8ldfrpyINjg5e9cs87JXd1n3WDgbwn7NtqT\r\n184AQtIrdRjtP/Wn1MldFicmpaKNebVQdMvQI4GtbH/sN42tLzAYuzHjnvfR\r\n7Nuc5MKQed6BbAHf99z+S4QvTKkXTC+CJM0=\r\n=2IN1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"0eefc72da7dd61c0b19e9b68ed2d69e98e247ffe","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.9_1673555459362_0.6315273532621908","host":"s3://npm-registry-packages"}},"1.53.10-dev.674394716":{"name":"@dts-stn/service-canada-design-system","version":"1.53.10-dev.674394716","_id":"@dts-stn/service-canada-design-system@1.53.10-dev.674394716","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7e3bccd522e65b4182c9889804b4d896650ad999","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.10-dev.674394716.tgz","fileCount":9,"integrity":"sha512-i56eGL+5Z8yYJJ+Y10frXNeBdd7hGPk1yEKsgbufi6ZJs2s+aAz1YXnp+WCkq7L5XJqk/lbrgpZIvteR0GEX2g==","signatures":[{"sig":"MEUCIQCrhRpCkiJb30mK9LarWkknhteqjKAlpfrF7t7mAtv5JAIgZmrsqw9mLPbnZ4KZmIda0+IUT7nhdipRhFjC0hAmkkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":495924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvsfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5AA//S4V//FrYd4FwCG1CXXux4mn17hLCgRoCQRoEY9Zj1ZwiGbhw\r\neoiEHsK+XxQ1fqwRuKGjvl9U/9h5Bu1xgg+vPtUaRgZOB7ecuwd+ZXQ0dx4I\r\nGm5zWHy9TyliPi4DGDrI9wTwlKlTc6DntA0ZcgjmEi3ul7VqV6d6oxZ1Ob3I\r\nnqp0hKIaVLxrUnQqEYGBzJ6N8YQKv36vXSk91f0ov0fETlr1FUhapwwSPSsU\r\n5i8B25Qen5JvOfgSLbr+Zlxx0suhMu4PrQmB4pQGF8DZi+CeeO71QfFIHwOR\r\ntauQiWEw+m8lR/Fu+ZXFF66CDNXcH6DXIBFH/M5a58FzKJpx1KhkIHZjemAg\r\niYxA7w8qcwzKtP0+nRkhonbXH0QdaDys5O1OjE6vjik6Ugfnii6k1ruCCBCr\r\nCULBYLDjTSHyvxCv7p5JDBg+CMCYEsxuz1YAdkGgPXU2y50w+anJ8xxf4xWs\r\nHE99Wiir9uGdaw5/RadqKSNA4sT8r39VHvjT5gM6+3Ig7y/cr+Jv/lXKX1TE\r\nc1tWHIWaMoQnspYVMiywoYIyNMOoi9xqEzl/fMe8q/UOYbQ3gINNmz/zPgaQ\r\nfXKZbgnjq6hP0wtmDUP4HfAD9MW0WsNIy+1ib5xfIHG7fdmR6poyk04EtXgQ\r\nNVRae9h/ntGxn2LOvH7U+VSZWOOeVxlJsSw=\r\n=JWlo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"674394716d4d1cd8f3f2113c99b47de4101a9e58","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.10-dev.674394716_1673984799484_0.012746894515654583","host":"s3://npm-registry-packages"}},"1.53.10-dev.ca15e05ed":{"name":"@dts-stn/service-canada-design-system","version":"1.53.10-dev.ca15e05ed","_id":"@dts-stn/service-canada-design-system@1.53.10-dev.ca15e05ed","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"0685ab056af40b4b766f4d0b8e6ddbca971023e8","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.10-dev.ca15e05ed.tgz","fileCount":9,"integrity":"sha512-dRIMJoRGyuOuEOq/T/PIZYeIrKHICmvRUFbI42INa+YStfmAWNynBvKKcxX9sqrlkTIHfVXfOELjgc37AksINg==","signatures":[{"sig":"MEYCIQCorYld42wC+/OSDdFOLm1LvCmKd8DW/hmpPyASxuL27wIhALLIeVnAeMqLEqamHqQ5yqmzYh4yg+X0y/21IyhQtsK/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491428,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0VdXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSlA/+IEgCerb/fY/DbH53OkBi/iE/ci5N/8OS2k5tRU7viGv0g/dX\r\nf86J1IVJ9BYkjMrJ98WGNSMp0PSC0zrvKq/7qHq0vQDwjLeA0GsbFtTTZpXX\r\nS4cozCDdDt5zmb5QEYA1zi0QvfBudwWk8jbbk9eSdwbVFKPR7lsBMN+O2UK0\r\ntDlGL1njWQaDOg+rSFB0eVqsf4szascv2AZw14BoCBVDi/E9bDsHDv9fv4mg\r\nYwOi346TFFSJ828cb5L80/h2lpcUDtt+k5Kse0mmLdbl3arrctv/afJcOs6g\r\noNjLQ1NUoCLsFpMYo1XykTrhEVmdyAhRsTYeJHOzxdmgiTaUvRYmLsSIBHv0\r\nvrzwPu6xv2k1/nx7W+VO2M3oSFWErGTKE+h06hBZhIirWE3iseapszcNQ7au\r\nV+M4NXUO0QJtA/P6lelcMgZhPobsVCnKBXh6c+itWISUM+56mTQBFTmT6+8g\r\nfLCRokuOHClcNAHhsY49dZViVsC0tuEe9CCrJikKOnAPzbonybDwj5HaBPME\r\ntJK8WtRCnRuyV0J3m5NyLGluMDGO8mECefs3YItA5cdds5pZQqLdMgNF9BXi\r\nUkA+sT3+AVyNMaXWR04gD8lYbkvJhExAXLLCix69G2IkxtQU87AIayuCeUXx\r\nMdArQaOj7XhgCWQ5V0Pl3aLQehx2kU4m6yM=\r\n=O1gW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"ca15e05edce1aad65e29e9ba1bf3ef2297b34430","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.10-dev.ca15e05ed_1674663766897_0.8016209590705521","host":"s3://npm-registry-packages"}},"1.54.1-dev.ea01f6f7a":{"name":"@dts-stn/service-canada-design-system","version":"1.54.1-dev.ea01f6f7a","_id":"@dts-stn/service-canada-design-system@1.54.1-dev.ea01f6f7a","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"760599b8ade5ec27c40bd203e3047569ae91bb81","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.54.1-dev.ea01f6f7a.tgz","fileCount":9,"integrity":"sha512-8oEKLlaByXyKzhSmZahM1ZtQoAc2U9ZKrrHw6MTgmUPpkBraGA/y8yEPvAhNgN9880nJFEV2/u6kubJro9D74w==","signatures":[{"sig":"MEYCIQDjoMa8QXMo/PTXPX4AlT36E0SsxhRg4LjddPzLvk+ZHwIhAIWHEAQUBAm1AH4sjeqV+lQd/siPoEQ+3P2HC3qU6s70","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491395,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0u0FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqP1Q/+Kh1E0sTqO5QgCtIt0KB2u9TpVAicMz/R4dWtmala/p063Qn1\r\n+pSIls0gicUAq7zX05nHcZ7wltANwIUCI+cUvKXHCbC5fxf2cR+DigicXVEl\r\nhbUZ1eehMZYtu9Qm1u9DZwnL4AqYkoJVlBuuMXBP3Di0+/fbQNTV3ArdnHGL\r\n6Tsmh1CXmQ5jfWwrn5MiBJDAzmuJ0f2hXWWxb75udWPSkKW+fmgcqOlI9f2s\r\n/SN8oSsGHjC8bue1wz9OIH/Ejf7uVd0esyjTAEllA056TT7wE0xTpSgGWgGZ\r\n6FXV5YHZvw4/m1qXg92RWuNVc+PrD9gRJtSTyPfRH7vM2NF5B67ojUe99ojh\r\nGfJLRebuYWFMVuBaWf7aslkyLlMHzFYZ1GaVsey8AiiC8OHgOZLW845XDGVj\r\nh854zdH0/scmpelCyCYz53bbnixmMnejsD00QIVywGeafq8L3/9hzg8sVW2q\r\neKdM/X6672UE8J4UQG9Dh05LEcrJbzt7GjHE4TGFzJ8+kzQATTvYX0ICdAW6\r\nlQDkpYqm8KTqeQbYup/mVAxOygyBmXiD023Yf8zdy/GipPz76YI2laX+f7Yg\r\nMCiY47stKMbzboS3dsAuHdXSftvkAYsJE4ftrUZc+UhxjmyKsWKV68Vx9x1g\r\nP1Sc+oNbj3l87ncXbsnw55pvNuyO2Wwt5mU=\r\n=GAYN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"ea01f6f7acd37a8c7c39d0973a7924a85fbcd720","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.54.1-dev.ea01f6f7a_1674767621411_0.3013039256566383","host":"s3://npm-registry-packages"}},"1.55.1-dev.7323ee8e3":{"name":"@dts-stn/service-canada-design-system","version":"1.55.1-dev.7323ee8e3","_id":"@dts-stn/service-canada-design-system@1.55.1-dev.7323ee8e3","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"26485c653a1505378a5cbb9e5cec1b06fdc9f9a2","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.55.1-dev.7323ee8e3.tgz","fileCount":9,"integrity":"sha512-t3nYjYo04jdewoCK7B3GyDfMzuRDsgPxWbiQN+UIvcbSdjzgcBrtPWf0VK21PvYevAaIvrmkZtXXXf4E2LE0+g==","signatures":[{"sig":"MEYCIQCy2ADyM/YwHII6wpVv7PKkUBX9uKrzU3vaNtnN+usvxAIhAPHPzsG2zztJk0QVW6HrZSbfLj8k9lr49dozAXsMzfNh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491573,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2AopACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqpYQ//QXjGWWVTWsbCtMiCtobB5TdyZeep6lVgRvasRfQX2lGsuD5e\r\n9Mu/AAPPoCCkpbTCcU4+30zth2cGfpzH2w6Ow3Fm0ZMLObQZZW8/02w8Adk2\r\n0FXLEbP0y9nsOVvZ5BUKbywM4VodO83rMFg1BrabpoMwM5fc/HkzkvQBk/42\r\nl+Bd43oGR/SQ0pqUCddkfaLjyezWM8rcRwOSbHlnuJ/jDvT6mnCZ+euJ/06u\r\nEkK9FdnWH+6Cc8gpg/mNIFCDo368G/YCWp5ZxF3OxXV27PKz0yCDh9UjORY1\r\nVEv/nW0HvBnJ46O0Gbshga0paJcCmhSKQ8Te2dDSzHLqNzAh1vs2QFSwPmpc\r\noqdVgvI1amsleqbVWDaYuo7hFDEFDFid6esbO1M5DW5ZYJuiHsNK2laXhrOE\r\ngZhOI+ibIC/Hhxf6ZviRQ5IDNMyS+Kyr1jrEIvFCbSXmdmEUH2TI9PoVFJtP\r\noNw5ecSLtMmF19qYcRxXTTNbJzqET4o6E0t6CjlBbJtCiFYmcxPmzOoTEZi+\r\nglPbf3Cl86tyatx4HTYa0jV+jg4I2XYFxTWBVyBYprROAoMXy2fuqpBQnKq4\r\nBZkiqEWWcVSaY6F30cjY+KHZP56VC2sc40zPPCSWL7vHD5WOGPUd1Ry7DAcd\r\npder6Tr4CMyuMtm2/Lzk4H9HNQpcO+gIsKI=\r\n=QTNV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"7323ee8e3eb361f1880bc42b6dec15a7d8ee4ae9","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.55.1-dev.7323ee8e3_1675102761528_0.015290680089759423","host":"s3://npm-registry-packages"}},"1.55.2-dev.7b825aea0":{"name":"@dts-stn/service-canada-design-system","version":"1.55.2-dev.7b825aea0","_id":"@dts-stn/service-canada-design-system@1.55.2-dev.7b825aea0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"b2d74896d9190d893a91fc7f09bcd4f3800f3eb6","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.55.2-dev.7b825aea0.tgz","fileCount":9,"integrity":"sha512-BdwRW+8CZmHN/6gCP7cTZ8JQkWh15F9J0JT90ISd00BK56Q8RkqIxxHxt4am78tculMdl99/xDSXI56pkaJNyw==","signatures":[{"sig":"MEYCIQC0iH3sQtqyxjbIjtT2rle7CJ72Rd/gycgvXz8U0byvLwIhAM5ukx7f8MdWCXTPVqq9z0v4/1X4OTCqUMrOaqRI2VjE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2oIkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQMRAAhf9ugX4Om8sgZqgB0At19ESr4dL7sTP9W12q7qNcJfU3jlq0\r\nJ3u4bM34WxTxZesUaWA0yyza8CroD2HzUB6Ho7N0HV1BEHVh3Z/leRTMqgwf\r\nxOBZA6QfCTBr5C/JlWzgplksEbxXGAwU5mlNxDdtVbAFJ1oyF738lBn/8w30\r\nSEpv1GKZvL72zgkSNmQ+qiyyCYxNNs6svkAlS2b+gnf4DxaRT2uHBwCcyDYU\r\nLZDS9hF9ZA8gqOHirChVnoEyBWo6H6wB+tV7hPwtXQR3ZuYCvmIZbwGk0KKs\r\nwdxfXasRJ+GLJ0sMJe3/56TpW9am11eBmcVwZFEBHF03Enyd+9axomghFjqa\r\nYeUyublLOLRXay27u/zbSG9Lt8AwCx8mZAGkBTsHxPAPOlqnklIRAGF8PCTj\r\nOOO1kAr9id3Z/HA2ghMvP6UWrvJrRscVfLK97Flm7u8ar/z3DV/TT6EWBYZq\r\njxgKOHB6AYrR2NQ0zOaYFaHhD9noQiafI39PC0KvoAmTNvmQ2pDp+RPLMDW7\r\n8wmADl4LeJ/EPxOWhc7LpuJn+v3l7N7izZD52sKN5fdkRqeobEJUUhIDRfZq\r\n/Wq8WRevil9DWn/NOXT0cLnRHqfeNIed5b+WriJSFXWRTZynudAvSxYQomy1\r\nSbzZAmboRHgm0wYQefBNQGWmHthDxJEV9MM=\r\n=ncFY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"7b825aea0ab1cbaacd50151bce5054a185c7e555","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.55.2-dev.7b825aea0_1675264548236_0.270850835245138","host":"s3://npm-registry-packages"}},"1.55.3-dev.985254f9c":{"name":"@dts-stn/service-canada-design-system","version":"1.55.3-dev.985254f9c","_id":"@dts-stn/service-canada-design-system@1.55.3-dev.985254f9c","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"a130c8f158675ae7892f796032d3300d026badf7","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.55.3-dev.985254f9c.tgz","fileCount":9,"integrity":"sha512-0vXFQOm3Fll+haQTubvgrEtbIdI7Xsx8lWCN5O2FYQKtYwFbfC9QJNxJE2GJh0LkmImax21Dwy06B2r6vT0Y7A==","signatures":[{"sig":"MEUCIFAg+BjQfToeLK+8EfPw33b/w+izmA2/F3Mt2PaPzAZXAiEAzjSfxRyeo2FQ528qiqK3Q5ssBX+dkp6XmHctiXrlI7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":491559,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/iVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Mg//aqEGX6n4PySL8dAaokDaTXW7JbpwAxWzjb/uXwxEhL7WVy67\r\nnbNHeZ2thAEaz0ENiTNAhBuF4PNC5UoB/S/ZR63fI6kJambNjInFbdD6XdhJ\r\nWwDtLlbhhXEBv3nXp/YYbNGO9Tuig09a/NPIJpYklQdzr59+INPa1vQ3Q8J1\r\n4HBxTmoIx1gJ9nFWrVmOi85IvFASOvIIOYkxETphiSrxVxCRm5JQ5y22nGW1\r\nu5xMVyj0ee/OCox5+5iUHh4nOgcXdFD4guDDC+juaSVzz+mSq/YH8gs7Zk/V\r\nhNwq0+c3eCTu4iSJ/yHYkK1YLo2jI/1yAOl75HkcGmtTcP+7hxCbOYYr1V5w\r\nnm4/ZpoSv2hMvGCv02En9FEi1t/z13AbzzoylGZcGDfU251Ja/yd6H4ClvPG\r\nppRZrDmZ5nxjhr6YR+ROJcofWzOgeHVxkuLo7q8d3A000A2gckpHPn/6mHUs\r\nvO8lIyHV6ZwLL2oimaOeMSsG7rjIyp9akWFwm68nBk33Uh6Cj/0NS3qgM4t+\r\nE+fg90L7Hptv0BcrzqVJfkWF7ocSsb49a15uoE5ZdAjuXyFRpUls2GRfPgXr\r\nEbfik9K/JW/gttR/IONc4yobMd1lv2QV6hqMsiCVIMYlaYp6bLrFvVD2t9rB\r\nNt6VUEcRCITtim8BsNEhmFgOzTHZbHAri0g=\r\n=zHTv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"985254f9cf399844b0c10dad31ce02f94e6be528","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.55.3-dev.985254f9c_1675360405422_0.5147920031420246","host":"s3://npm-registry-packages"}},"1.55.4-dev.f4df5fce6":{"name":"@dts-stn/service-canada-design-system","version":"1.55.4-dev.f4df5fce6","_id":"@dts-stn/service-canada-design-system@1.55.4-dev.f4df5fce6","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"96532d9da8e2526dbce20f8e87e5f3d39f222b53","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.55.4-dev.f4df5fce6.tgz","fileCount":9,"integrity":"sha512-hqtQFd3fr9EMV6owgW8u3NdnIxi3Trq0yTsE1B2LaWtQmfA6sSuDwLnfyGD6cGkjB5AJjysjy8W+pA5xVEH28A==","signatures":[{"sig":"MEYCIQCqQWPihnPlTy4xime1RyJxlCfDVW65SMC1o4QSGU2N7AIhAKEHwlfbBImtCZ71QSPNoB/344ngrp+YH/6YJJPxdpbA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4Sf2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrprg/7BIwMyqkMn4PoKCb1GchxtZatqt+Wx/0Hgj9Ls6fxJIlfs8NH\r\nf+FPcyMzWJ3Un6U3rF1yln7a21iTYW1iXhFh53egtSv0fzP7guy0OmDYyKwE\r\nBeqBwGmd2FsHnY73JsF3blLMmt8ceaViozU8WgZ1Mkgw5GwMTl0BjF3bOlhl\r\nghD2mG8We1To5ftcFzcmZ/CwTTq06uYJFp4lpfCfXSjd7wUJjz4OSl93rWkg\r\nHf0z56m01ReoxxkRzDEMBRP4d7Q/8UoV6gVcb/3pWsEBBwpoUDeQQSpJFTVy\r\nBChOV6wfRXWUkLuJbYli5lTZd8X4TBHgv91hlnDe4GCT8yUv0bZSuE57joZi\r\nFLZnAGZeluL+jguzmd6fqSJWhX+s9ezTmAjw/Mqj5/XjONIoyuwpZeQo20ys\r\n5gsGpRVWTYwuvJXnA8x49ZcoUFk4Mt+kdTWfSkR5YdLkKaj57+MNGgrRvbRB\r\nsQy7Ks409jEiKXH6OtFbYxqO2LpQnZ3xvmtrCsEX6j3AyGeeXD2B4koU3dxq\r\nxAy+kQy8vElPvGMnvvUH3pe+DC9zu0o3psEGoYwo4HMs7Xoz2rqBK+f2Kjbg\r\nWusij6mHjPNBV2dxX3imeLy7ZtOmRzDMrNmU302sAXsBnrK7unJnzclFVaFm\r\nz3S28E4nGhA2iLeIk0z4oTSoGykcSRUf+eU=\r\n=rrQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"f4df5fce6ef663144d1c2b6e4f8caf0fc788063e","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.55.4-dev.f4df5fce6_1675700214563_0.49964110410985185","host":"s3://npm-registry-packages"}},"1.55.5-dev.791c9152f":{"name":"@dts-stn/service-canada-design-system","version":"1.55.5-dev.791c9152f","_id":"@dts-stn/service-canada-design-system@1.55.5-dev.791c9152f","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"32712c727ba65e3eba06960145f5f1657f548644","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.55.5-dev.791c9152f.tgz","fileCount":9,"integrity":"sha512-eaeso+wmTzxPcmUDR7GOFUVTlohkfP2W7eMvthOCGsaDZjnzV+A1clW3cwFEtNjFMnShaLIUEq6r69a+aJUKFg==","signatures":[{"sig":"MEUCIQCABaazT1a4gcI45z9Fexx+uLkRBziZXJd+JmAEHHA+nQIgd+nysxoRGFxDOZi9WeAIau6y6Gmvf3WRfDAL6SFzApw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4UtRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmprTA//ZF6vo3bD61/zeP5sec2YTRxWYrUNSSIDl//+AcPXJ+FKYcN8\r\n1y+oWeC/TpmZSFlVipXPbALRtSVDR12sNTWlauge8KHaLK7HBXXTUYlTb2Zs\r\nG0/lwSTb2JIIlkNK0H3askIa8/69O0LO9nWDArPfkEWaDyZeHeYB1gNmnnep\r\nUQx9FQ3RPrTyL01JKwmgIURqMh8PYxRmren8A4+jyUwzDWhnE+MhMW6hqxeZ\r\nyeQ6KkaUVkCT+Xhf9bfdSJwAIMPjzdTfKeJopc6fp0hLElWtHnQ3mmgS8i1s\r\nEyrXyEcA9wq0fZj2kkbBlpjXG4xCZi292+jpcX8Ixc4mHpP2xEPiVNzq8XiM\r\n4B4PNRpC00PSzrWg2Bg0GsUtmMoTb5KdroBa01bNhSn62ckXwijAvePdeZQO\r\nIaxbQ09uAGTJoJzNGL+qzXXCH1sD6yFk6ZLvgyF3qISHHrUD3f28zlopd1Wb\r\nBXQ2iWoNecJ1dbrOZi120vJDkmGRF0/e+P+Zfi3dw9sAuYKT5+Bu6R9xeOrc\r\nG5a1Rpszk204mIKIJ54Hm4gK92meUReEJAcETK2JwiaKHjoqUthZdsJ755gs\r\nsFpzfXc3wZI28XkIkj6zE5LQIXLHeeItulLhmj+AqrRtg5LPZH+gmd7OGOJ5\r\nP8TTUtXm01TyMva7zlUoCASiyrb3qK+FEtE=\r\n=yWWL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"791c9152f4d4100a76b96ea1dfc37b9f6ed66175","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.4.4","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.55.5-dev.791c9152f_1675709265448_0.907470380706842","host":"s3://npm-registry-packages"}},"1.56.1-dev.c8f803ddd":{"name":"@dts-stn/service-canada-design-system","version":"1.56.1-dev.c8f803ddd","_id":"@dts-stn/service-canada-design-system@1.56.1-dev.c8f803ddd","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"fd949addfec058e9a2f756b09df5f5ec55855462","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.1-dev.c8f803ddd.tgz","fileCount":9,"integrity":"sha512-y6pBE0+UOfiIRFYsi+7NFN4P6n0i72go0fQg4aAmX8yy2oUfbsThScjh/aBfEOJaPq8YqfZnu+wKaVR44SKMBA==","signatures":[{"sig":"MEUCIFrvqxtNpzxQLcF1JShT0RJ5GbcEnSdMVwAb5RiEvMgkAiEAvS4JrZBPZhaWjYbCrww3bl7dZw+1J/KO8zh1h5LPrUQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4qbmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWlA//fmBdfyt+2kSoTZr7evHxj++ocEY8l+zwz+VT+ZJsRKg7pxZd\r\ngXxhosyTolV98oAW/ojtF9sZvdBbXSg9WDlsSQCKqzggxPOh/AzpN+zeN6nH\r\nqHcXa18uMbMujbdy+rH3nOeOEWNLy6Yi84749r618zbRSKYvO+xSMEbLj98R\r\ngvhuXhfa9AmCYsTQL6dOUJaf5/9zfo8mkEfkEcnczZ9Qf0djUIaLB4vdqfri\r\n4MdYD1NdU2o6XOUnKaLrrBVOt5DbW6vdNnX4hsJi7v8ljANtcCElS2gRGGz7\r\nWXd+MyqVFQY0SI2TSnOpUbbA+sBY7RpivoLRmH6QJT98rhOvrIJVnTfnFIeX\r\nIBCM88wequZObOGnbDsyCh7amUR0V/W079IYoGNv3A4La3yJPD17utnuUx9o\r\nK4W20gFYGyex4jmIE/3LGOkF8IzMR8NsrWwEZJIES1CkPJeJUgrblQVT3X47\r\nyqN1hY0Aaf3JlejSgoivInqReUqnDGEpZIKEsJAZ0vHpppb8xNVsRZOXEH0w\r\niLqMk6qZA6xofuPKG/ghKaDwf5pgG2Dg0kzi7WHMsQsJeqTZPaLOSPMtaGAD\r\nXDZgOZFKSMVsubfXMgTSPLZPPHaypLEjozZnVP11tSFQohT7UbO/uLf9ghBN\r\nlk8JnIPJRd1X1Jgy+/J+etmgGxSQFx3x3bM=\r\n=IzL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"c8f803dddcdc60efb9740e8b453cbea2d31fa392","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.3","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.1-dev.c8f803ddd_1675798245994_0.049957601427842224","host":"s3://npm-registry-packages"}},"1.56.1-dev.6a49798c9":{"name":"@dts-stn/service-canada-design-system","version":"1.56.1-dev.6a49798c9","_id":"@dts-stn/service-canada-design-system@1.56.1-dev.6a49798c9","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"c6823ae4cea64aff3004446af06ffc23546d21a1","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.1-dev.6a49798c9.tgz","fileCount":9,"integrity":"sha512-WBJ4H3aDW1hia44B7W0t/+2xNrLnlu2rvZoSpZIbfszGsqiH/lr+4DPzxpdXyoPogS17XEm2NGUs7w2NeemKfw==","signatures":[{"sig":"MEUCIQDda/LU0oKqTAkDUf+2+GEuvPmFIQymp1PGKjsBwC2pKQIgdRwLXr5gTsUhRukrovetvqGtUY1Y+TGHblLx+8EHdGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4qb9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZTg//X7934Flqf2wA0T8UbsnGwMdHU5zUiOZGr5GLMGAe9h7ihfA2\r\nVjixPy1/If9v6sJffRoKuSkTRUyJpSjxtpU/Vg5G+jSzzyZ9FEulkHqsgtu8\r\nF4NskQdsZA+PutIDeOXwI+aZl/YEBMxSpIGHE9XflYzR3CNt7F/gBMYjbQc9\r\noJclP12OuEO3nByazMgFFD5Es4bWFXj65RMPIU5Gq5aVZCqImCt8pzqVF6CT\r\nCTrGqKMjmP0MtqNsWC6pQY8dm3pUovq+dqYX0Si+9CtYGpMxJ/wZU1fh2h26\r\nlZyE3XTLucbeyNNq6ySd1o3VD0hxE0vh59Mz21/DkLb58AQxvMj+SBEuIsIO\r\nNkpZwHDKOgcjIy+2nviFj+wz3m8oirq5MB3S+vAPkCvaqGZPTlER/PohuMl/\r\n5IdNUBSK3+hfxC0Bcd5SOxjBVwAc7rL9UwolKOsBdrptcnm2haIjqb0O4VBK\r\nZ589+5nD3nKZdkoUUVGbwxdlDAvS9VktjHGwEO6IOAl7HNC0VSC+QjQBx8yn\r\naz/3L+U6j/3EeMgVk1dCS2fxWP1J2J/zu/dqnDTH4L0fiDYgknRjBEBpzkzQ\r\nK4p9yDb28KLIIc4kdz1d5MyqJN6M1+R2qFFs5hCbNfBQG3A05E7gMaJRCtRc\r\ndJbT2HMXmnrmUbXUR6wQPhbKKdm2co9QHaY=\r\n=MNkO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"6a49798c928d4a362e7e869c684c5db8644fc0ca","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.4","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.1-dev.6a49798c9_1675798269040_0.8804994524510459","host":"s3://npm-registry-packages"}},"1.56.1-dev.60ba368df":{"name":"@dts-stn/service-canada-design-system","version":"1.56.1-dev.60ba368df","_id":"@dts-stn/service-canada-design-system@1.56.1-dev.60ba368df","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"ca74b4cd27d7a699a593d3c32e59d0f7c306afd8","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.1-dev.60ba368df.tgz","fileCount":9,"integrity":"sha512-jXUtt9dmA18v9VwmGw0tYP6OjyBydOzq5kvnpbWsD9BaYengIU1OgJrDmwxwDKqh/2bl/6u4WDr9nPSsrLvOVg==","signatures":[{"sig":"MEUCIHN4+cn/8r1fzqbeqE0HwPfhU7P4FFIQJojRrFoylbjkAiEAxW1HJ30D0UwEsZ5dK2e3l8FpRMK8jrLo3ZfMYIPyj7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj49OxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWLw/9ElJf1ODfEtWcHc4+vbPlTd4XkLyWBOXMle4COGJkCHQJt6wz\r\naoyP5bj0tiCNtgTRIGPKoKVDxhFYVk3WeVsDF9I/XVv8WwazGGYZwUtlhdwl\r\nO/IT7jOXl6Szl6F451U3JVlvUBEAsnzIbx8ojhO4Ur5+/jtgyZiULZCLJNqB\r\n5jgWW/9dLXOVggPW+CZFPvG+xwDaDduH1PQ7Sgxb+Pn2/tTBtmVhhkl6D/7a\r\nW3Z5hJTZowsMmEjWDcLaK1HVTeEzOLNjww4Ew3BLmMN/jmGy+cLngXzppoAK\r\n2xBlQyxk/Uob6swPcdJq9UWUd6UKjY79x6+zVyZKzmL7T1zPn4CBx2bJv0HZ\r\nP0QTzjZyvpLiZIpCSXAiEIMBJ/jhp7y/STFlUnWTJjsanm9h7ELtSMsLReWi\r\nKyY7tnPMHfYN/vmwjCNQq4f5/Vu+F+iTErlCypnR8D/NBb12hd2HiEmpqdY6\r\nK62gARxi0/ZM8BRXdGJDnwvd6gcPDTJfa0hzvSLNtV8KLOKGMGD9Y7q8CadF\r\nppAc7rJHmdhVN/7z/KtowRXV6Tke0PvYza4VBqPRDOFWDEH69tmE92DvMxFG\r\nca+28scIVfCqT95elW0180iEueLm+qtB1rq5w7vMP2C2cyfk6uo1NcQsgbE8\r\n7meybhYqstO4uaFiLHFsa4GNHPxIqvf0egs=\r\n=zWZ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"60ba368dffb6540aed026aaff7ca1d968f3bb550","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.1-dev.60ba368df_1675875249193_0.006182650001646861","host":"s3://npm-registry-packages"}},"1.56.1-dev.92b064dc2":{"name":"@dts-stn/service-canada-design-system","version":"1.56.1-dev.92b064dc2","_id":"@dts-stn/service-canada-design-system@1.56.1-dev.92b064dc2","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"c2a36206084b28a015c02f535a4db559a7ebe09f","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.1-dev.92b064dc2.tgz","fileCount":9,"integrity":"sha512-S8bHj6Yd5+EsXGR5jtSFVKgQwVQElo6IclNU0iwaxkteMH4WIdzJg0kamTBaVeHY9G5+phz29aEOAM7r51Jupw==","signatures":[{"sig":"MEQCIDuLTSubm8yvQV1usYwadxBohNu6mQPKApZkiGufwtFmAiBECO1GI4Cvb4/HrDFobWN7y9n3drbB5Obvj14L7WE2Xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4985ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQUxAAhQze40MaDG6ecEceP6JcDvZTMd62zsMWmwRj8zwKMXb9EpuO\r\nbh/L/dOwzqC6rH7ZPjZpEiBoZJkNmqvhmEeYfR0fOlMtRIKiOvdQdr7Wx7cE\r\nYIE3xHBSa4leuE4UkfHPfyoMS06010SnUxzh9SU88nEbBarMuPiGMSe9Xmlv\r\n3k+1LuBQL/7/oC57ps6j7//8wNZwz4fTj3Fa/0NT9jug4OQKt/jxGVWqlSYv\r\nN1GfyEmdAhHx7DB3BgK0rKvyAO0btL003LdLv8JrvWPyg/+3xoIzykqxABYW\r\nlRBm1yd7IfakYHHWfgBBldVm6KcFrT0KD3S8Uwy5VF/fsB+hbaFUg3OEfhU9\r\nkYE796Mr/JVuXsoi34191Wb3WFz6CCGwdTzxkIqPeF3JcQVa4b3L69NPlsu4\r\nGHgxc9NIgeJ9eO1BlFKSlJR8XZyKlt5Tkm+bgFQNfudQJM4pky7WUzXLPPCl\r\n5Yt/80EOlkP4fuhym8lYy3PTbyfeS+hdXcc1vYMURpjc8kWm9xhTj5FfegXH\r\ndvnp7c/7ZovL+Wvk0iCsTGidLN/KkmqqieBa5gQDWKAi5FmrJFmo3ESnz2Gl\r\npeYI65AJYziC5x8qprzdd6uFj4JCxAI4QFtxKs1vPeD2AmPL+I5jJ2xVo/iH\r\nHsgUxomwED+ekko8/WK5rE6FhBZb9NceIIc=\r\n=f1bW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"92b064dc2f82b557438817285485dab7c432a06b","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.1-dev.92b064dc2_1675878201637_0.6750689711564568","host":"s3://npm-registry-packages"}},"1.56.2-dev.3bfd6c5c3":{"name":"@dts-stn/service-canada-design-system","version":"1.56.2-dev.3bfd6c5c3","_id":"@dts-stn/service-canada-design-system@1.56.2-dev.3bfd6c5c3","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"4b3e8aa4387f16883a748cf61ee1cdcd3ef8cf66","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.2-dev.3bfd6c5c3.tgz","fileCount":9,"integrity":"sha512-XfKPXdQuZkNWJ2Puq6R0NS0QCbnUslqfeUXVUNoCbBDzHI0oIA8Nw1Wipopnd7D5f74vO4kS4hLRdL5KtaUtNw==","signatures":[{"sig":"MEYCIQCnT7nbUFGon9sZGqoWO6LMnURWCBj3E2uqZqScrOtEHQIhANFPkmF69X4+rx9R59BfoM1AWTLrQ4Y4frrkvtP79emY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494093,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4+dOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpA6A//eC8FAJvT/Y+Wzg0b7Y4De39p1J36TJfjQNNzK7VNTQ8e1Zya\r\nfNFqoin733NPBuDg2ksAXvv4aPP0qwN+EeD6cBZU/lFTY7G6s9eJskt+M3RC\r\nd9JSI6gBQNlALPVrdaXyUuok9OIfYXf0yy07ATmMe8cWUOsHPe1uXYIPWkY1\r\nk8wITDDkhq8v7Y7RzWAurToZzyrR+mBiNVr6kODZ+lSmowUYKjtMZBCTVFtG\r\nt6/adq3jmyFIOaZteTc3S3uIOFkdczzGV1qtF6eiMC/M8AKLqn5iSPtSfsK1\r\nTKupqihqxx059HWB1dGJG3oJNT6H4XthFnbGbLBak7qF7nyuUTiXfUcUWol8\r\ndsf4OxeLLqswyQdHRXnXSIUplcxRwkdNKqQR89fCb3Cpcam1CCCx1O16Op4R\r\nNYvy5uzadhGVbLzqAXpVdTSwgoA+NusL9KwsZXs/4ybDSeyW0Ovq2FY4xbWZ\r\nCVSvjRE568JtVnQMgFT+YosVxVj1BcFICEwgsBgPu+HtgsXszUQE2KP/45mP\r\nRRBkr1lOjXebMJi8hCmYMDu1TAocHKBoGv5Zho2moYH9nbHNvfoMZOMM+hd+\r\ntT/17xsx5pscCmY9B2D+Ep2AgRI0cu5zHLGm1FFp2YiaBXZVgFlnvC4XjjBl\r\nQmD9TGkFdfaW1qr23HnxsUR8Fr3Rs3BDdDE=\r\n=uF8U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"3bfd6c5c304703d330cdd32d3b07217632c30ac2","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.2-dev.3bfd6c5c3_1675880270410_0.4804530187861862","host":"s3://npm-registry-packages"}},"1.56.3-dev.0eaf2a463":{"name":"@dts-stn/service-canada-design-system","version":"1.56.3-dev.0eaf2a463","_id":"@dts-stn/service-canada-design-system@1.56.3-dev.0eaf2a463","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7be73ae8b4cbb541361c297ba522310afc0ebb18","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.3-dev.0eaf2a463.tgz","fileCount":9,"integrity":"sha512-lYAtemU/M7X4e4gBJFzl4F/W/RQrepYY5UsCBL9BW9ndAipUPDo/KeJMkmI5sw6v1uZO3I+ZZ/fNmJCV5szFuQ==","signatures":[{"sig":"MEYCIQCKnZGNN+x39GoCHxrLjWHxo2Rior1mr62Z7/vlvQQnxgIhAJM+lWuqDrxW+KNx3eWcNGPm8rzkHWm/zAjw/0CSsksh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494217,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5AcHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohfQ/9FA80QD46YQIwakr0nKuUSYKherjAddhwEwhUA7OwdXkGXvht\r\n2B66InigTxnrSZG9lD5QjtfqqIIHvWmi7NyKCSU7La5Gjs3KLPdzfWS3iEyD\r\nZGMSNkjf73VUiV4bB92UwncST0QrT3FY+0Xp5vzycXq/dwjUH7wnZV7m/ddY\r\nyn0QSkHfWwkdOwVb63zQhDps4jCnGHnTQqVSlf5Kb5IAE0sGiABS3i3QuQN3\r\n3G2dIGl92RuEmZzBkOTcaPd8LAm0cybCM/lWcOQruCelKZwiQ6RfECTrIjgc\r\nd0+OEGnSsQ+dOYUrybaD/aO36dsHVtZKUEMOTdDmh1GO/udJdF57oOZEA+PE\r\n8oS6/GycRljvQZBO0J+8wycfKT/Xdvdi+74exJA14Hw879hIFe2cGlf5hC2N\r\nCJ6aPMRTMc4DPnM/a3WYgp6PKzPIIahIfGud2R7slYd7x4qyh35WRdz7UHm3\r\n9oc3DGXzSblcw7GG7BDWQywMjtW3l5buriuGTzZQ0byDNupI4nCydzuaTzgo\r\nHiqljh3V5Sqqf0Ao89XPKKgg6WjL5WyraxEBBhlc0QdQgPDSWbzi3DqWE5iB\r\nI8XynmfmWC2LOmVrV1TSiibGL0eAIHgRpXH1CDh2z9Qt2joaRoRu5k2ejgw4\r\nMaLuElF57UqXHKndnlYAUbUvygr+HId4u4o=\r\n=PkWK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"0eaf2a463c427d7732d580fb5c8b77c2182be5a3","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.3-dev.0eaf2a463_1675888390840_0.6156413163613335","host":"s3://npm-registry-packages"}},"1.56.4-dev.379182375":{"name":"@dts-stn/service-canada-design-system","version":"1.56.4-dev.379182375","_id":"@dts-stn/service-canada-design-system@1.56.4-dev.379182375","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"56f639fbfa8751632aad7674c5b05a6a8e637d4e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.4-dev.379182375.tgz","fileCount":9,"integrity":"sha512-6WfV2PtJfyfPFr1YVtYtCYnFGeKVBhyecYje1+BocMkIaA1QvNiYj8tyczPTowMirUqUlsaksWf0ZE5rcnRs0w==","signatures":[{"sig":"MEYCIQCmRS8jfhzY91uAMcM1B/oPwgPIev9kN2tFcG6tXuisPgIhAL3rfjfzN6jFYJIGuAaX+qWWwpxSSxS9A8sfKllJSwLJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5Q/FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmql4w/+NeWN+ifzo2pqG8XQ2kXKsqpyIcM3iSpDG01iMxt630VGbP8w\r\nfXhl4jYEzJMY48xR+XtuDzF/vfKa4hB2wTgwOW4w+O4nanCMyN/gJp4VE3PQ\r\nMv5Dxsmg2sbirEtrXKKrFB+QXWLrsRDxEIxzGS8FmPaqPvYrHapig6hr7Jzo\r\nRbMoG8gLH20FiUabfW8V2pPvkftYAMI1utxqD0+h2eowqSgvuWl/V+QX7rvJ\r\nrSYIYM6c1IJlu/+CfEmGF5SJo1bqddEBGv9kAJ59pDy1kmEqVQJ7muOr2dZp\r\n4rsrEI0RvH3IkXukJushEzC+HK1CzbaAa8VxxPehMgcsV9NwaBFgLDhGwq2X\r\ncJW+aSGdp23IfCJjahagfOquvPFqBSBdzSzxaLKHTkwK9EefcHTaLMZMPkb2\r\n55rmbCRLVQBv5AnH7FGNzAlJ/71CpTkkeQn6WP4btDEVsb1yQ2Wa9D7dBHz3\r\nY133JGqlBP1rfT3PbpJre4/8ifHe7PKST7FByzQ9vRLd1D5XOAbINHawBKMh\r\niY6J0cM1qOORyjXKIuoVSfWEMVBGWiinioW3DoqOlgxYSHc+CeOOi/2W5nQY\r\n8K5RJHY874FWkLaY/lvYPgBEETirMTD+lZ3rKe3OtkIUs4WhHqOTYMZgat1i\r\nY4z7KQY771j9p9qzb8qYi0BIDq+VKFyZD3I=\r\n=t7Vk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"3791823759ba11c71ba5beaf4aca5bc7ad7336aa","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.4-dev.379182375_1675956164817_0.2729132096543949","host":"s3://npm-registry-packages"}},"1.56.5-dev.1a7c70c6f":{"name":"@dts-stn/service-canada-design-system","version":"1.56.5-dev.1a7c70c6f","_id":"@dts-stn/service-canada-design-system@1.56.5-dev.1a7c70c6f","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d53814db16e043900b0cd63bdd7d8faf29b1873e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.5-dev.1a7c70c6f.tgz","fileCount":9,"integrity":"sha512-7ebRIgCkVulIQm2SZ8zxHN/ro2nPAB8BGLiJ6grynY07+vIVlV8Lg4sGHYEZlvIgsTbcs/5fsmRLlZhpebEP+Q==","signatures":[{"sig":"MEUCIQCdtZN5H4S1aHemHDGZ29PVZsREIrXufGHyIk4u2sU05wIgNcDG6UP1ybXHljGwxSCgW23zaMnPbNrWvkqHwObtujg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5Rw5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps8xAAmlxFut2JL6/7hPViaF+ddXKuPgVIY4JDZoYTQki0dLRZx2YZ\r\nSrY8oprBua7g2NVfXgNWgzjJLcYAwVzqWjgSR0QlIDOQXp4gt5gRoDkMXHL3\r\nRxZLXsVi7AsXa92sTNeDDu7Pf08uhY3/z3O3UBLkzo9QnTOtfMgBPeUIr/ch\r\nWsVHkfEFDcbyypoFi6zSrS9AQ3pNw8Z9GOuXyCxECPZg6zKjzJfgmcvtoHLo\r\novSW01VQ4RuHI/pvYvNsm6Iys6X7dVyEsUwsLPVYOL5VWkREeklBAhAgztIY\r\ny7CynvsBLi6u5R+UkV9d0yuiJKttHW68cJXJv/Pau1nXvptfsXqSoRetldOz\r\n3ewDA0R5Jw7+1/vgO3u+4kGwE+/T3oIYQ/w6miRo0muvF4jAksOr+NeGi2/P\r\nBqJ2W0UlDwHhfb4OH+wNcgWjWeEpCLkKH8H2fZY/yeb04fRjRJJzECwKMh+T\r\nDraqQGfT2zF0xzA5XebWaSIOmqZuiIFhhAMikfvLX7uunZovT3r7lIk4K4U/\r\nvnrsI8RPbSJ2th+pTwvEBXoTaww6uGhaRc7JsGRB5bPsABZISbY3mi9y+8OF\r\nfuYiZyanv/PcNlIht5db9BUSzMW6sqPfIh3R4+IUNWTPu95mokmq+xE2Kx7K\r\nksAn25JIcLxOEI/oIFTgQPNazG+sKDmIXyQ=\r\n=Lk7Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"1a7c70c6f70cd35c4bb0a5ffd45ea037dd273860","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.5-dev.1a7c70c6f_1675959353622_0.7493268379662144","host":"s3://npm-registry-packages"}},"1.56.6-dev.00208ba25":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.00208ba25","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.00208ba25","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7b95e5268ba23c849f4cf5c45d5bc4beca59eeeb","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.00208ba25.tgz","fileCount":9,"integrity":"sha512-DIlmcVoYl+YjT6n/AsZOPvPry3frMDuQkwkj+v91WIJK2TibJohpoY0ggeFZTLJpgfiBBbTbhV+s2nTGuGuK8g==","signatures":[{"sig":"MEUCIQDBH5OuDtOzUJSkvpcDR8WLIUcxbsY/3FkYypUsgRPe+wIgZMeGRIlrTc9sPHJpfnyomHbMdTUjrNpF1AOTdGKWook=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5mFiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3zhAAink5MS5XcB1nhtgl0oC5EWK9ViuejQdWze2X3iskR9XtVZrj\r\nVHXCXYHJR/1BH221n6rcc/jBnzzEXFXQciO8pdRWeKTbqHw2hxeO1aH7NrR4\r\nIJfGuDNKLvn8beujG8UOJDikQ1M69fU0JIK18XfvO7/FC9XuvndsP7F7Zwia\r\nt++kGd5sRyAQPducYDzbmDAJ41X5G1bKNAOxTvUxth6juuU8WWszSkHpBFSV\r\n9Yjwt/Td16DQjpD3P6PExHwgpDE295ENqvxBpNnU9rkOZFK0SqEespFeuyeO\r\nbCuHuLZWcVAiIsYf7/mqXbabdtofaNqr1/3lfLhBFgPJWe+WhsgSkYh+iFTh\r\nk9ghmiASWVO04oGB0dOwJn62ObN8g+SODtgwnnBpe3/6gLqnUqphtntxEDxM\r\n9tJA1/LjHIp+5ithXvDnXCVy58gvjZEvzUnKeBsNfrERMr20nj/omywm7yIf\r\nG6hJm+yK9DbsPJJ6VBpbNa5Mv0HBI3NByY+/RGljpEw6EgSdDZbD1qfjElCL\r\nL9ntsmmR6AdsDlx6C6RgGHicoAQhgKv5OLdEj6XuRNiNsTZrJmh2rW4Cf6Ml\r\nZs0cp/a7LDBT8wV4yEEBGL0LFaqf78znCXgox/XplrUI6rwi6G3nkGFZMlfV\r\n+FEYuEQtgEplMfNVUHkxJgTa3tDlq2qt4SE=\r\n=HTPD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"00208ba259bf0c26550a28bc8707ccd4252da207","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.6.2","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.00208ba25_1676042594065_0.3643268551033616","host":"s3://npm-registry-packages"}},"1.56.6-dev.7e188efb1":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.7e188efb1","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.7e188efb1","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"f94fb0f4cdf2426b246ad756361f15c65a1cb918","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.7e188efb1.tgz","fileCount":9,"integrity":"sha512-hMx+os5Qv4Z1YrReqx560ZZzvU/U78JAlh6sFQn/XhRVw94gG0U9b0oTwiLaW4TYvDgykf8OiXvpWTTpLL+RuA==","signatures":[{"sig":"MEQCIE9IX5H+CotFlB3fXrWG5V9lTaxFytlJWEOlQKynvAdxAiBNIVFOShqAi/hzB/Xhd3YE4uNJKf2eNIKco9yBd4uoLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj699BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbEBAAlsiINUNhC3OWkzetsAyyqayQV/yc9YylPXF3onAlgWLF47DJ\r\nlYejP0XmFupPortkP/gHSYwDietsNn97/OC5gwhIKAopx+Qojn+ls+H+zADd\r\nK/awkXSPQkv3U2EMtRJyW/KG8PG45TmOwdT3r7L1uTyeIUBvhhi8iErNsL31\r\nqUEOiHDSzf5WVY96znGGX0ZrWWkDajd6BnX2gUM8LPHXoNWeyzHP0V6hHO/L\r\nJInE+rZPLXlj+pMe2jsRaTvLgAlBwuqItxXIVYbWqkUBAmJSWcIHQ4Fg1AzK\r\nRHILOHQHqb0DMBC2G7jmaoNfz/2eRO4CYS1yfimVcZvrbFfVyjL1qRtLES4K\r\nAjxcJWW4hwrl9nRWzsx40KjvpHVm4KTHnsPI6UR8py8y7oV0aMhoBhiHfJ0v\r\nvZXvXB4ZqvCxsQ5L6bBkieAnd03C2XYj4V0OrwGzowiYFtyXrFTgR+blnvre\r\nWxSC8PDaxU5xiGUADBXCA1ShbCKmtpAzPjX3VD3Tm/R7bDMFYl6EymTAXm/4\r\nURYe2dWJGHOR66efk01OqG/aeifYhf32uKaEmJSEj11xL8Bugm5PXv7U4l/o\r\noD3xjSXNgudtylqoD+MybAqIO22AsOyjSACr12iJ0uydr7ix7SevVVHvXMgm\r\nOAbL1RdUisXOaoe+qiAFMhO90AitVz3u8LU=\r\n=XAlt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"7e188efb1e3252b392f62153409e82029162fd16","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.7e188efb1_1676402497225_0.9614857637320062","host":"s3://npm-registry-packages"}},"1.56.6-dev.1236e8767":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.1236e8767","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.1236e8767","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"4fe2d332600549a52bc56dc249047e1f51f4fc9e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.1236e8767.tgz","fileCount":9,"integrity":"sha512-cgeart3XlVXee34KffMMNzSoHHHy0PR8nsMEvaK99DyY4Pq/hJSNRnUWk5wtm7pFRtR/ektU7LVDU8MlcSbaUQ==","signatures":[{"sig":"MEUCIEX2hn0y80A1wztyeWuMXWl03eOhCkBiR88MSxrqIXEcAiEAjXKbimyijODoNIVGO9ug/+HsmKR0GJT32+xsssDyFuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7/RnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkIQ//TPF1yQUZkTo32FCI77lyDZJwOJNaq+9kmtdt5VibkuLnj24F\r\n+S6LnMfASl9J+YSKsfNcO754C/2sdudNxopsChetxca7YFZy45aT4o/LfjPt\r\nJbyzeatKq483nAx0HiHKoJBks9ib2AuqYcRyqaMGl/Q8sjOGAztg22z7ePpa\r\nmtimRubKZgmsA8L2xP1vLoSfXmnTdMCQU2hFx5flpPy5FcRxC1uO6AiA+xfl\r\nfp56Pu/2uYFYDMQbM2Nk3FThG/AnTAvVWpkLwh6r6MeZj2PHZfGGAJjmZExc\r\nk9AtnY1blbtTFc6EJmKW9F7qfeshBM42AtzpENcY4WtEjJwhKShzOo0N4fkx\r\ngjeFPuYKPCHwet023H4qWUiR+KgBJGF4c+Rqu2P14nF1roW1dPEFKTwR2l1k\r\npJ0Y0wpuHJ+2ubIVhvdM03t4octd79OtqKoOeahUEjUNxFw++a5ptWF3Zh9q\r\nB6yUQrgqRb9sX5k0w8wDO0CTsdKfEXN3rwSACcwJpm5MFVJ3VtW8D9e4dtcG\r\nfaLKrR/FkgcqlkgLds9uTS6A+6RUStLRjsj+VUKOs+GbPaa08tXvVvuRSx+1\r\ndx+hcYiHMr8ojBFogf6Ib/Si52Xp/iB6hew6i66pxwD8ivNPcjiKKAUBKExQ\r\nL08i7ywdLGA3SeqhhmUpGzTt7H27Ho3KAug=\r\n=G1QP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"1236e876767057d5327020d931865a1ddb0beea7","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.3.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.1236e8767_1676670055183_0.6379628171327862","host":"s3://npm-registry-packages"}},"1.56.6-dev.a1cc3c34f":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.a1cc3c34f","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.a1cc3c34f","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"6bb2ee9fb71b9083c71898b515cf80170b3b034d","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.a1cc3c34f.tgz","fileCount":12,"integrity":"sha512-h8bwMi1dVZDw/FyB+RvPx0vCuOAh46rp/PQJGhhjiTafCPUt51r+VhhUAMy2v6GWBiu8io60EX2D7b1pRA0wYQ==","signatures":[{"sig":"MEQCICgEEztlT7wJYsXY5bx/AuzWl+Xo1vK0jpMglNTIvHENAiB62SQizbvH0VPDcBNdyeaZvoSeo0jbYBOitrzg4KpTyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9lldACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoathAAnkupyzrzx1mxqqbouErlMhxz9UppkbTecASkK5lcp50ssWDL\r\nQcstaF/1LqLmxiMOgd3fTsdUkCw1oqHVazuZeUO3jgRjlcLCVn714zUNPxsy\r\nkTLFU+BSUFiptXp11K0neDps7uFvSEasLAtOKlZD1Ehv9iuPPSGhLSxHS7z6\r\ndWx4RjFQ6s/UvQk47vQnq2Lnxt+gIDrWTYAtWDzVvJG0l+/rjyphMuQpE4en\r\n0TXZ2B2K7WLh0HaCJUZ7QqR7KIn5GOP7p9AASITVjM0t85XL8G8haP9qXF/u\r\nafO7x1FoMZZ8N0dLlKm/rbknL/iUnncSWD7IScSrfT3d7iKToqgtcznm9gYC\r\nAfb8FixpOOMTv4MsnJ6mkd5E2RPbCHCo66AL6lo5OWg/Ca4zu1x2xB7v8n0+\r\nmDPs7rY4bNpSUsGvI+8oiOdpceJ67x8tl5L3tDPnlUi2Z6pfApKBXSiX8E4d\r\n9cJGY+zWUympwY4hBN42rlopzZYugiZaPjAzjNbbK2C78Sy7nEpDr63v1LnN\r\ntvLHT9JLon8jH4oMeH6jPqRvRv/hZ6efBVHRMvZiy5eJnx/2uxjROGcP+k2Z\r\nB8mjFRYNrc79AE52CyH9VrX1NImLUsJrsNMnzj7wO63k/5AXh100LwOGnaFc\r\ncQhSbi1hlAd7VjZPm3n0B9C+fVAKxaW6B4w=\r\n=SSnz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"a1cc3c34f899d95ccbddd241bbf118c598b74d44","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.3.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.a1cc3c34f_1677089117254_0.5182704160892033","host":"s3://npm-registry-packages"}},"1.56.6-dev.73281e9a4":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.73281e9a4","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.73281e9a4","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"41020da1671159fc5842267f4ea3dd9546912d64","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.73281e9a4.tgz","fileCount":12,"integrity":"sha512-RZ31Hjsxbe0Edt4ZLmOnuZL2syb4ArjzCUxFJtp+31cr8ahCGzZOWu3Mq7hBbEvUry7yQJzs6TZCiR+8FPw28w==","signatures":[{"sig":"MEQCIBFiyThASOVsJBk9IiQiJP9vmj0MlyOmE/DDp75oOKHgAiB/R0+XhGskDEvIrgK5lSwRuhy5hfMBTM6fLbdI1DOrPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509260,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9nU4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8ew//eFe2DWtuVMfK//JdxG2OOpk3iVaSjk4wOhBob602fizrVCQC\r\nR+7FencMg6lJbsp+jvbYHIuEiir8/9qkfY7QaoAKxdZPtD2HMlDd/rdEede5\r\nbb8O7KHslCEZcg7FO1i5P+E4/FryiT2nJVQWlmDd6IaUWhOyWdYBqCuP4prW\r\nkDMIzes8nDjv4Sk9tE4n9vkDR/lRWkwVQ5qf7fV57gjHQVsWooNpfj95mjpW\r\nm1NJeotMdYN5sgYxjVdgFEcdgkiIjAG/9Hhz8wD4KbEjQImXcVqdvElfov6p\r\nbtvhyZjBeUx5dIm1f++MwusKLNnUKG9O6MXx32qGVlOspxJtogzBaw/GiCJf\r\nxVClFyxFXeZMtH31zsod6R0ABn16wH94BwkC0DENpteEZeyNvVpuvKkUQWRP\r\n9fwCNtRy8bqvh4ofkvfy5wwPOx1dZ/DLLY4pBDiKKm+FWBMpj/K7Rap452vg\r\nUO0sFm9c25ioW9TBg5PzNDjQ1UhzT8feETmGglGToL5x2ss9iR0UIJNys56+\r\nQSSY8sIEbYQdDTt36jHeHf7FgH3WHRFD0Eb6Uni3j3DMFuN1/0pbl6MypZGm\r\nQfksuuwhyP4khkmNUFWziY7bCXcHs9T5t3iuVj29+KyEPbfqrm1Yr2NgYZmC\r\nWXNX0HpnBHPCxqbBDvgEr9/Y6mFZcRdlJ5c=\r\n=8RS/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"73281e9a401d7a5e4533506ed7331063be042b56","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.3.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.73281e9a4_1677096248534_0.7515693144339417","host":"s3://npm-registry-packages"}},"1.56.6-dev.ab071149b":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.ab071149b","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.ab071149b","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d81948f2c123e40a7ac7d7fd5b70c0906d75279c","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.ab071149b.tgz","fileCount":12,"integrity":"sha512-DmPqlnEUiesFqFB2eQWylaHO59E8rSee36qkQ+07APgTRQwawA4PfeS9kktfnHZyfMHfTH+9aORuZ9Zkg9EA4w==","signatures":[{"sig":"MEYCIQDVS/1LrhYDeXDZkuupQ8xti4wWh8pEMlI5MTY+gVJz4wIhAJ3fc2x95dbeeRDmAvjLTmEZZPjX7EXH19yTX3HiXp1e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+QyPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUXA//QCdjp7Vpx0WLWg/mtI4SLZ3yV1h/CSvHgkfCmqlEQrNv/A6U\r\npkanifOUuHoDw2M2UyYHmengMngBgaZmAFo9ImUk/sxJRSIH3t402clzEt3z\r\nrF7jn61LtzmbMz7BHTwC81RWz8bK+B2u67V1g2UxgqgUvUe6eT7B+BMCEkhP\r\ng/G/ZtbRNQMZNrpDlJCHukH6FG5nk0jfvhgGs+odRuuClmSmYbrBym+uJWU0\r\nSOwaMJ1pFmkzwUWTdmczplEjZKLOpTEd1qyjo3ClmTNO3waPtIg3knGXc/p8\r\nluC7aG9AzxQPSFwiI3V/SAjXbRF5/393q2s2EXMs0aa5Gq4KZa/Yo74Fs2HX\r\ntj85zN9g+apOPnhL+I2d02dIXptCAlepbiMoOX70883lbSkQ52h+TBvH27uO\r\nNwnnSdHSQDHKpa1Tj399CqLjpFmDg2+NM491+DMHZ17ZUtjv8Z8RkwcQGbFz\r\nXqAoP087auqGCbbxtTMmscfIExx+lywXyydMaF0iYCMz6ZITi/5AehCb+6wq\r\ntPE4IOttQ7am9OgW1sJmLlwd5gk+Pd+9MSTor7E9HPOYdjMg1kmH6jBqEwD9\r\nOZtK+4Hp/lykCZpfo8geQ47a0Z8E8eMZXvhDAhvF7lhPhkf2raI5GARfLnr1\r\nfPNKQyb9Vjx+OA7v1nD4/NtJQqS1PUd0fCk=\r\n=ibAH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"ab071149b4ee758eabd0c6e73dc749e770aa3c02","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.3.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.1.2","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.ab071149b_1677266063462_0.13956888947623725","host":"s3://npm-registry-packages"}},"1.56.6-dev.c631457f4":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.c631457f4","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.c631457f4","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"f6b016de66e74ef697a32433b59f65f83a88922e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.c631457f4.tgz","fileCount":12,"integrity":"sha512-wJFM6mtJKQA4R3R2r8ULaB4IvHU5cq7AfYIexJJiL3xC4JWSq7G4iISgYBTz6adp3okhWyITs6erNeZdnXBePA==","signatures":[{"sig":"MEQCICHa+ixfCUBw/2r7EXwLiuGetpX0JJd0P/by4F3Cu37UAiAWImHIVkPUgz4xbqA1qJS/Bq9jg2MGBjq7sZ/gNQSAnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":509702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+RDwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrw2BAAjzKVf+tnFcqC1ndJ/DOsThnzb1R6xyh1zqYUHmvY/jb33vQO\r\nN52wICAeFeyIIFlz6kZnq5Sgq5L7SqTWSYqa+OvV5nfy80mG0A7bqmQ+hUB6\r\npdqcrwBHsS/z7WwPydWpGjikZlEZrE4np8/F5XawNsEy4GXjCm3CDDzsnswA\r\nk+Lj9N2WsWVtg2AlL/L1HqR0yaphkCMy8b2ZcHCDdvY6+EOlRfQG0kVo44yN\r\nhDvRKwdTuW9todW95AkthhCHKGvB/lwl2sabmCPOGmP/r/g4fBYAtRc9J44F\r\nBM9v7rX6xmuKmrJAeCBvW6dsUatxcAcXpBYpkh03iyanKLlt8+RJQcpEUDl6\r\ni5QDTSXWYvKli3fxVW+MtornKiswfdoFocio4omBSxKhDma+VChguZ8ii4Rg\r\ng035XIDiBPnl/2fr/6lRTJ/deAUHX10PGzXoHF5zztX8TGClsj6UzBDEP/Ps\r\nUB0rE9zCgqx31Lv74zdbEm8SlXLl6QG5ZrAREGmHTfVDS2dpu7ydbcP5UFYy\r\nWCGZSRXzb1pY0G6Kgn7bweI5ivkO3xQucjDd+AO1JftCY5mYu+H/RyLL8H6/\r\nq/38eIDE1LZTxS4n6Fcp6MJC0wXWPHHMLyGmVxHaUeNEDXm89GTAELj6YpVp\r\n52ju1MYvrzEGa29cEjzl0txjqTnBxufvAww=\r\n=CDT4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"c631457f4be322cedd71aa37748ae5cf6ff44417","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.3.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.c631457f4_1677267184091_0.10509338313881855","host":"s3://npm-registry-packages"}},"1.56.6-dev.d56461a2b":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.d56461a2b","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.d56461a2b","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d79ba468080bebbcd026927f6ee1fb457f473be7","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.d56461a2b.tgz","fileCount":12,"integrity":"sha512-ZjXFLpHXU4SnGqDioqo4o63iPESmATfDHUQhwt9kxoeqVWzFDkb4Z2mVdaxB4CQjIPWSdOzz8P0pA5DxrcI+jA==","signatures":[{"sig":"MEUCIG+uokWzAsGgqJhzRfrrEXW2pK+TCLePUfj1WfHF7P7CAiEAq1Rpgrm7z7M+w96wAg4wlJiJBikI+EZeoS9jMIY09FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+RFIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvPg//dX6OYr32RwImDrqhCkR2IHWAYrOXdueiUAOGyK90fATV93Sm\r\nF6SWelRaf6EuCOVUysBfwKKvVPZCslUwKQCr04nWzSLjlcG/X/zpPH5cxlo6\r\n4WRBWmtMvTcPqbT+s9+JSAP+FRUC+kFV6u5CtctoAxo21Xzs4wEacrNj1i8j\r\nT+wAHOFTcS6ECq0OAKWyrUUrKTgped4Kj+tqgFfexi7wDyzSGUgwZhtIRYrc\r\ntkbMW6TYRL7P357O2hoB0Rgr+1xeoL9pFrjgZMChFt6ioMgpERNg62ki8hjb\r\n9RMec5XF+TQz1e0/TgKHLvZ8LpNgsGKjRIBvLmiN+nhOwFviJpHyHrR5Pbyi\r\nGY8OAihuM9JWJMtIrfYvBtCItsbUoOMujhHPRCeHfh+LK+G00LZkgmgq/SQL\r\nf4k0R0OwWuHZYyZ7A+2ABXOzGdDUAhU3TfMuLUtuA3DGgTGUtp0Pl4dPgQMU\r\nsY8+J9YShD+oMpfLKG9uhxAMJaI9uzwQNB4zqfKMrMQgK50f0oF0BvvQARU9\r\nzCplsC3RrmYPnxdfR4DLSTGV3Z3oh8Z5Q90w6uYYf07zNqcLN24zRSrzga6S\r\n7d4/ksDg14l8Ht6McZiy5FKW5fejwf/z8u1SZjWsIC6171Q/eAAzkVCu38gi\r\nI93libgVXAsWA3JX/Igz4hZ19lOo2HMVhIA=\r\n=Hixn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"d56461a2b6afc05cc29ffdd6ef483aa2626bd942","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.3.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.d56461a2b_1677267272071_0.8557965009815187","host":"s3://npm-registry-packages"}},"1.56.6-dev.96960ba77":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.96960ba77","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.96960ba77","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"848794eddb85cffde3ce8fb43b1258d30ed6d3a2","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.96960ba77.tgz","fileCount":12,"integrity":"sha512-JGiFub6yKId8z8XsPY94IJ13ZPBUWpNvMZGIRulI4kcoIUJVsl3hPaa+oQie5zFms4T/jSESZrv4qjwFL+KXxA==","signatures":[{"sig":"MEQCIAdXDyaA61q4uBKQkSNROajK7BJuFSc1ssGnSByk7aB/AiBTgePgH0gG6xilD92voWvO5rsHFuyiUl/Ipbeixr+dSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+S5bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6Jg//aDFuFlTxguGJsIdWjrm6wLotIP6Ed4xiRVq4GSNta/tKKuW0\r\nI7ibwZPDhO9QKin1nmOtKiMMvkYi8U3Bf0RY/gkkrMZU+7ZP4xd9Pzvobl36\r\nsjqWIuHE3Awmcrj4bwM85jDMi3fQkwyXtYj5hwRyawjAhDRYV0h0fvPhFIsD\r\neVwpysaPNJ81idiYZsYdo0UjVSh6/6t7iAXVG36mkyLIEngr2nxTBe92UJvb\r\nVrkutbOqb7aKp2QFIR0+p9PaqZ+nU2MzFPqyXzbPMt0o6dEs61MmHnQHJMlr\r\nItjhFnXic+d9VhJR3D2FnSaWiOYpZ7KZempDsljtAwkxYnqfueaq1M7GSZv/\r\nAzrZdxygcpEnGE+EW6NidHvlGvM+XX2d23OLpoLuRXVMNAGMn7V1Yw5nXGmR\r\nAF02/mhuUPjHekD/0k3zFNcERsXouBEjnBurPRU8cpas8FssHXB4jxZpXCmz\r\nRVfYitvrDwqobgJ5/isTXKC0K+pN90Sj1KyOtqq0fki4GwfFYy5FKjrRvJ3X\r\n/A8nMDGh0QwgHOK9ZlqhdM4GTYcXsgrJzSk/6A6BKYRxjl1jqYCwRmg26iwI\r\nL+EvmTZ9R/X32Qa1YPPaxqvN/UKYDW0v4eLY8q6Celnjy7VSbe9jxWce/wbL\r\n1+U6x6cd9fvkWuPX9ZXJ6BNR/JGKkvO3Obw=\r\n=fE0O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"96960ba7779f78fc0943e0686068a40e00800c3d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.3.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.96960ba77_1677274714873_0.9836961540171612","host":"s3://npm-registry-packages"}},"1.56.6-dev.bdf8433bd":{"name":"@dts-stn/service-canada-design-system","version":"1.56.6-dev.bdf8433bd","_id":"@dts-stn/service-canada-design-system@1.56.6-dev.bdf8433bd","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8b8cb14b8543c404c36fcffdd1c18b6fb92ded73","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.6-dev.bdf8433bd.tgz","fileCount":12,"integrity":"sha512-TksP7ops+YDia6+HPxYqq10EBbDE5hOuazkDDvt7MGixRpp72svzH9Wu1W7r/a3R1KSUjLY6dsiqn+JnMUFEdg==","signatures":[{"sig":"MEUCIDh4g3lltZB9eTgRkzN6xiB7wqtVqOoA9xiscDRqH3d4AiEAgj3XqqHmsuhyya6IESVvSt1l8CbApJ0OyzOxfcJdBnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+S/JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9gw/+PO5VPpVD+tJDzDvV1vFOZ1Wi9YsV6fpBJWmbDBvLsibEKAFQ\r\naYdDK0ODZ8K2bqtCS17o98QBtNZ7RkY8JqCIUD8B2tBW1k7qVYIffw/MceTb\r\nyPGcKSVChnour8JIPkKEq6hAzSBsIzBq8iV+8gDAE2BHgoT2JSEHIiQc62jI\r\nO4wkgPZD1LdsvY0gmenzxJMdugBZsBLd8MjmtmUzGimb2hOO/0oZt5R5wO0a\r\nm08m82BXPjCI8+T/8CMqjJO6QFyhqYUnlEjEnWEzo/mpS+vg4B2hl6gd0Pek\r\n/A9XEJiC4OubhkBa0owFboH4903RTgoU+6ehxJLVdsd950uM1soMd/5RZG0i\r\nSsVRBX1xGxMMlyGf0WLE0Uc1MKNsPeop51ckwCTZaW2kIXTyrJs4+73cWDKN\r\nOrimeCNB9FmwXd80H77pxjYXPnaf/3Yt2M3/67HLK9Tf98TjzfX3pZ+GK1gh\r\ni7a451Vbtqubueo+VB+7rYloqKvz68ppCA1r9QjLMb9edLZYfrsy3QDJ/9Iz\r\nQ/y8KSgnezYxxvvXHr8qjTkDswfbyE58cZqxBiHnNq8Lo2EgEnfjdN2wTL/4\r\n2WWRHp+TiPlzJ1nfqLOKYFaRomtip2xwx0VN39TDo03hPnnvNrXMyJDQyPKb\r\ntQssUXOziBPksrrBmZBI6afQ/4znHVvNvHE=\r\n=TVDx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"bdf8433bdaafba8f566f8b3b16fe2b3021c3d789","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.3.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.6-dev.bdf8433bd_1677275081215_0.5906104165696113","host":"s3://npm-registry-packages"}},"1.57.0":{"name":"@dts-stn/service-canada-design-system","version":"1.57.0","_id":"@dts-stn/service-canada-design-system@1.57.0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"b9f38cbe04538922ae804b5ce1e0383d395269ec","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.0.tgz","fileCount":12,"integrity":"sha512-i3FvG0wE44hM1UECsoV/+UDFCKM6UH4bfJt3rAIAjBlqYftjHLKWn+xQg/UlIViCY0Qrw5nZEkt0yjImLSGFww==","signatures":[{"sig":"MEUCIQD7BMeifEoferRpuYnWO0XPa3eUI2tHV3UrGupYJYAzqQIgCWgtoNUTw83WnqkRTX3ZYrnNCrXiGuL/JM6SdLb7stQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/g+/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrbtw//RnpSh3P9A6CgXwodzrpvxgY3rz59rvMVA8dDaFrpGDFEYi5h\r\nf7BvSEZ0/r9RUKwvtrj+2ivK3Vc2a/hxxbt42EdUK3Z5tzK7dDGv9YbLfCmt\r\nz2rpB71QScO8O67zapW+TD/mAUiRHZRRuh7HzejlbXYmLIjxjPnPoXbbuxc8\r\nNw7PnwgoiKDjzV1axzdgg0U2rzNFXX7pkhvQmDgANuA5L2jHuxDjvPs53QbV\r\n1uY8G2yGyJS0t2/HLD0f86JdXtO+mdvC1Zy2ZWM+AYjjxSuElHinszow/kEy\r\nsJDwpHTMnCbRTsaRG+zUCG8WtObbzYjLcqroAC8GtG1qAD0ptMsRR5slW0tN\r\namf02WqaTywtLyi7q3sksLYDS+Qd8I+wfOgmD46AU/Ibk9KNR7o2fdscBzLe\r\ncnFYx4h1icxCJpMls5LgYeqO2K3DVssanDwJVGnT+vR2Cg3XTPvsNE/Ezlrn\r\nEFlSsaB5sL/IhM6SJ62ukU/DGKq1Uz6iYBi/HfCjdunU2rr/pE/N37x+MDhP\r\n30j97UcgEiq+K7j/yIVk4wUjpbQNV9omkL/ZgBLAhc44JN4XljJj1INlX0tY\r\ndSnoHYBbU/EUG/VGuAKZba6lnJfvK2hZlXPQ5adj7tg4Z18DcuHLZojMIyNP\r\njJPepL6O5KdJZa3BERc67S6YceM6d8SXngk=\r\n=W6Qc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"a2b5a522a007391d26a794ef57fab0624dba1f84","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.3","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.19.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.0_1677594559362_0.2436394181206607","host":"s3://npm-registry-packages"}},"1.57.1-dev.50f5be381":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.50f5be381","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.50f5be381","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"a0a7db029c599642e9984f0b7a13218edc2d9cc0","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.50f5be381.tgz","fileCount":12,"integrity":"sha512-cWpQO9c8tCISzD9sR5S1Lfd3n7QsnKUtwkh9mqzCI0kvX8LuVbRfEY60Uu6Cjye66sdHZDaq/xfDtkJOzinkZQ==","signatures":[{"sig":"MEQCIC/EpRr5FtuII30LFibNVLmDlGa/aw3I1ittVw+y/wFMAiAiUrI/E+O14iIjCUqcAYGqdgV9X5BnpjvhUsuq4yki/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510012,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDzFwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmolgRAAgFSHfW/MPMFyvVcX6DCOq5RRcWrBNE1l6nB+dTVetFpsyNJF\r\nRg+ffGAybegwri4hODK//YbRdPW4BkUhIkCv+jYs/ik/Z2tenHGtteTXT+3N\r\n/9dIFn7+Rn1u+KzHo5uB/ZgLM3+2jad9l8OhvIq2E7m4RwpxugJB4mqQ7cC8\r\nbQsDEdRuYNthnRyNn0Wo2jRwaQ3IJYR6nuRFz/XTSRkMxJNkQ0jq2tKJSGlT\r\nTc1TNK8kyAAOLX0OH/lluABazBnk9rNQWfQ6trahgMF27oGDnL6zZwwk0GOr\r\nOop+eDHLtWgCTXAIXCV3FGtfFHqnFKcDgawE7qkPPESi2D+QhPRqt03vwU4c\r\nORAXOJUkq02eF/UNv72Y2Nb6/KLyOENj3NvLkNhxIv/WSbZ3179ph7zJ6vFb\r\ng5y8MeEIk3cFRTlow/3W4wu13ovF3FrCMkHqO1SkOWemrq+PXT+Kinwv5QxX\r\nFYa2fSaPo0FZ0N1FyKCkGBu70h2pss76ISyp779Zd1pVXEP2anrxLS7K12v8\r\nQQ7pcVCrBlapSQU0teYWZ7uh3TqlVhfqb4/f9CFzmfXWf4y8A9AmKY5mJ+T1\r\nW5fLhYVVCq07dsizfCXu/DvZvjekvrltUn7RB4xB5HKpTdif6IhR0WLI9UdM\r\nfxDJMIr6Bb93GxJXv0kwh+lCjt4QD6sokFU=\r\n=B28i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"50f5be38142c2303d6def9b01c063e952928709c","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.14.2","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.50f5be381_1678717296094_0.5550002238391702","host":"s3://npm-registry-packages"}},"1.57.1-dev.46411ddc8":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.46411ddc8","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.46411ddc8","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"aa809cee59e5ac4caa0b4536cd7386db4d8c0669","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.46411ddc8.tgz","fileCount":12,"integrity":"sha512-z3Sbr2N2ZwWb5nP7+f2KRiQsC9NjAoKGGLVEfuCTO7C5MpQQPh7aNr+OMICI6F+TkHHc8KfQdN2txU4q8Jr22g==","signatures":[{"sig":"MEUCIQC2wUXmrBUVB1grPkvzBcs2b3S/9Kx6nimB9yM8JldI8wIgE0ne7jwMIKoLhcqV52b5FQfji0Xq9OdBPGquzC+DigQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510050,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFGrPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7uQ/8CfLxG1GnQxLow7BiqHLIlCbG2FawzBll5+fPCfLZkTalCcxb\r\n/Iifz3aJHz2QCj+tMUYPZFSq597K/PHynSALXj/Io5SCdbvwtQN96ylwWgCd\r\nch7l3nq9UVAKjnI5pBWZFac0n5q57769mLiSPjLbwklFzuzb2mLVyM2jORKH\r\nejnSTavko83ozoTIWQiNq7J257t2WaXD/E/58oypMtDsd8StneybKWdA8HJD\r\n3Q8nOu7BdRIBXsOea+FlLOcIU4vaVFsiMvE95gWN7ug3Y2VIOqQMVcud4Zv1\r\nwcvPViRiU6+vFi7fOoFkG+LxTFLPP/hIRyhyET3aKeAPM5njqxhkT6N6K/3Z\r\npZAWnLr6iyJBn/wrAaImU579INliupyrmA2WwDU0lh7WCRzn8dkqaayIrfMh\r\nOZmYeMTPbCDf3pN5JF31dgbhEqIXf7z6T0QOOFx1LVVfYij7h8JKFf8dQc6A\r\nFsKCPZ5u9VjJiGptbTUBav/CmoigPsbXuRqkS4ugsw2esnNK6Eik/rTjl6Hf\r\nFmnMaLB3iHUvondsvAeoFlZyUUgJxPRmAbk7IzLne/j0IXJ/eMseNCfrQmM4\r\n33/Ts8oG0QEg3Ay2QX5bxvoJlzLlls/IKO9JevDMLNYElAzXZTCT7naAYYRy\r\nIA38k25TzmfeLSLh6uc8/wZEMK/eg7nZrIo=\r\n=nRsk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"46411ddc8b4985aeab598edfa62b2941442b85d6","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.46411ddc8_1679059662755_0.30154567841777213","host":"s3://npm-registry-packages"}},"1.57.1-dev.efe8b7dc0":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.efe8b7dc0","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.efe8b7dc0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"1c373e97af06e23e28a22f5ee2b0455b724bcf4b","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.efe8b7dc0.tgz","fileCount":12,"integrity":"sha512-WbxXXBezexeuPZsWmYdMrK7CW06pql4PBUX87Ff6Y+XSn5DxJkeSOKHE76HwTUJK3ki2uehRBeZg9kCawoVhBw==","signatures":[{"sig":"MEYCIQDJYle4yeZQJLvbd65ZroyF2UHg9lu8WeCsYwoXAiQRhgIhAJN53PxXsMWGjTGL03YTfSdAbueyZ7NwkEm7oOE/Hh/u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkFOVPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRSw//Smi0hmviQpYtdhJbFwkm60b8Qr8BkV8svupTsJOiuXBH2JRU\r\nSS4zrfb//wMc79Bi9D4GEJ1JXUqJ5rHPQu5IBy6P6rRIWpxcr3g5GxGEx2S9\r\nafDvDAVdcWTykVKF0TfrdDzHBY2r4pFAME9gY+5ui7g4KrEok1j3N2Nga7hQ\r\n1RaTlmRpIEGpqa1q9bXM5axzt6NWRHLaScRmj+H+Qijvdn0InP8KUILpmptO\r\ne+r/ZZdOqK5qu+0dkhqSKlTdPAIG/GcUobdvIi4EBdJGh0n7+4KyOOFAE/3u\r\nupJchdYnPFgqrIZ1ILdvvNNFZ7IExFbKBvfiEdTZ+lY0pdLfvxh6PLQD2/7M\r\n1zn6qDQMuDzLREZ+MakAG9fWoPoH5UWV1GGo3O/lHv1oJlXlEFkJPjqPTEi3\r\n4cM8cGanrbYzzvHxba2KmhhgUTQgyEm0S/H2+wJ+9dZdeillVvv88czHWEUF\r\n3blYIhff8NtrW5wvj9Aswnje/xkkK2LMjonQrWyCS8amCQaoAN9/o/vXHSnI\r\ncz/Jm/+gIroYMAFLuS/F1yWuJ5nxFoiMimdBYAr+kId80izixIFS/ODCkR4c\r\nOzcFgQkqxzv5Imx5IQt779VxY1c6pQZskhqJUQo6awkF625PoL5Ksh8ZUrff\r\nD1CqQeFiWhzcFi8HuvCOIR0ESEBNXr2LCYI=\r\n=svQ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"efe8b7dc06b0deb504fea6eca6f7801dc16ac9d8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.efe8b7dc0_1679091023542_0.569079192474397","host":"s3://npm-registry-packages"}},"1.57.1-dev.3957ae22d":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.3957ae22d","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.3957ae22d","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5d43dcdf3d221b39493e7fd7c8a9fa719648f656","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.3957ae22d.tgz","fileCount":12,"integrity":"sha512-9oB6RW+fO2FjoXP09RqS7reiNiXaPlBFplSo1d/56MSl0OpJmq8e+/mcH/zcbEdifFVYv5NJ55C3i5DjS5cXmw==","signatures":[{"sig":"MEYCIQChevgcdi4VSMc1RONtMWmZsYXSJP5edWtK/Gv/Fo1RhwIhAOps1wk//RdCClugWFShOMic5Q3vsgQHGyoKSv8gTvuC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdIlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfGA//VFXUy0xmnGqw8s0t/+1Tw6Vh+2oJWCQHGZSMfG8grvIN/kz3\r\nyusyYr/ud80p7AF68Ib7Easegw4HOeH7Iyr3qYBXtb5uLuJK58Q/GZkCcAaM\r\nOQix5A3eKMJ69QSnXB3rXDFhiki8oJSDipQbAcrE73oequ4SouU3+wU+NvaC\r\nMXlJNfT4eiRYcl7sjW58c7u1KDFJ5WPvhwOofT+RrvfXVDovbG6bfCXF8i2I\r\nbXVUkKVtsuGYr0eGvGoJ7LvvjPICp7XaXE2KgazsNoH23XEMlvYTdof+W5yx\r\nJLSZBc4YnNKeh437YrLH6oHU8hfLQ6lScq3QXoxdMNI9EGl+pV7cpwoV2mYX\r\nn6kXpGSzPUv0uaGvGTrU27hvfa2mp8HUKeO2ZtXNd5dO72ZzgPDvmszjz+uL\r\njB3FDJVk4BqTsmf40/hvHl2fHAC8TysaHaAinyceLv+CZLtuvlHBEfOKLR7c\r\ntCGCrmHblLeq0O74EZxDYLniCl2au6PznjDmMtd2RplT+072cRQuBeUuhQM3\r\n+EYM1fDOfhnc7KN0hrGkgBzbWClsijN3CxGQeQfisFfNc+qah4sllC7Ax3BJ\r\nW0DkEw7azIjSxf2qfMtQ903uX/rtJ5AcyPuoozZ2svoN9x4fE+/9aEDLsed3\r\n3ru3RXv/rEnIUhnkeJE4rQZc8WhQ2KKmca8=\r\n=rqlX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"3957ae22dd2c387d36ea446cd8fc4710a6398b4b","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.3957ae22d_1679413797692_0.9768396838981548","host":"s3://npm-registry-packages"}},"1.57.1-dev.d5077fcf0":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.d5077fcf0","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.d5077fcf0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2a63c7405e4923fef0ec98981b25e231e5004c28","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.d5077fcf0.tgz","fileCount":12,"integrity":"sha512-vX83y/oyVwh0gQRN7rx+ZqY2gAxYRQ87v3VvOY/Cok0uPkaiNhI8nG58yezNOuci4HJFXoP0fiLZ/dLp6G3IrA==","signatures":[{"sig":"MEYCIQC/S0odfR/rkOdXyNAsvF205adxHGCYZNbib27JV/KHaQIhAMHcciwGiR1F0hb0WbzDUUQTk7wlTeJDinStTZWXG2jz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":510082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe+dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzjhAAmH9us6yT5XziS9LegAdDj3MFozphqHhmQdbe39dyIXEWMV4h\r\nXiBvTnzRE+LiLi7pvxuaKev1IZR/7g3n4ag1zYiGJYGyl7zPR62fvXL7zsTA\r\nIpCpR3En+QWAIYiycWQeklINvUu7NrBNiQBbmulUTH/O0JqSFTQwZNyanGAo\r\nxxzS0OaLDyr/xY73YS8uftp6J+QhTw+14boggtk9uYiOk5kP60J7BqRBEsSw\r\nPKmSvDbE+7doNJRT8eBmKR41yPOIaBbUdC2J1TNwP8iJ6IUAC5UOj+I6SsgR\r\nxa8Hf5u7jrAtel/1Go9Gn2NGVKWII1VA0c0B9LstvwGNm44VylMjQOZ4AwEK\r\nwlgeNevz7tZP9JkITApqVoWoZwClVJ9TX/LY5lKMfZfXYOTtce1lvZ0TShPh\r\nPqGB7dOK9SD3CLBfUWYfRv3MAIenhvo0rk82onZu8rp0I81ol0MW195E1SSU\r\nvvhzArDRA3YYum1IlPQU5gUsTB4aPoBWe0uLicrjjwy7EcU1Qkzlvosel+UQ\r\noF0HqsarO93+J5xvAEWbjwu0VHSNHo8gPMTAIfHLyXc/sQvk55VkUZdKK0Eu\r\nL0W2QcyRwtlcMNWZy7EbAwuiQ6IeIaDe7i4q5mjaQdShQC+W5jR1EBnYADPd\r\nZ1wMcz0SjsQ2c8DjLQY2mj1tPmADgwH18w8=\r\n=Tmhz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"d5077fcf0c5eb4aa594e0a8728697e21f729195d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","prop-types":"^15.7.2","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.d5077fcf0_1679421340939_0.05886442472625819","host":"s3://npm-registry-packages"}},"1.57.1-dev.c6000c3e0":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.c6000c3e0","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.c6000c3e0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"691f3b3ca3a27cc725a9dab9e7ebe26f2f26fbdb","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.c6000c3e0.tgz","fileCount":16,"integrity":"sha512-6tEfvQhF2OCI5ZsDmh8McFq64lVnMN7xLZts5fiZIijsC6YE1JXH0X/GQY7Rkl3/fN2bwYamRw8IOezSdDkq+g==","signatures":[{"sig":"MEQCIDWlSFDU+jFtZUdWlctPSwno3ZWleUVpmtooUYBvS8roAiA9/xFCUMCge6xN7MEfnQ+1YLXuV/Rb0Hw2Ufk13z8aHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":522446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIye0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCjhAAiaxcJ2d55/yxPC3FyNI3pMBgOhfn19EkYp+rIEw3UjyGR5rH\r\n72Y+OF+ohyxCzMcPoO7OPzP9KH6HjUivd5/cq+DFi5fqQvvXqnnXM3BsBEMt\r\nYCjvdTd3py9R0QYBm8pQJ+UfJn+iFFNvjh99uhE6SYdRKeIcyOqSE4gaiP1X\r\nsRpPLwNX5E7TN28K/8VZPRmvU04CsW/lNFzL1SaZp7owm4eYo672NodbvRM4\r\nbA+9y9KP1mj7egYKXLWa3HcWNNZr4Q1NIYHePKfR9R2HQZ1GSsDLmApiWbBy\r\nltVVEw4YcFZAERNVsIjyjK1cY3GHFQKMRNLxUn4ug41JB4+OZW18L0gejWxB\r\n/6OBvb52BomCkRRzkRiUJ8BtuinMAiFpHBHzL9D9eZiXVY3DRFVRt3pSvocZ\r\n7T9wwVQd6wGlD7992VC86fiO+br5BGWArGFvjSmDpGsbkFYqQfXLOeoDN8fc\r\nKvDIYPkJ9xjwKvasv2ZEypoXOxIhdqF9GPZJJm/9XhLUvyeuMXngmkeLL0w5\r\n1X8dbujsdsjK9c3MQpuGK0ENc7VZgLCltzveOBfG1wVibE57vDDBvCrDL6yL\r\n/3bKfPL6MlLeeTjOwyAtTM8Budnpi3dvo+zrLBqu2/8egoZlmcARE93rC+HJ\r\nXnPYV81BaIYd6gBhzsLTMWZDqtrKlKRId/0=\r\n=m+NZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"c6000c3e0062cc35aa5a62fd2fd434606ada869e","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.c6000c3e0_1680025524601_0.9527173606571304","host":"s3://npm-registry-packages"}},"1.57.1-dev.c2942ead5":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.c2942ead5","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.c2942ead5","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"973d7dc2fb4461828f506257d443c64aec3f65c9","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.c2942ead5.tgz","fileCount":16,"integrity":"sha512-H3AOCMxzs7q4QqI8ckT5/C0GbL+M4EWBJVkVQEQlT50kfuQ/eSBfORrOCkZzr4cOUJuy4FAE2MbqgVEOftfdqw==","signatures":[{"sig":"MEYCIQDeUdJTucxR3TopDzF9A66ECFLjpNnBlgfTGkAxSETRgwIhANa8nTUjHhlcWAuLUqjBaFp+V0YrZW71vAQRhnfYJ3kn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":522479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJxZMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1/A/+O0NwO7s0eTUZ8RD7FkkFiaLKd8kiwYY0TzoXkzZG3gq/R6zI\r\nK/3K7q6rPa1O8zBIExP7XbJ9QPIXmjaXE5uzWojde9VCLfq3YD9lB9h3Ryly\r\nfl/l/cHmjw1AvpUNQF9zWHwcm7dosVEAd5xXELPtyQnZNNxtJsigQB9s5rEK\r\ng/LoGvyxDEKnVdqjk1OptCkvSfVSv9WwjRicn9UOlJbCzlr9Cn0Xu+gAQpr2\r\nMv0CfwwYOH87SzMH99AJayx/TdCsWlHAbFErKSWo+3a9or2VTkKCuX5FdOKI\r\n0IVhR+p9L3w599c7zUKfW12dxOf9Rr9PB3CxFFl3uGRlDCycFRsrJAaTaQBr\r\nSy4FJkQlvCQKwadXey/717LNE+FXI5IsV4jYOxwbcYcP2f2Fo/m7n86OfPHB\r\no2joKSllwiKLBvK3qiezaKjU1z6lG8S1u0e+n+0PEakcqz1c1dc6F6ZV0oXa\r\nO32wgHe6qhaSq9VMshupkLPe6oq+KtXul2AAcMm5YBexTLX2bIUZEMcFFgsx\r\nUkSAAFrASCY31SYzfZc+RmPUXNHhqf4ndVbm32Df2aiwccueQzHJ2TwKKwbc\r\nPZhor9UK3lqG2xpNlLjk4zb0iUkyvHRaW8EqcVGhresmTpv1dvxwakzZk1o2\r\n5xmz1khRikTdm/n1BFXpRDXUC0LAKOKMk00=\r\n=wxL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"c2942ead5e8f77a968bff7d6b6300c887a24e272","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.c2942ead5_1680283211984_0.4379740643924517","host":"s3://npm-registry-packages"}},"1.57.1-dev.1c2444418":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.1c2444418","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.1c2444418","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"bc628e74c4e6ab43b79cb2541163470096065c1a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.1c2444418.tgz","fileCount":16,"integrity":"sha512-k9WagiotwTe6ZjjTc2mvxuozV+Tf/TQPFpgtllmeGP8L00eJZcdyre5835zkwlOlx01SKUYPD6w2WDgYR1zEAg==","signatures":[{"sig":"MEUCIQCiK69NBc5TZ+Mql9BXm19JiFuJTl0AL7X9kcgJOr2X7wIgYjPXj0G4GPp8qChO422WKSnik7dqThPN27ervc04huE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":524522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNalxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdJQ//WZ8durYWfbgOiI3eEN8rCJU7cGG9NT+4RfBsxFm+fbRvrmGE\r\nND68HhZgmPybHLBdC8EAOTGzCTfbwLrunqnfvYObD2grhtF6p7FMtGEwlNlE\r\nr7GIbc+P/gclqdWR8a0U4k3kfhOuSsNwyR9BGkLISGwQ6qdwU1XKqJi46fa5\r\nZ44Qw/X1U2FoU/3FCcXnjb1+Gwee7a1PrFaflpiFiBwXzua6UHhVBxuHbjUn\r\nc+9Y0IBhf7UpSxM0I78HMynL/SM7twFrAiLLKBIjHJhBhS6kbMqeIVIwN/KR\r\nkpbwZyKsi+M7icggkfBQ1to1cNDoA362vfAxKfjZuvoPLNCKRlF+SdzJrwlO\r\n1SNpDaghgP1u7hxTlrdvTXJNdEosj2Oj+kjJvVA53zMTrxb5Ry4AHmE+Ul6q\r\nGhLfXOskTwImHi7GKL+Ne7y2s2BoiwpZYs8p14uEoomgb+EPvj3lZc8l5Yfq\r\nP0fTA2k4OCNf4dVT9b+cnsPx2wNQ9lF2HqoMBTLfmRCxT0ikEUWq4Jk9aJv0\r\nRRkKCG71wtC0rgksEPT1cKYm6jjJ0ptjUXP4Dj+zltrVoJfUuho/I/xtJkW+\r\nKtG3+JYzPitGBeZDTfyVJWmBIKhFibccbhEIS9ZKyvc/MGuL/3bIJhSIKT3g\r\nFeslmH9AJs8Ac7Zv+wdFs9KDiGRR+qXegRE=\r\n=QCsV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"1c2444418a2ec63ee42581375983e5d5c120196e","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.1c2444418_1681238385140_0.6109799877148236","host":"s3://npm-registry-packages"}},"1.58.1-dev.f04c2ec86":{"name":"@dts-stn/service-canada-design-system","version":"1.58.1-dev.f04c2ec86","_id":"@dts-stn/service-canada-design-system@1.58.1-dev.f04c2ec86","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"831032edf41fdc5fc6b4d85a97d6097ad1cddbdf","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.58.1-dev.f04c2ec86.tgz","fileCount":16,"integrity":"sha512-gKSGGl84i8w8Aj1ZtSpqVzMb/LK8kfN61gQ7vKLAPOiBHx5lLx1OxMvjtjX1sRYHyP6w9DtdWFCPfgPt1EqgMQ==","signatures":[{"sig":"MEYCIQDxuBGKVMYJDIPY8lRbB5gNobNUaajFmVRYJizAdvUr6wIhAPI8ltQqavxHIJOSzjSy8ztgM9oQ6CLLIwXBovVid36E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":524608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOA12ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr72A//dYjOX3yfChVHiRr5udKLscY8jM/6XxUx7pNViA/iqsRAA7Ow\r\nipZHXxO/FVjPDcjqXiEP/mx734SVlnz0AfG0OrjyrvPOuz9dI6U5/TFMXNqz\r\nFWaUgyKRt6CQ+KhJqoB3FJYtQtUch1wgQtIJuuUm0ugaKjVCahj6A3Eg6xYt\r\nqo3zC7EDZKp92u2cwGl/8PvEcKlVBONE4b6ouzaP5q/vbaMTFveQzfU5Aol8\r\n/BD2Thf3C+zairemger5zYehf3kncYiSOjbflgUnOq9xwqrE1V1LeojcuQKe\r\n4ZZ1ZrrrcDFNpXwTXPFU93SGnmqtCgeaEC6vQkINkypkaaBncNLddm9Ja2UR\r\nM+cvfcH0NoahPsMkpOdeLk5SNiQ1y6OBn3SgZXe2dnBkYnXTSKJr+b2NwbdW\r\nV8XYYrWvSjpnrZJnKqz6iwyQ2WKdnHDSTRQ5O5RQVRY8tUWSLspT7pzyLOJq\r\nDOCVAgn4Spy+rzAY1idQhOdcD5mWZahptw1ds608+mUCfCQvO6yuco4n3Nhu\r\npw6DzX/gs8EBgXE0tAgfHzbFMJRomoo4sgDZznQNyPiOEqIvt7RqnDTtKKIa\r\nIoQTMFw1cjyoKosXatUCuJrA48rb+vxD0SBwXJH5plas2eo58rQHMIJ3JOID\r\nhY2kMRFUMmK0Z3HjxaP7FysQUVCWoa+TdWE=\r\n=UwOR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"f04c2ec869848508a5488a8b17e1ef4c7bb4a402","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.10.1","release-please":"^14.17.3","react-router-dom":"^6.7.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.5.0","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.58.1-dev.f04c2ec86_1681395062299_0.8407983068328164","host":"s3://npm-registry-packages"}},"1.59.1-dev.4ee8c8af9":{"name":"@dts-stn/service-canada-design-system","version":"1.59.1-dev.4ee8c8af9","_id":"@dts-stn/service-canada-design-system@1.59.1-dev.4ee8c8af9","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d8a03b58bda3957cce5cf2ad43c5a0469d689636","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.59.1-dev.4ee8c8af9.tgz","fileCount":16,"integrity":"sha512-aLGD8+y3WFz8qAC8hWJEDLrL8flgFWol/L1bzzo6GxUIImmbO3agumk8DS0TRwwoiECTs49+UQ7Z3X6mOzeppQ==","signatures":[{"sig":"MEUCIQC9YbJQbNrujLfT5ZxZ3ov+jaEd9+hY8c6voWLsugVIIwIgMte24GM2VAkVs1ZeeKmP2mwUQbTFfc7MqZUxelK2ZeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":524722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOFrAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZexAAoDzu7kf1wAq4KqCbd5/uOCrzyvCLzpcXXX0qz9NbldfEmJ8E\r\nRbnxvSYb2vW8T1TTGn4eLwjGK0KS/Fm0xs6dmdw2VJdnzJh4Q+O8sg9tFBgS\r\n/QDeOf0yj9DgW/cuIHZg6kFEZlm4J9+HWTeTd4ZnltgIsWAGXkMpqJQCoBAa\r\nccux7nuufI6YyfBzoTclLhao1BzuvG6t7PhSjIOcc3DYPdeq75HZzke9Zgsy\r\nmRMdtCVk4e3bfNNy/glVD8WfB7+4SKl8NsK1OtgDFlTrPr/XTXLagJr0YzWE\r\nPE0DhaUzmta4lnvs401z2eecLmd8esa0+ou220DVSvn1mx8QNWUJryXBJUEF\r\nxwFrN765THL+b/pycRg1k0oXtxrxfyoJp51UaJo+aVDgUdLcRVsfWAoJjk8j\r\n68R4ZBWkLG6CvCB3UK3GzBEp9mcdlA6EydSPl1JUGk7cTqwg9CL15QE8yujH\r\nO16uabkQc+UN8j7eIc9VkfbNTrhMMO9j4J8UZMcmI7YcIcx+53V6ww7GX9Kk\r\nDCtK7fy0RCWdMBBv2AQDJCvwDISHc/nZVLOKAXflQs8hjdk+qie9y4i0NUov\r\n4yTKSyekixzyAYsr8bCHgFmMbsN/g0vS0aBCMOE1qflfm21vSzgO+1nXapyJ\r\niggS5OsLhWFjUWIOYB/rEjN8xHSvdKLOtBU=\r\n=oqRY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"4ee8c8af9b3c1f2166862afcec0dff995771b239","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.59.1-dev.4ee8c8af9_1681414848592_0.5560079391415744","host":"s3://npm-registry-packages"}},"1.59.2-dev.5c355b8ea":{"name":"@dts-stn/service-canada-design-system","version":"1.59.2-dev.5c355b8ea","_id":"@dts-stn/service-canada-design-system@1.59.2-dev.5c355b8ea","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"576b52ea10a59f629a4d6b5a5d0535cdb87fc89e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.59.2-dev.5c355b8ea.tgz","fileCount":16,"integrity":"sha512-QrGSmMzBB9T9DtHmT2FWWMkn1IaYi7RDqfiLn0e+mNzLGoZIKDWUTRwowaX3UXgRj/IzVmjMxaM7MttFj8broA==","signatures":[{"sig":"MEUCIQDDAIB98G6AlW7M+9iAg8eSc0Fg01KTYaHcsZitm+drPgIgMMgux3+BERmplyDOxV09+3u7MGteWWbQp9wyiOiHjzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":524776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOVMQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo45xAAjqIJ0jrZjRD/gvB/X4DJO26BcQcgET6zxdi5PmvJQsdPDolD\r\nFin8j+Uqz2M8awjvGv5+07fZiZ3QVU1PLzfwvKd1yHD96OIpeTGBXx41P2aS\r\njC0XZh/3W6oxIJmafDE0W7E+jhxHT9PT+5Zo/Vlyl+0C7JRnIrB0Pt68seCG\r\nI/MMmRbnAuZcCi0OkAIYF6flQtZWpIfRT0DWzwHN5//VMcQspQ6uY39L6GBQ\r\nPpuFjoHhDITaDp9f1xQ/zunBVg+AlFAjqyuUk8pJ/9DkhB3kmqD+bM20Lj/L\r\n8ZM2G91z7WhiUJHdZHdMues5bRc8Ounx/JvV1CV5szhF7JQdFS8pCGJAHzA5\r\nU8rfIJLZQJ2+BfrqGqIdRmoo0v9d4eSAcsY1ZiFr9VJYlEwyeE50hH6gGsEb\r\nv/5oKcNpFhNkRhamCQZfPVLdRpQuwQhfvBhxtCMKKXGvTWS6ThJMG7fj0jBV\r\nj5MjUBBa2nLy937+XWoitzAQyfB3hOZd56kb+sEAe1z3tzhiUVHlTCFuUcT2\r\nt5+LY4Iiq6jWwQWKn2u2dUAN7RPNzX1Aq8Wu3NyCBe8ML1E0e8LClUy+3ZWx\r\n2Nfmhg5nJZQGX0UIaMoSfATo6xOPNuK5r/uORSRrRMjgW+v2xQQI6awu3c01\r\nN/1x6xW21SqYNaHYL1HrLapVjXjZU+pfIu0=\r\n=H8ab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"5c355b8ea733c76eba280ca484bd6babafa18c93","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.0","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.15.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.59.2-dev.5c355b8ea_1681478416245_0.7764414514749569","host":"s3://npm-registry-packages"}},"1.59.3-dev.8e5a38b93":{"name":"@dts-stn/service-canada-design-system","version":"1.59.3-dev.8e5a38b93","_id":"@dts-stn/service-canada-design-system@1.59.3-dev.8e5a38b93","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"4b4d0a8d1de4bc120611bbfb9efbd671b9cd96be","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.59.3-dev.8e5a38b93.tgz","fileCount":16,"integrity":"sha512-TkyeGQwf0paM41CCTBBjK+X3sIdzfKLCFVg/Lnd3CWOhblrGPyGq/P9aXESpeist2txg41AVbHi4r9wCUMMm6g==","signatures":[{"sig":"MEQCIHxV9MKdcR9Bsqu0H/c7Rx1LDLcxCeQQwtLjZYFQm8McAiBmTgFcibwV+6mcM4dQ6ZhW35nuOt1b0O/moFGSFMV3Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":524792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX3sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxLg/7B31xeZvY8dLQkXcU+lZrjLk01r4hOWf0DUc9+3iCrdWIiWA5\r\n3csZ8nIbHihxjz/MSsDnxz/4AHIhcEAVaNgy5U5xmkKpCRumN5T6Y/s1dQIC\r\nf03iiMhkTdsPwuiw8cyKOG5MNrLiCQsuqm6YiQwqNVUQtzsgD9YAvL561xik\r\nJkDTz7gpoQOD2rBqiD/Pcc9K6Z74VlR5eBxs/e4uMSTSD5iXAwWudrmNB1ew\r\nXWzllG3xiA08MitXJ+CtaXVWe7dJBkRLG84zYFyzIRgi1GCKWIcNB1FhDjDH\r\nDbEusKKGe4loSaA4VFedsKjgF72NKZwq+Bz4Ka3gvzbSiLIYu9QPl4bNpAed\r\nAECSwtMV3bF4as0jZa+kvyE5TR8/7zLsUChrR0t2E0KLqbofDiBu9LCW4dHN\r\nggm3cf5XPr0L1fdjdtAHVnxbYbATQvfS9xG+t5Zmf5ILzuT370WlAsGmlm9S\r\nDqh2xZXf5jyMedI79HfJTLxGfTMLjs7X6havKxr4/qJ/ksuXMar1rb8DQYVR\r\nHifZ+x623ZCyADYWI3RVqhbikAfaGWnXn3I8JaRoIqHZHuogv9qACRbbI+ix\r\nhUXKfQP11zmv3n+dBBgVrVj+vGPOWTqOkZPo3fzboZdR36nJ+FAS7mioACF5\r\nsjI0k00SBoQP5RPNdNgyHNUTkj/fEWDXTqw=\r\n=smln\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"8e5a38b934a706e647008dc23d1b576982d101e0","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.59.3-dev.8e5a38b93_1682013676144_0.10396790210766937","host":"s3://npm-registry-packages"}},"1.59.4-dev.7e0504804":{"name":"@dts-stn/service-canada-design-system","version":"1.59.4-dev.7e0504804","_id":"@dts-stn/service-canada-design-system@1.59.4-dev.7e0504804","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"30400465dc6fb324279363ff8b7ae69c52f7e6a0","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.59.4-dev.7e0504804.tgz","fileCount":16,"integrity":"sha512-+WxEYd4Y0WW8Oc9uOx/klrhV+YbOnfqF98axVPCPN7LFNzosaLfESCIzLZ/Gl3ybkAB5bGR/mqSPXak5o3tQAQ==","signatures":[{"sig":"MEUCIEAJBb00yjldt5XSsC1LYatb2FNF+93X+qPDR/RhZpJxAiEAvA4F0Kh0d4Gz9bWuaLJqbiKo2Z5oD5btcENDIjkShn0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRp+tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmou+Q//fZU2EgR2olFxHjBXlvUOt9lZc6OMhMNYl2A7dl0++cnLI6oY\r\nssIZ7wfv6C0MZCRhh4x0AoEMfHLFdBTbCQEUIAlLhnRRwKRvHOh8C4QCKY2o\r\n/vYEGjD/6wWZ6N9EtDIKC2R3+oCTCGxBPI/3ddvKlm72fncx9CE3LpNfNpkL\r\nT70spHl5wo4gYtugw7NV+q1bYN43uSSoHuhglSFGsSUnAVL3kWXAODrKLE3O\r\n3IdkeC9Y0YMm9M0JGwAhltdmxgDtaY60anmEAFkqNZazesJk/cdNCsXtWn+M\r\n3/U1DA6HLZiqs8Tyi0GWlukWpZDDhxQa2Q4EZGCCWX2BIrrG/Ad4e6SyDJj/\r\nGf/2ice9HJwDQ8HXxFXP/qgODfOrfzxbk/51S9SI+jXvpVPcYv2GrNAEOQ/X\r\navNfeEEBqLnSFPYULcl2yE5zxQrNwAWRVGztqELmx2OXMfZIEi35uS80KjqV\r\nsLeR9WNhgUh2LgnaCJxaFd5HT4SIG59qwNvhbcfqopa4HBtzHUPQiGY0eAPs\r\n5bVqgW916HLYkd9wHZs02Ec7O79yjLMBG+R6e8UqSmpCJyNYgj6IicmlGx76\r\nbvdGdqgqnTutJwiZdX95R9+yCjbAXzoW5r8F1KW4YEKTY2ge2Z4qJ1IfHW20\r\nMQWIp1IObxf9lCvQqi2Fwa9xI36s29ihxyw=\r\n=ISSO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"7e05048045e852191fea053d31ac28b20e52bd15","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.59.4-dev.7e0504804_1682349997179_0.3484754206763303","host":"s3://npm-registry-packages"}},"1.59.4":{"name":"@dts-stn/service-canada-design-system","version":"1.59.4","_id":"@dts-stn/service-canada-design-system@1.59.4","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8768b740b0f8dfe34570a8137312bfaf28a6b1c6","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.59.4.tgz","fileCount":16,"integrity":"sha512-HuE+jFRN5QDqgs8qXDF9CJpudBGWt5mWx6SK7uW2GCUMvZGKteU44aL3WvSRJg/1/gD3lnNCkn+HNNpKH2XfYg==","signatures":[{"sig":"MEQCIBv0+JiGGu/nU9Gt9m5WhNLHGhgL5tquV0Hm1D+bSDuqAiBJ7+qm+GoFhR+ISsq1EXBNUpQ3VQegUfaAyhEdU4/6OQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":524467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkR/IuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHpQ//WJZTJWFIRQstvXXg1HTuY4y/Q+T04SXTZqROX0RMT8tD/Xts\r\n8QZbXPA8SP+J8fVYNedfpEuJ2Ycofb04iIDsdklLO4RUsFKlQwjn0RbullaR\r\n93C+Oiua7LoJf+Zvhq2rIfolx+FoVEzaHiUfFhmvqemPVRgDPjIWQX0PUP91\r\n8/fhtxq4Lap+jzGgvyiHMDVrTnMmb3Xp2ASbdOBWFmmoTvwJrDoP+CZ1wMfu\r\nAGx14XBZag9i8t2fPPNsVAKyllr2JZ6V/i14hCDcPayCLmdKkwBlzHgS1Nu+\r\nRNykEG/22+HW/GAw341SQYzMFG24mrSWUJkFAo7ko28LhqukkV6U6SrzhKrY\r\nBlV38+69AM/7tds4+4yLd8NF5ZqZiryXf/bRNqg2gNf/G0FXiLWKYFOLkIHO\r\nCGv5C70nZosolm6FFk4G3eEW0GIXIN8X2e3VYCSKTsKMVSkrkvT81Xp2BKdJ\r\nJwEpFOb2qUuvdHYbfTV6AjnU5CBBGm9JhRuKDzx+Cmakm6YvYQqHq5Qu1d4v\r\n/2hmJnWXopX7BHzKjgt0qf2g607NkbCGPVJrjB/FR+SfumEd5te+8N0RKlID\r\n0+GEZEWGFy+PiQevB+VBco8j8BIpditgpESG+dkQgwoHZyOdPscF0dw6YRlJ\r\n3HL+fiR64PgnoXAsfEN9asN2tD70UWkp5Ck=\r\n=dt49\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"e656c3fb38228e4ad719aa55c2639f0a2c940016","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.4","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.20.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.59.4_1682436654105_0.807191159216111","host":"s3://npm-registry-packages"}},"1.59.5-dev.b8dc1df4a":{"name":"@dts-stn/service-canada-design-system","version":"1.59.5-dev.b8dc1df4a","_id":"@dts-stn/service-canada-design-system@1.59.5-dev.b8dc1df4a","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"de8fa86be9c782264d0b7f83ba5a7e020d38581d","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.59.5-dev.b8dc1df4a.tgz","fileCount":18,"integrity":"sha512-UN8NiZhmrm5Qgm8Tz3huduDYPe034k/Cu1EDdgh+OJpt6QX6CvdFlL/4de6JPNhr8ds3I8m4gp+kp1/AulUrMA==","signatures":[{"sig":"MEQCIEd+6w0A79egpHVMSsIx9ncBvk3b2jJ42L2fKJSdVzuSAiB6Fb7DuVr0MVWzPB4Sp+fowXPqSbpbeFzOFGH6EKFyTA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUUKzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofTA//biNt1jhjU+N2Xc87pTKzPuzyHWnBvZPCc/2TiWMw6P98UFM2\r\nImobDxZDQT1jVMIHz9YaYgxtJyWQL1KUjrCZRGy9kATWd8oqzUNX8PwR0DGt\r\nFbgudRL2NkondmTbrwHkcAAYhzFVgheuJwXA15RC50O1KJ5238k2SKERoi69\r\nXHPVMOoZXTzAKhgJY7GvaQf8J2kiIYrDyQgRwHxokNc6JZrJMNasOlTgT8ce\r\nyNVZWKImy/gCffupnrITef31I83lPkrox8GFT+YBNeSl7YYFu+SIf1Qgv1Xn\r\nzUs4OEoJTsEb85uQH1w/mQrsui9d7BI1h3nGi8L1F3VigSOSFuz85tnl9YAh\r\n0mLI4SjYTl48EUL4bRyX8QaMdfTPiCFCF5+i0LRyXiLjLhNzuSfMZoLT/TPV\r\nqIRfaYNup7bpBNRokhzFtAxOApIiw6DqmMj6pKsuZC6gspdtkn2pfSi13NDa\r\nttcS3yEpOhkQ5TG3XKMPfK+P35idmrhNAUqEs0QE7Va16afVC5H6/pEwMrVS\r\n4JFJ2z2+UgK5VW4tErDE4xAbcnZLOm5Uys+JTL5SzQRQSIWgu3ikb3WHN9x3\r\nzgnSRp2f1395gyUsKx15yrsIhTXrcAcsEeRjexTmRVvAgl0BAr/iopnJo7LI\r\nYt3OI6NTSPwfxryEqFYf2Fhq+SJmJtvAbZk=\r\n=Ngre\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"b8dc1df4a725b936376c7f0a67117c267a7d363c","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.59.5-dev.b8dc1df4a_1683047091160_0.4175246207932162","host":"s3://npm-registry-packages"}},"1.53.8-dev.3902940b9":{"name":"@dts-stn/service-canada-design-system","version":"1.53.8-dev.3902940b9","_id":"@dts-stn/service-canada-design-system@1.53.8-dev.3902940b9","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"944fe7bcdd00c7d625f5bbc1607b496bede25b62","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.8-dev.3902940b9.tgz","fileCount":18,"integrity":"sha512-tEAg5vQy5AzZafy474RuIYCTZuaKZYYVNn6SDUPUvbJLvXUajti6Rz3DggLMC6aXfCL2HiLm6E2yHahfNChWYA==","signatures":[{"sig":"MEYCIQD5k/Z/aG29TenUBHMa754ZjYlHEXur9aMguwZxIMxDIgIhAIoXYxWHGPRZeabLTb8UfFxEIh0gt3tUMz8PFlGIil9z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUWSdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzBw/+MRhtakiciTpeCwRV5RpOx8VYtE0nPxtYvjrzsSZyeU6wkF+d\r\n6WMNzUi6gTXWR7oOzGGZtaeRYRcsAVwDVbvI/+b0aMAVKNd5MBP1wcyosfSo\r\nR7lY11vo/nHTuKkbhqTmSg+Y1aMa7DxPw8kC6EDbggRUAutt+mgyErlJiXCZ\r\nADLBlRIiAdrjlrPzcKVtTAZsT09jNOZQQfuV6CpjP6CzNAD6+6B9dJIVlnmY\r\nte/YkC0ui1bn73L4PVaI73DecI0DDMPFS4UGXU3W9W2E0V+fgrEPCPgZGNr/\r\nOnTeDQ8+fJqE7n4iKJw5pfZzPH/9BHVUelp1x6KSYGdp4fbn+D4eCsiGE0jo\r\nOunVQdSQOJfPdYKsSQmcvtRkFKv9M7UcIky6M96V7rVyMqBorHQGbREKqwSG\r\nNHOn2NgekFeFF5UgvMj/yu+39+Xm6mIRlEiYyrqo8jbT9zWwrhDWJ+2eu9BM\r\nMHeUhC1GQvsUwPG/CDdYXlImwEhERNvnZ2u87FG+QbD1qA+Q48WKoQuwdDO8\r\nm49Xqn9Rvh/WB1y3Ty8yCOA4Xfv66hmnk5H6AZqxL4T7DmTvUqaDpgpUA3da\r\nipoxJgFx/c8kfSY7GN6la3FKI2dqIBWPnwUWAMz8wr/ADpHUHFCpdYTfKt9w\r\nqY4XdQmSQHTobADxVAcE/yKr43BXmh4LogU=\r\n=3mhl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"3902940b989cb4bcf4047d5a9b7c1ab208776070","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.8-dev.3902940b9_1683055773675_0.0024608948399678088","host":"s3://npm-registry-packages"}},"1.53.8-dev.307daafef":{"name":"@dts-stn/service-canada-design-system","version":"1.53.8-dev.307daafef","_id":"@dts-stn/service-canada-design-system@1.53.8-dev.307daafef","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"6a86347525567dc0c708ed5afc49ef532e1d7cfa","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.8-dev.307daafef.tgz","fileCount":18,"integrity":"sha512-BXnUBis67o/7dE7Egaii/AXEKMjlFcRY1Yl1ellzsd/bRrSbmaV8WVByQa2zzNFTmhtSJQV1ACnMCcI7QCrttA==","signatures":[{"sig":"MEUCIQDnFinki18hvLN+Dp742PpLp04TD6NnjYlSJW+3CHiPBQIgTQ/26DTRl8pmMidbwPHGuSET8agQNyAONNlmeyMa9yY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUmmDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosOw//SvNXAUdxnMmlPCclCgTetvEl9UxSkiK+facdelCE//RiqDOL\r\nt4TVCNO/A1R1/ZcHbNHgygDEFLDOsyPp3a/EAJYxrNv8TycUlm+pyPQTgJ+H\r\nml0dEFPewR/b39pnDkQe9XyXmPSrPBj9Y3CAbQ+VZcmKDNG5nIAmGbCS7Xmx\r\n05u9X5kIz7npwHz7mT/g8DEefAD43U9lRZ4C5Oxrhpsmv8iqeyKE581vLtce\r\nN8TY5a3MjmXa6WQsnMAeIOQPeJHpv2sklN2AbqwZEQ/qV7oABaFdKvB1Uy1D\r\nDJAjACSg5GyydSnzS8KMTSw+V0dSTvyawHSqlFBcLrG1WM05yiSdyb18CDJj\r\n0dga+LBgz9dnWXcAvt9IP/9/l1svO6bmZtR2XWjROtb/++xT1CD9e/tp4+jq\r\nDNJTM+nADtrVqva0IGMILulFIEvCjDlQB8n2RUQzPZiLAttFfTNQWsPutL9b\r\n3pjoqvF7wWRo+G2xw8RqK6LtepT9Eo3WUC+H6wkkrkxBIYBTg/4JnoPeK3Ir\r\nO+TKCMRoUQJcBIQnPYpJYXYFD9gAYFDYdj2hq3hU/dw9nIW2mIst71feeXKI\r\nwdBT19QMN5Ja3viFopNcUOpLSY4IRciG8jZWGA7NpfMAV5IUgafmZGdeml8J\r\nWqiK61LzXQI3IqDCuVnJyMfmDmGG12ASYkE=\r\n=/DCh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"307daafeff4f067b2b4e242511ee1048f1091ae2","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.8-dev.307daafef_1683122562756_0.07629408095385326","host":"s3://npm-registry-packages"}},"1.53.8-dev.a35a155af":{"name":"@dts-stn/service-canada-design-system","version":"1.53.8-dev.a35a155af","_id":"@dts-stn/service-canada-design-system@1.53.8-dev.a35a155af","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"14764a66d48150215424c25c21c003c0c8130015","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.53.8-dev.a35a155af.tgz","fileCount":18,"integrity":"sha512-Rs/0DXHMXoNvQpm/6p817qGWihney8KVfGIQ3vSIEelzEhHaVUbWof9zPayuWXYERUyqOzGqjihXVViE7hVffQ==","signatures":[{"sig":"MEQCIFEXxBs9PayqnxFYe5S3RdLu50P5bBppGt6ut7fZLD5NAiAiAvinhvgzzn0UeE8J20LFLiQWj8Hzw64FVYOPNB32Mw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUpiCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqG0BAAo/eEmV7CF0YX1f1Bmva5aXKYJuQVu5YczqfGYZX5ICG78PJ7\r\nQ5199aTNNgDTRyWU2GcEojTf7ZMBt+kzgdc3nwUwIku1GN7ltaAfMsWFo7+6\r\ndIgKbJ6Ei2RLs0FWQ6ebgbKnIQTik8NsVoo5j1oKvnoDk4d0wCJbcH7p3Tt8\r\ncxjpscCax0yvHDi3cj5/LEg/IScyUOl+5cfzyu3O0CTxXEDJgXAMsqzzEZQQ\r\nTMvNESROD7zkmx/wEtWwJIm1Mx2dEvJHdyJwh6EXsbXsotpZ08BuvJn7MBtE\r\nkK2Y46uecW+QfcnHn07NTjnDANOWWoGirqQ44vXeazTBvh2suvbsG6a9ST2n\r\nBROi5+yLZkydwExb7NMHSRiCf4vWMPq4aM/a0xDU24Gj1BCTxGdPz6O1K5VV\r\nUj2A8zETjs68cJGa3BER7xY9ukBphPguFKfoLyp3B0029/v3MViUfohO/fbN\r\nXGeac573v3LKq7KJuDAv6c1jVCfIUl8LDBvSZ0S50awMWJ4EUnn8+fvtdH+3\r\n1rQc6slp3loR617kbVjKRkLjt8eWSzwEp621VZ+mR5fFfikUIK/GtxwBY0t/\r\nYgEmuFxIlBg+5V7kK2aFfHiLFTYzcKxHN5YVyNLqdc1CHaUs0L/ox5MWLvQs\r\ndGqraa0OjLjnPPKUH9rhkTi2CNR9enu4zs8=\r\n=D6PP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"a35a155af7dfbc127a4548f89023be8ec1d65ca1","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.53.8-dev.a35a155af_1683134593968_0.6500795274544038","host":"s3://npm-registry-packages"}},"1.60.1-dev.c2c89aa6c":{"name":"@dts-stn/service-canada-design-system","version":"1.60.1-dev.c2c89aa6c","_id":"@dts-stn/service-canada-design-system@1.60.1-dev.c2c89aa6c","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5dc356fb282ec20f22677fc5eef30cdafaca1f9a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.60.1-dev.c2c89aa6c.tgz","fileCount":18,"integrity":"sha512-cMXH4UWOaUSU6TVdFr1ur/xAQ9Ad//ZEiQNhYA0An0suoJV6pOu5JTfn5FpVMXGZtxbL3rdjfBlWFobkZcyHpw==","signatures":[{"sig":"MEQCIGrw22IReML/OKdoN16z1edgDJ5RxqAqwTHmsyJSNvjiAiBNR47Mqr7EzDCvlPYOq7tHCS9rVT2vMTSb+Km5QyuzSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":525681,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUqXCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyzA//cI9SL101dbswWlmjhWKlt1zkl/h3lysk9fxhcpDu/QZKO8HO\r\noTC7IEjSs2CCtnKTgtBUvFtqeCpz/HnjfZwG5ejMEEL6+DQJ8CoB9q6ELhSI\r\n11uRFBZBq5xs4+q2LdWZQOf0gq4aCCv9KIVMpfB/3Fpz37ubVvTZJ9cRMs4z\r\nEJXfYpBL72jrB0p+iILjw1jo4ThW0JwdcTE/oHZwOKAfde7iAH8aiF9FCXzv\r\nDGaUFaq07iSZzJnvHjHanGFUk+yww89qm5A2p+HjnuBWt1Kdgt1qryc1NynE\r\nV67hQl/nhrrDmcoBmhAhAZPugVXvo7JXDjzxZtRu6jb90AffNDHbcCwLT4iu\r\nx0FbCNiKWw9fF80yAK1QQTscT3FCPClzNRztx2hKo28xGXrNHLoDNnRqEKBO\r\nypUodKZxc8k0DfgmhUWw1NGZhxECdZ2LY+4EbnwcdzIK0oPaI2M1MxNcMwEJ\r\ncQ0o1RX7CZbzm0ij6FLlRUvwmQWNHXmvaCj8XQB/1KDDU0FpT57D4m1gxQbZ\r\ne721WeNCy6TrYCMA0IK6UCYXlDRhEv3ILINrgsxzrwNVUfEdwUq60Ms3l+Uk\r\nIZqgm2zqml7t4uH9qSsSrpjiw9fb1tNNIRMAIVZAa/NA5Wvx8Id8tAdkrt2u\r\nI6YjbZTEF2MJqyo3JWilJkzl9yH5Nuyj6RY=\r\n=IxMC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"c2c89aa6c5e8eb36e08365c84a1051f5042b6287","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.60.1-dev.c2c89aa6c_1683137986399_0.6900255871322616","host":"s3://npm-registry-packages"}},"1.59.5-dev.357cdd303":{"name":"@dts-stn/service-canada-design-system","version":"1.59.5-dev.357cdd303","_id":"@dts-stn/service-canada-design-system@1.59.5-dev.357cdd303","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2ff24aa06eb8ed7f3278d592f1093e4d06e7f1fc","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.59.5-dev.357cdd303.tgz","fileCount":18,"integrity":"sha512-M8ElB8z6WGIngepFWWtvYBtDgx9nwRTGKqfbAFk932JxbRqLRPxXk7tq/uoeqi/pPXw10IuZcB1ZHmXtiQIS+w==","signatures":[{"sig":"MEYCIQCfj9YabH2ATdvVJXNtn6ZauB3vbNmnvjNtN3kyR7MsagIhAKTlXu8VhuAV0tUZrLXVDh+COOpTTuP2N1OhSH5AR+U1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUrIZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSGA/+KuwGU3YEn8CaIpY96ivKPprrJI8MRYOelAp9BHRr1Tlz00aZ\r\nl25UTgslkPmjEr9mehThv1crwZblOlukZpvp45Wz+DQidq3EHFRto78OX5D+\r\n4hrE4OvDemoFMkC2MeFHcBjdZMjhudgOg4r7Lu6DKhYs6QPQOpGqb3jdBXXi\r\nXUHZE6hPx+iPruWFdUbJOd0t7q5iI7qamXwD/7fHrAG2MoLmpwchAAsSgrxr\r\ntSAu74EcJrfB1oDsjwSvdJ92sVVuRkyqSEQL6MKYxzzEqeT4mTn2x7jmSpl2\r\n8Fi5Oceo05A6ljLcPucnXxp3XSPWLD1Ar87w0o37UmaebgUZD5ZcOFu+qu9f\r\nwrutixvOoKeQOyfp+QpW8mnqKIrZ5CrvMKSEKJl7FnqBkrNrIpqs7YuLeuWF\r\niqRdhrsAVo+01w4MwTzYksaD1u0FEj22FMLN43lUJcTj1cmluJrL8WSNpEnx\r\nk9ZTvUQ2eMOyaHto1T+KVfO0C01UW0S63G07S8lIImBXRxNgPYLLMiZk0mR7\r\nmTM7YSCu34U6o3+E0yqObtAanTm+JeFF00uZ8nfrcWiZzcTwa2ewuhOPhBWP\r\nQNpE0h07UPOpxX6wwhl+6HrMYOlj/sAYcyVei24JraBPhiOlGTdn7tvkLWii\r\nVCnznQVZczIL2M9gMqDYgt3oVzFPV3VlwGs=\r\n=2lxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"357cdd303300c3baf10288cda6c688be76617e5f","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.0.5","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.59.5-dev.357cdd303_1683141145268_0.9048644733881386","host":"s3://npm-registry-packages"}},"1.59.5-dev.0c465e778":{"name":"@dts-stn/service-canada-design-system","version":"1.59.5-dev.0c465e778","_id":"@dts-stn/service-canada-design-system@1.59.5-dev.0c465e778","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5fe416f6b94f6157717c4f397056aedca2268212","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.59.5-dev.0c465e778.tgz","fileCount":18,"integrity":"sha512-PikwJpELD7+3vheFtkdem0IWfyY9PBD9g63tRXILzOUDpv8/9QfOvccGGsDOihsLRpjPGUqhHxbOqSCgXN2oRQ==","signatures":[{"sig":"MEYCIQCSrfiKTbSIHQ/GcJmgyrv3ayDtZS0dRDNjDxiCzNH6GgIhAM1teyeAb1CSsHbmImVAVbj2JKqVSx1+NizlCcAQrJ5T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUrqVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMLRAAm43S3UToH3LhINChVAF0xTjcsXR45WYuH2aVZYRGvgUjlNWa\r\ntw6HRGkkyMmPhPfOiD1Rgk+RVLYVCvaRM9wISQ2sNY9V4R/Ibkhw64McHQ3q\r\nbFOqQ78t/Nopnwdi9RWcz6Wzwom30LvaTQ1EoWc7x+FJQZEJaWUMJqEpq4r+\r\nC0rM5d7vWaV+erdYD6xu2ucFAsY0/cdep8f2aigKRwTUKFd3PmrerS8yUxGC\r\n5BO6jMrXl0aDSKF9NceyAVLTf3JhP5JCULMUz9DWDdNKVfRw8m/YIJhUuPEi\r\nW4vzY3vj1kQcRtddnQzdg453SAisj6GRVKx0e4Fmvom1K2A1Ikf6+SIXfAd5\r\nlwun6VoBK7qrrMiswLAbddyacNlrnyf+WJwaQFooduwsuZ8rGLjyO3qGXjaw\r\npijaeZq6qv5NMXl6/0bThzbKmtM6RBqQPdPcp6DqJf56L/KyhOSyI04dCggJ\r\nsZJ23NAjX1pTYrYi+j7HgRMikQjTjz4igW4RCekkTjbOwccMIK4cwUtdH7Gw\r\nqdIjdsYG0G2NQc61e790wgeMPfQGn3NjynbjreKCY1LVYDJuVUsGsqUztFiC\r\naEpKqlCbrea4hsF06ArmzReBk8AzCiAVTY0ZIO/whom+hiStZVL3Vc2OqY1j\r\nXG6sd82+WMxulpZbS9hhEPU11bmz3cInAYI=\r\n=IbDg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"0c465e77881efedcb620ffda0f494f90b5874d61","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-router-dom":"^6.9.0","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.59.5-dev.0c465e778_1683143317100_0.24866882446545735","host":"s3://npm-registry-packages"}},"1.54.1-dev.0692fedb5":{"name":"@dts-stn/service-canada-design-system","version":"1.54.1-dev.0692fedb5","_id":"@dts-stn/service-canada-design-system@1.54.1-dev.0692fedb5","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"282a34a9f195c30d575ae9a63f1d291c2956293c","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.54.1-dev.0692fedb5.tgz","fileCount":18,"integrity":"sha512-K0Zs54vE9kUvhAcxwao6fUn5UF6/afGbXGcBc1wdSEbE5uxS9ZoiQ0GrqZ+LMfymkObF0p+mhW/6u0dww2gBHg==","signatures":[{"sig":"MEUCIQDobuzQylDzrDmbIcm7ya+hJpvyWj+7wRpmgde8f2UBQwIgUSluaiBwL7+b+naN1kU4t5F0/5UZfgDVgq8p/aJRWx4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUsMLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGfA/+IWEPuoZGfBFfuCwEdichmWAwQo0COw3IRmaHE+EjQ2iHBHBT\r\nmQydd/rML8GJrE4XVTnYCl+XJEG2btgxH04YD+AELkvTwx7wqGhUFPfQsCu6\r\n2iqwY4iZcD0FqpKJ9VpmUeC9rDGC0ZCPTvLfK28SRG3w2GlRV91fO+a43EC6\r\nvg6AFxKPTqpJVAKv5ULWfxMXrJSFjRkwGmaUnaxIQzvygwb/A6iEDAdsZS5F\r\n1USqaJV433Oao10wYfAZsV8/L30N8lSgp2NNt3a6kAEuXZZcLizUf5mJgg+q\r\naFsf6AedStUmJY6h8zacJmmC+wJPhZFulkQ6mBmtxkyajCmU6pj+fSqzBPK4\r\neyNxzwc2pThd0KF0l2tMG9xlOkDTpLJdY0Ge7VoI3NPPY/gV4XD/4yKIziYW\r\nKIjxB2ZMuZE7sIj/d1LZ7q37FbepUs9+JurXqJYw5LkEzLj5rbqVtzvjwcDn\r\nrIZZmIW5AA/QXRLOv7Z/MDnKM09RyYsFMMkbRTTbL8+RMkwx8jO6a2rljgIA\r\n6wKBEBeAulIt3LwoeGwtzy1+EeS5nTP5rtyis8UsCY+hGPR/bbGFp50ATzL9\r\ntz+KPSfdX7kEpZR64EK+MScafhROOM/+yUnABH2r54TXEzBOM43NM8DZflB1\r\n648hFO5JxMx/6su4mZ2pWtfGe3RBYoCUspc=\r\n=xVO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"0692fedb5ffc3f29a184047b21cbce100af49674","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.54.1-dev.0692fedb5_1683145482920_0.053858514313993355","host":"s3://npm-registry-packages"}},"1.54.1-dev.20b2bfec8":{"name":"@dts-stn/service-canada-design-system","version":"1.54.1-dev.20b2bfec8","_id":"@dts-stn/service-canada-design-system@1.54.1-dev.20b2bfec8","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5ecf16224c4937c751f2eae0d3b83da71e68bda2","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.54.1-dev.20b2bfec8.tgz","fileCount":18,"integrity":"sha512-Il+akPk3uZ9QD3+JJhmnFvQsQbBBTE4wGbTMZinvkwl2By8KyClai20W9gP2FhaPLhhBOTDm3m6oZVmJWocKYw==","signatures":[{"sig":"MEUCIGXpragmGokPV4sNTWe3299NfzQjNJhERARDifxtLwkiAiEAy+A4tOLtR7owKIqKhACqz9oBfWiTnZhUj24HaLIxO9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUs3oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrImA/+JMa/SWOPVTCaq48TiIrCVenbWf2cdvdx//epYyzxUvbL9/pE\r\nCFJHwEBDF85tKsHfVK32eIoMMga8jZ2ichxRg4BpNMiA8jNE4LRi9AKH69R8\r\nm9Rh8KevMKm47jMVgaEPKu4FP+Z9cC/CbqCcylS/yQQmaZ1Xb4r6kB0ww+8+\r\nyLji4BJAdgQhSKMDE3PCBw0k8EtIuhnSBArT3Aqu1jnIqbVX79xZTstGS/xh\r\nybFv1I7n4zD3SOjs3ZYQ05RKa+6U7Rulw1930ZGf2A6DFaunGAAsuoaQlnbT\r\nmhmyXZcrxsuFklEX7EyUEHxjRZxhNb1R7GywhSeVoyDR6N9ajXmGhG4uuPLz\r\nhBo2IvbtuafvjHgFt6gOZEm1htI8lGXJ58UF1v8kWYevszBwBl5h0LIJbBaA\r\nUXO9x+yQoN2Xr9zbB7LAd6AG2ziB4BgyIUptliHJ+1Lgp2NMY5m8AjawXfRw\r\nUM7Ba8uV/IIRP/e+7eufQg+K6Dkz7+f05Tpkr+sUVGC6b/9wIzdF5lUdg2Yd\r\nJgd0V6sHET3oHb15fXPy4ZgyAOjPRSI6z5z9IaMmLWdMRriLfeiHW09vayec\r\n+EynrMAmSllKxK0HZaX8djXqyZXFd0/rnojjNU+99ZAY20D5O/w7pVZvOvsz\r\nxn2LWGFKhxLvEWuNFZxQidYs8RjUrPwaNbg=\r\n=MmhW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"20b2bfec819ca63208f24b97bd8600f14423e187","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.54.1-dev.20b2bfec8_1683148263804_0.3864644192011708","host":"s3://npm-registry-packages"}},"1.55.1-dev.13c435d6a":{"name":"@dts-stn/service-canada-design-system","version":"1.55.1-dev.13c435d6a","_id":"@dts-stn/service-canada-design-system@1.55.1-dev.13c435d6a","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"a3ba19eae29d3cc61b2db592f654b094c0d55d3a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.55.1-dev.13c435d6a.tgz","fileCount":18,"integrity":"sha512-HMQc5vMvG89EfCOg3NVG5WZyZF2Egelx42inwwgMmn50Tm/rpa+Mtja4wIy7yYOoJ8bjQaRtGZyaDbQ4kzYSnw==","signatures":[{"sig":"MEQCIBWf/6Hxl7qaLmHDgUOTTNUhdVE/fkMRH2t6Tr5fLXj6AiB5YVqer+BVpmJ+PPPYrizimeXAp/s+67H5RLSZxwE6BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526433,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkU7+0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo1Q/+PotejSMP898b8Tck+11vG0aSrt3Gx36DmAfGalr5N9TEI0U8\r\nEvKF/W0/MsDNMLLi7hbfwgURnboIPOS8ynFzNhXbo4xpT2AzRPhkABNX+5yG\r\nFKUW2dNtF1ezYOJUNK1NfwYOjNaVqpcjnj+d40MLG0S4+xXlia6yvzu3oREL\r\nL2kUynUbt+tqCsADnRpltI07RcirN3tp502tRJzIqAuzTbBTfyOws2D61fY8\r\nxG2VA7S3B1qfu1nz9X7C7UD7kXTgpF0XxiDjr3RzJx0dI9hbmIvLQqeeHDKV\r\njeddWig4Wnw1j7P3KJOhI/1vhYeCRoT9izewbca52gh2kOOmd5HayOj26ja3\r\nGc9kLmjAY/t5jjF/in3RcEEWJ9Z5sPm7o/q5MRII16I2uIUmDb/5fgYKzpN5\r\nr4ddgr2+SVqSrbzGlkFOntjrtAlf/+wmyKr6gvz6qWw+Uw0vYbjB7BThswmn\r\ngzoglyXwblkJb8jxOIIsLTMJc9mLx/KSC9U+3SMhu01JYpXCUiYOJkp7jO3r\r\nkOZQrb+vr8Lr9LHC6L9DMTkIhapNnZ9K/auU/YDSxomgRZ3P6UGmfvvdCp47\r\n+igywTOuT2ztHMUhq0N/0Uu035iOUf8KL06Q6MPUQQcwz/5PGD/C2HV7EzZI\r\nzutGcj4tLmW0Fuo55dHggxb4RuSY27wgokA=\r\n=hbUS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"13c435d6abbc250387a4245964c4449d4be2583c","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.55.1-dev.13c435d6a_1683210164413_0.4004445446171998","host":"s3://npm-registry-packages"}},"1.55.1-dev.cba14e3a9":{"name":"@dts-stn/service-canada-design-system","version":"1.55.1-dev.cba14e3a9","_id":"@dts-stn/service-canada-design-system@1.55.1-dev.cba14e3a9","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"5ce2aad2105867ff80e527e8aa685af2bd5eca0b","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.55.1-dev.cba14e3a9.tgz","fileCount":18,"integrity":"sha512-acxHb+nDKzah/VK2IZ0oZw5kGSM35cbNtEdf84DniSn6jutUGfwXBHTkqXzjQnoQKxegzXOsNKjpUihOrzu+bg==","signatures":[{"sig":"MEUCIQDD1sEFQHKr10vAxyn0t3As0yWSwcrqYwNshrROEXXcigIgUqlnks+++SMGCssNG1HHauawj4OWNDsBUuZfE3l4jeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526403},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"cba14e3a9581b2721a0ded26806fc54777c60f98","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.55.1-dev.cba14e3a9_1683553453332_0.6864987484429634","host":"s3://npm-registry-packages"}},"1.56.1-dev.1edb9b8de":{"name":"@dts-stn/service-canada-design-system","version":"1.56.1-dev.1edb9b8de","_id":"@dts-stn/service-canada-design-system@1.56.1-dev.1edb9b8de","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7f3a7797245fbb516b641419b8fd58f9e9732673","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.56.1-dev.1edb9b8de.tgz","fileCount":18,"integrity":"sha512-fRWUzbuxwgdTJltsZkXcnqHAUBV73NPEhP5634afwHThYbJymeS0aCFpKuSF56ErCvWryfUFMMxIzKlFyL06mQ==","signatures":[{"sig":"MEUCIQDP+MEmlXluUyOR6TF7DbcDq4utvSr0QQqkTa5WXosM5QIgHk6rH7IYqVPVrYa4Jw/oo21SBllxuhScocNWh56jaIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526403},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"1edb9b8de6854f2c31925ad30f3b31cb8c073ea9","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.56.1-dev.1edb9b8de_1683558981302_0.1734248872995885","host":"s3://npm-registry-packages"}},"1.57.1-dev.df9bf3e72":{"name":"@dts-stn/service-canada-design-system","version":"1.57.1-dev.df9bf3e72","_id":"@dts-stn/service-canada-design-system@1.57.1-dev.df9bf3e72","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"0372ce24f3af8eb52f6a0890a3880f115d7c79c1","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.57.1-dev.df9bf3e72.tgz","fileCount":18,"integrity":"sha512-OrFu4B+t7oAITYxSIETYrY4SvktH4o0ra3jVEJ0jP06/Dr+jbTGaM/1Xc27YLCq1oC4+q/SCIP2yA4egrHs2AQ==","signatures":[{"sig":"MEYCIQDEjBNwZ17m7o9qTW2hKG8NIyXM1+1sGJ7KdsBqxchzNAIhAPq7MU8so2Xba/I0ybpfBLC88LLJzK77mMVid/wXabqI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526403},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"df9bf3e72f0c31fd0b09fa3540978af4640c792e","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.57.1-dev.df9bf3e72_1683562029782_0.6446134101701932","host":"s3://npm-registry-packages"}},"1.58.1-dev.71b565a17":{"name":"@dts-stn/service-canada-design-system","version":"1.58.1-dev.71b565a17","_id":"@dts-stn/service-canada-design-system@1.58.1-dev.71b565a17","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"d6cfbdcd8403a7c8b9e559e39d73661d885cbb22","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.58.1-dev.71b565a17.tgz","fileCount":18,"integrity":"sha512-D+KiAz0sqHyXwUt79yyxdBY4xLiY+pwOMyMb2ixumGFmsIK37SKLR64ozC6iwtdv4Iv142jXV81Az4sq6KQZRg==","signatures":[{"sig":"MEUCIQDQSKAGcfY3DamtlYk46FX64k4ONuQJkQh+IiGs2JzBaAIgXSJ2skGZbU3YHlUsdxoZzWw77+LfvKyFPmYl1Y0YhSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526403},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"71b565a1776b75325e96201152fa2d55dceec366","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.58.1-dev.71b565a17_1683735324362_0.6076791685743197","host":"s3://npm-registry-packages"}},"1.60.1-dev.c800c9fd1":{"name":"@dts-stn/service-canada-design-system","version":"1.60.1-dev.c800c9fd1","_id":"@dts-stn/service-canada-design-system@1.60.1-dev.c800c9fd1","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"bdcd928c807e73614576f8e5cd43d4a7f1f76ae3","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.60.1-dev.c800c9fd1.tgz","fileCount":18,"integrity":"sha512-dnmaDnSZtoLbV4DKqsV4a6Oh0e7UfxHa2B4qYGE9mKH2cGkWiW3KmM1qSY4jkJ0GTOMqeJjBP79f8zE+DLTSqA==","signatures":[{"sig":"MEUCIQCJaRhP0ReZ1Vx6b+pA02LYMZCvF9Xv6oyCnHTCJX0LiwIgTtv7aXwcKU/dsDYCtHlvDivfsENTiUXS6gecNQfD/44=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":526454},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"c800c9fd1487f712f59899bf68c251dfb010938c","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.60.1-dev.c800c9fd1_1683744979480_0.2797773026392649","host":"s3://npm-registry-packages"}},"1.60.1-dev.df8278107":{"name":"@dts-stn/service-canada-design-system","version":"1.60.1-dev.df8278107","_id":"@dts-stn/service-canada-design-system@1.60.1-dev.df8278107","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"bc6e7a528cf106868febd593211047fc2afe3302","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.60.1-dev.df8278107.tgz","fileCount":21,"integrity":"sha512-GtNxEsOem3vHYNbLH7TqUn2sDe6aj1Nee0Sm0hvaxiJ5Il0qh7PTbnt01fksSfItrKLgzPDu0U/IMra4YM1cEA==","signatures":[{"sig":"MEUCIBXGVtZd0VDYhUB5B1SyN3nkWdA2ZcJcDYtzoPgy3pCfAiEAsnJ4TPIJkwsiCg3jiRLJmxInhO6r3fOsLqK74+h+acg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":527256},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"df827810716e1b35bf30cc325da83a9b9b5d15d8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.60.1-dev.df8278107_1684173764070_0.4841218974550998","host":"s3://npm-registry-packages"}},"1.61.1-dev.7d5bad82b":{"name":"@dts-stn/service-canada-design-system","version":"1.61.1-dev.7d5bad82b","_id":"@dts-stn/service-canada-design-system@1.61.1-dev.7d5bad82b","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"cd7069ca2509775dd4d5a661e0624acf5a4a44b7","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.61.1-dev.7d5bad82b.tgz","fileCount":21,"integrity":"sha512-qZnMQg+/CZH+upVp5DSyoGYR0OrUOkjnZ2aP+S853EJNpBJe2LxhJdG6U2ltzWvjCYzXwHg1yTaSAD+UJJAN6w==","signatures":[{"sig":"MEYCIQCEiNtPLqcBtlLr0sOVvA0jt8eyS7ONQVQuXqmAiK1bnAIhAPSXBFYDQSr3lD9BHWEJU6tIfnXk3BHrBRxIl6k2PvC7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":527338},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"7d5bad82be74d1ab0b065bcaa2773bd1f77ecefd","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.61.1-dev.7d5bad82b_1684178880625_0.5726002596787341","host":"s3://npm-registry-packages"}},"1.61.2-dev.24d192e06":{"name":"@dts-stn/service-canada-design-system","version":"1.61.2-dev.24d192e06","_id":"@dts-stn/service-canada-design-system@1.61.2-dev.24d192e06","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"0b00c69a0d9e9b34976bf07747ce446ab3ef7195","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.61.2-dev.24d192e06.tgz","fileCount":21,"integrity":"sha512-LCXFgxcv38Wo7m/uv0nPwfQK1Wy3wp3ro0BSwvjvGwcoclxLzFNEwuaCZ0z4j7Tf5jW7Nh/ot1LIPK4y7YrlIA==","signatures":[{"sig":"MEUCIQC/RGmFgNIaiH7cGYrZIhetsymaRQue3sqhbRQQ+ITPtgIgWzkf+i7aW/ioo4liz1sZKV+d+YTFnehAGM2l7A+fcpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":537011},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"24d192e06cb470ecda5c3b59e2f47d690f689a6c","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.61.2-dev.24d192e06_1684351945522_0.652230383662","host":"s3://npm-registry-packages"}},"1.62.1-dev.63a929016":{"name":"@dts-stn/service-canada-design-system","version":"1.62.1-dev.63a929016","_id":"@dts-stn/service-canada-design-system@1.62.1-dev.63a929016","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"b340d1cbfee2b2416d7072328bca053248890221","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.62.1-dev.63a929016.tgz","fileCount":21,"integrity":"sha512-Dal7ePUUIeTcrUQhg5pvBSJkFTkZjhJPqeGPhE8mh4IftIkQ0YSU2Kzf2XQkRyr/5o+/Uz9CJu/3LHUeFbeXmw==","signatures":[{"sig":"MEQCIDr4aRwtQn4aa51LOlIaImTspUk4/g5jIHWxJpDcTWZCAiBeKG3aPeQ3g3/C5vH1jPPaW0Pw2yF6iLQv3bE/oLk7sQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":538775},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"63a929016da451a6f66f2309dd0e450628031c3f","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.62.1-dev.63a929016_1684515488671_0.7894176159782507","host":"s3://npm-registry-packages"}},"1.63.1-dev.f6c78acfa":{"name":"@dts-stn/service-canada-design-system","version":"1.63.1-dev.f6c78acfa","_id":"@dts-stn/service-canada-design-system@1.63.1-dev.f6c78acfa","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"765f563cca8d59e4b98e19a00644d721676c8565","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.63.1-dev.f6c78acfa.tgz","fileCount":21,"integrity":"sha512-2surSkYitYadrhoqR6AesO8uzPTeeLoHXNTl9VX7UARnQFsP4uNJsGO1J9fIttcvvf18s6i/QYxoTcERY3KQ6A==","signatures":[{"sig":"MEUCIQDn0xJ5Qa3upEy1VFJn8/UTpe+pc5bdgwyDsp3cv6XrwgIgQBYkFf4k0Q/gZe5PwlQjQJ04ojacwjAGITufOA1a/F4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":542814},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"f6c78acfadf31ffebbcd3035b3326f35f0b97fc3","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.63.1-dev.f6c78acfa_1685021102959_0.8380727129258154","host":"s3://npm-registry-packages"}},"1.64.1-dev.f0f702b33":{"name":"@dts-stn/service-canada-design-system","version":"1.64.1-dev.f0f702b33","_id":"@dts-stn/service-canada-design-system@1.64.1-dev.f0f702b33","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"18624e10b9c767bc34ec101d3f988ef8250ad965","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.64.1-dev.f0f702b33.tgz","fileCount":21,"integrity":"sha512-26s8go4Oyx3k4q5CxqIB/neBdvx9cKn6I3F3PAFYFAryWt9+M5hmSzDW/mp/tCkFUPCzCNc6s5dD5pIYUHdlxQ==","signatures":[{"sig":"MEUCIEPxTeezvtVfsiP0Yg5iOHHUm5b8PDlzpLtR3YssNEq6AiEAgpDAx55qaWiGFHBV+ILBr60r9wVXhNSykKc3Qkt0Y0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":550641},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"f0f702b33ffd8227ad18a00f53913ecf134a2ea2","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.60.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.75.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.64.1-dev.f0f702b33_1685037625664_0.08390482009401534","host":"s3://npm-registry-packages"}},"1.64.2-dev.84c533f0e":{"name":"@dts-stn/service-canada-design-system","version":"1.64.2-dev.84c533f0e","_id":"@dts-stn/service-canada-design-system@1.64.2-dev.84c533f0e","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"80cf40749bad0539aaa47ce496ae0d67fb13f2ad","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.64.2-dev.84c533f0e.tgz","fileCount":21,"integrity":"sha512-vBBH2dKm2beVtLwX+3wEAdTwPremJyvVofXicNxq5jFkGeJY+wlaNcwYEPZUfDGIb+u5/AnRikPpwVYTka7oIw==","signatures":[{"sig":"MEUCIBWf7Xew4RzBwzG5fwv7qGAAIYAesbPgzaLYS6VU0cQeAiEAn4aC5XtGTBjJ+zML0KNvhtcKwcZAV7rjxn1YolK+l6I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551551},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"84c533f0e94a3c55d068c0589bd4f1983ec43b14","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.64.2-dev.84c533f0e_1685460587520_0.5387975075404643","host":"s3://npm-registry-packages"}},"1.64.3-dev.be004f5dd":{"name":"@dts-stn/service-canada-design-system","version":"1.64.3-dev.be004f5dd","_id":"@dts-stn/service-canada-design-system@1.64.3-dev.be004f5dd","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"bcdd33889e2636f4e099c843897eaae2bc6041a9","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.64.3-dev.be004f5dd.tgz","fileCount":21,"integrity":"sha512-HBk/H6cNAVY/W/QDowXJDMtwPhnT6jYxZKYrcgdCp+d+V+hovovonKMgoe/u+U7LLQvxQVdsn31twKPh30cRHw==","signatures":[{"sig":"MEUCIH5lkjiMP4y4aqLPBKFDBuMG2VwYRARTuNO7Uu5t9I+EAiEAnBxyYT8DwR6nJbCvtOLhbfXUvyNLEW8AEjEgh4qN2w4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":551661},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# DECD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to DECD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across DECD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [DECD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"be004f5ddf4923563aa9276f9e7b3bc33e81eaef","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.64.3-dev.be004f5dd_1685475342818_0.5070244109377191","host":"s3://npm-registry-packages"}},"1.64.4-dev.37a0c16d3":{"name":"@dts-stn/service-canada-design-system","version":"1.64.4-dev.37a0c16d3","_id":"@dts-stn/service-canada-design-system@1.64.4-dev.37a0c16d3","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"ca1d0386ff2c8c1aa02da56c49dc302a02d1ee3f","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.64.4-dev.37a0c16d3.tgz","fileCount":21,"integrity":"sha512-PHZOPLdsuOHoG3pS3kdok/06HvjR+TEeojGJIaC1W8kWaSKht00LqLw810rEX/GdMy2hI/Ym31Yn+0umRNFmkQ==","signatures":[{"sig":"MEYCIQDIC0aeK+0scxGhHSyFVmBxNg1jmUIPynxcY0JFzbLBQgIhAJrgeXKnOSmNJCQYbgOHH9AE4Q4bEGZb5Xzx6n9kpXNC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555244},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"37a0c16d3b732fd2672cf7bcebd66411d33acff0","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.64.4-dev.37a0c16d3_1686064408596_0.2623525664152504","host":"s3://npm-registry-packages"}},"1.65.1-dev.7a97ae567":{"name":"@dts-stn/service-canada-design-system","version":"1.65.1-dev.7a97ae567","_id":"@dts-stn/service-canada-design-system@1.65.1-dev.7a97ae567","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"794a45c7dce9c7373b48ec23566b8f1f4764dbb9","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.65.1-dev.7a97ae567.tgz","fileCount":21,"integrity":"sha512-J7c53JrxJKgt/TqwLjl1TcRTrA4xHj9EbVT3OEUqMHWwLK9s8JI2ujtVDF1kMiBL+l0Ct3ekQxJqHGm+RqMJ0Q==","signatures":[{"sig":"MEQCIBWBiu/Hy6wcjY7vjL8MGrPLmrOd8gOS8TCq6PBjVrEhAiB2Qv8oPbfbsi9d/ZN+e/N8r0Mvtk9QqTZLpwIG2ODoHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":555474},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"7a97ae5670664d75e01f11edf196eb150a0c4ee0","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.0","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.65.1-dev.7a97ae567_1686593307893_0.5493926120122792","host":"s3://npm-registry-packages"}},"1.66.1-dev.de18726cf":{"name":"@dts-stn/service-canada-design-system","version":"1.66.1-dev.de18726cf","_id":"@dts-stn/service-canada-design-system@1.66.1-dev.de18726cf","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"3c1bfc0162578fa49d1ae1709ac76eb439d26387","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.66.1-dev.de18726cf.tgz","fileCount":21,"integrity":"sha512-PB1qAWt/CMe++EpjZQv9o/A5lzsUQXszfJbisatpgeas1iIbHaZ/vUTbHJY4EvaMvQrwJ6fmBcH7otS1ZnqG/A==","signatures":[{"sig":"MEUCIQD04vGmu1Tv+hnniD1F7Fe/M4EPs2G4g2FGmD+SYVI/lgIgIUoP4Q3RKgKZF+FTIyuz0QdlwrhIwwsp9QGV72Vsupo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564557},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"de18726cfc24d356beabba67bfecc8bd6c9e678e","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.66.1-dev.de18726cf_1689020162699_0.02377864814130226","host":"s3://npm-registry-packages"}},"1.67.1-dev.ffb5ba39b":{"name":"@dts-stn/service-canada-design-system","version":"1.67.1-dev.ffb5ba39b","_id":"@dts-stn/service-canada-design-system@1.67.1-dev.ffb5ba39b","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"e3c5c70bac157bac90ad90539934ef62b4696a3b","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.1-dev.ffb5ba39b.tgz","fileCount":21,"integrity":"sha512-LWX9iHknCEdtlFfHAS5Qgsy6m7oPh0SrtfjgLeKQjZvo4cMNeH3OeJ0S0EXZqfir9C4s6KnWq+SeVoyzrP9I3g==","signatures":[{"sig":"MEQCIAgvh6NQ2rQAWOim59X3cEvHfy7oqZygXYHdGlGiw/0HAiBX6yADegRqNkO1J6KdROpeRjW/azAv2CzKWxZ2mTa5Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":638233},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"ffb5ba39b5c90ee4e8c8a50ef06b13d7cf6ccf95","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.0","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.1-dev.ffb5ba39b_1689777405978_0.6719272243242542","host":"s3://npm-registry-packages"}},"1.67.1-dev.2b93eecc6":{"name":"@dts-stn/service-canada-design-system","version":"1.67.1-dev.2b93eecc6","_id":"@dts-stn/service-canada-design-system@1.67.1-dev.2b93eecc6","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"f7f4f1eaa29f3f9b3c7504aaf2635521b6553e34","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.1-dev.2b93eecc6.tgz","fileCount":21,"integrity":"sha512-Oxkfi9P+mhNEn/JEKjdBYkZOVFUyAnsYkTwZGK/Bcx3bXvGYsMquQd7w3YEL430e/f4nPwVQirAVPKF47pogXg==","signatures":[{"sig":"MEUCIDeRimE4H5H+tHfLnSwJJP9cT7buzRS/IevIVUOIwj/5AiEAh8WmApJEdEnHVtUABU8L08plbNLQbX63PJTljVgdvaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564557},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"2b93eecc6a43315bc598c5391daa9cf81ea25698","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.1-dev.2b93eecc6_1689780778445_0.41559932677486766","host":"s3://npm-registry-packages"}},"1.67.1-dev.b26d40090":{"name":"@dts-stn/service-canada-design-system","version":"1.67.1-dev.b26d40090","_id":"@dts-stn/service-canada-design-system@1.67.1-dev.b26d40090","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8805aaee14c4a53e58375b76860d99b55679d4e3","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.1-dev.b26d40090.tgz","fileCount":21,"integrity":"sha512-UkSFjkuxbJ1LW4GoqrSo93Uu0RRrYCh/Z2ovozlHfgm8nhNJUgYiyYPRAjRhq8mwwsPm1lfx5QijCtuGkltiNA==","signatures":[{"sig":"MEUCIQDkHflG7O1rQyBwPjCWtofuenZ+rQ2zxmcdQt0kzCcCbwIgQ2USw2+983dpb901YHH9/zE2cpK9M1588KXY80Dihdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":564557},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"b26d4009004e30fb0bd25beceb7534edbe7a4532","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.1-dev.b26d40090_1689781916533_0.722675272050558","host":"s3://npm-registry-packages"}},"1.67.1-dev.cbdbc07d7":{"name":"@dts-stn/service-canada-design-system","version":"1.67.1-dev.cbdbc07d7","_id":"@dts-stn/service-canada-design-system@1.67.1-dev.cbdbc07d7","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"bc5db2d65096528334e0b648d5256ddcfae2dd6a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.1-dev.cbdbc07d7.tgz","fileCount":21,"integrity":"sha512-60TQWluNX7y7+Ta+u/uSCpkiGhLC6juvQto84dTbzr2h4d87GbsMs5CZkbYcOz9LoGj/VRN739JZ0CrwavOOPg==","signatures":[{"sig":"MEUCIGUwdY6mfXbpDiow3Ksxw8wPpgGPrLcA4ZeYTbAn8OPaAiEAxEtP9C5Onl2EcW0O1u12srDzbQK2mWpTfijw3M/AGj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578538},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"cbdbc07d701dc2ba13134b656fc3b0ba17845479","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.5.1","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.16.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.1-dev.cbdbc07d7_1689872034420_0.7887272808825079","host":"s3://npm-registry-packages"}},"1.67.0":{"name":"@dts-stn/service-canada-design-system","version":"1.67.0","_id":"@dts-stn/service-canada-design-system@1.67.0","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"4db768c66905122e2520eab1821f310bc3c43c34","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.0.tgz","fileCount":21,"integrity":"sha512-HQ+vuyYOaefhV4U71AmLwk6CtNmuHHiUn/lDVxDRt5m5lNm9zBLnis3D5ODKfMxyUrhct/eTXZ6SoowFzaMA3g==","signatures":[{"sig":"MEUCIQCpk8FppRJ+Xt4lVmDLbSFVsgcWMwtYz3xTeDwNcAc5zQIgRRcwLknJ5jXU4KzhBuZZgqL4IJgxsBxAL96a7N5ef3Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":577954},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"976a8b9abf3f3facb8cc5b1ac02371bd836ac64d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.4","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.20.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.0_1689885262813_0.02396118035164574","host":"s3://npm-registry-packages"}},"1.67.2-dev.7bc2b12f1":{"name":"@dts-stn/service-canada-design-system","version":"1.67.2-dev.7bc2b12f1","_id":"@dts-stn/service-canada-design-system@1.67.2-dev.7bc2b12f1","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"9bf4baa54926fa452a5b04f596618f7a4e4ef180","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.2-dev.7bc2b12f1.tgz","fileCount":21,"integrity":"sha512-NYdpJwhMics8S/b1pcU20ZYfWMGIygjPWs94F2ZqTyaQVVh4fVB1TK7ylGiEIiEWUCqvH/OTpC29LI5Vvrrzlw==","signatures":[{"sig":"MEYCIQCFa+rXIvqKrH8xgGjwEGHeFFxrg1hthpWm16XmJJz9xQIhAOxJM5SJGRpJ46MtVmiidDOdF+hnN4OCN/rkXZihizmE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":578652},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"7bc2b12f188f2d2eeb0f7c4fd937fa149e99cd25","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.2-dev.7bc2b12f1_1690831632950_0.674620640002618","host":"s3://npm-registry-packages"}},"1.67.3-dev.2a96dde69":{"name":"@dts-stn/service-canada-design-system","version":"1.67.3-dev.2a96dde69","_id":"@dts-stn/service-canada-design-system@1.67.3-dev.2a96dde69","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"11ab6662628f00d7decae1a82520724677b1c18e","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.3-dev.2a96dde69.tgz","fileCount":21,"integrity":"sha512-RNLxKpzU4m92a5v1qzYnVgYyv+5ItuM9SR0P5kijF6Z8JOhtgG6zAuUBYtKGsmsBSms2j9wzo0R4BSvIv0JUNQ==","signatures":[{"sig":"MEQCIBP+6IJoNeGGefWc001Bqzo5AaDjsD535jo7d+1rSY2WAiA+Cvv9Cjp67z9tHANgxUv06thpfmiCo5hLoNipXcXKtg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":588033},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"2a96dde6919290d5e7d86e7032f0f121d2e2fbf1","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"start-storybook -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"start-storybook --docs --no-manager-cache","build-storybook":"build-storybook"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","react":"^17.0.2","shelljs":"^0.8.5","ts-jest":"^29.1.0","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^17.0.2","eslint":"^7.32.0","rollup":"~2.75.4","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^17.0.2","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^6.5.15","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^6.5.15","@storybook/addon-docs":"^6.5.15","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^6.5.15","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@tailwindcss/typography":"^0.5.2","@storybook/addon-actions":"^6.5.15","@storybook/addon-postcss":"^2.0.0","@rollup/plugin-typescript":"^9.0.1","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@storybook/addon-essentials":"^6.5.15","@storybook/builder-webpack5":"^6.5.15","@storybook/manager-webpack5":"^6.5.15","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.1","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^4.1.2"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.3-dev.2a96dde69_1690919870683_0.8461313654519675","host":"s3://npm-registry-packages"}},"1.67.3-dev.3e3b15cfb":{"name":"@dts-stn/service-canada-design-system","version":"1.67.3-dev.3e3b15cfb","_id":"@dts-stn/service-canada-design-system@1.67.3-dev.3e3b15cfb","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"8e8d3ab8f23b3192a81675b56c9696e8049f9aa8","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.3-dev.3e3b15cfb.tgz","fileCount":21,"integrity":"sha512-yeTfmmcJHn/GeNTfkgu6x/K2yEEB1sDylZsB3FoTztq9oYKghUy/0Gioyd502zWJzKcYmisom+IyRD6k8jlPGQ==","signatures":[{"sig":"MEQCIAZs0Tz+UaKlUXWTr0iPzOZhwGNXBtREJoYyrB8zXYTfAiABIKO7XUNtmwzL0jxoRqmY9VZEVzcmgc1Z27uwnBVgoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":588787},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"3e3b15cfbd56340e878ffa3a8745d531fe91daf8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.0","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.3-dev.3e3b15cfb_1691010433529_0.13830253006948","host":"s3://npm-registry-packages"}},"1.67.3":{"name":"@dts-stn/service-canada-design-system","version":"1.67.3","_id":"@dts-stn/service-canada-design-system@1.67.3","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"20e9d4915ef9047344f9b992a1ac1431045b230a","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.3.tgz","fileCount":21,"integrity":"sha512-NwMJ9Sw4mQfqThIw8tOlMjiV7P7/VJNIn2XjHog+B/Tm9vPqGGAPmzFwgs4/88jx4cdhKVn1ZeGFpCFP89s/MA==","signatures":[{"sig":"MEYCIQDTe8BwDqxXDa7nKXerEg8LizHomsQYVlfh2gjE4hdSxAIhAO91wqLcLxFV5ZUuBsRDdwq4DZSfkjB1QByGy/T2PlHZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":588180},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"a944f3b6018131191fa13714e80ca249e0204881","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"8.19.4","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"16.20.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.0","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.3_1691071472279_0.6376480312568442","host":"s3://npm-registry-packages"}},"1.67.4-dev.af308e378":{"name":"@dts-stn/service-canada-design-system","version":"1.67.4-dev.af308e378","_id":"@dts-stn/service-canada-design-system@1.67.4-dev.af308e378","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"2d72ddef84f694dca109d3b91b47d4e042649533","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.4-dev.af308e378.tgz","fileCount":21,"integrity":"sha512-lh4PhoB6VQPuznFouoqhfaRlxMLUpinJVdBcillzkIEzYj8KDHFq2+XttrVEzZLp7QEOGSxip+2Y346DWLPVaQ==","signatures":[{"sig":"MEYCIQCmdEN0NMt23mBucHf3KIWGb3heUq2ERBZX2/LVuofIHQIhAJqGm3/puciVpLbAVlKNseyTfEo1lDpybuJIVud5fnd0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589239},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"af308e378d54717604e5b71d50efeda839213c8d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.62.1","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.0","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.7.4","focus-trap-react":"^10.1.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.3","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.4-dev.af308e378_1691428640820_0.6997545613111487","host":"s3://npm-registry-packages"}},"1.67.5-dev.8af617e1f":{"name":"@dts-stn/service-canada-design-system","version":"1.67.5-dev.8af617e1f","_id":"@dts-stn/service-canada-design-system@1.67.5-dev.8af617e1f","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"e924896330e97ddf202a3611815c75d78afa6930","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.5-dev.8af617e1f.tgz","fileCount":21,"integrity":"sha512-rzcyt+F0Upk4DZWr4zCeY0FKrU1pshp1Ib24Q2cAuCb7KabMJdiDU/p97atjpVtn2ZOQYeWLE1/9fGs5H7t9RA==","signatures":[{"sig":"MEUCIQDL44p3F/G9KWs8S8UjFxM5TaOMKy9d97lVNvJFwzNO3wIgYPSLyJLZ+1Uqmn8dXFQWybtyLipRvi4/T5TAB/skCN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589271},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"8af617e1f87bad6e85e8201c7673d8c6b897c29d","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.5-dev.8af617e1f_1691431270547_0.614432503501724","host":"s3://npm-registry-packages"}},"1.67.6-dev.8e3b2872c":{"name":"@dts-stn/service-canada-design-system","version":"1.67.6-dev.8e3b2872c","_id":"@dts-stn/service-canada-design-system@1.67.6-dev.8e3b2872c","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"fe7b7f1b1de7391625a1050dc2fc5fdda5234b73","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.6-dev.8e3b2872c.tgz","fileCount":21,"integrity":"sha512-SBt85GVXiW6JYwofp1iN2q9gg+eiKsifGDh6L/wOe4/lZYO1Udj5K5Z5qGr+91eWBXxkbrQEDWfGA95UfGMEzQ==","signatures":[{"sig":"MEUCIQCbPfj8PwywlW8LmK//QjkasbEqf2yVtNnFr+wEg0P+7gIgeSlk620ID3R5a4TnloDn7wgYsd+bivqTzhkHOw2zg1E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589261},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"8e3b2872ccb4d8ea094999a7498d23b96bbb69d2","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.6-dev.8e3b2872c_1691433496967_0.8201982972268014","host":"s3://npm-registry-packages"}},"1.67.7-dev.b7ac9449a":{"name":"@dts-stn/service-canada-design-system","version":"1.67.7-dev.b7ac9449a","_id":"@dts-stn/service-canada-design-system@1.67.7-dev.b7ac9449a","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7e5b86b22ef293e9729c88f6612dcf7ef5ce693c","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.7-dev.b7ac9449a.tgz","fileCount":21,"integrity":"sha512-rGOY4ArcumBb6Gi6fZwyvWpXw5esWV9NvRiShzTGaZ/mdez/rq1hxQZ/FHCHuF51G1FqH6pfbn0k/P+O9iIbaw==","signatures":[{"sig":"MEUCIQDO00oqfU5c7AyuKJNFmTH1yRxedfkMgnzNa/ElMmqvRgIgXX9uTBXl1NnvcEJJxZ1BC04bDG8fYDG8BuEpu46b/J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589261},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"b7ac9449add61fa042ec2728d7ba6d99b48a54dd","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","react-dom":"^17.0.2","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.7-dev.b7ac9449a_1691502763822_0.26562434223730613","host":"s3://npm-registry-packages"}},"1.67.8-dev.d86ee812c":{"name":"@dts-stn/service-canada-design-system","version":"1.67.8-dev.d86ee812c","_id":"@dts-stn/service-canada-design-system@1.67.8-dev.d86ee812c","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"54179f359a56a61e2d3be3da570afc0e6e03b873","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.8-dev.d86ee812c.tgz","fileCount":21,"integrity":"sha512-AyttG68cl3ytG+ZQlpK4Q5zIB5b/S+5QS9RB2Eu1VQH9jxiFI7bpMIqfUEjKbO9fWgzCetQcJIVL/QZJu5igKg==","signatures":[{"sig":"MEUCIG19J8hTlmhBYr+pNx0dJVLlgWDjohMyrLAkxNo+WHQJAiEA0msKyMy0qgqiE8MnaNGKeI5ISc5FcX8CLADLdr2typs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":589229},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"d86ee812c372bb151f880d6f0e86b6a2f4677e2a","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.8-dev.d86ee812c_1691511470538_0.791047703198622","host":"s3://npm-registry-packages"}},"1.67.9-dev.a73980918":{"name":"@dts-stn/service-canada-design-system","version":"1.67.9-dev.a73980918","_id":"@dts-stn/service-canada-design-system@1.67.9-dev.a73980918","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"b52f9f769586bc4fedbee0058d0a922afb63bbe6","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.9-dev.a73980918.tgz","fileCount":21,"integrity":"sha512-I6sqrKBQ1CuDHOC76Bsp4rUYF0yMHzg0KgeMhvMuog7yayp8pWS4U3nHrLJl5U+Q9vdgOXx20vF+9VHR+RW2+w==","signatures":[{"sig":"MEQCIAeBctYiqbod8TqYBFTqlqwjtZDWXO7Xj6yZ7zKcD7AvAiAh9O5vBnyNzP8lbYDOI6iYT+XFNfUAPcTexGe/TtAVFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590069},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"a73980918128b0b41e971670b9755089075d0d34","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.9-dev.a73980918_1692020392280_0.18952264439989852","host":"s3://npm-registry-packages"}},"1.67.10-dev.b83225c27":{"name":"@dts-stn/service-canada-design-system","version":"1.67.10-dev.b83225c27","_id":"@dts-stn/service-canada-design-system@1.67.10-dev.b83225c27","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"438cf27aa4c88f56fe23c7817f3b09aa036f8a41","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.10-dev.b83225c27.tgz","fileCount":21,"integrity":"sha512-W5AmGGXA+FTYgdKspG+IuLY9v6gzFkK36xDsL2kyMX1tAvPYZgkW4GGkc73a8vFmvPyC9XjcWsTddD1Cca1njQ==","signatures":[{"sig":"MEQCIEwF0JrRrghwkj47uAjS1nZnTfkHJGfSMudVLeL6gAGPAiBmdQ2HlRGJCOy/bgL/0eutHPp8WaRGvavodnKoXiHmrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590270},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"b83225c2746f4e730fcc0686143b473a3a6b8d69","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.10-dev.b83225c27_1692289581098_0.7298284610023784","host":"s3://npm-registry-packages"}},"1.67.11-dev.075b5329b":{"name":"@dts-stn/service-canada-design-system","version":"1.67.11-dev.075b5329b","_id":"@dts-stn/service-canada-design-system@1.67.11-dev.075b5329b","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"7b2ee7e1ed6cb218e25978423f4af3c7589a0666","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.11-dev.075b5329b.tgz","fileCount":21,"integrity":"sha512-1YloiHfI/XRpu0QQzMqcdoO98mSSc83gB4V5d/Mm3VwrynzQLiMD3wA2BADCTpMiiX5BGonzari+yiPu2LufXA==","signatures":[{"sig":"MEQCIHG/qXM7FFB6lND3eJ6/2NDhSzqzo61IAB1/W+ZRJTI+AiAp1Uy0zCURsXuVRUdzZusIXpvBKV76ptDwiKmo1Pvd4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590278},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"075b5329b6af054317980a8322467952106453b8","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.11-dev.075b5329b_1692294094865_0.20490363219567742","host":"s3://npm-registry-packages"}},"1.67.11-dev.47f7c1b7d":{"name":"@dts-stn/service-canada-design-system","version":"1.67.11-dev.47f7c1b7d","_id":"@dts-stn/service-canada-design-system@1.67.11-dev.47f7c1b7d","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"592f88c4d9d2c248d9091ff3bc01dfa832a0d3fb","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.11-dev.47f7c1b7d.tgz","fileCount":21,"integrity":"sha512-Yk4bzcSl3LVMa3Jxu05GleM+tq3hy1DC+xfGAJVdQfLC55W606tBUSfu6xo4VxeSGdjPRMPRwCi/fPtu/7eqMw==","signatures":[{"sig":"MEUCIQDfw6I/ON88MGsJfS4n9dTNVlQG1hYcECCbH8kofBgGWwIgPoYvfy9ZXJ7JpmFeqXCYEEZc3I2LIOosdaqAikxWn2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590470},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"47f7c1b7d1f4234262a9c30f5b53b68fff17a7ce","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.11-dev.47f7c1b7d_1692296049319_0.8445053534148557","host":"s3://npm-registry-packages"}},"1.67.12-dev.4a036dcbe":{"name":"@dts-stn/service-canada-design-system","version":"1.67.12-dev.4a036dcbe","_id":"@dts-stn/service-canada-design-system@1.67.12-dev.4a036dcbe","maintainers":[{"name":"krischarbonneau","email":"krischarbonneau1@gmail.com"},{"name":"daceytom2","email":"daceytom2@gmail.com"},{"name":"shawn320","email":"azuneko1110@gmail.com"},{"name":"zain","email":"zeddotes@gmail.com"}],"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"dist":{"shasum":"0eccc373281b1491b1f5be12ea6ab51ae0984e66","tarball":"https://registry.npmjs.org/@dts-stn/service-canada-design-system/-/service-canada-design-system-1.67.12-dev.4a036dcbe.tgz","fileCount":21,"integrity":"sha512-DGMS3c4Knb3Ugo+CVOXwqEx7CxA40j5ME77Jt/xMYEpefSwy6GZkXNxQmBqxybn9NH10p7Z4E6a/H4a9HfYvQQ==","signatures":[{"sig":"MEUCIQCOPyp/MwxuERmaIMqyGgWUwOlFkkjhRd45OFNAJHrmFAIgfvG3Ie+Po+wprSIN1ttNjGKZ9azmegeOpzwP5i2wHaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":590538},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","readme":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml)\n![Version](https://img.shields.io/github/package-json/v/dts-stn/service-canada-design-system)\n[![Documentation Tool](https://img.shields.io/badge/Documentation%20Tool-storybook-pink)](https://dts-stn.github.io/Service-Canada-Design-System/main)\n\n# SEDD Design System Component Library\n\nThis repository contains the source code for the React component library which corresponds to SEDD designs following the [canada.ca guidelines](https://www.canada.ca/en/government/about/design-system.html). This library contains reusable components that are accessible and can be used across SEDD products in order to ensure brand and design consistency and to speed up development through reusability.\n\n## Install\n\n**Step 1:** Install the package using this command\n\n```bash\n$ npm install --save @dts-stn/service-canada-design-system\n```\n\n**Step 2:** You can now import the components you wish to use anywhere in your project\n\n```js\nimport { Component } from \"@dts-stn/service-canada-design-system\";\n```\n\n**Note:** The package is hosted in [npm public registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). There are pre-release versions available as well, which are created based on volume of changes.\n\nTo see available components please refer to our storybook page [SEDD Design System Storybook](https://dts-stn.github.io/Service-Canada-Design-System/main). Make sure to view the **Doc tab** of each component to see important information about how to use components and the props you can pass into them.\n\n## Contribution\n\n### Getting Started\n\n[Install Nodes.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n\n```bash\n# Install Packages\n$ npm install\n```\n\n### Developing and Documenting Components ๐Ÿ“\n\nThis project uses [storybook](https://storybook.js.org/) to document and provide a playground to visually see components in action while you are developing them. To run storybook, run the command below from the root directory\n\n```bash\n# Start dev environment\n$ npm run storybook\n```\n\n### New Features\n\nFeature branches should be created from `main` and Pull Requests should be submitted with the base set as the `develop` branch. Ensure that you've linted and tested your changes locally before publishing any PRs.\n\n#### Commit Messages\n\n[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification is enforced as a `commit-msg` git hook. For more information on the possible `type` of commit that are allowed, take a look at `/git-conventional-commits.json` in the codebase.\n\nEvery new release will automatically include a new `CHANGELOG.md` depending on all commit messages filed against the new version of the code in its git history.\n\n### Testing Strategies ๐Ÿงช\n\nThis project uses Jest and the React Testing Library for testing. We've decided to use Jest as it is a widely used testing tool and provides sufficient resources for testing a component library. The React Testing Library provides useful helpers to further push the flexibility of the jest testing tool. Some example test cases include;\n\n- Testing components with multiple styles (ex. button component with different button styles) [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n- Components styles are correctly rendered (Dimensions, Color, Fontstyle, Fontsize, etc) line 12 [src/components/Banner.test.js](src/components/Banner.test.js)\n- Clickable components (ex. button component has an onclick prop) line 17 [src/components/Menu.test.js](src/components/Menu.test.js)\n- Rendering with different input props line 19 [src/components/TextField.test.js](src/components/TextField.testjs)\n\nTo manually run tests simply use the following command in the root directory\n\n```bash\n# run tests\n$ npm run test\n```\n\nThe test script is automatically run when creating a new pull request.\n\nFor more information on tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#testing-documentation)\n\n### Accessibility Testing Strategies\n\n**Important Note:** we are testing for [WCAG 2.1 Level AA compliance](https://www.w3.org/TR/WCAG21/) according to the [Standard on Web Accessibility](https://www.tbs-sct.gc.ca/pol/doc-eng.aspx?id=23601)\n\nWe are using multiple tools and steps to do accessibility testing, as no one tool is capable of checking for all accessibility concerns.\n\n1. We are using the [Storybook Accessibility Addon](https://storybook.js.org/blog/accessibility-testing-with-storybook/) as our main tool for accessibility testing. The Addon uses the Axe accessibility engine developed by Deque Systems. Axe is run on each component in Storybook and the addon will provide a list of accessibility violations, vulnerabilities and links to documentaion to help fix the violations. To use, simply run Storybook locally.\n\n2. We are also preforming manual tests to check for accessibility concerns. The following manual tests should be completed on each component:\n\n - Zoom content to 200% to ensure it is readable\n - Tab through content using keyboard only\n - Verify new content using at least 1 screen reader tool from the following list: https://dequeuniversity.com/screenreaders/\n\n3. Jest-axe is ran along with other unit tests. Jest-axe is time efficient but only covers about 30% of unit test cases. To run unit tests follow instructions listed under the [Testing Strategies ๐Ÿงช](#Testing-Strategies-๐Ÿงช) section. The following is an example test case:\n\n - Passing the Action Button Props through jest-axe tool line 73 [src/components/ActionButton.test.js](src/components/ActionButton.test.js)\n\nFor more information on accessibility tools and resources refer to our [wiki page](https://github.com/DTS-STN/Service-Canada-Design-System/wiki#accessibility-documentation)\n\n### Browser & Device Testing\n\nWe will be building components for mobile first, but also supporting web browsers and all screen sizes.\n\nTesting will be done manually, to confirm components are displaying correctly on different web browsers. Based on data collected, we will be supporting and testing on the following 3 most used browsers (Make sure to test on atleast one of the given versions listed under each web browser);\n\n- Google Chrome\n - Version 80, 81, 85\n- Safari\n - Version 12.1, 13, 13.1, 14\n- Internet Explorer\n - Version 11\n- Edge\n - Version 17, 18, 87, 89\n\n### Linting\n\nWe are using eslint a11y plugin to check for any accessibility errors and Prettier formatter to clean up/format our code. We use Husky to automate these two processes during the commit process, so we can ensure that our code is checked before pushing any of our work to the repo. These are the most commonly used tools for formatting react projects and have many use cases confirming their reliability.\n\nWhenever any files are committed, prettier formatter will be ran to format and clean up the files before comfirming the commit. Eslint will also automatically be ran at the same point in the process to check for any a11y concerns.\n\nTo manually run eslinting and check for accessibility errors run the following command in the root directory\n\n```bash\n$ npm run eslint\n```\n\nTo manually run linting on all files (Prettier formatting) run the following command in the root directory\n\n```bash\n$ npm run lint\n```\n\n### Building the Package ๐Ÿ‘ท๐Ÿฝโ€โ™€๏ธ๐Ÿ‘ท๐Ÿฝ\n\nThis package uses babel and rollup to transpile and create production bundles which are generated in the `/dist` folder at the root level of the project. To build the production bundle at any time simply run the following command\n\n```bash\n$ npm run build\n```\n\nRollup looks at the following file [src/index.js](src/index.js) to determine what it should include in the production bundle... as such only import and export things in this file that you want to be included, otherwise do not touch this file.\n\n### Testing Package Locally\n\nSometimes it's helpful to test a component your working on in an actual application to test it's import or see it being rendered in the browser. There are a couple of ways you can test our package locally:\n\nYou can create a tarball file based on your local branch to simulate what the service-canada-design-system package would look like with your new code. To create a tarball file run the following command in the top most folder in your local branch\n\n```bash\n$ npm pack\n```\n\nThis will create a dts-stn-service-canada-design-system-0.0.0.tgz which you can `npm install`.\n\n### Branching Strategy\n\n| Branch | Description | Associated Github Actions |\n| :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------- |\n| main | Production branch. Triggers a build to Storybook & publishes a new npm package release. | Publish Stable Package; Build and Deploy Storybook; Test |\n| release | Final culmination of all branches that will be used to test beta versions of the new release. After testing is complete, release will be merged into main. | Publishing Dev Package; Create Pre-release notes PR for `release`; Test |\n| develop | Culmination of feature branches | Test |\n| \\* | Created off of `main` to work on new features locally that are intended for the next potential release. Each feature branch should be prefixed by the relevant Jira issue and component ID (if applicable), eg. DS-56-A003-Footer. Feature branches should be merged into develop using a PR. | Test |\n\n### Release Process\n\nGithub Actions drive all workflow of testing and publishing artifacts on the [npm registry](https://www.npmjs.com/package/@dts-stn/service-canada-design-system). Besides testing and code analysis actions taking place, as outlined in the [Branching Strategy](#branching-strategy), the following automated steps are also taken by Github based on the branch code is committed to:\n\n- `release` - A dev package publish to the npm registry, which will allow for pre-release testing by devs. Also a PR will automatically be created that generates a new CHANGELOG.md and version bumps the library based on previous commits for the new potential release.\n- `main` - A stable package is released autoamatically to NPM.\n\n### Tech Stack\n\n| Layer | Stragety |\n| :-------------------- | :-------------------------------------------- |\n| Web Client Tech | HTML, CSS, JS/TS |\n| Framework | React |\n| Version Control | Git |\n| Pre-commit Git Hooks | Husky |\n| JS Linter | ESLint |\n| Code Formatter | Prettier |\n| JS Compiler | Babel |\n| Task Runner | NPM Scripts |\n| Module Bundler | Rollup |\n| CSS & JS Integration | PostCSS & Tailwind CSS |\n| Packaging Stragety | NPM Packages |\n| Dev Environment | Storybook |\n| Unit & React Testing | Jest (React Testing Library) |\n| Accessibility Testing | Jest-axe, Storybook Accessibility Addon (axe) |\n| CI/CD Pipeline | Github Actions |\n\n### License\n\nUnless otherwise noted, the source code of this project is covered under Crown Copyright, Government of Canada, and is distrubuted under the [MIT](https://github.com/DTS-STN/Service-Canada-Design-System/blob/main/LICENSE.md).\n\nThe Canada wordmark and related graphics associated with this distribution are protected under trademark law and copyright law. No permission is granted to use them outside the parameters of the Government of Canada's corporate identity program. For more information, see [Federal identity requirements](https://www.canada.ca/en/treasury-board-secretariat/topics/government-communications/federal-identity-requirements.html).\n\nAll content of the Design System Library is available under the [Open Government Licence - Canada](https://open.canada.ca/en/open-government-licence-canada).\n","gitHead":"4a036dcbe76620a9f98147606eea87647e3a205c","scripts":{"lint":"prettier --write \"*.{js,md}\" --write \".storybook/**/*.{js,jsx,ts,tsx,json,md,css}\" --write \"src/**/*.{js,jsx,ts,tsx,json,md}\"","test":"cross-env SKIP_PREFLIGHT_CHECK=true jest","build":"cross-env NODE_ENV=production rollup -c","i-all":"npm i","eslint":"eslint src","prepack":"npm run build","prepare":"husky install","storybook":"storybook dev -p 6006","test:unit":"jest --forceExit","pre-commit":"lint-staged","build-watch":"rollup -c -w","storybook-docs":"storybook dev --docs --no-manager-cache","build-storybook":"storybook build"},"_npmUser":{"name":"zain","email":"zeddotes@gmail.com"},"repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"_npmVersion":"9.6.7","description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","directories":{},"lint-staged":{"*.{js,md}":["prettier --write"],"src/**/*.+(js|json|ts|tsx)":["eslint"],"src/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"],".storybook/**/*.{js,jsx,ts,tsx,json,md,css}":["prettier --write"]},"resolutions":{"webpack":"5.41.1"},"_nodeVersion":"18.17.0","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"sass":"^1.63.6","user":"^0.0.0","shelljs":"^0.8.5","ts-jest":"^29.1.1","classnames":"^2.3.2","prop-types":"^15.7.2","sass-loader":"^10.4.1","react-player":"^2.12.0","react-select":"^5.7.3","release-please":"^14.17.3","react-bootstrap":"^2.8.0","focus-trap-react":"^10.2.1","react-full-screen":"^1.1.1","identity-obj-proxy":"^3.0.0","react-app-polyfill":"^3.0.0","git-conventional-commits":"^2.6.5","react-syntax-highlighter":"^15.5.0","@fortawesome/react-fontawesome":"^0.2.0","@fortawesome/fontawesome-svg-core":"^6.4.0","@fortawesome/free-solid-svg-icons":"^6.4.0","@fortawesome/free-regular-svg-icons":"^6.4.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"jest":"^29.3.0","husky":"^6.0.0","react":"^18.2.0","eslint":"^7.32.0","rollup":"^2.78.0","postcss":"^8.4.7","webpack":"^5.76.0","jest-axe":"^5.0.1","prettier":"^2.2.1","cross-env":"^7.0.3","react-dom":"^18.2.0","storybook":"^7.0.26","@babel/cli":"^7.14.5","fetch-mock":"^9.11.0","typescript":"^4.8.4","web-vitals":"^1.1.2","@babel/core":"^7.14.5","@types/jest":"^29.2.2","file-loader":"^6.2.0","lint-staged":"^11.0.0","npm-run-all":"^4.1.5","postcss-url":"^10.1.3","tailwindcss":"^3.0.23","autoprefixer":"^10.4.2","babel-loader":"^8.2.2","react-refresh":"^0.14.0","react-scripts":"5.0.0","@types/jest-axe":"^3.5.5","@storybook/react":"^7.0.26","standard-version":"^9.3.2","@babel/preset-env":"^7.14.5","rollup-plugin-img":"^1.1.0","@tailwindcss/forms":"^0.5.0","eslint-plugin-jest":"^25.2.4","@babel/preset-react":"^7.14.5","@rollup/plugin-json":"^5.0.1","eslint-plugin-react":"^7.27.1","@babel/eslint-parser":"^7.17.0","@rollup/plugin-babel":"^6.0.2","rollup-plugin-delete":"^2.0.0","rollup-plugin-terser":"^7.0.2","@storybook/addon-a11y":"^7.0.26","@storybook/addon-docs":"^7.0.26","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^7.0.26","@testing-library/react":"^11.2.7","eslint-plugin-jsx-a11y":"^6.4.1","jest-environment-jsdom":"^29.3.0","@rollup/plugin-commonjs":"^25.0.2","@tailwindcss/typography":"^0.5.2","@babel/preset-typescript":"^7.22.5","@storybook/addon-actions":"^7.0.26","@storybook/addon-mdx-gfm":"^7.0.26","@storybook/addon-postcss":"^2.0.0","@storybook/addon-styling":"^1.3.2","@rollup/plugin-typescript":"^9.0.1","@storybook/react-webpack5":"^7.0.26","@testing-library/jest-dom":"^5.16.5","@typescript-eslint/parser":"^5.40.1","@rollup/plugin-node-resolve":"^15.1.0","@storybook/addon-essentials":"^7.0.26","@testing-library/user-event":"^12.8.3","@tailwindcss/postcss7-compat":"^2.1.4","babel-plugin-polyfill-corejs2":"^0.2.2","babel-plugin-polyfill-corejs3":"^0.2.2","@typescript-eslint/eslint-plugin":"^5.40.1","@whitespace/storybook-addon-html":"^5.1.6","rollup-plugin-peer-deps-external":"^2.2.4","babel-plugin-polyfill-regenerator":"^0.2.2","@storybook/preset-create-react-app":"^7.0.26"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/service-canada-design-system_1.67.12-dev.4a036dcbe_1692299808883_0.36835089463750537","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-07-14T19:45:40.506Z","modified":"2024-10-29T12:00:39.742Z","1.47.0":"2022-07-14T19:45:40.837Z","1.48.0":"2022-07-14T19:51:50.126Z","1.49.0":"2022-07-18T14:14:39.035Z","1.50.0":"2022-07-19T12:59:00.661Z","1.51.0":"2022-09-22T18:53:31.974Z","1.51.1":"2022-09-22T19:02:13.571Z","1.51.2":"2022-10-04T17:06:37.212Z","1.52.1":"2022-10-13T20:46:16.874Z","1.52.4":"2022-10-13T21:33:53.099Z","1.52.5":"2022-10-14T00:06:03.085Z","1.52.6":"2022-10-14T13:47:46.989Z","1.52.7":"2022-10-14T14:28:23.804Z","1.52.8":"2022-10-14T18:20:03.304Z","1.52.9-dev.bd511a9c3":"2022-10-15T19:15:00.387Z","1.52.9-dev.5531076f9":"2022-10-15T19:19:13.246Z","1.52.14-dev.c79e0cd5a":"2022-10-15T19:21:21.529Z","1.52.14-dev.c194c8d10":"2022-10-15T19:50:53.673Z","1.52.16-dev.166919175":"2022-10-15T20:44:08.212Z","1.52.16-dev.304bce456":"2022-10-15T20:47:55.652Z","1.52.16-dev.f8a5a4875":"2022-10-15T20:53:13.954Z","1.52.16-dev.8e5db8c8a":"2022-10-15T20:58:20.037Z","1.52.17-dev.9494737c0":"2022-10-15T21:01:36.265Z","1.52.17-dev.4d3bab2a0":"2022-10-15T21:04:42.981Z","1.52.17-dev.25a64a9a8":"2022-10-15T21:13:15.404Z","1.52.18-dev.39915b633":"2022-10-15T21:14:46.246Z","1.52.18-dev.0f6085309":"2022-10-15T21:17:46.138Z","1.52.15":"2022-10-15T21:30:49.485Z","1.52.1-5.beta":"2022-10-15T21:50:04.129Z","1.52.18":"2022-10-15T22:03:33.868Z","1.52.19-dev.493e1d64b":"2022-10-15T22:15:05.855Z","1.52.19":"2022-10-15T22:20:50.964Z","1.52.20-dev.ca15b8128":"2022-10-17T18:08:01.468Z","1.52.20":"2022-10-17T18:14:50.844Z","1.52.21-dev.d9b44a54d":"2022-10-17T18:56:13.505Z","1.52.21":"2022-10-17T19:00:29.227Z","1.52.22-dev.c4cfcd1f3":"2022-10-17T20:04:56.222Z","1.52.22":"2022-10-17T20:08:47.261Z","1.52.23-dev.0460ab020":"2022-10-18T13:56:28.422Z","1.52.23-dev.81b07c5e0":"2022-10-18T14:02:47.412Z","1.52.23":"2022-10-18T14:13:36.158Z","1.52.24-dev.d59fd7a74":"2022-10-18T15:38:13.538Z","1.52.24-dev.8ec8879df":"2022-10-18T15:46:16.742Z","1.52.24-dev.3322c65f6":"2022-10-18T16:03:54.643Z","1.52.24-dev.307d22661":"2022-10-18T16:10:39.368Z","1.52.24-dev.74c14cd55":"2022-10-18T16:21:41.355Z","1.52.24-dev.acdef5911":"2022-10-18T16:33:35.441Z","1.52.24-dev.3ab225f62":"2022-10-18T16:39:35.490Z","1.52.24-dev.2c3dae401":"2022-10-18T16:45:08.630Z","1.52.24-dev.1a2ac519f":"2022-10-18T16:58:21.142Z","1.52.24-dev.e0fff8ad8":"2022-10-18T17:06:45.307Z","1.52.24-dev.a9be2ba05":"2022-10-18T17:15:24.614Z","1.52.24-dev.d8f8227eb":"2022-10-18T18:14:45.161Z","1.52.24":"2022-10-18T19:20:51.890Z","1.52.25-dev.b083cc491":"2022-10-18T19:41:30.679Z","1.52.25":"2022-10-18T19:44:17.385Z","1.52.26-dev.69db1d095":"2022-11-16T18:53:17.819Z","1.52.26-dev.40ac28199":"2022-11-17T16:06:36.447Z","1.52.26-dev.889771385":"2022-11-21T14:29:37.621Z","1.52.26-dev.edd93191d":"2022-11-24T21:08:12.316Z","1.52.26-dev.6f8b64f57":"2022-11-25T21:55:14.434Z","1.52.26-dev.b70d01390":"2022-11-29T15:22:03.668Z","1.53.0":"2022-11-29T18:15:23.799Z","1.53.1-dev.798b971e4":"2022-12-01T13:31:33.021Z","1.53.1-dev.66676ac16":"2022-12-02T20:37:16.575Z","1.53.1":"2022-12-02T20:57:52.575Z","1.53.2-dev.4acc0ea54":"2022-12-13T16:53:44.453Z","1.53.2-dev.e64669b00":"2022-12-13T18:46:15.726Z","1.53.2-dev.d748ddc50":"2022-12-13T19:10:55.299Z","1.53.2-dev.f2dd32111":"2022-12-19T21:22:59.740Z","1.53.2-dev.5c2a062ea":"2022-12-20T13:56:58.085Z","1.53.2-dev.7b21bfda6":"2022-12-20T14:13:36.311Z","1.53.2-dev.6713cc943":"2022-12-21T14:49:33.815Z","1.53.2-dev.944bfa4df":"2022-12-21T16:03:41.343Z","1.53.2-dev.9eee86f0c":"2023-01-11T19:21:21.906Z","1.53.2-dev.856c562ab":"2023-01-11T19:33:39.792Z","1.0.1-dev.8e91cb63d":"2023-01-11T20:44:30.397Z","1.0.1":"2023-01-11T21:17:10.158Z","1.0.2-dev.cf515cf49":"2023-01-11T21:32:53.624Z","1.53.7-dev.d9bae0247":"2023-01-11T21:52:21.371Z","1.53.7-dev.5ffbf2a2a":"2023-01-11T21:58:39.655Z","1.53.7":"2023-01-11T22:21:58.051Z","1.53.8-dev.ace7b0f13":"2023-01-12T14:14:12.391Z","1.53.8-dev.7063caae5":"2023-01-12T14:27:51.948Z","1.53.8-dev.454219728":"2023-01-12T14:44:14.871Z","1.53.8":"2023-01-12T15:00:11.585Z","1.53.9-dev.2d75d3a92":"2023-01-12T20:09:58.799Z","1.53.9":"2023-01-12T20:30:59.656Z","1.53.10-dev.674394716":"2023-01-17T19:46:39.692Z","1.53.10-dev.ca15e05ed":"2023-01-25T16:22:47.139Z","1.54.1-dev.ea01f6f7a":"2023-01-26T21:13:41.730Z","1.55.1-dev.7323ee8e3":"2023-01-30T18:19:21.822Z","1.55.2-dev.7b825aea0":"2023-02-01T15:15:48.553Z","1.55.3-dev.985254f9c":"2023-02-02T17:53:25.677Z","1.55.4-dev.f4df5fce6":"2023-02-06T16:16:54.777Z","1.55.5-dev.791c9152f":"2023-02-06T18:47:45.637Z","1.56.1-dev.c8f803ddd":"2023-02-07T19:30:46.223Z","1.56.1-dev.6a49798c9":"2023-02-07T19:31:09.288Z","1.56.1-dev.60ba368df":"2023-02-08T16:54:09.395Z","1.56.1-dev.92b064dc2":"2023-02-08T17:43:21.884Z","1.56.2-dev.3bfd6c5c3":"2023-02-08T18:17:50.731Z","1.56.3-dev.0eaf2a463":"2023-02-08T20:33:11.271Z","1.56.4-dev.379182375":"2023-02-09T15:22:45.079Z","1.56.5-dev.1a7c70c6f":"2023-02-09T16:15:53.812Z","1.56.6-dev.00208ba25":"2023-02-10T15:23:14.334Z","1.56.6-dev.7e188efb1":"2023-02-14T19:21:37.547Z","1.56.6-dev.1236e8767":"2023-02-17T21:40:55.497Z","1.56.6-dev.a1cc3c34f":"2023-02-22T18:05:17.556Z","1.56.6-dev.73281e9a4":"2023-02-22T20:04:08.781Z","1.56.6-dev.ab071149b":"2023-02-24T19:14:23.661Z","1.56.6-dev.c631457f4":"2023-02-24T19:33:04.375Z","1.56.6-dev.d56461a2b":"2023-02-24T19:34:32.373Z","1.56.6-dev.96960ba77":"2023-02-24T21:38:35.070Z","1.56.6-dev.bdf8433bd":"2023-02-24T21:44:41.529Z","1.57.0":"2023-02-28T14:29:19.544Z","1.57.1-dev.50f5be381":"2023-03-13T14:21:36.293Z","1.57.1-dev.46411ddc8":"2023-03-17T13:27:42.975Z","1.57.1-dev.efe8b7dc0":"2023-03-17T22:10:23.801Z","1.57.1-dev.3957ae22d":"2023-03-21T15:49:57.835Z","1.57.1-dev.d5077fcf0":"2023-03-21T17:55:41.180Z","1.57.1-dev.c6000c3e0":"2023-03-28T17:45:24.832Z","1.57.1-dev.c2942ead5":"2023-03-31T17:20:12.223Z","1.57.1-dev.1c2444418":"2023-04-11T18:39:45.394Z","1.58.1-dev.f04c2ec86":"2023-04-13T14:11:02.575Z","1.59.1-dev.4ee8c8af9":"2023-04-13T19:40:48.884Z","1.59.2-dev.5c355b8ea":"2023-04-14T13:20:16.508Z","1.59.3-dev.8e5a38b93":"2023-04-20T18:01:16.406Z","1.59.4-dev.7e0504804":"2023-04-24T15:26:37.473Z","1.59.4":"2023-04-25T15:30:54.305Z","1.59.5-dev.b8dc1df4a":"2023-05-02T17:04:51.412Z","1.53.8-dev.3902940b9":"2023-05-02T19:29:33.927Z","1.53.8-dev.307daafef":"2023-05-03T14:02:42.986Z","1.53.8-dev.a35a155af":"2023-05-03T17:23:14.303Z","1.60.1-dev.c2c89aa6c":"2023-05-03T18:19:46.649Z","1.59.5-dev.357cdd303":"2023-05-03T19:12:25.560Z","1.59.5-dev.0c465e778":"2023-05-03T19:48:37.390Z","1.54.1-dev.0692fedb5":"2023-05-03T20:24:43.297Z","1.54.1-dev.20b2bfec8":"2023-05-03T21:11:04.060Z","1.55.1-dev.13c435d6a":"2023-05-04T14:22:44.636Z","1.55.1-dev.cba14e3a9":"2023-05-08T13:44:13.617Z","1.56.1-dev.1edb9b8de":"2023-05-08T15:16:21.577Z","1.57.1-dev.df9bf3e72":"2023-05-08T16:07:10.042Z","1.58.1-dev.71b565a17":"2023-05-10T16:15:24.622Z","1.60.1-dev.c800c9fd1":"2023-05-10T18:56:19.724Z","1.60.1-dev.df8278107":"2023-05-15T18:02:44.376Z","1.61.1-dev.7d5bad82b":"2023-05-15T19:28:00.900Z","1.61.2-dev.24d192e06":"2023-05-17T19:32:25.817Z","1.62.1-dev.63a929016":"2023-05-19T16:58:08.823Z","1.63.1-dev.f6c78acfa":"2023-05-25T13:25:03.195Z","1.64.1-dev.f0f702b33":"2023-05-25T18:00:25.921Z","1.64.2-dev.84c533f0e":"2023-05-30T15:29:47.738Z","1.64.3-dev.be004f5dd":"2023-05-30T19:35:43.041Z","1.64.4-dev.37a0c16d3":"2023-06-06T15:13:28.848Z","1.65.1-dev.7a97ae567":"2023-06-12T18:08:28.190Z","1.66.1-dev.de18726cf":"2023-07-10T20:16:02.952Z","1.67.1-dev.ffb5ba39b":"2023-07-19T14:36:46.337Z","1.67.1-dev.2b93eecc6":"2023-07-19T15:32:58.639Z","1.67.1-dev.b26d40090":"2023-07-19T15:51:56.786Z","1.67.1-dev.cbdbc07d7":"2023-07-20T16:53:54.700Z","1.67.0":"2023-07-20T20:34:23.373Z","1.67.2-dev.7bc2b12f1":"2023-07-31T19:27:13.175Z","1.67.3-dev.2a96dde69":"2023-08-01T19:57:50.877Z","1.67.3-dev.3e3b15cfb":"2023-08-02T21:07:13.807Z","1.67.3":"2023-08-03T14:04:32.566Z","1.67.4-dev.af308e378":"2023-08-07T17:17:21.216Z","1.67.5-dev.8af617e1f":"2023-08-07T18:01:10.675Z","1.67.6-dev.8e3b2872c":"2023-08-07T18:38:17.181Z","1.67.7-dev.b7ac9449a":"2023-08-08T13:52:44.027Z","1.67.8-dev.d86ee812c":"2023-08-08T16:17:50.837Z","1.67.9-dev.a73980918":"2023-08-14T13:39:52.581Z","1.67.10-dev.b83225c27":"2023-08-17T16:26:21.345Z","1.67.11-dev.075b5329b":"2023-08-17T17:41:35.281Z","1.67.11-dev.47f7c1b7d":"2023-08-17T18:14:09.734Z","1.67.12-dev.4a036dcbe":"2023-08-17T19:16:49.126Z"},"bugs":{"url":"https://github.com/DTS-STN/Service-Canada-Design-System/issues"},"homepage":"https://github.com/DTS-STN/Service-Canada-Design-System#readme","repository":{"url":"git+https://github.com/DTS-STN/Service-Canada-Design-System.git","type":"git"},"description":"[![Build and Deploy Storybook](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml/badge.svg)](https://github.com/DTS-STN/Service-Canada-Design-System/actions/workflows/build-publish.yml) ![Version](https://img.shie","maintainers":[{"email":"stefan.oconnell@hrsdc-rhdcc.gc.ca","name":"stefan-oconnell"},{"email":"nicholas.ly@hrsdc-rhdcc.gc.ca","name":"nicholas.ly"},{"email":"sebastien.comeau@hrsdc-rhdcc.gc.ca","name":"sebastien-comeau"},{"email":"gregory.j.baker@hrsdc-rhdcc.gc.ca","name":"gregory.j.baker"}],"readme":"","readmeFilename":""}