Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

typography + meta #2975

Merged
merged 56 commits into from
Nov 25, 2024
Merged

typography + meta #2975

merged 56 commits into from
Nov 25, 2024

Conversation

dreamwasp
Copy link
Contributor

@dreamwasp dreamwasp commented Nov 13, 2024

Overview

Adds Meta + Typography stories, adds sorting for story categories, and update code snippets to the new templare

PR Checklist

  • Related to designs:
  • Related to JIRA ticket: [gm-843]
  • 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
  • The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

  1. Take a look at the new storybook
  2. Try to use one of the new code snippets locally in this branch

dreamwasp and others added 30 commits November 1, 2024 15:45
Base automatically changed from cass-gm-842 to cass-sb-8-layout November 18, 2024 15:20
Comment on lines 42 to 47
<FlexBox center px={24}>
<img
src="./typography/anchor.png"
alt="The anatomy of the Anchor component, detailed below."
/>
</FlexBox>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i'm gonna swap this to @LinKCoding's component/make it smaller after his pr is merged into the base storybook-8 branch

@dreamwasp dreamwasp marked this pull request as ready for review November 21, 2024 20:40
@dreamwasp dreamwasp requested a review from a team as a code owner November 21, 2024 20:40
@dreamwasp dreamwasp requested review from timjenkins, LinKCoding and aresnik11 and removed request for a team and timjenkins November 21, 2024 20:40
'Layouts',
'Typography',
'Atoms',
'*',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can add Molecules + Organisms here after they're merged in!

Copy link
Contributor

@LinKCoding LinKCoding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just needs some clean up
And left some nits and suggestions :)

Otherwise it's working well and looking great :D

status: 'current',
};

<Meta title="Meta/Best Practices" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit/Q: curious about the space here, thought that for naming more often than not we'd stick to camelCasing or snake_casing b.c. spaces can be weird.

The page loads just fine but wanted to ask still :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yea but the MDX file name is what renders in the left side org panel, so i think this is the exception (and is the pattern regularly used in Stoybooks)

Comment on lines 79 to 83
<Box bg="navy-400" border={1} color="white" mx={16} p={16}>
<Text smooth>
Share your css methods easily with `StyleProps` from `gamut-styles`!
</Text>
</Box>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Food for thought: we could have a callout type component for these things!
Or maybe the success/feature Alert?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

love it, will cut a ticket for a follow-up QoL improvement

