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

Add typography presets to Storybook #1272

Merged
merged 19 commits into from
Mar 14, 2024

Conversation

jamesmockett
Copy link
Contributor

@jamesmockett jamesmockett commented Mar 7, 2024

What are you changing?

  • Adds documentation and examples for web typography presets to Storybook, and deprecates existing typography API documentation
Screenshot 2024-03-12 at 14 50 21

@jamesmockett jamesmockett self-assigned this Mar 7, 2024
Copy link

changeset-bot bot commented Mar 7, 2024

⚠️ No Changeset found

Latest commit: 2228658

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions github-actions bot added the 📦 npm Affects a @guardian package on NPM label Mar 7, 2024
Copy link
Contributor

github-actions bot commented Mar 7, 2024

Tip

Once this PR is ready to go, add the run_chromatic label to run the Chromatic tests.

This saves us a lot of money by not running the tests before we need them.

@jamesmockett jamesmockett changed the base branch from main to jm/type-preset-release-branch March 7, 2024 18:10
@jamesmockett jamesmockett linked an issue Mar 7, 2024 that may be closed by this pull request
## What are you changing?

- Adds built script to generate CSS for new [web typography
presets](https://theguardian.design/2a1e5182b/p/01555f-typography-presets/b/830670)
from the existing definitions in the design tokens package and export
these as individual variables from Source Foundations
- Updates some incorrect font sizes in the design tokens

```bash
pnpm nx run @guardian/source-foundations:build-type-presets
```

```json
"textSansBold15": {
  "$value": {
    "fontFamily": "{typography.fontFamily.textSans}",
    "fontSize": "{typography.fontSize.15}",
    "lineHeight": "{typography.lineHeight.regular}",
    "fontWeight": "{typography.fontWeight.bold}",
    "fontStyle": "normal"
  }
},
```

⬇️

```tsx
export const textSansBold15 = `
  font-family: GuardianTextSans, "Guardian Text Sans Web", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 700;
  font-style: normal;
`;
```
@jamesmockett jamesmockett marked this pull request as ready for review March 12, 2024 14:50
@jamesmockett jamesmockett requested review from a team as code owners March 12, 2024 14:50
Copy link
Contributor

@oliverabrahams oliverabrahams left a comment

Choose a reason for hiding this comment

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

Looks perfect

@jamesmockett jamesmockett merged commit 662ddbf into jm/type-preset-release-branch Mar 14, 2024
10 checks passed
@jamesmockett jamesmockett deleted the jm/storybook-type-presets branch March 14, 2024 10:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🎨 Design System 📦 npm Affects a @guardian package on NPM
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add presets to Storybook
2 participants