Merge branch 'main' into cass-gm-645

packages/styleguide/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [67.1.5](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-13)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ### [67.1.4](https://github.com/Codecademy/gamut/compare/@codecademy/[email protected]...@codecademy/[email protected]) (2024-08-07)
 
 **Note:** Version bump only for package @codecademy/styleguide

packages/styleguide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "67.1.4",
+  "version": "67.1.5",
   "author": "Codecademy Engineering",
   "dependencies": {
     "@codecademy/gamut": "56.1.3",

packages/styleguide/stories/Atoms/Animation.stories.mdx

@@ -34,12 +34,12 @@ import { RotationExample } from './Animation.examples.tsx';
   include={['rotated', 'degrees', 'height', 'width']}
 />
 
-## Rotation Example
+## Rotation example
 
 Animations should not be the click target of actions, but rather the container for the content you wish to animate.
 
 <Canvas>
-  <Story name="Rotation Example">
+  <Story name="Rotation example">
     {(args) => <RotationExample {...args} />}
   </Story>
 </Canvas>

packages/styleguide/stories/Atoms/Badge/Badge.stories.mdx

@@ -23,13 +23,13 @@ import { TertiaryFillExample } from './examples';
   }}
 />
 
-Badges are generally found next to interface elements that need to be called out. They are small Atoms that can either be used inline, or inside larger Molecules and Organisms.
+Badges are generally found next to interface elements that need to be called out. They are small atoms that can either be used inline, or inside larger molecules and organisms.
 
 ## Usage
 
 - Use Badges to display read-only information like statuses, attributes, and other emphasized information.
-- Use the `variant` and `size` properties to ensure your badges have the right visibility and visual hierarchy on your page.
-- Use an <LinkTo kind='Atoms/Icons'>Icon</LinkTo> to draw attention to the badge using the `icon` prop.
+- Use the `variant` and `size` properties to ensure your Badges have the right visibility and visual hierarchy on your page.
+- Use an <LinkTo kind='Atoms/Icons'>Icon</LinkTo> to draw attention to the Badge using the `icon` prop.
 - **Limit Badge text to 1–2 words if possible.** These elements are most effective when displaying short pieces of text.
 - **Do not use Badges for elements that are meant to be clickable or interactive**. Badges are fully rounded to distinguish themselves from elements such as <LinkTo kind='Atoms/Button'>Buttons</LinkTo>.
 
