Merge pull request #2115 from chanzuckerberg/release-v15.8.0

## [15.8.0](v15.7.0...v15.8.0) (2024-12-11)

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

### Features

* **SelectionChip:** introduce 1.0 component ([#2112](#2112)) ([6d4a3f4](6d4a3f4))

Author: booc0mtaco

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

.storybook/components/Docs/Guidelines/CodeGuidelines.mdx

@@ -207,7 +207,8 @@ Examples:
 
 ```css
 .dropdown-button__icon {
-  transition: transform calc(var(--eds-anim-move-medium) * 1s) var(--eds-anim-ease);
+  transition: transform calc(var(--eds-anim-move-medium) * 1s)
+    var(--eds-anim-ease);
 
   @media (prefers-reduced-motion) {
     transition: none;
@@ -368,7 +369,7 @@ import { Icon } from '../Icon/Icon';
 ### Prop Type definitions
 
 ```tsx
-export interface ComponentNameProps {
+export type ComponentNameProps = {
   /**
    * Toggles the ability to dismiss the banner via an close button in the top right of the banner
    */
@@ -388,7 +389,7 @@ The comment should begin with an import example, include a general description o
 
 Example:
 
-```tsx
+````tsx
 /**
  * `import {ButtonGroup} from "@chanzuckerberg/eds";`
  *
@@ -408,13 +409,13 @@ Example:
  * ```
  */
  export const ButtonGroup = ({ ... })
-```
+````
 
 Do not use [jsdoc tags](https://devhints.io/jsdoc) (e.g. `@example`) if possible because these will break the documentation in storybook and cause all following text to not be shown on the page. For important jsdoc tags that we really want to include, place them at the end of the comment to avoid hiding comment content. For example, we use the `@deprecated` tag so Visual Studio Code will indicate a component is deprecated for developers, but we place that at the end of a component's docstring to avoid disrupting any of the other text.
 
 Example:
 
-```tsx
+````tsx
 /**
  * The Banner component is deprecated and will be removed in an upcoming release.
  *
@@ -437,7 +438,7 @@ Example:
  *
  * @deprecated
  */
-```
+````
 
 ### Export module
 

.storybook/components/Grid/Grid.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import styles from './Grid.module.css';
 
-export interface Props {
+export type GridProps = {
   /**
    * Child node(s) that can be nested inside component
    */
@@ -35,9 +35,9 @@ export interface Props {
     | '4up'
     | '1-2-4up'
     | '1-2-1up';
-}
+};
 
-export interface GridItemProps {
+export type GridItemProps = {
   /**
    * Child node(s) that can be nested inside component
    */
@@ -46,7 +46,7 @@ export interface GridItemProps {
    * CSS class names that can be appended to the component.
    */
   className?: string;
-}
+};
 
 /**
  * The Grid component is deprecated and will be removed in an upcoming release.
@@ -64,7 +64,7 @@ export const Grid = ({
   children,
   gap,
   ...other
-}: Props) => {
+}: GridProps) => {
   const componentClassName = clsx(
     styles['grid'],
     variant && styles[`grid--${variant}`],

.storybook/components/Section/Section.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 import { Heading } from '../../../src/';
 import type { HeadingElement } from '../../../src/components/Heading';
 import styles from './Section.module.css';
-export interface Props {
+
+export type SectionProps = {
   /**
    * Align variations:
    * - **center** yields a center-aligned section header
@@ -48,7 +49,7 @@ export interface Props {
    * Slot for node to appear to the left of the section title. Typically used for images or avatars
    */
   titleBefore?: ReactNode;
-}
+};
 
 /**
  * `import {Section} from "@chanzuckerberg/eds";`
@@ -67,7 +68,7 @@ export const Section = ({
   titleAfter,
   titleBefore,
   ...other
-}: Props) => {
+}: SectionProps) => {
   const componentClassName = clsx(
     styles['section'],
     align === 'center' && styles['section--center'],

.storybook/preview.tsx

@@ -25,35 +25,35 @@ export const decorators = [
   ),
 ];
 
-function createInitialReleaseConfig(usingLabel: string) {
+function createComponentVersion(usingLabel: string) {
   return {
-    [`intro-${usingLabel}`]: {
+    [`api-${usingLabel}`]: {
       styles: {
         backgroundColor: '#ffffff',
         borderColor: '#000000',
         color: '#000000',
       },
-      title: `Introduced: ${usingLabel}`,
+      title: `Component API Version: ${usingLabel}`,
       tooltip: {
-        title: `Introduced in v${usingLabel}`,
-        desc: `This component was introduced in EDS Design version ${usingLabel}`,
+        title: `Code / API v${usingLabel}`,
+        desc: `This component's API version is at ${usingLabel}`,
       },
     },
   };
 }
 
