Merge branch 'main' into kl-gm-1044

Author: LinKCoding

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.
 
+### [73.0.6](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@73.0.5...@codecademy/styleguide@73.0.6) (2025-05-12)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ### [73.0.5](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@73.0.4...@codecademy/styleguide@73.0.5) (2025-05-01)
 
 ### Bug Fixes

packages/styleguide/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "73.0.5",
+  "version": "73.0.6",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {

packages/styleguide/src/lib/Atoms/Badge/Badge.mdx

@@ -88,7 +88,14 @@ Use the tertiary-fill variant when a tertiary `Badge` needs to sit above other c
 
 Use the accent variant to draw attention to important details or statuses with a noticeable but less dominant emphasis than the primary `Badge`.
 
-<Callout text="The accent variant does not respond to ColorMode." />
+<Callout
+  text={
+    <>
+      The accent variant does not respond to{' '}
+      <LinkTo id="Foundations/ColorMode">ColorMode</LinkTo>.
+    </>
+  }
+/>
 
 <Canvas of={BadgeStories.Accent} />
 

packages/styleguide/src/lib/Atoms/InternalFloatingCard/InternalFloatingCard.mdx

@@ -23,7 +23,18 @@ export const parameters = {
 
 <ComponentHeader {...parameters} />
 
-<Callout text="The InternalFloatingCard component is strictly for internal Gamut usage. For instance, the Modal component will use InternalFloatingCard to style its content. However, InternalFloatingCard is no longer exported for use in other libraries, in such cases, use Card instead." />
+<Callout
+  text={
+    <>
+      The InternalFloatingCard component is strictly for internal Gamut usage.
+      For instance, the{' '}
+      <LinkTo id="Molecules/Modals/Modal">Modal component</LinkTo> will use
+      InternalFloatingCard to style its content. However, InternalFloatingCard
+      is no longer exported for use in other libraries, in such cases, use{' '}
+      <LinkTo id="Atoms/Card">Card</LinkTo> instead.
+    </>
+  }
+/>
 
 ## Usage
 

packages/styleguide/src/lib/Meta/Contributing.mdx

@@ -1,3 +1,4 @@
+import { Anchor } from '@codecademy/gamut';
 import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, Callout, LinkTo } from '~styleguide/blocks';
@@ -77,7 +78,21 @@ All components must have Storybook stories showing their use. See <LinkTo id='Me
 
 Please fill out the pull request template, including links to the corresponding Abstract design and JIRA ticket.
 
-<Callout text="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 just run CI jobs. That includes deploying a Netlify preview and publishing alpha package versions to npm. 😉" />
+<Callout
+  text={
+    <>
+      You can use a{' '}
+      <Anchor
+        target="_"
+        href="https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/about-pull-requests#draft-pull-requests"
+      >
+        Draft PR
+      </Anchor>{' '}
+      to just run CI jobs. That includes deploying a Netlify preview and
+      publishing alpha package versions to npm. 😉
+    </>
+  }
+/>
 
 ### Publishing updates
 

packages/styleguide/src/lib/Molecules/AccordionButtonDeprecated/AccordionButtonDeprecated.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { Callout, ComponentHeader } from '~styleguide/blocks';
+import { Callout, ComponentHeader, LinkTo } from '~styleguide/blocks';
 
 import * as AccordionButtonDeprecatedStories from './AccordionButtonDeprecated.stories';
 
@@ -19,7 +19,14 @@ Comes in a few standard size and color combinations.`,
 
 <ComponentHeader {...parameters} />
 
-<Callout text="This component is deprecated. For similar functionality, consider using the Disclosure component." />
+<Callout
+  text={
+    <>
+      Note: This component is deprecated. For similar functionality, consider
+      using the <LinkTo id="Molecules/Disclosure">Disclosure</LinkTo> component.
+    </>
+  }
+/>
 
 ## Usage
 

packages/styleguide/src/lib/Molecules/AccordionDeprecated/AccordionDeprecated.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 
-import { Callout, ComponentHeader } from '~styleguide/blocks';
+import { Callout, ComponentHeader, LinkTo } from '~styleguide/blocks';
 
 import * as AccordionDeprecatedStories from './AccordionDeprecated.stories';
 
@@ -19,7 +19,15 @@ such as a "hint" section in the LE or a list of department jobs on a careers pag
 
 <ComponentHeader {...parameters} />
 
-<Callout text="Note: This component is deprecated. For similar functionality, consider using Disclosure or a List component." />
+<Callout
+  text={
+    <>
+      Note: This component is deprecated. For similar functionality, consider
+      using <LinkTo id="Molecules/Disclosure">Disclosure</LinkTo> or a{' '}
+      <LinkTo id="Organisms/Lists & Tables/List">List </LinkTo> component.
+    </>
+  }
+/>
 
 ## Usage
 
@@ -33,7 +41,7 @@ This Accordion component will fit to `100%` of the the height of their parent co
 
 ### When NOT to use:
 
-- [Having a button that reveals additional information]- for creating a single "Accordion", similar to an HTML [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) element, use the Disclosure component instead.
+- Having a button that reveals additional information- for creating a single "Accordion", similar to an HTML [details](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) element, use the Disclosure component instead.
 - Creating a "Accordion" with many rows — akin to an FAQ that lists out questions and reveals an answer when clicked, use the List component with expandable rows.
 
 ## Variants

packages/styleguide/src/lib/Molecules/Disclosure/Disclosure.mdx

@@ -25,19 +25,19 @@ export const parameters = {
 
 ## Usage
 
-Use a Disclosure to progressively reveal information, giving users the option to access additional details as needed. By initially hiding less immediately relevant information, it minimizes cognitive load and boosts content scannability.
+Use a `Disclosure` to progressively reveal information, giving users the option to access additional details as needed. By initially hiding less immediately relevant information, it minimizes cognitive load and boosts content scannability.
 
 ### Best practices:
 
-- When there is large amount of information that all users might not need to see, but some users might want to see, use a Disclosure to hint at the additional information and allow users to expand it.
+- When there is large amount of information that all users might not need to see, but some users might want to see, use a `Disclosure` to hint at the additional information and allow users to expand it.
 
 ### When NOT to use:
 
-- If you need to use multiple Disclosures, use the <LinkTo id="Organisms/Lists & Tables/List">List</LinkTo> component component with `<ExpandableRowClick>` for the time being.
+- If you need to use multiple `Disclosure` components, use the <LinkTo id="Organisms/Lists & Tables/List">List</LinkTo> component component with `<ExpandableRowClick>` for the time being.
 
 ## Variants
 
-Disclosure has 3 variants for background color (`'default'`, `'subtle', 'transparent'`), a state of `hasBorder` to render a 1px solid black border, and 3 spacing options (`'normal'`, `'condensed'`, `'compact'`). Check the Figma design to apply the correct styling.
+`Disclosure` has 3 variants for background color (`'default'`, `'subtle'`, `'transparent'`), a state of `hasBorder` to render a 1px solid black border, and 3 spacing options (`'normal'`, `'condensed'`, `'compact'`). Check the Figma design to apply the correct styling.
 
 ### Background and border variants
 
@@ -48,7 +48,7 @@ Disclosure has 3 variants for background color (`'default'`, `'subtle', 'transpa
 
 ### Spacing options
 
-`spacing` is an optional prop you can pass to `<Disclosure>`. 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.
+`spacing` is an optional prop you can pass to `Disclosure`. 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.
 
 <Canvas of={DisclosureStories.Normal} />
 <Canvas of={DisclosureStories.Condensed} />