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

Changes from 1 commit
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
Prev Previous commit
Next Next commit
docs: update typography doc
  • Loading branch information
Esthefanie Vila Maior committed Mar 8, 2024
commit a7a30dff81a1e2bfecacd0c7b99b28d0182077c6
50 changes: 25 additions & 25 deletions packages/doc/content/guidelines/typography.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,28 @@ NaN Holo is used when we want to highlight, especially our brand, but also title

### Usage description

| **Component** | **Element** | **Font-Size** | **Font-Weight** | **Line-Height** | **Usage** |
| ------------------------------- | ----------- | ------------- | --------------- | --------------- | --------------- |
| `<Text.Display1>` | `<h1>` | xhuge (60) | bold (700) | xhuge (60) | Use in wow moments, always in headings! Display 1 is the largest type of text on a screen, reserved for short and important texts. |
| `<Text.Display2>` | `<h2>` | xxxlarge (40) | bold (700) | xxlarge (40) | Use in wow moments, always in titles! Display 2 can be the largest type of text on a screen, reserved for short and important texts. |
| `<Text.Display3>` | `<h3>` | xxlarge (32) | bold (700) | xlarge (32) | Use in wow moments, always in headings! Display 3 is the largest type of text on a mobile screen, reserved for short and important texts. |
| `<Text.Display4>` | `<h4>` | xlarge (24) | bold (700) | medium (24) | Use in wow moments, always in headings! Display 4 is one of the largest type of text on a screen. |
| `<Text.DisplayNumber>` | `<p>` | xxxlarge (40) | bold (700) | xxlarge (40) | Use in wow moments, always in headings! DisplayNumber is one of the largest type of text on a screen, reserved for important numbers. |
| `<Text.H1>` | `<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>` | `<h1>` | 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>` | `<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>` | `<h2>` | 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>` | `<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>` | `<h3>` | 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>` | `<h4>` | xlarge (24) | medium (500) | xlarge (32) | H4 is one of the largest type of text on a screen. |
| `<Text.H4 bold>` | `<h4>` | 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>` | `<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>` | `<h5>` | 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>` | `<p>` | 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>` | `<p>` | 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>` | `<p>` | 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>` | `<p>` | 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>` | `<p>` | xsmall (12) | regular (400) | xsmall (16) | Use captiona also for rules and legal Information. <br /> It's the old Tiny. |
| `<Text.Overline>` | `<p>` | 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>` | `<p>` | xsmall (12) | medium (500) | xsmall (16) | Avoid the usage! |
| `<Text.SmallestException>` | `<p>` | xxxsmall (10) | regular (400) | xxsmall (12) | Avoid the usage of the Smallest Exception! |
| **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! |
Loading