-function createCurrentReleaseConfig(usingLabel: string) {
+function createThemeVersion(usingLabel: string) {
   return {
-    [`current-${usingLabel}`]: {
+    [`theme-${usingLabel}`]: {
       styles: {
         backgroundColor: '#ffffff',
         borderColor: '#000000',
         color: '#000000',
       },
-      title: `Current: ${usingLabel}`,
+      title: `Theme Version: ${usingLabel}`,
       tooltip: {
-        title: `Current version v${usingLabel}`,
-        desc: `This component corresponds to EDS Design version ${usingLabel}`,
+        title: `Current Theme version v${usingLabel}`,
+        desc: `This component's theme corresponds to Edu Design System Version is at ${usingLabel}`,
       },
     },
   };
@@ -79,15 +79,13 @@ export const parameters: Preview['parameters'] = {
     ],
   },
   badgesConfig: {
-    ...createInitialReleaseConfig('2.0'),
-    ...createInitialReleaseConfig('1.3'),
-    ...createInitialReleaseConfig('1.2'),
-    ...createInitialReleaseConfig('1.1'),
-    ...createInitialReleaseConfig('1.0'),
-    ...createCurrentReleaseConfig('1.0'),
-    ...createCurrentReleaseConfig('1.3'),
-    ...createCurrentReleaseConfig('2.0'),
-    ...createCurrentReleaseConfig('2.1'),
+    ...createComponentVersion('2.0'),
+    ...createComponentVersion('1.3'),
+    ...createComponentVersion('1.2'),
+    ...createComponentVersion('1.1'),
+    ...createComponentVersion('1.0'),
+    ...createThemeVersion('1.0'),
+    ...createThemeVersion('2.0'),
     implementationExample: {
       styles: {
         backgroundColor: '#ffffff',

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.8.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.7.0...v15.8.0) (2024-12-11)
+
+
+### Features
+
+* **SelectionChip:** introduce 1.0 component ([#2112](https://github.com/chanzuckerberg/edu-design-system/issues/2112)) ([6d4a3f4](https://github.com/chanzuckerberg/edu-design-system/commit/6d4a3f42b0473306dd69a27a160df47c6a57baf1))
+
 ## [15.7.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.6.0...v15.7.0) (2024-11-18)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "15.7.0",
+  "version": "15.8.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",
@@ -122,9 +122,9 @@
     "@chanzuckerberg/eslint-plugin-edu-react": "^1.1.9",
     "@chanzuckerberg/eslint-plugin-stories": "^3.2.14",
     "@chanzuckerberg/story-utils": "^4.0.8",
-    "@chromatic-com/storybook": "^1",
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.3",
+    "@chromatic-com/storybook": "^3",
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
     "@geometricpanda/storybook-addon-badges": "^2.0.5",
     "@omlet/cli": "^1.12.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -164,12 +164,12 @@
     "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",
+    "eslint-plugin-testing-library": "^7.0.0",
+    "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-stylelint": "^6.3.2",
+    "jest-preset-stylelint": "^7.1.0",
     "lint-staged": "^15.2.10",
     "plop": "^4.0.1",
     "postcss": "^8.4.47",
@@ -178,7 +178,7 @@
     "postcss-mixins": "^11.0.3",
     "postcss-nested": "^7.0.2",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -192,7 +192,7 @@
     "stylelint-config-recommended": "^14.0.1",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [

plop-templates/Component/Component.tsx.hbs

@@ -2,15 +2,15 @@ import clsx from 'clsx';
 import React from 'react';
 import styles from './{{pascalCase name}}.module.css';
 
-export interface Props {
+export type {{pascalCase name}}Props = {
   // Component API
   /**
    * CSS class names that can be appended to the component.
    */
   className?: string;
   // Design API
   // Insert props/values as defined in figma for {{pascalCase name}}
-}
+};
 
 /**
  * BETA: This component is still a work in progress and is subject to change.
@@ -21,9 +21,9 @@ export interface Props {
  */
 export const {{pascalCase name}} = ({
   className,
-  // Add other deferenced props to use
+  // Add other destructured props to reference
   ...other
-}: Props) => {
+}: {{pascalCase name}}Props) => {
   const componentClassName = clsx(styles['{{dashCase name}}'], className);
 
   return (

src/components/Accordion/Accordion.stories.tsx

@@ -12,7 +12,7 @@ export default {
   // TODO: add subcomponents like Badge has
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.2', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
     controls: { sort: 'requiredFirst' },
   },
   args: {

src/components/AppNotification/AppNotification.stories.tsx

@@ -14,7 +14,7 @@ export default {
   component: AppNotification,
   parameters: {
     layout: 'centered',
-    badges: ['intro-2.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   args: {
     title: 'This is an AppNotification title',

src/components/AppNotification/AppNotification.tsx

@@ -4,6 +4,7 @@ import Button from '../Button';
 import Text from '../Text';
 import styles from './AppNotification.module.css';
 
+// TODO(next-major): change export to type for consistency
 export interface AppNotificationProps {
   // Design API
   /**

src/components/Avatar/Avatar.stories.ts

@@ -5,7 +5,7 @@ export default {
   title: 'Components/Avatar',
   component: Avatar,
   parameters: {
-    badges: ['intro-1.3', 'current-1.3'],
+    badges: ['api-1.3', 'theme-1.0'],
     layout: 'centered',
   },
 } as Meta<typeof Avatar>;

src/components/Badge/Badge.stories.tsx

@@ -13,7 +13,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.2', 'current-1.3'],
+    badges: ['api-1.3', 'theme-1.0'],
   },
   argTypes: {
     children: {

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -21,7 +21,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-1.3'],
+    badges: ['api-1.3', 'theme-1.0'],
   },
   argTypes: {
     children: {

src/components/Button/Button.stories.tsx

@@ -21,7 +21,7 @@ export default {
   },
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
 } as Meta<ButtonProps>;
 

src/components/ButtonGroup/ButtonGroup.stories.tsx

@@ -24,7 +24,7 @@ export default {
     },
   },
   parameters: {
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 } as Meta<typeof ButtonGroup>;

src/components/Card/Card.stories.tsx

@@ -14,7 +14,7 @@ export default {
   component: Card,
   parameters: {
     layout: 'centered',
-    badges: ['intro-1.0', 'current-2.0'],
+    badges: ['api-2.0', 'theme-2.0'],
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
   args: {
@@ -378,7 +378,7 @@ export const WhileDragging: Story = {
  */
 export const CancelMembership: Story = {
   parameters: {
-    badges: ['intro-1.0', 'current-2.0', 'implementationExample'],
+    badges: ['api-1.0', 'theme-2.0', 'implementationExample'],
   },
   args: {
     children: (