Merge pull request #1879 from chanzuckerberg/release-v14.0.0

## [14.0.0](v13.12.0...v14.0.0) (2024-03-05)

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

### ⚠ BREAKING CHANGES

* remove Grid and Section from exports (#1876)
* **Text:** remove deprecated props (#1873)
* **Heading:** remove deprecated props and refactor usages (#1872)
* **Link:** remove and reset deprecated props (#1871)
* **Select:** remove deprecated props (#1870)
* **Label:** remove deprecated props (#1868)
* **InputField:** remove unused prop requiredLabel (#1869)
* **InlineNotification:** remove deprecated props from component (#1867)
* **Card:** deprecate orientation prop (#1866)
* **Badge:** deprecate name prop on component (#1865)
* **Skeleton:** deprecate .Rect subcomponent mapping (#1864)
* **Tag:** remove deprecated props and update API (#1862)
* **Tooltip:** remove deprecated props (#1861)
* **Tabs:** combine Tab sub-component into Tabs
* remove deprecated components
* output a single, cjs build

### Features

* **Badge:** deprecate name prop on component ([#1865](#1865)) ([cff5d5e](cff5d5e))
* **Card:** deprecate orientation prop ([#1866](#1866)) ([bb160c1](bb160c1))
* **Heading:** remove deprecated props and refactor usages ([#1872](#1872)) ([a5d6f76](a5d6f76))
* **InlineNotification:** remove deprecated props from component ([#1867](#1867)) ([efc6b43](efc6b43))
* **InputField:** remove unused prop requiredLabel ([#1869](#1869)) ([f9d73dd](f9d73dd))
* **Label:** remove deprecated props ([#1868](#1868)) ([907cc39](907cc39))
* **Link:** remove and reset deprecated props ([#1871](#1871)) ([552945a](552945a))
* remove deprecated components ([2538aa6](2538aa6))
* remove Grid and Section from exports ([#1876](#1876)) ([a0ec79a](a0ec79a))
* **Select:** remove deprecated props ([#1870](#1870)) ([e0ad463](e0ad463))
* **Skeleton:** deprecate .Rect subcomponent mapping ([#1864](#1864)) ([9d3ffec](9d3ffec))
* **Tabs:** combine Tab sub-component into Tabs ([0479863](0479863))
* **Tag:** remove deprecated props and update API ([#1862](#1862)) ([dbfbaa3](dbfbaa3))
* **Text:** remove deprecated props ([#1873](#1873)) ([13fbc18](13fbc18))
* **Tooltip:** remove deprecated props ([#1861](#1861)) ([d444607](d444607))


### Bug Fixes

* output a single, cjs build ([523130e](523130e))
* remove unnecessary type definitions script ([be341c0](be341c0))

.storybook/components/DesignTokens/Tier1/Animation.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier1/Borders.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier1/Colors.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '../DesignTokens.css';
-import { Section } from '../../../../src';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { ColorList } from '../../ColorList/ColorList';
 

.storybook/components/DesignTokens/Tier1/FontFamilies.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier1/FontSizes.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier1/FontWeights.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier1/Layout.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier1/Shadows.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier1/Sizes.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier1/TypographyPresets.jsx

@@ -1,7 +1,8 @@
 import { at, forEach } from 'lodash';
 
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import presets from '../../../../src/design-tokens/tier-1-definitions/typography.json';
 import flatten from '../../../util/flattenToken';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';

.storybook/components/DesignTokens/Tier1/TypographyTokens.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier2/Borders.stories.tsx

@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier2/Colors.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Section } from '../../../../src';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { ColorList } from '../../ColorList/ColorList';
 

.storybook/components/DesignTokens/Tier2/Forms.stories.tsx

@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier2/TypographyUsage.stories.tsx

@@ -2,7 +2,8 @@ import type { StoryObj } from '@storybook/react';
 import { at, capitalize, forEach } from 'lodash';
 
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import usages from '../../../../src/design-tokens/tier-2-usage/typography.json';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore importing of a legacy utility file results in some 'any's, which is acceptable for this docs page

.storybook/components/DesignTokens/Tier3/Colors.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Section } from '../../../../src';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { ColorList } from '../../ColorList/ColorList';
 

.storybook/components/DesignTokens/Tier3/Sizes.stories.tsx

@@ -1,6 +1,7 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import { Section, Grid } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 

.storybook/components/DesignTokens/Tier3/TypographyComponents.stories.tsx

@@ -2,7 +2,8 @@ import type { StoryObj } from '@storybook/react';
 import { at, capitalize, forEach, merge } from 'lodash';
 
 import React from 'react';
-import { Grid, Section } from '../../../../src';
+import Grid from '../../../../src/components/Grid';
+import Section from '../../../../src/components/Section';
 import breadcrumb from '../../../../src/design-tokens/tier-3-component/breadcrumb-typography.json';
 import button from '../../../../src/design-tokens/tier-3-component/buttons-typography.json';
 import form from '../../../../src/design-tokens/tier-3-component/forms-typography.json';

.storybook/pages/WireframeDemo/WireframeDemo.tsx

@@ -10,7 +10,6 @@ import {
  Link,
  Select,
  Tabs,
- Tab,
  Text,
  Tooltip,
 } from '../../../src';
@@ -79,8 +78,8 @@ const LoggedOutPage = ({ onLogin }: { onLogin: () => void }) => (
  src={PlaceholderImage}
  />
  <div className="flex flex-col items-center gap-6">
- <Heading size="h1">Application</Heading>
- <Heading size="h2">Sign in</Heading>
+ <Heading as="h1">Application</Heading>
+ <Heading as="h2">Sign in</Heading>
  <Text>Remember to use your school email to sign in:</Text>
  </div>
  <img
@@ -153,9 +152,9 @@ const StudentTab = ({
  )}
  >
  <div className={clsx(styles['watch-page__avatar'], 'h-10 w-10')}>
- <Text size="sm">{studentName.slice(0, 1)}</Text>
+ <Text preset="body-sm">{studentName.slice(0, 1)}</Text>
  </div>
- <Text className="!mt-2 truncate" size="xs">
+ <Text className="!mt-2 truncate" preset="body-xs">
  {studentName}
  </Text>
  </div>
@@ -195,7 +194,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  </Button>
  <div>
  <Text className="mb-2">Playing reflections in response to:</Text>
- <Heading as="h1" size="h3">
+ <Heading as="h1" preset="headline-sm">
  What's something in your life, big or small, that you're proud of?
  Why are you proud of it?
  </Heading>
@@ -221,26 +220,26 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  </div>
 
  <Tabs className="mt-4">
- <Tab title="All (3)">
+ <Tabs.Tab title="All (3)">
  <div className="flex">
  <StudentTab active studentName="Mikaela" />
  <StudentTab studentName="Cesar" />
  <StudentTab studentName="Truman" />
  </div>
- </Tab>
+ </Tabs.Tab>
 
- <Tab title="New (1)">
+ <Tabs.Tab title="New (1)">
  <div className="flex">
  <StudentTab active studentName="Mikaela" />
  </div>
- </Tab>
+ </Tabs.Tab>
 
- <Tab title="Open (2)">
+ <Tabs.Tab title="Open (2)">
  <div className="flex">
  <StudentTab studentName="Cesar" />
  <StudentTab studentName="Truman" />
  </div>
- </Tab>
+ </Tabs.Tab>
  </Tabs>
  </div>
 
@@ -250,12 +249,12 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  <div
  className={clsx(styles['watch-page__avatar'], 'mr-2 h-9 w-9')}
  >
- <Text size="sm">M</Text>
+ <Text preset="body-sm">M</Text>
  </div>
 
  <div>
- <Text size="sm">Mikaela</Text>
- <Text size="xs">3d</Text>
+ <Text preset="body-sm">Mikaela</Text>
+ <Text preset="body-xs">3d</Text>
  </div>
  </div>
  <img
@@ -280,7 +279,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  <div className={styles['watch-page__response']}>
  <Label htmlFor={responseTextareaId} text="Respond to Mikaela" />
  <textarea
- className={clsx(styles['watch-page__textarea'], 'h-[9.25rem')}
+ className={clsx(styles['watch-page__textarea'], 'h-[9.25rem]')}
  id={responseTextareaId}
  onChange={handleTextareaChange}
  placeholder="Type your response to Mikaela"
@@ -313,10 +312,10 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  'm-4 h-[6.25rem] w-[6.25rem]',
  )}
  >
- <Text size="lg">M</Text>
+ <Text preset="body-lg">M</Text>
  </div>
  <Link className="mb-4">
- <Heading as="h2" size="h3">
+ <Heading as="h2" preset="headline-sm">
  Mikaela
  </Heading>
  </Link>
@@ -331,22 +330,22 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  <thead>
  <tr>
  <th>
- <Text size="xs">Questions received</Text>
+ <Text preset="body-xs">Questions received</Text>
  </th>
  <th>
- <Text size="xs">Reflections submitted</Text>
+ <Text preset="body-xs">Reflections submitted</Text>
  </th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>
- <Text className="text-center" size="lg">
+ <Text className="text-center" preset="body-lg">
  10
  </Text>
  </td>
  <td>
- <Text className="text-center" size="lg">
+ <Text className="text-center" preset="body-lg">
  8
  </Text>
  </td>
@@ -356,7 +355,7 @@ const WatchPage = ({ onLogout }: { onLogout: () => void }) => {
  </div>
 
  <div className={styles['watch-page__teacher-notes-heading']}>
- <Text size="xs">Your personal notes</Text>
+ <Text preset="body-xs">Your personal notes</Text>
  <Tooltip
  childNotInteractive
  text={

CHANGELOG.md

@@ -2,6 +2,52 @@
 
 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.
 
+## [14.0.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.12.0...v14.0.0) (2024-03-05)
+
+
+### ⚠ BREAKING CHANGES
+
+* remove Grid and Section from exports (#1876)
+* **Text:** remove deprecated props (#1873)
+* **Heading:** remove deprecated props and refactor usages (#1872)
+* **Link:** remove and reset deprecated props (#1871)
+* **Select:** remove deprecated props (#1870)
+* **Label:** remove deprecated props (#1868)
+* **InputField:** remove unused prop requiredLabel (#1869)
+* **InlineNotification:** remove deprecated props from component (#1867)
+* **Card:** deprecate orientation prop (#1866)
+* **Badge:** deprecate name prop on component (#1865)
+* **Skeleton:** deprecate .Rect subcomponent mapping (#1864)
+* **Tag:** remove deprecated props and update API (#1862)
+* **Tooltip:** remove deprecated props (#1861)
+* **Tabs:** combine Tab sub-component into Tabs
+* remove deprecated components
+* output a single, cjs build
+
+### Features
+
+* **Badge:** deprecate name prop on component ([#1865](https://github.com/chanzuckerberg/edu-design-system/issues/1865)) ([cff5d5e](https://github.com/chanzuckerberg/edu-design-system/commit/cff5d5e2d88e5414a821756db5b31e4fe1c4873e))
+* **Card:** deprecate orientation prop ([#1866](https://github.com/chanzuckerberg/edu-design-system/issues/1866)) ([bb160c1](https://github.com/chanzuckerberg/edu-design-system/commit/bb160c14e3a8a26ec2d4ff24a31b6d2f9fca3a98))
+* **Heading:** remove deprecated props and refactor usages ([#1872](https://github.com/chanzuckerberg/edu-design-system/issues/1872)) ([a5d6f76](https://github.com/chanzuckerberg/edu-design-system/commit/a5d6f76a333426ef84a68febf337cec5cdb8d1b9))
+* **InlineNotification:** remove deprecated props from component ([#1867](https://github.com/chanzuckerberg/edu-design-system/issues/1867)) ([efc6b43](https://github.com/chanzuckerberg/edu-design-system/commit/efc6b430dec5440789e35382707b574f5372e30f))
+* **InputField:** remove unused prop requiredLabel ([#1869](https://github.com/chanzuckerberg/edu-design-system/issues/1869)) ([f9d73dd](https://github.com/chanzuckerberg/edu-design-system/commit/f9d73dd2806448a01a4d452fa7bcfc4347a56309))
+* **Label:** remove deprecated props ([#1868](https://github.com/chanzuckerberg/edu-design-system/issues/1868)) ([907cc39](https://github.com/chanzuckerberg/edu-design-system/commit/907cc3966be4e519050c2a16c6f0cfb12509308e))
+* **Link:** remove and reset deprecated props ([#1871](https://github.com/chanzuckerberg/edu-design-system/issues/1871)) ([552945a](https://github.com/chanzuckerberg/edu-design-system/commit/552945a6ee161f0359f9db48123dbb94bec704ba))
+* remove deprecated components ([2538aa6](https://github.com/chanzuckerberg/edu-design-system/commit/2538aa67dc0605210812c9597ce1548bba41070f))
+* remove Grid and Section from exports ([#1876](https://github.com/chanzuckerberg/edu-design-system/issues/1876)) ([a0ec79a](https://github.com/chanzuckerberg/edu-design-system/commit/a0ec79a017bacb70f8c9043c3dcb72eb4da2ec31))
+* **Select:** remove deprecated props ([#1870](https://github.com/chanzuckerberg/edu-design-system/issues/1870)) ([e0ad463](https://github.com/chanzuckerberg/edu-design-system/commit/e0ad4632aacee1d107e658c977c77a5e733843d1))
+* **Skeleton:** deprecate .Rect subcomponent mapping ([#1864](https://github.com/chanzuckerberg/edu-design-system/issues/1864)) ([9d3ffec](https://github.com/chanzuckerberg/edu-design-system/commit/9d3ffecbf8a117a6b6534c2076275f4f1ea5e797))
+* **Tabs:** combine Tab sub-component into Tabs ([0479863](https://github.com/chanzuckerberg/edu-design-system/commit/0479863fd27a362aa16db701d96028c2f9a33b9d))
+* **Tag:** remove deprecated props and update API ([#1862](https://github.com/chanzuckerberg/edu-design-system/issues/1862)) ([dbfbaa3](https://github.com/chanzuckerberg/edu-design-system/commit/dbfbaa3c04369c7c144d724f3f2ff644b0130a33))
+* **Text:** remove deprecated props ([#1873](https://github.com/chanzuckerberg/edu-design-system/issues/1873)) ([13fbc18](https://github.com/chanzuckerberg/edu-design-system/commit/13fbc1808e3cb742ddabc33faa1b30516cde275c))
+* **Tooltip:** remove deprecated props ([#1861](https://github.com/chanzuckerberg/edu-design-system/issues/1861)) ([d444607](https://github.com/chanzuckerberg/edu-design-system/commit/d444607ad42bf6779d14fdf1b7f76d7ad316a285))
+
+
+### Bug Fixes
+
+* output a single, cjs build ([523130e](https://github.com/chanzuckerberg/edu-design-system/commit/523130ed29e411e6ef5d9add27f8b78c2736f88a))
+* remove unnecessary type definitions script ([be341c0](https://github.com/chanzuckerberg/edu-design-system/commit/be341c00d6114afbd06191053fa4411676c60eb2))
+
 ## [13.12.0](https://github.com/chanzuckerberg/edu-design-system/compare/v13.11.0...v13.12.0) (2024-03-04)
 
 

package.json

@@ -1,15 +1,13 @@
 {
  "name": "@chanzuckerberg/eds",
- "version": "13.12.0",
+ "version": "14.0.0",
  "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
  "author": "CZI <edu-frontend-infra@chanzuckerberg.com>",
  "homepage": "https://github.com/chanzuckerberg/edu-design-system",
  "license": "MIT",
+ "type": "commonjs",
  "exports": {
- ".": {
- "import": "./lib/index.js",
- "require": "./lib/index.cjs"
- },
+ ".": "./lib/index.js",
  "./index.css": "./lib/index.css",
  "./fonts.css": "./lib/tokens/fonts.css",
  "./tailwind.config": "./tailwind.config.ts"
@@ -40,9 +38,8 @@
  "eds-init-theme": "bin/eds-init.js"
  },
  "scripts": {
- "build": "yarn build:clean && yarn build:tokens && yarn build:declarations && yarn build:js && yarn copy-fonts-to-lib",
+ "build": "yarn build:clean && yarn build:tokens && yarn build:js && yarn copy-fonts-to-lib",
  "build:clean": "rm -rf lib/",
- "build:declarations": "tsc --emitDeclarationOnly --project tsconfig.build.json",
  "build:tokens": "rm -rf src/tokens-dist/ && node ./style-dictionary.config.js && yarn prettier-tokens-dist",
  "build:js": "rollup --config",
  "build:storybook": "storybook build -o storybook-static -s src/design-tokens/tier-1-definitions/fonts",