diff --git a/src/Text/README.md b/src/Text/README.md
index 27c5f61ec1..bf1de96165 100644
--- a/src/Text/README.md
+++ b/src/Text/README.md
@@ -23,8 +23,13 @@ Table below contains all types of the props available in the Text component.
### enum
-| align | type | element | size | weight |
-| :--------- | :------------ | :------- | :--------- | :---------- |
-| `"left"` | `"attention"` | `"p"` | `"small"` | `"regular"` |
-| `"center"` | `"primary"` | `"span"` | `"normal"` | `"bold"` |
-| `"right"` | `"secondary"` | `"div"` | `"large"` | |
+| type | align | element | size | weight |
+| :-------------- | :--------- | :------- | :--------- | :---------- |
+| `"attention"` | `"left"` | `"p"` | `"small"` | `"regular"` |
+| `"primary"` | `"center"` | `"span"` | `"normal"` | `"bold"` |
+| `"secondary"` | `"right"` | `"div"` | `"large"` | |
+| `"info"` | | | | |
+| `"success"` | | | | |
+| `"warning"` | | | | |
+| `"critical"` | | | | |
+| `"white"` | | | | |
diff --git a/src/Text/Text.js b/src/Text/Text.js
index 38b913dc3b..d0f275ab0f 100644
--- a/src/Text/Text.js
+++ b/src/Text/Text.js
@@ -46,6 +46,11 @@ const Text = ({
[TYPE_OPTIONS.PRIMARY]: theme.colorTextPrimary,
[TYPE_OPTIONS.SECONDARY]: theme.colorTextSecondary,
[TYPE_OPTIONS.ATTENTION]: theme.colorTextAttention,
+ [TYPE_OPTIONS.INFO]: theme.paletteBlueNormal,
+ [TYPE_OPTIONS.SUCCESS]: theme.paletteGreenNormal,
+ [TYPE_OPTIONS.WARNING]: theme.paletteOrangeNormal,
+ [TYPE_OPTIONS.CRITICAL]: theme.colorTextError,
+ [TYPE_OPTIONS.WHITE]: theme.paletteWhite,
},
weightText: {
[WEIGHT_OPTIONS.NORMAL]: theme.fontWeightNormal,
diff --git a/src/Text/Text.js.flow b/src/Text/Text.js.flow
index 0cc236407f..0a74a4acb3 100644
--- a/src/Text/Text.js.flow
+++ b/src/Text/Text.js.flow
@@ -3,7 +3,15 @@ import { defaultTokens } from "@kiwicom/orbit-design-tokens";
type Align = "left" | "center" | "right";
type Element = "p" | "span" | "div";
-type Type = "primary" | "secondary" | "attention";
+type Type =
+ | "primary"
+ | "secondary"
+ | "attention"
+ | "info"
+ | "success"
+ | "warning"
+ | "critical"
+ | "white";
type Size = "large" | "normal" | "small";
type Weight = "regular" | "bold";
diff --git a/src/Text/Text.stories.js b/src/Text/Text.stories.js
index ef971a9339..4feb804be3 100644
--- a/src/Text/Text.stories.js
+++ b/src/Text/Text.stories.js
@@ -16,15 +16,8 @@ import {
setAddon(chaptersAddon);
-const options = {
- allowSourceToggling: false,
- allowPropTablesToggling: false,
-};
-
-const customText = text(
- "Text",
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.",
-);
+const customText =
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.";
storiesOf("Text", module)
.addDecorator(withKnobs)
@@ -33,56 +26,113 @@ storiesOf("Text", module)
padding: "20px",
}),
)
- .addWithChapters("Primary text", () => ({
- info:
- "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
- chapters: [
- {
- sections: [
- {
- sectionFn: () => {customText},
- options,
- },
- ],
- },
- ],
- }))
- .addWithChapters("Secondary text", () => ({
- info:
- "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
- chapters: [
- {
- sections: [
- {
- sectionFn: () => {customText},
- options,
- },
- ],
- },
- ],
- }))
- .addWithChapters("Attention text", () => ({
- info:
- "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
- chapters: [
- {
- sections: [
- {
- sectionFn: () => {customText},
- options,
- },
- ],
- },
- ],
- }))
+ .addWithChapters("Primary text", () => {
+ const children = text("Text", customText);
+
+ return {
+ info:
+ "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+ chapters: [
+ {
+ sections: [
+ {
+ sectionFn: () => {children},
+ },
+ ],
+ },
+ ],
+ };
+ })
+ .addWithChapters("Secondary text", () => {
+ const children = text("Text", customText);
+
+ return {
+ info:
+ "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+ chapters: [
+ {
+ sections: [
+ {
+ sectionFn: () => {children},
+ },
+ ],
+ },
+ ],
+ };
+ })
+ .addWithChapters("Attention text", () => {
+ const children = text("Text", customText);
+
+ return {
+ info:
+ "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+ chapters: [
+ {
+ sections: [
+ {
+ sectionFn: () => {children},
+ },
+ ],
+ },
+ ],
+ };
+ })
+ .addWithChapters("Status text", () => {
+ const children = text("Text", customText);
+
+ return {
+ info:
+ "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+ chapters: [
+ {
+ sections: [
+ {
+ sectionFn: () => {children},
+ },
+ {
+ sectionFn: () => {children},
+ },
+ {
+ sectionFn: () => {children},
+ },
+ {
+ sectionFn: () => {children},
+ },
+ ],
+ },
+ ],
+ };
+ })
+ .addWithChapters("White text", () => {
+ const children = text("Text", customText);
+
+ return {
+ info:
+ "The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.",
+ chapters: [
+ {
+ sections: [
+ {
+ sectionFn: () => (
+
+ {children}
+
+ ),
+ },
+ ],
+ },
+ ],
+ };
+ })
.addWithChapters("Playground", () => {
- const type = select("Type", Object.values(TYPE_OPTIONS), "primary");
- const element = select("Element", Object.values(ELEMENT_OPTIONS), "p");
- const size = select("Size", Object.values(SIZE_OPTIONS), "normal");
- const weight = select("Weight", Object.values(WEIGHT_OPTIONS), "regular");
- const align = select("Align", Object.values(ALIGN_OPTIONS), "left");
+ const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.PRIMARY);
+ const element = select("Element", Object.values(ELEMENT_OPTIONS), ELEMENT_OPTIONS.P);
+ const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.NORMAL);
+ const weight = select("Weight", Object.values(WEIGHT_OPTIONS), WEIGHT_OPTIONS.NORMAL);
+ const align = select("Align", Object.values(ALIGN_OPTIONS), ALIGN_OPTIONS.LEFT);
const uppercase = boolean("Uppercase", false);
const italic = boolean("Italic", false);
+ const children = text("Text", customText);
return {
info:
"You can try all possible configurations of this component. However, check Orbit.Kiwi for more detailed design guidelines.",
@@ -100,10 +150,9 @@ storiesOf("Text", module)
uppercase={uppercase}
italic={italic}
>
- {customText}
+ {children}
),
- options,
},
],
},
diff --git a/src/Text/__snapshots__/Text.stories.storyshot b/src/Text/__snapshots__/Text.stories.storyshot
index 13344be943..b53fd716c1 100644
--- a/src/Text/__snapshots__/Text.stories.storyshot
+++ b/src/Text/__snapshots__/Text.stories.storyshot
@@ -101,7 +101,7 @@ exports[`Storyshots Text Attention text 1`] = `
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
@@ -213,7 +213,7 @@ exports[`Storyshots Text Attention text 1`] = `
}
}
>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
@@ -521,7 +521,7 @@ exports[`Storyshots Text Playground 1`] = `
}
>
"
- regular
+ normal
"
@@ -646,7 +646,7 @@ exports[`Storyshots Text Playground 1`] = `
}
}
>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
@@ -865,7 +865,7 @@ exports[`Storyshots Text Primary text 1`] = `
}
}
>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
@@ -1113,7 +1113,255 @@ exports[`Storyshots Text Secondary text 1`] = `
}
}
>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem. Curabitur lectus enim, ornare laoreet tellus vel, tristique porttitor tortor. In lorem ante, feugiat in fringilla sed, rutrum sit amet orci. Nulla ipsum justo, volutpat sed sem sit amet, pretium lacinia metus. Nulla facilisi. Donec dui felis, viverra quis iaculis a, lacinia ut mauris.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+ </
+ Text
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Text Status text 1`] = `
+
+
+
+
+
+ Status text
+
+
+
+
+
+ The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+
+
+
+
+ Source
+
+
+
+
+
+ <
+ Text
+
+
+
+
+
+ type
+
+
+ =
+
+
+ "
+ info
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+
+
+
+
+ Source
+
+
+
+
+
+ <
+ Text
+
+
+
+
+
+ type
+
+
+ =
+
+
+ "
+ success
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+ </
+ Text
+ >
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+
+
+
+
+ Source
+
+
+
+
+
+ <
+ Text
+
+
+
+
+
+ type
+
+
+ =
+
+
+ "
+ warning
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+ </
+ Text
+ >
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+
+
+
+
+ Source
+
+
+
+
+
+ <
+ Text
+
+
+
+
+
+ type
+
+
+ =
+
+
+ "
+ critical
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+ </
+ Text
+ >
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Storyshots Text White text 1`] = `
+
+
+
+
+
+ White text
+
+
+
+
+
+ The most basic component for rendering text blocks. Visit Orbit.Kiwi for more detailed guidelines.
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+
+
+
+
+
+ Source
+
+
+
+
+
+ <
+ div
+
+
+
+
+
+ style
+
+
+ =
+
+
+ {
+
+ {
+
+ backgroundColor
+
+ :
+
+ "
+ #46515e
+ "
+
+ ,
+
+ padding
+
+ :
+
+ "
+ 20px
+ "
+
+ }
+
+ }
+
+
+
+
+
+
+
+ >
+
+
+
+
+
+ <
+ Text
+
+
+
+
+
+ type
+
+
+ =
+
+
+ "
+ white
+ "
+
+
+
+
+
+
+
+ >
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas dui dolor, ut vestibulum nisi sodales et. Suspendisse molestie felis sit amet dui viverra volutpat sed sit amet lacus. Quisque sapien dolor, blandit ut sodales id, dictum sit amet purus. Nulla facilisi. Nulla eleifend, sem sed fermentum feugiat, eros ligula semper nulla, sit amet semper purus risus nec lorem.
+
+
+
+
+ </
+ Text
+ >
+
+
+
+
+
+ </
+ div
+ >
+
+
+
+
+
+
+
+
diff --git a/src/Text/__tests__/__snapshots__/index.test.js.snap b/src/Text/__tests__/__snapshots__/index.test.js.snap
index 457aa6f0fc..8c6bca023a 100644
--- a/src/Text/__tests__/__snapshots__/index.test.js.snap
+++ b/src/Text/__tests__/__snapshots__/index.test.js.snap
@@ -329,8 +329,13 @@ exports[`Text should match snapshot 1`] = `
Object {
"colorText": Object {
"attention": "#171b1e",
+ "critical": "#d21c1c",
+ "info": "#0176D2",
"primary": "#46515e",
"secondary": "#7f91a8",
+ "success": "#46B655",
+ "warning": "#f9971e",
+ "white": "#fff",
},
"sizeText": Object {
"large": "16px",
diff --git a/src/Text/consts.js b/src/Text/consts.js
index bef0574990..cd19b96c1d 100644
--- a/src/Text/consts.js
+++ b/src/Text/consts.js
@@ -3,6 +3,11 @@ export const TYPE_OPTIONS = {
PRIMARY: "primary",
SECONDARY: "secondary",
ATTENTION: "attention",
+ INFO: "info",
+ SUCCESS: "success",
+ WARNING: "warning",
+ CRITICAL: "critical",
+ WHITE: "white",
};
export const SIZE_OPTIONS = {