CSS V2 & Design Tokens V2.2.0

packages/made-css/.stylelintrc.json

@@ -1,20 +1,21 @@
 {
- "extends": ["stylelint-config-standard"],
- "plugins": ["stylelint-order", "stylelint-selector-bem-pattern"],
+ "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
+ "plugins": ["stylelint-order"],
  "rules": {
- "indentation": 2,
+ "indentation": "tab",
  "max-line-length": 80,
  "string-quotes": "single",
  "declaration-block-no-redundant-longhand-properties": true,
  "selector-max-id": 0,
  "declaration-no-important": true,
  "declaration-block-no-duplicate-properties": true,
+ "selector-class-pattern": null, 
  "selector-no-qualifying-type": [true, {
  "ignore": ["attribute"]
  }],
  "comment-whitespace-inside": "always",
  "selector-list-comma-newline-after": "always",
- "unit-allowed-list": ["rem", "px", "%", "vh", "ms", "s", "fr", "deg"],
+ "unit-allowed-list": ["rem", "px", "%", "vh", "ms", "s", "fr", "deg", "vw"],
  "max-nesting-depth" : 1,
  "block-opening-brace-space-before": "always",
  "block-opening-brace-newline-after": "always",
@@ -35,19 +36,10 @@
  "number-leading-zero": "never",
  "block-no-empty": true,
  "no-empty-source": null,
- "color-hex-length": "short",
  "order/order": [
  "custom-properties",
  "declarations"
  ],
  "order/properties-alphabetical-order": true
- },
- "plugin/selector-bem-pattern": {
- "componentName": "[A-Z]+",
- "componentSelectors": {
- "initial": "^\\.{componentName}(?:-[a-z]+)?$",
- "combined": "^\\.combined-{componentName}-[a-z]+$"
- },
- "utilitySelectors": "^\\.util-[a-z]+$"
  }
-}
+}

packages/made-css/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+ "prettier.tabWidth": 4,
+ "prettier.useTabs": true
+}

packages/made-css/CHANGELOG.md

@@ -1,10 +1,64 @@
 # Changelog
 
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## v2.0.0
+
+### Features 🚀
+
+- New Toast component added
+- New Search Input component added
+- New design for Notification components and also added 'light' variations
+- New design for Pill component
+- Width: added responsive percentage width classes
+- Grid class `.made-l-grid` added `margin-left: auto` and `margin-right: auto` to centre align the grid by default
+- Color property of class `.made-u-link--on-dark` changed from token `--made-color-text-default-on-dark` to new token `--made-link-color-on-dark`
+- Outline colour for focused links on a dark background `.made-u-link--on-dark` changed token from `--made-color-action-border-focus` to `--made-color-action-border-focus-on-dark`
+- Text color for a Disabled Primary Button on Dark Background changed token from `--made-color-action-text-on-disabled` to token `--made-color-action-text-on-dark`
+- Color of text for Branding on Dark Background changed from token `--made-color-text-default-on-dark` to token `--made-header-color-text`
+- Outline colour for Primary Button on Dark Background changed from token `--made-color-action-border-focus` to token `--made-color-action-border-focus-on-dark`
+- Added new focus outline colour for Primary Button on Dark Background `.made-c-button--primary-on-dark:focus`
+- Background colour for Disabled Button Primary on Dark Background token changed from `--made-color-action-background-disabled` to token `--made-color-action-disabled-button`
+- Border colour and text colour of the Disabled Button Secondary changed to token `--made-color-action-disabled-button`
+- Text colour of the Disabled Ghost button changed token from `--made-color-action-text-disabled` to `--made-color-action-disabled-button`
+- Text colour of class `.made-c-footer`, `.made-c-footer__link`, `.made-c-footer__link--navigation`, `.made-c-footer__title` changed token from `--made-color-text-default-on-dark` to `--made-footer-color-text`
+- Text colour of `.made-c-form__label--error`. `.made-c-form__label--success`, `.made-c-form__label--error` changed to token `--made-color-text-default-on-light`
+- Removed button `.made-c-modal__close` and replaced it with a reusable close button `.made-c-button-close`. Removed deprecated margin classes on the buttons in the modal and replaced with new margin classes
+- Refactored the HTML and CSS for the Multi Select component
+- Text input disabled state removed opacity property, and background colour and border tokens changed to `--made-color-action-disabled-text-input` and colour property added with a value of `--made-color-action-disabled`
+- Tour component close button class changed to resuable close button `.made-c-button-close`, close icon class changed to `.made-c-button-close__icon` and width classes in HTML refactored to remove deprecated width classes and applied the new width classes
+- Font weight for the `strong` tag changed from `--made-font-body-weight-bold` to `--made-font-body-weight-default`
+
+### Fixes 🐛
+
+- Spacing: Removed deprecated space classes eg. `.made-u-margin-top-0-x--md`, `.made-u-margin-top-0-x--lg` etc.
+- Width: removed deprecated width classes
+- Typography: Removed the color property from the `p` tag, now inherits from `body`
+- Removed chaining from `a.made-u-link--disabled` class changed to `.made-u-link--disabled`
+- Removed the classes `.made-c-overflow-menu__link-title` and `.made-c-overflow-menu__link--multiline` as not being used by any components
+- Grid offset classes that use percentage widths are now rounded up to 4 numbers after the decimal point
+- Removed chaining from `th.made-c-table__header--sortable` class changed to `.made-c-table__header--sortable`
+- Toggle component class `.made-c-toggle__slider` background colour token changed to `--made-color-action-background-off` for default state and disabled state changed to `--made-color-action-background-on`
+- Tooltip changed -webkit-transform to transform and removed browser prefixes
+- Tooltip added `width: max-content;` to the class `.made-c-tooltip` so when a large amount of text is in the tooltip the width of it is not too narrow
+- Removed class `.made-c-tour__link` from the Tour component
+- Pagination removed the deprecated margin class on the component and changed to new margin class `.made-u-margin-left--md-2-x`
+- Carousel component removed deprecated margin class from the HTML of the component and replaced it with the current margin class `.made-u-width--md-50` on `.made-c-carousel__img`, `.made-c-carousel__content`. And on `.made-c-carousel__actions` updated it to `.made-u-margin-top--md-8-x`
+- Carousel component replaced the `.made-c-modal__icon` with reusable `.made-c-button-close__icon`
+- Added `tabindex="0"` to Action Bar, Breadcrumb, Footer, Overflow Menu, Overflow Menu, Tabs, components to fix focus outline not appearing in Safari
+- Overflow Menu with Icons component long text string now no longer overflows the menu
+- Responsive Button can now use an icon in it
+- Action Bar with Overflow Menu the first dropdown menu now aligns to the left
+- Tabs component on hover font weight does not change to bold
+
+## v1.2.1
+
+### Fixes 🐛
+
+Set aria-disabled to true
+Add styles for tour to override tooltip styles
 
 ## 1.2.0
 
