docs: fixes LinkTo and adds new docs to README by dreamwasp · Pull Request #2997 · Codecademy/gamut

dreamwasp · 2024-12-16T20:36:48Z

Overview

Fixes LinkTo and adds new docs to README. Also adds inline examples to ToolTips after realizing they weren't rendering

PR Checklist

Related to designs:
Related to JIRA ticket: GM-917
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
[n/a] The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Check out the new README
Check some places with LinkTo
Check out the examples in ToolTips

nx-cloud · 2024-12-16T20:40:39Z

☁️ Nx Cloud Report

We didn't find any information for the current pull request with the commit 098861d.
Please verify you are running the latest version of the NxCloud runner.

Check the Nx Cloud Source Control Integration documentation for more information.

Alternatively, you can contact us at cloud-support@nrwl.io.

Sent with 💌 from NxCloud.

…amut into cs-iconbutton-stories

LinKCoding

Thanks for checking through the links!!
I noted some links that didn't work, left some suggestions for consideration, and passed off some QA work that I didn't catch on my own work (sorries).

Thanks again!!

README.md

packages/styleguide/src/lib/Atoms/Buttons/IconButton/IconButton.mdx

packages/styleguide/src/lib/Layouts/Boxes/FlexBox/FlexBox.mdx

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

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

LinKCoding · 2024-12-16T21:49:15Z

packages/styleguide/src/lib/Molecules/Tips/PreviewTip/PreviewTip.mdx

 ### Loading

-The `loading` prop will render a <LinkTo component="Shimmer">`Shimmer`</LinkTo> loading state. See an example below! The first `PreviewTip` is perpetually in the loading state and the second simulates loading on focus.
+The `loading` prop will render a <LinkTo id="Atoms/Loaders/Shimmer">`Shimmer`</LinkTo> loading state. See an example below! The first `PreviewTip` is perpetually in the loading state and the second simulates loading on focus.


hard to know that Shimmer is an actual link, maybe add the text "loading state" into the <LinkTo />
E.g.
Shimmer loading state.

LinKCoding · 2024-12-16T21:50:37Z

packages/styleguide/src/lib/Molecules/Tips/ToolTip/ToolTip.stories.tsx

