Merge branch 'master' into pladaria/WEB-2115_custom-identifier

.storybook/css/vivo-font.css

@@ -19,7 +19,7 @@
     font-family: 'Vivo Type';
     font-style: normal;
     font-weight: 500;
-    src: url('./fonts/vivo-type-bold.woff2') format('woff2');
+    src: url('./fonts/vivo-type-medium.woff2') format('woff2');
 }
 
 /* Bold */

CHANGELOG.md

@@ -1,3 +1,31 @@
+## [16.6.1](https://github.com/Telefonica/mistica-web/compare/v16.6.0...v16.6.1) (2024-11-26)
+
+
+### Bug Fixes
+
+* **Header, Cards, Hero:** fix spacings logic ([#1298](https://github.com/Telefonica/mistica-web/issues/1298)) ([327ac5f](https://github.com/Telefonica/mistica-web/commit/327ac5fe90b5bb3dc2a23af5bb890368439d1d77))
+
+# [16.6.0](https://github.com/Telefonica/mistica-web/compare/v16.5.0...v16.6.0) (2024-11-26)
+
+
+### Features
+
+* **data-testid:** support for Callout, HighlightedCard, Hero, EmptyState and Headers ([#1296](https://github.com/Telefonica/mistica-web/issues/1296)) ([15b798c](https://github.com/Telefonica/mistica-web/commit/15b798c91a4ad898d95036c8dd54e4a41997f3c1))
+* **Header, Cards, Hero, CoverHero:** improve a11y ([#1292](https://github.com/Telefonica/mistica-web/issues/1292)) ([cdcf2fc](https://github.com/Telefonica/mistica-web/commit/cdcf2fcafcd4df435f38927cbbc65d52c9b29590))
+* **InfoSheet:** update styles and allow adding a button to the content ([#1294](https://github.com/Telefonica/mistica-web/issues/1294)) ([c4a0749](https://github.com/Telefonica/mistica-web/commit/c4a0749d816702644020112fd00d6d6b2a61ae39))
+* **Meter:** New component ([#1281](https://github.com/Telefonica/mistica-web/issues/1281)) ([1a061d8](https://github.com/Telefonica/mistica-web/commit/1a061d8b645a418930ae0a8921db1900b8e084ce))
+* **Sheet:** allow closing the sheet with the keyboard or a screen reader ([#1293](https://github.com/Telefonica/mistica-web/issues/1293)) ([42099fb](https://github.com/Telefonica/mistica-web/commit/42099fb17e1f5682f196ee5390ceb386616a2d59))
+
+# [16.5.0](https://github.com/Telefonica/mistica-web/compare/v16.4.0...v16.5.0) (2024-11-18)
+
+
+### Features
+
+* **Accordion, BoxedAccordion:** allow detail and right content in header ([#1290](https://github.com/Telefonica/mistica-web/issues/1290)) ([087c486](https://github.com/Telefonica/mistica-web/commit/087c4866757733339e51ed9de54b844fecf7aed5))
+* **HorizontalMosaic, VerticalMosaic:** allow passing gridMode information to each item ([#1289](https://github.com/Telefonica/mistica-web/issues/1289)) ([bb8852c](https://github.com/Telefonica/mistica-web/commit/bb8852c439cb33b2ae7c877a2ac32760ec29180c))
+* **MainNavigationBar:** add menu ([#1280](https://github.com/Telefonica/mistica-web/issues/1280)) ([3973ead](https://github.com/Telefonica/mistica-web/commit/3973ead1ebef7f613b1aebd3c18306fc88999de0))
+* **vivo-type:** added medium weight ([#1291](https://github.com/Telefonica/mistica-web/issues/1291)) ([8a38d2c](https://github.com/Telefonica/mistica-web/commit/8a38d2c1c16a17b931f96c75b400d7ba8c036a93))
+
 # [16.4.0](https://github.com/Telefonica/mistica-web/compare/v16.3.1...v16.4.0) (2024-11-04)
 
 

css/vivo-new.css

@@ -200,13 +200,13 @@
     --mistica-line-height-4: 1.5rem;
     --mistica-font-size-5: 1.25rem;
     --mistica-line-height-5: 1.5rem;
-    --mistica-font-weight-5: 400;
+    --mistica-font-weight-5: 500;
     --mistica-font-size-6: 1.5rem;
     --mistica-line-height-6: 2rem;
-    --mistica-font-weight-6: 400;
+    --mistica-font-weight-6: 500;
     --mistica-font-size-7: 1.75rem;
     --mistica-line-height-7: 2rem;
-    --mistica-font-weight-7: 400;
+    --mistica-font-weight-7: 500;
     --mistica-font-size-8: 2rem;
     --mistica-line-height-8: 2.5rem;
     --mistica-font-weight-8: 400;
@@ -218,18 +218,18 @@
     --mistica-font-weight-10: 400;
     --mistica-font-size-cardTitle: 1.25rem;
     --mistica-line-height-cardTitle: 1.5rem;
-    --mistica-font-weight-cardTitle: 400;
-    --mistica-font-weight-button: 400;
+    --mistica-font-weight-cardTitle: 500;
+    --mistica-font-weight-button: 500;
     --mistica-font-size-tabsLabel: 1.125rem;
     --mistica-line-height-tabsLabel: 1.5rem;
-    --mistica-font-weight-tabsLabel: 400;
-    --mistica-font-weight-link: 400;
-    --mistica-font-weight-title1: 400;
-    --mistica-font-weight-title2: 400;
+    --mistica-font-weight-tabsLabel: 500;
+    --mistica-font-weight-link: 500;
+    --mistica-font-weight-title1: 500;
+    --mistica-font-weight-title2: 500;
     --mistica-font-size-title3: 1.125rem;
     --mistica-line-height-title3: 1.5rem;
-    --mistica-font-weight-title3: 400;
-    --mistica-font-weight-indicator: 400;
+    --mistica-font-weight-title3: 500;
+    --mistica-font-weight-indicator: 500;
     --mistica-font-weight-navigationBar: 400;
 }
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telefonica/mistica",
-    "version": "16.4.0",
+    "version": "16.6.1",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -151,6 +151,7 @@
         "@vanilla-extract/dynamic": "^2.1.1",
         "@vanilla-extract/sprinkles": "^1.6.2",
         "classnames": "^2.3.1",
+        "cubic-bezier": "^0.1.2",
         "lottie-react": "^2.4.0",
         "moment": "^2.29.1",
         "react-autosuggest": "^10.1.0",

packages/generate-design-tokens/.gitignore

@@ -0,0 +1 @@
+.yarn

packages/generate-design-tokens/index.js

@@ -3,6 +3,7 @@ import path from 'path';
 import url from 'url';
 // eslint-disable-next-line import/extensions
 import {generateSkinCssSrc, buildRadius, generateCommonCssSrc} from './css-generator.js';
+import prettier from 'prettier';
 
 /*
 By default, this script will look for the design tokens inside .github folder but you may want to clone the mistica-design repo elsewhere.
@@ -16,12 +17,15 @@ To run this script locally using a custom path for the tokens, you can do the fo
     DESIGN_TOKENS_FOLDER="/path/to/mistica-design/tokens" node index.js
 */
 
-const DESIGN_TOKENS_FOLDER = process.env.DESIGN_TOKENS_FOLDER || '../../../mistica-design/tokens/';
-
 // in node >= 20 we could use import.meta.dirname instead
 // @ts-ignore
 const currentDir = url.fileURLToPath(new URL('.', import.meta.url));
 
+const DESIGN_TOKENS_FOLDER =
+    process.env.DESIGN_TOKENS_FOLDER || path.join(currentDir, '../../.github/mistica-design/tokens/');
+
+console.log('Using design tokens from:', DESIGN_TOKENS_FOLDER);
+
 const SKINS_FOLDER = path.join(currentDir, '..', '..', 'src', 'skins');
 const CSS_FOLDER = path.join(currentDir, '..', '..', 'css');
 
@@ -31,6 +35,23 @@ const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
 const toCamelCase = (str) => str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
 const toPascalCase = (str) => capitalize(toCamelCase(str));
 
+const jsonSort = (obj) => {
+    if (Array.isArray(obj)) {
+        return obj.map(jsonSort);
+    }
+
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    return Object.keys(obj)
+        .sort((a, b) => a.localeCompare(b, undefined, {numeric: true, sensitivity: 'base'}))
+        .reduce((acc, key) => {
+            acc[key] = jsonSort(obj[key]);
+            return acc;
+        }, {});
+};
+
 /**
  * @param {{angle: number, colors: Array<{
  *     value: string,
@@ -123,7 +144,7 @@ export const get${toPascalCase(skinName)}Skin: GetKnownSkin = () => {
                 )
                 .join(',')}
         },
-        textPresets: ${JSON.stringify(textTokens)},
+        textPresets: ${JSON.stringify(jsonSort(textTokens))},
     };
     return skin;
 };
@@ -142,31 +163,43 @@ export type Colors = {
 };`;
 };
 
-const generateSkinFiles = () => {
+const formatCss = async (source) =>
+    prettier.format(source, {
+        ...(await prettier.resolveConfig('.')),
+        parser: 'css',
+    });
+
+const formatTs = async (source) =>
+    prettier.format(source, {
+        ...(await prettier.resolveConfig('.')),
+        parser: 'typescript',
+    });
+
+const generateSkinFiles = async () => {
     let anyGeneratedSkin;
 
-    KNOWN_SKINS.forEach((skinName) => {
+    for (const skinName of KNOWN_SKINS) {
         console.log('Generating tokens for skin', skinName);
 
         if (!fs.existsSync(path.join(DESIGN_TOKENS_FOLDER, `${skinName}.json`))) {
             console.error(`Missing ${skinName}.json file`);
             return;
         }
 
-        const skinSrc = generateSkinSrc(skinName);
+        const skinSrc = await formatTs(generateSkinSrc(skinName));
         fs.writeFileSync(path.join(SKINS_FOLDER, `${skinName}.tsx`), skinSrc);
 
-        const skinCssSrc = generateSkinCssSrc(skinName, DESIGN_TOKENS_FOLDER);
+        const skinCssSrc = await formatCss(generateSkinCssSrc(skinName, DESIGN_TOKENS_FOLDER));
         fs.writeFileSync(path.join(CSS_FOLDER, `${skinName}.css`), skinCssSrc);
 
         anyGeneratedSkin = skinName;
-    });
+    }
 
     if (anyGeneratedSkin) {
-        const typesSrc = generateColorTypesSrc(anyGeneratedSkin);
+        const typesSrc = await formatTs(generateColorTypesSrc(anyGeneratedSkin));
         fs.writeFileSync(path.join(SKINS_FOLDER, 'types', 'colors.tsx'), typesSrc);
 
-        const commonCssSrc = generateCommonCssSrc(DESIGN_TOKENS_FOLDER);
+        const commonCssSrc = await formatCss(generateCommonCssSrc(DESIGN_TOKENS_FOLDER));
         fs.writeFileSync(path.join(CSS_FOLDER, `mistica-common.css`), commonCssSrc);
     }
 };

packages/generate-design-tokens/package.json

@@ -1,5 +1,10 @@
 {
     "name": "generate-design-tokens",
     "type": "module",
-    "packageManager": "[email protected]"
+    "packageManager": "[email protected]",
+    "dependencies": {
+        "@telefonica/prettier-config": "^2.0.0",
+        "prettier": "^3.3.3"
+    },
+    "prettier": "@telefonica/prettier-config"
 }

packages/generate-design-tokens/yarn.lock

@@ -3,9 +3,31 @@
 
 __metadata:
   version: 6
+  cacheKey: 8
+
+"@telefonica/prettier-config@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@telefonica/prettier-config@npm:2.0.0"
+  peerDependencies:
+    prettier: ^3.0.0
+  checksum: b7fe4ee936195f26b1b1977236b97ec241afa01b12d72d801272788bf9699cd4b9a6e3feccde86bd88b311335f0cfd39ec0b53a9bb44dacf5c01b5627729f174
+  languageName: node
+  linkType: hard
 
 "generate-design-tokens@workspace:.":
   version: 0.0.0-use.local
   resolution: "generate-design-tokens@workspace:."
+  dependencies:
+    "@telefonica/prettier-config": ^2.0.0
+    prettier: ^3.3.3
   languageName: unknown
   linkType: soft
+
+"prettier@npm:^3.3.3":
+  version: 3.3.3
+  resolution: "prettier@npm:3.3.3"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e
+  languageName: node
+  linkType: hard