feat(TextLink): add status types (#2915)

kiwicom · May 21, 2021 · 970edc7 · 970edc7
1 parent 4172a51
commit 970edc7
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 11 deletions.
diff --git a/packages/orbit-components/src/Text/index.js b/packages/orbit-components/src/Text/index.js
@@ -13,7 +13,6 @@ import {
 import getSpacingToken from "../common/getSpacingToken";
 import { textAlign } from "../utils/rtl";
 import { getLinkStyle, StyledTextLink } from "../TextLink";
-import { TYPE_OPTIONS as TEXTLINK_TYPE_OPTIONS } from "../TextLink/consts";
 
 import type { Props } from "./index";
 
@@ -76,8 +75,7 @@ export const StyledText: any = styled(
 
   a:not(${StyledTextLink}) {
     // TextLink in Text always win
-    ${({ theme }) =>
-      getLinkStyle({ theme, type: TEXTLINK_TYPE_OPTIONS.PRIMARY })}// Get styles from TextLink
+    ${({ theme, type }) => getLinkStyle({ theme, type })}// Get styles from TextLink
   }
 `;
 

diff --git a/packages/orbit-components/src/TextLink/README.md b/packages/orbit-components/src/TextLink/README.md
@@ -38,11 +38,14 @@ Table below contains all types of the props available in TextLink component.
 
 ### enum
 
-| size       | type          |
-| :--------- | :------------ |
-| `"small"`  | `"primary"`   |
-| `"normal"` | `"secondary"` |
-| `"large"`  |
+| type          | size       |
+| :------------ | :--------- |
+| `"primary"`   | `"small"`  |
+| `"secondary"` | `"normal"` |
+| `"info"`      | `"large"`  |
+| `"success"`   |
+| `"warning"`   |
+| `"critical"`  |
 
 ## Functional specs
 

diff --git a/packages/orbit-components/src/TextLink/TextLink.stories.js b/packages/orbit-components/src/TextLink/TextLink.stories.js
@@ -5,7 +5,9 @@ import { action } from "@storybook/addon-actions";
 import { text, boolean, select } from "@storybook/addon-knobs";
 
 import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts";
+import { TYPE_OPTIONS as TEXT_TYPES } from "../Text/consts";
 import * as Icons from "../icons";
+import Text from "../Text";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 
 import TextLink from "./index";
@@ -138,6 +140,30 @@ export const Playground = (): React.Node => {
   );
 };
 
+export const TextLinkInText = (): React.Node => {
+  const type = select("type", Object.values(TEXT_TYPES), TEXT_TYPES.CRITICAL);
+  return (
+    <Text type={type}>
+      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dapibus fermentum ipsum. Duis
+      ante orci, molestie vitae vehicula venenatis, tincidunt ac pede.{" "}
+      <TextLink onClick={action("onClick")} type={type}>
+        Etiam dui sem
+      </TextLink>
+      , fermentum vitae, sagittis id, malesuada in, quam. Vivamus luctus egestas leo. Integer
+      imperdiet lectus quis justo. Duis condimentum augue id magna semper rutrum. Quisque porta. Sed
+      elit dui, pellentesque a, faucibus vel, interdum nec, diam.
+    </Text>
+  );
+};
+
+TextLinkInText.story = {
+  name: "TextLink inside paragraph",
+  parameters: {
+    info:
+      "It inherits the visual style of the parent paragraph. Visit Orbit.Kiwi for more detailed guidelines.",
+  },
+};
+
 Playground.story = {
   parameters: {
     info:

diff --git a/packages/orbit-components/src/TextLink/consts.js b/packages/orbit-components/src/TextLink/consts.js
@@ -2,6 +2,10 @@
 export const TYPE_OPTIONS = {
   PRIMARY: "primary",
   SECONDARY: "secondary",
+  SUCCESS: "success",
+  INFO: "info",
+  WARNING: "warning",
+  CRITICAL: "critical",
 };
 
 export const SIZE_OPTIONS = {

diff --git a/packages/orbit-components/src/TextLink/index.d.ts b/packages/orbit-components/src/TextLink/index.d.ts
@@ -7,7 +7,7 @@ import * as Common from "../common/common";
 
 declare module "@kiwicom/orbit-components/lib/TextLink";
 
-export type Type = "primary" | "secondary";
+export type Type = "primary" | "secondary" | "info" | "success" | "warning" | "critical";
 
 export interface Props extends Common.Global {
   readonly ariaCurrent?: string;

diff --git a/packages/orbit-components/src/TextLink/index.js b/packages/orbit-components/src/TextLink/index.js
@@ -12,11 +12,26 @@ const getColor = ({ theme, type }) => {
   const tokens = {
     [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextLinkPrimary,
     [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextLinkSecondary,
+    [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDark,
+    [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDark,
+    [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDark,
+    [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDark,
   };
 
   return tokens[type];
 };
 
+const getHoverColor = ({ type, theme }) => {
+  const tokens = {
+    [TYPE_OPTIONS.PRIMARY]: theme.orbit.paletteProductNormalHover,
+    [TYPE_OPTIONS.SECONDARY]: theme.orbit.paletteProductNormalHover,
+    [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDarkHover,
+    [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDarkHover,
+    [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDarkHover,
+    [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDarkHover,
+  };
+  return tokens[type];
+};
 const getSizeToken = () => ({ theme, size }) => {
   const sizeTokens = {
     [SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeTextLarge,
@@ -66,7 +81,7 @@ export const getLinkStyle = ({ theme, type }: GetLinkStyleProps): any => css`
   :focus {
     outline: none;
     text-decoration: none;
-    color: ${theme.orbit.paletteProductNormalHover};
+    color: ${getHoverColor({ theme, type })};
   }
 `;
 

diff --git a/packages/orbit-components/src/TextLink/index.js.flow b/packages/orbit-components/src/TextLink/index.js.flow
@@ -8,7 +8,7 @@ import type { CSSRules, StyledComponent } from "styled-components";
 import type { Globals, Component } from "../common/common.js.flow";
 import type { ThemeProps } from "../defaultTheme";
 
-export type Type = "primary" | "secondary";
+export type Type = "primary" | "secondary" | "info" | "success" | "warning" | "critical";
 
 type Size = "large" | "normal" | "small";