diff --git a/.editorconfig b/.editorconfig index 61af587..ee028ac 100644 --- a/.editorconfig +++ b/.editorconfig @@ -21,3 +21,6 @@ max_line_length = 100 indent_style = space indent_size = 4 trim_trailing_whitespace = false + +[*.pug] +trim_trailing_whitespace = false diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..e1bd659 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,28 @@ +# Contributor Code of Conduct + +As contributors and maintainers of this project, we pledge to respect all +people who contribute through reporting issues, posting feature requests, +updating documentation, submitting pull requests or patches, and other +activities. + +We are committed to making participation in this project a harassment-free +experience for everyone, regardless of the experience level, gender, gender +identity and expression, sexual orientation, disability, personal appearance, +body size, race, age or religion. + +Examples of unacceptable behavior by participants include the use of sexual +language or imagery, derogatory comments or personal attacks, trolling, public +or private harassment, insults or other unprofessional conduct. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct. Project maintainers who do not +follow the Code of Conduct may be removed from the project team. + +Instances of abusive, harassing or otherwise unacceptable behavior may be +reported by opening an issue or contacting one or more of the project +maintainers. + +This Code of Conduct is adapted from the +[Contributor Covenant](http://contributor-covenant.org), version 1.0.0, +available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..9fdbb1c --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,130 @@ +# Contributing to this Design System + +## Prerequisite + +You must use a version of Node.js respecting the following rule `>=10.14.2` or `12.x` or `>=14`. + +## Installation + +To get started, start by [forking the repository](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo) on your personnal github account. + +Then, clone the forked repository: + +```sh +git clone https://github.com/{your_account}/design-system.git +``` + +It's now time to install all dependencies: + +```sh +cd design-system +npm install +``` + +At this point you are ready to contribute. + +## Keeping your forked repository up-to-date + +Before you start developping, it is important to always keep your forked repository **up-to-date**. + +### Link your forked repository to the original project + +For this, you will add a remote which points to the original repository (this has to be done only once): + +```sh +git remote add upstream https://github.com/AxaGuilDEv/design-system.git +``` + +### Update your master branch + +Then, each time you want to update your repository with the last changes, run: + +```sh +git checkout master +git fetch upstream +git rebase upstream/master +``` + +More information in github documentation: [Fork a repo#Keep your fork synced](https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo#keep-your-fork-synced) + +## Generated content + +The following pages of this website are generated, please do not modify them: + +- "Contributeurs" page: [contributors-page.pug](https://github.com/AxaGuilDEv/design-system/blob/master/src/pages/get-started/contributors/templates/contributors-page.pug) +- "Changelog" page: [content.md](https://github.com/AxaGuilDEv/design-system/blob/master/src/pages/get-started/changelog/markdown/content.md) +- "Comment contribuer" page: [content.md](https://github.com/AxaGuilDEv/design-system/blob/master/src/pages/get-started/how-to-contribute/markdown/content.md) +- "Code de conduite" page: [content.md](https://github.com/AxaGuilDEv/design-system/blob/master/src/pages/get-started/code-of-conduct/markdown/content.md) + +## Developping in this repository + +### Getting started + +Into a terminal, to start to develop a component you can run + +```sh +npm start +``` + +If it does not automatically open, open a browser and hit [http://localhost:5001](http://localhost:5001). There you go! Ready to dev! + +### Architecture this repository + +```text +├── gulpfile.babel.js/ : contains gulp script to run & build this project +├── src/ +| ├── assets/ : static assets used in the pages +| ├── commons/ : pug common templates, shared js files, shared Sass files +| ├── components/ : pug files for all components + components Sass files +| ├── data/ : some json with usefull information +| ├── pages/ : all the pages, that's where you will work most of times +├── package.json : description of this project +└── README.md : all useful information about the design system +``` + +### Updating the documentation status + +After updating this website (usually after adding / improving the documentation of a [react-toolkit](https://github.com/AxaGuilDEv/react-toolkit) component), **please update the component-status [content.md](https://github.com/AxaGuilDEv/design-system/blob/master/src/pages/get-started/component-status/markdown/content.md) file**. + +### Testing + +At this point, there isn't any unit tests. This site is about documentation, not code. + +However, each time you update the documentation, you should test manually that you did not break anything and that your documentation is visible. + +#### Browser testing + +You can find the list of supported browser in the [List of supported browsers](./README.md#list-of-supported-browsers) section of the README. + +If you are developping on a Mac, you will find some Virtual Machines to help you test, on [Microsoft Edge Tools](https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/) webiste. + +### Commit messages + +We are using the [Angular commit message format](https://github.com/angular/angular/blob/master/CONTRIBUTING.md#-commit-message-format), you are expected to follow it. This is very important because our changlog is generated using commit messages. + +Keep in mind, though, that your pull request will be squashed into master, so repository mainteners may use your commit message but are not entitled to use them as is. + +## Scripts + +| Script name | Description | +| ----------- | --------------------------------------------------------------------- | +| `start` | Best script to start with :) It uses gulp | +| `build` | Does what it says, using gulp as well | +| `deploy` | Used by CI to put this site into production | +| `test` | Dummy script (for now) | +| `lint` | Launches all linting scription | +| `lint:js` | Launches JS linters, will fix whatever is possible to fix, for you. | +| `lint:pug` | Launches PUG linters, will fix whatever is possible to fix, for you. | +| `lint:scss` | Launches Sass linters, will fix whatever is possible to fix, for you. | + +## Troubleshooting + +Nothing here for now... Feel free to add your tips and tricks here. + +## Pull Request + +Please respect the following [PULL_REQUEST_TEMPLATE.md](./PULL_REQUEST_TEMPLATE.md) + +## Issue + +Please respect the following [ISSUE_TEMPLATE.md](./ISSUE_TEMPLATE.md) diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md new file mode 100644 index 0000000..b5efaa4 --- /dev/null +++ b/ISSUE_TEMPLATE.md @@ -0,0 +1,23 @@ +## Issue and Steps to Reproduce + +{ Describe your issue and tell us how to reproduce it (include any useful information) } + +## Versions + +{vx.x.xx} + +## Screenshots + +{Optional : drag and drop one or several screenshots for this issue} + +## Expected + +{Describe should happen according to you} + +## Actual + +{Describe the current behavior} + +## Additional Details + +- Installed packages : {additionnal info} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..55f5d8b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2018 Axa France IARD / Axa France VIE + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..c00b677 --- /dev/null +++ b/PULL_REQUEST_TEMPLATE.md @@ -0,0 +1,17 @@ +## Related issue + +### Reference to the issue + +`Here you can add link to related issue` + +### Description of the issue + +`Your description` + +### Person(s) for reviewing proposed changes + +`You can add @mention here` + +# Important + +Before creating a pull request, please test that the website is not broken. 🙏🙏🙏 diff --git a/README.md b/README.md index b6389b0..0a14ad6 100644 --- a/README.md +++ b/README.md @@ -1,57 +1,28 @@ -# Stack Gulp +# Design System -## Before Started +- [About](#about) +- [Contributing](#contributing) +- [List of supported browsers](#list-of-supported-browsers) +## About -**If you've previously installed gulp globally**, `run npm rm --global gulp` before following these instructions. For more information, read this [Sip][https://medium.com/gulpjs/gulp-sips-command-line-interface-e53411d4467] +This design system is implemented by the [react-toolkit](https://github.com/AxaGuilDEv/react-toolkit) documentation. Should you change something in the design system, do not forget to tell the repository mainteners of its implementations (create an issue in their projects). -#### Check for Node and npm +The website generated by this repository is live here: [https://axaguildev.github.io/design-system/](https://axaguildev.github.io/design-system/) -```bash -node --version -``` +This website makes an extensive use of [Pug](https://pugjs.org/). Please read the [documentation](https://pugjs.org/api/getting-started.html). -```bash -npm --version -``` +## Contributing -#### Install the gulp command +- [How to run the solution and to contribute](./CONTRIBUTING.md) +- [Please respect our code of conduct](./CODE_OF_CONDUCT.md) -```bash -npm install --global gulp-cli -``` +## List of supported browsers -## Getting Started +Here is the list of browsers we tested this Design System on: -After downloading the boilerplate, your first order of business is to open a terminal and run - -```bash -yarn -``` - -or - -```bash -npm install -``` - -Then, to start up the local server, run - -```bash -npm start -``` - -Open a browser and hit [http://localhost:5001](http://localhost:5001), and we are ready to roll. - -## Build & deployment - -Building the dist version of the project is as easy as running - -```bash -npm run build -``` - -If you want to deploy, run - -```bash -npm run deploy -``` +- Chrome 84+ +- Firefox 79+ +- Microsoft Edge 85+ +- Internet Explorer 11 +- Safari 13.1+ +- Opera 71+