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.

Sign up for GitHub

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

[DS-783] - Fix inconsistencies in the text component #754

Merged
merged 8 commits into from
Mar 8, 2024
Merged

[DS-783] - Fix inconsistencies in the text component #754

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1e09e86
feat: create new text components
Mar 7, 2024
e4f3988
test: update snapshots and create new tests
Mar 7, 2024
7755bcb
docs: update text component doc and create typography doc
Mar 7, 2024
dc48604
docs: add comments in the code
Mar 8, 2024
a7a30df
docs: update typography doc
Mar 8, 2024
6a9567d
docs: add comments in the code
Mar 8, 2024
b87f837
docs: fix typo
Mar 8, 2024
88350b0
docs: fix typo
Mar 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 16 additions & 30 deletions packages/doc/content/components/components/text/default-native.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,22 @@ import { Link as GatsbyLink } from 'gatsby';
### Usage

```javascript type=expo
<Text.H1 color="primary">Live the mission</Text.H1>
<Text.H2 color="secondary">Live the mission</Text.H2>
<Text.H3 color="tertiary">Live the mission</Text.H3>
<Text.H4>Live the mission</Text.H4>
<Text.H5>Live the mission</Text.H5>

<Text.H1 color="primary" light>
Heading H1
</Text.H1>
<Text.H2 color="secondary" light>
Heading H2
</Text.H2>
<Text.H3 color="tertiary" light>
Heading H3
</Text.H3>

<Text>Live the mission</Text>
<Text.Small>Live the mission</Text.Small>
<Text.Tiny>Live the mission</Text.Tiny>
<Text.Light>Live the mission</Text.Light>
<Text.Regular>Live the mission</Text.Regular>
<Text.Medium>Live the mission</Text.Medium>
<Text.Bold>Live the mission</Text.Bold>
<Text.Black>Live the mission</Text.Black>
<Text.SectionTitle>Live the mission</Text.SectionTitle>
<Text.SmallestException>Live the mission</Text.SmallestException>

<Text.Medium fontSize="xsmall">XSmall Text.Medium</Text.Medium>
<Text.Medium fontSize="medium">Medium Text.Medium</Text.Medium>
<Text.Medium fontSize="xlarge">XLarge Text.Medium</Text.Medium>
<Text.Display1>Display1</Text.Display1>
<Text.Display2>Display2</Text.Display2>
<Text.Display3>Display3</Text.Display3>
<Text.Display4>Display4</Text.Display4>
<Text.DisplayNumber>123</Text.DisplayNumber>
<Text.H1>H1</Text.H1>
<Text.H2>H2</Text.H2>
<Text.H3>H3</Text.H3>
<Text.H4>H4</Text.H4>
<Text.H5>H5</Text.H5>
<Text.Body1>Body1</Text.Body1>
<Text.Body2>Body2</Text.Body2>
<Text.Caption>Caption</Text.Caption>
<Text.Overline>Overline</Text.Overline>
<Text.SectionTitle>SectionTitle</Text.SectionTitle>
<Text.SmallestException>SectionTitle</Text.SmallestException>
```

### Props
Expand Down
84 changes: 30 additions & 54 deletions packages/doc/content/components/components/text/default-web.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,46 @@
import { Link as GatsbyLink } from 'gatsby';

### Simple Usage
### Gympass fonts