Comment on lines 236 to 238
* {
box-sizing: content-box;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: the spacing here looks off, esp line 237

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good looking out, will fix!


## Prework

We track planned work for Gamut components in the [Gamut Board](https://codecademy.atlassian.net/jira/software/projects/WEB/boards/1386) on JIRA.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

good callout!


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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seeing as theses tips popup from time to time, it'd be nice to standardize them :)

```tsx
import { Text } from '@codecademy/gamut';

<Text as="h4" variant="title-xxl" />;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: this example's not representative of the text above.
maybe?:
<Text as="h4" fontSize={16} />

<Text as="h4" variant="title-xxl" />;
```

<Canvas of={TextStories.Variants} />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The texts look identical in this table and TextStories.Elements (maybe some small diff in vertical margins?
But it doesn't seem helpful tbh


## Playground

If you are using a story named 'Default', you can forgo the `of` prop.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be cleaned up

@codecademydev
Copy link
Collaborator

📬Published Alpha Packages:

[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]
@codecademy/[email protected]

@codecademydev
Copy link
Collaborator

🚀 Styleguide deploy preview ready!

https://6744ef70c7ddea4a69150f67--gamut-preview.netlify.app

Deploy Logs

@dreamwasp dreamwasp merged commit 510315e into cass-sb-8-layout Nov 25, 2024
9 checks passed
@dreamwasp dreamwasp deleted the cass-gm-843 branch November 25, 2024 21:45
dreamwasp added a commit that referenced this pull request Dec 9, 2024
* move old layout components for ref

* update pkgs + try dark theme

* basic light mode working

* color modes working in components

* configure toolbar + start adding params

* dark mode theme config working, start on DocsPage configs

* keep migrating

* anchors working

* aboutheader working, need to start working on other headers + types

* fix type errors in .storybook layout components

* test stories, need to fix prettier

* fix formatting

* fixed theming !

* better heading

* fix other pkg weirdness

* fix default homepage + docs ordering

* add absolute paths

* add absolute paths

* create story template (#2964)

* create story template

* move template out of atoms

* update import

* withSource to sourceState

---------

Co-authored-by: cassie spain <[email protected]>

* add source to template

* fix Canvas in template

* allow static images in storybook 8 (#2973)

* test image stuff

* getting closer

* test dist

* remove asset tests

* test in pr

* tweak some more examples

* create foundations + layout stories (#2966)

* create foundations + layout stories

* feat(Molecules Pages) (#2971)

added existing Molecules pages

* typography + meta (#2975)

* create foundations + layout stories

* start foundations

* start retooling componentheader

* component header tweak

* start restructure of header components

* TOC + Theme working, need DataTable + code background color

* working on color mode - need to fix text color

* revert test

* Theme page sorted, need to fix ColorMode

* colormode sorted

* colormode sorted

* start type fix + what to do about blocks

* LayoutGrid + content Container

* LayoutGrid done

* start flexbox, need to look into sandbox stuff

* gridbox + flexbox are good, just need to tweak

* tweaks to headers

* lots of style tweaks + deduplications

* fix typograpth, need to fix color mode switches

* start on system stories

* unify shared elements

* add variance + fix tables

* more tweaks to status

* design tweaks

* add hub

* more tweaks

* rename DataTable

* clean up of default

* typography + meta stories

* add anchor story

* start text + hiddentext

* text done

* started snippet changes

* fixed code snippets

* meta and sorted done?"

* renamed + sorting

* more kenny edits

* more kenny edits + other new tab for links

* the last of it

* fix molecule order

* update production deploy (#2980)

* [gm-916] update storybook production deploy

* swap to relative pathing

* again

* feat(Organisms)  (#2978)

* added in Organisms stories

* remove old styleguide files

* Revert "remove old styleguide files"

This reverts commit baba497.

* feat(Atoms): migrate all Atom stories (#2972)

* create story template

* move template out of atoms

* update import

* skip to content

* withSource to sourceState

* update skip to content

* tag story

* add statuses

* radial progress story

* updates from figma

* toggle story

* update status

* pattern story

* update toggle interactive example

* illustrations story

* focus trap story

* update playground examples

* floating card story

* update illustrations subtitle

* drawer story

* update drawer story

* animation story

* add figma links

* card story

* about page

* progress bar story

* popovercontainer story

* loader stories

* fix about pages

* move examples below

* icon stories

* checkbox story

* add checkbox example

* most of input story

* Badges started (#2979)

* Badges started

* badges done

* add most GH links, need to test

* add github links to most pages

* remove comment

* finish input stories

* update more github links

* textarea story

* radio story

* update examples

* select story

* fix card usage guidelines

* feat(Atoms): adding in the remaining Atoms (#2982)

* finished badges

* added buttons

* added formelements

* updated about page

* minor touchups

* fixed minor ts error

* updated usage for CTAButton and IconButton

* selectdropdown story

* remove optional text

* update forminputs table of contents

* fix forminput table of contents links

* remove logo story

* remove placeholder text

* update main table of contents

* fix icon table of contents

* fix loaders table of contents links

* PR feedback

* uncomment link

---------

Co-authored-by: cassie spain <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>

* remove old styleguide files (#2985)

---------

Co-authored-by: Amy Resnik <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>
dreamwasp added a commit that referenced this pull request Dec 9, 2024
* temporarily move offending stories

* temp old storybook

* radial

* migrate layout components (#2961)

* move old layout components for ref

* update pkgs + try dark theme

* basic light mode working

* color modes working in components

* configure toolbar + start adding params

* dark mode theme config working, start on DocsPage configs

* keep migrating

* anchors working

* aboutheader working, need to start working on other headers + types

* fix type errors in .storybook layout components

* test stories, need to fix prettier

* fix formatting

* fixed theming !

* better heading

* fix other pkg weirdness

* fix default homepage + docs ordering

* add absolute paths

* add absolute paths

* create story template (#2964)

* create story template

* move template out of atoms

* update import

* withSource to sourceState

---------

Co-authored-by: cassie spain <[email protected]>

* add source to template

* fix Canvas in template

* allow static images in storybook 8 (#2973)

* test image stuff

* getting closer

* test dist

* remove asset tests

* test in pr

* tweak some more examples

* create foundations + layout stories (#2966)

* create foundations + layout stories

* feat(Molecules Pages) (#2971)

added existing Molecules pages

* typography + meta (#2975)

* create foundations + layout stories

* start foundations

* start retooling componentheader

* component header tweak

* start restructure of header components

* TOC + Theme working, need DataTable + code background color

* working on color mode - need to fix text color

* revert test

* Theme page sorted, need to fix ColorMode

* colormode sorted

* colormode sorted

* start type fix + what to do about blocks

* LayoutGrid + content Container

* LayoutGrid done

* start flexbox, need to look into sandbox stuff

* gridbox + flexbox are good, just need to tweak

* tweaks to headers

* lots of style tweaks + deduplications

* fix typograpth, need to fix color mode switches

* start on system stories

* unify shared elements

* add variance + fix tables

* more tweaks to status

* design tweaks

* add hub

* more tweaks

* rename DataTable

* clean up of default

* typography + meta stories

* add anchor story

* start text + hiddentext

* text done

* started snippet changes

* fixed code snippets

* meta and sorted done?"

* renamed + sorting

* more kenny edits

* more kenny edits + other new tab for links

* the last of it

* fix molecule order

* update production deploy (#2980)

* [gm-916] update storybook production deploy

* swap to relative pathing

* again

* feat(Organisms)  (#2978)

* added in Organisms stories

* remove old styleguide files

* Revert "remove old styleguide files"

This reverts commit baba497.

* feat(Atoms): migrate all Atom stories (#2972)

* create story template

* move template out of atoms

* update import

* skip to content

* withSource to sourceState

* update skip to content

* tag story

* add statuses

* radial progress story

* updates from figma

* toggle story

* update status

* pattern story

* update toggle interactive example

* illustrations story

* focus trap story

* update playground examples

* floating card story

* update illustrations subtitle

* drawer story

* update drawer story

* animation story

* add figma links

* card story

* about page

* progress bar story

* popovercontainer story

* loader stories

* fix about pages

* move examples below

* icon stories

* checkbox story

* add checkbox example

* most of input story

* Badges started (#2979)

* Badges started

* badges done

* add most GH links, need to test

* add github links to most pages

* remove comment

* finish input stories

* update more github links

* textarea story

* radio story

* update examples

* select story

* fix card usage guidelines

* feat(Atoms): adding in the remaining Atoms (#2982)

* finished badges

* added buttons

* added formelements

* updated about page

* minor touchups

* fixed minor ts error

* updated usage for CTAButton and IconButton

* selectdropdown story

* remove optional text

* update forminputs table of contents

* fix forminput table of contents links

* remove logo story

* remove placeholder text

* update main table of contents

* fix icon table of contents

* fix loaders table of contents links

* PR feedback

* uncomment link

---------

Co-authored-by: cassie spain <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>

* remove old styleguide files (#2985)

---------

Co-authored-by: Amy Resnik <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>

---------

Co-authored-by: Amy Resnik <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>
dreamwasp added a commit that referenced this pull request Dec 9, 2024
* start with empty lib

* add babel config?

* add old package.json back

* add old babel config

* leave to show jake

* empty storybook, maybe not running

* just try with base config

* start adding maybe need packages

* try one story

* progress not perfection

* ci: set correct node version everywhere

* chore: separate dev dependencies from production dependencies

* remove webpack here

* remove comma

* remove comma, yarn

* mess but uhhhh starting

* RUNNING

* move logo back and keep testing

* experiment, maybe getting closer

* remove storybook/addon-styling-webpack

* jaek changes + temp stories

* jake changes + fixes

* start tweaking GHA

* fix remaining type errors

* test CI

* update netlify cli

* try removing msg

* test

* test

* try fr

* test w/o lerna

* remove msg

* add alias path for variance

* spellcheck

* try slightly different syntax

* test CI (#2960)

* test CI

* filter styleguide site

---------

Co-authored-by: Jake Hiller <[email protected]>

* remove unused pkgs;

* test deploy message

* fix msg syntax

* remove comment

* remove explicit webpack bump

* tweak pkg .json + failing tests

* fix provider test

* test new variance pkgs

* rm other stuff

* linter error

* fix baseUrl

* resolve pathing error

* Cass sb 8 fix connectformtypes (#2963)

* build errors in forms

* fixed build errors

* resolve build error

* keep getError message internal

* more test tweaks

* no gamut-test tests for now

* skip selectdropdown tests for now

* await video resolution

* skip video for now

* skip last problematic test

* temporarily move offending stories (#2956)

* temporarily move offending stories

* temp old storybook

* radial

* migrate layout components (#2961)

* move old layout components for ref

* update pkgs + try dark theme

* basic light mode working

* color modes working in components

* configure toolbar + start adding params

* dark mode theme config working, start on DocsPage configs

* keep migrating

* anchors working

* aboutheader working, need to start working on other headers + types

* fix type errors in .storybook layout components

* test stories, need to fix prettier

* fix formatting

* fixed theming !

* better heading

* fix other pkg weirdness

* fix default homepage + docs ordering

* add absolute paths

* add absolute paths

* create story template (#2964)

* create story template

* move template out of atoms

* update import

* withSource to sourceState

---------

Co-authored-by: cassie spain <[email protected]>

* add source to template

* fix Canvas in template

* allow static images in storybook 8 (#2973)

* test image stuff

* getting closer

* test dist

* remove asset tests

* test in pr

* tweak some more examples

* create foundations + layout stories (#2966)

* create foundations + layout stories

* feat(Molecules Pages) (#2971)

added existing Molecules pages

* typography + meta (#2975)

* create foundations + layout stories

* start foundations

* start retooling componentheader

* component header tweak

* start restructure of header components

* TOC + Theme working, need DataTable + code background color

* working on color mode - need to fix text color

* revert test

* Theme page sorted, need to fix ColorMode

* colormode sorted

* colormode sorted

* start type fix + what to do about blocks

* LayoutGrid + content Container

* LayoutGrid done

* start flexbox, need to look into sandbox stuff

* gridbox + flexbox are good, just need to tweak

* tweaks to headers

* lots of style tweaks + deduplications

* fix typograpth, need to fix color mode switches

* start on system stories

* unify shared elements

* add variance + fix tables

* more tweaks to status

* design tweaks

* add hub

* more tweaks

* rename DataTable

* clean up of default

* typography + meta stories

* add anchor story

* start text + hiddentext

* text done

* started snippet changes

* fixed code snippets

* meta and sorted done?"

* renamed + sorting

* more kenny edits

* more kenny edits + other new tab for links

* the last of it

* fix molecule order

* update production deploy (#2980)

* [gm-916] update storybook production deploy

* swap to relative pathing

* again

* feat(Organisms)  (#2978)

* added in Organisms stories

* remove old styleguide files

* Revert "remove old styleguide files"

This reverts commit baba497.

* feat(Atoms): migrate all Atom stories (#2972)

* create story template

* move template out of atoms

* update import

* skip to content

* withSource to sourceState

* update skip to content

* tag story

* add statuses

* radial progress story

* updates from figma

* toggle story

* update status

* pattern story

* update toggle interactive example

* illustrations story

* focus trap story

* update playground examples

* floating card story

* update illustrations subtitle

* drawer story

* update drawer story

* animation story

* add figma links

* card story

* about page

* progress bar story

* popovercontainer story

* loader stories

* fix about pages

* move examples below

* icon stories

* checkbox story

* add checkbox example

* most of input story

* Badges started (#2979)

* Badges started

* badges done

* add most GH links, need to test

* add github links to most pages

* remove comment

* finish input stories

* update more github links

* textarea story

* radio story

* update examples

* select story

* fix card usage guidelines

* feat(Atoms): adding in the remaining Atoms (#2982)

* finished badges

* added buttons

* added formelements

* updated about page

* minor touchups

* fixed minor ts error

* updated usage for CTAButton and IconButton

* selectdropdown story

* remove optional text

* update forminputs table of contents

* fix forminput table of contents links

* remove logo story

* remove placeholder text

* update main table of contents

* fix icon table of contents

* fix loaders table of contents links

* PR feedback

* uncomment link

---------

Co-authored-by: cassie spain <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>

* remove old styleguide files (#2985)

---------

Co-authored-by: Amy Resnik <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>

---------

Co-authored-by: Amy Resnik <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>

---------

Co-authored-by: Jake Hiller <[email protected]>
Co-authored-by: Amy Resnik <[email protected]>
Co-authored-by: Kenny Lin <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants