@mindvalley/design-system 2.0.0 → 2.2.0

package/dist/tailwind/plugins/typography.js

@@ -0,0 +1 @@
+const plugin=require("tailwindcss/plugin"),typographyPlugin=({casing:e="kebabCase",breakingPoint:t="lg"}={})=>function({addComponents:i,theme:n}){const p=n("screens",{}),l={fontFamily:"'Sharp Grotesk Semibold 21', 'Helvetica', 'Arial', 'sans-serif'"},a={fontFamily:"'Sharp Grotesk Medium 20', 'Helvetica', 'Arial', 'sans-serif'"},o={fontFamily:"'Sharp Grotesk Book 19', 'Helvetica', 'Arial', 'sans-serif'"},x={titleBold1:{...l,fontSize:"60px",letterSpacing:"0.25px",lineHeight:"68px",[`@media (min-width: ${p[t]})`]:{fontSize:"72px",lineHeight:"80px"}},titleBold2:{...l,fontSize:"44px",letterSpacing:"0.25px",lineHeight:"52px",[`@media (min-width: ${p[t]})`]:{fontSize:"60px",letterSpacing:"0.25px",lineHeight:"68px"}},titleBold3:{...l,fontSize:"36px",lineHeight:"44px",letterSpacing:"0.25px",[`@media (min-width: ${p[t]})`]:{fontSize:"48px",lineHeight:"56px"}},titleBold4:{...l,fontSize:"32px",letterSpacing:"0.25px",lineHeight:"38px",[`@media (min-width: ${p[t]})`]:{fontSize:"36px",lineHeight:"44px"}},titleBold5:{...l,fontSize:"24px",letterSpacing:"0.25px",lineHeight:"30px",[`@media (min-width: ${p[t]})`]:{fontSize:"28px",lineHeight:"34px"}},titleBold6:{...l,fontSize:"22px",letterSpacing:"0.25px",lineHeight:"26px",[`@media (min-width: ${p[t]})`]:{fontSize:"24px",lineHeight:"30px"}},titleBold7:{...l,fontSize:"20px",letterSpacing:"0.25px",lineHeight:"24px",[`@media (min-width: ${p[t]})`]:{fontSize:"22px",lineHeight:"26px"}},titleBold8:{...l,fontSize:"18px",letterSpacing:"0.25px",lineHeight:"22px",[`@media (min-width: ${p[t]})`]:{fontSize:"20px",lineHeight:"24px"}},titleBold9:{...l,fontSize:"16px",letterSpacing:"0.25px",lineHeight:"20px",[`@media (min-width: ${p[t]})`]:{fontSize:"18px",lineHeight:"22px"}},titleBold10:{...l,fontSize:"14px",letterSpacing:"0.25px",lineHeight:"18px",[`@media (min-width: ${p[t]})`]:{fontSize:"16px",lineHeight:"20px"}},titleBold11:{...l,fontSize:"12px",letterSpacing:"0.25px",lineHeight:"16px",[`@media (min-width: ${p[t]})`]:{fontSize:"14px",lineHeight:"18px"}}},r={title1:{...a,fontSize:"48px",letterSpacing:"0.25px",lineHeight:"56px",[`@media (min-width: ${p[t]})`]:{fontSize:"60px",lineHeight:"68px"}},title2:{...a,fontSize:"36px",letterSpacing:"0.25px",lineHeight:"44px",[`@media (min-width: ${p[t]})`]:{fontSize:"48px",lineHeight:"56px"}},title3:{...a,fontSize:"32px",letterSpacing:"0.25px",lineHeight:"38px",[`@media (min-width: ${p[t]})`]:{fontSize:"36px",lineHeight:"44px"}},title4:{...a,fontSize:"28px",letterSpacing:"0.25px",lineHeight:"34px"},title5:{...a,fontSize:"24px",letterSpacing:"0.25px",lineHeight:"30px"},title6:{...a,fontSize:"20px",letterSpacing:"0.25px",lineHeight:"24px"},title7:{...a,fontSize:"16px",letterSpacing:"0.25px",lineHeight:"20px"},title8:{...a,fontSize:"14px",letterSpacing:"0.25px",lineHeight:"18px"},title9:{...a,fontSize:"12px",letterSpacing:"0.35px",lineHeight:"16px"},title10:{...a,fontSize:"10px",letterSpacing:"0.35px",lineHeight:"14px"}},g={body:{...o,fontSize:"16px",letterSpacing:"0.35px",lineHeight:"24px"},bodyBold:{...l,fontSize:"16px",letterSpacing:"0.25px",lineHeight:"24px"},bodySmall:{...o,fontSize:"14px",letterSpacing:"0.35px",lineHeight:"20px"},bodySmallBold:{...l,fontSize:"14px",letterSpacing:"0.35px",lineHeight:"20px"}},S={caption:{...o,fontSize:"12px",letterSpacing:"0.5px",lineHeight:"16px"},overline:{...a,fontSize:"14px",letterSpacing:"0.5px",lineHeight:"20px",textTransform:"uppercase"},disclaimerText:{...o,fontSize:"12px",letterSpacing:"0.5px",lineHeight:"16px"}};i(convertObjectKeysToCasedClassNames({...x,...g,...r,buttonText:{...a,fontSize:"16px",letterSpacing:"0.25px",lineHeight:"20px"},buttonTextMedium:{...a,fontSize:"14px",letterSpacing:"0.25px",lineHeight:"18px"},buttonTextSmall:{...a,fontSize:"12px",letterSpacing:"0.35px",lineHeight:"16px"},...S},e))};function convertObjectKeysToCasedClassNames(e,t){const i=e=>{let t={};return Object.keys(e).forEach((n=>{["fontSize","letterSpacing","lineHeight"].includes(n)?t[n]=toRem(e[n]):"object"==typeof e[n]?t[n]=i(e[n]):t[n]=e[n]})),t};return mapObj(e,(e=>{switch(t){case"snakeCase":return"."+toSnakeCase(e);case"camelCase":return"."+toCamelCase(e);case"pascalCase":return"."+toPascalCase(e);case"kebabCase":return"."+toKebabCase(e);default:return console.error(`${t} is currently not supported in this function, reverting to default 'kebabCase'. Please raise an issue ticket here[https://github.com/mindvalley/mv-design-system]`),"."+toKebabCase(e)}}),i)}function toRem(e){return e.replace(/px/g,"")/16+"rem"}function mapObj(e,t,i){return Object.entries(e).reduce(((e,[n,p])=>({...e,[t(n)]:i(p)})),{})}const MATCH_WORDS_ONLY_REGEX=/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g,MATCH_FIRST_CHAR_ONLY_REGEX=/(?:^\w|[A-Z]|\b\w)/g;function toKebabCase(e=""){return e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_]+/g,"-").toLowerCase()}function toSnakeCase(e=""){return e.match(MATCH_WORDS_ONLY_REGEX).map((e=>e.toLowerCase())).join("_")}function toCamelCase(e=""){return e.replace(MATCH_FIRST_CHAR_ONLY_REGEX,(function(e,t){return 0===t?e.toLowerCase():e.toUpperCase()})).replace(/\s+/g,"")}function toPascalCase(e=""){return e.match(MATCH_WORDS_ONLY_REGEX).map((e=>e.charAt(0).toUpperCase()+e.slice(1).toLowerCase())).join("")}module.exports=plugin.withOptions(typographyPlugin);

