Merge pull request #2018 from chanzuckerberg/release-v15.1.0

## [15.1.0](v15.0.1...v15.1.0) (2024-07-15)

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

### Features

* add runtime warning/errors to components ([#2007](#2007)) ([661130b](661130b))
* **InputField:** add show/hide button for password field type ([#2006](#2006)) ([52d9ca0](52d9ca0))
* **Modal:** add height property to modal API ([#2011](#2011)) ([8d0c68f](8d0c68f))


### Bug Fixes

* **Icon:** update pencil icon to latest design ([#2016](#2016)) ([cb8d1a7](cb8d1a7))
* **Link:** apply font weight to standalone sizes ([#2015](#2015)) ([2e47271](2e47271))
* **Select:** expose generic types to allow by to pass type checks ([#2008](#2008)) ([421c91b](421c91b))

.storybook/Theme.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create';
+import { create } from '@storybook/theming';
 
 // Docs: https://storybook.js.org/docs/7.6/configure/theming
 // Keys from https://github.com/storybookjs/storybook/blob/next/code/lib/theming/src/themes/light.ts

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import Grid from '../../../../src/components/Grid';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
+import Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1Animation extends Component {

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import Grid from '../../../../src/components/Grid';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
+import Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1Borders extends Component {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import '../DesignTokens.css';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { ColorList } from '../../ColorList/ColorList';
+import Section from '../../Section';
 
 export const Tier1Colors = () => {
   const getListItems = (filterTerm: string, figmaTokenHeader: string) =>

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import Grid from '../../../../src/components/Grid';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
+import Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export const FontFamilies = () => (

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import Grid from '../../../../src/components/Grid';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
+import Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export const FontWeights = () => (

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import Grid from '../../../../src/components/Grid';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
+import Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1Shadows extends Component {

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import Grid from '../../../../src/components/Grid';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
+import Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1Sizes extends Component {

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

@@ -1,10 +1,10 @@
 import { at, forEach } from 'lodash';
 
 import React, { Component } from 'react';
-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 Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1TypographyPresets extends Component {

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import Grid from '../../../../src/components/Grid';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
+import Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export class Tier1TypographyTokens extends Component {

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

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

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

@@ -1,8 +1,8 @@
 import type { StoryObj } from '@storybook/react';
 import React from 'react';
-import Section from '../../../../src/components/Section';
 import filterTokens from '../../../util/filterTokens';
 import { ColorList } from '../../ColorList/ColorList';
+import Section from '../../Section';
 
 export default {
   title: 'Design Tokens/Tier 2: Usage/Colors',

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

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

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

@@ -2,12 +2,12 @@ import type { StoryObj } from '@storybook/react';
 import { at, capitalize, forEach } from 'lodash';
 
 import React from 'react';
-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
 import flatten from '../../../util/flattenToken';
+import Grid from '../../Grid';
+import Section from '../../Section';
 import { TokenSpecimen } from '../../TokenSpecimen/TokenSpecimen';
 
 export default {

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

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

.storybook/components/Docs/GettingStarted.mdx

@@ -19,7 +19,6 @@ The navigation consists of:
 - **Documentation** are a collection of guidelines and explanations for all the written content on this site.
 - **Design Tokens** are the reusable CSS variables that can be themed in your application. They are grouped into tiers which describe the specificity of the tokens (with tier one values corresponding to basic definitions, and tier two corresponing to use cases referencing the tier one values, etc.)
 - **Components** are all the exported offerings of EDS, combined in one list. They consist of various atoms, molecules, and organisms that can be used in a product, along with relevant documentation, implementation examples controls, and <kbd>tags</kbd> (describing the component type and status)
-- **Pages** are a place to demonstrate layouts with other themes and presets applied. Right now, it houses a layout example using our nascent wireframe theme (used when prototyping).
 
 ### Storybook Features
 

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

@@ -58,16 +58,17 @@ EDS follows [BEM](http://getbem.com/introduction/) syntax for component class na
 
 - **Block** is the primary component block (e.g. `.button`)
 - **Element** is a child of the primary block (e.g. `.button__text`)
-- **Modifier** is a variation of a component style (e.g. `.button--secondary`)
+- **Modifier** is a variation of a component style (e.g. `.button--variant-secondary`)
 
-BEM conventions result in an explicit (and yes, sometimes verbose) class string that allows developers to quickly deduce what role any selector plays.
+BEM conventions result in an explicit (and yes, sometimes verbose) class string that allows developers to quickly deduce what role any selector plays. One
+note about **Modifier** class name parts; by convention in EDS, modifiers should include the property name with the value, for clarity, e.g., `[block]--[propName]-[propValue]`
 
 Let's take a look at the following example:
 
-`.button--full-width`
+`.button--width-full`
 
 - `button` is the block name (“Block” being the “B” in BEM)
-- `--full-width` is a modifier, indicating a stylistic variation of the block (“Modifier” being the “M” in BEM)
+- `--width-full` is a modifier, indicating a stylistic variation of the block (“Modifier” being the “M” in BEM)
 
 Here's another example:
 
@@ -116,7 +117,7 @@ We use focus-visible for most focus states. This ensures that the focus state wi
 However, we currently support some browser versions that do not support the focus-visible CSS feature, so we also use a fallback block in conjunciton with focus-visible.
 
 ```css
-.button--primary {
+.button--rank-primary {
   &:focus-visible {
     @mixin focus;
   }
@@ -132,7 +133,7 @@ However, we currently support some browser versions that do not support the focu
 #### States and pseudo-selectors
 
 ```css
-.button--primary {
+.button--rank-primary {
   background: var(--eds-theme-color-background-brand-primary-strong);
 
   &:hover,
@@ -158,22 +159,22 @@ Use the following conventions:
   /* button code */
 }
 
-.button--secondary {
+.button--rank-secondary {
   /* button--secondary styles */
 }
 
-.button--sm {
+.button--size-sm {
   /* button--sm styles */
 }
 
 .button__text {
   /* button__text styles */
 
-  .button--secondary & {
+  .button--rank-secondary & {
     /* button__text within button--secondary styles */
   }
 
-  .button--sm & {
+  .button--size-sm & {
     /* button__text within button--sm styles */
   }
 }
@@ -223,7 +224,7 @@ For example:
 /**
  * Full width button.
  */
-.button--full-width {
+.button--width-full {
   background: red;
   /* Pushes the button away from the other content because it lives in a flexbox container */
   margin-right: auto;
@@ -348,7 +349,7 @@ import { Icon } from '../Icon/Icon';
 ### Prop Type definitions
 
 ```tsx
-export interface Props {
+export interface ComponentNameProps {
   /**
    * Toggles the ability to dismiss the banner via an close button in the top right of the banner
    */
@@ -427,7 +428,7 @@ export const ComponentName = ({
   of,
   props
   ...other
-}: Props) => {
+}: ComponentNameProps) => {
   ...
 }
 ```
@@ -497,7 +498,7 @@ The last thing that appears above the `return` statement is the `componentClassN
 
 ```tsx
 const componentClassName = clsx(styles['my-component'], className, {
-  [styles['my-component--lg']]: size === 'lg',
+  [styles['my-component--size-lg']]: size === 'lg',
 });
 ```
 
@@ -552,7 +553,7 @@ EDS adheres to the following API naming conventions:
 
 The default option should be the one most commonly used in order to reduce friction for developers using the components.
 
-- `variant` should be used for primary _stylistic_ variations of a component, such as (e.g. `<Card variant="bordered">`). `variant` should be used if there is primarily one variable used to manipulate the component style.
+- `variant` should be used for primary _stylistic_ variations of a component, such as (e.g. `<Card topStripe="medium">`). `variant` should be used if there is primarily one variable used to manipulate the component style.
 - `size` should be used for adjusting size attributes (e.g. `<Button rank="secondary" size="sm">` or `<Button size="md"`>). Use abbreviations for sizes (ex: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`).
 - `isDisabled` boolean should be used to control the interactivity of a component (e.g. `<Button isDisabled />`)
 

.storybook/components/Docs/Guidelines/Components.mdx

@@ -4,7 +4,8 @@ import { Canvas, Meta } from '@storybook/blocks';
 
 # Working with EDS Components
 
-This codebase contains all the components to successfully build the presentation view of product screens. These components are built to exactly match those seen in design mockups.
+This codebase contains all the tokens and components to successfully build the presentation
+view of product screens. These components are built to exactly match those seen in design mockups.
 
 ## Working with components
 
@@ -43,7 +44,7 @@ If you have questions or are experiencing any issues when working with EDS's com
 ### Creating a component
 
 1. To create a component, run `yarn plop` in the command line.
-2. The command will ask, "What is your component name?" Add your component name (you can either type `PageHeader` or `page header` and it will automatically generate the proper casing).
+2. The command will ask, "What is your component name?" Add your component name (you can either type `ComponentName` or `Component name` and it will automatically generate the proper casing).
 3. Edit component source code in accordance with [EDS's code guidelines][code-guidelines]
 4. Create relevant stories for all component variants
 

.storybook/components/Docs/Guidelines/Icons.mdx

@@ -10,6 +10,9 @@ EDS provides utilitarian UI icons (e.g. magnifying glass, menu, triangles, caret
 
 ## Working with Icons
 
+Icons are provided thru the `<Icon />` component, and use names that map to what the icon is (and not what it may be used for). Icons also have a naming
+structure to avoid unnecessary differences in the naming, separated by hyphens. See the icon component in storybook for examples.
+
 ### Adding a new icon
 
 - Retrieve the icons from a design partner (e.g., from Figma, or from file sharing service like Google drive)

src/components/Section/Section.tsx → .storybook/components/Section/Section.tsx

@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
-import type { HeadingElement } from '../Heading';
-import Heading from '../Heading';
+import { Heading } from '../../../src/';
+import type { HeadingElement } from '../../../src/components/Heading';
 import styles from './Section.module.css';
 export interface Props {
   /**

.storybook/preview.tsx

@@ -86,6 +86,7 @@ export const parameters: Preview['parameters'] = {
     ...createInitialReleaseConfig('1.0'),
     ...createCurrentReleaseConfig('1.3'),
     ...createCurrentReleaseConfig('2.0'),
+    ...createCurrentReleaseConfig('2.1'),
     implementationExample: {
       styles: {
         backgroundColor: '#ffffff',

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.1.0](https://github.com/chanzuckerberg/edu-design-system/compare/v15.0.1...v15.1.0) (2024-07-15)
+
+
+### Features
+
+* add runtime warning/errors to components ([#2007](https://github.com/chanzuckerberg/edu-design-system/issues/2007)) ([661130b](https://github.com/chanzuckerberg/edu-design-system/commit/661130b6917d3f80831863f6e3e447a35b048795))
+* **InputField:** add show/hide button for password field type ([#2006](https://github.com/chanzuckerberg/edu-design-system/issues/2006)) ([52d9ca0](https://github.com/chanzuckerberg/edu-design-system/commit/52d9ca04dd2ecf9b0c492e4b541e787cf8fd9860))
+* **Modal:** add height property to modal API ([#2011](https://github.com/chanzuckerberg/edu-design-system/issues/2011)) ([8d0c68f](https://github.com/chanzuckerberg/edu-design-system/commit/8d0c68f6d91910590872e10e9dd5fe4671f4807b))
+
+
+### Bug Fixes
+
+* **Icon:** update pencil icon to latest design ([#2016](https://github.com/chanzuckerberg/edu-design-system/issues/2016)) ([cb8d1a7](https://github.com/chanzuckerberg/edu-design-system/commit/cb8d1a787f33e6ecb659f79ee38b2933df18a247))
+* **Link:** apply font weight to standalone sizes ([#2015](https://github.com/chanzuckerberg/edu-design-system/issues/2015)) ([2e47271](https://github.com/chanzuckerberg/edu-design-system/commit/2e47271d110735102ebd00daf7bf95a5a0cdf237))
+* **Select:** expose generic types to allow by to pass type checks ([#2008](https://github.com/chanzuckerberg/edu-design-system/issues/2008)) ([421c91b](https://github.com/chanzuckerberg/edu-design-system/commit/421c91b41d2691441f94bd71801bbfdeca529d5f))
+
 ### [15.0.1](https://github.com/chanzuckerberg/edu-design-system/compare/v15.0.0...v15.0.1) (2024-07-02)
 
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Chan Zuckerberg Initiative, LLC
+Copyright (c) 2024 Chan Zuckerberg Initiative, LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,7 +2,11 @@
 
 ![Test CI](https://github.com/chanzuckerberg/edu-design-system/actions/workflows/test.yml/badge.svg) [![Release](https://github.com/chanzuckerberg/edu-design-system/actions/workflows/release.yml/badge.svg)](https://github.com/chanzuckerberg/edu-design-system/actions/workflows/release.yml) [![codecov](https://codecov.io/gh/chanzuckerberg/edu-design-system/branch/main/graph/badge.svg)](https://codecov.io/gh/chanzuckerberg/edu-design-system)
 
-Education Design System (EDS) is a repository of [presentational](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) components used to build React-based products for [Chan Zuckerberg Initiative](https://chanzuckerberg.com/education/).
+The Education Design System (EDS) is a repository of building blocks, implementing the [Chan Zuckerberg Initiative Education](https://chanzuckerberg.com/education/) Design System. It contains:
+- Design Tokens defining the color, sizes, and other details used in the system
+- Tooling/Configuration for using and updating the tokens in a consuming application
+- [Presentational](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) components implementing the common controls provided by the EDS toolkit
+- Guidelines for creating recipes using EDS, composing the above components
 
 ## Installation