feat(Icons): use icon keywords from mistica design in catalog story (#…

…914)

* checkout icon keywords from mistica design

* fix bugs and update story/screenshot test

* fix pascal case

packages/import-mistica-icons/index.js

@@ -174,8 +174,12 @@ const createIconComponentSource = async (name, componentName, svgIconsInfo) => {
      * To update, execute "yarn start" inside "import-mistica-icons"
      */
 
-    import * as React from 'react';
-    ${hasVariants ? "import {useTheme} from '../../hooks';" : ''}
+    import * as React from 'react';${
+        hasVariants
+            ? `
+    import {useTheme} from '../../hooks';`
+            : ''
+    }
     import {useIsInverseVariant} from '../../theme-variant-context';
     import {vars} from '../../skins/skin-contract.css';
 
@@ -194,6 +198,35 @@ const createIconComponentSource = async (name, componentName, svgIconsInfo) => {
     return format(source);
 };
 
+/**
+ * @typedef {{[key: string]: Array<string>}} IconKeywordsInfo
+ */
+const createAllIconKeywordsSource = () => {
+    const keywordsPath = join(PATH_MISTICA_ICONS_REPO, 'icons', 'icons-keywords.json');
+    const keywordsSource = fs.readFileSync(keywordsPath, 'utf8');
+    /** @type {IconKeywordsInfo} */
+    const keywordsMap = JSON.parse(keywordsSource);
+
+    // map icon names to kebab case
+    const result = {};
+    for (const [icon, keywords] of Object.entries(keywordsMap)) {
+        result[kebabCase(icon)] = keywords;
+    }
+
+    const source = `/*
+     * This file was autogenerated. Don't edit this file!
+     *
+     * To update, execute "yarn start" inside "import-mistica-icons"
+     */
+    
+    const iconKeywords: {[key: string]: Array<string>} = ${JSON.stringify(result)};
+    
+    export default iconKeywords;
+    `;
+
+    return format(source);
+};
+
 const main = async () => {
     checkoutMisticaIconsRepo();
 
@@ -225,6 +258,11 @@ const main = async () => {
 
     fs.writeFileSync(PATH_OUTPUT_INDEX_FILENAME, index, 'utf8');
 
+    console.log();
+    console.log('Generating keywords for each icon.');
+    const keywordsSource = await createAllIconKeywordsSource();
+    fs.writeFileSync(join(PATH_OUTPUT, 'icons-keywords.tsx'), keywordsSource);
+
     console.log();
     console.log(`Done! (${allIconNames.length} components).`);
     console.log(`Copy exports in `, yellow(PATH_OUTPUT_INDEX_FILENAME), ' to src/index.tsx');

src/__screenshot_tests__/icons-screenshot-test.tsx

@@ -1,34 +1,26 @@
-import {openStoryPage, screen} from '../test-utils';
+import {openStoryPage} from '../test-utils';
 
 const SKINS = ['Movistar', 'O2', 'Blau'] as const;
-
-test.each(SKINS)('Icons catalog for %s', async ([skin]) => {
+const ICON_TYPES = ['light', 'regular', 'filled'];
+
+const getCases = () => {
+    const cases = [];
+    for (const skin of SKINS) {
+        for (const type of ICON_TYPES) {
+            cases.push([skin, type]);
+        }
+    }
+    return cases;
+};
+
+test.each(getCases())('Icons catalog for %s (%s)', async (skin, type) => {
     const page = await openStoryPage({
         id: 'icons-catalog--catalog',
         device: 'DESKTOP',
         skin: skin as (typeof SKINS)[number],
+        args: {light: type === 'light', regular: type === 'regular', filled: type === 'filled'},
     });
 
-    const lightCheckbox = await screen.findByLabelText('Light');
-    const filledCheckbox = await screen.findByLabelText('Filled');
-    const regularCheckbox = await screen.findByLabelText('Regular');
-    // initially all checkboxes are checked
-
-    await filledCheckbox.click();
-    await regularCheckbox.click();
-
-    const light = await page.screenshot({fullPage: true});
-    expect(light).toMatchImageSnapshot();
-
-    await lightCheckbox.click();
-    await regularCheckbox.click();
-
-    const regular = await page.screenshot({fullPage: true});
-    expect(regular).toMatchImageSnapshot();
-
-    await regularCheckbox.click();
-    await filledCheckbox.click();
-
-    const filled = await page.screenshot({fullPage: true});
-    expect(filled).toMatchImageSnapshot();
+    const icons = await page.screenshot({fullPage: true});
+    expect(icons).toMatchImageSnapshot();
 });