```javascript reactLive=true
<Text.H1>Live the mission</Text.H1>
```
All Yoga components uses its own font family based on
[font design token](https://gympass.github.io/yoga/guidelines/tokens/fonts)
provided by the `<ThemeProvider />`, if you are using Server Side Rendening
(SSR) you need to import the `<FontLoader />` in your `<Head>`.

### All Usage

```javascript reactLive=true
<Box width={500}>
<Text.Display1>Live the mission</Text.Display1>
<Text.Display2>Live the mission</Text.Display2>
<Text.Display3>Live the mission</Text.Display3>
<Text.Display4>Live the mission</Text.Display4>
<Text.Display1>Display1</Text.Display1>
<Text.Display2>Display2</Text.Display2>
<Text.Display3>Display3</Text.Display3>
<Text.Display4>Display4</Text.Display4>
<Text.DisplayNumber>123</Text.DisplayNumber>

<Text.H1 color="primary">Live the mission</Text.H1>
<Text.H2 color="secondary">Live the mission</Text.H2>
<Text.H3>Live the mission</Text.H3>
<Text.H4>Live the mission</Text.H4>
<Text>Live the mission</Text>
<br />
<Text.Small>Live the mission</Text.Small>
<Text.Tiny>Live the mission</Text.Tiny>
<Text.Regular>Live the mission</Text.Regular>
<Text.Medium>Live the mission</Text.Medium>
<Text.Bold>Live the mission</Text.Bold>
<Text.Black>Live the mission</Text.Black>
<Text.SectionTitle>Live the mission</Text.SectionTitle>
<Text.SmallestException>Live the mission</Text.SmallestException>
<br />
<Text.Small fontSize="xsmall">Live the small mission</Text.Small>
<Text.Tiny fontSize="medium">Live the medium mission</Text.Tiny>
<Text.Regular fontSize="xlarge">Live the xlarge mission</Text.Regular>
<Text.Medium fontSize="xxxlarge">Live the xxxlarge mission</Text.Medium>
<br />
<Text.Medium numberOfLines={2} fontSize="xxxlarge">
Live the truncated mission
<br />
After two lines
</Text.Medium>
<Text color="vibin">Live the mission</Text>
<Text color="hope">Live the mission</Text>
<Text color="energy">Live the mission</Text>
<Text color="relax">Live the mission</Text>
<Text color="peace">Live the mission</Text>
<Text color="verve">Live the mission</Text>
<Text color="uplift">Live the mission</Text>
<Text color="deepPurple">Live the mission</Text>
<Text color="stamina">Live the mission</Text>
<Text color="dark">Live the mission</Text>
<Text color="medium">Live the mission</Text>
<Text color="deep">Live the mission</Text>
<Text color="light">Live the mission</Text>
<Text color="clear">Live the mission</Text>
<Text color="white">Live the mission</Text>
<Text.H1>H1</Text.H1>
<Text.H2>H2</Text.H2>
<Text.H3>H3</Text.H3>
<Text.H4>H4</Text.H4>
<Text.H5>H5</Text.H5>
<Text.Body1>Body1</Text.Body1>
<Text.Body2>Body2</Text.Body2>
<Text.Caption>Caption</Text.Caption>
<Text.Overline>Overline</Text.Overline>
<Text.SectionTitle>SectionTitle</Text.SectionTitle>
<Text.SmallestException>SectionTitle</Text.SmallestException>
Copy link

Choose a reason for hiding this comment

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

Here should be SmallestException, right?

</Box>
```

### Gympass fonts
### Props Usage

All Yoga components uses its own font family based on
[font design token](https://gympass.github.io/yoga/guidelines/tokens/fonts)
provided by the `<ThemeProvider />`, if you are using Server Side Rendening
(SSR) you need to import the `<FontLoader />` in your `<Head>`.
```javascript reactLive=true
<Box width={500}>
<Text.H2 color="primary">Primary color</Text.H2>
<Text.H2 color="secondary">Secondary color</Text.H2>
<Text.H2 bold>Bold</Text.H2>
<Text.H2 light>Light</Text.H2>
<Text.H2 numberOfLines={2}>Yoga is a scientific system of practices made to help each one of us achieve our highest potential and experience.</Text.H2>
</Box>
```

### Props

Expand Down
32 changes: 2 additions & 30 deletions packages/doc/content/components/components/text/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,8 @@ import TextNative from './default-native.mdx';
Use `<Text>` to present your design and content as clearly and efficiently as
possible.

### Reference

| **Component** | **Element** | **Font-Size** | **Font-Weight** | **Line-Height** |
| -------------------------- | ----------- | ------------- | --------------- | --------------- |
| `<Text.Display1>` | `<p>` | xhuge | bold | xhuge |
| `<Text.Display2>` | `<p>` | xxxlarge | bold | xxlarge |
| `<Text.Display3>` | `<p>` | xxlarge | bold | xlarge |
| `<Text.Display4>` | `<p>` | xlarge | bold | medium |
| `<Text.DisplayNumber>` | `<p>` | xxxlarge | bold | xxlarge |
| `<Text.H1>` | `<h1>` | huge | medium | huge |
| `<Text.H2>` | `<h2>` | xxxlarge | medium | xxxlarge |
| `<Text.H3>` | `<h3>` | xxlarge | medium | xxlarge |
| `<Text.H4>` | `<h4>` | xlarge | medium | xlarge |
| `<Text.H5>` | `<h5>` | large | medium | large |
| `<Text>` | `<p>` | medium | regular | medium |
| `<Text.Small>` | `<p>` | small | regular | small |
| `<Text.Tiny>` | `<p>` | xsmall | regular | xsmall |
| `<Text.Light>` | `<p>` | medium | light | - |
| `<Text.Regular>` | `<p>` | medium | regular | - |
| `<Text.Medium>` | `<p>` | medium | medium | - |
| `<Text.Bold>` | `<p>` | medium | bold | - |
| `<Text.Black>` | `<p>` | medium | black | - |
| `<Text.SectionTitle>` | `<p>` | xsmall | medium | xsmall |
| `<Text.SmallestException>` | `<p>` | xxsmall | regular | xxsmall |

_You can see the font-size tokens values
[here](https://gympass.github.io/yoga/guidelines/tokens/font-sizes)._

All Text components have a prop `size` which will set the `fontSize` accordingly
with our tokens. Regardless, all pre-established config will be prioritized.
You can consult the typography
[here](https://gympass.github.io/yoga/guidelines/typography).

<TabbedView>
<Tab title="Web">
Expand Down
39 changes: 39 additions & 0 deletions packages/doc/content/guidelines/typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
title: 'Typography'
metaTitle: 'Typography'
metaDescription: 'Typography'
---

## Typography

Inter is a font crafted & designed for screens. Is the main font used in Yoga because it can support long texts and information hierarchy to ensure good user experiences. It works for most things, like headings and body.

NaN Holo is used when we want to highlight, especially our brand, but also titles and feedback, for example. NaN Holo is used in our wow moments, so it shouldn't be used in long texts.

### Usage description

| **Component** | **Font-Size** | **Font-Weight** | **Line-Height** | **Usage** |
| ------------------------------- | ------------- | --------------- | --------------- | --------------- |
| `<Text.Display1>` | xhuge (60) | bold (700) | xhuge (60) | Use in wow moments, always in headings! <br /> Display 1 is the largest type of text on a screen, reserved for short and important texts. |
| `<Text.Display2>` | xxxlarge (40) | bold (700) | xxlarge (40) | Use in wow moments, always in titles! <br /> Display 2 can be the largest type of text on a screen, reserved for short and important texts. |
| `<Text.Display3>` | xxlarge (32) | bold (700) | xlarge (32) | Use in wow moments, always in headings! <br /> Display 3 is the largest type of text on a mobile screen, reserved for short and important texts. |
| `<Text.Display4>` | xlarge (24) | bold (700) | medium (24) | Use in wow moments, always in headings! <br /> Display 4 is one of the largest type of text on a screen. |
| `<Text.DisplayNumber>` | xxxlarge (40) | bold (700) | xxlarge (40) | Use in wow moments, always in headings! <br /> DisplayNumber is one of the largest type of text on a screen, reserved for important numbers. |
| `<Text.H1>` | huge (48) | medium (500) | huge (56) | H1 is the largest type of text on a screen, reserved for short, important text or numerals |
| `<Text.H1 bold>` | huge (48) | bold (700) | huge (56) | H1 is the largest type of text on a screen, reserved for short, important text or numerals. <br /> Use the bold prop for highlights |
| `<Text.H2>` | xxxlarge (40) | medium (500) | xxxlarge (48) | H2 can be the largest type of text on a screen, reserved for short, important text or numerals. |
| `<Text.H2 bold>` | xxxlarge (40) | bold (700) | xxxlarge (48) | H2 can be the largest type of text on a screen, reserved for short, important text or numerals. <br /> Use the bold prop for highlights |
| `<Text.H3>` | xxlarge (32) | medium (500) | xxlarge (40) | H3 is the largest type of text on a mobile screen, reserved for short, important text or numerals. |
| `<Text.H3 bold>` | xxlarge (32) | bold (700) | xxlarge (40) | H3 is the largest type of text on a mobile screen, reserved for short, important text or numerals. <br /> Use the bold prop for highlights |
| `<Text.H4>` | xlarge (24) | medium (500) | xlarge (32) | H4 is one of the largest type of text on a screen. |
| `<Text.H4 bold>` | xlarge (24) | bold (700) | xlarge (32) | H4 is one of the largest type of text on a screen. <br /> Use the bold prop for highlights |
| `<Text.H5>` | large (20) | medium (500) | large (28) | H5 is one of the largest type of text on a screen. A great size of title for Mobile screens. |
| `<Text.H5 bold>` | large (20) | bold (700) | large (28) | H5 is one of the largest type of text on a screen. A great size of title for Mobile screens. <br /> Use the bold prop for highlights |
| `<Text.Body1>` | medium (16) | medium (500) | medium (24) | This is the basic type of text for page content. <br /> It's the old Text. |
| `<Text.Body1 bold>` | medium (16) | bold (700) | medium (24) | This is the basic type of text for page content. <br /> Use the bold prop for highlights |
| `<Text.Body2>` | small (14) | medium (500) | small (20) | This is the basic type of text for page content. <br /> It's the old Text Small. |
| `<Text.Body2 bold>` | small (14) | bold (700) | small (20) | This is the basic type of text for page content. <br /> Use the bold prop for highlights |
| `<Text.Caption>` | xsmall (12) | regular (400) | xsmall (16) | Use captiona also for rules and legal Information. <br /> It's the old Tiny. |
| `<Text.Overline>` | xsmall (12) | bold (700) | xsmall (16) | Overline texts are used sparingly to present a title (above titles), list a component attribute and inside small data visualization components. |
| `<Text.SectionTitle>` | xsmall (12) | medium (500) | xsmall (16) | Avoid the usage! |
| `<Text.SmallestException>` | xxxsmall (10) | regular (400) | xxsmall (12) | Avoid the usage of the Smallest Exception! |
52 changes: 19 additions & 33 deletions packages/labnative/pages/Text.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,16 +29,16 @@ const TextPage = () => (
<Text.Display4>Display4</Text.Display4>
</TextWrapper>
<TextWrapper>
<Text.DisplayNumber>DisplayNumber</Text.DisplayNumber>
<Text.DisplayNumber>12345</Text.DisplayNumber>
</TextWrapper>
<TextWrapper>
<Text.H1 variant="primary">Heading H1</Text.H1>
<Text.H1>Heading H1</Text.H1>
</TextWrapper>
<TextWrapper>
<Text.H2 variant="secondary">Heading H2</Text.H2>
<Text.H2>Heading H2</Text.H2>
</TextWrapper>
<TextWrapper>
<Text.H3 variant="tertiary">Heading H3</Text.H3>
<Text.H3>Heading H3</Text.H3>
</TextWrapper>
<TextWrapper>
<Text.H4>Heading H4</Text.H4>
Expand All @@ -47,55 +47,41 @@ const TextPage = () => (
<Text.H5>Heading H5</Text.H5>
</TextWrapper>
<TextWrapper>
<Text.H1 variant="primary" light>
Heading H1
</Text.H1>
<Text.Body1>Body1</Text.Body1>
</TextWrapper>
<TextWrapper>
<Text.H2 variant="secondary" light>
Heading H2
</Text.H2>
<Text.Body2>Body2</Text.Body2>
</TextWrapper>
<TextWrapper>
<Text.H3 variant="tertiary" light>
Heading H3
</Text.H3>
<Text.Caption>Caption</Text.Caption>
</TextWrapper>
<TextWrapper>
<Text>Text Paragraph</Text>
<Text.Overline>Overline</Text.Overline>
</TextWrapper>
<TextWrapper>
<Text.Small>Text Small</Text.Small>
<Text.SectionTitle>SectionTitle</Text.SectionTitle>
</TextWrapper>
<TextWrapper>
<Text.Light>Text Light</Text.Light>
</TextWrapper>
<TextWrapper>
<Text.Regular>Text Regular</Text.Regular>
</TextWrapper>
<TextWrapper>
<Text.Medium>Text Medium</Text.Medium>
</TextWrapper>
<TextWrapper>
<Text.Bold>Text Bold</Text.Bold>
</TextWrapper>
<TextWrapper>
<Text.Black>Text Black</Text.Black>
<Text.SmallestException>SmallestException</Text.SmallestException>
</TextWrapper>

<TextWrapper>
<Text.SectionTitle>Text SectionTitle</Text.SectionTitle>
<Text.Body1 bold>Bold</Text.Body1>
</TextWrapper>
<TextWrapper>
<Text.SmallestException>Text SmallestException</Text.SmallestException>
<Text.Body1 light>Light</Text.Body1>
</TextWrapper>
<TextWrapper>
<Text.Medium fontSize="xsmall">XSmall Text.Medium</Text.Medium>
<Text.H4 variant="primary">Primary</Text.H4>
</TextWrapper>
<TextWrapper>
<Text.Medium fontSize="medium">Medium Text.Medium</Text.Medium>
<Text.H4 variant="secondary">Secondary</Text.H4>
</TextWrapper>
<TextWrapper>
<Text.Medium fontSize="xlarge">XLarge Text.Medium</Text.Medium>
<Text.Body1 numberOfLines={2}>
Yoga is a scientific system of practices made to help each one of us
achieve our highest potential and experience.
</Text.Body1>
</TextWrapper>
</ScrollView>
);
Expand Down
Loading
Loading