From e4bd213b867e21b2d080ccbdeba55f894686b955 Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Wed, 22 May 2024 16:43:25 +0300 Subject: [PATCH] refactor: [BD-46] Component generator refactoring (#3076) --- .stylelintignore | 2 ++ README.md | 10 ++++------ component-generator/constants.js | 4 ---- component-generator/templates/_variables.scss | 2 -- component-generator/templates/index.scss | 5 ++--- tokens/README.md | 3 +-- www/src/pages/tools/component-generator.mdx | 10 ++++------ 7 files changed, 13 insertions(+), 23 deletions(-) create mode 100644 .stylelintignore delete mode 100644 component-generator/templates/_variables.scss diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000000..beccdbbe83 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,2 @@ +component-generator/** +example/** diff --git a/README.md b/README.md index 4a7ddfe691..edca3dee10 100644 --- a/README.md +++ b/README.md @@ -285,8 +285,7 @@ This will create a directory in `/src/` that will contain templates for all nece MyComponent ├── index.jsx ├── README.md -├── MyComponent.scss -├── _variables.scss +├── index.scss └── MyComponent.test.jsx ``` @@ -325,11 +324,10 @@ export default MyComponent; ##### 4. (Optional) Add styles to your component. If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your -component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component. +component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component. -If you wish to use SASS variables (which is the preferred way of styling the components since values can be -easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component). -This way the variables will also get automatically picked up by documentation site and displayed on your component's page. +If you wish to use CSS variables (which is the preferred way of styling the components since values can be +easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens). **Please note that you need to follow [Paragon's CSS styling conventions](docs/decisions/0012-css-styling-conventions).** diff --git a/component-generator/constants.js b/component-generator/constants.js index 4c6b3158b7..22a81a1dda 100644 --- a/component-generator/constants.js +++ b/component-generator/constants.js @@ -14,10 +14,6 @@ exports.COMPONENT_FILES = [ targetPath: path.resolve(__dirname, '../src/componentName/index.jsx'), templatePath: path.resolve(__dirname, './templates/index.jsx'), }, - { - targetPath: path.resolve(__dirname, '../src/componentName/_variables.scss'), - templatePath: path.resolve(__dirname, './templates/_variables.scss'), - }, { targetPath: path.resolve(__dirname, '../src/componentName/README.md'), templatePath: path.resolve(__dirname, './templates/README.md'), diff --git a/component-generator/templates/_variables.scss b/component-generator/templates/_variables.scss deleted file mode 100644 index da27744c34..0000000000 --- a/component-generator/templates/_variables.scss +++ /dev/null @@ -1,2 +0,0 @@ -// Put SASS variables related to your component here, -// you can safely delete this file if you do not intend to use any variables diff --git a/component-generator/templates/index.scss b/component-generator/templates/index.scss index ed35fec762..bf5fbbb705 100644 --- a/component-generator/templates/index.scss +++ b/component-generator/templates/index.scss @@ -1,6 +1,5 @@ -// Put styles related to your component here - -@import "variables"; +// Put design tokens in `tokens` directory if you need to create variables related to your component, +// you can safely delete this file if you do not intend to use any styles .pgn__css-class { diff --git a/tokens/README.md b/tokens/README.md index 8beb998d7d..f93e56f49b 100644 --- a/tokens/README.md +++ b/tokens/README.md @@ -1,7 +1,6 @@ # Design Tokens -This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens) -and relevant ADR(TODO: add link when we merge an ADR). +This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens). ## Overview diff --git a/www/src/pages/tools/component-generator.mdx b/www/src/pages/tools/component-generator.mdx index 8248c47cdc..89a4365b27 100644 --- a/www/src/pages/tools/component-generator.mdx +++ b/www/src/pages/tools/component-generator.mdx @@ -30,8 +30,7 @@ This will create a directory in `/src/` that will contain templates for all nece MyComponent ├── index.jsx ├── README.md -├── MyComponent.scss -├── _variables.scss +├── index.scss └── MyComponent.test.jsx ``` @@ -70,11 +69,10 @@ export default MyComponent; ## 4. (Optional) Add styles to your component. If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your -component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component. +component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component. -If you wish to use SASS variables (which is the preferred way of styling the components since values can be -easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component). -This way the variables will also get automatically picked up by documentation site and displayed on your component's page. +If you wish to use CSS variables (which is the preferred way of styling the components since values can be +easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens). **Please note that you need to follow [Paragon's CSS styling conventions](https://github.com/openedx/paragon/blob/master/docs/decisions/0012-css-styling-conventions).**