Title
+Content paragraph
+diff --git a/CHANGELOG.md b/CHANGELOG.md index 7e495e179..22aeaa2aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -493,24 +493,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline - **component/pswdinput:** increase CSS specificity on the input[type=password"] element ([#1032](https://github.com/adeo/mozaic-design-system/issues/1032)) ([9cbed7c](https://github.com/adeo/mozaic-design-system/commit/9cbed7c34a3d37be0bc15c08acfa3b59c6684e06)) - **foundations/icons:** add typescript to react icons ([#1025](https://github.com/adeo/mozaic-design-system/issues/1025)) ([93ce0ff](https://github.com/adeo/mozaic-design-system/commit/93ce0ff0c9b85bfac4e10149def885790631a360)) -# [2.0.0-rc.0](https://github.com/adeo/mozaic-design-system/compare/v1.24.2...v2.0.0-rc.0) (2022-02-08) - - -### Bug Fixes - -* **comment:** add comment in option card ([459fb53](https://github.com/adeo/mozaic-design-system/commit/459fb53c8c783abc9a4a57890fa89e20318b43a2)) -* **readme:** update link ([a681853](https://github.com/adeo/mozaic-design-system/commit/a6818533aeeb6a1a68333ee4e8385077901b5acc)) -* **release:** empty commit due to release issue ([e9a83cb](https://github.com/adeo/mozaic-design-system/commit/e9a83cbd9893c086adee6e1b752ae1e0a64151be)) - - -### Features - -* **pattern/colors:** add new LM colours ([#999](https://github.com/adeo/mozaic-design-system/issues/999)) ([8854fb8](https://github.com/adeo/mozaic-design-system/commit/8854fb89fda1ecd3d9be10b9fcc7aa102fdc7102)) - - - - - ## [1.24.1](https://github.com/adeo/mozaic-design-system/compare/v1.24.0...v1.24.1) (2022-02-02) ### Bug Fixes diff --git a/README.md b/README.md index ccc36a7a0..36b6b77f4 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Adeo Design System -> Mozaic is an open-source design system built by ADEO, designed to help set up a coherent human experience, to reinforce team’s delivery time and improve quality of deliverables. +> Mozaic is an open-source design system built by Adeo, designed to help set up a coherent human experience, to reinforce team’s delivery time and improve quality of deliverables.
diff --git a/iconCompiler/index.js b/iconCompiler/index.js
index 10ae6467b..13690e877 100644
--- a/iconCompiler/index.js
+++ b/iconCompiler/index.js
@@ -39,12 +39,12 @@ cleanDirectories(config)
.then((icons) => {
console.log(outputIconSetSize(icons[0], icons[1]))
console.log('✓ SUCCESS : Icons cleaned and saved as SVGs in the package')
- const allIcons = icons[0].concat(icons[1])
+
return Promise.all([
- generateIconComponent('react', allIcons),
+ generateIconComponent('react', icons[0]),
generateIconComponent('vue', icons[0]),
- generateIconComponent('svelte', allIcons),
- generateIconsModules(allIcons),
+ generateIconComponent('svelte', icons[0]),
+ generateIconsModules(icons[0].concat(icons[1])),
generateIconsDatas(icons),
]).then(() => Promise.resolve())
})
diff --git a/mozaic.config.js b/mozaic.config.js
deleted file mode 100644
index 0742df216..000000000
--- a/mozaic.config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-module.exports = {
- tokens: {
- platforms: ['css', 'js'],
- },
-}
diff --git a/package.json b/package.json
index 52e845ce5..13582185f 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,8 @@
{
"name": "@mozaic-ds/designsystem",
- "description": "Mozaic is an open-source design system built by ADEO, designed to help set up a coherent human experience, to reinforce team’s delivery time and improve quality of deliverables.",
- "version": "2.0.0",
- "contributors": [
- {
- "name": "Charles-Antoine Queste",
- "email": "charles-antoine.queste@adeo.com"
- },
- {
- "name": "Trésor Iloyi",
- "email": "tresor.iloyi@ext.adeo.com"
- },
- {
- "name": "Mohamed Mokhtari",
- "email": "mohamed.mokhtari@ext.adeo.com"
- }
- ],
+ "description": "leroy merlin design system",
+ "version": "0.0.0",
+ "author": "Gaël BOYENVAL
+ Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut
+ condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit
+ amet pharetra.
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at
+ quisquam excepturi dolores deleniti aliquid porro et asperiores, quam
+ sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at
+ quisquam excepturi dolores deleniti aliquid porro et asperiores, quam
+ sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at
+ quisquam excepturi dolores deleniti aliquid porro et asperiores, quam
+ sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at
+ quisquam excepturi dolores deleniti aliquid porro et asperiores, quam
+ sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?
+
+ This is an example of a paragraph that contains an inline
+ link
+ that inherits its context in terms of font styles,
+ This is an example of a paragraph that contains an inline
+ link that inherits its context in terms of
+ font styles,
+ This is an example of a paragraph that contains an inline
+ link that inherits its context in terms of
+ font styles,
+ This is an example of a paragraph that contains an inline
+ link that inherits its context in terms of
+ font styles,{children}
,
inlineCode: InlineCode,
diff --git a/packages/gatsby-theme-styleguide/src/pages/index.scss b/packages/gatsby-theme-styleguide/src/pages/index.scss
index d839687c8..c8be7acd3 100644
--- a/packages/gatsby-theme-styleguide/src/pages/index.scss
+++ b/packages/gatsby-theme-styleguide/src/pages/index.scss
@@ -1,13 +1,12 @@
-@import "https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap&subset=latin-ext";
-@import "tokens";
-@import "settings-tools/all-settings";
-@import "l.flexy";
+@import url('https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i&display=swap&subset=latin-ext');
+@import '_all-settings.scss';
+@import '_l.flexy.scss';
body,
html {
box-sizing: border-box;
color: #000;
- font-family: Karla, sans-serif !important;
+ font-family: 'Karla', sans-serif !important;
font-size: 16px !important;
font-weight: 400;
line-height: 1.45;
@@ -23,7 +22,7 @@ html {
input,
select {
- font-family: Karla, sans-serif;
+ font-family: 'Karla', sans-serif;
}
.button {
@@ -39,7 +38,7 @@ select {
text-align: center;
&:hover {
- background: rgb(0 0 0 / 0.1);
+ background: rgba(0, 0, 0, 0.1);
}
&__menu {
diff --git a/packages/gatsby-theme-styleguide/src/templates/pattern-page.js b/packages/gatsby-theme-styleguide/src/templates/pattern-page.js
index cb397c0ad..aa09291ab 100644
--- a/packages/gatsby-theme-styleguide/src/templates/pattern-page.js
+++ b/packages/gatsby-theme-styleguide/src/templates/pattern-page.js
@@ -1,4 +1,4 @@
-import { MagicUnit } from '@mozaic-ds/tokens/build/lm/js/tokens.js'
+import { MagicUnit } from '@mozaic-ds/tokens/build/js/tokens.js'
import { graphql } from 'gatsby'
import { MDXRenderer } from 'gatsby-plugin-mdx'
import React from 'react'
diff --git a/packages/icons/svelte/BrandLM24.svelte b/packages/icons/svelte/BrandLM24.svelte
deleted file mode 100644
index 569ac659f..000000000
--- a/packages/icons/svelte/BrandLM24.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hover
+
+
+
+
+
+
+ Active
+
+
+
+
+
+
+ Focus
+
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
diff --git a/src/docs/Components/Form/Checkbox/previews/checkbox-item.preview.scss b/src/docs/Components/Form/Checkbox/previews/checkbox-item.preview.scss
new file mode 100644
index 000000000..66f5be6a7
--- /dev/null
+++ b/src/docs/Components/Form/Checkbox/previews/checkbox-item.preview.scss
@@ -0,0 +1,19 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.checkbox";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: fit-content;
+
+ &__item {
+ @include set-flexy ();
+
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Checkbox/previews/default-states.preview.html b/src/docs/Components/Form/Checkbox/previews/default-states.preview.html
new file mode 100644
index 000000000..18e889bfd
--- /dev/null
+++ b/src/docs/Components/Form/Checkbox/previews/default-states.preview.html
@@ -0,0 +1,25 @@
+
+
diff --git a/src/docs/Components/Form/Checkbox/previews/default-states.preview.scss b/src/docs/Components/Form/Checkbox/previews/default-states.preview.scss
new file mode 100644
index 000000000..66f5be6a7
--- /dev/null
+++ b/src/docs/Components/Form/Checkbox/previews/default-states.preview.scss
@@ -0,0 +1,19 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.checkbox";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: fit-content;
+
+ &__item {
+ @include set-flexy ();
+
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Checkbox/previews/group-default.preview.html b/src/docs/Components/Form/Checkbox/previews/group-default.preview.html
new file mode 100644
index 000000000..9acd3755f
--- /dev/null
+++ b/src/docs/Components/Form/Checkbox/previews/group-default.preview.html
@@ -0,0 +1,54 @@
+
+
+
+
diff --git a/src/docs/Components/Form/Checkbox/previews/intro.preview.scss b/src/docs/Components/Form/Checkbox/previews/intro.preview.scss
new file mode 100644
index 000000000..66f5be6a7
--- /dev/null
+++ b/src/docs/Components/Form/Checkbox/previews/intro.preview.scss
@@ -0,0 +1,19 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.checkbox";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: fit-content;
+
+ &__item {
+ @include set-flexy ();
+
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Datepicker/previews/datetime-local.preview.scss b/src/docs/Components/Form/Datepicker/previews/datetime-local.preview.scss
index f3138f34d..1eef2b24d 100644
--- a/src/docs/Components/Form/Datepicker/previews/datetime-local.preview.scss
+++ b/src/docs/Components/Form/Datepicker/previews/datetime-local.preview.scss
@@ -1,4 +1,3 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
@import "components/c.text-input";
diff --git a/src/docs/Components/Form/Datepicker/previews/default.preview.scss b/src/docs/Components/Form/Datepicker/previews/default.preview.scss
index ec6734d82..1eef2b24d 100644
--- a/src/docs/Components/Form/Datepicker/previews/default.preview.scss
+++ b/src/docs/Components/Form/Datepicker/previews/default.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.text-input";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Datepicker/previews/month.preview.scss b/src/docs/Components/Form/Datepicker/previews/month.preview.scss
index f3138f34d..1eef2b24d 100644
--- a/src/docs/Components/Form/Datepicker/previews/month.preview.scss
+++ b/src/docs/Components/Form/Datepicker/previews/month.preview.scss
@@ -1,4 +1,3 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
@import "components/c.text-input";
diff --git a/src/docs/Components/Form/Datepicker/previews/time.preview.scss b/src/docs/Components/Form/Datepicker/previews/time.preview.scss
index f3138f34d..1eef2b24d 100644
--- a/src/docs/Components/Form/Datepicker/previews/time.preview.scss
+++ b/src/docs/Components/Form/Datepicker/previews/time.preview.scss
@@ -1,4 +1,3 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
@import "components/c.text-input";
diff --git a/src/docs/Components/Form/Datepicker/previews/week.preview.scss b/src/docs/Components/Form/Datepicker/previews/week.preview.scss
index f3138f34d..1eef2b24d 100644
--- a/src/docs/Components/Form/Datepicker/previews/week.preview.scss
+++ b/src/docs/Components/Form/Datepicker/previews/week.preview.scss
@@ -1,4 +1,3 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
@import "components/c.text-input";
diff --git a/src/docs/Components/Form/Dropdown/index.mdx b/src/docs/Components/Form/Dropdown/index.mdx
index 2e861c73c..998ceb144 100644
--- a/src/docs/Components/Form/Dropdown/index.mdx
+++ b/src/docs/Components/Form/Dropdown/index.mdx
@@ -2,13 +2,6 @@
title: 'Dropdown'
order: 1
description: 'The definition will be added soon.'
-links:
- vue:
- link: 'https://adeo.github.io/mozaic-vue/?path=/story/components-mdropdown'
- status: 'ready'
- webComponent:
- status: 'ready'
- link: 'https://ubiquitous-giggle-7b5b6e33.pages.github.io/?path=/story/components-dropdown'
status:
scss: 'ready'
figma: 'ready'
diff --git a/src/docs/Components/Form/Dropdown/previews/default.preview.scss b/src/docs/Components/Form/Dropdown/previews/default.preview.scss
index 1786460d9..78e9dbd68 100644
--- a/src/docs/Components/Form/Dropdown/previews/default.preview.scss
+++ b/src/docs/Components/Form/Dropdown/previews/default.preview.scss
@@ -1,4 +1,3 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
@import "components/c.select";
@@ -6,10 +5,6 @@
@import "components/c.loader";
@import "components/c.dropdown";
-html {
- @include set-font-face();
-}
-
.example {
@include set-font-family();
diff --git a/src/docs/Components/Form/Dropdown/previews/disabled.preview.scss b/src/docs/Components/Form/Dropdown/previews/disabled.preview.scss
index 99b230049..708302589 100644
--- a/src/docs/Components/Form/Dropdown/previews/disabled.preview.scss
+++ b/src/docs/Components/Form/Dropdown/previews/disabled.preview.scss
@@ -1,4 +1,3 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
@import "components/c.select";
@@ -6,10 +5,6 @@
@import "components/c.listbox";
@import "components/c.dropdown";
-html {
- @include set-font-face();
-}
-
.example {
@include set-font-family();
diff --git a/src/docs/Components/Form/Dropdown/previews/invalid.preview.scss b/src/docs/Components/Form/Dropdown/previews/invalid.preview.scss
index e6edcb09a..5f88d7114 100644
--- a/src/docs/Components/Form/Dropdown/previews/invalid.preview.scss
+++ b/src/docs/Components/Form/Dropdown/previews/invalid.preview.scss
@@ -1,4 +1,3 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
@import "components/c.select";
diff --git a/src/docs/Components/Form/Dropdown/previews/multi.preview.scss b/src/docs/Components/Form/Dropdown/previews/multi.preview.scss
index 99f51320a..0aa23e305 100644
--- a/src/docs/Components/Form/Dropdown/previews/multi.preview.scss
+++ b/src/docs/Components/Form/Dropdown/previews/multi.preview.scss
@@ -1,4 +1,3 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
@import "components/c.checkbox";
@@ -7,10 +6,6 @@
@import "components/c.listbox";
@import "components/c.dropdown";
-html {
- @include set-font-face();
-}
-
.example {
@include set-font-family();
diff --git a/src/docs/Components/Form/Field/previews/fields-full.preview.scss b/src/docs/Components/Form/Field/previews/fields-full.preview.scss
index ec6734d82..1eef2b24d 100644
--- a/src/docs/Components/Form/Field/previews/fields-full.preview.scss
+++ b/src/docs/Components/Form/Field/previews/fields-full.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.text-input";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Field/previews/fields-help.preview.scss b/src/docs/Components/Form/Field/previews/fields-help.preview.scss
index ec6734d82..1eef2b24d 100644
--- a/src/docs/Components/Form/Field/previews/fields-help.preview.scss
+++ b/src/docs/Components/Form/Field/previews/fields-help.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.text-input";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Field/previews/fields-requirement.preview.scss b/src/docs/Components/Form/Field/previews/fields-requirement.preview.scss
index ec6734d82..1eef2b24d 100644
--- a/src/docs/Components/Form/Field/previews/fields-requirement.preview.scss
+++ b/src/docs/Components/Form/Field/previews/fields-requirement.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.text-input";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Field/previews/fields-sizes.preview.scss b/src/docs/Components/Form/Field/previews/fields-sizes.preview.scss
index ec6734d82..1eef2b24d 100644
--- a/src/docs/Components/Form/Field/previews/fields-sizes.preview.scss
+++ b/src/docs/Components/Form/Field/previews/fields-sizes.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.text-input";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Field/previews/fields-state.preview.scss b/src/docs/Components/Form/Field/previews/fields-state.preview.scss
index ec6734d82..1eef2b24d 100644
--- a/src/docs/Components/Form/Field/previews/fields-state.preview.scss
+++ b/src/docs/Components/Form/Field/previews/fields-state.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.text-input";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Field/previews/fields-validation.preview.scss b/src/docs/Components/Form/Field/previews/fields-validation.preview.scss
index e0490ea0f..1eef2b24d 100644
--- a/src/docs/Components/Form/Field/previews/fields-validation.preview.scss
+++ b/src/docs/Components/Form/Field/previews/fields-validation.preview.scss
@@ -1,15 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-
-html {
- @include set-font-face();
-}
-
@import "components/c.text-input";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Field/previews/fields.preview.scss b/src/docs/Components/Form/Field/previews/fields.preview.scss
index ec6734d82..1eef2b24d 100644
--- a/src/docs/Components/Form/Field/previews/fields.preview.scss
+++ b/src/docs/Components/Form/Field/previews/fields.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.text-input";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/FileUploader/code.mdx b/src/docs/Components/Form/FileUploader/code.mdx
index 659846312..2fab72810 100644
--- a/src/docs/Components/Form/FileUploader/code.mdx
+++ b/src/docs/Components/Form/FileUploader/code.mdx
@@ -42,6 +42,7 @@ Wrap a input[type="file"] and a label inside a div and apply the following class
- `focus`
- `disabled`
+Hover
+ Focus
+ Disabled
+
+
diff --git a/src/docs/Components/Form/Radio/previews/intro.preview.scss b/src/docs/Components/Form/Radio/previews/intro.preview.scss
new file mode 100644
index 000000000..92940441b
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/intro.preview.scss
@@ -0,0 +1,19 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.radio";
+@import "typography/t.all-base-typography";
+@import "typography/t.bodys";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: 40vw;
+
+ &__list-item {
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Radio/previews/radio-default.preview.html b/src/docs/Components/Form/Radio/previews/radio-default.preview.html
new file mode 100644
index 000000000..8b85ea670
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-default.preview.html
@@ -0,0 +1,13 @@
+
+
diff --git a/src/docs/Components/Form/Radio/previews/radio-default.preview.scss b/src/docs/Components/Form/Radio/previews/radio-default.preview.scss
new file mode 100644
index 000000000..15483fc8a
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-default.preview.scss
@@ -0,0 +1,17 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.radio";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: 40vw;
+
+ &__list-item {
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Radio/previews/radio-disabled-state.preview.html b/src/docs/Components/Form/Radio/previews/radio-disabled-state.preview.html
new file mode 100644
index 000000000..46f0b1824
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-disabled-state.preview.html
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/src/docs/Components/Form/Radio/previews/radio-disabled-state.preview.scss b/src/docs/Components/Form/Radio/previews/radio-disabled-state.preview.scss
new file mode 100644
index 000000000..15483fc8a
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-disabled-state.preview.scss
@@ -0,0 +1,17 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.radio";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: 40vw;
+
+ &__list-item {
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Radio/previews/radio-focus-state.preview.html b/src/docs/Components/Form/Radio/previews/radio-focus-state.preview.html
new file mode 100644
index 000000000..d0cae18d5
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-focus-state.preview.html
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/src/docs/Components/Form/Radio/previews/radio-focus-state.preview.scss b/src/docs/Components/Form/Radio/previews/radio-focus-state.preview.scss
new file mode 100644
index 000000000..15483fc8a
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-focus-state.preview.scss
@@ -0,0 +1,17 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.radio";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: 40vw;
+
+ &__list-item {
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Radio/previews/radio-hover-state.preview.html b/src/docs/Components/Form/Radio/previews/radio-hover-state.preview.html
new file mode 100644
index 000000000..3d19d053b
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-hover-state.preview.html
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/src/docs/Components/Form/Radio/previews/radio-hover-state.preview.scss b/src/docs/Components/Form/Radio/previews/radio-hover-state.preview.scss
new file mode 100644
index 000000000..15483fc8a
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-hover-state.preview.scss
@@ -0,0 +1,17 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.radio";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: 40vw;
+
+ &__list-item {
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Radio/previews/radio-invalid-state.preview.html b/src/docs/Components/Form/Radio/previews/radio-invalid-state.preview.html
new file mode 100644
index 000000000..53faa3196
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-invalid-state.preview.html
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/src/docs/Components/Form/Radio/previews/radio-invalid-state.preview.scss b/src/docs/Components/Form/Radio/previews/radio-invalid-state.preview.scss
new file mode 100644
index 000000000..15483fc8a
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-invalid-state.preview.scss
@@ -0,0 +1,17 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.radio";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: 40vw;
+
+ &__list-item {
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Radio/previews/radio-states.preview.scss b/src/docs/Components/Form/Radio/previews/radio-states.preview.scss
index 718c00986..15483fc8a 100644
--- a/src/docs/Components/Form/Radio/previews/radio-states.preview.scss
+++ b/src/docs/Components/Form/Radio/previews/radio-states.preview.scss
@@ -1,12 +1,10 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.radio";
.example {
+ @include set-font-face("regular");
+
margin: $mu200 auto;
padding: 0 $mu200;
width: 40vw;
diff --git a/src/docs/Components/Form/Radio/previews/radio-valid-state.preview.html b/src/docs/Components/Form/Radio/previews/radio-valid-state.preview.html
new file mode 100644
index 000000000..2dd510cb7
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-valid-state.preview.html
@@ -0,0 +1,5 @@
+
+
\ No newline at end of file
diff --git a/src/docs/Components/Form/Radio/previews/radio-valid-state.preview.scss b/src/docs/Components/Form/Radio/previews/radio-valid-state.preview.scss
new file mode 100644
index 000000000..15483fc8a
--- /dev/null
+++ b/src/docs/Components/Form/Radio/previews/radio-valid-state.preview.scss
@@ -0,0 +1,17 @@
+@import "settings-tools/all-settings";
+@include import-font-families();
+@import "components/c.radio";
+
+.example {
+ @include set-font-face("regular");
+
+ margin: $mu200 auto;
+ padding: 0 $mu200;
+ width: 40vw;
+
+ &__list-item {
+ list-style-type: none;
+ margin: $mu100 0;
+ text-align: center;
+ }
+}
diff --git a/src/docs/Components/Form/Select/previews/default.preview.scss b/src/docs/Components/Form/Select/previews/default.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/default.preview.scss
+++ b/src/docs/Components/Form/Select/previews/default.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/disabled.preview.scss b/src/docs/Components/Form/Select/previews/disabled.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/disabled.preview.scss
+++ b/src/docs/Components/Form/Select/previews/disabled.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/help-text.preview.scss b/src/docs/Components/Form/Select/previews/help-text.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/help-text.preview.scss
+++ b/src/docs/Components/Form/Select/previews/help-text.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/invalid.preview.scss b/src/docs/Components/Form/Select/previews/invalid.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/invalid.preview.scss
+++ b/src/docs/Components/Form/Select/previews/invalid.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/requirement.preview.scss b/src/docs/Components/Form/Select/previews/requirement.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/requirement.preview.scss
+++ b/src/docs/Components/Form/Select/previews/requirement.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/select-all-states.preview.scss b/src/docs/Components/Form/Select/previews/select-all-states.preview.scss
index ecc33ef52..9591e55f6 100644
--- a/src/docs/Components/Form/Select/previews/select-all-states.preview.scss
+++ b/src/docs/Components/Form/Select/previews/select-all-states.preview.scss
@@ -1,19 +1,17 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
.example {
+ @include set-font-face("regular");
+
text-align: center;
margin: auto;
width: 90%;
&__title {
@include set-font-scale("07", "m");
- @include set-font-weight("semi-bold");
+ @include set-font-face("semi-bold");
background: $color-grey-100;
text-align: center;
diff --git a/src/docs/Components/Form/Select/previews/select-full.preview.scss b/src/docs/Components/Form/Select/previews/select-full.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/select-full.preview.scss
+++ b/src/docs/Components/Form/Select/previews/select-full.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/single.preview.scss b/src/docs/Components/Form/Select/previews/single.preview.scss
index d97882495..ae21e56ff 100644
--- a/src/docs/Components/Form/Select/previews/single.preview.scss
+++ b/src/docs/Components/Form/Select/previews/single.preview.scss
@@ -1,12 +1,10 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/sizes.preview.scss b/src/docs/Components/Form/Select/previews/sizes.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/sizes.preview.scss
+++ b/src/docs/Components/Form/Select/previews/sizes.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/valid.preview.scss b/src/docs/Components/Form/Select/previews/valid.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/valid.preview.scss
+++ b/src/docs/Components/Form/Select/previews/valid.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/Select/previews/validation.preview.scss b/src/docs/Components/Form/Select/previews/validation.preview.scss
index 47fbf5056..aaa4b06cb 100644
--- a/src/docs/Components/Form/Select/previews/validation.preview.scss
+++ b/src/docs/Components/Form/Select/previews/validation.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.select";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/default.preview.scss b/src/docs/Components/Form/TextArea/previews/default.preview.scss
index 142059a7d..b8b5753da 100644
--- a/src/docs/Components/Form/TextArea/previews/default.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/default.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/disabled.preview.scss b/src/docs/Components/Form/TextArea/previews/disabled.preview.scss
index 142059a7d..b8b5753da 100644
--- a/src/docs/Components/Form/TextArea/previews/disabled.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/disabled.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/help-text.preview.scss b/src/docs/Components/Form/TextArea/previews/help-text.preview.scss
index 142059a7d..b8b5753da 100644
--- a/src/docs/Components/Form/TextArea/previews/help-text.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/help-text.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/invalid.preview.scss b/src/docs/Components/Form/TextArea/previews/invalid.preview.scss
index 142059a7d..b8b5753da 100644
--- a/src/docs/Components/Form/TextArea/previews/invalid.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/invalid.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/requirement.preview.scss b/src/docs/Components/Form/TextArea/previews/requirement.preview.scss
index 142059a7d..b8b5753da 100644
--- a/src/docs/Components/Form/TextArea/previews/requirement.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/requirement.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/single.preview.scss b/src/docs/Components/Form/TextArea/previews/single.preview.scss
index e9a395944..66e22cc43 100644
--- a/src/docs/Components/Form/TextArea/previews/single.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/single.preview.scss
@@ -1,12 +1,10 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/textarea-all.preview.scss b/src/docs/Components/Form/TextArea/previews/textarea-all.preview.scss
index 142059a7d..b8b5753da 100644
--- a/src/docs/Components/Form/TextArea/previews/textarea-all.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/textarea-all.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/textarea-full.preview.scss b/src/docs/Components/Form/TextArea/previews/textarea-full.preview.scss
index 142059a7d..b8b5753da 100644
--- a/src/docs/Components/Form/TextArea/previews/textarea-full.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/textarea-full.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextArea/previews/valid.preview.scss b/src/docs/Components/Form/TextArea/previews/valid.preview.scss
index 142059a7d..b8b5753da 100644
--- a/src/docs/Components/Form/TextArea/previews/valid.preview.scss
+++ b/src/docs/Components/Form/TextArea/previews/valid.preview.scss
@@ -1,13 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.textarea";
@import "components/c.fields";
.example {
+ @include set-font-face();
+
margin: $mu200 0;
padding: 0 $mu200;
}
diff --git a/src/docs/Components/Form/TextInput/code.mdx b/src/docs/Components/Form/TextInput/code.mdx
index 8a210bd4d..7721435dc 100644
--- a/src/docs/Components/Form/TextInput/code.mdx
+++ b/src/docs/Components/Form/TextInput/code.mdx
@@ -84,6 +84,8 @@ You can use one of the 2 available sizes :
- `.is-valid`
- `.is-invalid`
+Layer Title
-
+
diff --git a/src/docs/Components/Layers/previews/border-scroll-bar.preview.scss b/src/docs/Components/Layers/previews/border-scroll-bar.preview.scss
index c28368689..cb0e9ea37 100644
--- a/src/docs/Components/Layers/previews/border-scroll-bar.preview.scss
+++ b/src/docs/Components/Layers/previews/border-scroll-bar.preview.scss
@@ -1,14 +1,11 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.layer";
@import "components/c.button";
-@import "components/c.overlay";
.example {
+ @include set-font-face("regular");
+
background-color: #f6f7f7;
min-height: 700px;
height: 100vh;
diff --git a/src/docs/Components/Layers/previews/cta-link.preview.html b/src/docs/Components/Layers/previews/cta-link.preview.html
new file mode 100644
index 000000000..4d909803a
--- /dev/null
+++ b/src/docs/Components/Layers/previews/cta-link.preview.html
@@ -0,0 +1,31 @@
+Layer Title
-
+
diff --git a/src/docs/Components/Layers/previews/open-ltr.preview.scss b/src/docs/Components/Layers/previews/open-ltr.preview.scss
index ff7ef4358..bb2ee7ed3 100644
--- a/src/docs/Components/Layers/previews/open-ltr.preview.scss
+++ b/src/docs/Components/Layers/previews/open-ltr.preview.scss
@@ -1,15 +1,13 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.layer";
@import "components/c.button";
$background-color-content: #eeeef0;
.example {
+ @include set-font-face("regular");
+
background-color: #f6f7f7;
min-height: 700px;
height: 100vh;
diff --git a/src/docs/Components/Layers/previews/scrolling-content.preview.html b/src/docs/Components/Layers/previews/scrolling-content.preview.html
index 62fb53eee..d0c9da1ad 100644
--- a/src/docs/Components/Layers/previews/scrolling-content.preview.html
+++ b/src/docs/Components/Layers/previews/scrolling-content.preview.html
@@ -9,9 +9,6 @@
>
Layer Title
Layer Title
-
+
diff --git a/src/docs/Components/Layers/previews/without-footer.preview.scss b/src/docs/Components/Layers/previews/without-footer.preview.scss
index b884f08f0..4ebf5671b 100644
--- a/src/docs/Components/Layers/previews/without-footer.preview.scss
+++ b/src/docs/Components/Layers/previews/without-footer.preview.scss
@@ -1,14 +1,12 @@
-@import "tokens";
@import "settings-tools/all-settings";
@include import-font-families();
-html {
- @include set-font-face();
-}
@import "components/c.layer";
$background-color-content: #eeeef0;
.example {
+ @include set-font-face("regular");
+
background-color: #f6f7f7;
min-height: 700px;
height: 100vh;
diff --git a/src/docs/Components/Links/code.mdx b/src/docs/Components/Links/code.mdx
index e71f461b7..3468d7b5f 100644
--- a/src/docs/Components/Links/code.mdx
+++ b/src/docs/Components/Links/code.mdx
@@ -21,6 +21,8 @@ To create a link you have one main class to apply `mc-link`.
Default link
```
+
@@ -46,6 +48,8 @@ Links, while generally are dark by default, have contextual variations that you
Inline links are links contained into paragraphs of text. By default, the inline links inherit the current size.
+
but
+ it will be always dark.
+
but it will be always dark.
+
but it will be always dark.
+
but it will be always dark.
+ Disabled
+
+ Link
+
+
+ Link
+
+
+ Link
+
+
+ Link
+
+ Title
-
-