Merge branch 'main' into ao-openai-icon

.vscode/settings.json

@@ -31,6 +31,7 @@
       "source.fixAll": true
     }
   },
+  "mdx.experimentalLanguageServer": true,
   "search.exclude": {
     "docs": true
   },

package.json

@@ -117,8 +117,7 @@
     "typescript": "4.4.2"
   },
   "resolutions": {
-    "@typescript-eslint/utils": "^5.15.0",
-    "node-sass": "^6.0.1"
+    "@typescript-eslint/utils": "^5.15.0"
   },
   "husky": {
     "skipCI": false,

packages/gamut-icons/CHANGELOG.md

@@ -3,6 +3,61 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@9.0.2...@codecademy/gamut-icons@9.1.0) (2023-04-20)
+
+
+### Features
+
+* **GlobalHeader:** add upgrade link for plus users ([14be834](https://github.com/Codecademy/gamut/commit/14be834f812bc4c40a4dcb018496caa529700b0e))
+
+
+
+### [9.0.2](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@9.0.1...@codecademy/gamut-icons@9.0.2) (2023-04-14)
+
+**Note:** Version bump only for package @codecademy/gamut-icons
+
+
+
+
+
+### [9.0.1](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@9.0.0...@codecademy/gamut-icons@9.0.1) (2023-04-10)
+
+**Note:** Version bump only for package @codecademy/gamut-icons
+
+
+
+
+
+## [9.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@8.1.1...@codecademy/gamut-icons@9.0.0) (2023-03-20)
+
+
+### ⚠ BREAKING CHANGES
+
+* **ColorMode:** add new navy weights
+
+### Features
+
+* **ColorMode:** add new navy weights ([4babb66](https://github.com/Codecademy/gamut/commit/4babb66348b8c64457e0df6765df1376be880140))
+
+
+
+### [8.1.1](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@8.1.0...@codecademy/gamut-icons@8.1.1) (2023-03-03)
+
+**Note:** Version bump only for package @codecademy/gamut-icons
+
+
+
+
+
+## [8.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@8.0.1...@codecademy/gamut-icons@8.1.0) (2023-03-03)
+
+
+### Features
+
+* **Icon:** Add OneTimeIcon ([3fa5cd9](https://github.com/Codecademy/gamut/commit/3fa5cd9bf938aa813e57287193fb423037f89706))
+
+
+
 ### [8.0.1](https://github.com/Codecademy/gamut/compare/@codecademy/gamut-icons@8.0.0...@codecademy/gamut-icons@8.0.1) (2023-02-06)
 
 **Note:** Version bump only for package @codecademy/gamut-icons

packages/gamut-icons/__tests__/icons.test.tsx

@@ -38,10 +38,10 @@ describe('Compiled gamut-icons:', () => {
     expect(titleEl?.innerHTML).toEqual('Accessible');
   });
 
-  it('Sets a default fill of currentColor', () => {
+  it('Sets a default fill of #fff', () => {
     renderView();
 
     const svgEl = screen.getByRole('img', { hidden: true });
-    expect(svgEl.getAttribute('fill')).toEqual('currentColor');
+    expect(svgEl.getAttribute('fill')).toEqual('#fff');
   });
 });

packages/gamut-icons/__tests__/mask-plugin.test.tsx

@@ -0,0 +1,36 @@
+import { transform } from '@babel/core';
+
+import plugin from '../mask-plugin';
+
+const maskIdString = '`${maskId}`';
+const urlIdString = '`url(#${maskId})`';
+const size = '`100%`';
+const currentColor = '`currentColor`';
+
+const menuIcon =
+  "<svg viewBox='0 0 16 16' height='16' width='16'><title>mini-bold-interface-arrow-up</title><g transform='matrix(1.6,0,0,1.6,0,0)'><path d='M8.03,2.72,5.53.22a.749.749,0,0,0-1.06,0l-2.5,2.5A.75.75,0,0,0,3.03,3.78L4.25,2.561V9.25a.75.75,0,0,0,1.5,0V2.561L6.97,3.78A.75.75,0,1,0,8.03,2.72Z' fill='#000000' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='0'></path></g></svg>";
+
+const menuIconTitleEnd =
+  "<svg viewBox='0 0 16 16' height='16' width='16'><g transform='matrix(1.6,0,0,1.6,0,0)'><path d='M8.03,2.72,5.53.22a.749.749,0,0,0-1.06,0l-2.5,2.5A.75.75,0,0,0,3.03,3.78L4.25,2.561V9.25a.75.75,0,0,0,1.5,0V2.561L6.97,3.78A.75.75,0,1,0,8.03,2.72Z' fill='#000000' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='0'></path></g><title>mini-bold-interface-arrow-up</title></svg>";
+
+const postTransformIcon = `"<svg viewBox='0 0 16 16' height='16' width='16'><title>mini-bold-interface-arrow-up</title><mask id={${maskIdString}}><g transform='matrix(1.6,0,0,1.6,0,0)'><path d='M8.03,2.72,5.53.22a.749.749,0,0,0-1.06,0l-2.5,2.5A.75.75,0,0,0,3.03,3.78L4.25,2.561V9.25a.75.75,0,0,0,1.5,0V2.561L6.97,3.78A.75.75,0,1,0,8.03,2.72Z' fill='#000000' stroke='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='0'></path></g></mask><g mask={${urlIdString}}><rect width={${size}} height={${size}} fill={${currentColor}} /></g></svg>;"`;
+
+const testPlugin = (code: string) => {
+  const result = transform(code, {
+    plugins: ['@babel/plugin-syntax-jsx', plugin],
+    configFile: false,
+  });
+
+  return result?.code;
+};
+
+describe('title plugin', () => {
+  it('should add a mask wrapper, add a mask id, and applies currentColor to the rect tag', () => {
+    expect(testPlugin(menuIcon)).toMatchInlineSnapshot(postTransformIcon);
+  });
+  it('sets title outside of mask regardless of placement', () => {
+    expect(testPlugin(menuIconTitleEnd)).toMatchInlineSnapshot(
+      postTransformIcon
+    );
+  });
+});

packages/gamut-icons/icon-template.js

@@ -10,6 +10,7 @@ function iconTemplate(api, opts, { jsx }) {
   return template.ast`
     import * as React from 'react';
     import { Svg, GamutIconProps } from '../../props';
+    import { useIconId } from '../../useIconId';
 
     export const ${exportName} = React.forwardRef<SVGSVGElement, GamutIconProps>(({
       title = "${title}",
@@ -21,6 +22,8 @@ function iconTemplate(api, opts, { jsx }) {
     },
       svgRef
     ) => {
+      const maskId = useIconId('${exportName}');
+
       return ${jsx};
     }) as React.ForwardRefExoticComponent<
     GamutIconProps & React.RefAttributes<SVGSVGElement>

packages/gamut-icons/mask-plugin.js

@@ -0,0 +1,99 @@
+const plugin = (api) => {
+  const { types } = api;
+
+  const maskTag = types.jSXIdentifier('mask');
+  const gTag = types.jSXIdentifier('g');
+  const rectTag = types.jSXIdentifier('rect');
+
+  const createUniqueAttributeId = (tag) => {
+    const titleId = '${maskId}';
+    const newId = tag === 'mask' ? `url(#${titleId})` : titleId;
+    return newId;
+  };
+
+  const createAttribute = (tag, value) => {
+    const backtick = '`';
+    return types.jsxAttribute(
+      types.jsxIdentifier(tag),
+      types.jsxExpressionContainer(
+        types.identifier(`${backtick}${value}${backtick}`)
+      )
+    );
+  };
+
+  const vistor = {
+    JSXElement(path) {
+      if (!path.get('openingElement.name').isJSXIdentifier({ name: 'svg' })) {
+        return;
+      }
+      let titleNode;
+
+      path.get('children').some((childPath) => {
+        // we want to delete the title and reinsert it so it lands outside the mask. this fixes some issues with svgr's built-in titleProp parsing.
+        if (!childPath.isJSXElement()) return false;
+        const name = childPath.get('openingElement').get('name');
+        if (name.node.name === 'title') {
+          titleNode = childPath.node;
+          childPath.remove();
+        }
+        return false;
+      });
+
+      const newId = createAttribute('id', createUniqueAttributeId('id'));
+
+      const ogOpen = path.get('openingElement').node;
+      const ogClose = path.get('closingElement').node;
+
+      const maskTagOpen = types.jsxOpeningElement(maskTag, [newId]);
+      const maskTagClosed = types.jsxClosingElement(maskTag, []);
+
+      const maskGAttr = createAttribute(
+        'mask',
+        createUniqueAttributeId('mask')
+      );
+
+      const gTagOpen = types.jsxOpeningElement(gTag, [maskGAttr]);
+
+      const gTagClose = types.jsxClosingElement(gTag, []);
+
+      const rectTagComplete = types.jsxElement(
+        types.jsxOpeningElement(
+          rectTag,
+          [
+            createAttribute('width', '100%'),
+            createAttribute('height', '100%'),
+            createAttribute('fill', 'currentColor'),
+          ],
+          true
+        ),
+        null,
+        [],
+        true
+      );
+
+      const newerChildren = types.jsxElement(gTagOpen, gTagClose, [
+        rectTagComplete,
+      ]);
+      const newChildren = types.jsxElement(maskTagOpen, maskTagClosed, [
+        ...path.node.children,
+      ]);
+
+      path.replaceWith(
+        types.jsxElement(ogOpen, ogClose, [newChildren, newerChildren])
+      );
+
+      path.node.children.unshift(titleNode);
+      path.skip();
+    },
+  };
+
+  return {
+    visitor: {
+      Program(path) {
+        path.traverse(vistor);
+      },
+    },
+  };
+};
+
+module.exports = plugin;

packages/gamut-icons/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/gamut-icons",
   "description": "Icon library for codecademy.com",
-  "version": "8.0.1",
+  "version": "9.1.0",
   "author": "Codecademy <dev@codecademy.com>",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -20,7 +20,7 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@codecademy/gamut-tests": "5.0.1",
+    "@codecademy/gamut-tests": "5.0.4",
     "@svgr/cli": "5.5.0",
     "@testing-library/react": "^12.1.2",
     "svgo": "^1.3.2",
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@codecademy/gamut-styles": "15.1.0",
+    "@codecademy/gamut-styles": "16.1.0",
     "@codecademy/variance": "0.21.0"
   },
   "peerDependencies": {