`. If an `htmlFor` is provided, it will be a `
`.
@@ -50,7 +50,7 @@ It is best to provide `htmlFor` to both the FormGroup + inner form element to ma
-### Form Group States
+### FormGroup states
@@ -91,7 +91,7 @@ It is best to provide `htmlFor` to both the FormGroup + inner form element to ma
-### Form Group with infotip
+### FormGroup + InfoTip
A field can include [our existing `InfoTip`](/?path=/docs/atoms-tooltip--tool-tip).
diff --git a/packages/styleguide/stories/Atoms/FormElements/FormGroupLabel.stories.mdx b/packages/styleguide/stories/Atoms/FormElements/FormGroupLabel.stories.mdx
index 97c1095b0b..fe68ae2b76 100644
--- a/packages/styleguide/stories/Atoms/FormElements/FormGroupLabel.stories.mdx
+++ b/packages/styleguide/stories/Atoms/FormElements/FormGroupLabel.stories.mdx
@@ -22,7 +22,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
diff --git a/packages/styleguide/stories/Atoms/FormInputs/Checkbox.stories.mdx b/packages/styleguide/stories/Atoms/FormInputs/Checkbox.stories.mdx
index 6ecd6cc049..7b02852c7e 100644
--- a/packages/styleguide/stories/Atoms/FormInputs/Checkbox.stories.mdx
+++ b/packages/styleguide/stories/Atoms/FormInputs/Checkbox.stories.mdx
@@ -36,7 +36,7 @@ import { CheckboxExample } from './examples';
= ({
};
```
-### Input States
+### Input states
= ({
-### 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.
-
+
-### Input States
+### Input states
-### Form Groups + Inputs
+### FormGroup + Input
-### 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.
-
+
-### Custom labels and InfoTips
+### Custom labels + InfoTip
The `label` is a `ReactNode`, making it customizable outside of a standard text label. If you are including an `InfoTip` , you should include it as the infotip prop to ensure it isn't repeated by screen readers.
diff --git a/packages/styleguide/stories/Atoms/FormInputs/Select.stories.mdx b/packages/styleguide/stories/Atoms/FormInputs/Select.stories.mdx
index 6514eebf45..d2d44a0e0e 100644
--- a/packages/styleguide/stories/Atoms/FormInputs/Select.stories.mdx
+++ b/packages/styleguide/stories/Atoms/FormInputs/Select.stories.mdx
@@ -56,7 +56,7 @@ export const selectObject = {
-### Select Size Variant
+### Select size variant
-### Form Group + Select
+### FormGroup + Select
-### Events and Controlled Components
+### Events and controlled components
Instead of a standard HTML Select event return, SelectDropdown returns the selected option. This is formatted as `{label: 'labelText', value: 'valueText' }`. Your event functions should be formatted as `(event) => changeHandler(event.value)` instead of `(event) => changeHandler(event.target.value)`.
@@ -162,7 +162,7 @@ export const CustomDropdown: React.FC = ({
};
```
-### Form Group + Select
+### FormGroup + SelectDropdown
`SelectDropdown` formats nicely in FormGroups and reflects error states. Make sure you provide an htmlFor to the `FormGroup` and a `name` to the `SelectDropdown` for maximum accessibility.
@@ -205,7 +205,7 @@ export const CustomDropdown: React.FC = ({
-### Size Variant
+### Size variant
We have a smaller SelectDropdown for more compact spaces.
@@ -372,12 +372,12 @@ You can chose how options will be shown in the dropdown. 6 is the default limit
-### SelectDropdown Option Variants
+### SelectDropdown option variants
You may need to add additional info to your dropdowns, like disabled options, option subtitles, or group dividers
-
+
{() =>
@@ -465,7 +465,7 @@ export const SelectDropdownOptionVariantsExample: React.FC = () => (
);
```
-### SelectDropdown Multiple Select
+### SelectDropdown multiple select
To add some pizzazz to your dropdown, you can add any of our gamut-icons to your options.
@@ -501,7 +501,7 @@ export const SelectDropdownMultipleExample: React.FC = () => (
);
```
-### SelectDropdown Option Icons
+### SelectDropdown option icons
To add some pizzazz to your dropdown, you can add any of our gamut-icons to your options.
diff --git a/packages/styleguide/stories/Atoms/FormInputs/TextArea.stories.mdx b/packages/styleguide/stories/Atoms/FormInputs/TextArea.stories.mdx
index 8f7cbc176a..8fa4247b85 100644
--- a/packages/styleguide/stories/Atoms/FormInputs/TextArea.stories.mdx
+++ b/packages/styleguide/stories/Atoms/FormInputs/TextArea.stories.mdx
@@ -30,7 +30,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
diff --git a/packages/styleguide/stories/Atoms/Icons/Mini.stories.mdx b/packages/styleguide/stories/Atoms/Icons/Mini.stories.mdx
index 67bfc12eed..8ba4d35c57 100644
--- a/packages/styleguide/stories/Atoms/Icons/Mini.stories.mdx
+++ b/packages/styleguide/stories/Atoms/Icons/Mini.stories.mdx
@@ -35,7 +35,7 @@ Our icons by using standardized with a viewBox size of `"0 0 16 16"`. Icons shou
All of our Icons are not minified by default, and optimized by [SVGO](https://github.com/svg/svgo) before build time. We like to preserve the source URL as well as any relevent comments or metadata within these SVGs.
- {(args) =>
+ {(args) =>
-icon.svg`.
+5. Run `yarn build-all && yarn start` to see it be added to Storybook. It will by default be added to the `Interface` section alphabetically, however you may change this in the config.
+6. Make a PR describing where you got the Icon, what its use is and a description of its naming choice.
+
## Sandbox
-
+
{({ iconName, ...args }) => {
const IconComponent = ICONS[iconName];
return
-
+
{({ illustration, ...args }) => {
const IllustrationComponent = illustrations[illustration];
return
- {InvertAxisTemplate.bind({})}
+ {InvertAxisTemplate.bind({})}
### `offset`
@@ -103,7 +103,7 @@ Addition pixel offset from center in the direction of the alignment (e.g. top-le
-### Individual Axis offsets `x` and `y`
+### Individual axis offsets `x` and `y`
Absolute offset values irrespective of the relative position. (e.g. x={-4} will be 4 pixels to the left in every position unlike offset).
@@ -113,7 +113,7 @@ Absolute offset values irrespective of the relative position. (e.g. x={-4} will
-## Code Playground
+## Code playground
Edit attributes and see what’s possible to do with this component or get the exact output you want.
diff --git a/packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx b/packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx
index 2a13fcffd1..d6fadc55f7 100644
--- a/packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx
+++ b/packages/styleguide/stories/Atoms/ProgressBar/index.stories.mdx
@@ -61,7 +61,7 @@ percentage label.
This is a variant of the ProgressBar that has a transparent background and bordered look with colors based on the current color mode.
-### Dark Mode
+### Dark mode
-### Light Mode
+### Light mode
-## Minimum Percent
+## Minimum percent
Some bars (generally small ones) should display at least a little bit of
progress, even if the technical progress number is zero. You can use the
`minimumPercent` prop for a minimum visual width percentage.
- {(args) =>
+ {(args) =>
## Pattern background
@@ -113,7 +113,7 @@ progress, even if the technical progress number is zero. You can use the
Use components from `@codecademy/gamut-patterns` for a pattern background.
Here we are using the `DiagonalARegular` pattern in navy in the large ProgressBar and the `DiagonalADense` pattern in the smaller ProgressBar.
-### Stripes Regular
+### Stripes regular
-### Stripes Dense
+### Stripes dense
-
+
{(args) => (
e.target.blur()} />
@@ -43,12 +43,12 @@ Tags have `default` and `gray` color variants that work in color mode. You can a
-## Truncated Tags
+## Truncated tags
When tag content exceeds the width of its container, it is truncated.
-
+
{() => (
I am long tag yes I am much am a very long tag
@@ -57,13 +57,13 @@ When tag content exceeds the width of its container, it is truncated.
-## Dismissable Tags Example
+## Dismissable tag example
- {() =>
+ {() =>
-## Code Playground
+## Code playground
{(args) =>
diff --git a/packages/styleguide/stories/Atoms/Toggle.stories.mdx b/packages/styleguide/stories/Atoms/Toggle.stories.mdx
index 36a5d771a2..d1ee91f5e6 100644
--- a/packages/styleguide/stories/Atoms/Toggle.stories.mdx
+++ b/packages/styleguide/stories/Atoms/Toggle.stories.mdx
@@ -24,7 +24,7 @@ import {
args={{ onChange: () => null }}
/>
-## Usage Guidelines
+## Usage guidelines
- Toggles are functionally similar to Checkboxes, as they both display whether they are checked or not.
- Also like our Checkboxes, our Toggles are [controlled components](https://reactjs.org/docs/forms.html#controlled-components), so their checked value must be controlled by an external state and onChange.
@@ -47,7 +47,7 @@ import {
-## Color Variants
+## Color variants
Toggles adapt to the appropriate color mode, taking on `hyper` in light mode and `yellow` in dark mode. Toggle the mode in Storybook to see them change!
@@ -89,7 +89,7 @@ Disabling the input will change the opacity and cursor but still denote the curr
-## Component Labels
+## Component labels
Labels can also be React components
@@ -106,7 +106,7 @@ Labels can also be React components
-## HTML Element
+## HTML element
Our Toggles default to being `input` elements, but can also be the `button` element.
@@ -116,7 +116,7 @@ Our Toggles default to being `input` elements, but can also be the `button` elem
If you use voiceover on either of the below, you will hear the difference this makes for accessibility.
-
+
{(args) =>
-## Interactive Examples
+## Interactive examples
-## Playground Example
+## Playground example
diff --git a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx
index a7dbdeaf4b..40b47a7ece 100644
--- a/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx
+++ b/packages/styleguide/stories/Foundations/ColorMode/index.stories.mdx
@@ -35,11 +35,11 @@ Gamut components are built using these aliases instead of referring to specific
- Colors usage more meaningful when reading through code as aliases hint to usage.
- Dead simple configuration.
-### Light Mode
+### Light mode
-### Solid Color Swatches
+### Solid color swatches
Swatch colors are accessible with a dashcase key `theme.colors['${color}-${weight}']`. Here's a list of all the solid swatches available.
@@ -73,7 +73,7 @@ Swatch colors are accessible with a dashcase key `theme.colors['${color}-${weigh
@@ -106,7 +106,7 @@ For more on Color Modes please checkout the [full color mode documentation](/?pa
**Example**
-### Dark Mode
+### Dark mode
@@ -121,7 +121,7 @@ export const sampleText = 'Example Text';
export const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
`;
-### Font Family
+### Font family
**Key**: `theme.fontFamily`
@@ -129,7 +129,7 @@ export const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, s
-### Font Size
+### Font size
**Key**: `theme.fontSize`
@@ -137,7 +137,7 @@ export const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, s
-### Font Weight
+### Font weight
**Key**: `theme.fontWeight`
@@ -145,7 +145,7 @@ export const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, s
FlexBox component that extends Box with extra props for common flex configurations.
-## Usage Guidelines
+## Usage guidelines
- Use this component if you need specific flex behaviors that can only be used by `flex` and `inline-flex` elements.
- Do not use this component if you want access to flex child props like `flex` or `alignSelf` as most components will have access to these props directly!
@@ -38,7 +38,7 @@ FlexBox comes with a few helpful boolean props to make configuration easier (in
Box with added flex prop
## Example
-
+
{() => {
const elProps = {
border: 1,
diff --git a/packages/styleguide/stories/Layouts/Box/index.stories.mdx b/packages/styleguide/stories/Layouts/Box/index.stories.mdx
index 67b1653dd2..813dad85db 100644
--- a/packages/styleguide/stories/Layouts/Box/index.stories.mdx
+++ b/packages/styleguide/stories/Layouts/Box/index.stories.mdx
@@ -36,11 +36,11 @@ specific components to handle those in addition to everything that Box does!
-## Container Examples
+## Container examples
So far we've covered examples of using `
{(args) =>
-## Variant: Wide
+## Variant: wide
Use `ContentContainer` to keep page _content_ at a consistent maximum content width across various screen sizes and zooms.
See [the Student Center](https://codecademy.com/student-center) for an example.
@@ -42,10 +42,10 @@ See [the Student Center](https://codecademy.com/student-center) for an example.
-## Code Playground
+## Code playground
-
+
{(args) =>
diff --git a/packages/styleguide/stories/Layouts/LayoutGrid.stories.mdx b/packages/styleguide/stories/Layouts/LayoutGrid.stories.mdx
index cfbd06fd65..80708d565c 100644
--- a/packages/styleguide/stories/Layouts/LayoutGrid.stories.mdx
+++ b/packages/styleguide/stories/Layouts/LayoutGrid.stories.mdx
@@ -57,7 +57,7 @@ export const columns = [
responsive size ,allowing you to define gaps at each breakpoint.
-
+
{(args) => (
{[
@@ -82,10 +82,10 @@ Both these properties can take a
+
{(args) => (
{new Array(12).fill({ size: 3 }).map((props, i) => (
@@ -104,7 +104,7 @@ Columns may be offset from the left by numbers within the [0-12] scale.
As with column and row gaps, those numbers may be static or responsive.
-
+
{(args) => (
{[
@@ -130,7 +130,7 @@ As with column and row gaps, those numbers may be static or responsive.
Columns may be span multiple rows. Make sure you have a consistent row height when using rowspans.
-
+
{(args) => {
const children = new Array(12).fill({ size: 3 }).map((props, i) => {
const span = {
diff --git a/packages/styleguide/stories/Meta/Best Practices.stories.mdx b/packages/styleguide/stories/Meta/Best Practices.stories.mdx
index a6ad5b7cd7..841d3db18f 100644
--- a/packages/styleguide/stories/Meta/Best Practices.stories.mdx
+++ b/packages/styleguide/stories/Meta/Best Practices.stories.mdx
@@ -5,7 +5,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
= ({
}) => = ({ /* ... */ }) => {
};
```
-#### Props Documentation
+#### Props documentation
With the exception of widespread, self-documenting props such as `className`, please include a sentence cased description of the prop's intent.
React props on the component will be picked up by Storybook and added to the component's documentation story.
@@ -55,7 +55,7 @@ limit: number;
- Consider starting comments for booleans with _"Whether "_.
- Props such as `className` that are common to many components generally don't need to be documented.
-#### Class Names
+#### Class names
Most components are fairly simple, and consist of one container element with some children.
In that case it's reasonable to add a `className?: string` prop so that consumers can apply positioning styles onto the element.
@@ -73,7 +73,7 @@ Most components that have configurable themes use one of two APIs:
We generally prefer components start off with the `style` prop when first created, to allow consumers to more easily flesh out how we'd want to use them.
As we learn more and restrict component usage over time, we might switch to `theme`.
-### Unit Tests
+### Unit tests
Your component should have unit tests in a `__tests__/MyComponent-test.tsx` file within its directory.
Use Enzyme's `mount` to test it.
@@ -85,14 +85,14 @@ We generally try to unit test all component logic, with the exception of class n
All components should have Storybook stories showing their use.
See Stories for documentation.
-## Pull Requests
+## Pull requests
Please fill out the pull request template, including links to the corresponding Abstract design and JIRA ticket.
> 😉 Protip: You can use a [Draft PR](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests#draft-pull-requests) to still run CI jobs.
> That includes deploying a Netlify preview and publishing alpha package versions to npm.
-### Publishing Updates
+### Publishing updates
If you know your PR has breaking changes in at least one downstream repository:
@@ -104,7 +104,7 @@ If you know your PR has breaking changes in at least one downstream repository:
If your PR contains breaking changes that might affect other users, please mention them in the `#frontend` Slack channel.
-## Creating a New Package
+## Creating a new package
1. Copy and paste a similar existing package under `packages/`
2. Modify its `package.json`'s `dependencies`, `description`, and `name` to match your new package
diff --git a/packages/styleguide/stories/Meta/FAQs.stories.mdx b/packages/styleguide/stories/Meta/FAQs.stories.mdx
index f393a0d278..cc4e8481c9 100644
--- a/packages/styleguide/stories/Meta/FAQs.stories.mdx
+++ b/packages/styleguide/stories/Meta/FAQs.stories.mdx
@@ -8,12 +8,12 @@ import { Meta } from '@storybook/addon-docs/blocks';
}}
/>
-## How Can I Contribute?
+## How can I contribute?
Thanks for your interest! 🙌
We are prepared to accept contributions from Codecademy employees only at this time.
-## To Gamut or Not To Gamut?
+## To Gamut or not to Gamut?
> When should we create a general component in Gamut instead of a specific one in another application?
@@ -32,7 +32,7 @@ Some examples of things we generally wouldn't include are:
Consider referencing other design systems such as [Fluent](https://www.microsoft.com/design/fluent) and [Material Design](https://material.io/design) to see what they choose to turn into generic components.
-### Implementation Strategy?
+### Implementation strategy?
> Should we implement components in separate repositories or in Gamut?
@@ -46,7 +46,7 @@ As general rules of thumb:
2. If a component is being used for a third time or more, please discuss moving it to Gamut
-## What's Going On With Accessibility?
+## What's going on with accessibility?
Codecademy is committed to becoming [WCAG 2.1 accessible](https://www.w3.org/WAI/standards-guidelines/wcag), and technical accessibility is a must-have in our design system.
Components added here are expected to be fully AA compliant.
diff --git a/packages/styleguide/stories/Meta/Stories.stories.mdx b/packages/styleguide/stories/Meta/Stories.stories.mdx
index 6db3eef2f1..717c01987f 100644
--- a/packages/styleguide/stories/Meta/Stories.stories.mdx
+++ b/packages/styleguide/stories/Meta/Stories.stories.mdx
@@ -9,7 +9,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
}}
/>
-## Quick Start
+## Quick start
We've provided a few helpful vscode snippets to help you get through boilerplate. To use these start to type these strings in your editor and pick the template and fill out the tab targets.
@@ -17,7 +17,7 @@ We've provided a few helpful vscode snippets to help you get through boilerplate
- `toc-story`: A index page template with a table of contents.
- `canvas-block`: A simple template for a more granular story.
-## File Structure + Naming
+## File structure and naming
When you make a new story theres a few things to keep in mind:
@@ -38,7 +38,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
Your new story will be generated with the correct hierarchy and added to storybook!
-## Story Structure
+## Story structure
In our fledgling collective opinion, a good component story page consists of:
@@ -46,7 +46,7 @@ In our fledgling collective opinion, a good component story page consists of:
2. **Flagship Story + Props** A single default story showing the default state of the component with a connected props table right below it.
3. **Variation Storiees** Granular subsections that show the discrete varaitions of the component and describe their use cases
-### General Information
+### General information
1. `subtitle`: What the component does, and what the component would typically be used for.
2. `source`: The source package of the component (e.g. `gamut` | `gamut-styles`)
@@ -69,7 +69,7 @@ In our fledgling collective opinion, a good component story page consists of:
/>
```
-### Flagship Story
+### Flagship story
The first story for a component should be intended to give the reader a broad overview of its high-level functionality.
Try to include the major behaviors for the component that most readers would need to understand its uses.
@@ -89,7 +89,7 @@ Give this story the same name as its component in pascal case.
/>
```
-### Granular Stories
+### Granular stories
Each subsequent story should elaborate on an important behavioral feature of the component.
Try to show a single use of the behavior configurable with args.
diff --git a/packages/styleguide/stories/Molecules/Alert/index.stories.mdx b/packages/styleguide/stories/Molecules/Alert/index.stories.mdx
index f93a888733..b7a3f95b43 100644
--- a/packages/styleguide/stories/Molecules/Alert/index.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Alert/index.stories.mdx
@@ -38,7 +38,7 @@ import { ALERTS } from './constants';
writing for alerts .
@@ -76,7 +76,7 @@ Alert copy should make it clear **what the issue or information is** and **how t
Writing an error message? Above all else, error messages should explain and resolve. Inform learners of what went wrong and let them know how to proceed. For more tips and best practices, check out the full guide about writing error messages .
-## Alert Types
+## Alert types
+
{(args) =>
### Success
-
+
{(args) =>
### Error
-
+
{(args) =>
### Notice
-
+
{(args) =>
### Feature
-
+
{(args) =>
### Subtle
-
+
{(args) =>
-
+
{(args) => {
return (
-### Spacing Options
+### Spacing options
`spacing` is an optional prop you can pass to ``. By default it's set to `"normal"`, though you can set it to `"condensed"` or `"compact"` as well. Spacing will determine the height of the heading, the size of the chevron icon, as well as the padding of both the heading and the body.
@@ -154,7 +154,7 @@ Disclosure has 3 variants for background color (`'default'`, `'subtle', 'transpa
-## Code Playground
+## Code playground
-
+
{(args) => {
const [expanded, setExpanded] = useState(false);
return (
@@ -130,12 +130,12 @@ Flyouts work in light and dark `ColorModes`.
-## Flyout with Overflow
+## Flyout with overflow
Flyouts scroll on vertical overflow and keep the background color.
-
+
{(args) => {
const [expanded, setExpanded] = useState(false);
return (
diff --git a/packages/styleguide/stories/Molecules/Menu/MenuItem.stories.mdx b/packages/styleguide/stories/Molecules/Menu/MenuItem.stories.mdx
index 1274a0b8ef..9bf8f20486 100644
--- a/packages/styleguide/stories/Molecules/Menu/MenuItem.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Menu/MenuItem.stories.mdx
@@ -19,7 +19,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
decorators={[(Story) => {Story()} ]}
/>
-## Code Playground
+## Code playground
Edit attributes and see what’s possible to do with this component or get the exact output you want.
diff --git a/packages/styleguide/stories/Molecules/Menu/MenuSeparator.stories.mdx b/packages/styleguide/stories/Molecules/Menu/MenuSeparator.stories.mdx
index a8af3407a6..0bcd7f1143 100644
--- a/packages/styleguide/stories/Molecules/Menu/MenuSeparator.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Menu/MenuSeparator.stories.mdx
@@ -19,7 +19,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
args={{}}
/>
-## Code Playground
+## Code playground
Edit attributes and see what’s possible to do with this component or get the exact output you want.
diff --git a/packages/styleguide/stories/Molecules/Menu/index.stories.mdx b/packages/styleguide/stories/Molecules/Menu/index.stories.mdx
index dfb0a2bb3c..f6c612d9ee 100644
--- a/packages/styleguide/stories/Molecules/Menu/index.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Menu/index.stories.mdx
@@ -100,12 +100,12 @@ const MyMenu = () => (
-## Spacing Variants
+## Spacing variants
-### Select Condensed
+### Select condensed
(
-### Action Condensed
+### Action condensed
(
-### Condensed Nav
+### Condensed nav
(
-## Popover Menus
+## Popover menus
You can create popover menus by utilizing our PopoverContainer . Once you have your base positioning, you just need to adjust the `y` axis by `48` for the `normal` spacing or `32` for the `condensed` spacing for each of the `MenuItem`s. You may also need to change the `alignment` of the `PopoverContainer` to ensure correct positioning.
@@ -155,7 +155,7 @@ Click through each item to see how the `Menu`s appear (and disappear when the it
Dialog : Structured modals with binary user
interaction paths (Confirm / Cancel).
diff --git a/packages/styleguide/stories/Molecules/Modals/Dialog.stories.mdx b/packages/styleguide/stories/Molecules/Modals/Dialog.stories.mdx
index dd2644e24d..f34d3fb250 100644
--- a/packages/styleguide/stories/Molecules/Modals/Dialog.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Modals/Dialog.stories.mdx
@@ -42,7 +42,7 @@ import { ClickOpenDialog } from './Dialog.examples';
- Dialogs appear unprompted and require confirmation before the user can continue.
- Use the modal component sparingly. This is the most dispruptive tool in our arsenal. We should only have a small handful of these in our system at any given time.
-## Usage Guidelines
+## Usage guidelines
- Dialogs have a width of 400px in the `small` size, and 540px in `medium`.
- Small is the default style, and works best with 1-2 lines of text.
@@ -54,7 +54,7 @@ import { ClickOpenDialog } from './Dialog.examples';
- Dialogs should always be displayed over an Overlay . Use the Overlay components in Gamut (and Figma) to capture the appropriate background opacity.
- The overlay in light mode should be white at 95% opacity, the overlay in dark mode should be black at 75% opacity.
-## Writing Tips
+## Writing tips
Simplify the language, prioritize the message, and make sure the implication of what learners are saying “Yes” (or “No”) to is crystal clear. Refer to the checklist below for guidance. For more tips and best practices, check out the full guide about writing for confirmation dialogs .
@@ -125,7 +125,7 @@ Simplify the language, prioritize the message, and make sure the implication of
-## Color Modes
+## Color modes
Dialog components respond to the current Color Mode they are used in. Each component inside of dialog will correctly display for the current color mode without any extra configuration.
Check it out:
@@ -154,7 +154,7 @@ Check it out:
-### With Images
+### With images
The image prop can be used to include a full-width product image or illustration with a 16:9 aspect ratio. This image should help clarify the message of the dialog.
@@ -203,7 +203,7 @@ You can also cause a Dialog to appear/disappear by maintaining a state for `isOp
-## Code Playground
+## Code playground
Edit attributes and see what’s possible to do with this component or get the exact output you want.
diff --git a/packages/styleguide/stories/Molecules/Modals/Modal.stories.mdx b/packages/styleguide/stories/Molecules/Modals/Modal.stories.mdx
index ede686c99e..9f06465e1d 100644
--- a/packages/styleguide/stories/Molecules/Modals/Modal.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Modals/Modal.stories.mdx
@@ -36,7 +36,7 @@ import { ClickOpenModal, ClickOpenMultiViewModal } from './Modal.examples';
}}
/>
-## Customizing Close Behavior
+## Customizing close behavior
### Creating a custom close button
@@ -258,7 +258,7 @@ All of these methods default to true for accessibility reasons, and rely on sett
-## With Image
+## Image + Modal
The image prop can be used to include a full-width product image or illustration with a 16:9 aspect ratio. This image should help clarify the message of the modal.
@@ -312,7 +312,7 @@ You can also cause a Modal to appear/disappear by maintaining a state for `isOpe
-### Code Playground
+### Code playground
Edit attributes and see what’s possible to do with this component or get the exact output you want.
diff --git a/packages/styleguide/stories/Molecules/Modals/Overlay.stories.mdx b/packages/styleguide/stories/Molecules/Modals/Overlay.stories.mdx
index a66d175bb8..3e3cca882d 100644
--- a/packages/styleguide/stories/Molecules/Modals/Overlay.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Modals/Overlay.stories.mdx
@@ -55,7 +55,7 @@ a background behind content, see `Modal` for general modals and `Dialog` for con
-## Code Playground
+## Code playground
Edit attributes and see what’s possible to do with this component or get the exact output you want.
diff --git a/packages/styleguide/stories/Molecules/Pagination/index.stories.mdx b/packages/styleguide/stories/Molecules/Pagination/index.stories.mdx
index 1c6fb061ab..e2e4e348a6 100644
--- a/packages/styleguide/stories/Molecules/Pagination/index.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Pagination/index.stories.mdx
@@ -93,7 +93,7 @@ We have two variants of pagination - `stroke` and `text` - that roughly correspo
-
+
{(args) => {
return
-## Tabs With Badges
+## Tab + Badge
-
- {(args) =>
+ {(args) =>
-## Block Variant
+## Block variant
If you pass in the variant 'block', you will get a slim, dark mode version of tabs.
-
+
{(args) =>
-## Tab Navigation
+## Tab navigation
You can also use tabs as standard link-based navigation. To do this, you can use the `TabNav` and `TabNavLink` components.
It is recommended to add a unique `aria-label` to the `TabNav` component, to differentiate it from other navigation elements on the page.
- {(args) =>
+ {(args) =>
## Tabs with interactive content
@@ -131,7 +129,7 @@ It is recommended to add a unique `aria-label` to the `TabNav` component, to dif
If you have tabs with interactive content within them (such as a button or link), you need to add `tabindex={-1}` to the TabPanel so that the interactive content, rather than the TabPanel itself, become focused.
-
+
{(args) =>
diff --git a/packages/styleguide/stories/Molecules/Tip/About.stories.mdx b/packages/styleguide/stories/Molecules/Tip/About.stories.mdx
index abdd343d52..e873c66a84 100644
--- a/packages/styleguide/stories/Molecules/Tip/About.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Tip/About.stories.mdx
@@ -13,15 +13,15 @@ import { TipTable } from './elements';
}}
/>
-Tips come in the form of Tooltips or Infotips (and eventually link previews). These represent distinct use cases and should not be interchanged. If you are unsure, reference the comparison table below.
+Tips come in the form of ToolTip or InfoTips (and eventually link PreviewTip). These represent distinct use cases and should not be interchanged. If you're unsure, reference the comparison table below.
-
+
{(args) => {
return (
@@ -140,7 +140,7 @@ _Note:_ Because of the size of these ToolTips, they should never overflow their
Tooltips with _corner_ alignments -`*-left` or `*-right`- are larger sized and meant for the occasional longer explanation, like form field validation explainers.
-
+
{(args) => {
return (
diff --git a/packages/styleguide/stories/Molecules/Tip/InfoTip.stories.mdx b/packages/styleguide/stories/Molecules/Tip/InfoTip.stories.mdx
index 5ca5b10af6..316ede1541 100644
--- a/packages/styleguide/stories/Molecules/Tip/InfoTip.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Tip/InfoTip.stories.mdx
@@ -102,7 +102,7 @@ This `floating` variant should only be used when it as needed.
Links or buttons within InfoTips should be used sparingly and only when the information is critical to the user's understanding of the content. If an infotip _absolutely requires_ a link or button, it needs to provide a programmatic focus by way of the `onClick` prop. The `onClick` prop accepts a function that calls the object `{isTipHidden}` and should focus when the tip is visible.
-
+
{() => (
This text is in a small space and needs info {' '}
diff --git a/packages/styleguide/stories/Molecules/Tip/ToolTip.stories.mdx b/packages/styleguide/stories/Molecules/Tip/ToolTip.stories.mdx
index 0446df3f02..083bb7bd3f 100644
--- a/packages/styleguide/stories/Molecules/Tip/ToolTip.stories.mdx
+++ b/packages/styleguide/stories/Molecules/Tip/ToolTip.stories.mdx
@@ -59,14 +59,14 @@ When a Button is disabled with a tooltip, you must use the `aria-disabled` prop
-
+
{() => (
-## Floating Placement
+## Floating placement
ToolTips sometimes need to be in used in a way that they need to escape the confines of their parents container. The `floating` variant of the `placement` prop allows ToolTips do just this. (Notice how this section doesn't need as much padding because the ToolTips are able to escape their context!)
This `floating` variant should only be used when it as needed.
-
+
{() => (
-## zIndex + Inline Placement
+## zIndex + inline placement
If using an inline placement, you will have access to the `zIndex` prop to adjust the ToolTip's stacking order.
-
+
{() => (
writing guide about toasts .
@@ -105,7 +105,7 @@ Icons can either be urls or react nodes:
- Images will be sized correctly by default and resolved as a background image.
- If you choose to use a custom element you must cofigure the content to be the correct width (64x64) and fit within the containing circle manually.
-
+
+
Inline Submit Button style of GridForm
- **Instructions**: Contains suggestions for modifying the Figma component for your own designs
-### Figma Component Instructions
+### Figma component instructions
- Enable Layout Grid (^G)
- Select a `❖ GridForm` variant as a template
@@ -200,12 +200,12 @@ The [GridForm page in Gamut](https://www.figma.com/file/ReGfRNillGABAj5SlITalN/%
- Customize `🚥 GridFormButtons`
- Submit button style (Fill/CTA), position, cancel button
-## Disabled Inputs
+## Disabled inputs
If an input is not meant to be usable, such as when a portion of a form is disabled pending user action, you can make it visually disabled with a `disabled` field member.
-
+
{() => (
LayoutGrid) to customize the layouts of our GridForms. You can also customize the `FormRequiredText` using the `requiredTextProps`. `FormRequiredText` should be spaced apart from or be stylistically different from the text element above it.
-
+
{() => (
+
{() => (
@@ -395,13 +395,13 @@ value of left, center, right, or stretch.
-## Submit Button Options
+## Submit button options
We can specify the version of our button by passing the type prop. We can choose between
the `FillButton` or `CTAButton` .
-
+
{() => (
<>
`FillButton` or
+
{() => (
-
+
{() => (
-## Placeholder Text
+## Placeholder text
Text inputs are allowed to have traditional `placeholder` text.
This is a somewhat dangerous behavior for accessibility, as browsers
@@ -710,7 +710,7 @@ See [this article](https://www.nngroup.com/articles/form-design-placeholders/) o
more details on why using placeholders is often bad.
-
+
{() => (
-## On Field Update
+## On field update
A field can take an onUpdate callback. This callback will fire when the
field's value changes. This could be useful if you need to use the
field's value in a parent component before onSubmit gets triggered.
-
+
{() => {
const [text, setText] = useState('');
return (
@@ -770,7 +770,7 @@ field's value in a parent component before onSubmit gets triggered.
-## With InfoTip
+## InfoTip + GridForm
A field can include our existing `InfoTip`. The position of the infotip on each field is always set to the bottom-right.
@@ -990,12 +990,12 @@ When using the left-aligned layout, please note that the `title` takes up 3 colu
-## Custom Error
+## Custom error
A field can take a custom error in addition to validation errors. The validation error will always take precedence to the custom error.
-
+
{() => {
return (
-## Hidden Input
+## Hidden input
Hidden inputs can be used to include data that users can't see or modify with the submission. For this implementation you can set the `defaultValue` in the object and it will be submitted with the regular form data.
-
+
{() => (
-## Sweet Container Input
+## Sweet container input
"Sweet container" ([honeypot]()) inputs can be used to detect bots by providing a field that would not generally be clicked by human users, but might be triggered automatically by bots.
We call it a "sweet container" so that bots do not immediately detect it as a honeypot input.
-
+
{() => (
-## Markdown Errors
+## Markdown errors
GridForm renders errors through our Markdown component so we can optionally add markdown to our validation messages.
-
+
{() => (
-
+
{() => (
-
+
{() => (
<>
@@ -1249,12 +1249,12 @@ If you need to checkboxes to fit into a smaller space, you can use our our `tigh
-## Disabled Fields on Submit
+## Disabled fields on submit
`disableFieldsOnSubmit` will disable all form fields once the form has been successfully submitted. If you have any server-side validation that needs to happen, we recommend using the `wasSubmitSuccessful` prop, but submission will also fail if a promise is rejected within your `onSubmit` or if a field does not pass validation.
-
+
{() => (
<>
@@ -1340,12 +1340,12 @@ If you need to checkboxes to fit into a smaller space, you can use our our `tigh
-## Reset Form on Submit
+## Reset form on submit
`resetOnSubmit` will reset the form once the GridForm has been successfully submitted. If you have any server validation that needs to happen, we recommend using the `wasSubmitSuccessful` prop, but submission will also fail if a promise is rejected within your `onSubmit` or if a field does not pass validation.
-
+
{() => (
<>
@@ -1425,12 +1425,12 @@ We can combine these together to create some pretty cool forms which have a load
-## Solo Field Forms
+## Solo field form
Solo field form should always have their solo input be required. They should automagically not have the required/optional text - if you have a custom rendered hidden input, you may have to use the `hasSoloField` prop.
-
+
{() => (
<>
diff --git a/packages/styleguide/stories/Organisms/Lists & Tables/DataList.stories.mdx b/packages/styleguide/stories/Organisms/Lists & Tables/DataList.stories.mdx
index 68dd551553..e6785af40b 100644
--- a/packages/styleguide/stories/Organisms/Lists & Tables/DataList.stories.mdx
+++ b/packages/styleguide/stories/Organisms/Lists & Tables/DataList.stories.mdx
@@ -76,7 +76,7 @@ import { DataListTemplate } from './examples.tsx';
}}
/>
-## Design Principles
+## Design principles
**Recommended for engaging with individual Items**
@@ -130,9 +130,9 @@ const DataTown = () => {
+
@@ -152,12 +152,12 @@ const DataTown = () => {
{(args) =>
diff --git a/packages/styleguide/stories/Organisms/Lists & Tables/DataTable.stories.mdx b/packages/styleguide/stories/Organisms/Lists & Tables/DataTable.stories.mdx
index 81d0d77eab..bbf24a7653 100644
--- a/packages/styleguide/stories/Organisms/Lists & Tables/DataTable.stories.mdx
+++ b/packages/styleguide/stories/Organisms/Lists & Tables/DataTable.stories.mdx
@@ -73,19 +73,19 @@ import { DataTableTemplate } from './examples.tsx';
}}
/>
-## Design Principles
+## Design principles
-**Design Principles**
+**Design principles**
- Recommended for bulk analysis across Rows
- Tables best support information that needs sorting, filtering, pagination, and querying
- Prioritize data and information that’s meant to be compared up front, then surface secondary information on external surfaces
-**Use Table affordances for best information design**
+**Use table affordances for best information design**
- Design and arrange table metrics to encourage finding, scanning, and comparing information
-**Use Cell-level interactions to activate specific data**
+**Use cell-level interactions to activate specific data**
- Use Coachmarks, Tooltips, Modals, and Flyovers to augment information
- Use Anchors and Links to direct users to another surface
@@ -130,50 +130,50 @@ const DataTown = () => {
+
+
{(args) =>
Shimmer .
-
+
{(args) =>
+
{(args) =>
{(args) =>
diff --git a/packages/styleguide/stories/Organisms/Lists & Tables/List/index.stories.mdx b/packages/styleguide/stories/Organisms/Lists & Tables/List/index.stories.mdx
index 6fd21386e4..e549c55be4 100644
--- a/packages/styleguide/stories/Organisms/Lists & Tables/List/index.stories.mdx
+++ b/packages/styleguide/stories/Organisms/Lists & Tables/List/index.stories.mdx
@@ -42,7 +42,7 @@ Lists are one of the main design tools for displaying information in a structure
- Lists are distinct from Tables in that they have mixed column content (interactive elements / metrics) whereas tables have only metrics. If you plan on having row controls or options in your table, use a List.
- When presenting repetitive content prefer using a List view over a Card view.
-## Design Principles
+## Design principles
Recommended for engaging with individual Items
@@ -95,7 +95,7 @@ Lists come with 3 spacing variants `normal`, `condensed`, and `compact`.
For mixed content use the normal size to ensure that there is enough space for components
-
+
{DemoTemplate.bind({})}
@@ -103,7 +103,7 @@ For mixed content use the normal size to ensure that there is enough space for c
For a more compact list use the condensed spacing
-
+
{DemoTemplate.bind({})}
@@ -111,7 +111,7 @@ For a more compact list use the condensed spacing
For an even more compact list use the compact spacing
-
+
{DemoTemplate.bind({})}
@@ -196,7 +196,7 @@ It is recommended that you use the aliases for any content that may have variabl
@@ -292,11 +292,11 @@ Optionally, you can pass a `breakpoint` prop to the List to alter this behavior.
-
+
{NormalTemplate.bind({})}
-
+
{CondensedTemplate.bind({})}
{CondensedTemplate.bind({})}
@@ -381,21 +381,21 @@ Here's some examples of Lists to use as guides.
-
+
{ExpandedTemplateButtonClick.bind({})}
{ExpandedTemplateRowClick.bind({})}
-## Code Playground
+## Code playground
{DemoTemplate.bind({})}
diff --git a/packages/styleguide/stories/Organisms/Markdown/index.stories.mdx b/packages/styleguide/stories/Organisms/Markdown/index.stories.mdx
index 241e29b955..3679fa3ab4 100644
--- a/packages/styleguide/stories/Organisms/Markdown/index.stories.mdx
+++ b/packages/styleguide/stories/Organisms/Markdown/index.stories.mdx
@@ -32,12 +32,12 @@ This is markdown
## Full example
-
+
{(args) =>
-## Element Overrides
+## Element overrides
In cases where our default Markdown renderer is not returning exactly what you need, you can override specific tags or custom tags.
diff --git a/packages/styleguide/stories/Typography/Anchor.stories.mdx b/packages/styleguide/stories/Typography/Anchor.stories.mdx
index b0493638df..6ae90246c7 100644
--- a/packages/styleguide/stories/Typography/Anchor.stories.mdx
+++ b/packages/styleguide/stories/Typography/Anchor.stories.mdx
@@ -58,7 +58,7 @@ There are three main varaints for Anchor links that are meant to be used in spec
Color Mode they are used in. This means you do not have to configure a prop to ensure that they meet contrast and design guidelines. Each variant will have consistent and inverse behavior in different contexts.
@@ -78,7 +78,7 @@ import { ColorMode } from '@codecademy/gamut-styles';
```
-## 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 writing for buttons and links .
@@ -103,12 +103,12 @@ Writing words for a link or button? Above all else, make sure that the words alo
spacing="tight"
/>
-## Adding an Icon
+## Adding an icon
You can add an Icon to the left or right of the Anchor text.
-
+
{(args) =>
@@ -117,7 +117,7 @@ Here's how icons can look with all the variants.
{() =>
-## Code Playground
+## Code playground
Edit attributes and see what’s possible to do with this component or get the exact output you want.
diff --git a/packages/styleguide/stories/Typography/Text.stories.mdx b/packages/styleguide/stories/Typography/Text.stories.mdx
index b58e191349..9541c7036e 100644
--- a/packages/styleguide/stories/Typography/Text.stories.mdx
+++ b/packages/styleguide/stories/Typography/Text.stories.mdx
@@ -26,7 +26,7 @@ import { Fragment } from 'react';
+
{() => (
{Object.keys(typographyElementVariants).map((tag) => (
@@ -80,7 +80,7 @@ import { Text } from '@codecademy/gamut';
)}
-## 2. Style Variants
+## 2. Style variants
These are our base semantic font scales. These apply directly to the typography scales in figma and can be used with any arbitrary tag. These take precedence over any element based variants if configured. If none of these specifically match your need you can also override behavior with any system prop (such as `lineHeight` and `fontSize`).
@@ -149,7 +149,7 @@ Text has some special props with common use cases to make your life easier.
-### Font Smoothing (default: false)
+### Font smoothing (default: false)
@@ -214,7 +214,7 @@ Text has some special props with common use cases to make your life easier.
-## Code Playground
+## Code playground
Edit attributes and see what’s possible to do with this component or get the exact output you want.
diff --git a/packages/styleguide/stories/UX Writing/About.stories.mdx b/packages/styleguide/stories/UX Writing/About.stories.mdx
index afe821cc37..1979f35c4f 100644
--- a/packages/styleguide/stories/UX Writing/About.stories.mdx
+++ b/packages/styleguide/stories/UX Writing/About.stories.mdx
@@ -21,7 +21,7 @@ In the following pages, you’ll find a collection of tips and tools for writing
## Resources
-### External Tools & Resources:
+### External tools and resources:
🖍 **[Hemingway App](https://hemingwayapp.com/):** Tool for checking copy for grade level and readability