@@ -39,12 +39,12 @@ export const BadgeTemplate = (args) => (
 
 ## Variants
 
-We support the following variants of Badges: `primary`, `secondary`, `tertiary`, `tertiaryFill`, and `accent`.
+We support the following Badge variants: `primary`, `secondary`, `tertiary`, `tertiaryFill`, and `accent`.
 
-- **Greyscale Badges** provide different levels of priority for the `primary`, `secondary`, `tertiary`, and `tertiaryFill` variants.
+- **Greyscale** provides different levels of priority for the `primary`, `secondary`, `tertiary`, and `tertiaryFill` variants.
 - **Accent colors** like `accent` are meant to be used sparingly so they can stand out against other elements.
 
-Additional variants should designed with both <LinkTo kind='Foundations/ColorMode'>ColorModes</LinkTo> in mind. For example, the `accent` and `secondary` variants work against both light and dark backgrounds, while the `primary` and `tertiary`, and `tertiaryFill` variants both adapt to their ColorMode (which you can check out by using the toolbar at the top of this page!)
+Additional variants should be designed with both <LinkTo kind='Foundations/ColorMode'>ColorModes</LinkTo> in mind. For example, the `accent` and `secondary` variants work against both light and dark backgrounds, while the `primary` and `tertiary`, and `tertiaryFill` variants both adapt to their ColorMode (which you can check out by using the toolbar at the top of this page!)
 
 <Canvas>
   <Story name="primary" args={{ children: 'primary' }}>
@@ -90,7 +90,7 @@ We have two `size` options, which should be used according to their context:
   </Story>
 </Canvas>
 
-## Leading Icon
+## Leading icon
 
 Include the `icon` property when the icon reinforces the badge’s message and improves scannability. Since badges are inherently small, it's recommended to use Gamut's mini icons.
 
@@ -118,7 +118,7 @@ Include the `icon` property when the icon reinforces the badge’s message and i
   </Story>
 </Canvas>
 
-## Code Playground
+## Code playground
 
 <Canvas>
   <Story name="Badge">{(args) => <Badge {...args}>badge</Badge>}</Story>

packages/styleguide/stories/Atoms/Button/index.stories.mdx

@@ -71,7 +71,7 @@ All but CTA button support a size of either `normal` (default) or `small`.
 
 <br />
 
-## Writing Tips
+## Writing tips
 
 Writing words for a link or button? Above all else, make sure that the words alone make it clear where a button or link will take the user. Refer to the checklist below for guidance. For more tips and best practices, check out the full guide about <LinkTo id="ux-writing-component-guidelines-buttons-and-links--page">writing for buttons and links</LinkTo>.
 
@@ -98,31 +98,31 @@ Writing words for a link or button? Above all else, make sure that the words alo
 
 <br />
 
-## CTA Button
+## CTAButton
 
 <Canvas>
   <Story name="CTAButton">{(args) => <CTAButton {...args} />}</Story>
 </Canvas>
 
 <PropsTable exclude={['size']} story="CTAButton" />
 
-## Fill Button
+## FillButton
 
 <Canvas>
   <Story name="FillButton">{(args) => <FillButton {...args} />}</Story>
 </Canvas>
 
 <PropsTable story="FillButton" />
 
-## Stroke Button
+## StrokeButton
 
 <Canvas>
   <Story name="StrokeButton">{(args) => <StrokeButton {...args} />}</Story>
 </Canvas>
 
 <PropsTable story="StrokeButton" />
 
-## Text Button
+## TextButton
 
 **Note**: Our text buttons use bold formatting to differentiate themselves from normal text, as color alone does not meet the 3:1 contrast ratio required for accessibility. However, bold formatting may not be sufficient in all contexts, such as when placed alongside a bold heading.
 
@@ -134,7 +134,7 @@ In these cases, we recommend including a leading or trailing icon to further dis
 
 <PropsTable story="TextButton" />
 
-## Icon Button
+## IconButton
 
 You must pass a string for the `tip` prop to label your icon button. The `tipProps` prop is optional and can be used to customize the tooltip - for more information on `tooltip`s + `IconButton`s see the <LinkTo component="ToolTip">ToolTip page</LinkTo>.
 
@@ -155,7 +155,7 @@ You must pass a string for the `tip` prop to label your icon button. The `tipPro
 
 <PropsTable story="IconButton" />
 
-## Button Variants
+## Button variants
 
 We have 2 button color modes: `light` and `dark`.
 For different priority buttons we provide `primary` and `secondary` variants.
@@ -173,12 +173,12 @@ For different priority buttons we provide `primary` and `secondary` variants.
 </FillButton>
 ```
 
-## Inline Icon
+## Inline icons
 
 Our FillButtons, StrokeButtons, and TextButtons all support a single inline icon. You can align the icon to the left or right of the button text using the `iconPosition` prop. These icons should be from the mini set to be legible at a smaller size.
 
 <Canvas>
-  <Story name="Inline Icon">
+  <Story name="Inline icon">
     {() => (
       <GridBox gridTemplateColumns="1fr 1fr 1fr 3fr">
         <FillButton maxWidth="fit-content" icon={MiniArrowLeftIcon}>
@@ -199,18 +199,18 @@ Our FillButtons, StrokeButtons, and TextButtons all support a single inline icon
   </Story>
 </Canvas>
 
-### Light Mode
+### Light mode
 
 <Canvas>
-  <Story name="Light Mode">
+  <Story name="Light mode">
     <ButtonScale mode="light" />
   </Story>
 </Canvas>
 
-## Dark Mode
+## Dark mode
 
 <Canvas>
-  <Story name="Dark Mode">
+  <Story name="Dark mode">
     <ButtonScale mode="dark" />
   </Story>
 </Canvas>

packages/styleguide/stories/Atoms/Card.stories.mdx

@@ -49,7 +49,7 @@ We provide 5 style variants for Card.
   </Story>
 </Canvas>
 
-## Shadow Variants
+## Shadow variants
 
 We provide 3 style variants for shadow.
 
@@ -65,7 +65,7 @@ We provide 3 style variants for shadow.
   </Story>
 </Canvas>
 
-### Shadow Variant "outline" with color
+### Shadow variant outline with color
 
 The outline color will inherit the color of the card.
 
@@ -78,9 +78,9 @@ The outline color will inherit the color of the card.
   </Story>
 </Canvas>
 
-# Color Mode as Default
+# ColorMode as default
 
-Card elements respond to the current <LinkTo id="foundations-color-mode--page">Color Mode</LinkTo> they are used in. Note that their background color will match the background of their context and secondary colors are used for their hover effect. As these are not the typical inverse effects we utilize in color mode, please check with your design team before use.
+Card elements respond to the current <LinkTo id="foundations-color-mode--page">ColorMode</LinkTo> they are used in. Note that their background color will match the background of their context and secondary colors are used for their hover effect. As these are not the typical inverse effects we utilize in color mode, please check with your design team before use.
 
 <Story name="dynamic">
   {() => (

packages/styleguide/stories/Atoms/FloatingCard.stories.mdx

@@ -20,7 +20,7 @@ import { LinkTo, PropsTable } from '~styleguide/blocks';
 
 <br />
 
-## Usage Guidelines
+## Usage guidelines
 
 - They have patterned drop shadow to indicate that are outside the normal document flow.
 - This is a shared component for `Toast`, `Dialog`, and `Coachmark`; before using this component directly please check that these components do not cover your use case!
@@ -48,12 +48,12 @@ FloatingCards can optionally display a beak. This is used to indicate a point of
 
 <br />
 
-## Shadow Direction
+## Shadow direction
 
 There are 2 types of shadow directions. By default, FloatingCards is set with a shadow offset to the bottom-left.
 
 <Canvas>
-  <Story name="FloatingCard Shadow">
+  <Story name="FloatingCard shadow">
     {() => (
       <GridBox gridAutoFlow="column" columnGap={24} py={16}>
         {['bottomLeft', 'bottomRight'].map((shadow) => (
@@ -64,7 +64,7 @@ There are 2 types of shadow directions. By default, FloatingCards is set with a
   </Story>
 </Canvas>
 
-## Shadow Pattern
+## Shadow pattern
 
 We can specify the pattern of the FloatingCard shadow by providing the `pattern` prop with the imported pattern from `@codecademy/gamut-patterns`.
 
@@ -83,7 +83,7 @@ export const MyComponent: React.FC = () => {
 };
 ```
 
-## Card Wrapper Display
+## Card wrapper display
 
 The wrapper display may need to be changed from the default `inline-block`
 
@@ -100,7 +100,7 @@ export const MyComponent: React.FC = () => {
 };
 ```
 
-## Code Playground
+## Code playground
 
 Edit attributes and see what’s possible to do with this component or get the exact output you want.
 

packages/styleguide/stories/Atoms/FormElements/FormGroup.stories.mdx

@@ -29,7 +29,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <PropsTable story="FormGroup" />
 
-### Form Group htmlFor
+### FormGroup + htmlFor
 
 It is best to provide `htmlFor` to both the FormGroup + inner form element to make it super accessible. If this is not provided, the FormLabel will default to `<div>`. If an `htmlFor` is provided, it will be a `<label>`.
 
@@ -50,7 +50,7 @@ It is best to provide `htmlFor` to both the FormGroup + inner form element to ma
   </Story>
 </Canvas>
 
-### Form Group States
+### FormGroup states
 
 <Canvas>
   <Story name="FormGroupRequired">
@@ -91,7 +91,7 @@ It is best to provide `htmlFor` to both the FormGroup + inner form element to ma
   </Story>
 </Canvas>
 
-### Form Group with infotip
+### FormGroup + InfoTip
 
 A field can include [our existing `InfoTip`](/?path=/docs/atoms-tooltip--tool-tip).
 

packages/styleguide/stories/Atoms/FormElements/FormGroupLabel.stories.mdx

@@ -22,7 +22,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <PropsTable story="FormGroupLabel" />
 
-### Label Variants
+### Label variants
 
 <Canvas>
   <Story name="FormGroupLabelLarge">

packages/styleguide/stories/Atoms/FormInputs/Checkbox.stories.mdx

@@ -36,7 +36,7 @@ import { CheckboxExample } from './examples';
 
 <PropsTable story="Checkbox" />
 
-### Controlled Checkboxes
+### Controlled checkboxes
 
 Our Checkboxes are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state and onChange, for example:
 
@@ -80,7 +80,7 @@ const CustomCheckbox: React.FC<CustomCheckboxProps> = ({
 };
 ```
 
-### Input States
+### Input states
 
 <Canvas>
   <Story
@@ -133,12 +133,12 @@ const CustomCheckbox: React.FC<CustomCheckboxProps> = ({
   </Story>
 </Canvas>
 
-### Spacing Variants
+### Spacing variants
 
 If you need to checkboxes to fit into a smaller space, you can use our `tight` spacing prop for checkboxes that are a bit closer together.
 
 <Canvas>
-  <Story name="Tight Spacing">
+  <Story name="Tight spacing">
     <Checkbox
       checked
       readOnly

packages/styleguide/stories/Atoms/FormInputs/Input.stories.mdx

@@ -32,7 +32,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
 
 <PropsTable story="Input" />
 
-### Input Types
+### Input types
 
 <Canvas>
   <Story
@@ -72,7 +72,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
   </Story>
 </Canvas>
 
-### Input States
+### Input states
 
 <Canvas>
   <Story
@@ -123,7 +123,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
   </Story>
 </Canvas>
 
-### Form Groups + Inputs
+### FormGroup + Input
 
 <Canvas>
   <Story
@@ -193,12 +193,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
   </Story>
 </Canvas>
 
-### Custom Icons
+### Custom icons
 
 You can use a custom icon (from gamut-icons) in your Input elements. The error and valid icons will overwrite the custom icon if those states are applied to the element.
 
 <Canvas>
-  <Story name="Input Custom Icons">
+  <Story name="Input custom icons">
     <GridBox columnGap={32} gridAutoColumns="1fr" gridAutoFlow="column">
       <FormGroup label="i see all">
         <Input
@@ -260,7 +260,7 @@ export const CustomFormIconGroup: React.FC = ({
 };
 ```
 
-### iFrame Inputs
+### iFrame + Input
 
 In order to style iframe Inputs, we leverage the [withComponent](https://styled-components.com/docs/api) API from styled-components and our iFrameWrapper. You will need to do some further work with the iframe to make it behave but this will get you most of the way there.