-#### Features 🚀
+### Features 🚀
 
 - New styles for selected state on data table
 - New offset grid column classes
@@ -18,7 +72,7 @@ All notable changes to this project will be documented in this file. See [standa
 - New trigger element added for tooltip
 - New selected colours for checked items in multi select
 
-#### Fixes 🎨🐛
+### Fixes 🎨🐛
 
 - Progress Stepper: Current step now themeable
 - File Upload: Text no longer overflows on small screen and spacing increased between file name and link
@@ -97,4 +151,4 @@ All notable changes to this project will be documented in this file. See [standa
 
 ## v1.0.1-beta
 
-- fix: Add fallback font for custom fonts
+- fix: Add fallback font for custom fonts

packages/made-css/CODE-CHECKLIST.md

@@ -0,0 +1,17 @@
+# Code Review Checklist
+
+* Are design tokens used? Ensure there are no hard coded values
+* Are we following CSS Naming Conventions outlined here
+* Are there existing styles that can reused? e.g. typography
+* Does the code follow approved style guide? (Stylelint guidelines)
+* No unnecessarily duplicated logic
+* Code intent is clear upon initial reading
+* Any code that isn't clear, but is needed, has an effective comment
+* Commented code has been removed (comments themselves are fine).
+* HTML5 tags are used where possible
+* Title of MR matches Conventional Commits
+* MR is checked and only intended changes are pushed.
+* Commits messages are small and understandable.
+* Code is tested on all supported browsers
+* Code has on dev environment and tested.
+* No conflicts in code.

packages/made-css/CODE-STYLE.md

@@ -0,0 +1,52 @@
+# Code Style
+
+CSS guidelines/style guide ensures Made. can keep code as scalable, collaborative, maintainable and as flexible as possible.
+
+* Follow Made. CSS naming conventions
+* Use shorthand where possible. Using shorthand properties is useful for code efficiency and understandability.
+* Avoid IDs in CSS - IDs are specificity heavyweights, and their use will throw our specificity completely out of joint.
+* Avoid browser-specific hacks
+* Avoid using !important to override styles
+* Avoid using several attribute selectors (e.g., [class^="..."]) on commonly occurring components. Browser performance is known to be impacted by these.
+* Don't target type selectors/tags e.g component, component ul li. Type selectors impact performance. Using selectors inhibits portability and reusability. 
+* Indentation one tab (4 spaces)
+* Don't use negative margins.
+* Keep specificity as low as possible so other styles are not overridden.
+* Ideally, 80-characters wide lines;
+* Keep classes as simple as possible so we can extend on them if needed. 
+
+**Rulesets** 
+Example CSS ruleset
+
+```css
+[selector] {
+ [property]: [value];
+ [<--declaration--->]
+}
+```
+
+* a space before our opening brace ({);
+* properties and values on the same line;
+* a space after our property–value delimiting colon (:);
+* each declaration on its own new line;
+* the opening brace ({) on the same line as our last selector;
+* our first declaration on a new line after our opening brace ({);
+* our closing brace (}) on its own new line;
+* each declaration indented by 2 spaces;
+* a trailing semi-colon (;) on our last declaration.
+* Put a blank line after ruleset
+
+**Stylelint** 
+
+We use [Stylelint](https://stylelint.io/) to govern the styles above. See .stylelintrc.json.
+
+To test your code against stylelint script run:
+
+```
+npm run stylelint:test
+```
+To fix any errors run:
+
+```
+npm run stylelint:fix
+```

packages/made-css/CONTRIBUTING.md

@@ -0,0 +1,132 @@
+# Contributing
+
+Made is always evolving – thanks to you. Every time you share local patterns, components, or documentation with us, you’re helping us to understand your needs.
+
+## Prerequisites
+
+Before contributing to Made., you should make sure you have the following tools installed:
+
+- Node.js: follow their installation through a [package manager here](https://nodejs.org/en/download/package-manager/)
+- Git
+- NPM
+- Familiarise yourself with code standards and development workflow within Made.
+
+You'll also need a code editor to make changes. There are many to choose from but some popular options are VSCode, Atom, and Sublime.
+
+### CSS Architecture
+
+See [CSS Architecture](CSS-ARCHITECTURE.md) for more information.
+
+### Code Style Guide
+
+See [Code Style](CODE-STYLE.md) for more information. 
+
+### Naming Conventions
+
+For more information on Made. CSS [Naming Conventions](CSS-NAMING-CONVENTIONS.md) 
+
+### Branching 
+
+We use Git Flow to create branches. Read more about Git Flow here below:
+
+* [Gitflow Workflow](https://confluence.mastercard.int/display/MAPI/Gitflow+Workflow). 
+* [Git Flow Cheat Sheet](https://danielkummer.github.io/git-flow-cheatsheet/)
+
+### Commit Rules 
+We follow [conventional commits'](https://www.conventionalcommits.org/en/v1.0.0/) specification.
+
+Please follow the spec to have a successful commit.
+
+## Contribute
+
+### Propose an update or new feature
+
+Whether you’re proposing an update, a new feature or simply making something better, we welcome contribution. 
+
+Simply open an issue and provide the following information:
+
+- A brief description of the update you want to propose.
+- Clarify whether it’s a variation of an existing token, format or a new theme
+- Include mockups of any fidelity (optional)
+- Include any inspirations from other products (optional)
+- Once your request is raised, we’ll review and set up a meeting to discuss the proposal in greater detail.
+
+We’ll cover the following:
+
+- What exactly needs working on 
+- How much you’d like to contribute
+- Support needed to get the job done
+- Suitable timings that work for you
+- If your work meets our contribution criteria, your request will be added to our backlog and marked as 'To do'. At this stage, you can either start contribution or leave it for a member of the Made production team to pick up.
+
+### Submit a Pull Request
+
+Good pull requests - patches, improvements, new features - are a fantastic help, before starting please open a new issue as documented above for whatever you are adding. That way, we can also offer suggestions or let you know if there is already an effort in progress.
+
+With that all in place, you're ready to start contributing to Made.!
+
+**Fork this repo** 
+Click the Fork button in the top-right corner. This will create a copy repo of Made. Design Tokens to your account. 
+
+**Clone your fork** 
+[You can clone a repository by using the command line](https://docs.gitlab.com/ee/gitlab-basics/start-using-git.html#clone-a-repository)
+
+```
+# Clone your fork of the repo into the current directory
+git clone http://labs.mastercard.com/gitlab8/<your-username>/made-design-tokens.git
+
+# Navigate to the newly cloned directory
+cd made-design-tokens
+
+# Assign the original repo to a remote called "upstream"
+git remote add upstream http://labs.mastercard.com/gitlab8/made-design-tokens.git
+
+# Verify the remote was added
+git remote -v
+```
+
+**Make sure you have the latest changes** 
+
+```
+git checkout master
+git pull upstream master
+```
+
+**Work on a feature branch** 
+When contributing to Made., your work should always be done in a branch off of your repo, this is also how you will submit your pull request when your work is done. To create a new branch, ensure you are in your forked branch in your terminal and run:
+
+```
+git checkout -b feature/your-branch-name
+```
+
+**Make the Change** 
+
+1. Modify CSS in src folder
+2. If adding a new component add to `src/04-components/components.css`
+3. Run `npm run stylelint:test` to test code and `npm run stylelint:fix`to fix code to comply with Stylelint config.
+4. Run `npm run build` to ensure the build is running correctly 
+5. Review [Code Checklist](CODE-CHECKLIST.md) before submitting MR.
+
+**Commit Changes** 
+When the changes are done, add all changes
+
+`git add .`
+
+Commit the changes using conventional commits convention. 
+
+```git commit -m "refactor - Issue 30: Update surface styles to use latest b2b styles"```
+
+Push the changes to Gitlabs
+
+```git push```
+
+**Open a new Merge Request** 
+
+When the branch has been pushed. Create a merge request for another developer to review your code. 
+
+See documentation on [Gitlabs create merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html) for more information.
+
+- Click on the Merge Request tab on the left hand side.
+- Click the new merge request button
+- Choose the branch you pushed and request to merge into master. Click merge branch and continue
+- Add title (use conventional commit naming convention) and description of changes made. Assign the MR to a Made. developer for a code review and click Submit.

packages/made-css/COPYRIGHT.md

@@ -0,0 +1,13 @@
+ Copyright (c) 2022 Mastercard
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.