Merge pull request #740 from gympass/DS-776

feat: create new text components
gympass · Feb 27, 2024 · c41929e · c41929e
2 parents eda7d46 + 217cb26
commit c41929e
Show file tree

Hide file tree

Showing 36 changed files with 718 additions and 372 deletions.
diff --git a/packages/doc/content/components/components/text/default-web.mdx b/packages/doc/content/components/components/text/default-web.mdx
@@ -10,6 +10,12 @@ import { Link as GatsbyLink } from 'gatsby';
 
 ```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.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>
@@ -30,7 +36,11 @@ import { Link as GatsbyLink } from 'gatsby';
   <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.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>

diff --git a/packages/doc/content/components/components/text/index.mdx b/packages/doc/content/components/components/text/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: 'Text'
 metaTitle: 'Text'
-metaDescription: 'Use Text to present your design and content as clearly and 
+metaDescription: 'Use Text to present your design and content as clearly and
 efficiently as possible.'
 ---
 
@@ -15,28 +15,33 @@ possible.
 
 ### Reference
 
-| **Component**                | **Element** | **Font-Size** | **Font-Weight** | **Line-Height** |
-| ---------------------------- | ----------- | ------------- | --------------- | --------------- |
-| `<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         |
+| **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 
+All Text components have a prop `size` which will set the `fontSize` accordingly
 with our tokens. Regardless, all pre-established config will be prioritized.
 
 <TabbedView>

diff --git a/packages/labnative/pages/Text.jsx b/packages/labnative/pages/Text.jsx
@@ -16,6 +16,21 @@ const TextWrapper = styled.View`
 
 const TextPage = () => (
   <ScrollView>
+    <TextWrapper>
+      <Text.Display1>Display1</Text.Display1>
+    </TextWrapper>
+    <TextWrapper>
+      <Text.Display2>Display2</Text.Display2>
+    </TextWrapper>
+    <TextWrapper>
+      <Text.Display3>Display3</Text.Display3>
+    </TextWrapper>
+    <TextWrapper>
+      <Text.Display4>Display4</Text.Display4>
+    </TextWrapper>
+    <TextWrapper>
+      <Text.DisplayNumber>DisplayNumber</Text.DisplayNumber>
+    </TextWrapper>
     <TextWrapper>
       <Text.H1 variant="primary">Heading H1</Text.H1>
     </TextWrapper>

diff --git a/packages/tokens/src/global/font-sizes.ts b/packages/tokens/src/global/font-sizes.ts
@@ -8,9 +8,10 @@ const sizes = {
   xxlarge: 32,
   xxxlarge: 40,
   huge: 48,
+  xhuge: 60,
 } as const;
 
-const fontSizes = {...Object.values(sizes), ...sizes};
+const fontSizes = { ...Object.values(sizes), ...sizes };
 
 export type FontSizes = Partial<typeof fontSizes>;
 

diff --git a/packages/tokens/src/global/line-heights.ts b/packages/tokens/src/global/line-heights.ts
@@ -8,9 +8,10 @@ const lineHeightSizes = {
   xxlarge: 40,
   xxxlarge: 48,
   huge: 56,
+  xhuge: 60,
 } as const;
 
-const lineHeight = {...Object.values(lineHeightSizes), ...lineHeightSizes};
+const lineHeight = { ...Object.values(lineHeightSizes), ...lineHeightSizes };
 
 export type LineHeightSizes = Partial<typeof lineHeight>;
 

diff --git a/packages/yoga/src/Accordion/web/__snapshots__/Accordion.test.jsx.snap b/packages/yoga/src/Accordion/web/__snapshots__/Accordion.test.jsx.snap
@@ -107,19 +107,19 @@ exports[`<Accordion /> should correctly render the default version 1`] = `
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   color: #6B6B78;
 }
 
 .c3 {
   margin: 0;
   padding: 0;
   font-size: 16px;
-  font-weight: 500;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 500;
   line-height: 24px;
 }
 
@@ -128,9 +128,9 @@ exports[`<Accordion /> should correctly render the default version 1`] = `
   padding: 0;
   font-size: 16px;
   line-height: 24px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   font-size: 16px;
 }
 
@@ -301,19 +301,19 @@ exports[`<Accordion /> should correctly render the default version with subtitle
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   color: #6B6B78;
 }
 
 .c3 {
   margin: 0;
   padding: 0;
   font-size: 16px;
-  font-weight: 500;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 500;
   line-height: 24px;
 }
 
@@ -322,9 +322,9 @@ exports[`<Accordion /> should correctly render the default version with subtitle
   padding: 0;
   font-size: 16px;
   line-height: 24px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   font-size: 16px;
 }
 
@@ -502,19 +502,19 @@ exports[`<Accordion /> should correctly render the default version without side
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   color: #6B6B78;
 }
 
 .c3 {
   margin: 0;
   padding: 0;
   font-size: 16px;
-  font-weight: 500;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 500;
   line-height: 24px;
 }
 
@@ -523,9 +523,9 @@ exports[`<Accordion /> should correctly render the default version without side
   padding: 0;
   font-size: 16px;
   line-height: 24px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   font-size: 16px;
 }
 
@@ -696,9 +696,9 @@ exports[`<Accordion /> should correctly render the small version 1`] = `
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   color: #6B6B78;
 }
 
@@ -707,19 +707,19 @@ exports[`<Accordion /> should correctly render the small version 1`] = `
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
 }
 
 .c9 {
   margin: 0;
   padding: 0;
   font-size: 16px;
   line-height: 24px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   font-size: 16px;
 }
 
@@ -890,9 +890,9 @@ exports[`<Accordion /> should correctly render the small version with subtitle 1
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   color: #6B6B78;
 }
 
@@ -901,19 +901,19 @@ exports[`<Accordion /> should correctly render the small version with subtitle 1
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
 }
 
 .c9 {
   margin: 0;
   padding: 0;
   font-size: 16px;
   line-height: 24px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   font-size: 16px;
 }
 
@@ -1100,9 +1100,9 @@ exports[`<Accordion /> should correctly render the small version without side pa
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   color: #6B6B78;
 }
 
@@ -1111,19 +1111,19 @@ exports[`<Accordion /> should correctly render the small version without side pa
   padding: 0;
   font-size: 14px;
   line-height: 20px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
 }
 
 .c9 {
   margin: 0;
   padding: 0;
   font-size: 16px;
   line-height: 24px;
-  font-weight: 400;
-  font-family: Rubik;
   color: #231B22;
+  font-family: Rubik;
+  font-weight: 400;
   font-size: 16px;
 }