package/docs/CONTRIBUTION.md

@@ -1,17 +1,22 @@
 ## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
 Before you get your hands dirty, let's first understand how the repo works and its structure. We are going to look at:
+
 * What happens in the repo and its inputs and outputs: Jump to [Token transformation](#-token-transformation-process)
 * How the repo is structured and its core parts: See [Directory structure](#-directory-structure)
 
 #### 🏭 Token transformation process
+
 Token transformation on a high level involves the four steps illustrated below:
 
 ![token transformation](https://assets.mindvalley.com/api/v1/assets/7502f91d-8638-4940-a96f-a66386041a75.png)
 
-##### 1. The design tokens:
+##### 1. The design tokens
+
 This is the starting point of the design token transformation process. This step is how the design tokens get into the repo. For example, If there are changes in the Figma design system to the value of a color, then this would be where we would need to update the token.  For simplicity, it is just a directory with some design tokens in a JSON file. More details in the [`src/properties`](#srcproperties) directory documentation.
 
-##### 2. Parsing and transformation:
+##### 2. Parsing and transformation
+
 Using [style-dictonary](https://amzn.github.io/style-dictionary/#/version_3), the design tokens from (1) above are parsed, merged, and transformed into desired formats. The output is a `.js` file. The output is configurable and can be extented to `.css`, `.scss`, `.less` files etc. in the future. See [all possible output file formats](https://amzn.github.io/style-dictionary/#/formats).
 The output of this step ends up in the [`src/build/`](#srcbuild) directory.
 Parsing and transformation can be triggered by running:
@@ -20,7 +25,8 @@ Parsing and transformation can be triggered by running:
 npm run styledictonary:build
 ```
 
-##### 3. Bundling:
+##### 3. Bundling
+
 Bundling is done using [webpack](https://webpack.js.org/concepts) to ensure the resultant files work across browser and server environments. The files from step 2 are bundled and output to the [/dist](#dist) directory.
 Bundling can be invoked by running:
 
@@ -28,11 +34,13 @@ Bundling can be invoked by running:
 npm run build
 ```
 
-##### 4. Publishing:
+##### 4. Publishing
+
 The last in the process is releasing and publishing the bundled files. This step is automated and runs on CI, ensuring that changes made are tested, versioned, and comprehensively documented.  All this is done with the help of [semantic release](https://semantic-release.gitbook.io/semantic-release/). Read more about the [release process](RELEASING.md#releasing-🚀).
  The end package is published to NPM where it can be installed from.
 
 #### 🗂 Directory structure
+
 Let's look at some important directories.
 
 ```shell
@@ -66,36 +74,46 @@ Let's look at some important directories.
 └── webpack.config.js
 
 ```
+
 ###### src/properties/
+
 This is the source of the design tokens. For now, we have the tokens checked in as JSON files.
 The process of updating the payload is manual, implying that when there are changes in the tokens, one must get the updated token from the [figma colors file](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=6437%3A207257) and update the files in this directory.
 
 *Yes, it's a manual step for now, automation will follow later.*
 
 ###### src/build/
+
 This is the output of the design token transformation process. **DO NOT** manually edit the contents of this folder as they are the output of running the [bundling step](#3-bundling).
 
 ###### src/utilities
+
 Holds the custom [transformations](https://amzn.github.io/style-dictionary/#/transforms) and [transformation groups](https://amzn.github.io/style-dictionary/#/transform_groups) which in a nutshell, are how we transform the json files in the `src/properties/` directory into the desired output file format in the `src/build/` directory.
 
 ###### dist
+
 It's the output directory of the Webpack build process and is not checked in for versioning.
 
 ###### test
+
 For tests, because code that cannot be tested is flawed. 🤷🏽‍♂️
 
 #### ⌨️ Start development
+
 To get started with development, start by cloning the mv-design-system repo.
+
 ```
 git clone git@github.com:mindvalley/mv-design-system.git
 ```
 
 Change your current directory to the folder you just cloned and install the dependencies.
+
 ```
 cd mv-design-system && npm install
 ```
 
 ###### 💡 Note
+
 This repo uses `npm` as the package manager
 
 ##### Making commits
@@ -106,6 +124,7 @@ For commits, we leverage the power of conventional commits using [Commitizen](ht
 **Why use conventional commits?** To enable automation of releases, semantic versioning, and release notes auto-generation.
 
 To make a commit, run the command below:
+
 ```
 npm run commit
 ```
@@ -118,6 +137,7 @@ If your branch name has a Jira ticket ID already included, then the prompt autom
 
 Though using `npm run commit` is highly recommended for this repo, you can alternatively write your commit without the Commitizen helper by ensuring you
 follow the conventional commits conventions.
+
 ```
  type(scope): commit-message
 
@@ -125,20 +145,21 @@ follow the conventional commits conventions.
 ```
 
 The commit type has to be one of:
-  - `feat`:     A new feature
-  - `fix`:      A bug fix
-  - `docs`:     Documentation only changes
-  - `style`:    Changes that do not affect the meaning of the code (white-space, - formatting, missing semi-colons, etc)
-  - `refactor`: A code change that neither fixes a bug nor adds a feature
-  - `perf`:     A code change that improves performance
-  - `test`:     Adding missing tests or correcting existing tests
-  - `build`:    Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
-  - `ci`:       Changes to our CI configuration files and scripts (example - scopes: Travis, Circle, BrowserStack, SauceLabs)
-  - `chore`:    Other changes that don't modify src or test files
-  - `revert`:   Reverts a previous commit
 
+* `feat`:     A new feature
+* `fix`:      A bug fix
+* `docs`:     Documentation only changes
+* `style`:    Changes that do not affect the meaning of the code (white-space, - formatting, missing semi-colons, etc)
+* `refactor`: A code change that neither fixes a bug nor adds a feature
+* `perf`:     A code change that improves performance
+* `test`:     Adding missing tests or correcting existing tests
+* `build`:    Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
+* `ci`:       Changes to our CI configuration files and scripts (example - scopes: Travis, Circle, BrowserStack, SauceLabs)
+* `chore`:    Other changes that don't modify src or test files
+* `revert`:   Reverts a previous commit
 
 Here is an example commit message:
+
 ```
 chore(asdf): Add .tool-versions file with current supported node version
 
@@ -148,6 +169,7 @@ MVHOME-765
 Once your commits are done, you can do a normal push to remote.
 
 Read more on [commit conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/).
+
 ##### Branch naming
 
 Branch names start with the Jira ticket ID eg.
@@ -157,19 +179,25 @@ Branch names start with the Jira ticket ID eg.
 ##### Important commands
 
 ###### Tests
+
 To run all the tests:
+
 ```
 npm run test
 ```
+
 ###### Transform design tokens
+
 Whenever there are changes that affect our design tokens, we need to regenerate the build assets using the command below and commit the results:
 
 ```
 npm run styledictonary:build
 ```
+
 This is the command that tranforms our design tokens to the different desired formats we have defined.
 
 ######
+
 In the release step of the CI pipline, we bundle the assets into a umd module with the help of webpack to ensure that our package runs on both the server(nodejs) and the client side(browser).
 
 ```
@@ -179,3 +207,10 @@ npm run build
 You can test it out on your development environment to see the output.
 
 Once your changes are made and merged, they'll need to be published. See how that is done in the [release guide](RELEASING.md#releasing-🚀).
+
+# How to generate icons from figma to code?
+1. Export all the icons from figma file to `Export` folder
+2. Launch terminal in the same folder.
+3. Run `npx svgo -f ./Export -o ./output` to generate compressed icons 
+4. Run `npx svg-sprite --symbol --symbol-render-css --symbol-example --dest=sprite/ output/*.svg` to convert exported icons to sprite
+5. Replace all white and black `fill="#fff"` & `fill="#000"` colors with `fill="currentColor"`

package/docs/USAGE.md

@@ -14,6 +14,10 @@ yarn add @mindvalley/design-system
 
 ## Usage
 
+### Figma Design Documentation
+
+You can use this [link](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=5593%3A26473) to check out Mindvalley's core design system project. All the colors, icons, and typography, and design tokens follow it as the source of truth.
+
 ###### *ES module syntax*
 
 ```
@@ -24,6 +28,7 @@ yarn add @mindvalley/design-system
 
 ```
   const { colors } = require('@mindvalley/design-system')
+
 ```
 
 #### 🎨 colors
@@ -51,14 +56,16 @@ If you use TailwindCSS in your project, using the colors is a simple two-step pr
   }
 ```
 
+##### Gradients
+
 For gradient you can use the following tailwindCSS gradients:
 
-* Purple wave: `from-brand-accent to-purple-600`
-* Orange Wave: `from-orange-500 to-orange-600`
-* Yellow wave: `from-yellow-400 to-yellow-500`
-* Blue Wave: `from-blue-600 to-blue-700`
-* Grey wave (150 - white): `from-cool-grey-150 to-white`
-* Gray wave (600 - 700): `from-cool-gray-600 to-cool-gray-700`
+- Purple wave: `from-brand-accent to-purple-600`
+- Orange Wave: `from-orange-500 to-orange-600`
+- Yellow wave: `from-yellow-400 to-yellow-500`
+- Blue Wave: `from-blue-600 to-blue-700`
+- Grey wave (150 - white): `from-cool-grey-150 to-white`
+- Gray wave (600 - 700): `from-cool-gray-600 to-cool-gray-700`
 
 Example use:
 `<div class="bg-gradient-to-b from-brand-accent to-purple-600 ..."></div>`
@@ -94,3 +101,111 @@ If you'd like other custom names, you can make [tailwindcss color customizations
 
   export default App;
 ```
+
+#### 🖋️ Typography
+
+#### Typography plugin (Tailwindcss)
+
+Mindvalley's design eco-system is highly opinionated with most repos utilizing TailwindCSS. This plugin enables developers to use typography class references from Figma and apply it to their code without worrying about all the underlying font sizes, line heights, font families, etc
+
+##### How to use it?
+
+Let's say that you are trying to codify a button from a Figma design, and you want to apply the exact same typography values(line height, font family, font size, etc.) to your code. Here are the steps you will need to go through to utilize the plugin.
+
+1. Install the design system as descibed in the [install section](#using-npm-or-yarn)
+
+2. Require and use the tailwind typography plugin in your `tailwind.config.js` file.
+
+      ```js
+      module.exports = {
+        ...
+        plugins: [
+          require('@mindvalley/design-system/dist/tailwind/plugin/typography');
+        ],
+        ...
+      }
+
+    ```
+
+3. Add font face definition for the font used in the plugin in your CSS.
+
+    ```css
+      @font-face {
+        font-family: "Sharp Grotesk Semibold 21";
+        font-weight: 600;
+        font-display: swap;
+        /* We load fonts from assets.mindvalley.com cdn but you can choose to host the files yourself */
+        src: url("https://assets.mindvalley.com/api/v1/assets/270944f2-bb71-4559-b461-aabb0b351d6b.woff2") format("woff2");
+      }
+
+      @font-face {
+        font-family: "Sharp Grotesk Medium 20";
+        font-weight: 500;
+        font-display: swap;
+        src: url("https://assets.mindvalley.com/api/v1/assets/faf3d1e3-d18c-461e-aafa-9e56f9f16ce0.woff2") format("woff2");
+      }
+
+      @font-face {
+        font-family: "Sharp Grotesk Book 19";
+        font-weight: 400;
+        font-display: swap;
+        src: url("https://assets.mindvalley.com/api/v1/assets/0982041e-3874-48dc-bba5-a15c6fb960d1.woff2") format("woff2");
+      }
+    ```
+
+*Note that*
+
+- The typography plugin by default, generates Kebab cased class names, e.g `title-bold-1` If you wish to change the class name casing then you can pass a 'casing' option to the plugin.
+Supported casing options are snakeCase, camelCase and camelCase
+
+  ```js
+  module.exports = {
+  ...
+    plugins: [
+      require('@mindvalley/design-system/dist/tailwind/plugin/typography')({ casing: "pascalCase" }),
+    ],
+    ...
+  }
+  ```
+
+- The resultant typography classes generated are responsive for two screen sizes. One desktop size and the other for mobile/tablet screen sizes.
+
+The plugin by default utilizes the `lg` breakpoint from the [screen size configuration](https://tailwindcss.com/docs/screens) on tailwind configuration it is used in.
+If you have a different configuration or naming convention for your tailwind breaking points, then its possible to spacify the identifier of the breakpoint to be used.
+
+ For example, let's say you have a custom tailwind configuration that uses a different naming convention.
+You'll need to make the plugin aware of the breakpoint boundary between the desktop and mobile. To this, you can pass the breakpoint option to the plugin and pass the key of the desired breakpoint as defined in your configuration.
+
+  ```js
+  module.exports = {
+  ...
+    theme: {
+      screens: {
+        'tablet': '640px',
+        'laptop': '1024px',
+        'desktop': '1280px',
+      }
+    }
+    plugins: [
+      /* Passing the identifier of the screen size to use as the breakpoint */
+      require('@mindvalley/design-system/dist/tailwind/plugin/typography')({ breakpoint: 'laptop'}),
+    ],
+    ...
+  }
+  ```
+
+4. Find the name to use by inspecting the selected text on the Figma design file.
+
+<img src="getting-class-name.png" width="1000" height="auto">
+
+5. Use the class name as follows. Remember to adjust that according to the casing option if you are not using the default.
+
+```html
+
+<p class="button-text">...</p>
+
+<!-- This won't work as the button-text class generated is already responsive -->
+<p class="button-text lg:button-text">...</p>
+```
+
+You can find the full list of typography definations here 👉 [Figma typography](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=5593%3A26473&t=3PPGng5xmhzaFyRe-0)