Merge pull request #2103 from chanzuckerberg/release-v15.7.0

## [15.7.0](v15.6.0...v15.7.0) (2024-11-18)

[Storybook](https://61313967cde49b003ae2a860-cpbnunloqv.chromatic.com/)

### Features

* **InputChip:** add 1.0 component ([#2097](#2097)) ([2f68041](2f68041))
* **Tag:** update to 2.0 styles ([#2087](#2087)) ([a344222](a344222))


### Bug Fixes

* **deps:** update dependency ts-morph to v24 ([#2102](#2102)) ([350c72b](350c72b))

.stylelintrc

@@ -1,6 +1,6 @@
 {
   "extends": ["stylelint-config-recommended"],
-  "plugins": ["./scripts/stylelint/index.js"],
+  "plugins": ["./scripts/stylelint/index.mjs"],
   "rules": {
     "eds/no-tier-1-color-variable": true,
     "at-rule-no-unknown": [

.vscode/settings.json

@@ -12,5 +12,8 @@
   "typescript.validate.enable": true,
   "javascript.validate.enable": true,
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[css]": {
+    "editor.defaultFormatter": "vscode.css-language-features"
+  }
 }

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [15.7.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.6.0...v15.7.0) (2024-11-18)
+
+
+### Features
+
+* **InputChip:** add 1.0 component ([#2097](https://github.com/chanzuckerberg/edu-design-system/issues/2097)) ([2f68041](https://github.com/chanzuckerberg/edu-design-system/commit/2f68041191bffd02f5843839eac7a18c96079dd7))
+* **Tag:** update to 2.0 styles ([#2087](https://github.com/chanzuckerberg/edu-design-system/issues/2087)) ([a344222](https://github.com/chanzuckerberg/edu-design-system/commit/a3442228991c866ca3c8c62137085cf1ca2a3b48))
+
+
+### Bug Fixes
+
+* **deps:** update dependency ts-morph to v24 ([#2102](https://github.com/chanzuckerberg/edu-design-system/issues/2102)) ([350c72b](https://github.com/chanzuckerberg/edu-design-system/commit/350c72b244a85a053fc943224f019227d1bf4729))
+
 ## [15.6.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.5.0...v15.6.0) (2024-11-05)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "15.6.0",
+  "version": "15.7.0",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <[email protected]>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -99,7 +99,7 @@
     "jsonfile": "^6.1.0",
     "lilconfig": "^3.1.2",
     "lodash": "^4.17.21",
-    "ora": "^8.1.0",
+    "ora": "^8.1.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-children-by-type": "^1.1.0",
     "react-focus-lock": "^2.13.2",
@@ -109,7 +109,7 @@
     "style-dictionary": "^3.9.2",
     "svg4everybody": "^2.1.9",
     "ts-dedent": "^2.2.0",
-    "ts-morph": "^22.0.0",
+    "ts-morph": "^24.0.0",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
@@ -130,66 +130,66 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@size-limit/file": "^8.2.6",
-    "@storybook/addon-a11y": "^8.4.1",
-    "@storybook/addon-essentials": "^8.4.1",
-    "@storybook/addon-interactions": "^8.4.1",
-    "@storybook/addon-links": "^8.4.1",
-    "@storybook/addon-mdx-gfm": "^8.4.1",
+    "@storybook/addon-a11y": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-mdx-gfm": "^8.4.2",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/manager-api": "^8.4.1",
-    "@storybook/react": "^8.4.1",
-    "@storybook/react-webpack5": "^8.4.1",
-    "@storybook/test": "^8.4.1",
+    "@storybook/manager-api": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-webpack5": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.4.1",
+    "@storybook/theming": "^8.4.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
     "@types/jsonfile": "^6",
     "@types/lodash": "^4.17.13",
-    "@types/node": "^20.17.5",
+    "@types/node": "^20.17.6",
     "@types/react": "^18.3.12",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.1",
     "@types/react-portal": "^4.0.7",
     "@types/yargs": "^17.0.33",
     "axe-core": "4.10.2",
-    "chromatic": "^11.16.3",
+    "chromatic": "^11.18.0",
     "codecov": "^3.8.3",
     "copyfiles": "^2.4.1",
     "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jest": "^28.9.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-storybook": "^0.11.0",
     "eslint-plugin-testing-library": "^6.4.0",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-preset-stylelint": "^6.3.2",
-    "lint-staged": "^13.3.0",
+    "lint-staged": "^15.2.10",
     "plop": "^4.0.1",
     "postcss": "^8.4.47",
-    "postcss-cli": "^10.1.0",
-    "postcss-import": "^15.1.0",
-    "postcss-mixins": "^9.0.4",
-    "postcss-nested": "^6.2.0",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
+    "postcss-mixins": "^11.0.3",
+    "postcss-nested": "^7.0.2",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.1.0",
-    "prettier-plugin-tailwindcss": "^0.5.7",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^4.24.3",
+    "rollup": "^4.24.4",
     "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.6",
     "standard-version": "^9.5.0",
-    "storybook": "^8.4.1",
+    "storybook": "^8.4.2",
     "style-dictionary": "^3.9.2",
-    "stylelint": "^15.11.0",
-    "stylelint-config-recommended": "^13.0.0",
+    "stylelint": "^16.10.0",
+    "stylelint-config-recommended": "^14.0.1",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
     "typescript": "^5.6.3"

scripts/stylelint/index.mjs

@@ -0,0 +1,10 @@
+/* eslint-env node */
+
+import stylelint from 'stylelint';
+import * as rules from './rules/index.mjs';
+
+const rulesPlugins = Object.keys(rules).map((ruleName) => {
+  return stylelint.createPlugin(ruleName, rules[ruleName]);
+});
+
+export default rulesPlugins;

scripts/stylelint/rules/index.mjs

@@ -0,0 +1,5 @@
+/* eslint-env node */
+
+import noTier1Rule from './no-tier-1-color-variable.mjs';
+
+export { noTier1Rule as 'eds/no-tier-1-color-variable' };

scripts/stylelint/rules/no-tier-1-color-variable.js → scripts/stylelint/rules/no-tier-1-color-variable.mjs

@@ -1,6 +1,6 @@
 /* eslint-env node */
 
-const stylelint = require('stylelint');
+import stylelint from 'stylelint';
 
 const ruleName = 'eds/no-tier-1-color-variable';
 
@@ -39,4 +39,4 @@ function rule(actual) {
 
 rule.ruleName = ruleName;
 rule.messages = messages;
-module.exports = rule;
+export default rule;

scripts/stylelint/rules/no-tier-1-color-variable.test.js → scripts/stylelint/rules/no-tier-1-color-variable.test.mjs

@@ -1,7 +1,7 @@
-const getTestRule = require('jest-preset-stylelint/getTestRule');
-const { messages, ruleName } = require('./no-tier-1-color-variable');
+import getTestRule from 'jest-preset-stylelint/getTestRule';
+import { messages, ruleName } from './no-tier-1-color-variable.mjs';
 
-const testRule = getTestRule({ plugins: ['./scripts/stylelint/index.js'] });
+const testRule = getTestRule({ plugins: ['./scripts/stylelint/index.mjs'] });
 
 testRule({
   ruleName,

src/bin/migrate/transforms/rename-jsx-import.ts

@@ -52,7 +52,11 @@ export default function transform({ file, changes }: TransformOptions) {
         });
 
         namedImport.setName(changeToApply.newImportName);
-        namedImport.getNameNode().rename(changeToApply.newImportName);
+        const namedNode = namedImport.getNameNode();
+        if ('rename' in namedNode) {
+          namedNode.rename(changeToApply.newImportName);
+        }
+
         if (changeToApply.removeAlias) {
           namedImport.removeAliasWithRename();
         } else if (changeToApply.alias) {

src/components/InputChip/InputChip.module.css

@@ -0,0 +1,72 @@
+/*------------------------------------*\
+    # INPUT CHIP
+\*------------------------------------*/
+
+/**
+ * InputChip
+ */
+
+.input-chip {
+  display: inline-flex;
+}
+
+.input-chip__label {
+  display: inline-flex;
+  padding: calc(var(--eds-size-1) / 16 * 1rem);
+  padding-right: 0;
+  gap: calc(var(--eds-size-1) / 16 * 1rem);
+  align-items: center;
+  justify-content: center;
+
+  border: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
+  border-right: none;
+
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  color: var(--eds-theme-color-text-utility-default-primary);
+}
+
+.input-chip .input-chip__action-button {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--eds-size-1) / 16 * 1rem);
+
+  border: 1px solid var(--eds-theme-color-border-utility-default-low-emphasis);
+  border-left: none;
+  border-radius: calc(var(--eds-border-radius-full) * 1px);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  outline: none;
+
+  color: var(--eds-theme-color-text-utility-default-primary);
+}
+
+.input-chip--disabled {
+  pointer-events: none;
+}
+
+/**
+ * Theme tokens
+ */
+
+.input-chip__action-button:hover {
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis-hover);
+}
+
+.input-chip__action-button:active {
+  background-color: var(--eds-theme-color-background-utility-default-no-emphasis-active);
+}
+
+.input-chip__action-button:focus-visible {
+  border: none;
+  box-shadow: inset 0 0 0 2px var(--eds-theme-color-border-utility-focus);
+}
+
+@supports not selector(:focus-visible) {
+  .input-chip__action-button:focus {
+    border: none;
+    box-shadow: inset 0 0 0 2px var(--eds-theme-color-border-utility-focus);
+  }
+}

src/components/InputChip/InputChip.stories.ts

@@ -0,0 +1,43 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import type React from 'react';
+
+import { InputChip } from './InputChip';
+
+export default {
+  title: 'Components/InputChip',
+  component: InputChip,
+  parameters: {
+    badges: ['intro-1.0', 'current-1.0'],
+  },
+  argTypes: {
+    onClick: {
+      control: false,
+    },
+    leadingComponent: {
+      control: false,
+    },
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof InputChip>;
+
+export const Default: StoryObj<Args> = {
+  args: {
+    label: 'Chip Label',
+    onClick: () => {},
+  },
+};
+
+export const WithLeadingIcon: StoryObj<Args> = {
+  args: {
+    ...Default.args,
+    leadingComponent: 'person-encircled',
+  },
+};
+
+export const Disabled: StoryObj<Args> = {
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+};

src/components/Tag/Tag.test.ts → src/components/InputChip/InputChip.test.ts

@@ -1,7 +1,7 @@
 import { generateSnapshots } from '@chanzuckerberg/story-utils';
-import * as stories from './Tag.stories';
+import * as stories from './InputChip.stories';
 import type { StoryFile } from '../../util/utility-types';
 
-describe('<Tag />', () => {
+describe('<InputChip />', () => {
   generateSnapshots(stories as StoryFile);
 });