feat(Text): add extraLarge size

kiwicom · Jun 15, 2023 · afe2971 · afe2971
1 parent 2943557
commit afe2971
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 11 deletions.
diff --git a/docs/src/__examples__/Text/DEFAULT.tsx b/docs/src/__examples__/Text/DEFAULT.tsx
@@ -27,7 +27,7 @@ export default {
         {
           name: "size",
           type: "select",
-          options: ["small", "normal", "large"],
+          options: ["small", "normal", "large", "extraLarge"],
           defaultValue: "normal",
         },
         {

diff --git a/docs/src/__examples__/Text/SIZES.tsx b/docs/src/__examples__/Text/SIZES.tsx
@@ -16,5 +16,9 @@ export default {
       name: "Large",
       code: `() => <Text size="large">Large text</Text>`,
     },
+    {
+      name: "ExtraLarge",
+      code: `() => <Text size="extraLarge">Large text</Text>`,
+    },
   ],
 };
diff --git a/packages/orbit-components/src/Text/README.md b/packages/orbit-components/src/Text/README.md
@@ -34,12 +34,12 @@ Table below contains all types of the props available in the Text component.
 
 ### enum
 
-| type          | align       | as       | size       | weight     |
-| :------------ | :---------- | :------- | :--------- | :--------- |
-| `"primary"`   | `"start"`   | `"p"`    | `"small"`  | `"normal"` |
-| `"secondary"` | `"end"`     | `"span"` | `"normal"` | `"medium"` |
-| `"info"`      | `"left"`    | `"div"`  | `"large"`  | `"bold"`   |
-| `"success"`   | `"center"`  |          |            |            |
-| `"warning"`   | `"right"`   |          |            |            |
-| `"critical"`  | `"justify"` |          |            |            |
-| `"white"`     |             |          |            |            |
+| type          | align       | as       | size           | weight     |
+| :------------ | :---------- | :------- | :------------- | :--------- |
+| `"primary"`   | `"start"`   | `"p"`    | `"small"`      | `"normal"` |
+| `"secondary"` | `"end"`     | `"span"` | `"normal"`     | `"medium"` |
+| `"info"`      | `"left"`    | `"div"`  | `"large"`      | `"bold"`   |
+| `"success"`   | `"center"`  |          | `"extraLarge"` |            |
+| `"warning"`   | `"right"`   |          |                |            |
+| `"critical"`  | `"justify"` |          |                |            |
+| `"white"`     |             |          |                |            |
diff --git a/packages/orbit-components/src/Text/consts.ts b/packages/orbit-components/src/Text/consts.ts
@@ -12,6 +12,7 @@ export enum SIZE_OPTIONS {
   SMALL = "small",
   NORMAL = "normal",
   LARGE = "large",
+  EXTRA_LARGE = "extraLarge",
 }
 
 export enum WEIGHT_OPTIONS {

diff --git a/packages/orbit-components/src/Text/index.js.flow b/packages/orbit-components/src/Text/index.js.flow
@@ -11,7 +11,7 @@ import type { Globals, ObjectProperty } from "../common/common.js.flow";
 type Align = "start" | "end" | "left" | "center" | "right" | "justify";
 type As = "p" | "span" | "div";
 type Type = "primary" | "secondary" | "info" | "success" | "warning" | "critical" | "white";
-type Size = "large" | "normal" | "small";
+type Size = "large" | "normal" | "small" | "extraLarge";
 type Weight = "normal" | "medium" | "bold";
 
 export type Props = {|

diff --git a/packages/orbit-components/src/Text/index.tsx b/packages/orbit-components/src/Text/index.tsx
@@ -47,6 +47,7 @@ const getWeightToken = ({ theme, weight }: { theme: Theme; weight: Weight }): st
 
 const getSizeToken = ({ theme, size }: { theme: Theme; size: Common.Size }): string | null => {
   const sizeTokens = {
+    [SIZE_OPTIONS.EXTRA_LARGE]: theme.orbit.fontSizeTextExtraLarge,
     [SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
     [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeTextNormal,
     [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeTextSmall,
@@ -65,6 +66,7 @@ const getLineHeightToken = ({
   size?: Common.Size | null;
 }): string | null => {
   const lineHeightTokens = {
+    [SIZE_OPTIONS.EXTRA_LARGE]: theme.orbit.lineHeightTextLarge,
     [SIZE_OPTIONS.LARGE]: theme.orbit.lineHeightTextLarge,
     [SIZE_OPTIONS.NORMAL]: theme.orbit.lineHeightTextNormal,
     [SIZE_OPTIONS.SMALL]: theme.orbit.lineHeightTextSmall,