{"componentChunkName":"component---packages-gatsby-theme-styleguide-src-templates-pattern-page-js","path":"/Contributing/Developers/GitConventions/","result":{"data":{"mdx":{"id":"47aad200-99b0-5ad0-b658-2dafb075f19c","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n \"title\": \"Git conventions\",\n \"order\": 3\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h2\", {\n \"id\": \"branch-names\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#branch-names\",\n \"aria-label\": \"branch names permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Branch names\"), mdx(\"p\", null, \"Each branch name consists of a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \" that matches the main commit one, an optional issue \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"id\"), \" coming from a JIRA ticket or a Github issue and a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"description\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"git checkout -b type-id-description\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"MOZAIC's Team is using \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"JIRA as their project management tool\"), \" \", mdx(\"br\", null), \" but other contributors may use \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"Github issues as reference into MOZAIC\"))), mdx(\"br\", null), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"commit-message\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#commit-message\",\n \"aria-label\": \"commit message permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Commit message\"), mdx(\"p\", null, \"Each commit message consists of a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \", a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"scope\"), \" and a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"description\"), \".\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"(): \\n\\n# example\\nfeat(component/button): add a warning color theme\\n\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Commit message's lines \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"cannot be longer than 140 characters\"), \"!\\nThis leads to \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"messages that are easier to read\"), \" when looking through the project history.\")), mdx(\"p\", null, \"We are \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"automating the releases version numbers (SEMVER) and the generation of the changelogs files by parsing the commit messages\"), \".\"), mdx(\"p\", null, \"That's why it's very important to follow the conventional commit conventions, and to be as clear as possible on the description you provide\"), mdx(\"h3\", {\n \"id\": \"naming-convention\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#naming-convention\",\n \"aria-label\": \"naming convention permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Naming convention\"), mdx(\"h4\", {\n \"id\": \"type\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#type\",\n \"aria-label\": \"type permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Type\"), mdx(\"p\", null, \"The type must describe the changes you have done :\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"BREAKING_CHANGE\"), \" : When your changes are not backward compatible with an older version\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"feat\"), \" : When you add a new feat like a new component or a new Gatsby functionnality but also a documentation additions into the website\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"fix\"), \" : When you fix a code bug, a typo in the website documentation, or a problem in the sketch libraries\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"refactor\"), \" : When you had to rework, rewrite code lines, but it does not affect the\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"test\"), \" : To add new tests (unit tests, integration tests etc...)\")), mdx(\"h4\", {\n \"id\": \"scope-optionnal\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#scope-optionnal\",\n \"aria-label\": \"scope optionnal permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Scope (optionnal)\"), mdx(\"p\", null, \"The scope should precise your changes scope:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"website/xxx\"), \" : everything that has to do with the Mozaic website UI, like menus, tabs nav, Gatsby etc...\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"onboard/xxx\"), \" : documentation only like getting started, contributing sections and information pages.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"patterns/xxx\"), \" : anything that is related to visual deliverables : code / design / doc / tokens / icons\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"tools/xxx\"), \" : any dev tool delivered to the end user like linters, PostCSS configs, tokens customization scripts etc\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"chore/xxx\"), \" : anything related to CI, devtools, scripts for Mozaic developers\")), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"Note: \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"xxx refers to more precise scope\"), \". For example : \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"patterns/buttons\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"website/menu\"))), mdx(\"h4\", {\n \"id\": \"subject\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#subject\",\n \"aria-label\": \"subject permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Subject\"), mdx(\"p\", null, \"The subject contains a succinct description of the change:\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, \"use the imperative, present tense: \\\"change\\\" not \\\"changed\\\" nor \\\"changes\\\"\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"don't capitalize the first letter\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"no dot (.) at the end\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"don't use approximative terms like \\\"some\\\" or \\\"any\\\"\")), mdx(\"br\", null), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"breaking-changes-\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#breaking-changes-\",\n \"aria-label\": \"breaking changes permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Breaking changes :\"), mdx(\"h3\", {\n \"id\": \"definition-\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#definition-\",\n \"aria-label\": \"definition permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Definition :\"), mdx(\"p\", null, \"A breaking change is a change that require a user actions for compatibility purpose when updating. A breaking change will trigger a Major version number (from 1.0.2 => 2.0.0).\"), mdx(\"h3\", {\n \"id\": \"breaking-changes-managment\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#breaking-changes-managment\",\n \"aria-label\": \"breaking changes managment permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Breaking changes managment\"), mdx(\"p\", null, \"For the sake of stability, we try to group breaking changes together and plan them in a way that allow users to manage them in chunks.\"), mdx(\"p\", null, \"In case the current version we are working is an \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"alpha\"), \" or a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"beta\"), \" version (1.0.1-alpha-1), we do not add the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"BREAKING_CHANGE\"), \" commit type or label.\"), mdx(\"h4\", {\n \"id\": \"support-strategy-\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#support-strategy-\",\n \"aria-label\": \"support strategy permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Support strategy :\"), mdx(\"p\", null, \"In case a breaking change need to occur, for example changing the name of a classe or a mixin, \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"we should keep the old one available until its planned support ending date\"), \".\"), mdx(\"p\", null, \"In that case it is the right call to duplicate the class, mixin or function to support the old behavior, to create the new feature in parallel, with a easy way for the user to switch from one to the other.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"Code comments should be written in order to easily find pieces of code that need to be removed when the support for a feature is to be dropped\"), \" (when releasing a new major version), and \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"documentation should be written to let users know the necessary steps to follow\"), \" when switching to a new major version of mozaic.\"), mdx(\"br\", null), mdx(\"hr\", null), mdx(\"h2\", {\n \"id\": \"pull-requests\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h2\",\n \"href\": \"#pull-requests\",\n \"aria-label\": \"pull requests permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Pull requests\"), mdx(\"p\", null, \"The pull request titles follows the same rules as the commit message and consist of a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type\"), \", an optional \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"scope\"), \" and a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"description\"), \". You have to use the same convention described in the commit part.\\n\", mdx(\"strong\", {\n parentName: \"p\"\n }, \"Most of the time your PR title will be the same as the commit message\"), \".\"), mdx(\"h4\", {\n \"id\": \"labels\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#labels\",\n \"aria-label\": \"labels permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Labels\"), mdx(\"p\", null, \"When creating a pull request on github, you need to select the related labels, they are usefull to scan and filter PRs :\"), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"at least one types label\"), \" (same as the commit types described earlier)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"at least one scope label\"), \" (same as the commit scopes described earlier)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"an optional skill label\"), \" : design or dev, witch is related to who needs to review your code. If you need both skills to review your PR, do not add any skill label.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"an optional \", \"[WIP]\", \" label with \", \"[WIP]\", \" written in front of your PR title\"), \" : States that your PR is a work in progress and should not be reviewed, but it does not mean that you can't specifically ask someone to review the PR to get valuable inputs.\")), mdx(\"h3\", {\n \"id\": \"manage-the-commits\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h3\",\n \"href\": \"#manage-the-commits\",\n \"aria-label\": \"manage the commits permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Manage the commit(s)\"), mdx(\"p\", null, \"It is preferable to have only one commit by pull request, but pull requests commits will be squashed before being merged to the master.\"), mdx(\"p\", null, \"The merged commit message will then be used in changelogs and releases informations .\"), mdx(\"blockquote\", null, mdx(\"p\", {\n parentName: \"blockquote\"\n }, \"You can manage your commits using 2 methods :\")), mdx(\"ul\", null, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"Rebase your commit using the rebase interactive\")), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"strong\", {\n parentName: \"li\"\n }, \"amend your commit before pushing to origin\"))), mdx(\"p\", null, \"See details in \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://git-scm.com/book/en/v2\"\n }, \"Git documentation\"), \".\"), mdx(\"h4\", {\n \"id\": \"merging-multiple-commits-into-master\",\n \"style\": {\n \"position\": \"relative\"\n }\n }, mdx(\"a\", {\n parentName: \"h4\",\n \"href\": \"#merging-multiple-commits-into-master\",\n \"aria-label\": \"merging multiple commits into master permalink\",\n \"className\": \"anchor-toc before\"\n }, mdx(\"svg\", {\n parentName: \"a\",\n \"aria-hidden\": \"true\",\n \"focusable\": \"false\",\n \"height\": \"16\",\n \"version\": \"1.1\",\n \"viewBox\": \"0 0 16 16\",\n \"width\": \"16\"\n }, mdx(\"path\", {\n parentName: \"svg\",\n \"fillRule\": \"evenodd\",\n \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n }))), \"Merging multiple commits into master\"), mdx(\"p\", null, \"If for some reason \", mdx(\"strong\", {\n parentName: \"p\"\n }, \"you worked on multiple types, scopes, or tasks in the same pull request\"), \" and conserving multiple commits to be documented in the changelogs and release informations seems the best options.\"), mdx(\"pre\", null, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-shell\"\n }, \"feat(tools/postcss): add a plugin that does x y\\nfeat(pattern/buttons): create a feature that does x y\\n\")), mdx(\"p\", null, \"In that case the feature in the button require the feature on the dev tools, and both informations should be kept in the history, and for information purpose in the changelogs and release infos.\"), mdx(\"p\", null, mdx(\"strong\", {\n parentName: \"p\"\n }, \"You should specifically inform the reviewer that both commit should be kept when merging into master.\")));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#branch-names","title":"Branch names"},{"url":"#commit-message","title":"Commit message","items":[{"url":"#naming-convention","title":"Naming convention","items":[{"url":"#type","title":"Type"},{"url":"#scope-optionnal","title":"Scope (optionnal)"},{"url":"#subject","title":"Subject"}]}]},{"url":"#breaking-changes-","title":"Breaking changes :","items":[{"url":"#definition-","title":"Definition :"},{"url":"#breaking-changes-managment","title":"Breaking changes managment","items":[{"url":"#support-strategy-","title":"Support strategy :"}]}]},{"url":"#pull-requests","title":"Pull requests","items":[{"items":[{"url":"#labels","title":"Labels"}]},{"url":"#manage-the-commits","title":"Manage the commit(s)","items":[{"url":"#merging-multiple-commits-into-master","title":"Merging multiple commits into master"}]}]}]},"fields":{"slug":"/Contributing/Developers/GitConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/GitConventions/index.mdx","extension":"mdx"}},"frontmatter":{"title":"Git conventions","order":3}},"allMdx":{"totalCount":204,"edges":[{"node":{"id":"7715297e-ce66-53b6-a07e-20a06544cefe","frontmatter":{"title":"Tooltip","order":14,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtooltip--try-it"},"freemarker":null},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A tooltip allows you to display further informations to the user when needed. It can also be used to explicitely specify a visual element."},"fields":{"slug":"/Components/Tooltip/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Tooltip/index.mdx","extension":"mdx"}},"excerpt":"A tooltip allows you to display further informations to the user when needed. It can also be used to explicitely specify a visual element…"}},{"node":{"id":"779cae2e-3950-51c5-af38-2b8f52ba90be","frontmatter":{"title":"Tags","order":13,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtag--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/tags/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Tags are used to categorize, show filters or make selections. They display product properties."},"fields":{"slug":"/Components/Tag/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Tag/index.mdx","extension":"mdx"}},"excerpt":"Tags are used to categorize, show filters or make selections. They display product properties. Please check flags for other use cases…"}},{"node":{"id":"f62ec7ef-84ed-5356-926e-c00cf7cd4b7b","frontmatter":{"title":"Tabs","order":12,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtab--try-it"},"freemarker":null},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Tabs allow the user to navigate from a content to another within the same context. It keeps the user on the same page."},"fields":{"slug":"/Components/Tabs/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Tabs/index.mdx","extension":"mdx"}},"excerpt":"Tabs allow the user to navigate from a content to another within the same context. It keeps the user on the same page. This is the default…"}},{"node":{"id":"12491567-34fb-5241-963f-6b2d48892023","frontmatter":{"title":"Acceptance criterias","order":11,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/AcceptanceCriterias/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/AcceptanceCriterias/index.mdx","extension":"mdx"}},"excerpt":"The pull request (obviously) need to pass all automated tests The documentation need to be reviewed by the core team members plus at least…"}},{"node":{"id":"22160426-dea2-5ffb-a9ce-8d55c44155f0","frontmatter":{"title":"Progress bar","order":10,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A progress bar allows you to focus the attention of the user with a visual clue on his progress in a particular journey."},"fields":{"slug":"/Components/ProgressBar/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/ProgressBar/index.mdx","extension":"mdx"}},"excerpt":"A progress bar allows you to focus the attention of the user with a visual clue on his progress in a particular journey. Variations Linear…"}},{"node":{"id":"94c95f9b-a4a9-5f97-b659-eef2b99bf2bb","frontmatter":{"title":"Rating Stars","order":10,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mstarsinput--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/mozaic-freemarker/pages/3_Components/rating-stars/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Rating stars is a pattern you’ll find in almost every website. It has two main usages. First, it allows the user to give feedback on the current experience with a product or a service. Second, it allows a brand to provide some informations on other user’s opinion on a product or a service to make his choice easier."},"fields":{"slug":"/Components/RatingStars/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/RatingStars/index.mdx","extension":"mdx"}},"excerpt":"Rating stars is a pattern you'll find in almost every website. It has two main usages . First, it allows the user to give feedback on the…"}},{"node":{"id":"9d9729d8-7cdf-59e9-af5d-b8f95a2d167d","frontmatter":{"title":"Submit a new pattern","order":10,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/SubmitNewPattern/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/SubmitNewPattern/index.mdx","extension":"mdx"}},"excerpt":"If you are a designer you also need to read the Definition of Done for Sketch symbols contribution page The creation of a new pattern on…"}},{"node":{"id":"a5355c4c-84a2-5c23-b7c6-192699d66ea5","frontmatter":{"title":"Spacing","order":9,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Spacing/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Spacing/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"5ce0ca68-0540-5a04-90be-60292a822dfd","frontmatter":{"title":"Typography","order":9,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"5e12828a-4362-5d7a-95b5-bf9e913afedf","frontmatter":{"title":"Utilities","order":9,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"7cb83917-201d-5fed-8456-c58aefa7238a","frontmatter":{"title":"Toggle","order":9,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtoggle--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/switch/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to show or hide content and \"on/off\" switch"},"fields":{"slug":"/Components/Form/Toggle/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Toggle/index.mdx","extension":"mdx"}},"excerpt":"A toggle is used to choose between two possibilities and when the user needs instant feedback. It is common to use toggles when you need to…"}},{"node":{"id":"5d9cbe23-f2b8-50c0-8e24-68703f528cff","frontmatter":{"title":"Want to Help ?","order":8,"links":null,"status":null,"description":"Discover how you could contribute to Mozaic"},"fields":{"slug":"/WantToHelp/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/WantToHelp/index.mdx","extension":"mdx"}},"excerpt":"Want to help ? Here are things that you can work on with us Help us build/migrate components Dialog component Tabs component Tooltips…"}},{"node":{"id":"8350a13b-9903-58c3-bd8e-c104a41bc315","frontmatter":{"title":"Pagination","order":8,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mpagination--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/mozaic-freemarker/pages/3_Components/pagination/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Pagination enables users to navigate from a page to another one, especially when a large content needs to be splitted in several parts. It's mainly used on pages like the search engine result page or the list pages."},"fields":{"slug":"/Components/Pagination/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Pagination/index.mdx","extension":"mdx"}},"excerpt":"Pagination enables users to navigate from a page to another one, especially when a large content needs to be splitted in several parts. It's…"}},{"node":{"id":"30fbfd2e-62e7-5444-8814-9eb9e7fcc12d","frontmatter":{"title":"Text input","order":8,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtextinput--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/input/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Inputs are used to create input fields with text on a single line. Their states depends on the user interaction or the context"},"fields":{"slug":"/Components/Form/TextInput/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/TextInput/index.mdx","extension":"mdx"}},"excerpt":"Preview Inputs are used to create input fields with text on a single line . Their states depends on the user interaction or the context…"}},{"node":{"id":"1e94a13e-1d87-526b-b9b2-d1d955753f70","frontmatter":{"title":"Strokes","order":8,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":"Strokes are visual elements that space and structure contents. Different border thickness are used to create a hierarchy."},"fields":{"slug":"/Foundations/Utilities/Strokes/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/Strokes/index.mdx","extension":"mdx"}},"excerpt":"Strokes are visual elements that space and structure contents. Different border thickness are used to create a hierarchy. Preview Strokes…"}},{"node":{"id":"b2d89d01-3182-56aa-a198-73cfc75074de","frontmatter":{"title":"Need help","order":7,"links":null,"status":null,"description":null},"fields":{"slug":"/Help/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Help/index.mdx","extension":"mdx"}},"excerpt":"There are three main ways to get quick help from Mozaic. And they’re all pretty simple: 1 - Via Slack. We have a dedicated slack channel…"}},{"node":{"id":"4ab53bdb-7e62-5c1f-84bd-bab6acc117b2","frontmatter":{"title":"Modals","order":7,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action."},"fields":{"slug":"/Components/Modals/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Modals/index.mdx","extension":"mdx"}},"excerpt":"A modal is a dialog window allowing you to focus the user's attention on a specific task, a piece of information or a mandatory action. It…"}},{"node":{"id":"2fd154cc-f180-593e-bc4f-0833def4f79b","frontmatter":{"title":"Notification","order":7,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mnotification--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/toasters/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Notifications are used to bring the user's attention on a piece of information that needs to be known. A notification is usually the result of an action made by the user."},"fields":{"slug":"/Components/Notification/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Notification/index.mdx","extension":"mdx"}},"excerpt":"Notifications are used to bring the user's attention on a piece of information that needs to be known. A notification is usually the result…"}},{"node":{"id":"b53d8f61-7a8c-5323-b1b1-0e8f1b2c9a5e","frontmatter":{"title":"Text area","order":7,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mtextarea--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/textarea/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A text area is used to fill multi-line text. They share appearence and states with text inputs"},"fields":{"slug":"/Components/Form/TextArea/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/TextArea/index.mdx","extension":"mdx"}},"excerpt":"A text area is used to fill multi-line text. They share appearence and states with text inputs . Text areas are used for content with…"}},{"node":{"id":"7498f2a6-481d-5c4e-ae2a-74bbd8ae2f5f","frontmatter":{"title":"Submit a bug fix","order":7,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/SubmitBugFix/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/SubmitBugFix/index.mdx","extension":"mdx"}},"excerpt":"If you want to fix a bug, prior to that it is better to have a related issue or jira ticket describing the bug, and a quick talk with the…"}},{"node":{"id":"d508e88e-2889-566e-a32c-499335ffb898","frontmatter":{"title":"Shadows","order":7,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":null},"fields":{"slug":"/Foundations/Utilities/Shadows/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/Shadows/index.mdx","extension":"mdx"}},"excerpt":"Preview Variations Box-shadow is available in 3 sizes : small , medium , large Small Medium Large"}},{"node":{"id":"1b0a14f2-1d2e-5e89-b31b-7ac5f7b6a043","frontmatter":{"title":"Report a bug","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/ReportBug/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/ReportBug/index.mdx","extension":"mdx"}},"excerpt":"We do our best to make MOZAIC a simple, turnkey, and stable tool;\nhowever, you may encounter bugs when using it (see below the section…"}},{"node":{"id":"febad07b-83a8-5b33-b89e-d3124bbd8749","frontmatter":{"title":"Layers","order":6,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"In modern layouts, a layer is a way to give further actions or display to the user specific content without breaking the user flow, like login or cart overview."},"fields":{"slug":"/Components/Layers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Layers/index.mdx","extension":"mdx"}},"excerpt":"In modern layouts, a layer is a way to give further actions or display to the user specific content without breaking the user flow, like…"}},{"node":{"id":"d994ee71-3f77-5460-a7f6-07c69374fd5b","frontmatter":{"title":"Links","order":6,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mlink--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/links/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page"},"fields":{"slug":"/Components/Links/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Links/index.mdx","extension":"mdx"}},"excerpt":"A link is a component used exclusively to navigate to internal or external webpages or to anchors in the current page. Please use a button…"}},{"node":{"id":"dcbdfd90-be18-5c59-9da6-8fb8d2b6ac4d","frontmatter":{"title":"Specs","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Icons/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Foundations/Icons/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy"}},{"node":{"id":"a37a8792-fe96-5c9e-ad38-039e836f0fcd","frontmatter":{"title":"Select","order":6,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mselect--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/select/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A select is a selection tool used in forms, allowing user to choose between multiple predefined options."},"fields":{"slug":"/Components/Form/Select/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Select/index.mdx","extension":"mdx"}},"excerpt":"A select is a selection tool used in forms, allowing user to choose between multiple predefined options. Overview Selects are a combination…"}},{"node":{"id":"c42be224-9711-5f48-80f6-1989c2001f10","frontmatter":{"title":"Add a new pattern","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/AddNewPattern/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/AddNewPattern/index.mdx","extension":"mdx"}},"excerpt":"If you are a designer you also need to read the Definition of Done for Sketch symbols contribution page MOZAIC being an evolving and…"}},{"node":{"id":"e075783a-e026-5330-bd0f-a4d2e9540285","frontmatter":{"title":"Hero styles","order":6,"links":null,"status":{"sketch":"ready","scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Typography/HeroStyles/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/HeroStyles/index.mdx","extension":"mdx"}},"excerpt":"The hero patterns provide typographic style for a big main page heading. They are mainly used with a picture or color in the background…"}},{"node":{"id":"38af12c6-4184-5314-85d0-6eb06911c046","frontmatter":{"title":"Preset Adeo","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/PresetAdeo/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/PresetAdeo/index.mdx","extension":"mdx"}},"excerpt":"Mozaic is first thought to answer to LEROY MERLIN's brand guidelines but customisation is also allowed. Adeo color palette We have set…"}},{"node":{"id":"dad3c240-f132-54db-8b76-be1a8335cd40","frontmatter":{"title":"Tutorial","order":6,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/npmScriptTutorial/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/npmScriptTutorial/index.mdx","extension":"mdx"}},"excerpt":"Setup a project using Mozaic and npm scripts In this example, in order to familiarize with Mozaic, we will set up a simple web dev…"}},{"node":{"id":"e18007a1-fa01-5be4-9191-fc3dcd060263","frontmatter":{"title":"Updates","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Updates/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Updates/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"67fc8a5b-defe-5acb-a189-d4126677dca8","frontmatter":{"title":"Flags","order":5,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mflag--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/flags/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A flag is used to display meta-informations about a product or a service. It must be displayed at the top of the content, and used as an indicator of a content main category"},"fields":{"slug":"/Components/Flags/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Flags/index.mdx","extension":"mdx"}},"excerpt":"A flag is used to display meta-informations about a product or a service. It must be displayed at the top of the content, and used as an…"}},{"node":{"id":"0aed9e46-d5ce-500f-a983-14693f18c5aa","frontmatter":{"title":"Design","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tag/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Tag/design.mdx","extension":"mdx"}},"excerpt":"Tags sketch file is composed of three sections : The sketch file includes other form elements. Here is the section you'll find the tag…"}},{"node":{"id":"95de92dc-1089-5456-9e90-7928ca6a6ec8","frontmatter":{"title":"Submit changes","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"e37bfa17-836f-5d96-a8eb-16f4cf4b877c","frontmatter":{"title":"Design","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Icons/designers/","fileName":{"name":"designers","base":"designers.mdx","relativePath":"docs/Foundations/Icons/designers.mdx","extension":"mdx"}},"excerpt":"Icons must be recognisable at first sight . Here you will find how LEROY MERLIN's icon kit has been made along with some design…"}},{"node":{"id":"17a97202-4d44-54a6-922c-9adc9b70a503","frontmatter":{"title":"Layout","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Layout/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"697701ad-064e-53c4-8452-82015d8791de","frontmatter":{"title":"Quantity selector","order":5,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the quantity of a selected item, like a product before adding to cart for example"},"fields":{"slug":"/Components/Form/QuantitySelector/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/QuantitySelector/index.mdx","extension":"mdx"}},"excerpt":"The quantity selector is a form element used to enter or select a number. This type of input is best used when the user needs to choose the…"}},{"node":{"id":"f9eba0ca-392e-54cd-ad45-aad62cc5346a","frontmatter":{"title":"Radio","order":5,"links":{"vue":null,"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/radio/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone."},"fields":{"slug":"/Components/Form/Radio/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Radio/index.mdx","extension":"mdx"}},"excerpt":"A radio button is used to offer a unique choice to your user in a form. Unlike checkboxes, it can not be used alone. Overview A radio button…"}},{"node":{"id":"e94712dd-2b2c-505c-955b-fdf6ef640001","frontmatter":{"title":"Heading styles","order":5,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"The heading pattern provides basic typographic styles for your page titles, also known as H1. Each heading has its own sizes depending on the breakpoints."},"fields":{"slug":"/Foundations/Typography/HeadingStyles/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/HeadingStyles/index.mdx","extension":"mdx"}},"excerpt":"The heading pattern provides basic typographic styles for your page titles, also known as H1. Each heading has its own sizes depending on…"}},{"node":{"id":"0e98a11e-88f9-5324-a77b-2d5edc005164","frontmatter":{"title":"Naming convention","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/namingConvention/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/namingConvention/index.mdx","extension":"mdx"}},"excerpt":"Mozaic is a product used by a lot of people. When so many people work together from different places on such a big project, you need to…"}},{"node":{"id":"9204adaa-0cf7-5eb6-bbce-dae079c306da","frontmatter":{"title":"Conventions","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/CssNamingConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/CssNamingConventions/index.mdx","extension":"mdx"}},"excerpt":"ITCSS Introduction ITCSS stand for Inverted Triangle architecture for CSS , it is a way to better manage specificity and to categorise…"}},{"node":{"id":"2bbc6282-7f25-5eb8-af3a-78653c87baca","frontmatter":{"title":"Assets","order":5,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/assets/","fileName":{"name":"assets","base":"assets.mdx","relativePath":"docs/GetStarted/Developers/Installation/assets.mdx","extension":"mdx"}},"excerpt":"Presentation Mozaic ship with static assets like fonts, icons, logos etc.. you can find fonts and icons in the following packages: @mozaic…"}},{"node":{"id":"400cb250-0b77-57cc-9d63-7c6ac659fafb","frontmatter":{"title":"Contributing","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"0fb8fe54-3d23-5064-acdc-1023d40e91ee","frontmatter":{"title":"Accessibility","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Accordion/accessibilty/","fileName":{"name":"accessibilty","base":"accessibilty.mdx","relativePath":"docs/Components/Accordion/accessibilty.mdx","extension":"mdx"}},"excerpt":"Accessibility and semantic"}},{"node":{"id":"7b9f3d51-ae50-5b3e-8971-9c62f7d3e7c8","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Buttons/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Buttons/design.mdx","extension":"mdx"}},"excerpt":"Buttons sketch file is composed of three sections : 👾 For developers : This part is a specific section for developers, for a better…"}},{"node":{"id":"df8e053f-ec0b-510d-854b-e87e03688cd1","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Flags/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Flags/design.mdx","extension":"mdx"}},"excerpt":"Flags sketch file is composed of two sections : 🛠 ToolKit : The ToolKit section bring together the dedicated symbols used for building the…"}},{"node":{"id":"8018ab42-6a60-54f3-8d1c-85a209a4ef9c","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Links/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Links/design.mdx","extension":"mdx"}},"excerpt":"Links sketch file is composed of three sections : The sketch file includes only the single links. For the inline links, please apply…"}},{"node":{"id":"914f6b80-86ce-5939-8036-02aa4330324b","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Notification/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Notification/design.mdx","extension":"mdx"}},"excerpt":"Notifications sketch file is made of two sections : 🛠 ToolKit : The ToolKit section brings together the dedicated symbols used for…"}},{"node":{"id":"14c62453-e0ef-5883-9f15-5757c2fb33aa","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/RatingStars/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/RatingStars/design.mdx","extension":"mdx"}},"excerpt":"Rating stars sketch file is composed of two sections: 👾 For developers: This part is a specific section for developers, for a better…"}},{"node":{"id":"1013faa1-ecfc-569f-8a6f-092b6783319f","frontmatter":{"title":"Design","order":4,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tabs/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Tabs/design.mdx","extension":"mdx"}},"excerpt":"Ready to use You will find a ReadyToUse section in the Sketch file to help you quickly use the tab bar pattern. Please use these symbols…"}},{"node":{"id":"6b34248d-5465-5d88-baf6-563b550a4deb","frontmatter":{"title":"Specs","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tag/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Tag/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / sizes Size name Paddings Font-size radius Small 4px 16px $mu025 $mu100 size.font.04 (14px) 0.75rem Medium…"}},{"node":{"id":"960065ef-1535-5c06-b66a-8bae6b21857d","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tooltip/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Tooltip/design.mdx","extension":"mdx"}},"excerpt":"Spacing Spacing is a very important part of visual consistency. You'll find the right spacing to use in the following images. The default…"}},{"node":{"id":"9982dd38-cccd-578e-98e6-a4283030ce48","frontmatter":{"title":"Icons","order":4,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":null},"fields":{"slug":"/Foundations/Icons/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Icons/index.mdx","extension":"mdx"}},"excerpt":"An icon is a graphic representation of an object, a message or a movement. It's different from an illustration because of its simplistic…"}},{"node":{"id":"1670bb9b-d64c-5488-b927-d8efe3f45b50","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Checkbox/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/Checkbox/design.mdx","extension":"mdx"}},"excerpt":"Checkboxes sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll…"}},{"node":{"id":"d391f028-213c-5e98-82da-d379d548221d","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/FileUploader/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/FileUploader/design.mdx","extension":"mdx"}},"excerpt":"File uploader sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you…"}},{"node":{"id":"078907b0-23d8-5c87-b80b-1a1c70ebba6a","frontmatter":{"title":"File uploader","order":4,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A file uploader is a pattern mainly used in forms. It allows the user to upload one or several files like pictures or documents."},"fields":{"slug":"/Components/Form/FileUploader/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/FileUploader/index.mdx","extension":"mdx"}},"excerpt":"A file uploader is a pattern mainly used in forms. It allows the user to upload one or several files like pictures or documents. Overview A…"}},{"node":{"id":"76579911-62d0-584c-b622-28fb12cc4fb3","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Radio/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/Radio/design.mdx","extension":"mdx"}},"excerpt":"Radio sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll find…"}},{"node":{"id":"950d46bc-9093-50c7-917d-241b916aa06e","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Select/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/Select/design.mdx","extension":"mdx"}},"excerpt":"Selects sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll find…"}},{"node":{"id":"25c9de7d-0b10-5381-bbc9-d3449ae9f8e3","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextArea/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/TextArea/design.mdx","extension":"mdx"}},"excerpt":"Text area sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll…"}},{"node":{"id":"35653c02-066e-533a-b0ba-a1d20f579861","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextInput/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/TextInput/design.mdx","extension":"mdx"}},"excerpt":"Text input sketch file is merged with the global BA Forms file : 👾 For developers : This part is a specific section for developers, for a…"}},{"node":{"id":"59c84dcd-842d-5ce9-b6d8-32b4517f39e9","frontmatter":{"title":"Design","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Toggle/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Components/Form/Toggle/design.mdx","extension":"mdx"}},"excerpt":"Toggle sketch file is merged with the global BA Forms file : The sketch file includes other form elements. Here is the section you'll find…"}},{"node":{"id":"58a161a1-3d83-5d02-b9fc-a043dcf81bfe","frontmatter":{"title":"Add new icons","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/AddNewIcons/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/AddNewIcons/index.mdx","extension":"mdx"}},"excerpt":"We have divided this page in two different sections depending on what your profile is. If you're a designer working on Mozaic just go down…"}},{"node":{"id":"af9a7cef-b3b0-593d-aaa3-6c4cf257a9fc","frontmatter":{"title":"Design Tokens","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/DesignTokens/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/DesignTokens/index.mdx","extension":"mdx"}},"excerpt":"Definition Design tokens are named entities that store visual design information. These are used in place of hard-coded values (such as hex…"}},{"node":{"id":"9105e9fd-5d70-59e6-a456-6f1ebc238f82","frontmatter":{"title":"Pattern enhancement","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/SubmitChanges/PatternEnhancement/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/SubmitChanges/PatternEnhancement/index.mdx","extension":"mdx"}},"excerpt":"When using MOZAIC patterns, it may happen that they do not fully meet your needs. For example: You want to use another type of pattern…"}},{"node":{"id":"00c6038e-2550-59c0-bbf2-61988acff110","frontmatter":{"title":"Body styles","order":4,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A body is a paragraph or a multiline text. It provides basic typographic properties like font-size, line-height and font-weight."},"fields":{"slug":"/Foundations/Typography/BodyStyles/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/BodyStyles/index.mdx","extension":"mdx"}},"excerpt":"A body is a paragraph or a multiline text. It provides basic typographic properties like font-size, line-height and font-weight. Recommended…"}},{"node":{"id":"b4b27168-4ae1-5902-a424-1ab18d1ccb4c","frontmatter":{"title":"How to use the UI kit","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/installation/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/installation/index.mdx","extension":"mdx"}},"excerpt":"1. Download the design files 2. Create a dedicated directory Create a directory somewhere on your computer (or a server) and store the…"}},{"node":{"id":"70c6734e-6783-55d7-aa02-e9ff5160b98f","frontmatter":{"title":"Tokens customization","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/CustomizeTokens/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/CustomizeTokens/index.mdx","extension":"mdx"}},"excerpt":"Principles Under the hood, Mozaic SCSS uses the compiled tokens that we provide in the @mozaic-ds/tokens npm package. This dependency is…"}},{"node":{"id":"4b8af042-e1a3-5fbc-9532-796359607974","frontmatter":{"title":"Import","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/import/","fileName":{"name":"import","base":"import.mdx","relativePath":"docs/GetStarted/Developers/Installation/import.mdx","extension":"mdx"}},"excerpt":"You need to create the bundle SCSS file (ex: src/bundle.scss ) that you want to build. Import paths: If you configured PostCSS properly…"}},{"node":{"id":"9a2d3f6a-112c-54e1-8e2a-e857455c9eec","frontmatter":{"title":"Stylelint","order":4,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/stylelint/","fileName":{"name":"stylelint","base":"stylelint.mdx","relativePath":"docs/GetStarted/Developers/Installation/stylelint.mdx","extension":"mdx"}},"excerpt":"Presentation A mighty, modern linter that helps you avoid errors and enforce conventions in your styles. stylelint comes with Mozaic and it…"}},{"node":{"id":"a20f06b7-d879-54a3-9e55-b1e8a879d490","frontmatter":{"title":"Components","order":3,"links":null,"status":null,"description":"Here are the Components! There are a lot of them and they are very cool and well designed!"},"fields":{"slug":"/Components/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"9575058f-d08c-5122-a330-ce0eebdf0b71","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Accordion/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Accordion/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties CSS Tokens : layout State Property Token Default padding (top) mu-125 (1.25rem) Default padding-left mu-050 (0.5rem…"}},{"node":{"id":"b1c5de86-13eb-5ea7-84c5-d6033b3d81c7","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Breadcrumb/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Breadcrumb/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"d959919b-93e2-5ea8-9d9d-943f68de0c5a","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Buttons/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Buttons/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / sizes Size name Height Paddings Font-size radius Small 32px (2mu) 16px (1mu) size.font.04 (14px) radius.m (4px…"}},{"node":{"id":"2dd0b160-2c82-5f64-a2c3-a339cf70d182","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Dividers/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Dividers/specs.mdx","extension":"mdx"}},"excerpt":"Properties Layout CSS property Value Sass variable border-with 1px $divider-border-size border-color (default) #6f676c $color-divider…"}},{"node":{"id":"254ad863-1ed6-5f45-9e2c-b91938ad2bde","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Flags/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Flags/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout State Property Token Default padding $mu050 (0.5rem) Default font-size size.font.04 (14px) Color themes…"}},{"node":{"id":"5e433a0d-ff99-544e-8759-b22d4869fd46","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Layers/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Layers/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"9e1d020f-9ff8-56f6-971a-2247b81ec2e6","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Links/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Links/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / sizes Size name Height Paddings Font-size Small 24px (1.5mu) 16px (1mu) size.font.04 (14px) Regular (Default…"}},{"node":{"id":"05589c87-ccee-5bbb-993a-f0af8a6fe360","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Modals/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Modals/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"3fab659c-3f65-53d3-9447-eb08555e9f48","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Notification/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Notification/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"e8d7c832-0df0-56af-be3a-6af7a1406cd2","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Notification/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Notification/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Height Paddings Font-size radius Depends on text left: 64px(4mu) others: 24px(1.5mu) size.font.04 (14px…"}},{"node":{"id":"5245ebbf-00bf-5373-939f-8c6e5d9d3b43","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Pagination/spec/","fileName":{"name":"spec","base":"spec.mdx","relativePath":"docs/Components/Pagination/spec.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Variations Height Margins Font-size radius Mobile 48px (3mu) 24px (1.5mu) size.font.05 (22px) radius.m…"}},{"node":{"id":"0591c0af-dbe0-506f-9615-536d1df8ecfa","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/ProgressBar/accessibilty/","fileName":{"name":"accessibilty","base":"accessibilty.mdx","relativePath":"docs/Components/ProgressBar/accessibilty.mdx","extension":"mdx"}},"excerpt":"Color accessibility The progress bar is a user guidance component meaning that it is not critical for the user to see every variation. That…"}},{"node":{"id":"2950f89c-c7ed-5859-8bfb-56a1e7400143","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/RatingStars/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/RatingStars/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Stars sizes Size name Width and height Small 16px (1mu) Medium (Default size) 24px (1.5mu) Large 32px (2mu) ExtraLarge…"}},{"node":{"id":"abc656d5-5646-5313-bce0-b7089ac63b95","frontmatter":{"title":"Specs","order":3,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tabs/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Tabs/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Variations Height Paddings Font-size Default 52px (3.25mu) 16px (1mu) - 24px (1.5mu) size.font.05 (16px)"}},{"node":{"id":"57ed686e-b420-5af6-9474-bb09b76489ec","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tag/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Tag/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility"}},{"node":{"id":"81961aae-1211-5415-8932-de9608e01025","frontmatter":{"title":"Specs","order":3,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tooltip/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Tooltip/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Variations Height Paddings Font-size Default 52px (3.25mu) 16px (1mu) size.font.04 (14px) Color Variations…"}},{"node":{"id":"f96914b6-4baa-5ca2-ae9d-faec520d7b23","frontmatter":{"title":"Developers","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"af9ba390-5830-50c7-99fd-47df6c01a59e","frontmatter":{"title":"Colors","order":3,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Mozaic offers an adaptive and scalable color system. The color palette has been divided into four categories: Primary colors, Secondary colors, Greys and Status colors."},"fields":{"slug":"/Foundations/Colors/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Colors/index.mdx","extension":"mdx"}},"excerpt":"Mozaic offers an adaptive and scalable color system. The color palette has been divided into four categories: Primary colors , Secondary…"}},{"node":{"id":"ae25f779-2ac9-5013-a001-2a4e9ff4e074","frontmatter":{"title":"Color icons","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Icons/catalogColor/","fileName":{"name":"catalogColor","base":"catalogColor.mdx","relativePath":"docs/Foundations/Icons/catalogColor.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"6e4a6fe3-1939-5099-9fbe-55e9d32e9ce2","frontmatter":{"title":"Developer guide","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"641386fb-39b3-5934-8e8a-9c2fb38107c2","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Checkbox/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Checkbox/specs.mdx","extension":"mdx"}},"excerpt":"Properties CSS Tokens : layout State Property Token Default border-radius radius.m (4px) Default border-width border.m (2px) Default min…"}},{"node":{"id":"4c3e7e94-f211-57fc-8273-ae7f3214d7d6","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Datepicker/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/Datepicker/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility The date picker component complies with the same validation and accessibility rules as the text-input component. Read the…"}},{"node":{"id":"a482e4cb-04fc-51d7-a447-1d2cd889a6f9","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Field/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/Field/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility and semantic Always use field inside a form Always use a label with an input. About the aria-label attribute In case you are…"}},{"node":{"id":"b516ba97-50d4-5905-9bae-949a4b6e2bda","frontmatter":{"title":"Fields","order":3,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mfield--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/input/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback"},"fields":{"slug":"/Components/Form/Field/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Field/index.mdx","extension":"mdx"}},"excerpt":"Fields enable the user to input content in a form. It displays a label, useful informations, an input and gives validation feedback…"}},{"node":{"id":"0fe4093c-4393-543c-8684-3099fdd21049","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Field/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Field/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties CSS Tokens : layout / sizes Size name Margin Font-size Line-height Label 4px (mu025) (bottom) size.font.04 (14px) size…"}},{"node":{"id":"6119b8b2-3b46-5947-908e-e0cf24c1936a","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/FileUploader/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/FileUploader/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Layout / size Height Paddings Font-size radius 48px (3mu) 32px (2mu) size.font.05 (16px) radius.m (4px) Icon / size…"}},{"node":{"id":"08060f09-5aa4-55fa-9eaf-4e4f7b8ada48","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/PhoneNumberInput/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/PhoneNumberInput/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility and semantic"}},{"node":{"id":"57ecabf2-d22f-5049-bff3-fc1ee69786a3","frontmatter":{"title":"Phone number input","order":3,"links":{"vue":{"status":"ready","link":""},"freemarker":{"status":"ready","link":""}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Phone number input enables the user to input its phone number with an international country prefix in a form element."},"fields":{"slug":"/Components/Form/PhoneNumberInput/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/PhoneNumberInput/index.mdx","extension":"mdx"}},"excerpt":"Phone number input enables the user to input its phone number with an international country prefix in a form element. Overview Phone number…"}},{"node":{"id":"87375260-fcf0-5635-bbc8-100f35e5b253","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/QuantitySelector/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/QuantitySelector/accessibility.mdx","extension":"mdx"}},"excerpt":"Sizes Please know that the small version is not really supposed to be used on touch devices to avoid misclicking. We recommend some blank…"}},{"node":{"id":"1117b218-5439-5e06-9708-f60ac3148230","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Radio/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Radio/specs.mdx","extension":"mdx"}},"excerpt":"Properties CSS Tokens : layout State Property Token Default border-radius 50% Default border-width border.m (2px) Default min-width 20px…"}},{"node":{"id":"04d5f29f-6d33-597c-84e0-ff9d11a49a5d","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Select/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Select/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties CSS Tokens : layout State Property Token Default padding mu-100 (1rem) Default border-radius radius.m (4px) Default…"}},{"node":{"id":"db057e70-982c-5553-b2e7-81e5091145dc","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextArea/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/TextArea/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties CSS Tokens : layout State Property Token all border-radius radius.m (4px) all border-width border.s (1px) all padding…"}},{"node":{"id":"ffe29178-19f1-5e62-aeed-9b5f995baed4","frontmatter":{"title":"Accessibility","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextInput/accessibility/","fileName":{"name":"accessibility","base":"accessibility.mdx","relativePath":"docs/Components/Form/TextInput/accessibility.mdx","extension":"mdx"}},"excerpt":"Accessibility and semantic Always use a label with an input. About the aria-label attribute In case you are not able to use a label tag in…"}},{"node":{"id":"bf881d34-4078-539e-9665-b1df721299c2","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextInput/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/TextInput/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Medium Small Properties CSS Tokens : layout / sizes Size name Paddings Font-size Line-height radius Small 8px (mu050) size.font.0…"}},{"node":{"id":"4a2eb64a-012c-5911-bb9d-16f35779a407","frontmatter":{"title":"Specs","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Toggle/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Components/Form/Toggle/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties layout size element Property Token M (Default) background border-radius 2mu M (Default) background width 4mu M…"}},{"node":{"id":"6b1c36f7-c096-5546-b8f6-9feb25143189","frontmatter":{"title":"Design tools conventions","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/DesignToolsConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/DesignToolsConventions/index.mdx","extension":"mdx"}},"excerpt":"Prototype tools Mozaic is a worldwide source of truth when it comes to design for Adeo and Leroy Merlin's products. That is why you need to…"}},{"node":{"id":"47aad200-99b0-5ad0-b658-2dafb075f19c","frontmatter":{"title":"Git conventions","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/GitConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/GitConventions/index.mdx","extension":"mdx"}},"excerpt":"Branch names Each branch name consists of a type that matches the main commit one, an optional issue id coming from a JIRA ticket or a…"}},{"node":{"id":"e0baf82a-1975-5cc1-9805-9583c7e4e2f1","frontmatter":{"title":"Container","order":3,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":"The container defines the main content width as well as the minimum negative space between the horizontal edges of the screen and the content"},"fields":{"slug":"/Foundations/Layout/Container/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Layout/Container/index.mdx","extension":"mdx"}},"excerpt":"The container defines the main content width as well as the minimum negative space between the horizontal edges of the screen and the…"}},{"node":{"id":"ed15d3d6-b8d2-57f1-a2e0-377bd355f2ab","frontmatter":{"title":"Customization","order":3,"links":null,"status":{"sketch":"stable","scss":"stable","figma":null},"description":null},"fields":{"slug":"/Foundations/Layout/Grid/customization/","fileName":{"name":"customization","base":"customization.mdx","relativePath":"docs/Foundations/Layout/Grid/customization.mdx","extension":"mdx"}},"excerpt":"Customisation and mixins There are eight available mixins that you can work with to help you create layouts : set-flexy : Adds flex…"}},{"node":{"id":"7004c54f-dd97-52c7-884a-2912371a2816","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/Grid/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Layout/Grid/design.mdx","extension":"mdx"}},"excerpt":"These are the recommendations to set up the values to use as your layout settings in your Sketch files. Layout behaviors Grids on…"}},{"node":{"id":"952bd5b3-27df-5892-85e4-fee195f4dc27","frontmatter":{"title":"Text colors","order":3,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Typography/Colors/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/Colors/index.mdx","extension":"mdx"}},"excerpt":"Common text colors : For common usage the following text color are allowed Note that it is not forbiden to use any color you want specific…"}},{"node":{"id":"b854c199-ccef-515a-a8cb-255996003482","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/HeroStyles/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Typography/HeroStyles/design.mdx","extension":"mdx"}},"excerpt":"What's included ? BA Heros.sketch Device Style name Viewport < M (576px) 01-Hero-Mobile--34px Viewport >= M (576px) 02-Hero-576px->1100px…"}},{"node":{"id":"c3cdc3d8-b052-5ac6-af73-2b0481087ee1","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Images/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Utilities/Images/design.mdx","extension":"mdx"}},"excerpt":"Mozaic provides an optional library with the recommended ratios for designers. Good to know : \nYou have to be precise when you use it. Don't…"}},{"node":{"id":"57483383-d85b-5e23-a063-0084487e3d13","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Shadows/designer/","fileName":{"name":"designer","base":"designer.mdx","relativePath":"docs/Foundations/Utilities/Shadows/designer.mdx","extension":"mdx"}},"excerpt":"TODO"}},{"node":{"id":"2e8bb756-d39f-5f6a-9e2c-0895b5793592","frontmatter":{"title":"Design","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Strokes/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Utilities/Strokes/design.mdx","extension":"mdx"}},"excerpt":"##Anatomy How to use"}},{"node":{"id":"83a8b9d5-b4aa-50a2-8276-55a33f14014d","frontmatter":{"title":"Requirements","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/requirements/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/requirements/index.mdx","extension":"mdx"}},"excerpt":"Adeo Github access Adeo Github access is required to download the Mozaic UI Kit. Join Adeo Github and follow the steps. \n You will have to…"}},{"node":{"id":"35bfedc6-9a75-5203-bde3-3d0998c9a5cf","frontmatter":{"title":"Configuration","order":3,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Configuration/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/Configuration/index.mdx","extension":"mdx"}},"excerpt":"mozaic.config.js mozaic.config.js allows you to configure and customize Mozaic. Create a mozaic.config.js file at the root of your project…"}},{"node":{"id":"c34a2d68-71e5-56af-931e-aee715e50107","frontmatter":{"title":"Foundations","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"1fd92236-6005-56a9-8b30-b814cddf2a3e","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Accordion/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Accordion/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings and the accordion scss files. Basic usage To create a basic accordion, apply the following classes on this…"}},{"node":{"id":"fc488001-20ce-5828-9f15-01d6e5992812","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Breadcrumb/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Breadcrumb/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings , the link and the breadcrumb scss files. Usage You can create breadcrumbs in the…"}},{"node":{"id":"8d163e48-cebf-571f-91af-b7f3dccc4ecf","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Buttons/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Buttons/code.mdx","extension":"mdx"}},"excerpt":"Import Basic usage To create a solid button you have one main class to apply mc-button , and wrap the text inside the button in a span.mc…"}},{"node":{"id":"6ca2e861-f635-5371-9409-5ecb34cdaaa8","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Cards/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Cards/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings and the card scss files. In addition to the basic files listed above, you must also import the _c.button…"}},{"node":{"id":"7187e06c-e9b7-51c5-981e-40b198f69144","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Dividers/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Dividers/code.mdx","extension":"mdx"}},"excerpt":"Implementing a divider in your code can be done in two ways: (1.) a simple method or (2.) a slightly more advanced method. We detail below…"}},{"node":{"id":"cc9c6035-ae61-5872-9465-42a323d5ac9c","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Flags/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Flags/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings, the font families mixin and the flag scss files. Basic usage To create a flag you have one main class to apply…"}},{"node":{"id":"b6536a48-eda6-50a5-a756-2bf5d477436d","frontmatter":{"title":"Form","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"2e241ff0-00da-5e09-90ec-e41ad8a86f95","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Hero/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Hero/code.mdx","extension":"mdx"}},"excerpt":"Import Basic usage In its simplest form, the Hero component consists of the following elements: A global wrapper with the class: mc-hero…"}},{"node":{"id":"b5515ca4-2f0a-5c15-bfbb-67e1a2fc7c17","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Layers/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Layers/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the layer , and the button scss files. Note that you can also implement in addition the scss file of the…"}},{"node":{"id":"ff668e2a-2bae-5e50-8f13-4474004c9216","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Links/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Links/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings and the links scss files. Basic usage To create a link you have one main class to apply mc-link . Variations…"}},{"node":{"id":"0b90a4fc-4a21-5652-b503-287183e52569","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Modals/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Modals/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the modal , the bodys , and the button scss files. Note that you can also implement in addition the scss…"}},{"node":{"id":"0c955eac-13d6-5b7a-b287-a5db0535c216","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Notification/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Notification/code.mdx","extension":"mdx"}},"excerpt":"Import Basic usage Wrap a title (it may be any level of heading: h1 , h2 , h3 and so on, depending on the context or SEO requirements…"}},{"node":{"id":"cf8711a9-2528-5278-955e-7c83f876c321","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Pagination/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Pagination/code.mdx","extension":"mdx"}},"excerpt":"Import Default Pagination Light Pagination Accessibility and semantic"}},{"node":{"id":"c54baf6b-ba1d-5e57-ab98-ce126ec40dbf","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/ProgressBar/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/ProgressBar/code.mdx","extension":"mdx"}},"excerpt":"Import Usage In its simplest form, the code of the ProgressBar component is structured as follows: A global div with the class: mc…"}},{"node":{"id":"78f1d1f2-5c49-5547-b0a8-35fe2f4201a6","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/RatingStars/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/RatingStars/code.mdx","extension":"mdx"}},"excerpt":"Rating stars has two main usages: (1.) when filing or amending an opinion (2.) when displaying the overall score on a product sheet. Filing…"}},{"node":{"id":"d2c43d44-7bbc-522a-b04f-0255190f3713","frontmatter":{"title":"Code","order":2,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tabs/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Tabs/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings and the tabs scss files. Basic usage To create basic tabs, apply the following classes: mc-tabs on a div…"}},{"node":{"id":"c8bf1f48-0c79-5c74-aebf-673f730873b8","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Tag/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Tag/code.mdx","extension":"mdx"}},"excerpt":"Import Available types of tags text link selectable removable Each tag type requires a different dom structure and classes names .\nEach tag…"}},{"node":{"id":"6b5743dd-718e-5f2e-a469-f0e968a29e0d","frontmatter":{"title":"Code","order":2,"links":null,"status":{"sketch":"bêta","scss":"bêta","figma":null},"description":null},"fields":{"slug":"/Components/Tooltip/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Tooltip/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the tooltip scss files. Basic usage To create a tooltip, apply the following…"}},{"node":{"id":"8b4c3837-f684-5a4d-9746-669487a58808","frontmatter":{"title":"Designers","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"1cf25163-1205-576e-bdb7-77b0438bc434","frontmatter":{"title":"Design","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Colors/design/","fileName":{"name":"design","base":"design.mdx","relativePath":"docs/Foundations/Colors/design.mdx","extension":"mdx"}},"excerpt":"Colors are avaible in the sketch file \" AA Colors \". All the colors and their variations are available as layer styles , and they are…"}},{"node":{"id":"7d66be46-64be-5c6f-ac28-11aa0ac790d3","frontmatter":{"title":"Monochrom icons","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Icons/catalog/","fileName":{"name":"catalog","base":"catalog.mdx","relativePath":"docs/Foundations/Icons/catalog.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"799ac6fb-58e2-5cd1-b102-c079b01b7396","frontmatter":{"title":"Designer guide","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"82c03682-aae3-54e2-ad75-0bf7906ef69d","frontmatter":{"title":"Roadmap","order":2,"links":null,"status":null,"description":"Discover what we are working on right now"},"fields":{"slug":"/Updates/Roadmap/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Updates/Roadmap/index.mdx","extension":"mdx"}},"excerpt":"Q1 2021 (from 01/01/2021 to 30/04/2020) Sprint 14 (Week 11 to 13) Chore: Spike on web component using Svelte Update dependencies (Postcss…"}},{"node":{"id":"f9325c4c-f12d-534b-8f2d-51af81adcf2a","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Checkbox/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Checkbox/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the checkbox scss files. Basic usage To use the checkbox pattern you have 3 main…"}},{"node":{"id":"e2515221-b453-505b-9016-e1242d65f5f3","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Datepicker/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Datepicker/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the text-input and the field scss files. Usage The easiest way to implement a date picker on a form…"}},{"node":{"id":"3e92013e-84f7-59bc-ac1b-2eebf4878a4c","frontmatter":{"title":"Datepicker","order":2,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Date picker allows the user to directly enter a specific date or choose a date from a calendar layout in a form element."},"fields":{"slug":"/Components/Form/Datepicker/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Datepicker/index.mdx","extension":"mdx"}},"excerpt":"Date picker allows the user to directly enter a specific date or choose a date from a calendar layout in a form element. Behaviour The date…"}},{"node":{"id":"2ab9a76a-3c54-58c9-a187-3341df2e7eab","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Field/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Field/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings, the text-input and the fields scss files. Basic usage To create a field you have three main class to apply: mc…"}},{"node":{"id":"af538ae6-99cd-58e8-9f99-0f2dae6db51f","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/FileUploader/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/FileUploader/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the file uploader scss files. Basic usage Natively, to upload files we use an…"}},{"node":{"id":"1923c67d-ecaa-5ad7-abda-ac76e7fca95b","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/PhoneNumberInput/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/PhoneNumberInput/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the text-input and the phone-number scss files. Usage A phone number input is composed of 2 main zones: A…"}},{"node":{"id":"2da71e3f-ed55-5110-b3eb-741ce64575c5","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/QuantitySelector/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/QuantitySelector/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the text-input , the button and the quantity-selector scss files. Usage Variations Available sizes You…"}},{"node":{"id":"41d99c4d-1220-5419-a07a-49de3ba67b23","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Radio/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Radio/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the radio scss files. Basic usage To create a classic radio you have 3 main css…"}},{"node":{"id":"d909db2d-1aa5-5a9a-9a3c-5cb038f64992","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Select/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Select/code.mdx","extension":"mdx"}},"excerpt":"Use in form context Import Import the settings , the select and the fields scss files. Note that the import order is important to get…"}},{"node":{"id":"cd64fdb4-6d90-59fa-b5df-a88e9e568c16","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextArea/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/TextArea/code.mdx","extension":"mdx"}},"excerpt":"Use in a form context Import Import the settings , the text area and the fields scss files. Note that the import order is important to…"}},{"node":{"id":"b9e35bb5-6942-534e-8085-fa1f6bbf3283","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/TextInput/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/TextInput/code.mdx","extension":"mdx"}},"excerpt":"Import Import the settings , the text-input and the field scss files. Usage Supported input types text email date password number tel…"}},{"node":{"id":"ff03c554-cc88-5b78-a54d-e789943f72b7","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Components/Form/Toggle/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Components/Form/Toggle/code.mdx","extension":"mdx"}},"excerpt":"Basic implementation Import Import the settings and the toggle scss files. Basic usage To create a basic toggle, wrap a input[type…"}},{"node":{"id":"0da4bc35-7e21-5378-b3c2-ed5d77cfb079","frontmatter":{"title":"Naming convention","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/NamingConvention/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/NamingConvention/index.mdx","extension":"mdx"}},"excerpt":"Mozaic is a product used by a lot of people on different teams, business units and even timezones. To have a minimum of organization, we…"}},{"node":{"id":"976aa49e-6868-5ece-96ec-187a72a42235","frontmatter":{"title":"CSS conventions","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/CSSConventions/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/CSSConventions/index.mdx","extension":"mdx"}},"excerpt":"Concepts ITCSS Introduction ITCSS stand for Inverted Triangle architecture for CSS , it is a way to better manage specificity and to…"}},{"node":{"id":"bda47506-4ba8-5110-8170-92f3ad2190ce","frontmatter":{"title":"Glossary","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Principles/Glossary/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Principles/Glossary/index.mdx","extension":"mdx"}},"excerpt":"This is a list of terms we use in our routine with Mozaic. We are adding these terms and definitions just in case you are wondering \"What…"}},{"node":{"id":"227af0c9-412e-5113-9058-75239fc3423c","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/Container/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Layout/Container/code.mdx","extension":"mdx"}},"excerpt":"Import Import the container scss files. Usage Default container To use a default container in your code, simply add the ml-container…"}},{"node":{"id":"d5b2c20b-e8d8-5e86-b93d-0d7200491d83","frontmatter":{"title":"Grid system","order":2,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A grid is used to create a **more structured and more harmonious design.** It’s the frame of your page, you build the layout by placing blocks of contents (text, images,…) on a certain number of columns."},"fields":{"slug":"/Foundations/Layout/Grid/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Layout/Grid/index.mdx","extension":"mdx"}},"excerpt":"A grid is used to create a structured and harmonious design for every breakpoints. It is the frame of your page that allows you to build…"}},{"node":{"id":"2b673dad-cfdc-56d5-aca9-b7c28294c57c","frontmatter":{"title":"Cheat Sheet","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Spacing/MagicUnit/sheatsheat/","fileName":{"name":"sheatsheat","base":"sheatsheat.mdx","relativePath":"docs/Foundations/Spacing/MagicUnit/sheatsheat.mdx","extension":"mdx"}},"excerpt":"Pixel value Variable name magic-unit-rem function magic-unit function 4px $mu025 magic-unit-rem(0.25) magic-unit(0.25) 8px $mu050 magic-unit…"}},{"node":{"id":"8eb92b6b-0230-54b5-8ec6-be68a6760fd9","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Spacing/MarginAndPaddings/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Spacing/MarginAndPaddings/code.mdx","extension":"mdx"}},"excerpt":"The margins and paddings utility classes You can add to your bundle the margins or paggings utility classes like so : Please considere that…"}},{"node":{"id":"5ebbae41-20a8-54ce-b62c-30685472bf4a","frontmatter":{"title":"Margins and Paddings","order":2,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":"About margins and paddings"},"fields":{"slug":"/Foundations/Spacing/MarginAndPaddings/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Spacing/MarginAndPaddings/index.mdx","extension":"mdx"}},"excerpt":"Removing border sizes from vertical paddings For exemple, take a button. If your button have a 2x magic-unit height (32px)\nyou have : 1px…"}},{"node":{"id":"f6560286-7947-5d02-851f-113d124a7db4","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/BodyStyles/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/BodyStyles/code.mdx","extension":"mdx"}},"excerpt":"Base text classes Base typography classes does not apply any external margins nor font-colors , because they are contextuals. This mean…"}},{"node":{"id":"dc9964d7-4619-5cca-b170-38ce3cdf0c22","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/HeadingStyles/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/HeadingStyles/code.mdx","extension":"mdx"}},"excerpt":"Import Headings Usage You need to apply at least two classes , the block name and a size. Variations Sizes There is three Headings sizes…"}},{"node":{"id":"e6ce4f28-06d1-53ad-ac2b-527c9fcee11a","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/HeroStyles/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/HeroStyles/code.mdx","extension":"mdx"}},"excerpt":"Base text classes Base typography classes does not apply any external margins nor font-colors , because they are contextuals. This mean…"}},{"node":{"id":"242fe7e4-5337-500a-9966-d3af6ac34ea8","frontmatter":{"title":"Font scales","order":2,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":null},"fields":{"slug":"/Foundations/Typography/ScaleAndSizes/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/ScaleAndSizes/index.mdx","extension":"mdx"}},"excerpt":"General fonts sizes and their usage : Id Value Mobile usage Desktop usage Token 01 11px (0.6815mu) Legal contents / captions Legal contents…"}},{"node":{"id":"38d17385-5771-5dbe-874c-e2578dd84cf5","frontmatter":{"title":"Border radius","order":2,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Utilities/BorderRadius/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/BorderRadius/index.mdx","extension":"mdx"}},"excerpt":"Preview Variations Border-radius is available in 3 sizes : small , medium , large Small Medium Large"}},{"node":{"id":"df58b61a-d536-5373-8c8b-05a1a37d464b","frontmatter":{"title":"Specs","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/BorderRadius/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Foundations/Utilities/BorderRadius/specs.mdx","extension":"mdx"}},"excerpt":"Size Size name Width Token Small 2px radius.s Medium 4px radius.m Large 6px radius.l"}},{"node":{"id":"8a0c76a0-8f72-5dc9-b39e-b86e7bda783c","frontmatter":{"title":"Code","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Images/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Utilities/Images/code.mdx","extension":"mdx"}},"excerpt":"The implementation of Mozaic ratios in your code can be done in two ways: By using the set-ratio mixin By using ratio helpers The…"}},{"node":{"id":"92979f2f-85d5-5ff6-a2e3-0f0712b00200","frontmatter":{"title":"Specs","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Shadows/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Foundations/Utilities/Shadows/specs.mdx","extension":"mdx"}},"excerpt":"Anatomy Properties Size Small Medium Large X position shadow.s.x ( 0px ) shadow.m.x ( 0px ) shadow.l.x ( 0px ) Y position shadow.s.y…"}},{"node":{"id":"be0c91d0-9ccf-517b-8a75-a46910230bc9","frontmatter":{"title":"Specs","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Strokes/specs/","fileName":{"name":"specs","base":"specs.mdx","relativePath":"docs/Foundations/Utilities/Strokes/specs.mdx","extension":"mdx"}},"excerpt":"Properties Size Size name Width Token Small 1px border.s Medium 2px border.m Large 3px border.l"}},{"node":{"id":"8ec03d35-9823-57d0-b158-ad0956ee609f","frontmatter":{"title":"What's included ?","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/whatsIncluded/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/whatsIncluded/index.mdx","extension":"mdx"}},"excerpt":"The UI Kit is a set of sketch files to be used as libraries. It contains all core styles as well as a collection of reusable components…"}},{"node":{"id":"f8dd6d60-59ed-5b4d-a632-f68de147b60a","frontmatter":{"title":"Adeo preset","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/CustomizeTokens/adeoPreset/","fileName":{"name":"adeoPreset","base":"adeoPreset.mdx","relativePath":"docs/GetStarted/Developers/CustomizeTokens/adeoPreset.mdx","extension":"mdx"}},"excerpt":"Mozaic is first thought to answer to LEROY MERLIN's brand guidelines but customisation is also allowed. However, we also offer you the…"}},{"node":{"id":"b1f47630-6132-526a-a2f6-da7554a91af9","frontmatter":{"title":"PostCSS","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/postcss/","fileName":{"name":"postcss","base":"postcss.mdx","relativePath":"docs/GetStarted/Developers/Installation/postcss.mdx","extension":"mdx"}},"excerpt":"Using postCSS with the following configuration is mandatory for us to ensure Mozaic to work as advertised . Not following these…"}},{"node":{"id":"ecfdcc93-6a64-5e12-9a99-f697f277170c","frontmatter":{"title":"What's included ?","order":2,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/whatsincluded/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/whatsincluded/index.mdx","extension":"mdx"}},"excerpt":"Styles @mozaic-ds/styles/** All the CSS and SCSS files that constitute the Mozaic SCSS framework. Some variables are generated into and…"}},{"node":{"id":"a24b4c9e-492c-578f-9536-36ea34689d2e","frontmatter":{"title":"Get started","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"573d6b3d-34f9-5829-b83a-d74ec1cc6363","frontmatter":{"title":"Accordions","order":1,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-maccordion--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/mozaic-freemarker/pages/3_Components/accordion/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Accordions allow you to show or hide related content under vertically stacked lists"},"fields":{"slug":"/Components/Accordion/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Accordion/index.mdx","extension":"mdx"}},"excerpt":"Accordions allow you to show or hide related content under vertically stacked lists. Please use accordions for complementary content when…"}},{"node":{"id":"1c154666-3ad0-5a5b-99a3-2ac495228468","frontmatter":{"title":"Breadcrumb","order":1,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mbreadcrumb--try-it"},"freemarker":null},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Breadcrumb is a secondary navigation allowing the user to understand where the current page is located in the website architecture and to go back to previous steps or levels when needed."},"fields":{"slug":"/Components/Breadcrumb/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Breadcrumb/index.mdx","extension":"mdx"}},"excerpt":"Breadcrumb is a secondary navigation allowing the user to understand where the current page is located in the website architecture and to go…"}},{"node":{"id":"b85ebd6b-d81a-518d-8223-501e3188f6f7","frontmatter":{"title":"Buttons","order":1,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mbutton--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/buttons/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Buttons are used to trigger actions. Their appearance is depending on the type of action required from the user, or the context"},"fields":{"slug":"/Components/Buttons/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Buttons/index.mdx","extension":"mdx"}},"excerpt":"Buttons are used to trigger actions . Their appearance is depending on the type of action required from the user, or the context…"}},{"node":{"id":"7bf03bb5-c636-5f8b-bc6a-69765d43cc7a","frontmatter":{"title":"Cards","order":1,"links":null,"status":{"sketch":"ready","scss":"ready","figma":null},"description":"A card is a graphic element that structures a group of related informations that must be understood on its own. It visually looks like a playing card."},"fields":{"slug":"/Components/Cards/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Cards/index.mdx","extension":"mdx"}},"excerpt":"A card is a graphic element that structures a group of related informations that must be understood on its own. It visually looks like a…"}},{"node":{"id":"febfc47c-9c33-5bae-b910-36a661a56da6","frontmatter":{"title":"Dividers","order":1,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Dividers are thin lines used to insert breaks into your layouts and group similar content."},"fields":{"slug":"/Components/Dividers/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Dividers/index.mdx","extension":"mdx"}},"excerpt":"Dividers are thin lines used to insert breaks into your layouts and group similar content. Variations Default This is the version you should…"}},{"node":{"id":"4a5f17a1-aed0-5a40-b800-918a69dd08f5","frontmatter":{"title":"Hero","order":1,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"A hero is an element that you can use on the top of your pages to add a visual or draw the attention of the user on a specific message."},"fields":{"slug":"/Components/Hero/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Hero/index.mdx","extension":"mdx"}},"excerpt":"A hero is an element that you can use on the top of your pages to add a visual or draw the attention of the user on a specific message…"}},{"node":{"id":"f381e0b7-1872-5eb5-acf8-7faf73814ad9","frontmatter":{"title":"Principles","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Principles/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Principles/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"679707cd-81ad-525c-9efd-8f6cc7c3b1f9","frontmatter":{"title":"Changelog","order":1,"links":null,"status":null,"description":"The changelog that contain all changes for every Mozaic releases"},"fields":{"slug":"/Updates/Changelog/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Updates/Changelog/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"d99e7dae-d00f-5069-b52c-dd966f1c4c0b","frontmatter":{"title":"Patterns Status","order":1,"links":null,"status":null,"description":"The right place to check if the component you want to use is in progress, in bêta version, or stable"},"fields":{"slug":"/Updates/PatternsStatus/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Updates/PatternsStatus/index.mdx","extension":"mdx"}},"excerpt":""}},{"node":{"id":"44aefb69-4494-51cf-ba5a-a70d2202e65c","frontmatter":{"title":"Checkbox","order":1,"links":{"vue":{"status":"ready","link":"https://adeo.github.io/mozaic-vue/?path=/story/components-mcheckbox--try-it"},"freemarker":{"status":"ready","link":"https://adeo.github.io/integration-web-core--socle/pages/Components/form/checkbox/"}},"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":"Checkboxes are used to select one or multiple options in a list. They usually find their place in forms and are also used to accept some mentions"},"fields":{"slug":"/Components/Form/Checkbox/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Components/Form/Checkbox/index.mdx","extension":"mdx"}},"excerpt":"Checkboxes are used to select one or multiple options in a list . They usually find their place in forms and are also used to accept some…"}},{"node":{"id":"2b013428-8ecb-56d2-9de0-539fd20a8d77","frontmatter":{"title":"Designer requirements","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Designers/DesignRequirements/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Designers/DesignRequirements/index.mdx","extension":"mdx"}},"excerpt":"All you need is Access to the Mozaic github repo Sketch 59 For designers from LMFR you should ahev an access to Abstract under the [DS…"}},{"node":{"id":"51eb6a1e-ab13-5b27-bab1-d090056ad405","frontmatter":{"title":"Install for development","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Developers/InstallForDev/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Developers/InstallForDev/index.mdx","extension":"mdx"}},"excerpt":"Requirements : node v12+ yarn To install node: Please follow this guide To install yarn : npm i -g yarn Development : Note about the…"}},{"node":{"id":"f727bf4c-43ad-5e59-9c51-9d4cc6a09dd0","frontmatter":{"title":"Contribution journey","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Principles/ContributionJourney/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Principles/ContributionJourney/index.mdx","extension":"mdx"}},"excerpt":"Mozaic is a design system that wants to make designers and developers collaboration easy. By contributing to Mozaic, you become an actor of…"}},{"node":{"id":"9375fc8a-1fdb-5080-9bbc-65a4c8135647","frontmatter":{"title":"Mozaic philosophy","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Contributing/Principles/Philosophy/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Contributing/Principles/Philosophy/index.mdx","extension":"mdx"}},"excerpt":"Team work and consistency Designers and developers should work hand in hand to deliver consistent elements . You should choose the way you…"}},{"node":{"id":"af5e3be1-5cb1-5a2e-b943-5503539fc869","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/Grid/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Layout/Grid/code.mdx","extension":"mdx"}},"excerpt":"Flexy is a grid system and a general purpose layout tool based on Flex. It can be used to build page level layout as well as component level…"}},{"node":{"id":"e4bbc320-7c71-588e-88f8-eb96d590b1e7","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Layout/Responsive/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Layout/Responsive/code.mdx","extension":"mdx"}},"excerpt":"Using MQpacker to group média queries MQpacker is a tool to regroup media queries.\nIt allow you to write media queries right next or inside…"}},{"node":{"id":"1bea78ea-a64a-5a1a-97f9-6b82d6518d87","frontmatter":{"title":"Screens sizes and responsive","order":1,"links":null,"status":{"sketch":null,"scss":"stable","figma":null},"description":null},"fields":{"slug":"/Foundations/Layout/Responsive/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Layout/Responsive/index.mdx","extension":"mdx"}},"excerpt":"We use a mobile-first approach to support all screens sizes. Major breakpoints Major breakpoints are expressed in tee-shirt sizes letters…"}},{"node":{"id":"380c20d4-e631-57bb-90f7-10de0389ee1d","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Spacing/MagicUnit/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Spacing/MagicUnit/code.mdx","extension":"mdx"}},"excerpt":"Using magic unit in SCSS The magic unit is a scss variable generated from tokens: $magic-unit . This variable is a unitless value equal…"}},{"node":{"id":"8f2b0b65-02f5-520b-90f3-caaa01ceaec8","frontmatter":{"title":"Magic Unit","order":1,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Spacing/MagicUnit/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Spacing/MagicUnit/index.mdx","extension":"mdx"}},"excerpt":"The magic unit is a base unit for any element or property that require a defined dimension . It is equal to 16px but is expressed in rem…"}},{"node":{"id":"69f809b4-8ec6-5be4-80d8-62f5de3b6ae9","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/Colors/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/Colors/code.mdx","extension":"mdx"}},"excerpt":"the font-color mixin : Use the font-color() mixin to set an othorized text color to an element. Font color tokens and mixin recap: SCSS…"}},{"node":{"id":"3ca31500-4c16-5178-8a03-bdae1ceabbc2","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/FontFamilies/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/FontFamilies/code.mdx","extension":"mdx"}},"excerpt":"Import In order to use the font provided in Mozaic in your code, you have to start by importing the _all-settings.scss file in the…"}},{"node":{"id":"f4b45aa5-ad22-5f0b-85a4-20c92b04556f","frontmatter":{"title":"Font Families","order":1,"links":null,"status":{"sketch":null,"scss":"ready","figma":null},"description":null},"fields":{"slug":"/Foundations/Typography/FontFamilies/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Typography/FontFamilies/index.mdx","extension":"mdx"}},"excerpt":"Families"}},{"node":{"id":"e9c92e84-c204-5c7f-81a7-d557d555c2ba","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Typography/ScaleAndSizes/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Typography/ScaleAndSizes/code.mdx","extension":"mdx"}},"excerpt":"The font-scale mixin : The font scale mixin returns a font-size and a line-height for a given font-size token Params : $size : required…"}},{"node":{"id":"9be5d0ba-cb05-556b-9a7d-a77a74fcc457","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/BorderRadius/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Utilities/BorderRadius/code.mdx","extension":"mdx"}},"excerpt":"Import In order to use the border-radius values provided by Mozaic, you have to import the _all-settings.scss file: Basic usage Once you…"}},{"node":{"id":"fb7366cb-6bd2-557f-8b75-52f4e3c078a1","frontmatter":{"title":"Images aspect ratios","order":1,"links":null,"status":{"sketch":"ready","scss":"ready","figma":"ready"},"description":null},"fields":{"slug":"/Foundations/Utilities/Images/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/Foundations/Utilities/Images/index.mdx","extension":"mdx"}},"excerpt":"The aspect ratio of an image is the proportional relationship between its width and its height . Aspect ratios are commonly written as a…"}},{"node":{"id":"3dfc2e32-3c64-5351-8919-f424f4eccf65","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Shadows/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Utilities/Shadows/code.mdx","extension":"mdx"}},"excerpt":"Import To get the set-box-shadow() mixin, you need to import _all-settings.scss . Basic usage"}},{"node":{"id":"a9290203-b59e-53e3-a109-0522028fa9b6","frontmatter":{"title":"Code","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/Foundations/Utilities/Strokes/code/","fileName":{"name":"code","base":"code.mdx","relativePath":"docs/Foundations/Utilities/Strokes/code.mdx","extension":"mdx"}},"excerpt":"Import To get the get-border () function you need to import _all-settings.scss . Basic usage We provide a unique function to get every…"}},{"node":{"id":"0256edde-c003-5740-bc56-359bd6377fad","frontmatter":{"title":"About the system","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Designers/aboutTheSystem/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Designers/aboutTheSystem/index.mdx","extension":"mdx"}},"excerpt":"As designers , Mozaic Design System provides you with a lot of ready to use patterns . What is a pattern? A pattern is a repeating or…"}},{"node":{"id":"49032f68-b3ae-59b6-b40a-61de680900b5","frontmatter":{"title":"Installation","order":1,"links":null,"status":null,"description":null},"fields":{"slug":"/GetStarted/Developers/Installation/","fileName":{"name":"index","base":"index.mdx","relativePath":"docs/GetStarted/Developers/Installation/index.mdx","extension":"mdx"}},"excerpt":"Requirements: Installing Mozaic require node v12 + As for now, @mozaic-ds/** repositories are public registries on NPM.\nYou need to be…"}}]}},"pageContext":{"id":"47aad200-99b0-5ad0-b658-2dafb075f19c","slug":"/Contributing/Developers/GitConventions/"}},"staticQueryHashes":["1091566128","1481403750","2242190743","3105336109","3266825286","3649515864","3968426267","4075210883","426963092"]}