-const DefaultExample = () => {
-  return (
+export const Default: Story = {
+  render: () => (


oof... I did a lot of these Example ... render: () => <Example /> kinda patterns. Sorries!

np!!! it's inconsistent when it renders and doesn't 🤷

LinKCoding · 2024-12-16T21:52:22Z

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx

- `ConnectedFormGroup`: <LinkTo kind='Atoms/FormGroups'>FormGroups</LinkTo> that use the context provided by `ConnectedForm` for error and disabled states.
- `ConnectedFormInputs`: <LinkTo kind='Atoms/FormInputs'>FormInputs</LinkTo> the use the context provided by `ConnectedForm` for field registration and validation as well as required and disabled states. Should be used through `ConnectedFormGroup`.
- `SubmitButton`: A submit type <LinkTo kind='Atoms/Button'>Button</LinkTo> that uses the context provided by `ConnectedForm` for loading and disabled states.
+- `ConnectedForm`: A <LinkTo id='Atoms/Form'>Form</LinkTo> that provides context to all `Connected` components.


Should be something like Atoms/FormElements/Form

LinKCoding · 2024-12-16T21:53:27Z

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedForm/ConnectedForm.mdx

- `ConnectedFormInputs`: <LinkTo kind='Atoms/FormInputs'>FormInputs</LinkTo> the use the context provided by `ConnectedForm` for field registration and validation as well as required and disabled states. Should be used through `ConnectedFormGroup`.
- `SubmitButton`: A submit type <LinkTo kind='Atoms/Button'>Button</LinkTo> that uses the context provided by `ConnectedForm` for loading and disabled states.
+- `ConnectedForm`: A <LinkTo id='Atoms/Form'>Form</LinkTo> that provides context to all `Connected` components.
+- `ConnectedFormGroup`: <LinkTo id='Atoms/FormGroups'>FormGroups</LinkTo> that use the context provided by `ConnectedForm` for error and disabled states.


Atoms/FormElements/FormGroup
(omit the 's')?

LinKCoding · 2024-12-16T21:57:02Z

packages/styleguide/src/lib/Organisms/ConnectedForm/ConnectedFormInputs/ConnectedFormInputs.mdx

 `ConnectedRadioGroupInput` is the exception to the rule, and has some props that differ, particularly `options` — which takes an array of `ConnectedBaseRadioInputProps` components.

-For further styling configurations, check out <LinkTo kind="Atoms/FormInputs/RadioGroup">RadioGroup</LinkTo>.
+For further styling configurations, check out <LinkTo id="Atoms/FormInputs/RadioGroup">RadioGroup</LinkTo>.


Atoms/FormInputs/Radio
cause RadioGroup got combined into Radio
maybe it can be Atoms/FormInputs/Radio#RadioGroup or #radio-group? not sure if id allows for subheadings but it'd be nifty

LinKCoding

Updates and updated links work great!
I noticed 2 small things that shouldn't take long and are non-blocking :)
🚀🚀🚀

LinKCoding · 2024-12-17T19:47:36Z

README.md

-1.  Stories are written using storybook's [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/)
+1.  Run `yarn nx storybook styleguide` to start the storybook server
+2.  Add new stories to `packages/styleguide/src`
+3.  Stories are written using storybook's [Component Story Format](https://storybook.js.org/docs/formats/component-story-format/) and [MDX](https://storybook.js.org/docs/writing-docs/mdx#basic-example). Check out our Storybook's comprehensive guide on writing stories [here](https://storybook.js.org/docs/react/get-started/introduction).


"... Check out our Storybook's comprehensive ..."
Omit "our"

i meant to link our storybook 😮‍💨

LinKCoding · 2024-12-17T20:04:57Z

packages/styleguide/src/lib/Molecules/Tips/DeprecatedToolTip/DeprecatedToolTip.mdx


- If you'd like interactive contents, use a <LinkTo id="molecules-popover">Popover</LinkTo>
- [use case]- for [describe the use case], use the [similar component] component.
+- If you'd like interactive contents, use a <LinkTo id="Molecules/Popover">Popover</LinkTo>


missed this before, but should have a period. 🙏

codecademydev · 2024-12-17T20:15:00Z

📬Published Alpha Packages:

@codecademy/styleguide@68.3.2-alpha.098861.0

codecademydev · 2024-12-17T20:16:05Z

🚀 Styleguide deploy preview ready!

https://6761dc01f655b938571b4a4a--gamut-preview.netlify.app

Deploy Logs

dreamwasp and others added 2 commits December 16, 2024 15:36

start fixing linkto + readme

487b292

Merge branch 'main' into cs-iconbutton-stories

0fdffb1

dreamwasp added 5 commits December 16, 2024 15:54

actually fix some links

3a4c811

Merge branch 'cs-iconbutton-stories' of ssh://github.com/Codecademy/g…

ffd9dea

…amut into cs-iconbutton-stories

fix more links

8a5e812

styleguide

d1cccf6

nicer

3fd5582

dreamwasp changed the title ~~start fixing linkto + readme~~ docs: fixes LinkTo and adds new docs to README Dec 16, 2024

dreamwasp marked this pull request as ready for review December 16, 2024 21:19

dreamwasp requested a review from a team as a code owner December 16, 2024 21:19

dreamwasp requested review from BandanaKM, LinKCoding, aresnik11, jakemhiller and timjenkins December 16, 2024 21:19

LinKCoding reviewed Dec 16, 2024

View reviewed changes

dreamwasp and others added 3 commits December 17, 2024 11:21

start kenny review

4ac156a

kenny review

b6c8aa0

Merge branch 'main' into cs-iconbutton-stories

92c1da0

dreamwasp requested a review from LinKCoding December 17, 2024 19:04

fix Meta/Stories

e6422be

LinKCoding approved these changes Dec 17, 2024

View reviewed changes

final quick fixes

098861d

dreamwasp added the Ship It Automerge this PR when possible label Dec 17, 2024

codecademydev merged commit dce0716 into main Dec 17, 2024
8 of 9 checks passed

codecademydev removed the Ship It Automerge this PR when possible label Dec 17, 2024

codecademydev deleted the cs-iconbutton-stories branch December 17, 2024 20:16

Conversation

dreamwasp commented Dec 16, 2024 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

Uh oh!

nx-cloud bot commented Dec 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☁️ Nx Cloud Report

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dreamwasp Dec 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Dec 17, 2024

📬Published Alpha Packages:

Uh oh!

codecademydev commented Dec 17, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dreamwasp commented Dec 16, 2024 •

edited by atlassian bot

Loading

nx-cloud bot commented Dec 16, 2024 •

edited

Loading

dreamwasp Dec 17, 2024 •

edited

Loading