feat(TextLink): add extraLarge size

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

Hide file tree

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

diff --git a/docs/src/__examples__/TextLink/SIZES.tsx b/docs/src/__examples__/TextLink/SIZES.tsx
@@ -20,5 +20,9 @@ export default {
       name: "Large",
       code: `() => <TextLink size="large" href="https://orbit.kiwi">Large</TextLink>`,
     },
+    {
+      name: "ExtraLarge",
+      code: `() => <TextLink size="extraLarge" href="https://orbit.kiwi">ExtraLarge</TextLink>`,
+    },
   ],
 };
diff --git a/packages/orbit-components/src/TextLink/README.md b/packages/orbit-components/src/TextLink/README.md
@@ -40,12 +40,12 @@ Table below contains all types of the props available in TextLink component.
 
 ### enum
 
-| type          | size       |
-| :------------ | :--------- |
-| `"primary"`   | `"small"`  |
-| `"secondary"` | `"normal"` |
-| `"info"`      | `"large"`  |
-| `"success"`   |
+| type          | size           |
+| :------------ | :------------- |
+| `"primary"`   | `"small"`      |
+| `"secondary"` | `"normal"`     |
+| `"info"`      | `"large"`      |
+| `"success"`   | `"extraLarge"` |
 | `"warning"`   |
 | `"critical"`  |
 | `"white"`     |

diff --git a/packages/orbit-components/src/TextLink/consts.ts b/packages/orbit-components/src/TextLink/consts.ts
@@ -12,4 +12,5 @@ export enum SIZE_OPTIONS {
   SMALL = "small",
   NORMAL = "normal",
   LARGE = "large",
+  EXTRA_LARGE = "extraLarge",
 }
diff --git a/packages/orbit-components/src/TextLink/index.js.flow b/packages/orbit-components/src/TextLink/index.js.flow
@@ -10,7 +10,7 @@ import type { ThemeProps } from "../defaultTheme.js.flow";
 
 export type Type = "primary" | "secondary" | "info" | "success" | "warning" | "critical" | "white";
 
-type Size = "large" | "normal" | "small";
+type Size = "large" | "normal" | "small" | "extraLarge";
 
 export type Props = {|
   +ariaCurrent?: string,

diff --git a/packages/orbit-components/src/TextLink/index.tsx b/packages/orbit-components/src/TextLink/index.tsx
@@ -70,6 +70,7 @@ const getActiveColor: GetTextLinkTokensType =
 
 const getSizeToken = ({ theme, size }: { theme: Theme; size: Common.Size }): string => {
   const sizeTokens = {
+    [SIZE_OPTIONS.EXTRA_LARGE]: theme.orbit.fontSizeTextLarge,
     [SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
     [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeTextNormal,
     [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeTextSmall,

diff --git a/packages/orbit-components/src/common/types.d.ts b/packages/orbit-components/src/common/types.d.ts
@@ -18,7 +18,7 @@ export type Component =
   | string
   | React.ComponentType<any>
   | React.RefForwardingComponent<HTMLElement, any>;
-export type Size = "small" | "normal" | "large";
+export type Size = "small" | "normal" | "large" | "extraLarge";
 export type InputSize = "small" | "normal";
 
 export type Carrier = {