-
-
+
+
-
-
-
-
-
-
-
- Alert message
-
-
-
-
-
-
-
-
+ Alert message
+
+
+
`;
diff --git a/src/Alert/__tests__/index.test.js b/src/Alert/__tests__/index.test.js
index a606827760..beeb097347 100644
--- a/src/Alert/__tests__/index.test.js
+++ b/src/Alert/__tests__/index.test.js
@@ -1,14 +1,13 @@
// @flow
import * as React from "react";
-import { mount } from "enzyme";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
+import { shallow } from "enzyme";
-import Alert from "../Alert";
+import Alert from "../index";
describe("Alert", () => {
it("should contain children", () => {
const message = "Alert message";
- const component = mount(
{message} );
+ const component = shallow(
{message} );
expect(
component
.find("Alert__Content")
@@ -16,23 +15,21 @@ describe("Alert", () => {
.exists(),
).toBe(true);
});
- // it("should be closable", () => {
- // const onClose = jest.fn();
- // const message = "Alert message";
- // const component = mount(
- //
- //
- // {message}
- //
- // ,
- // );
- // const alert = component.find("Alert__CloseContainer");
- // alert.simulate("click");
- // expect(onClose).toHaveBeenCalled();
- // });
+ it("should be closable", () => {
+ const onClose = jest.fn();
+ const message = "Alert message";
+ const component = shallow(
+
+ {message}
+ ,
+ );
+ const ButtonLink = component.find("Alert__CloseContainer ButtonLink");
+ ButtonLink.simulate("click");
+ expect(onClose).toHaveBeenCalled();
+ });
it("should match snapshot", () => {
const message = "Alert message";
- const component = mount(
{message} );
+ const component = shallow(
{message} );
expect(component).toMatchSnapshot();
});
});
diff --git a/src/Alert/index.js b/src/Alert/index.js
index 9bda0a5d28..8f93a8b410 100644
--- a/src/Alert/index.js
+++ b/src/Alert/index.js
@@ -1,6 +1,184 @@
// @flow
-import { withTheme } from "theming";
+import * as React from "react";
+import styled from "styled-components";
-import Alert from "./Alert";
+import defaultTokens from "../defaultTokens";
+import { InformationCircle, Check, Alert as AlertTriangle, AlertCircle, Close } from "../icons";
+import ButtonLink from "../ButtonLink";
+import { StyledTextLink } from "../TextLink";
+import TYPE_OPTIONS from "./consts";
-export default withTheme(Alert);
+import type { Props } from "./index";
+
+type IconProps = {
+ icon: React.Node,
+ type: string,
+};
+
+const Icon = ({ icon, type }: IconProps) => {
+ // Icon should be boolean and TRUE
+ if (typeof icon === "boolean" && icon) {
+ if (type === TYPE_OPTIONS.INFO) {
+ return
;
+ }
+ if (type === TYPE_OPTIONS.SUCCESS) {
+ return
;
+ }
+ if (type === TYPE_OPTIONS.WARNING) {
+ return
;
+ }
+ if (type === TYPE_OPTIONS.CRITICAL) {
+ return
;
+ }
+ }
+ return icon;
+};
+
+const StyledDiv = ({ className, children }: { className: string, children: React.Node }) => (
+
{children}
+);
+
+const StyledAlert = styled(StyledDiv)`
+ position: relative;
+ display: flex;
+ width: 100%;
+ padding: ${({ theme, icon }) =>
+ icon
+ ? `${theme.orbit.paddingAlert} ${theme.orbit.paddingAlertWithIcon}`
+ : theme.orbit.paddingAlert};
+ padding-right: ${({ theme, closable }) => closable && theme.orbit.spaceXXLarge};
+ border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
+ background: ${({ tokens, type }) => tokens.backgroundAlert[type]};
+ color: ${({ tokens, type }) => tokens.colorTextAlert[type]};
+ font-family: ${({ theme }) => theme.orbit.fontFamily};
+ font-size: ${({ theme }) => theme.orbit.fontSizeTextNormal};
+ box-sizing: border-box;
+`;
+
+StyledAlert.defaultProps = {
+ theme: defaultTokens,
+};
+
+const IconContainer = styled(StyledDiv)`
+ flex-shrink: 0;
+ margin-right: ${({ theme }) => theme.orbit.spaceSmall};
+ color: ${({ tokens, type }) => tokens.colorIconAlert[type]};
+`;
+
+IconContainer.defaultProps = {
+ theme: defaultTokens,
+};
+
+const ContentWrapper = styled(StyledDiv)`
+ flex: 1; // IE wrapping fix
+ display: flex;
+ flex-direction: ${({ title }) => title && "column"};
+ align-items: ${({ title }) => !title && "center"};
+`;
+
+const Title = styled(StyledDiv)`
+ display: flex;
+ align-items: center;
+ margin-bottom: ${({ theme, hasChildren }) => hasChildren && theme.orbit.spaceXSmall};
+ font-weight: ${({ theme }) => theme.orbit.fontWeightBold};
+ line-height: ${({ theme }) => theme.orbit.lineHeightHeading};
+ min-height: ${({ theme }) => theme.orbit.heightIconMedium};
+`;
+
+Title.defaultProps = {
+ theme: defaultTokens,
+};
+
+const Content = styled(StyledDiv)`
+ display: block;
+ margin-bottom: ${({ theme, title }) => title && theme.orbit.spaceXXSmall};
+ line-height: ${({ theme }) => theme.orbit.lineHeightText};
+
+ & a,
+ & ${StyledTextLink} {
+ color: ${({ tokens, type }) => tokens.colorTextAlert[type]};
+ font-weight: ${({ theme }) => theme.orbit.fontWeightMedium};
+ transition: color ${({ theme }) => theme.orbit.durationFast} ease-in-out;
+ text-decoration: none;
+ &:hover {
+ color: ${({ theme }) => theme.orbit.paletteInkDark}; // TODO create token
+ }
+ }
+`;
+
+Content.defaultProps = {
+ theme: defaultTokens,
+};
+
+const CloseContainer = styled(StyledDiv)`
+ position: absolute;
+ top: ${({ hasChildren }) => (hasChildren ? 0 : "50%")};
+ margin-top: ${({ hasChildren, theme }) => !hasChildren && `-${theme.orbit.widthIconSmall}`};
+ right: 0;
+ margin-right: ${({ hasChildren, theme }) => !hasChildren && theme.orbit.spaceXSmall};
+`;
+
+CloseContainer.defaultProps = {
+ theme: defaultTokens,
+};
+
+const Alert = (props: Props) => {
+ const {
+ type = TYPE_OPTIONS.INFO,
+ title,
+ theme = defaultTokens,
+ closable,
+ icon,
+ onClose = () => {},
+ children,
+ } = props;
+ const tokens = {
+ colorIconAlert: {
+ [TYPE_OPTIONS.INFO]: theme.orbit.colorAlertIconInfo,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorAlertIconSuccess,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.colorAlertIconWarning,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorAlertIconCritical,
+ },
+ backgroundAlert: {
+ [TYPE_OPTIONS.INFO]: theme.orbit.backgroundAlertInfo,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundAlertSuccess,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundAlertWarning,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundAlertCritical,
+ },
+ colorTextAlert: {
+ [TYPE_OPTIONS.INFO]: theme.orbit.colorTextAlertInfo,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextAlertSuccess,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextAlertWarning,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextAlertCritical,
+ },
+ };
+ return (
+
+ {icon && (
+
+
+ )}
+
+ {title && {title} }
+ {children && (
+
+ {children}
+
+ )}
+
+ {closable && (
+
+
+ )}
+
+ );
+};
+
+export default Alert;
diff --git a/src/Alert/index.js.flow b/src/Alert/index.js.flow
index 9145b894b3..f70c071f7a 100644
--- a/src/Alert/index.js.flow
+++ b/src/Alert/index.js.flow
@@ -1,4 +1,16 @@
// @flow
-import type { Props } from "./Alert";
+import defaultTokens from "../defaultTokens";
+
+type Type = "info" | "success" | "warning" | "critical";
+
+export type Props = {|
+ +type?: Type,
+ +children?: React$Node,
+ +title?: string,
+ +icon?: React$Element
| boolean,
+ +closable?: boolean,
+ +onClose?: () => void,
+ +theme?: typeof defaultTokens,
+|};
declare export default React$ComponentType;
diff --git a/src/Button/Button.js b/src/Button/Button.js
deleted file mode 100644
index f5b719c656..0000000000
--- a/src/Button/Button.js
+++ /dev/null
@@ -1,320 +0,0 @@
-// @flow
-import * as React from "react";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-import styled from "styled-components";
-
-import { iconSizes } from "../Icon";
-import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts";
-import type { Props } from "./Button";
-
-const IconContainer = styled(({ className, children }) => (
- {children}
-))`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin-right: ${({ onlyIcon, tokens, size }) => (onlyIcon ? "0" : tokens.marginRightIcon[size])};
- color: ${({ tokens, bordered, type }) =>
- bordered ? tokens.colorTextButtonBordered[type] : tokens.colorTextButton[type]};
- transition: all ${({ theme }) => theme.durationFast} ease-in-out;
-
- > * {
- width: ${({ sizeIcon }) => iconSizes[sizeIcon]};
- height: ${({ sizeIcon }) => iconSizes[sizeIcon]};
- }
-`;
-
-const StyledButton = styled(
- ({
- tokens,
- theme,
- component,
- external,
- type,
- icon,
- sizeIcon,
- width,
- bordered,
- onlyIcon,
- block,
- style,
- ...props
- }) => {
- const Component = component === "button" && props.href ? "a" : component;
- return {props.children} ;
- },
-)`
- box-sizing: border-box;
- appearance: none;
- display: ${({ href, component }) => (href || component === "a" ? "inline-flex" : "flex")};
- text-decoration: none;
- justify-content: center;
- align-items: center;
- width: ${({ block, width, onlyIcon, tokens, size }) =>
- block
- ? "100%"
- : (width && `${width}px`) || (onlyIcon && `${tokens.heightButton[size]}`) || "auto"};
- height: ${({ tokens, size }) => tokens.heightButton[size]};
- background: ${({ bordered, tokens, type }) =>
- bordered ? tokens.backgroundButtonBordered : tokens.backgroundButton[type]};
- color: ${({ tokens, bordered, type }) =>
- bordered ? tokens.colorTextButtonBordered[type] : tokens.colorTextButton[type]}!important;
- border: 0;
- box-shadow: ${({ bordered, tokens, type }) =>
- bordered && `inset 0 0 0 1px ${tokens.borderColorButton[type]}`};
- border-radius: ${({ theme }) => theme.borderRadiusNormal};
- padding: 0 ${({ onlyIcon, tokens, size }) => (onlyIcon ? "0" : tokens.paddingButton[size])} 0
- ${({ onlyIcon, icon, tokens, size }) =>
- (onlyIcon && "0") ||
- (icon ? tokens.paddingButtonWithIcon[size] : tokens.paddingButton[size])};
- font-weight: ${({ theme }) => theme.fontWeightBold}!important;
- font-size: ${({ tokens, size }) => tokens.fontSizeButton[size]};
- cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
- transition: all 0.15s ease-in-out !important;
- outline: 0;
- opacity: ${({ disabled, theme }) => disabled && theme.opacityButtonDisabled};
- pointer-events: ${({ disabled }) => disabled && "none"};
-
- &:hover {
- background: ${({ disabled, bordered, tokens, type }) =>
- !disabled &&
- (bordered ? tokens.backgroundButtonBorderedHover : tokens.backgroundButtonHover[type])};
- box-shadow: ${({ disabled, bordered, tokens, type }) =>
- !disabled && (bordered && `inset 0 0 0 1px ${tokens.borderColorButtonHover[type]}`)};
- color: ${({ disabled, tokens, bordered, type }) =>
- !disabled &&
- (bordered
- ? tokens.colorTextButtonBorderedHover[type]
- : tokens.colorTextButtonHover[type])}!important;
- & ${IconContainer} {
- color: ${({ disabled, tokens, bordered, type }) =>
- !disabled &&
- (bordered ? tokens.colorTextButtonBorderedHover[type] : tokens.colorTextButtonHover[type])};
- }
- }
-
- &:active {
- ${({ disabled, theme }) => !disabled && `transform: scale(${theme.modifierScaleButtonActive})`};
- background: ${({ disabled, bordered, tokens, type }) =>
- !disabled &&
- (bordered ? tokens.backgroundButtonBorderedActive : tokens.backgroundButtonActive[type])};
- box-shadow: ${({ disabled, bordered, tokens, type }) =>
- !disabled && (bordered && `inset 0 0 0 1px ${tokens.borderColorButtonActive[type]}`)};
- color: ${({ disabled, tokens, bordered, type }) =>
- !disabled &&
- (bordered
- ? tokens.colorTextButtonBorderedActive[type]
- : tokens.colorTextButtonActive[type])}!important;
- & ${IconContainer} {
- color: ${({ disabled, tokens, bordered, type }) =>
- !disabled &&
- (bordered
- ? tokens.colorTextButtonBorderedActive[type]
- : tokens.colorTextButtonActive[type])};
- }
- }
-`;
-
-const Button = (props: Props) => {
- const {
- component = "button",
- disabled,
- children,
- bordered,
- size = SIZE_OPTIONS.NORMAL,
- icon,
- theme = defaultTokens,
- external,
- type = TYPE_OPTIONS.PRIMARY,
- block,
- width = 0,
- } = props;
- const sizeIcon = size === "small" ? "small" : "medium";
- const onlyIcon = icon && !children;
- const tokens = {
- heightButton: {
- [SIZE_OPTIONS.LARGE]: theme.heightButtonLarge,
- [SIZE_OPTIONS.NORMAL]: theme.heightButtonNormal,
- [SIZE_OPTIONS.SMALL]: theme.heightButtonSmall,
- },
- fontSizeButton: {
- [SIZE_OPTIONS.LARGE]: theme.fontSizeButtonLarge,
- [SIZE_OPTIONS.NORMAL]: theme.fontSizeButtonNormal,
- [SIZE_OPTIONS.SMALL]: theme.fontSizeButtonSmall,
- },
- paddingButton: {
- [SIZE_OPTIONS.LARGE]: theme.paddingButtonLarge,
- [SIZE_OPTIONS.NORMAL]: theme.paddingButtonNormal,
- [SIZE_OPTIONS.SMALL]: theme.paddingButtonSmall,
- },
- paddingButtonWithIcon: {
- [SIZE_OPTIONS.LARGE]: theme.paddingButtonLargeWithIcon,
- [SIZE_OPTIONS.NORMAL]: theme.paddingButtonNormalWithIcon,
- [SIZE_OPTIONS.SMALL]: theme.paddingButtonSmallWithIcon,
- },
- marginRightIcon: {
- [SIZE_OPTIONS.LARGE]: theme.marginButtonIconLarge,
- [SIZE_OPTIONS.NORMAL]: theme.marginButtonIconNormal,
- [SIZE_OPTIONS.SMALL]: theme.marginButtonIconSmall,
- },
- backgroundButton: {
- [TYPE_OPTIONS.PRIMARY]: theme.backgroundButtonPrimary,
- [TYPE_OPTIONS.SECONDARY]: theme.backgroundButtonSecondary,
- [TYPE_OPTIONS.INFO]: theme.backgroundButtonInfo,
- [TYPE_OPTIONS.SUCCESS]: theme.backgroundButtonSuccess,
- [TYPE_OPTIONS.WARNING]: theme.backgroundButtonWarning,
- [TYPE_OPTIONS.CRITICAL]: theme.backgroundButtonCritical,
- [TYPE_OPTIONS.FACEBOOK]: theme.backgroundButtonFacebook,
- [TYPE_OPTIONS.GOOGLE]: theme.backgroundButtonGoogle,
- },
- backgroundButtonBordered: theme.backgroundButtonBordered,
- backgroundButtonHover: {
- [TYPE_OPTIONS.PRIMARY]: theme.backgroundButtonPrimaryHover,
- [TYPE_OPTIONS.SECONDARY]: theme.backgroundButtonSecondaryHover,
- [TYPE_OPTIONS.INFO]: theme.backgroundButtonInfoHover,
- [TYPE_OPTIONS.SUCCESS]: theme.backgroundButtonSuccessHover,
- [TYPE_OPTIONS.WARNING]: theme.backgroundButtonWarningHover,
- [TYPE_OPTIONS.CRITICAL]: theme.backgroundButtonCriticalHover,
- [TYPE_OPTIONS.FACEBOOK]: theme.backgroundButtonFacebookHover,
- [TYPE_OPTIONS.GOOGLE]: theme.backgroundButtonGoogleHover,
- },
- backgroundButtonBorderedHover: theme.backgroundButtonBorderedHover,
- backgroundButtonActive: {
- [TYPE_OPTIONS.PRIMARY]: theme.backgroundButtonPrimaryActive,
- [TYPE_OPTIONS.SECONDARY]: theme.backgroundButtonSecondaryActive,
- [TYPE_OPTIONS.INFO]: theme.backgroundButtonInfoActive,
- [TYPE_OPTIONS.SUCCESS]: theme.backgroundButtonSuccessActive,
- [TYPE_OPTIONS.WARNING]: theme.backgroundButtonWarningActive,
- [TYPE_OPTIONS.CRITICAL]: theme.backgroundButtonCriticalActive,
- [TYPE_OPTIONS.FACEBOOK]: theme.backgroundButtonFacebookActive,
- [TYPE_OPTIONS.GOOGLE]: theme.backgroundButtonGoogleActive,
- },
- backgroundButtonBorderedActive: theme.backgroundButtonBorderedActive,
- colorTextButton: {
- [TYPE_OPTIONS.PRIMARY]: theme.colorTextButtonPrimary,
- [TYPE_OPTIONS.SECONDARY]: theme.colorTextButtonSecondary,
- [TYPE_OPTIONS.INFO]: theme.colorTextButtonInfo,
- [TYPE_OPTIONS.SUCCESS]: theme.colorTextButtonSuccess,
- [TYPE_OPTIONS.WARNING]: theme.colorTextButtonWarning,
- [TYPE_OPTIONS.CRITICAL]: theme.colorTextButtonCritical,
- [TYPE_OPTIONS.FACEBOOK]: theme.colorTextButtonFacebook,
- [TYPE_OPTIONS.GOOGLE]: theme.colorTextButtonGoogle,
- },
- colorTextButtonBordered: {
- [TYPE_OPTIONS.PRIMARY]: theme.colorTextButtonPrimaryBordered,
- [TYPE_OPTIONS.SECONDARY]: theme.colorTextButtonSecondaryBordered,
- [TYPE_OPTIONS.INFO]: theme.colorTextButtonInfoBordered,
- [TYPE_OPTIONS.SUCCESS]: theme.colorTextButtonSuccessBordered,
- [TYPE_OPTIONS.WARNING]: theme.colorTextButtonWarningBordered,
- [TYPE_OPTIONS.CRITICAL]: theme.colorTextButtonCriticalBordered,
- [TYPE_OPTIONS.FACEBOOK]: theme.colorTextButtonFacebookBordered,
- [TYPE_OPTIONS.GOOGLE]: theme.colorTextButtonGoogleBordered,
- },
- colorTextButtonHover: {
- [TYPE_OPTIONS.PRIMARY]: theme.colorTextButtonPrimaryHover,
- [TYPE_OPTIONS.SECONDARY]: theme.colorTextButtonSecondaryHover,
- [TYPE_OPTIONS.INFO]: theme.colorTextButtonInfoHover,
- [TYPE_OPTIONS.SUCCESS]: theme.colorTextButtonSuccessHover,
- [TYPE_OPTIONS.WARNING]: theme.colorTextButtonWarningHover,
- [TYPE_OPTIONS.CRITICAL]: theme.colorTextButtonCriticalHover,
- [TYPE_OPTIONS.FACEBOOK]: theme.colorTextButtonFacebookHover,
- [TYPE_OPTIONS.GOOGLE]: theme.colorTextButtonGoogleHover,
- },
- colorTextButtonBorderedHover: {
- [TYPE_OPTIONS.PRIMARY]: theme.colorTextButtonPrimaryBorderedHover,
- [TYPE_OPTIONS.SECONDARY]: theme.colorTextButtonSecondaryBorderedHover,
- [TYPE_OPTIONS.INFO]: theme.colorTextButtonInfoBorderedHover,
- [TYPE_OPTIONS.SUCCESS]: theme.colorTextButtonSuccessBorderedHover,
- [TYPE_OPTIONS.WARNING]: theme.colorTextButtonWarningBorderedHover,
- [TYPE_OPTIONS.CRITICAL]: theme.colorTextButtonCriticalBorderedHover,
- [TYPE_OPTIONS.FACEBOOK]: theme.colorTextButtonFacebookBorderedHover,
- [TYPE_OPTIONS.GOOGLE]: theme.colorTextButtonGoogleBorderedHover,
- },
- colorTextButtonActive: {
- [TYPE_OPTIONS.PRIMARY]: theme.colorTextButtonPrimaryActive,
- [TYPE_OPTIONS.SECONDARY]: theme.colorTextButtonSecondaryActive,
- [TYPE_OPTIONS.INFO]: theme.colorTextButtonInfoActive,
- [TYPE_OPTIONS.SUCCESS]: theme.colorTextButtonSuccessActive,
- [TYPE_OPTIONS.WARNING]: theme.colorTextButtonWarningActive,
- [TYPE_OPTIONS.CRITICAL]: theme.colorTextButtonCriticalActive,
- [TYPE_OPTIONS.FACEBOOK]: theme.colorTextButtonFacebookActive,
- [TYPE_OPTIONS.GOOGLE]: theme.colorTextButtonGoogleActive,
- },
- colorTextButtonBorderedActive: {
- [TYPE_OPTIONS.PRIMARY]: theme.colorTextButtonPrimaryBorderedActive,
- [TYPE_OPTIONS.SECONDARY]: theme.colorTextButtonSecondaryBorderedActive,
- [TYPE_OPTIONS.INFO]: theme.colorTextButtonInfoBorderedActive,
- [TYPE_OPTIONS.SUCCESS]: theme.colorTextButtonSuccessBorderedActive,
- [TYPE_OPTIONS.WARNING]: theme.colorTextButtonWarningBorderedActive,
- [TYPE_OPTIONS.CRITICAL]: theme.colorTextButtonCriticalBorderedActive,
- [TYPE_OPTIONS.FACEBOOK]: theme.colorTextButtonFacebookBorderedActive,
- [TYPE_OPTIONS.GOOGLE]: theme.colorTextButtonGoogleBorderedActive,
- },
- borderColorButton: {
- [TYPE_OPTIONS.PRIMARY]: theme.borderColorButtonPrimaryBordered,
- [TYPE_OPTIONS.SECONDARY]: theme.borderColorButtonSecondaryBordered,
- [TYPE_OPTIONS.INFO]: theme.borderColorButtonInfoBordered,
- [TYPE_OPTIONS.SUCCESS]: theme.borderColorButtonSuccessBordered,
- [TYPE_OPTIONS.WARNING]: theme.borderColorButtonWarningBordered,
- [TYPE_OPTIONS.CRITICAL]: theme.borderColorButtonCriticalBordered,
- [TYPE_OPTIONS.FACEBOOK]: theme.borderColorButtonFacebookBordered,
- [TYPE_OPTIONS.GOOGLE]: theme.borderColorButtonGoogleBordered,
- },
- borderColorButtonHover: {
- [TYPE_OPTIONS.PRIMARY]: theme.borderColorButtonPrimaryBorderedHover,
- [TYPE_OPTIONS.SECONDARY]: theme.borderColorButtonSecondaryBorderedHover,
- [TYPE_OPTIONS.INFO]: theme.borderColorButtonInfoBorderedHover,
- [TYPE_OPTIONS.SUCCESS]: theme.borderColorButtonSuccessBorderedHover,
- [TYPE_OPTIONS.WARNING]: theme.borderColorButtonWarningBorderedHover,
- [TYPE_OPTIONS.CRITICAL]: theme.borderColorButtonCriticalBorderedHover,
- [TYPE_OPTIONS.FACEBOOK]: theme.borderColorButtonFacebookBorderedHover,
- [TYPE_OPTIONS.GOOGLE]: theme.borderColorButtonGoogleBorderedHover,
- },
- borderColorButtonActive: {
- [TYPE_OPTIONS.PRIMARY]: theme.borderColorButtonPrimaryBorderedActive,
- [TYPE_OPTIONS.SECONDARY]: theme.borderColorButtonSecondaryBorderedActive,
- [TYPE_OPTIONS.INFO]: theme.borderColorButtonInfoBorderedActive,
- [TYPE_OPTIONS.SUCCESS]: theme.borderColorButtonSuccessBorderedActive,
- [TYPE_OPTIONS.WARNING]: theme.borderColorButtonWarningBorderedActive,
- [TYPE_OPTIONS.CRITICAL]: theme.borderColorButtonCriticalBorderedActive,
- [TYPE_OPTIONS.FACEBOOK]: theme.borderColorButtonFacebookBorderedActive,
- [TYPE_OPTIONS.GOOGLE]: theme.borderColorButtonGoogleBorderedActive,
- },
- };
-
- return (
-
- {icon && (
-
- {icon}
-
- )}
- {children}
-
- );
-};
-
-export default Button;
diff --git a/src/Button/Button.js.flow b/src/Button/Button.js.flow
deleted file mode 100644
index 4cf5f1a78b..0000000000
--- a/src/Button/Button.js.flow
+++ /dev/null
@@ -1,32 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-export type Type =
- | "primary"
- | "secondary"
- | "info"
- | "success"
- | "warning"
- | "critical"
- | "facebook"
- | "google";
-
-export type Size = "small" | "normal" | "large";
-
-export type Props = {|
- +children?: React$Node,
- +component?: string | React$Node,
- +href?: string,
- +onClick?: (e: SyntheticEvent) => void | Promise,
- +external?: boolean,
- +bordered?: boolean,
- +disabled?: boolean,
- +block?: boolean,
- +type?: Type,
- +size?: Size,
- +width?: number,
- +icon?: React$Node,
- +theme?: typeof defaultTokens,
-|};
-
-declare export default React$ComponentType;
diff --git a/src/Button/Button.stories.js b/src/Button/Button.stories.js
index f714ff61bb..8da5c74eb1 100644
--- a/src/Button/Button.stories.js
+++ b/src/Button/Button.stories.js
@@ -8,9 +8,10 @@ import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, text, number, boolean, select } from "@storybook/addon-knobs/react";
import * as Icons from "../icons";
-import Button from "./Button";
import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts";
+import Button from "./index";
+
setAddon(chaptersAddon);
const getIcons = defaultIcon => select("Icon", [undefined, ...Object.keys(Icons)], defaultIcon);
diff --git a/src/Button/__tests__/__snapshots__/index.test.js.snap b/src/Button/__tests__/__snapshots__/index.test.js.snap
index 74d3d69da4..5da76fee96 100644
--- a/src/Button/__tests__/__snapshots__/index.test.js.snap
+++ b/src/Button/__tests__/__snapshots__/index.test.js.snap
@@ -22,484 +22,7 @@ exports[`Button with icon should match snapshot 1`] = `
sizeIcon="medium"
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
- }
- }
- tokens={
- Object {
- "backgroundButton": Object {
- "critical": "#d21c1c",
- "facebook": "#3b5998",
- "google": "#f5f7f9",
- "info": "#0176D2",
- "primary": "#00a991",
- "secondary": "#e8edf1",
- "success": "#46B655",
- "warning": "#f9971e",
- },
- "backgroundButtonActive": Object {
- "critical": "#b21717",
- "facebook": "#354f88",
- "google": "#d6dee6",
- "info": "#0064b2",
- "primary": "#008f7b",
- "secondary": "#cad5df",
- "success": "#3fa34c",
- "warning": "#e68206",
- },
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonHover": Object {
- "critical": "#bd1919",
- "facebook": "#385490",
- "google": "#e5eaef",
- "info": "#006abd",
- "primary": "#009882",
- "secondary": "#d9e1e8",
- "success": "#42ac50",
- "warning": "#f48a06",
- },
- "borderColorButton": Object {
- "critical": "#d21c1c",
- "facebook": "#3b5998",
- "google": "#46515e",
- "info": "#0176D2",
- "primary": "#00a991",
- "secondary": "#46515e",
- "success": "#46B655",
- "warning": "#f9971e",
- },
- "borderColorButtonActive": Object {
- "critical": "#b21717",
- "facebook": "#354f88",
- "google": "#38404b",
- "info": "#0064b2",
- "primary": "#008f7b",
- "secondary": "#38404b",
- "success": "#3fa34c",
- "warning": "#e68206",
- },
- "borderColorButtonHover": Object {
- "critical": "#bd1919",
- "facebook": "#385490",
- "google": "#3f4854",
- "info": "#006abd",
- "primary": "#009882",
- "secondary": "#3f4854",
- "success": "#42ac50",
- "warning": "#f48a06",
- },
- "colorTextButton": Object {
- "critical": "#fff",
- "facebook": "#fff",
- "google": "#46515e",
- "info": "#fff",
- "primary": "#fff",
- "secondary": "#46515e",
- "success": "#fff",
- "warning": "#fff",
- },
- "colorTextButtonActive": Object {
- "critical": "#fff",
- "facebook": "#fff",
- "google": "#38404b",
- "info": "#fff",
- "primary": "#fff",
- "secondary": "#38404b",
- "success": "#fff",
- "warning": "#fff",
- },
- "colorTextButtonBordered": Object {
- "critical": "#d21c1c",
- "facebook": "#3b5998",
- "google": "#46515e",
- "info": "#0176D2",
- "primary": "#00a991",
- "secondary": "#46515e",
- "success": "#46B655",
- "warning": "#f9971e",
- },
- "colorTextButtonBorderedActive": Object {
- "critical": "#b21717",
- "facebook": "#354f88",
- "google": "#38404b",
- "info": "#0064b2",
- "primary": "#008f7b",
- "secondary": "#38404b",
- "success": "#3fa34c",
- "warning": "#e68206",
- },
- "colorTextButtonBorderedHover": Object {
- "critical": "#bd1919",
- "facebook": "#385490",
- "google": "#3f4854",
- "info": "#006abd",
- "primary": "#009882",
- "secondary": "#3f4854",
- "success": "#42ac50",
- "warning": "#f48a06",
- },
- "colorTextButtonHover": Object {
- "critical": "#fff",
- "facebook": "#fff",
- "google": "#3f4854",
- "info": "#fff",
- "primary": "#fff",
- "secondary": "#3f4854",
- "success": "#fff",
- "warning": "#fff",
- },
- "fontSizeButton": Object {
- "large": "16px",
- "normal": "14px",
- "small": "12px",
- },
- "heightButton": Object {
- "large": "52px",
- "normal": "44px",
- "small": "32px",
- },
- "marginRightIcon": Object {
- "large": "16px",
- "normal": "12px",
- "small": "8px",
- },
- "paddingButton": Object {
- "large": "28px",
- "normal": "16px",
- "small": "12px",
- },
- "paddingButtonWithIcon": Object {
- "large": "12px",
- "normal": "8px",
- "small": "8px",
- },
- }
- }
- type="primary"
- width={0}
->
-
+ (
+ {children}
+))`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ margin-right: ${({ onlyIcon, tokens, size }) => (onlyIcon ? "0" : tokens.marginRightIcon[size])};
+ color: ${({ tokens, bordered, type }) =>
+ bordered ? tokens.colorTextButtonBordered[type] : tokens.colorTextButton[type]};
+ transition: all ${({ theme }) => theme.orbit.durationFast} ease-in-out;
+
+ > * {
+ width: ${({ sizeIcon }) => ICON_SIZES[sizeIcon]};
+ height: ${({ sizeIcon }) => ICON_SIZES[sizeIcon]};
+ }
+`;
+
+IconContainer.defaultProps = {
+ theme: defaultTokens,
+};
+
+const StyledButton = styled(
+ ({
+ tokens,
+ theme,
+ component,
+ external,
+ type,
+ icon,
+ sizeIcon,
+ width,
+ bordered,
+ onlyIcon,
+ block,
+ style,
+ ...props
+ }) => {
+ const Component = component === "button" && props.href ? "a" : component;
+ return {props.children} ;
+ },
+)`
+ box-sizing: border-box;
+ appearance: none;
+ display: ${({ href, component }) => (href || component === "a" ? "inline-flex" : "flex")};
+ text-decoration: none;
+ justify-content: center;
+ align-items: center;
+ width: ${({ block, width, onlyIcon, tokens, size }) =>
+ block
+ ? "100%"
+ : (width && `${width}px`) || (onlyIcon && `${tokens.heightButton[size]}`) || "auto"};
+ height: ${({ tokens, size }) => tokens.heightButton[size]};
+ background: ${({ bordered, tokens, type }) =>
+ bordered ? tokens.backgroundButtonBordered : tokens.backgroundButton[type]};
+ color: ${({ tokens, bordered, type }) =>
+ bordered ? tokens.colorTextButtonBordered[type] : tokens.colorTextButton[type]}!important;
+ border: 0;
+ box-shadow: ${({ bordered, tokens, type }) =>
+ bordered && `inset 0 0 0 1px ${tokens.borderColorButton[type]}`};
+ border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
+ padding: 0 ${({ onlyIcon, tokens, size }) => (onlyIcon ? "0" : tokens.paddingButton[size])} 0
+ ${({ onlyIcon, icon, tokens, size }) =>
+ (onlyIcon && "0") ||
+ (icon ? tokens.paddingButtonWithIcon[size] : tokens.paddingButton[size])};
+ font-weight: ${({ theme }) => theme.orbit.fontWeightBold}!important;
+ font-size: ${({ tokens, size }) => tokens.fontSizeButton[size]};
+ cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
+ transition: all 0.15s ease-in-out !important;
+ outline: 0;
+ opacity: ${({ disabled, theme }) => disabled && theme.orbit.opacityButtonDisabled};
+ pointer-events: ${({ disabled }) => disabled && "none"};
+
+ &:hover {
+ background: ${({ disabled, bordered, tokens, type }) =>
+ !disabled &&
+ (bordered ? tokens.backgroundButtonBorderedHover : tokens.backgroundButtonHover[type])};
+ box-shadow: ${({ disabled, bordered, tokens, type }) =>
+ !disabled && (bordered && `inset 0 0 0 1px ${tokens.borderColorButtonHover[type]}`)};
+ color: ${({ disabled, tokens, bordered, type }) =>
+ !disabled &&
+ (bordered
+ ? tokens.colorTextButtonBorderedHover[type]
+ : tokens.colorTextButtonHover[type])}!important;
+ & ${IconContainer} {
+ color: ${({ disabled, tokens, bordered, type }) =>
+ !disabled &&
+ (bordered ? tokens.colorTextButtonBorderedHover[type] : tokens.colorTextButtonHover[type])};
+ }
+ }
+
+ &:active {
+ ${({ disabled, theme }) =>
+ !disabled && `transform: scale(${theme.orbit.modifierScaleButtonActive})`};
+ background: ${({ disabled, bordered, tokens, type }) =>
+ !disabled &&
+ (bordered ? tokens.backgroundButtonBorderedActive : tokens.backgroundButtonActive[type])};
+ box-shadow: ${({ disabled, bordered, tokens, type }) =>
+ !disabled && (bordered && `inset 0 0 0 1px ${tokens.borderColorButtonActive[type]}`)};
+ color: ${({ disabled, tokens, bordered, type }) =>
+ !disabled &&
+ (bordered
+ ? tokens.colorTextButtonBorderedActive[type]
+ : tokens.colorTextButtonActive[type])}!important;
+ & ${IconContainer} {
+ color: ${({ disabled, tokens, bordered, type }) =>
+ !disabled &&
+ (bordered
+ ? tokens.colorTextButtonBorderedActive[type]
+ : tokens.colorTextButtonActive[type])};
+ }
+ }
+`;
+
+StyledButton.defaultProps = {
+ theme: defaultTokens,
+};
+
+const Button = (props: Props) => {
+ const {
+ component = "button",
+ disabled,
+ children,
+ bordered,
+ size = SIZE_OPTIONS.NORMAL,
+ icon,
+ theme = defaultTokens,
+ external,
+ type = TYPE_OPTIONS.PRIMARY,
+ block,
+ width = 0,
+ } = props;
+ const sizeIcon = size === "small" ? "small" : "medium";
+ const onlyIcon = icon && !children;
+ const tokens = {
+ heightButton: {
+ [SIZE_OPTIONS.LARGE]: theme.orbit.heightButtonLarge,
+ [SIZE_OPTIONS.NORMAL]: theme.orbit.heightButtonNormal,
+ [SIZE_OPTIONS.SMALL]: theme.orbit.heightButtonSmall,
+ },
+ fontSizeButton: {
+ [SIZE_OPTIONS.LARGE]: theme.orbit.fontSizeButtonLarge,
+ [SIZE_OPTIONS.NORMAL]: theme.orbit.fontSizeButtonNormal,
+ [SIZE_OPTIONS.SMALL]: theme.orbit.fontSizeButtonSmall,
+ },
+ paddingButton: {
+ [SIZE_OPTIONS.LARGE]: theme.orbit.paddingButtonLarge,
+ [SIZE_OPTIONS.NORMAL]: theme.orbit.paddingButtonNormal,
+ [SIZE_OPTIONS.SMALL]: theme.orbit.paddingButtonSmall,
+ },
+ paddingButtonWithIcon: {
+ [SIZE_OPTIONS.LARGE]: theme.orbit.paddingButtonLargeWithIcon,
+ [SIZE_OPTIONS.NORMAL]: theme.orbit.paddingButtonNormalWithIcon,
+ [SIZE_OPTIONS.SMALL]: theme.orbit.paddingButtonSmallWithIcon,
+ },
+ marginRightIcon: {
+ [SIZE_OPTIONS.LARGE]: theme.orbit.marginButtonIconLarge,
+ [SIZE_OPTIONS.NORMAL]: theme.orbit.marginButtonIconNormal,
+ [SIZE_OPTIONS.SMALL]: theme.orbit.marginButtonIconSmall,
+ },
+ backgroundButton: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimary,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondary,
+ [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfo,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccess,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarning,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCritical,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebook,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogle,
+ },
+ backgroundButtonBordered: theme.orbit.backgroundButtonBordered,
+ backgroundButtonHover: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryHover,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryHover,
+ [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoHover,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessHover,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningHover,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalHover,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebookHover,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleHover,
+ },
+ backgroundButtonBorderedHover: theme.orbit.backgroundButtonBorderedHover,
+ backgroundButtonActive: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryActive,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryActive,
+ [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoActive,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessActive,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningActive,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalActive,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebookActive,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleActive,
+ },
+ backgroundButtonBorderedActive: theme.orbit.backgroundButtonBorderedActive,
+ colorTextButton: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimary,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondary,
+ [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfo,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccess,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarning,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCritical,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebook,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogle,
+ },
+ colorTextButtonBordered: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBordered,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBordered,
+ [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBordered,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBordered,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBordered,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBordered,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBordered,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBordered,
+ },
+ colorTextButtonHover: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryHover,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryHover,
+ [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoHover,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessHover,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningHover,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalHover,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookHover,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleHover,
+ },
+ colorTextButtonBorderedHover: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBorderedHover,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBorderedHover,
+ [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBorderedHover,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBorderedHover,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBorderedHover,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBorderedHover,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBorderedHover,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBorderedHover,
+ },
+ colorTextButtonActive: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryActive,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryActive,
+ [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoActive,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessActive,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningActive,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalActive,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookActive,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleActive,
+ },
+ colorTextButtonBorderedActive: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBorderedActive,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBorderedActive,
+ [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBorderedActive,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBorderedActive,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBorderedActive,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBorderedActive,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBorderedActive,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBorderedActive,
+ },
+ borderColorButton: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBordered,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBordered,
+ [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBordered,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBordered,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBordered,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBordered,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBordered,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBordered,
+ },
+ borderColorButtonHover: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedHover,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedHover,
+ [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedHover,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedHover,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedHover,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedHover,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedHover,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedHover,
+ },
+ borderColorButtonActive: {
+ [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedActive,
+ [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedActive,
+ [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedActive,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedActive,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedActive,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedActive,
+ [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedActive,
+ [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedActive,
+ },
+ };
+
+ return (
+
+ {icon && (
+
+ {icon}
+
+ )}
+ {children}
+
+ );
+};
+
+export default Button;
diff --git a/src/Button/index.js.flow b/src/Button/index.js.flow
index 4d7479af8a..e6324fc4f3 100644
--- a/src/Button/index.js.flow
+++ b/src/Button/index.js.flow
@@ -1,4 +1,32 @@
// @flow
-import type { Props } from "./Button";
+import defaultTokens from "../defaultTokens";
+
+export type Type =
+ | "primary"
+ | "secondary"
+ | "info"
+ | "success"
+ | "warning"
+ | "critical"
+ | "facebook"
+ | "google";
+
+export type Size = "small" | "normal" | "large";
+
+export type Props = {|
+ +children?: React$Node,
+ +component?: string | React$Node,
+ +href?: string,
+ +onClick?: (e: SyntheticEvent) => void | Promise,
+ +external?: boolean,
+ +bordered?: boolean,
+ +disabled?: boolean,
+ +block?: boolean,
+ +type?: Type,
+ +size?: Size,
+ +width?: number,
+ +icon?: React$Node,
+ +theme?: typeof defaultTokens,
+|};
declare export default React$ComponentType;
diff --git a/src/ButtonLink/ButtonLink.js b/src/ButtonLink/ButtonLink.js
deleted file mode 100644
index 4997a3f3b2..0000000000
--- a/src/ButtonLink/ButtonLink.js
+++ /dev/null
@@ -1,197 +0,0 @@
-// @flow
-import * as React from "react";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-import styled from "styled-components";
-
-import { TYPES, SIZES } from "./consts";
-import { iconSizes } from "../Icon";
-import type { Props } from "./ButtonLink";
-
-const IconContainer = styled(({ tokens, sizeIcon, type, onlyIcon, ...props }) => (
-
-))`
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- margin-right: ${props => (props.onlyIcon ? "0" : props.tokens.marginRightIcon[props.size])};
-
- > * {
- width: ${props => iconSizes[props.sizeIcon]};
- height: ${props => iconSizes[props.sizeIcon]};
- }
-`;
-
-const StyledButtonLink = styled(
- ({
- tokens,
- onlyIcon,
- component,
- external,
- block,
- type,
- icon,
- sizeIcon,
- width,
- children,
- transparent,
- style,
- theme,
- ...props
- }) => {
- let Component = component;
-
- if (Component === "button" && props.href) {
- Component = "a";
- }
-
- return {children} ;
- },
-)`
- font-family: ${({ theme }) => theme.fontFamily};
- box-sizing: border-box;
- appearance: none;
- display: inline-flex;
- justify-content: center;
- align-items: center;
- width: ${({ block, width, onlyIcon, tokens, size }) =>
- block
- ? "100%"
- : (width && `${width}px`) || (onlyIcon && `${tokens.heightButton[size]}`) || "auto"};
- height: ${({ tokens, size }) => tokens.heightButton[size]};
- background: ${({ tokens, type }) => tokens.backgroundButton[type]};
- color: ${({ tokens, type }) => tokens.colorTextButton[type]}!important;
- border: 0;
- border-radius: ${({ theme }) => theme.borderRadiusNormal};
- padding: 0 ${({ onlyIcon, tokens, size }) => (onlyIcon ? "0" : tokens.paddingButton[size])} 0
- ${({ onlyIcon, icon, tokens, size }) =>
- (onlyIcon && "0") ||
- (icon ? tokens.paddingButtonWithIcon[size] : tokens.paddingButton[size])};
- font-weight: ${({ theme }) => theme.fontWeightBold}!important;
- font-size: ${({ tokens, size }) => tokens.fontSizeButton[size]};
- cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
- opacity: ${({ disabled, theme }) => (disabled ? theme.opacityButtonDisabled : "1")};
- transition: all 0.15s ease-in-out !important;
- outline: 0;
- text-decoration: none;
-
- &:enabled:hover {
- background: ${({ transparent, type, tokens }) =>
- !transparent && tokens.backgroundButtonHover[type]};
- color: ${props => props.tokens.colorTextButtonHover[props.type]}!important;
- }
-
- &:enabled:active {
- transform: scale(${({ theme }) => theme.modifierScaleButtonActive});
- background: ${({ transparent, tokens, type }) =>
- !transparent && tokens.backgroundButtonActive[type]};
- color: ${({ tokens, type }) => tokens.colorTextButtonActive[type]}!important;
- }
-`;
-
-const ButtonLink = (props: Props) => {
- const {
- external,
- children,
- component,
- size = SIZES.NORMAL,
- icon,
- type = TYPES.PRIMARY,
- theme = defaultTokens,
- onClick,
- } = props;
-
- const sizeIcon = size === SIZES.SMALL ? "small" : "medium";
-
- const onlyIcon = icon && !children;
- const tokens = {
- heightButton: {
- [SIZES.LARGE]: theme.heightButtonLarge,
- [SIZES.NORMAL]: theme.heightButtonNormal,
- [SIZES.SMALL]: theme.heightButtonSmall,
- },
- fontSizeButton: {
- [SIZES.LARGE]: theme.fontSizeButtonLarge,
- [SIZES.NORMAL]: theme.fontSizeButtonNormal,
- [SIZES.SMALL]: theme.fontSizeButtonSmall,
- },
- paddingButton: {
- [SIZES.LARGE]: theme.paddingButtonLarge,
- [SIZES.NORMAL]: theme.paddingButtonNormal,
- [SIZES.SMALL]: theme.paddingButtonSmall,
- },
- paddingButtonWithIcon: {
- [SIZES.LARGE]: theme.paddingButtonLargeWithIcon,
- [SIZES.NORMAL]: theme.paddingButtonNormalWithIcon,
- [SIZES.SMALL]: theme.paddingButtonSmallWithIcon,
- },
- marginRightIcon: {
- [SIZES.LARGE]: theme.marginButtonIconLarge,
- [SIZES.NORMAL]: theme.marginButtonIconNormal,
- [SIZES.SMALL]: theme.marginButtonIconSmall,
- },
- backgroundButton: {
- [TYPES.PRIMARY]: theme.backgroundButtonLinkPrimary,
- [TYPES.SECONDARY]: theme.backgroundButtonLinkSecondary,
- },
- backgroundButtonHover: {
- [TYPES.PRIMARY]: theme.backgroundButtonLinkPrimaryHover,
- [TYPES.SECONDARY]: theme.backgroundButtonLinkSecondaryHover,
- },
- backgroundButtonActive: {
- [TYPES.PRIMARY]: theme.backgroundButtonLinkPrimaryHover,
- [TYPES.SECONDARY]: theme.backgroundButtonLinkSecondaryHover,
- },
- colorTextButton: {
- [TYPES.PRIMARY]: theme.colorTextButtonLinkPrimary,
- [TYPES.SECONDARY]: theme.colorTextButtonLinkSecondary,
- },
- colorTextButtonHover: {
- [TYPES.PRIMARY]: theme.colorTextButtonLinkPrimaryHover,
- [TYPES.SECONDARY]: theme.colorTextButtonLinkSecondaryHover,
- },
- colorTextButtonActive: {
- [TYPES.PRIMARY]: theme.colorTextButtonLinkPrimaryActive,
- [TYPES.SECONDARY]: theme.colorTextButtonLinkSecondaryActive,
- },
- };
-
- return (
-
- {icon && (
-
- {icon}
-
- )}
- {children}
-
- );
-};
-
-ButtonLink.displayName = "ButtonLink";
-ButtonLink.defaultProps = {
- component: "button",
- external: false,
- type: "primary",
- size: "normal",
- width: 0,
- transparent: false,
- theme: defaultTokens,
-};
-
-export default ButtonLink;
diff --git a/src/ButtonLink/ButtonLink.js.flow b/src/ButtonLink/ButtonLink.js.flow
deleted file mode 100644
index da52d29b12..0000000000
--- a/src/ButtonLink/ButtonLink.js.flow
+++ /dev/null
@@ -1,23 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-type Type = "primary" | "secondary";
-type Size = "small" | "normal" | "large";
-
-export type Props = {|
- +children?: React$Node,
- +component?: string | React$Node,
- +onClick?: (e: SyntheticEvent) => void | Promise,
- +disabled?: boolean,
- +block?: boolean,
- +external?: boolean,
- +type?: Type,
- +size?: Size,
- +href?: string,
- +width?: number,
- +icon?: React.Node,
- +theme?: typeof defaultTokens,
- +transparent?: boolean,
-|};
-
-declare export default React$ComponentType;
diff --git a/src/ButtonLink/ButtonLink.stories.js b/src/ButtonLink/ButtonLink.stories.js
index 4a2e95059d..bc5c31848d 100644
--- a/src/ButtonLink/ButtonLink.stories.js
+++ b/src/ButtonLink/ButtonLink.stories.js
@@ -8,9 +8,10 @@ import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, text, number, boolean, select } from "@storybook/addon-knobs/react";
import * as Icons from "../icons";
-import ButtonLink from "./ButtonLink";
import { TYPES, SIZES } from "./consts";
+import ButtonLink from "./index";
+
setAddon(chaptersAddon);
const getIcons = defaultIcon => select("Icon", [undefined, ...Object.keys(Icons)], defaultIcon);
diff --git a/src/ButtonLink/__snapshots__/ButtonLink.stories.storyshot b/src/ButtonLink/__snapshots__/ButtonLink.stories.storyshot
index 5fc7630581..821bb3845c 100644
--- a/src/ButtonLink/__snapshots__/ButtonLink.stories.storyshot
+++ b/src/ButtonLink/__snapshots__/ButtonLink.stories.storyshot
@@ -361,6 +361,327 @@ exports[`Storyshots ButtonLink Playground 1`] = `
-
+
(
+
+))`
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ margin-right: ${props => (props.onlyIcon ? "0" : props.tokens.marginRightIcon[props.size])};
+
+ > * {
+ width: ${props => ICON_SIZES[props.sizeIcon]};
+ height: ${props => ICON_SIZES[props.sizeIcon]};
+ }
+`;
+
+IconContainer.defaultProps = {
+ theme: defaultTokens,
+};
+
+const StyledButtonLink = styled(
+ ({
+ tokens,
+ onlyIcon,
+ component,
+ external,
+ block,
+ type,
+ icon,
+ sizeIcon,
+ width,
+ children,
+ transparent,
+ style,
+ theme,
+ ...props
+ }) => {
+ let Component = component;
+
+ if (Component === "button" && props.href) {
+ Component = "a";
+ }
+
+ return {children} ;
+ },
+)`
+ font-family: ${({ theme }) => theme.orbit.fontFamily};
+ box-sizing: border-box;
+ appearance: none;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ width: ${({ block, width, onlyIcon, tokens, size }) =>
+ block
+ ? "100%"
+ : (width && `${width}px`) || (onlyIcon && `${tokens.heightButton[size]}`) || "auto"};
+ height: ${({ tokens, size }) => tokens.heightButton[size]};
+ background: ${({ tokens, type }) => tokens.backgroundButton[type]};
+ color: ${({ tokens, type }) => tokens.colorTextButton[type]}!important;
+ border: 0;
+ border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
+ padding: 0 ${({ onlyIcon, tokens, size }) => (onlyIcon ? "0" : tokens.paddingButton[size])} 0
+ ${({ onlyIcon, icon, tokens, size }) =>
+ (onlyIcon && "0") ||
+ (icon ? tokens.paddingButtonWithIcon[size] : tokens.paddingButton[size])};
+ font-weight: ${({ theme }) => theme.orbit.fontWeightBold}!important;
+ font-size: ${({ tokens, size }) => tokens.fontSizeButton[size]};
+ cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
+ opacity: ${({ disabled, theme }) => (disabled ? theme.orbit.opacityButtonDisabled : "1")};
+ transition: all 0.15s ease-in-out !important;
+ outline: 0;
+ text-decoration: none;
+
+ &:enabled:hover {
+ background: ${({ transparent, type, tokens }) =>
+ !transparent && tokens.backgroundButtonHover[type]};
+ color: ${props => props.tokens.colorTextButtonHover[props.type]}!important;
+ }
+
+ &:enabled:active {
+ transform: scale(${({ theme }) => theme.orbit.modifierScaleButtonActive});
+ background: ${({ transparent, tokens, type }) =>
+ !transparent && tokens.backgroundButtonActive[type]};
+ color: ${({ tokens, type }) => tokens.colorTextButtonActive[type]}!important;
+ }
+`;
+
+StyledButtonLink.defaultProps = {
+ theme: defaultTokens,
+};
+
+const ButtonLink = (props: Props) => {
+ const {
+ external,
+ children,
+ component,
+ size = SIZES.NORMAL,
+ icon,
+ type = TYPES.PRIMARY,
+ theme = defaultTokens,
+ onClick,
+ } = props;
+
+ const sizeIcon = size === SIZES.SMALL ? "small" : "medium";
+
+ const onlyIcon = icon && !children;
+ const tokens = {
+ heightButton: {
+ [SIZES.LARGE]: theme.orbit.heightButtonLarge,
+ [SIZES.NORMAL]: theme.orbit.heightButtonNormal,
+ [SIZES.SMALL]: theme.orbit.heightButtonSmall,
+ },
+ fontSizeButton: {
+ [SIZES.LARGE]: theme.orbit.fontSizeButtonLarge,
+ [SIZES.NORMAL]: theme.orbit.fontSizeButtonNormal,
+ [SIZES.SMALL]: theme.orbit.fontSizeButtonSmall,
+ },
+ paddingButton: {
+ [SIZES.LARGE]: theme.orbit.paddingButtonLarge,
+ [SIZES.NORMAL]: theme.orbit.paddingButtonNormal,
+ [SIZES.SMALL]: theme.orbit.paddingButtonSmall,
+ },
+ paddingButtonWithIcon: {
+ [SIZES.LARGE]: theme.orbit.paddingButtonLargeWithIcon,
+ [SIZES.NORMAL]: theme.orbit.paddingButtonNormalWithIcon,
+ [SIZES.SMALL]: theme.orbit.paddingButtonSmallWithIcon,
+ },
+ marginRightIcon: {
+ [SIZES.LARGE]: theme.orbit.marginButtonIconLarge,
+ [SIZES.NORMAL]: theme.orbit.marginButtonIconNormal,
+ [SIZES.SMALL]: theme.orbit.marginButtonIconSmall,
+ },
+ backgroundButton: {
+ [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimary,
+ [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondary,
+ },
+ backgroundButtonHover: {
+ [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimaryHover,
+ [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondaryHover,
+ },
+ backgroundButtonActive: {
+ [TYPES.PRIMARY]: theme.orbit.backgroundButtonLinkPrimaryHover,
+ [TYPES.SECONDARY]: theme.orbit.backgroundButtonLinkSecondaryHover,
+ },
+ colorTextButton: {
+ [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimary,
+ [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondary,
+ },
+ colorTextButtonHover: {
+ [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryHover,
+ [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryHover,
+ },
+ colorTextButtonActive: {
+ [TYPES.PRIMARY]: theme.orbit.colorTextButtonLinkPrimaryActive,
+ [TYPES.SECONDARY]: theme.orbit.colorTextButtonLinkSecondaryActive,
+ },
+ };
+
+ return (
+
+ {icon && (
+
+ {icon}
+
+ )}
+ {children}
+
+ );
+};
+
+ButtonLink.defaultProps = {
+ component: "button",
+ external: false,
+ type: "primary",
+ size: "normal",
+ width: 0,
+ transparent: false,
+};
+
+export default ButtonLink;
diff --git a/src/ButtonLink/index.js.flow b/src/ButtonLink/index.js.flow
index ddd4437032..824e906212 100644
--- a/src/ButtonLink/index.js.flow
+++ b/src/ButtonLink/index.js.flow
@@ -1,4 +1,23 @@
// @flow
-import type { Props } from "./ButtonLink";
+import defaultTokens from "../defaultTokens";
+
+type Type = "primary" | "secondary";
+type Size = "small" | "normal" | "large";
+
+export type Props = {|
+ +children?: React$Node,
+ +component?: string | React$Node,
+ +onClick?: (e: SyntheticEvent) => void | Promise,
+ +disabled?: boolean,
+ +block?: boolean,
+ +external?: boolean,
+ +type?: Type,
+ +size?: Size,
+ +href?: string,
+ +width?: number,
+ +icon?: React.Node,
+ +theme?: typeof defaultTokens,
+ +transparent?: boolean,
+|};
declare export default React$ComponentType;
diff --git a/src/Card/Card.js b/src/Card/Card.js
deleted file mode 100644
index d1f3bd5c63..0000000000
--- a/src/Card/Card.js
+++ /dev/null
@@ -1,54 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-import Close from "../icons/Close";
-import ButtonLink from "../ButtonLink/ButtonLink";
-import { StyledCardSection } from "./CardSection/CardSection";
-import { StyledCardHeader } from "./CardHeader/CardHeader";
-import { StyledCardContent } from "./CardContent/CardContent";
-import type { Props } from "./Card";
-
-const StyledCard = styled.div`
- width: 100%;
- height: 100%;
- background: ${({ theme }) => theme.backgroundCard};
- border-radius: ${({ theme }) => theme.borderRadiusNormal};
- border-width: ${({ theme }) => theme.borderWidthCard};
- border-style: ${({ theme }) => theme.borderStyleCard};
- border-color: ${({ theme }) => theme.borderColorCard};
- box-sizing: border-box;
- overflow: hidden;
- position: relative;
-
- ${StyledCardHeader} {
- padding-right: ${({ theme, closable }) => closable && theme.spaceLarge};
- }
-
- ${StyledCardHeader} + ${StyledCardSection}, ${StyledCardHeader} + ${StyledCardContent} {
- padding-top: 0;
- border-top: 0;
- }
-
-`;
-
-const CloseContainer = styled.div`
- position: absolute;
- top: 0;
- right: 0;
- z-index: 1;
-`;
-
-const Card = ({ closable, onClose, children, theme = defaultTokens }: Props) => (
-
- {closable && (
-
-
- )}
- {children}
-
-);
-
-export default Card;
diff --git a/src/Card/Card.js.flow b/src/Card/Card.js.flow
deleted file mode 100644
index 2d7f48f0ad..0000000000
--- a/src/Card/Card.js.flow
+++ /dev/null
@@ -1,11 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-export type Props = {|
- +children?: React$Node,
- +closable?: boolean,
- +onClose?: () => void,
- +theme?: typeof defaultTokens,
-|};
-
-declare export default React$ComponentType;
diff --git a/src/Card/Card.stories.js b/src/Card/Card.stories.js
index 0da0b27687..1161cc4034 100644
--- a/src/Card/Card.stories.js
+++ b/src/Card/Card.stories.js
@@ -7,12 +7,13 @@ import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, text, boolean, select } from "@storybook/addon-knobs/react";
import * as Icons from "../icons";
-import Heading from "../Heading/Heading";
-import Text from "../Text/Text";
-import Card from "./Card";
-import CardHeader from "./CardHeader/CardHeader";
-import CardContent from "./CardContent/CardContent";
-import CardSection from "./CardSection/CardSection";
+import Heading from "../Heading";
+import Text from "../Text";
+import CardHeader from "./CardHeader";
+import CardContent from "./CardContent";
+import CardSection from "./CardSection";
+
+import Card from "./index";
setAddon(chaptersAddon);
diff --git a/src/Card/CardContent/CardContent.js b/src/Card/CardContent/CardContent.js
deleted file mode 100644
index 4b7aa73dcd..0000000000
--- a/src/Card/CardContent/CardContent.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-import type { Props } from "./CardContent";
-
-export const StyledCardContent = styled.div`
- padding: ${({ theme }) => theme.spaceLarge};
-`;
-
-const CardContent = ({ children, theme = defaultTokens }: Props) => (
- {children}
-);
-
-export default CardContent;
diff --git a/src/Card/CardContent/CardContent.js.flow b/src/Card/CardContent/CardContent.js.flow
deleted file mode 100644
index d16545b0e7..0000000000
--- a/src/Card/CardContent/CardContent.js.flow
+++ /dev/null
@@ -1,15 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-export type Props = {|
- +children: React$Node,
- +theme?: typeof defaultTokens,
-|};
-
-type styledCardContent = {
- +theme?: typeof defaultTokens,
-};
-
-declare export var StyledCardContent: React$ComponentType;
-
-declare export default React$ComponentType;
diff --git a/src/Card/CardContent/index.js b/src/Card/CardContent/index.js
index 190115a61a..969ee22be2 100644
--- a/src/Card/CardContent/index.js
+++ b/src/Card/CardContent/index.js
@@ -1,6 +1,19 @@
// @flow
-import { withTheme } from "theming";
+import * as React from "react";
+import styled from "styled-components";
-import CardContent from "./CardContent";
+import defaultTokens from "../../defaultTokens";
-export default withTheme(CardContent);
+import type { Props } from "./index";
+
+export const StyledCardContent = styled.div`
+ padding: ${({ theme }) => theme.orbit.spaceLarge};
+`;
+
+StyledCardContent.defaultProps = {
+ theme: defaultTokens,
+};
+
+const CardContent = ({ children }: Props) => {children} ;
+
+export default CardContent;
diff --git a/src/Card/CardContent/index.js.flow b/src/Card/CardContent/index.js.flow
index b5ef9e64c3..601d0fc225 100644
--- a/src/Card/CardContent/index.js.flow
+++ b/src/Card/CardContent/index.js.flow
@@ -1,4 +1,9 @@
// @flow
-import type { Props } from "./CardContent";
+
+export type Props = {|
+ +children: React$Node,
+|};
+
+declare export var StyledCardContent: React$ComponentType<>;
declare export default React$ComponentType;
diff --git a/src/Card/CardHeader/CardHeader.js b/src/Card/CardHeader/CardHeader.js
deleted file mode 100644
index 7ce67ce03c..0000000000
--- a/src/Card/CardHeader/CardHeader.js
+++ /dev/null
@@ -1,50 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-import Heading from "../../Heading/Heading";
-import Text from "../../Text/Text";
-import type { Props } from "./CardHeader";
-
-export const StyledCardHeader = styled.div`
- position: relative;
- width: 100%;
- padding: ${({ theme }) => theme.spaceLarge};
- box-sizing: border-box;
- color: ${({ theme }) => theme.colorHeading};
-`;
-
-const StyledHeadingWrapper = styled.div`
- display: flex;
-`;
-
-const StyledSubTitle = styled.div`
- text-align: center;
- margin-top: ${({ theme }) => theme.spaceXSmall};
-`;
-
-const StyledIcon = styled.div`
- color: ${({ theme }) => theme.colorHeading};
- display: flex;
- align-items: center;
- margin-right: ${({ theme }) => theme.spaceXSmall};
-`;
-
-const CardHeader = ({ icon, title, subTitle, theme = defaultTokens }: Props) => (
-
-
- {icon && {icon} }
-
- {title}
-
-
- {subTitle && (
-
- {subTitle}
-
- )}
-
-);
-
-export default CardHeader;
diff --git a/src/Card/CardHeader/CardHeader.js.flow b/src/Card/CardHeader/CardHeader.js.flow
deleted file mode 100644
index 9bce26d029..0000000000
--- a/src/Card/CardHeader/CardHeader.js.flow
+++ /dev/null
@@ -1,17 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-export type Props = {|
- +icon?: React$Node,
- +title: string,
- +subTitle?: string,
- +theme?: typeof defaultTokens,
-|};
-
-type styledCardHeader = {
- +theme?: typeof defaultTokens,
-};
-
-declare export var StyledCardHeader: React$ComponentType;
-
-declare export default React$ComponentType;
diff --git a/src/Card/CardHeader/index.js b/src/Card/CardHeader/index.js
index 44c732a377..c34ba96173 100644
--- a/src/Card/CardHeader/index.js
+++ b/src/Card/CardHeader/index.js
@@ -1,6 +1,63 @@
// @flow
-import { withTheme } from "theming";
+import * as React from "react";
+import styled from "styled-components";
-import CardHeader from "./CardHeader";
+import defaultTokens from "../../defaultTokens";
+import Heading from "../../Heading";
+import Text from "../../Text";
-export default withTheme(CardHeader);
+import type { Props } from "./index";
+
+export const StyledCardHeader = styled.div`
+ position: relative;
+ width: 100%;
+ padding: ${({ theme }) => theme.orbit.spaceLarge};
+ box-sizing: border-box;
+ color: ${({ theme }) => theme.orbit.colorHeading};
+`;
+
+StyledCardHeader.defaultProps = {
+ theme: defaultTokens,
+};
+
+const StyledHeadingWrapper = styled.div`
+ display: flex;
+`;
+
+const StyledSubTitle = styled.div`
+ text-align: center;
+ margin-top: ${({ theme }) => theme.orbit.spaceXSmall};
+`;
+
+StyledSubTitle.defaultProps = {
+ theme: defaultTokens,
+};
+
+const StyledIcon = styled.div`
+ color: ${({ theme }) => theme.orbit.colorHeading};
+ display: flex;
+ align-items: center;
+ margin-right: ${({ theme }) => theme.orbit.spaceXSmall};
+`;
+
+StyledIcon.defaultProps = {
+ theme: defaultTokens,
+};
+
+const CardHeader = ({ icon, title, subTitle }: Props) => (
+
+
+ {icon && {icon} }
+
+ {title}
+
+
+ {subTitle && (
+
+ {subTitle}
+
+ )}
+
+);
+
+export default CardHeader;
diff --git a/src/Card/CardHeader/index.js.flow b/src/Card/CardHeader/index.js.flow
index 5591bb3cec..7103435335 100644
--- a/src/Card/CardHeader/index.js.flow
+++ b/src/Card/CardHeader/index.js.flow
@@ -1,4 +1,11 @@
// @flow
-import type { Props } from "./CardHeader";
+
+export type Props = {|
+ +icon?: React$Node,
+ +title: string,
+ +subTitle?: string,
+|};
+
+declare export var StyledCardHeader: React$ComponentType<>;
declare export default React$ComponentType;
diff --git a/src/Card/CardSection/CardSection.js b/src/Card/CardSection/CardSection.js
deleted file mode 100644
index 5296091d6f..0000000000
--- a/src/Card/CardSection/CardSection.js
+++ /dev/null
@@ -1,24 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-import type { Props } from "./CardSection";
-
-export const StyledCardSection = styled.div`
- width: 100%;
- padding: ${({ theme }) => theme.spaceLarge};
- box-sizing: border-box;
- border-top: ${({ theme }) =>
- `${theme.borderWidthCard} ${theme.borderStyleCard} ${theme.borderColorCard}`};
-
- &:first-of-type {
- border: 0;
- }
-`;
-
-const CardSection = ({ children, theme = defaultTokens }: Props) => (
- {children}
-);
-
-export default CardSection;
diff --git a/src/Card/CardSection/CardSection.js.flow b/src/Card/CardSection/CardSection.js.flow
deleted file mode 100644
index b26cc69d5d..0000000000
--- a/src/Card/CardSection/CardSection.js.flow
+++ /dev/null
@@ -1,15 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-export type Props = {|
- +children: React$Node,
- +theme?: typeof defaultTokens,
-|};
-
-type styledCardSection = {
- +theme?: typeof defaultTokens,
-};
-
-declare export var StyledCardSection: React$ComponentType;
-
-declare export default React$ComponentType;
diff --git a/src/Card/CardSection/index.js b/src/Card/CardSection/index.js
index 8542e8d70f..3b6f282749 100644
--- a/src/Card/CardSection/index.js
+++ b/src/Card/CardSection/index.js
@@ -1,6 +1,27 @@
// @flow
-import { withTheme } from "theming";
+import * as React from "react";
+import styled from "styled-components";
-import CardSection from "./CardSection";
+import defaultTokens from "../../defaultTokens";
-export default withTheme(CardSection);
+import type { Props } from "./index";
+
+export const StyledCardSection = styled.div`
+ width: 100%;
+ padding: ${({ theme }) => theme.orbit.spaceLarge};
+ box-sizing: border-box;
+ border-top: ${({ theme }) =>
+ `${theme.orbit.borderWidthCard} ${theme.orbit.borderStyleCard} ${theme.orbit.borderColorCard}`};
+
+ &:first-of-type {
+ border: 0;
+ }
+`;
+
+StyledCardSection.defaultProps = {
+ theme: defaultTokens,
+};
+
+const CardSection = ({ children }: Props) => {children} ;
+
+export default CardSection;
diff --git a/src/Card/CardSection/index.js.flow b/src/Card/CardSection/index.js.flow
index bd043a1b2a..a3760ee2e3 100644
--- a/src/Card/CardSection/index.js.flow
+++ b/src/Card/CardSection/index.js.flow
@@ -1,4 +1,9 @@
// @flow
-import type { Props } from "./CardSection";
+
+export type Props = {|
+ +children: React$Node,
+|};
+
+declare export var StyledCardSection: React$ComponentType<>;
declare export default React$ComponentType;
diff --git a/src/Card/__tests__/index.test.js b/src/Card/__tests__/index.test.js
index 8a4205bdea..ec757053c0 100644
--- a/src/Card/__tests__/index.test.js
+++ b/src/Card/__tests__/index.test.js
@@ -2,10 +2,10 @@
import * as React from "react";
import { shallow } from "enzyme";
-import Card from "../Card";
-import CardSection from "../CardSection/CardSection";
-import Heading from "../../Heading/Heading";
-import Text from "../../Text/Text";
+import Card from "../index";
+import CardSection from "../CardSection";
+import Heading from "../../Heading";
+import Text from "../../Text";
const text = "Text for testing";
diff --git a/src/Card/index.js b/src/Card/index.js
index 322d43cf20..19ef668640 100644
--- a/src/Card/index.js
+++ b/src/Card/index.js
@@ -1,6 +1,59 @@
// @flow
-import { withTheme } from "theming";
+import * as React from "react";
+import styled from "styled-components";
-import Card from "./Card";
+import defaultTokens from "../defaultTokens";
+import Close from "../icons/Close";
+import ButtonLink from "../ButtonLink";
+import { StyledCardSection } from "./CardSection";
+import { StyledCardHeader } from "./CardHeader";
+import { StyledCardContent } from "./CardContent";
-export default withTheme(Card);
+import type { Props } from "./index";
+
+const StyledCard = styled.div`
+ width: 100%;
+ height: 100%;
+ background: ${({ theme }) => theme.orbit.backgroundCard};
+ border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
+ border-width: ${({ theme }) => theme.orbit.borderWidthCard};
+ border-style: ${({ theme }) => theme.orbit.borderStyleCard};
+ border-color: ${({ theme }) => theme.orbit.borderColorCard};
+ box-sizing: border-box;
+ overflow: hidden;
+ position: relative;
+
+ ${StyledCardHeader} {
+ padding-right: ${({ theme, closable }) => closable && theme.orbit.spaceLarge};
+ }
+
+ ${StyledCardHeader} + ${StyledCardSection}, ${StyledCardHeader} + ${StyledCardContent} {
+ padding-top: 0;
+ border-top: 0;
+ }
+
+`;
+
+StyledCard.defaultProps = {
+ theme: defaultTokens,
+};
+
+const CloseContainer = styled.div`
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 1;
+`;
+
+const Card = ({ closable, onClose, children }: Props) => (
+
+ {closable && (
+
+
+ )}
+ {children}
+
+);
+
+export default Card;
diff --git a/src/Card/index.js.flow b/src/Card/index.js.flow
index db192f8cfe..b91ab756cc 100644
--- a/src/Card/index.js.flow
+++ b/src/Card/index.js.flow
@@ -1,4 +1,9 @@
// @flow
-import type { Props } from "./Card";
+
+export type Props = {|
+ +children?: React$Node,
+ +closable?: boolean,
+ +onClose?: () => void,
+|};
declare export default React$ComponentType;
diff --git a/src/CarrierLogo/CarrierLogo.js b/src/CarrierLogo/CarrierLogo.js
deleted file mode 100644
index 2d540a083c..0000000000
--- a/src/CarrierLogo/CarrierLogo.js
+++ /dev/null
@@ -1,81 +0,0 @@
-// @flow
-import * as React from "react";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-import styled from "styled-components";
-
-import { SIZE_OPTIONS, baseURL } from "./consts";
-import type { Props } from "./CarrierLogo";
-
-const StyledCarrierLogo = styled.div`
- background-color: ${({ theme }) => theme.backgroundCarrierLogo};
- height: ${({ theme, tokens, size, carriers }) =>
- carriers.length > 1 ? `${theme.heightIconLarge}` : `${tokens.renderSizes[size]}px`};
- width: ${({ tokens, theme, size, carriers }) =>
- carriers.length > 1 ? `${theme.widthIconLarge}` : `${tokens.renderSizes[size]}px`};
- display: flex;
- flex-direction: ${({ carriers }) => (carriers.length > 1 ? "column" : "row")};
- flex-wrap: wrap;
- align-content: space-between;
- justify-content: space-between;
-`;
-const StyledImage = styled.img`
- height: ${({ imageSize }) => imageSize}px;
- width: ${({ imageSize }) => imageSize}px;
- background-color: ${({ theme }) => theme.backgroundCarrierLogo};
- border-radius: ${({ theme }) => theme.borderRadiusNormal};
- overflow: hidden;
- &:last-child {
- align-self: flex-end;
- }
-`;
-
-const CarrierLogo = (props: Props) => {
- const { size = SIZE_OPTIONS.LARGE, carriers, theme = defaultTokens } = props;
- const tokens = {
- directorySizes: {
- [SIZE_OPTIONS.SMALL]: 16,
- [SIZE_OPTIONS.MEDIUM]: 32,
- [SIZE_OPTIONS.LARGE]: 32,
- },
- retinaSizes: {
- [SIZE_OPTIONS.SMALL]: 32,
- [SIZE_OPTIONS.MEDIUM]: 64,
- [SIZE_OPTIONS.LARGE]: 64,
- },
- renderSizes: {
- [SIZE_OPTIONS.SMALL]: parseInt(theme.heightIconSmall, 10),
- [SIZE_OPTIONS.MEDIUM]: parseInt(theme.heightIconMedium, 10),
- [SIZE_OPTIONS.LARGE]: parseInt(theme.heightIconLarge, 10),
- },
- };
- const sourceSize =
- carriers.length > 1 ? tokens.directorySizes[SIZE_OPTIONS.SMALL] : tokens.directorySizes[size];
- const imageSize =
- carriers.length > 1 ? tokens.renderSizes[SIZE_OPTIONS.SMALL] : tokens.renderSizes[size];
- const srcSetSize =
- carriers.length > 1 ? tokens.retinaSizes[SIZE_OPTIONS.SMALL] : tokens.retinaSizes[size];
-
- return (
-
- {carriers.slice(0, 4).map(carrierImage => {
- const type = carrierImage.type === undefined ? "airline" : carrierImage.type;
- return (
- 2 ? 1 : 0)}
- tokens={tokens}
- theme={theme}
- />
- );
- })}
-
- );
-};
-
-export default CarrierLogo;
diff --git a/src/CarrierLogo/CarrierLogo.js.flow b/src/CarrierLogo/CarrierLogo.js.flow
deleted file mode 100644
index 86bc28dc69..0000000000
--- a/src/CarrierLogo/CarrierLogo.js.flow
+++ /dev/null
@@ -1,12 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-type Carrier = { code: string, name: string, type?: "airline" | "bus" | "train" };
-
-export type Props = {|
- +size?: "small" | "medium" | "large",
- +carriers: Carrier[],
- +theme?: typeof defaultTokens,
-|};
-
-declare export default React$ComponentType;
diff --git a/src/CarrierLogo/CarrierLogo.stories.js b/src/CarrierLogo/CarrierLogo.stories.js
index 9346e397c2..bbffcc47fc 100644
--- a/src/CarrierLogo/CarrierLogo.stories.js
+++ b/src/CarrierLogo/CarrierLogo.stories.js
@@ -6,9 +6,10 @@ import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, object, select } from "@storybook/addon-knobs/react";
import styles from "@sambego/storybook-styles/dist/index";
-import CarrierLogo from "./CarrierLogo";
import { SIZE_OPTIONS, CARRIER_TYPE_OPTIONS } from "./consts";
+import CarrierLogo from "./index";
+
setAddon(chaptersAddon);
const options = {
diff --git a/src/CarrierLogo/__tests__/__snapshots__/index.test.js.snap b/src/CarrierLogo/__tests__/__snapshots__/index.test.js.snap
index c4eeb36f8d..f815c6653f 100644
--- a/src/CarrierLogo/__tests__/__snapshots__/index.test.js.snap
+++ b/src/CarrierLogo/__tests__/__snapshots__/index.test.js.snap
@@ -47,321 +47,323 @@ exports[`Multiple CarrierLogo with DefaultProp should match snapshot 1`] = `
size="large"
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
+ "orbit": Object {
+ "backgroundAlertCritical": "#fae8e8",
+ "backgroundAlertInfo": "#e0f6ff",
+ "backgroundAlertSuccess": "#e7f3e8",
+ "backgroundAlertWarning": "#fcf1cd",
+ "backgroundBody": "#f5f7f9",
+ "backgroundButtonBordered": "transparent",
+ "backgroundButtonBorderedActive": "#fff",
+ "backgroundButtonBorderedHover": "#f5f7f9",
+ "backgroundButtonCritical": "#d21c1c",
+ "backgroundButtonCriticalActive": "#b21717",
+ "backgroundButtonCriticalHover": "#bd1919",
+ "backgroundButtonFacebook": "#3b5998",
+ "backgroundButtonFacebookActive": "#354f88",
+ "backgroundButtonFacebookHover": "#385490",
+ "backgroundButtonGoogle": "#f5f7f9",
+ "backgroundButtonGoogleActive": "#d6dee6",
+ "backgroundButtonGoogleHover": "#e5eaef",
+ "backgroundButtonInfo": "#0176D2",
+ "backgroundButtonInfoActive": "#0064b2",
+ "backgroundButtonInfoHover": "#006abd",
+ "backgroundButtonLinkPrimary": "transparent",
+ "backgroundButtonLinkPrimaryActive": "#d6dee6",
+ "backgroundButtonLinkPrimaryHover": "#e5eaef",
+ "backgroundButtonLinkSecondary": "transparent",
+ "backgroundButtonLinkSecondaryActive": "#d6dee6",
+ "backgroundButtonLinkSecondaryHover": "#e5eaef",
+ "backgroundButtonPrimary": "#00a991",
+ "backgroundButtonPrimaryActive": "#008f7b",
+ "backgroundButtonPrimaryHover": "#009882",
+ "backgroundButtonSecondary": "#e8edf1",
+ "backgroundButtonSecondaryActive": "#cad5df",
+ "backgroundButtonSecondaryHover": "#d9e1e8",
+ "backgroundButtonSuccess": "#46B655",
+ "backgroundButtonSuccessActive": "#3fa34c",
+ "backgroundButtonSuccessHover": "#42ac50",
+ "backgroundButtonWarning": "#f9971e",
+ "backgroundButtonWarningActive": "#e68206",
+ "backgroundButtonWarningHover": "#f48a06",
+ "backgroundCard": "#fff",
+ "backgroundCarrierLogo": "transparent",
+ "backgroundInput": "#fff",
+ "backgroundInputDisabled": "#e8edf1",
+ "backgroundModal": "#fff",
+ "borderColorButtonCriticalBordered": "#d21c1c",
+ "borderColorButtonCriticalBorderedActive": "#b21717",
+ "borderColorButtonCriticalBorderedHover": "#bd1919",
+ "borderColorButtonFacebookBordered": "#3b5998",
+ "borderColorButtonFacebookBorderedActive": "#354f88",
+ "borderColorButtonFacebookBorderedHover": "#385490",
+ "borderColorButtonGoogleBordered": "#46515e",
+ "borderColorButtonGoogleBorderedActive": "#38404b",
+ "borderColorButtonGoogleBorderedHover": "#3f4854",
+ "borderColorButtonInfoBordered": "#0176D2",
+ "borderColorButtonInfoBorderedActive": "#0064b2",
+ "borderColorButtonInfoBorderedHover": "#006abd",
+ "borderColorButtonPrimaryBordered": "#00a991",
+ "borderColorButtonPrimaryBorderedActive": "#008f7b",
+ "borderColorButtonPrimaryBorderedHover": "#009882",
+ "borderColorButtonSecondaryBordered": "#46515e",
+ "borderColorButtonSecondaryBorderedActive": "#38404b",
+ "borderColorButtonSecondaryBorderedHover": "#3f4854",
+ "borderColorButtonSuccessBordered": "#46B655",
+ "borderColorButtonSuccessBorderedActive": "#3fa34c",
+ "borderColorButtonSuccessBorderedHover": "#42ac50",
+ "borderColorButtonWarningBordered": "#f9971e",
+ "borderColorButtonWarningBorderedActive": "#e68206",
+ "borderColorButtonWarningBorderedHover": "#f48a06",
+ "borderColorCard": "#e8edf1",
+ "borderColorInput": "#bac7d5",
+ "borderColorInputActive": "#94a8be",
+ "borderColorInputError": "#d21c1c",
+ "borderColorInputErrorFocus": "#d21c1c",
+ "borderColorInputFocus": "#0176D2",
+ "borderColorInputHover": "#a6b6c8",
+ "borderColorModal": "#e8edf1",
+ "borderColorTableCell": "#bac7d5",
+ "borderRadiusCircle": "50%",
+ "borderRadiusLarge": "6px",
+ "borderRadiusNormal": "3px",
+ "borderRadiusSmall": "2px",
+ "borderStyleCard": "solid",
+ "borderStyleInput": "solid",
+ "borderWidthCard": "1px",
+ "borderWidthInput": "1px",
+ "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
+ "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
+ "colorAlertIconCritical": "#d21c1c",
+ "colorAlertIconInfo": "#0176D2",
+ "colorAlertIconSuccess": "#46B655",
+ "colorAlertIconWarning": "#f9971e",
+ "colorHeading": "#171b1e",
+ "colorHeadingInverted": "#fff",
+ "colorIconAttention": "#171b1e",
+ "colorIconCheckbox": "#00a991",
+ "colorIconCheckboxDisabled": "#bac7d5",
+ "colorIconInput": "#bac7d5",
+ "colorIconPrimary": "#46515e",
+ "colorIconRadioButton": "#00a991",
+ "colorIconRadioButtonDisabled": "#bac7d5",
+ "colorIconSecondary": "#7f91a8",
+ "colorIconTerciary": "#bac7d5",
+ "colorLabelForm": "#46515e",
+ "colorLabelFormFilled": "#7f91a8",
+ "colorPlaceholderInput": "#bac7d5",
+ "colorTextAlertCritical": "#650808",
+ "colorTextAlertInfo": "#07405c",
+ "colorTextAlertSuccess": "#065d12",
+ "colorTextAlertWarning": "#a93610",
+ "colorTextAttention": "#171b1e",
+ "colorTextButtonCritical": "#fff",
+ "colorTextButtonCriticalActive": "#fff",
+ "colorTextButtonCriticalBordered": "#d21c1c",
+ "colorTextButtonCriticalBorderedActive": "#b21717",
+ "colorTextButtonCriticalBorderedHover": "#bd1919",
+ "colorTextButtonCriticalHover": "#fff",
+ "colorTextButtonFacebook": "#fff",
+ "colorTextButtonFacebookActive": "#fff",
+ "colorTextButtonFacebookBordered": "#3b5998",
+ "colorTextButtonFacebookBorderedActive": "#354f88",
+ "colorTextButtonFacebookBorderedHover": "#385490",
+ "colorTextButtonFacebookHover": "#fff",
+ "colorTextButtonFilled": "#fff",
+ "colorTextButtonFilledActive": "#fff",
+ "colorTextButtonFilledHover": "#fff",
+ "colorTextButtonGoogle": "#46515e",
+ "colorTextButtonGoogleActive": "#38404b",
+ "colorTextButtonGoogleBordered": "#46515e",
+ "colorTextButtonGoogleBorderedActive": "#38404b",
+ "colorTextButtonGoogleBorderedHover": "#3f4854",
+ "colorTextButtonGoogleHover": "#3f4854",
+ "colorTextButtonInfo": "#fff",
+ "colorTextButtonInfoActive": "#fff",
+ "colorTextButtonInfoBordered": "#0176D2",
+ "colorTextButtonInfoBorderedActive": "#0064b2",
+ "colorTextButtonInfoBorderedHover": "#006abd",
+ "colorTextButtonInfoHover": "#fff",
+ "colorTextButtonLinkPrimary": "#00a991",
+ "colorTextButtonLinkPrimaryActive": "#008f7b",
+ "colorTextButtonLinkPrimaryHover": "#009882",
+ "colorTextButtonLinkSecondary": "#46515e",
+ "colorTextButtonLinkSecondaryActive": "#38404b",
+ "colorTextButtonLinkSecondaryHover": "#3f4854",
+ "colorTextButtonPrimary": "#fff",
+ "colorTextButtonPrimaryActive": "#fff",
+ "colorTextButtonPrimaryBordered": "#00a991",
+ "colorTextButtonPrimaryBorderedActive": "#008f7b",
+ "colorTextButtonPrimaryBorderedHover": "#009882",
+ "colorTextButtonPrimaryHover": "#fff",
+ "colorTextButtonSecondary": "#46515e",
+ "colorTextButtonSecondaryActive": "#38404b",
+ "colorTextButtonSecondaryBordered": "#46515e",
+ "colorTextButtonSecondaryBorderedActive": "#38404b",
+ "colorTextButtonSecondaryBorderedHover": "#3f4854",
+ "colorTextButtonSecondaryHover": "#3f4854",
+ "colorTextButtonSuccess": "#fff",
+ "colorTextButtonSuccessActive": "#fff",
+ "colorTextButtonSuccessBordered": "#46B655",
+ "colorTextButtonSuccessBorderedActive": "#3fa34c",
+ "colorTextButtonSuccessBorderedHover": "#42ac50",
+ "colorTextButtonSuccessHover": "#fff",
+ "colorTextButtonWarning": "#fff",
+ "colorTextButtonWarningActive": "#fff",
+ "colorTextButtonWarningBordered": "#f9971e",
+ "colorTextButtonWarningBorderedActive": "#e68206",
+ "colorTextButtonWarningBorderedHover": "#f48a06",
+ "colorTextButtonWarningHover": "#fff",
+ "colorTextError": "#d21c1c",
+ "colorTextInfo": "#0176D2",
+ "colorTextInput": "#46515e",
+ "colorTextInputDisabled": "#bac7d5",
+ "colorTextLinkPrimary": "#00a991",
+ "colorTextLinkPrimaryHover": "#00a991",
+ "colorTextLinkSecondary": "#171b1e",
+ "colorTextLinkSecondaryHover": "#00a991",
+ "colorTextPrimary": "#46515e",
+ "colorTextSecondary": "#7f91a8",
+ "durationFast": "0.2s",
+ "durationNormal": "0.3s",
+ "durationSlow": "0.4s",
+ "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
+ "fontSizeButtonLarge": "16px",
+ "fontSizeButtonNormal": "14px",
+ "fontSizeButtonSmall": "12px",
+ "fontSizeHeadingDisplay": "40px",
+ "fontSizeHeadingTitle1": "28px",
+ "fontSizeHeadingTitle2": "22px",
+ "fontSizeHeadingTitle3": "16px",
+ "fontSizeInputNormal": "16px",
+ "fontSizeInputSmall": "14px",
+ "fontSizeLabelForm": "14px",
+ "fontSizeMessage": "14px",
+ "fontSizeMessageForm": "12px",
+ "fontSizeTextLarge": "16px",
+ "fontSizeTextNormal": "14px",
+ "fontSizeTextSmall": "12px",
+ "fontWeightBold": "700",
+ "fontWeightHeadingDisplay": "700",
+ "fontWeightHeadingTitle1": "700",
+ "fontWeightHeadingTitle2": "500",
+ "fontWeightHeadingTitle3": "500",
+ "fontWeightLinks": "500",
+ "fontWeightMedium": "500",
+ "fontWeightNormal": "400",
+ "heightButtonLarge": "52px",
+ "heightButtonNormal": "44px",
+ "heightButtonSmall": "32px",
+ "heightCheckbox": "20px",
+ "heightCountryFlag": "20px",
+ "heightIconLarge": "32px",
+ "heightIconMedium": "24px",
+ "heightIconSmall": "16px",
+ "heightInputLarge": "52px",
+ "heightInputNormal": "44px",
+ "heightInputSmall": "32px",
+ "heightRadioButton": "20px",
+ "lineHeightHeading": "1.2",
+ "lineHeightText": "1.4",
+ "marginButtonIconLarge": "16px",
+ "marginButtonIconNormal": "12px",
+ "marginButtonIconSmall": "8px",
+ "modifierScaleButtonActive": 0.9,
+ "opacityButtonDisabled": "0.3",
+ "opacityCheckboxDisabled": "0.5",
+ "opacityOverlay": "0.8",
+ "opacityRadioButtonDisabled": "0.5",
+ "paddingAlert": "16px",
+ "paddingAlertWithIcon": "12px",
+ "paddingButtonLarge": "28px",
+ "paddingButtonLargeWithIcon": "12px",
+ "paddingButtonNormal": "16px",
+ "paddingButtonNormalWithIcon": "8px",
+ "paddingButtonSmall": "12px",
+ "paddingButtonSmallWithIcon": "8px",
+ "paddingInputNormal": "16px",
+ "paddingInputSmall": "12px",
+ "paletteBlueDark": "#07405c",
+ "paletteBlueLight": "#e0f6ff",
+ "paletteBlueLightActive": "#b0e8fe",
+ "paletteBlueLightHover": "#c8effe",
+ "paletteBlueNormal": "#0176D2",
+ "paletteBlueNormalActive": "#0064b2",
+ "paletteBlueNormalHover": "#006abd",
+ "paletteCloudLight": "#f5f7f9",
+ "paletteCloudLightActive": "#d6dee6",
+ "paletteCloudLightHover": "#e5eaef",
+ "paletteCloudNormal": "#e8edf1",
+ "paletteCloudNormalActive": "#cad5df",
+ "paletteCloudNormalHover": "#d9e1e8",
+ "paletteGreenDark": "#065d12",
+ "paletteGreenLight": "#e7f3e8",
+ "paletteGreenLightActive": "#c7e3c9",
+ "paletteGreenLightHover": "#d7ebd8",
+ "paletteGreenNormal": "#46B655",
+ "paletteGreenNormalActive": "#3fa34c",
+ "paletteGreenNormalHover": "#42ac50",
+ "paletteInkDark": "#171b1e",
+ "paletteInkLight": "#7f91a8",
+ "paletteInkLightActive": "#5f738c",
+ "paletteInkLightHover": "#6d819c",
+ "paletteInkLighter": "#bac7d5",
+ "paletteInkLighterActive": "#94a8be",
+ "paletteInkLighterHover": "#a6b6c8",
+ "paletteInkNormal": "#46515e",
+ "paletteInkNormalActive": "#38404b",
+ "paletteInkNormalHover": "#3f4854",
+ "paletteOrangeDark": "#a93610",
+ "paletteOrangeLight": "#fcf1cd",
+ "paletteOrangeLightActive": "#f9e4a1",
+ "paletteOrangeLightHover": "#faeab7",
+ "paletteOrangeNormal": "#f9971e",
+ "paletteOrangeNormalActive": "#e68206",
+ "paletteOrangeNormalHover": "#f48a06",
+ "paletteProductDark": "#005448",
+ "paletteProductLight": "#9ae5da",
+ "paletteProductLightActive": "#64d7c6",
+ "paletteProductLightHover": "#7fded0",
+ "paletteProductNormal": "#00a991",
+ "paletteProductNormalActive": "#008f7b",
+ "paletteProductNormalHover": "#009882",
+ "paletteRedDark": "#650808",
+ "paletteRedLight": "#fae8e8",
+ "paletteRedLightActive": "#f1c0c0",
+ "paletteRedLightHover": "#f5d4d4",
+ "paletteRedNormal": "#d21c1c",
+ "paletteRedNormalActive": "#b21717",
+ "paletteRedNormalHover": "#bd1919",
+ "paletteSocialFacebook": "#3b5998",
+ "paletteSocialFacebookActive": "#354f88",
+ "paletteSocialFacebookHover": "#385490",
+ "paletteWhite": "#fff",
+ "paletteWhiteActive": "#e5eaef",
+ "paletteWhiteHover": "#f5f7f9",
+ "spaceLarge": "24px",
+ "spaceMedium": "16px",
+ "spaceSmall": "12px",
+ "spaceXLarge": "32px",
+ "spaceXSmall": "8px",
+ "spaceXXLarge": "40px",
+ "spaceXXSmall": "4px",
+ "spaceXXXLarge": "52px",
+ "textDecorationTextLinkPrimary": "none",
+ "textDecorationTextLinkPrimaryHover": "underline",
+ "textDecorationTextLinkSecondary": "underline",
+ "textDecorationTextLinkSecondaryHover": "underline",
+ "widthCheckbox": "20px",
+ "widthCountryFlag": "20px",
+ "widthIconLarge": "32px",
+ "widthIconMedium": "24px",
+ "widthIconSmall": "16px",
+ "widthRadioButton": "20px",
+ "zIndexDefault": "1",
+ "zIndexModal": "825",
+ "zIndexModalOverlay": "800",
+ "zIndexOnTheTop": "900",
+ "zIndexSticky": "100",
+ },
}
}
tokens={
@@ -396,321 +398,323 @@ exports[`Multiple CarrierLogo with DefaultProp should match snapshot 1`] = `
srcSet="//images.kiwi.com/airlines/32/FR.png?default=airline.png 2x"
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
+ "orbit": Object {
+ "backgroundAlertCritical": "#fae8e8",
+ "backgroundAlertInfo": "#e0f6ff",
+ "backgroundAlertSuccess": "#e7f3e8",
+ "backgroundAlertWarning": "#fcf1cd",
+ "backgroundBody": "#f5f7f9",
+ "backgroundButtonBordered": "transparent",
+ "backgroundButtonBorderedActive": "#fff",
+ "backgroundButtonBorderedHover": "#f5f7f9",
+ "backgroundButtonCritical": "#d21c1c",
+ "backgroundButtonCriticalActive": "#b21717",
+ "backgroundButtonCriticalHover": "#bd1919",
+ "backgroundButtonFacebook": "#3b5998",
+ "backgroundButtonFacebookActive": "#354f88",
+ "backgroundButtonFacebookHover": "#385490",
+ "backgroundButtonGoogle": "#f5f7f9",
+ "backgroundButtonGoogleActive": "#d6dee6",
+ "backgroundButtonGoogleHover": "#e5eaef",
+ "backgroundButtonInfo": "#0176D2",
+ "backgroundButtonInfoActive": "#0064b2",
+ "backgroundButtonInfoHover": "#006abd",
+ "backgroundButtonLinkPrimary": "transparent",
+ "backgroundButtonLinkPrimaryActive": "#d6dee6",
+ "backgroundButtonLinkPrimaryHover": "#e5eaef",
+ "backgroundButtonLinkSecondary": "transparent",
+ "backgroundButtonLinkSecondaryActive": "#d6dee6",
+ "backgroundButtonLinkSecondaryHover": "#e5eaef",
+ "backgroundButtonPrimary": "#00a991",
+ "backgroundButtonPrimaryActive": "#008f7b",
+ "backgroundButtonPrimaryHover": "#009882",
+ "backgroundButtonSecondary": "#e8edf1",
+ "backgroundButtonSecondaryActive": "#cad5df",
+ "backgroundButtonSecondaryHover": "#d9e1e8",
+ "backgroundButtonSuccess": "#46B655",
+ "backgroundButtonSuccessActive": "#3fa34c",
+ "backgroundButtonSuccessHover": "#42ac50",
+ "backgroundButtonWarning": "#f9971e",
+ "backgroundButtonWarningActive": "#e68206",
+ "backgroundButtonWarningHover": "#f48a06",
+ "backgroundCard": "#fff",
+ "backgroundCarrierLogo": "transparent",
+ "backgroundInput": "#fff",
+ "backgroundInputDisabled": "#e8edf1",
+ "backgroundModal": "#fff",
+ "borderColorButtonCriticalBordered": "#d21c1c",
+ "borderColorButtonCriticalBorderedActive": "#b21717",
+ "borderColorButtonCriticalBorderedHover": "#bd1919",
+ "borderColorButtonFacebookBordered": "#3b5998",
+ "borderColorButtonFacebookBorderedActive": "#354f88",
+ "borderColorButtonFacebookBorderedHover": "#385490",
+ "borderColorButtonGoogleBordered": "#46515e",
+ "borderColorButtonGoogleBorderedActive": "#38404b",
+ "borderColorButtonGoogleBorderedHover": "#3f4854",
+ "borderColorButtonInfoBordered": "#0176D2",
+ "borderColorButtonInfoBorderedActive": "#0064b2",
+ "borderColorButtonInfoBorderedHover": "#006abd",
+ "borderColorButtonPrimaryBordered": "#00a991",
+ "borderColorButtonPrimaryBorderedActive": "#008f7b",
+ "borderColorButtonPrimaryBorderedHover": "#009882",
+ "borderColorButtonSecondaryBordered": "#46515e",
+ "borderColorButtonSecondaryBorderedActive": "#38404b",
+ "borderColorButtonSecondaryBorderedHover": "#3f4854",
+ "borderColorButtonSuccessBordered": "#46B655",
+ "borderColorButtonSuccessBorderedActive": "#3fa34c",
+ "borderColorButtonSuccessBorderedHover": "#42ac50",
+ "borderColorButtonWarningBordered": "#f9971e",
+ "borderColorButtonWarningBorderedActive": "#e68206",
+ "borderColorButtonWarningBorderedHover": "#f48a06",
+ "borderColorCard": "#e8edf1",
+ "borderColorInput": "#bac7d5",
+ "borderColorInputActive": "#94a8be",
+ "borderColorInputError": "#d21c1c",
+ "borderColorInputErrorFocus": "#d21c1c",
+ "borderColorInputFocus": "#0176D2",
+ "borderColorInputHover": "#a6b6c8",
+ "borderColorModal": "#e8edf1",
+ "borderColorTableCell": "#bac7d5",
+ "borderRadiusCircle": "50%",
+ "borderRadiusLarge": "6px",
+ "borderRadiusNormal": "3px",
+ "borderRadiusSmall": "2px",
+ "borderStyleCard": "solid",
+ "borderStyleInput": "solid",
+ "borderWidthCard": "1px",
+ "borderWidthInput": "1px",
+ "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
+ "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
+ "colorAlertIconCritical": "#d21c1c",
+ "colorAlertIconInfo": "#0176D2",
+ "colorAlertIconSuccess": "#46B655",
+ "colorAlertIconWarning": "#f9971e",
+ "colorHeading": "#171b1e",
+ "colorHeadingInverted": "#fff",
+ "colorIconAttention": "#171b1e",
+ "colorIconCheckbox": "#00a991",
+ "colorIconCheckboxDisabled": "#bac7d5",
+ "colorIconInput": "#bac7d5",
+ "colorIconPrimary": "#46515e",
+ "colorIconRadioButton": "#00a991",
+ "colorIconRadioButtonDisabled": "#bac7d5",
+ "colorIconSecondary": "#7f91a8",
+ "colorIconTerciary": "#bac7d5",
+ "colorLabelForm": "#46515e",
+ "colorLabelFormFilled": "#7f91a8",
+ "colorPlaceholderInput": "#bac7d5",
+ "colorTextAlertCritical": "#650808",
+ "colorTextAlertInfo": "#07405c",
+ "colorTextAlertSuccess": "#065d12",
+ "colorTextAlertWarning": "#a93610",
+ "colorTextAttention": "#171b1e",
+ "colorTextButtonCritical": "#fff",
+ "colorTextButtonCriticalActive": "#fff",
+ "colorTextButtonCriticalBordered": "#d21c1c",
+ "colorTextButtonCriticalBorderedActive": "#b21717",
+ "colorTextButtonCriticalBorderedHover": "#bd1919",
+ "colorTextButtonCriticalHover": "#fff",
+ "colorTextButtonFacebook": "#fff",
+ "colorTextButtonFacebookActive": "#fff",
+ "colorTextButtonFacebookBordered": "#3b5998",
+ "colorTextButtonFacebookBorderedActive": "#354f88",
+ "colorTextButtonFacebookBorderedHover": "#385490",
+ "colorTextButtonFacebookHover": "#fff",
+ "colorTextButtonFilled": "#fff",
+ "colorTextButtonFilledActive": "#fff",
+ "colorTextButtonFilledHover": "#fff",
+ "colorTextButtonGoogle": "#46515e",
+ "colorTextButtonGoogleActive": "#38404b",
+ "colorTextButtonGoogleBordered": "#46515e",
+ "colorTextButtonGoogleBorderedActive": "#38404b",
+ "colorTextButtonGoogleBorderedHover": "#3f4854",
+ "colorTextButtonGoogleHover": "#3f4854",
+ "colorTextButtonInfo": "#fff",
+ "colorTextButtonInfoActive": "#fff",
+ "colorTextButtonInfoBordered": "#0176D2",
+ "colorTextButtonInfoBorderedActive": "#0064b2",
+ "colorTextButtonInfoBorderedHover": "#006abd",
+ "colorTextButtonInfoHover": "#fff",
+ "colorTextButtonLinkPrimary": "#00a991",
+ "colorTextButtonLinkPrimaryActive": "#008f7b",
+ "colorTextButtonLinkPrimaryHover": "#009882",
+ "colorTextButtonLinkSecondary": "#46515e",
+ "colorTextButtonLinkSecondaryActive": "#38404b",
+ "colorTextButtonLinkSecondaryHover": "#3f4854",
+ "colorTextButtonPrimary": "#fff",
+ "colorTextButtonPrimaryActive": "#fff",
+ "colorTextButtonPrimaryBordered": "#00a991",
+ "colorTextButtonPrimaryBorderedActive": "#008f7b",
+ "colorTextButtonPrimaryBorderedHover": "#009882",
+ "colorTextButtonPrimaryHover": "#fff",
+ "colorTextButtonSecondary": "#46515e",
+ "colorTextButtonSecondaryActive": "#38404b",
+ "colorTextButtonSecondaryBordered": "#46515e",
+ "colorTextButtonSecondaryBorderedActive": "#38404b",
+ "colorTextButtonSecondaryBorderedHover": "#3f4854",
+ "colorTextButtonSecondaryHover": "#3f4854",
+ "colorTextButtonSuccess": "#fff",
+ "colorTextButtonSuccessActive": "#fff",
+ "colorTextButtonSuccessBordered": "#46B655",
+ "colorTextButtonSuccessBorderedActive": "#3fa34c",
+ "colorTextButtonSuccessBorderedHover": "#42ac50",
+ "colorTextButtonSuccessHover": "#fff",
+ "colorTextButtonWarning": "#fff",
+ "colorTextButtonWarningActive": "#fff",
+ "colorTextButtonWarningBordered": "#f9971e",
+ "colorTextButtonWarningBorderedActive": "#e68206",
+ "colorTextButtonWarningBorderedHover": "#f48a06",
+ "colorTextButtonWarningHover": "#fff",
+ "colorTextError": "#d21c1c",
+ "colorTextInfo": "#0176D2",
+ "colorTextInput": "#46515e",
+ "colorTextInputDisabled": "#bac7d5",
+ "colorTextLinkPrimary": "#00a991",
+ "colorTextLinkPrimaryHover": "#00a991",
+ "colorTextLinkSecondary": "#171b1e",
+ "colorTextLinkSecondaryHover": "#00a991",
+ "colorTextPrimary": "#46515e",
+ "colorTextSecondary": "#7f91a8",
+ "durationFast": "0.2s",
+ "durationNormal": "0.3s",
+ "durationSlow": "0.4s",
+ "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
+ "fontSizeButtonLarge": "16px",
+ "fontSizeButtonNormal": "14px",
+ "fontSizeButtonSmall": "12px",
+ "fontSizeHeadingDisplay": "40px",
+ "fontSizeHeadingTitle1": "28px",
+ "fontSizeHeadingTitle2": "22px",
+ "fontSizeHeadingTitle3": "16px",
+ "fontSizeInputNormal": "16px",
+ "fontSizeInputSmall": "14px",
+ "fontSizeLabelForm": "14px",
+ "fontSizeMessage": "14px",
+ "fontSizeMessageForm": "12px",
+ "fontSizeTextLarge": "16px",
+ "fontSizeTextNormal": "14px",
+ "fontSizeTextSmall": "12px",
+ "fontWeightBold": "700",
+ "fontWeightHeadingDisplay": "700",
+ "fontWeightHeadingTitle1": "700",
+ "fontWeightHeadingTitle2": "500",
+ "fontWeightHeadingTitle3": "500",
+ "fontWeightLinks": "500",
+ "fontWeightMedium": "500",
+ "fontWeightNormal": "400",
+ "heightButtonLarge": "52px",
+ "heightButtonNormal": "44px",
+ "heightButtonSmall": "32px",
+ "heightCheckbox": "20px",
+ "heightCountryFlag": "20px",
+ "heightIconLarge": "32px",
+ "heightIconMedium": "24px",
+ "heightIconSmall": "16px",
+ "heightInputLarge": "52px",
+ "heightInputNormal": "44px",
+ "heightInputSmall": "32px",
+ "heightRadioButton": "20px",
+ "lineHeightHeading": "1.2",
+ "lineHeightText": "1.4",
+ "marginButtonIconLarge": "16px",
+ "marginButtonIconNormal": "12px",
+ "marginButtonIconSmall": "8px",
+ "modifierScaleButtonActive": 0.9,
+ "opacityButtonDisabled": "0.3",
+ "opacityCheckboxDisabled": "0.5",
+ "opacityOverlay": "0.8",
+ "opacityRadioButtonDisabled": "0.5",
+ "paddingAlert": "16px",
+ "paddingAlertWithIcon": "12px",
+ "paddingButtonLarge": "28px",
+ "paddingButtonLargeWithIcon": "12px",
+ "paddingButtonNormal": "16px",
+ "paddingButtonNormalWithIcon": "8px",
+ "paddingButtonSmall": "12px",
+ "paddingButtonSmallWithIcon": "8px",
+ "paddingInputNormal": "16px",
+ "paddingInputSmall": "12px",
+ "paletteBlueDark": "#07405c",
+ "paletteBlueLight": "#e0f6ff",
+ "paletteBlueLightActive": "#b0e8fe",
+ "paletteBlueLightHover": "#c8effe",
+ "paletteBlueNormal": "#0176D2",
+ "paletteBlueNormalActive": "#0064b2",
+ "paletteBlueNormalHover": "#006abd",
+ "paletteCloudLight": "#f5f7f9",
+ "paletteCloudLightActive": "#d6dee6",
+ "paletteCloudLightHover": "#e5eaef",
+ "paletteCloudNormal": "#e8edf1",
+ "paletteCloudNormalActive": "#cad5df",
+ "paletteCloudNormalHover": "#d9e1e8",
+ "paletteGreenDark": "#065d12",
+ "paletteGreenLight": "#e7f3e8",
+ "paletteGreenLightActive": "#c7e3c9",
+ "paletteGreenLightHover": "#d7ebd8",
+ "paletteGreenNormal": "#46B655",
+ "paletteGreenNormalActive": "#3fa34c",
+ "paletteGreenNormalHover": "#42ac50",
+ "paletteInkDark": "#171b1e",
+ "paletteInkLight": "#7f91a8",
+ "paletteInkLightActive": "#5f738c",
+ "paletteInkLightHover": "#6d819c",
+ "paletteInkLighter": "#bac7d5",
+ "paletteInkLighterActive": "#94a8be",
+ "paletteInkLighterHover": "#a6b6c8",
+ "paletteInkNormal": "#46515e",
+ "paletteInkNormalActive": "#38404b",
+ "paletteInkNormalHover": "#3f4854",
+ "paletteOrangeDark": "#a93610",
+ "paletteOrangeLight": "#fcf1cd",
+ "paletteOrangeLightActive": "#f9e4a1",
+ "paletteOrangeLightHover": "#faeab7",
+ "paletteOrangeNormal": "#f9971e",
+ "paletteOrangeNormalActive": "#e68206",
+ "paletteOrangeNormalHover": "#f48a06",
+ "paletteProductDark": "#005448",
+ "paletteProductLight": "#9ae5da",
+ "paletteProductLightActive": "#64d7c6",
+ "paletteProductLightHover": "#7fded0",
+ "paletteProductNormal": "#00a991",
+ "paletteProductNormalActive": "#008f7b",
+ "paletteProductNormalHover": "#009882",
+ "paletteRedDark": "#650808",
+ "paletteRedLight": "#fae8e8",
+ "paletteRedLightActive": "#f1c0c0",
+ "paletteRedLightHover": "#f5d4d4",
+ "paletteRedNormal": "#d21c1c",
+ "paletteRedNormalActive": "#b21717",
+ "paletteRedNormalHover": "#bd1919",
+ "paletteSocialFacebook": "#3b5998",
+ "paletteSocialFacebookActive": "#354f88",
+ "paletteSocialFacebookHover": "#385490",
+ "paletteWhite": "#fff",
+ "paletteWhiteActive": "#e5eaef",
+ "paletteWhiteHover": "#f5f7f9",
+ "spaceLarge": "24px",
+ "spaceMedium": "16px",
+ "spaceSmall": "12px",
+ "spaceXLarge": "32px",
+ "spaceXSmall": "8px",
+ "spaceXXLarge": "40px",
+ "spaceXXSmall": "4px",
+ "spaceXXXLarge": "52px",
+ "textDecorationTextLinkPrimary": "none",
+ "textDecorationTextLinkPrimaryHover": "underline",
+ "textDecorationTextLinkSecondary": "underline",
+ "textDecorationTextLinkSecondaryHover": "underline",
+ "widthCheckbox": "20px",
+ "widthCountryFlag": "20px",
+ "widthIconLarge": "32px",
+ "widthIconMedium": "24px",
+ "widthIconSmall": "16px",
+ "widthRadioButton": "20px",
+ "zIndexDefault": "1",
+ "zIndexModal": "825",
+ "zIndexModalOverlay": "800",
+ "zIndexOnTheTop": "900",
+ "zIndexSticky": "100",
+ },
}
}
title="Ryanair"
@@ -750,321 +754,323 @@ exports[`Multiple CarrierLogo with DefaultProp should match snapshot 1`] = `
srcSet="//images.kiwi.com/airlines/32/TO.png?default=airline.png 2x"
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
+ "orbit": Object {
+ "backgroundAlertCritical": "#fae8e8",
+ "backgroundAlertInfo": "#e0f6ff",
+ "backgroundAlertSuccess": "#e7f3e8",
+ "backgroundAlertWarning": "#fcf1cd",
+ "backgroundBody": "#f5f7f9",
+ "backgroundButtonBordered": "transparent",
+ "backgroundButtonBorderedActive": "#fff",
+ "backgroundButtonBorderedHover": "#f5f7f9",
+ "backgroundButtonCritical": "#d21c1c",
+ "backgroundButtonCriticalActive": "#b21717",
+ "backgroundButtonCriticalHover": "#bd1919",
+ "backgroundButtonFacebook": "#3b5998",
+ "backgroundButtonFacebookActive": "#354f88",
+ "backgroundButtonFacebookHover": "#385490",
+ "backgroundButtonGoogle": "#f5f7f9",
+ "backgroundButtonGoogleActive": "#d6dee6",
+ "backgroundButtonGoogleHover": "#e5eaef",
+ "backgroundButtonInfo": "#0176D2",
+ "backgroundButtonInfoActive": "#0064b2",
+ "backgroundButtonInfoHover": "#006abd",
+ "backgroundButtonLinkPrimary": "transparent",
+ "backgroundButtonLinkPrimaryActive": "#d6dee6",
+ "backgroundButtonLinkPrimaryHover": "#e5eaef",
+ "backgroundButtonLinkSecondary": "transparent",
+ "backgroundButtonLinkSecondaryActive": "#d6dee6",
+ "backgroundButtonLinkSecondaryHover": "#e5eaef",
+ "backgroundButtonPrimary": "#00a991",
+ "backgroundButtonPrimaryActive": "#008f7b",
+ "backgroundButtonPrimaryHover": "#009882",
+ "backgroundButtonSecondary": "#e8edf1",
+ "backgroundButtonSecondaryActive": "#cad5df",
+ "backgroundButtonSecondaryHover": "#d9e1e8",
+ "backgroundButtonSuccess": "#46B655",
+ "backgroundButtonSuccessActive": "#3fa34c",
+ "backgroundButtonSuccessHover": "#42ac50",
+ "backgroundButtonWarning": "#f9971e",
+ "backgroundButtonWarningActive": "#e68206",
+ "backgroundButtonWarningHover": "#f48a06",
+ "backgroundCard": "#fff",
+ "backgroundCarrierLogo": "transparent",
+ "backgroundInput": "#fff",
+ "backgroundInputDisabled": "#e8edf1",
+ "backgroundModal": "#fff",
+ "borderColorButtonCriticalBordered": "#d21c1c",
+ "borderColorButtonCriticalBorderedActive": "#b21717",
+ "borderColorButtonCriticalBorderedHover": "#bd1919",
+ "borderColorButtonFacebookBordered": "#3b5998",
+ "borderColorButtonFacebookBorderedActive": "#354f88",
+ "borderColorButtonFacebookBorderedHover": "#385490",
+ "borderColorButtonGoogleBordered": "#46515e",
+ "borderColorButtonGoogleBorderedActive": "#38404b",
+ "borderColorButtonGoogleBorderedHover": "#3f4854",
+ "borderColorButtonInfoBordered": "#0176D2",
+ "borderColorButtonInfoBorderedActive": "#0064b2",
+ "borderColorButtonInfoBorderedHover": "#006abd",
+ "borderColorButtonPrimaryBordered": "#00a991",
+ "borderColorButtonPrimaryBorderedActive": "#008f7b",
+ "borderColorButtonPrimaryBorderedHover": "#009882",
+ "borderColorButtonSecondaryBordered": "#46515e",
+ "borderColorButtonSecondaryBorderedActive": "#38404b",
+ "borderColorButtonSecondaryBorderedHover": "#3f4854",
+ "borderColorButtonSuccessBordered": "#46B655",
+ "borderColorButtonSuccessBorderedActive": "#3fa34c",
+ "borderColorButtonSuccessBorderedHover": "#42ac50",
+ "borderColorButtonWarningBordered": "#f9971e",
+ "borderColorButtonWarningBorderedActive": "#e68206",
+ "borderColorButtonWarningBorderedHover": "#f48a06",
+ "borderColorCard": "#e8edf1",
+ "borderColorInput": "#bac7d5",
+ "borderColorInputActive": "#94a8be",
+ "borderColorInputError": "#d21c1c",
+ "borderColorInputErrorFocus": "#d21c1c",
+ "borderColorInputFocus": "#0176D2",
+ "borderColorInputHover": "#a6b6c8",
+ "borderColorModal": "#e8edf1",
+ "borderColorTableCell": "#bac7d5",
+ "borderRadiusCircle": "50%",
+ "borderRadiusLarge": "6px",
+ "borderRadiusNormal": "3px",
+ "borderRadiusSmall": "2px",
+ "borderStyleCard": "solid",
+ "borderStyleInput": "solid",
+ "borderWidthCard": "1px",
+ "borderWidthInput": "1px",
+ "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
+ "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
+ "colorAlertIconCritical": "#d21c1c",
+ "colorAlertIconInfo": "#0176D2",
+ "colorAlertIconSuccess": "#46B655",
+ "colorAlertIconWarning": "#f9971e",
+ "colorHeading": "#171b1e",
+ "colorHeadingInverted": "#fff",
+ "colorIconAttention": "#171b1e",
+ "colorIconCheckbox": "#00a991",
+ "colorIconCheckboxDisabled": "#bac7d5",
+ "colorIconInput": "#bac7d5",
+ "colorIconPrimary": "#46515e",
+ "colorIconRadioButton": "#00a991",
+ "colorIconRadioButtonDisabled": "#bac7d5",
+ "colorIconSecondary": "#7f91a8",
+ "colorIconTerciary": "#bac7d5",
+ "colorLabelForm": "#46515e",
+ "colorLabelFormFilled": "#7f91a8",
+ "colorPlaceholderInput": "#bac7d5",
+ "colorTextAlertCritical": "#650808",
+ "colorTextAlertInfo": "#07405c",
+ "colorTextAlertSuccess": "#065d12",
+ "colorTextAlertWarning": "#a93610",
+ "colorTextAttention": "#171b1e",
+ "colorTextButtonCritical": "#fff",
+ "colorTextButtonCriticalActive": "#fff",
+ "colorTextButtonCriticalBordered": "#d21c1c",
+ "colorTextButtonCriticalBorderedActive": "#b21717",
+ "colorTextButtonCriticalBorderedHover": "#bd1919",
+ "colorTextButtonCriticalHover": "#fff",
+ "colorTextButtonFacebook": "#fff",
+ "colorTextButtonFacebookActive": "#fff",
+ "colorTextButtonFacebookBordered": "#3b5998",
+ "colorTextButtonFacebookBorderedActive": "#354f88",
+ "colorTextButtonFacebookBorderedHover": "#385490",
+ "colorTextButtonFacebookHover": "#fff",
+ "colorTextButtonFilled": "#fff",
+ "colorTextButtonFilledActive": "#fff",
+ "colorTextButtonFilledHover": "#fff",
+ "colorTextButtonGoogle": "#46515e",
+ "colorTextButtonGoogleActive": "#38404b",
+ "colorTextButtonGoogleBordered": "#46515e",
+ "colorTextButtonGoogleBorderedActive": "#38404b",
+ "colorTextButtonGoogleBorderedHover": "#3f4854",
+ "colorTextButtonGoogleHover": "#3f4854",
+ "colorTextButtonInfo": "#fff",
+ "colorTextButtonInfoActive": "#fff",
+ "colorTextButtonInfoBordered": "#0176D2",
+ "colorTextButtonInfoBorderedActive": "#0064b2",
+ "colorTextButtonInfoBorderedHover": "#006abd",
+ "colorTextButtonInfoHover": "#fff",
+ "colorTextButtonLinkPrimary": "#00a991",
+ "colorTextButtonLinkPrimaryActive": "#008f7b",
+ "colorTextButtonLinkPrimaryHover": "#009882",
+ "colorTextButtonLinkSecondary": "#46515e",
+ "colorTextButtonLinkSecondaryActive": "#38404b",
+ "colorTextButtonLinkSecondaryHover": "#3f4854",
+ "colorTextButtonPrimary": "#fff",
+ "colorTextButtonPrimaryActive": "#fff",
+ "colorTextButtonPrimaryBordered": "#00a991",
+ "colorTextButtonPrimaryBorderedActive": "#008f7b",
+ "colorTextButtonPrimaryBorderedHover": "#009882",
+ "colorTextButtonPrimaryHover": "#fff",
+ "colorTextButtonSecondary": "#46515e",
+ "colorTextButtonSecondaryActive": "#38404b",
+ "colorTextButtonSecondaryBordered": "#46515e",
+ "colorTextButtonSecondaryBorderedActive": "#38404b",
+ "colorTextButtonSecondaryBorderedHover": "#3f4854",
+ "colorTextButtonSecondaryHover": "#3f4854",
+ "colorTextButtonSuccess": "#fff",
+ "colorTextButtonSuccessActive": "#fff",
+ "colorTextButtonSuccessBordered": "#46B655",
+ "colorTextButtonSuccessBorderedActive": "#3fa34c",
+ "colorTextButtonSuccessBorderedHover": "#42ac50",
+ "colorTextButtonSuccessHover": "#fff",
+ "colorTextButtonWarning": "#fff",
+ "colorTextButtonWarningActive": "#fff",
+ "colorTextButtonWarningBordered": "#f9971e",
+ "colorTextButtonWarningBorderedActive": "#e68206",
+ "colorTextButtonWarningBorderedHover": "#f48a06",
+ "colorTextButtonWarningHover": "#fff",
+ "colorTextError": "#d21c1c",
+ "colorTextInfo": "#0176D2",
+ "colorTextInput": "#46515e",
+ "colorTextInputDisabled": "#bac7d5",
+ "colorTextLinkPrimary": "#00a991",
+ "colorTextLinkPrimaryHover": "#00a991",
+ "colorTextLinkSecondary": "#171b1e",
+ "colorTextLinkSecondaryHover": "#00a991",
+ "colorTextPrimary": "#46515e",
+ "colorTextSecondary": "#7f91a8",
+ "durationFast": "0.2s",
+ "durationNormal": "0.3s",
+ "durationSlow": "0.4s",
+ "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
+ "fontSizeButtonLarge": "16px",
+ "fontSizeButtonNormal": "14px",
+ "fontSizeButtonSmall": "12px",
+ "fontSizeHeadingDisplay": "40px",
+ "fontSizeHeadingTitle1": "28px",
+ "fontSizeHeadingTitle2": "22px",
+ "fontSizeHeadingTitle3": "16px",
+ "fontSizeInputNormal": "16px",
+ "fontSizeInputSmall": "14px",
+ "fontSizeLabelForm": "14px",
+ "fontSizeMessage": "14px",
+ "fontSizeMessageForm": "12px",
+ "fontSizeTextLarge": "16px",
+ "fontSizeTextNormal": "14px",
+ "fontSizeTextSmall": "12px",
+ "fontWeightBold": "700",
+ "fontWeightHeadingDisplay": "700",
+ "fontWeightHeadingTitle1": "700",
+ "fontWeightHeadingTitle2": "500",
+ "fontWeightHeadingTitle3": "500",
+ "fontWeightLinks": "500",
+ "fontWeightMedium": "500",
+ "fontWeightNormal": "400",
+ "heightButtonLarge": "52px",
+ "heightButtonNormal": "44px",
+ "heightButtonSmall": "32px",
+ "heightCheckbox": "20px",
+ "heightCountryFlag": "20px",
+ "heightIconLarge": "32px",
+ "heightIconMedium": "24px",
+ "heightIconSmall": "16px",
+ "heightInputLarge": "52px",
+ "heightInputNormal": "44px",
+ "heightInputSmall": "32px",
+ "heightRadioButton": "20px",
+ "lineHeightHeading": "1.2",
+ "lineHeightText": "1.4",
+ "marginButtonIconLarge": "16px",
+ "marginButtonIconNormal": "12px",
+ "marginButtonIconSmall": "8px",
+ "modifierScaleButtonActive": 0.9,
+ "opacityButtonDisabled": "0.3",
+ "opacityCheckboxDisabled": "0.5",
+ "opacityOverlay": "0.8",
+ "opacityRadioButtonDisabled": "0.5",
+ "paddingAlert": "16px",
+ "paddingAlertWithIcon": "12px",
+ "paddingButtonLarge": "28px",
+ "paddingButtonLargeWithIcon": "12px",
+ "paddingButtonNormal": "16px",
+ "paddingButtonNormalWithIcon": "8px",
+ "paddingButtonSmall": "12px",
+ "paddingButtonSmallWithIcon": "8px",
+ "paddingInputNormal": "16px",
+ "paddingInputSmall": "12px",
+ "paletteBlueDark": "#07405c",
+ "paletteBlueLight": "#e0f6ff",
+ "paletteBlueLightActive": "#b0e8fe",
+ "paletteBlueLightHover": "#c8effe",
+ "paletteBlueNormal": "#0176D2",
+ "paletteBlueNormalActive": "#0064b2",
+ "paletteBlueNormalHover": "#006abd",
+ "paletteCloudLight": "#f5f7f9",
+ "paletteCloudLightActive": "#d6dee6",
+ "paletteCloudLightHover": "#e5eaef",
+ "paletteCloudNormal": "#e8edf1",
+ "paletteCloudNormalActive": "#cad5df",
+ "paletteCloudNormalHover": "#d9e1e8",
+ "paletteGreenDark": "#065d12",
+ "paletteGreenLight": "#e7f3e8",
+ "paletteGreenLightActive": "#c7e3c9",
+ "paletteGreenLightHover": "#d7ebd8",
+ "paletteGreenNormal": "#46B655",
+ "paletteGreenNormalActive": "#3fa34c",
+ "paletteGreenNormalHover": "#42ac50",
+ "paletteInkDark": "#171b1e",
+ "paletteInkLight": "#7f91a8",
+ "paletteInkLightActive": "#5f738c",
+ "paletteInkLightHover": "#6d819c",
+ "paletteInkLighter": "#bac7d5",
+ "paletteInkLighterActive": "#94a8be",
+ "paletteInkLighterHover": "#a6b6c8",
+ "paletteInkNormal": "#46515e",
+ "paletteInkNormalActive": "#38404b",
+ "paletteInkNormalHover": "#3f4854",
+ "paletteOrangeDark": "#a93610",
+ "paletteOrangeLight": "#fcf1cd",
+ "paletteOrangeLightActive": "#f9e4a1",
+ "paletteOrangeLightHover": "#faeab7",
+ "paletteOrangeNormal": "#f9971e",
+ "paletteOrangeNormalActive": "#e68206",
+ "paletteOrangeNormalHover": "#f48a06",
+ "paletteProductDark": "#005448",
+ "paletteProductLight": "#9ae5da",
+ "paletteProductLightActive": "#64d7c6",
+ "paletteProductLightHover": "#7fded0",
+ "paletteProductNormal": "#00a991",
+ "paletteProductNormalActive": "#008f7b",
+ "paletteProductNormalHover": "#009882",
+ "paletteRedDark": "#650808",
+ "paletteRedLight": "#fae8e8",
+ "paletteRedLightActive": "#f1c0c0",
+ "paletteRedLightHover": "#f5d4d4",
+ "paletteRedNormal": "#d21c1c",
+ "paletteRedNormalActive": "#b21717",
+ "paletteRedNormalHover": "#bd1919",
+ "paletteSocialFacebook": "#3b5998",
+ "paletteSocialFacebookActive": "#354f88",
+ "paletteSocialFacebookHover": "#385490",
+ "paletteWhite": "#fff",
+ "paletteWhiteActive": "#e5eaef",
+ "paletteWhiteHover": "#f5f7f9",
+ "spaceLarge": "24px",
+ "spaceMedium": "16px",
+ "spaceSmall": "12px",
+ "spaceXLarge": "32px",
+ "spaceXSmall": "8px",
+ "spaceXXLarge": "40px",
+ "spaceXXSmall": "4px",
+ "spaceXXXLarge": "52px",
+ "textDecorationTextLinkPrimary": "none",
+ "textDecorationTextLinkPrimaryHover": "underline",
+ "textDecorationTextLinkSecondary": "underline",
+ "textDecorationTextLinkSecondaryHover": "underline",
+ "widthCheckbox": "20px",
+ "widthCountryFlag": "20px",
+ "widthIconLarge": "32px",
+ "widthIconMedium": "24px",
+ "widthIconSmall": "16px",
+ "widthRadioButton": "20px",
+ "zIndexDefault": "1",
+ "zIndexModal": "825",
+ "zIndexModalOverlay": "800",
+ "zIndexOnTheTop": "900",
+ "zIndexSticky": "100",
+ },
}
}
title="Transavia France"
@@ -1104,321 +1110,323 @@ exports[`Multiple CarrierLogo with DefaultProp should match snapshot 1`] = `
srcSet="//images.kiwi.com/airlines/32/VY.png?default=airline.png 2x"
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
+ "orbit": Object {
+ "backgroundAlertCritical": "#fae8e8",
+ "backgroundAlertInfo": "#e0f6ff",
+ "backgroundAlertSuccess": "#e7f3e8",
+ "backgroundAlertWarning": "#fcf1cd",
+ "backgroundBody": "#f5f7f9",
+ "backgroundButtonBordered": "transparent",
+ "backgroundButtonBorderedActive": "#fff",
+ "backgroundButtonBorderedHover": "#f5f7f9",
+ "backgroundButtonCritical": "#d21c1c",
+ "backgroundButtonCriticalActive": "#b21717",
+ "backgroundButtonCriticalHover": "#bd1919",
+ "backgroundButtonFacebook": "#3b5998",
+ "backgroundButtonFacebookActive": "#354f88",
+ "backgroundButtonFacebookHover": "#385490",
+ "backgroundButtonGoogle": "#f5f7f9",
+ "backgroundButtonGoogleActive": "#d6dee6",
+ "backgroundButtonGoogleHover": "#e5eaef",
+ "backgroundButtonInfo": "#0176D2",
+ "backgroundButtonInfoActive": "#0064b2",
+ "backgroundButtonInfoHover": "#006abd",
+ "backgroundButtonLinkPrimary": "transparent",
+ "backgroundButtonLinkPrimaryActive": "#d6dee6",
+ "backgroundButtonLinkPrimaryHover": "#e5eaef",
+ "backgroundButtonLinkSecondary": "transparent",
+ "backgroundButtonLinkSecondaryActive": "#d6dee6",
+ "backgroundButtonLinkSecondaryHover": "#e5eaef",
+ "backgroundButtonPrimary": "#00a991",
+ "backgroundButtonPrimaryActive": "#008f7b",
+ "backgroundButtonPrimaryHover": "#009882",
+ "backgroundButtonSecondary": "#e8edf1",
+ "backgroundButtonSecondaryActive": "#cad5df",
+ "backgroundButtonSecondaryHover": "#d9e1e8",
+ "backgroundButtonSuccess": "#46B655",
+ "backgroundButtonSuccessActive": "#3fa34c",
+ "backgroundButtonSuccessHover": "#42ac50",
+ "backgroundButtonWarning": "#f9971e",
+ "backgroundButtonWarningActive": "#e68206",
+ "backgroundButtonWarningHover": "#f48a06",
+ "backgroundCard": "#fff",
+ "backgroundCarrierLogo": "transparent",
+ "backgroundInput": "#fff",
+ "backgroundInputDisabled": "#e8edf1",
+ "backgroundModal": "#fff",
+ "borderColorButtonCriticalBordered": "#d21c1c",
+ "borderColorButtonCriticalBorderedActive": "#b21717",
+ "borderColorButtonCriticalBorderedHover": "#bd1919",
+ "borderColorButtonFacebookBordered": "#3b5998",
+ "borderColorButtonFacebookBorderedActive": "#354f88",
+ "borderColorButtonFacebookBorderedHover": "#385490",
+ "borderColorButtonGoogleBordered": "#46515e",
+ "borderColorButtonGoogleBorderedActive": "#38404b",
+ "borderColorButtonGoogleBorderedHover": "#3f4854",
+ "borderColorButtonInfoBordered": "#0176D2",
+ "borderColorButtonInfoBorderedActive": "#0064b2",
+ "borderColorButtonInfoBorderedHover": "#006abd",
+ "borderColorButtonPrimaryBordered": "#00a991",
+ "borderColorButtonPrimaryBorderedActive": "#008f7b",
+ "borderColorButtonPrimaryBorderedHover": "#009882",
+ "borderColorButtonSecondaryBordered": "#46515e",
+ "borderColorButtonSecondaryBorderedActive": "#38404b",
+ "borderColorButtonSecondaryBorderedHover": "#3f4854",
+ "borderColorButtonSuccessBordered": "#46B655",
+ "borderColorButtonSuccessBorderedActive": "#3fa34c",
+ "borderColorButtonSuccessBorderedHover": "#42ac50",
+ "borderColorButtonWarningBordered": "#f9971e",
+ "borderColorButtonWarningBorderedActive": "#e68206",
+ "borderColorButtonWarningBorderedHover": "#f48a06",
+ "borderColorCard": "#e8edf1",
+ "borderColorInput": "#bac7d5",
+ "borderColorInputActive": "#94a8be",
+ "borderColorInputError": "#d21c1c",
+ "borderColorInputErrorFocus": "#d21c1c",
+ "borderColorInputFocus": "#0176D2",
+ "borderColorInputHover": "#a6b6c8",
+ "borderColorModal": "#e8edf1",
+ "borderColorTableCell": "#bac7d5",
+ "borderRadiusCircle": "50%",
+ "borderRadiusLarge": "6px",
+ "borderRadiusNormal": "3px",
+ "borderRadiusSmall": "2px",
+ "borderStyleCard": "solid",
+ "borderStyleInput": "solid",
+ "borderWidthCard": "1px",
+ "borderWidthInput": "1px",
+ "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
+ "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
+ "colorAlertIconCritical": "#d21c1c",
+ "colorAlertIconInfo": "#0176D2",
+ "colorAlertIconSuccess": "#46B655",
+ "colorAlertIconWarning": "#f9971e",
+ "colorHeading": "#171b1e",
+ "colorHeadingInverted": "#fff",
+ "colorIconAttention": "#171b1e",
+ "colorIconCheckbox": "#00a991",
+ "colorIconCheckboxDisabled": "#bac7d5",
+ "colorIconInput": "#bac7d5",
+ "colorIconPrimary": "#46515e",
+ "colorIconRadioButton": "#00a991",
+ "colorIconRadioButtonDisabled": "#bac7d5",
+ "colorIconSecondary": "#7f91a8",
+ "colorIconTerciary": "#bac7d5",
+ "colorLabelForm": "#46515e",
+ "colorLabelFormFilled": "#7f91a8",
+ "colorPlaceholderInput": "#bac7d5",
+ "colorTextAlertCritical": "#650808",
+ "colorTextAlertInfo": "#07405c",
+ "colorTextAlertSuccess": "#065d12",
+ "colorTextAlertWarning": "#a93610",
+ "colorTextAttention": "#171b1e",
+ "colorTextButtonCritical": "#fff",
+ "colorTextButtonCriticalActive": "#fff",
+ "colorTextButtonCriticalBordered": "#d21c1c",
+ "colorTextButtonCriticalBorderedActive": "#b21717",
+ "colorTextButtonCriticalBorderedHover": "#bd1919",
+ "colorTextButtonCriticalHover": "#fff",
+ "colorTextButtonFacebook": "#fff",
+ "colorTextButtonFacebookActive": "#fff",
+ "colorTextButtonFacebookBordered": "#3b5998",
+ "colorTextButtonFacebookBorderedActive": "#354f88",
+ "colorTextButtonFacebookBorderedHover": "#385490",
+ "colorTextButtonFacebookHover": "#fff",
+ "colorTextButtonFilled": "#fff",
+ "colorTextButtonFilledActive": "#fff",
+ "colorTextButtonFilledHover": "#fff",
+ "colorTextButtonGoogle": "#46515e",
+ "colorTextButtonGoogleActive": "#38404b",
+ "colorTextButtonGoogleBordered": "#46515e",
+ "colorTextButtonGoogleBorderedActive": "#38404b",
+ "colorTextButtonGoogleBorderedHover": "#3f4854",
+ "colorTextButtonGoogleHover": "#3f4854",
+ "colorTextButtonInfo": "#fff",
+ "colorTextButtonInfoActive": "#fff",
+ "colorTextButtonInfoBordered": "#0176D2",
+ "colorTextButtonInfoBorderedActive": "#0064b2",
+ "colorTextButtonInfoBorderedHover": "#006abd",
+ "colorTextButtonInfoHover": "#fff",
+ "colorTextButtonLinkPrimary": "#00a991",
+ "colorTextButtonLinkPrimaryActive": "#008f7b",
+ "colorTextButtonLinkPrimaryHover": "#009882",
+ "colorTextButtonLinkSecondary": "#46515e",
+ "colorTextButtonLinkSecondaryActive": "#38404b",
+ "colorTextButtonLinkSecondaryHover": "#3f4854",
+ "colorTextButtonPrimary": "#fff",
+ "colorTextButtonPrimaryActive": "#fff",
+ "colorTextButtonPrimaryBordered": "#00a991",
+ "colorTextButtonPrimaryBorderedActive": "#008f7b",
+ "colorTextButtonPrimaryBorderedHover": "#009882",
+ "colorTextButtonPrimaryHover": "#fff",
+ "colorTextButtonSecondary": "#46515e",
+ "colorTextButtonSecondaryActive": "#38404b",
+ "colorTextButtonSecondaryBordered": "#46515e",
+ "colorTextButtonSecondaryBorderedActive": "#38404b",
+ "colorTextButtonSecondaryBorderedHover": "#3f4854",
+ "colorTextButtonSecondaryHover": "#3f4854",
+ "colorTextButtonSuccess": "#fff",
+ "colorTextButtonSuccessActive": "#fff",
+ "colorTextButtonSuccessBordered": "#46B655",
+ "colorTextButtonSuccessBorderedActive": "#3fa34c",
+ "colorTextButtonSuccessBorderedHover": "#42ac50",
+ "colorTextButtonSuccessHover": "#fff",
+ "colorTextButtonWarning": "#fff",
+ "colorTextButtonWarningActive": "#fff",
+ "colorTextButtonWarningBordered": "#f9971e",
+ "colorTextButtonWarningBorderedActive": "#e68206",
+ "colorTextButtonWarningBorderedHover": "#f48a06",
+ "colorTextButtonWarningHover": "#fff",
+ "colorTextError": "#d21c1c",
+ "colorTextInfo": "#0176D2",
+ "colorTextInput": "#46515e",
+ "colorTextInputDisabled": "#bac7d5",
+ "colorTextLinkPrimary": "#00a991",
+ "colorTextLinkPrimaryHover": "#00a991",
+ "colorTextLinkSecondary": "#171b1e",
+ "colorTextLinkSecondaryHover": "#00a991",
+ "colorTextPrimary": "#46515e",
+ "colorTextSecondary": "#7f91a8",
+ "durationFast": "0.2s",
+ "durationNormal": "0.3s",
+ "durationSlow": "0.4s",
+ "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
+ "fontSizeButtonLarge": "16px",
+ "fontSizeButtonNormal": "14px",
+ "fontSizeButtonSmall": "12px",
+ "fontSizeHeadingDisplay": "40px",
+ "fontSizeHeadingTitle1": "28px",
+ "fontSizeHeadingTitle2": "22px",
+ "fontSizeHeadingTitle3": "16px",
+ "fontSizeInputNormal": "16px",
+ "fontSizeInputSmall": "14px",
+ "fontSizeLabelForm": "14px",
+ "fontSizeMessage": "14px",
+ "fontSizeMessageForm": "12px",
+ "fontSizeTextLarge": "16px",
+ "fontSizeTextNormal": "14px",
+ "fontSizeTextSmall": "12px",
+ "fontWeightBold": "700",
+ "fontWeightHeadingDisplay": "700",
+ "fontWeightHeadingTitle1": "700",
+ "fontWeightHeadingTitle2": "500",
+ "fontWeightHeadingTitle3": "500",
+ "fontWeightLinks": "500",
+ "fontWeightMedium": "500",
+ "fontWeightNormal": "400",
+ "heightButtonLarge": "52px",
+ "heightButtonNormal": "44px",
+ "heightButtonSmall": "32px",
+ "heightCheckbox": "20px",
+ "heightCountryFlag": "20px",
+ "heightIconLarge": "32px",
+ "heightIconMedium": "24px",
+ "heightIconSmall": "16px",
+ "heightInputLarge": "52px",
+ "heightInputNormal": "44px",
+ "heightInputSmall": "32px",
+ "heightRadioButton": "20px",
+ "lineHeightHeading": "1.2",
+ "lineHeightText": "1.4",
+ "marginButtonIconLarge": "16px",
+ "marginButtonIconNormal": "12px",
+ "marginButtonIconSmall": "8px",
+ "modifierScaleButtonActive": 0.9,
+ "opacityButtonDisabled": "0.3",
+ "opacityCheckboxDisabled": "0.5",
+ "opacityOverlay": "0.8",
+ "opacityRadioButtonDisabled": "0.5",
+ "paddingAlert": "16px",
+ "paddingAlertWithIcon": "12px",
+ "paddingButtonLarge": "28px",
+ "paddingButtonLargeWithIcon": "12px",
+ "paddingButtonNormal": "16px",
+ "paddingButtonNormalWithIcon": "8px",
+ "paddingButtonSmall": "12px",
+ "paddingButtonSmallWithIcon": "8px",
+ "paddingInputNormal": "16px",
+ "paddingInputSmall": "12px",
+ "paletteBlueDark": "#07405c",
+ "paletteBlueLight": "#e0f6ff",
+ "paletteBlueLightActive": "#b0e8fe",
+ "paletteBlueLightHover": "#c8effe",
+ "paletteBlueNormal": "#0176D2",
+ "paletteBlueNormalActive": "#0064b2",
+ "paletteBlueNormalHover": "#006abd",
+ "paletteCloudLight": "#f5f7f9",
+ "paletteCloudLightActive": "#d6dee6",
+ "paletteCloudLightHover": "#e5eaef",
+ "paletteCloudNormal": "#e8edf1",
+ "paletteCloudNormalActive": "#cad5df",
+ "paletteCloudNormalHover": "#d9e1e8",
+ "paletteGreenDark": "#065d12",
+ "paletteGreenLight": "#e7f3e8",
+ "paletteGreenLightActive": "#c7e3c9",
+ "paletteGreenLightHover": "#d7ebd8",
+ "paletteGreenNormal": "#46B655",
+ "paletteGreenNormalActive": "#3fa34c",
+ "paletteGreenNormalHover": "#42ac50",
+ "paletteInkDark": "#171b1e",
+ "paletteInkLight": "#7f91a8",
+ "paletteInkLightActive": "#5f738c",
+ "paletteInkLightHover": "#6d819c",
+ "paletteInkLighter": "#bac7d5",
+ "paletteInkLighterActive": "#94a8be",
+ "paletteInkLighterHover": "#a6b6c8",
+ "paletteInkNormal": "#46515e",
+ "paletteInkNormalActive": "#38404b",
+ "paletteInkNormalHover": "#3f4854",
+ "paletteOrangeDark": "#a93610",
+ "paletteOrangeLight": "#fcf1cd",
+ "paletteOrangeLightActive": "#f9e4a1",
+ "paletteOrangeLightHover": "#faeab7",
+ "paletteOrangeNormal": "#f9971e",
+ "paletteOrangeNormalActive": "#e68206",
+ "paletteOrangeNormalHover": "#f48a06",
+ "paletteProductDark": "#005448",
+ "paletteProductLight": "#9ae5da",
+ "paletteProductLightActive": "#64d7c6",
+ "paletteProductLightHover": "#7fded0",
+ "paletteProductNormal": "#00a991",
+ "paletteProductNormalActive": "#008f7b",
+ "paletteProductNormalHover": "#009882",
+ "paletteRedDark": "#650808",
+ "paletteRedLight": "#fae8e8",
+ "paletteRedLightActive": "#f1c0c0",
+ "paletteRedLightHover": "#f5d4d4",
+ "paletteRedNormal": "#d21c1c",
+ "paletteRedNormalActive": "#b21717",
+ "paletteRedNormalHover": "#bd1919",
+ "paletteSocialFacebook": "#3b5998",
+ "paletteSocialFacebookActive": "#354f88",
+ "paletteSocialFacebookHover": "#385490",
+ "paletteWhite": "#fff",
+ "paletteWhiteActive": "#e5eaef",
+ "paletteWhiteHover": "#f5f7f9",
+ "spaceLarge": "24px",
+ "spaceMedium": "16px",
+ "spaceSmall": "12px",
+ "spaceXLarge": "32px",
+ "spaceXSmall": "8px",
+ "spaceXXLarge": "40px",
+ "spaceXXSmall": "4px",
+ "spaceXXXLarge": "52px",
+ "textDecorationTextLinkPrimary": "none",
+ "textDecorationTextLinkPrimaryHover": "underline",
+ "textDecorationTextLinkSecondary": "underline",
+ "textDecorationTextLinkSecondaryHover": "underline",
+ "widthCheckbox": "20px",
+ "widthCountryFlag": "20px",
+ "widthIconLarge": "32px",
+ "widthIconMedium": "24px",
+ "widthIconSmall": "16px",
+ "widthRadioButton": "20px",
+ "zIndexDefault": "1",
+ "zIndexModal": "825",
+ "zIndexModalOverlay": "800",
+ "zIndexOnTheTop": "900",
+ "zIndexSticky": "100",
+ },
}
}
title="Vueling"
@@ -1458,321 +1466,323 @@ exports[`Multiple CarrierLogo with DefaultProp should match snapshot 1`] = `
srcSet="//images.kiwi.com/airlines/32/OK.png?default=airline.png 2x"
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
+ "orbit": Object {
+ "backgroundAlertCritical": "#fae8e8",
+ "backgroundAlertInfo": "#e0f6ff",
+ "backgroundAlertSuccess": "#e7f3e8",
+ "backgroundAlertWarning": "#fcf1cd",
+ "backgroundBody": "#f5f7f9",
+ "backgroundButtonBordered": "transparent",
+ "backgroundButtonBorderedActive": "#fff",
+ "backgroundButtonBorderedHover": "#f5f7f9",
+ "backgroundButtonCritical": "#d21c1c",
+ "backgroundButtonCriticalActive": "#b21717",
+ "backgroundButtonCriticalHover": "#bd1919",
+ "backgroundButtonFacebook": "#3b5998",
+ "backgroundButtonFacebookActive": "#354f88",
+ "backgroundButtonFacebookHover": "#385490",
+ "backgroundButtonGoogle": "#f5f7f9",
+ "backgroundButtonGoogleActive": "#d6dee6",
+ "backgroundButtonGoogleHover": "#e5eaef",
+ "backgroundButtonInfo": "#0176D2",
+ "backgroundButtonInfoActive": "#0064b2",
+ "backgroundButtonInfoHover": "#006abd",
+ "backgroundButtonLinkPrimary": "transparent",
+ "backgroundButtonLinkPrimaryActive": "#d6dee6",
+ "backgroundButtonLinkPrimaryHover": "#e5eaef",
+ "backgroundButtonLinkSecondary": "transparent",
+ "backgroundButtonLinkSecondaryActive": "#d6dee6",
+ "backgroundButtonLinkSecondaryHover": "#e5eaef",
+ "backgroundButtonPrimary": "#00a991",
+ "backgroundButtonPrimaryActive": "#008f7b",
+ "backgroundButtonPrimaryHover": "#009882",
+ "backgroundButtonSecondary": "#e8edf1",
+ "backgroundButtonSecondaryActive": "#cad5df",
+ "backgroundButtonSecondaryHover": "#d9e1e8",
+ "backgroundButtonSuccess": "#46B655",
+ "backgroundButtonSuccessActive": "#3fa34c",
+ "backgroundButtonSuccessHover": "#42ac50",
+ "backgroundButtonWarning": "#f9971e",
+ "backgroundButtonWarningActive": "#e68206",
+ "backgroundButtonWarningHover": "#f48a06",
+ "backgroundCard": "#fff",
+ "backgroundCarrierLogo": "transparent",
+ "backgroundInput": "#fff",
+ "backgroundInputDisabled": "#e8edf1",
+ "backgroundModal": "#fff",
+ "borderColorButtonCriticalBordered": "#d21c1c",
+ "borderColorButtonCriticalBorderedActive": "#b21717",
+ "borderColorButtonCriticalBorderedHover": "#bd1919",
+ "borderColorButtonFacebookBordered": "#3b5998",
+ "borderColorButtonFacebookBorderedActive": "#354f88",
+ "borderColorButtonFacebookBorderedHover": "#385490",
+ "borderColorButtonGoogleBordered": "#46515e",
+ "borderColorButtonGoogleBorderedActive": "#38404b",
+ "borderColorButtonGoogleBorderedHover": "#3f4854",
+ "borderColorButtonInfoBordered": "#0176D2",
+ "borderColorButtonInfoBorderedActive": "#0064b2",
+ "borderColorButtonInfoBorderedHover": "#006abd",
+ "borderColorButtonPrimaryBordered": "#00a991",
+ "borderColorButtonPrimaryBorderedActive": "#008f7b",
+ "borderColorButtonPrimaryBorderedHover": "#009882",
+ "borderColorButtonSecondaryBordered": "#46515e",
+ "borderColorButtonSecondaryBorderedActive": "#38404b",
+ "borderColorButtonSecondaryBorderedHover": "#3f4854",
+ "borderColorButtonSuccessBordered": "#46B655",
+ "borderColorButtonSuccessBorderedActive": "#3fa34c",
+ "borderColorButtonSuccessBorderedHover": "#42ac50",
+ "borderColorButtonWarningBordered": "#f9971e",
+ "borderColorButtonWarningBorderedActive": "#e68206",
+ "borderColorButtonWarningBorderedHover": "#f48a06",
+ "borderColorCard": "#e8edf1",
+ "borderColorInput": "#bac7d5",
+ "borderColorInputActive": "#94a8be",
+ "borderColorInputError": "#d21c1c",
+ "borderColorInputErrorFocus": "#d21c1c",
+ "borderColorInputFocus": "#0176D2",
+ "borderColorInputHover": "#a6b6c8",
+ "borderColorModal": "#e8edf1",
+ "borderColorTableCell": "#bac7d5",
+ "borderRadiusCircle": "50%",
+ "borderRadiusLarge": "6px",
+ "borderRadiusNormal": "3px",
+ "borderRadiusSmall": "2px",
+ "borderStyleCard": "solid",
+ "borderStyleInput": "solid",
+ "borderWidthCard": "1px",
+ "borderWidthInput": "1px",
+ "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
+ "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
+ "colorAlertIconCritical": "#d21c1c",
+ "colorAlertIconInfo": "#0176D2",
+ "colorAlertIconSuccess": "#46B655",
+ "colorAlertIconWarning": "#f9971e",
+ "colorHeading": "#171b1e",
+ "colorHeadingInverted": "#fff",
+ "colorIconAttention": "#171b1e",
+ "colorIconCheckbox": "#00a991",
+ "colorIconCheckboxDisabled": "#bac7d5",
+ "colorIconInput": "#bac7d5",
+ "colorIconPrimary": "#46515e",
+ "colorIconRadioButton": "#00a991",
+ "colorIconRadioButtonDisabled": "#bac7d5",
+ "colorIconSecondary": "#7f91a8",
+ "colorIconTerciary": "#bac7d5",
+ "colorLabelForm": "#46515e",
+ "colorLabelFormFilled": "#7f91a8",
+ "colorPlaceholderInput": "#bac7d5",
+ "colorTextAlertCritical": "#650808",
+ "colorTextAlertInfo": "#07405c",
+ "colorTextAlertSuccess": "#065d12",
+ "colorTextAlertWarning": "#a93610",
+ "colorTextAttention": "#171b1e",
+ "colorTextButtonCritical": "#fff",
+ "colorTextButtonCriticalActive": "#fff",
+ "colorTextButtonCriticalBordered": "#d21c1c",
+ "colorTextButtonCriticalBorderedActive": "#b21717",
+ "colorTextButtonCriticalBorderedHover": "#bd1919",
+ "colorTextButtonCriticalHover": "#fff",
+ "colorTextButtonFacebook": "#fff",
+ "colorTextButtonFacebookActive": "#fff",
+ "colorTextButtonFacebookBordered": "#3b5998",
+ "colorTextButtonFacebookBorderedActive": "#354f88",
+ "colorTextButtonFacebookBorderedHover": "#385490",
+ "colorTextButtonFacebookHover": "#fff",
+ "colorTextButtonFilled": "#fff",
+ "colorTextButtonFilledActive": "#fff",
+ "colorTextButtonFilledHover": "#fff",
+ "colorTextButtonGoogle": "#46515e",
+ "colorTextButtonGoogleActive": "#38404b",
+ "colorTextButtonGoogleBordered": "#46515e",
+ "colorTextButtonGoogleBorderedActive": "#38404b",
+ "colorTextButtonGoogleBorderedHover": "#3f4854",
+ "colorTextButtonGoogleHover": "#3f4854",
+ "colorTextButtonInfo": "#fff",
+ "colorTextButtonInfoActive": "#fff",
+ "colorTextButtonInfoBordered": "#0176D2",
+ "colorTextButtonInfoBorderedActive": "#0064b2",
+ "colorTextButtonInfoBorderedHover": "#006abd",
+ "colorTextButtonInfoHover": "#fff",
+ "colorTextButtonLinkPrimary": "#00a991",
+ "colorTextButtonLinkPrimaryActive": "#008f7b",
+ "colorTextButtonLinkPrimaryHover": "#009882",
+ "colorTextButtonLinkSecondary": "#46515e",
+ "colorTextButtonLinkSecondaryActive": "#38404b",
+ "colorTextButtonLinkSecondaryHover": "#3f4854",
+ "colorTextButtonPrimary": "#fff",
+ "colorTextButtonPrimaryActive": "#fff",
+ "colorTextButtonPrimaryBordered": "#00a991",
+ "colorTextButtonPrimaryBorderedActive": "#008f7b",
+ "colorTextButtonPrimaryBorderedHover": "#009882",
+ "colorTextButtonPrimaryHover": "#fff",
+ "colorTextButtonSecondary": "#46515e",
+ "colorTextButtonSecondaryActive": "#38404b",
+ "colorTextButtonSecondaryBordered": "#46515e",
+ "colorTextButtonSecondaryBorderedActive": "#38404b",
+ "colorTextButtonSecondaryBorderedHover": "#3f4854",
+ "colorTextButtonSecondaryHover": "#3f4854",
+ "colorTextButtonSuccess": "#fff",
+ "colorTextButtonSuccessActive": "#fff",
+ "colorTextButtonSuccessBordered": "#46B655",
+ "colorTextButtonSuccessBorderedActive": "#3fa34c",
+ "colorTextButtonSuccessBorderedHover": "#42ac50",
+ "colorTextButtonSuccessHover": "#fff",
+ "colorTextButtonWarning": "#fff",
+ "colorTextButtonWarningActive": "#fff",
+ "colorTextButtonWarningBordered": "#f9971e",
+ "colorTextButtonWarningBorderedActive": "#e68206",
+ "colorTextButtonWarningBorderedHover": "#f48a06",
+ "colorTextButtonWarningHover": "#fff",
+ "colorTextError": "#d21c1c",
+ "colorTextInfo": "#0176D2",
+ "colorTextInput": "#46515e",
+ "colorTextInputDisabled": "#bac7d5",
+ "colorTextLinkPrimary": "#00a991",
+ "colorTextLinkPrimaryHover": "#00a991",
+ "colorTextLinkSecondary": "#171b1e",
+ "colorTextLinkSecondaryHover": "#00a991",
+ "colorTextPrimary": "#46515e",
+ "colorTextSecondary": "#7f91a8",
+ "durationFast": "0.2s",
+ "durationNormal": "0.3s",
+ "durationSlow": "0.4s",
+ "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
+ "fontSizeButtonLarge": "16px",
+ "fontSizeButtonNormal": "14px",
+ "fontSizeButtonSmall": "12px",
+ "fontSizeHeadingDisplay": "40px",
+ "fontSizeHeadingTitle1": "28px",
+ "fontSizeHeadingTitle2": "22px",
+ "fontSizeHeadingTitle3": "16px",
+ "fontSizeInputNormal": "16px",
+ "fontSizeInputSmall": "14px",
+ "fontSizeLabelForm": "14px",
+ "fontSizeMessage": "14px",
+ "fontSizeMessageForm": "12px",
+ "fontSizeTextLarge": "16px",
+ "fontSizeTextNormal": "14px",
+ "fontSizeTextSmall": "12px",
+ "fontWeightBold": "700",
+ "fontWeightHeadingDisplay": "700",
+ "fontWeightHeadingTitle1": "700",
+ "fontWeightHeadingTitle2": "500",
+ "fontWeightHeadingTitle3": "500",
+ "fontWeightLinks": "500",
+ "fontWeightMedium": "500",
+ "fontWeightNormal": "400",
+ "heightButtonLarge": "52px",
+ "heightButtonNormal": "44px",
+ "heightButtonSmall": "32px",
+ "heightCheckbox": "20px",
+ "heightCountryFlag": "20px",
+ "heightIconLarge": "32px",
+ "heightIconMedium": "24px",
+ "heightIconSmall": "16px",
+ "heightInputLarge": "52px",
+ "heightInputNormal": "44px",
+ "heightInputSmall": "32px",
+ "heightRadioButton": "20px",
+ "lineHeightHeading": "1.2",
+ "lineHeightText": "1.4",
+ "marginButtonIconLarge": "16px",
+ "marginButtonIconNormal": "12px",
+ "marginButtonIconSmall": "8px",
+ "modifierScaleButtonActive": 0.9,
+ "opacityButtonDisabled": "0.3",
+ "opacityCheckboxDisabled": "0.5",
+ "opacityOverlay": "0.8",
+ "opacityRadioButtonDisabled": "0.5",
+ "paddingAlert": "16px",
+ "paddingAlertWithIcon": "12px",
+ "paddingButtonLarge": "28px",
+ "paddingButtonLargeWithIcon": "12px",
+ "paddingButtonNormal": "16px",
+ "paddingButtonNormalWithIcon": "8px",
+ "paddingButtonSmall": "12px",
+ "paddingButtonSmallWithIcon": "8px",
+ "paddingInputNormal": "16px",
+ "paddingInputSmall": "12px",
+ "paletteBlueDark": "#07405c",
+ "paletteBlueLight": "#e0f6ff",
+ "paletteBlueLightActive": "#b0e8fe",
+ "paletteBlueLightHover": "#c8effe",
+ "paletteBlueNormal": "#0176D2",
+ "paletteBlueNormalActive": "#0064b2",
+ "paletteBlueNormalHover": "#006abd",
+ "paletteCloudLight": "#f5f7f9",
+ "paletteCloudLightActive": "#d6dee6",
+ "paletteCloudLightHover": "#e5eaef",
+ "paletteCloudNormal": "#e8edf1",
+ "paletteCloudNormalActive": "#cad5df",
+ "paletteCloudNormalHover": "#d9e1e8",
+ "paletteGreenDark": "#065d12",
+ "paletteGreenLight": "#e7f3e8",
+ "paletteGreenLightActive": "#c7e3c9",
+ "paletteGreenLightHover": "#d7ebd8",
+ "paletteGreenNormal": "#46B655",
+ "paletteGreenNormalActive": "#3fa34c",
+ "paletteGreenNormalHover": "#42ac50",
+ "paletteInkDark": "#171b1e",
+ "paletteInkLight": "#7f91a8",
+ "paletteInkLightActive": "#5f738c",
+ "paletteInkLightHover": "#6d819c",
+ "paletteInkLighter": "#bac7d5",
+ "paletteInkLighterActive": "#94a8be",
+ "paletteInkLighterHover": "#a6b6c8",
+ "paletteInkNormal": "#46515e",
+ "paletteInkNormalActive": "#38404b",
+ "paletteInkNormalHover": "#3f4854",
+ "paletteOrangeDark": "#a93610",
+ "paletteOrangeLight": "#fcf1cd",
+ "paletteOrangeLightActive": "#f9e4a1",
+ "paletteOrangeLightHover": "#faeab7",
+ "paletteOrangeNormal": "#f9971e",
+ "paletteOrangeNormalActive": "#e68206",
+ "paletteOrangeNormalHover": "#f48a06",
+ "paletteProductDark": "#005448",
+ "paletteProductLight": "#9ae5da",
+ "paletteProductLightActive": "#64d7c6",
+ "paletteProductLightHover": "#7fded0",
+ "paletteProductNormal": "#00a991",
+ "paletteProductNormalActive": "#008f7b",
+ "paletteProductNormalHover": "#009882",
+ "paletteRedDark": "#650808",
+ "paletteRedLight": "#fae8e8",
+ "paletteRedLightActive": "#f1c0c0",
+ "paletteRedLightHover": "#f5d4d4",
+ "paletteRedNormal": "#d21c1c",
+ "paletteRedNormalActive": "#b21717",
+ "paletteRedNormalHover": "#bd1919",
+ "paletteSocialFacebook": "#3b5998",
+ "paletteSocialFacebookActive": "#354f88",
+ "paletteSocialFacebookHover": "#385490",
+ "paletteWhite": "#fff",
+ "paletteWhiteActive": "#e5eaef",
+ "paletteWhiteHover": "#f5f7f9",
+ "spaceLarge": "24px",
+ "spaceMedium": "16px",
+ "spaceSmall": "12px",
+ "spaceXLarge": "32px",
+ "spaceXSmall": "8px",
+ "spaceXXLarge": "40px",
+ "spaceXXSmall": "4px",
+ "spaceXXXLarge": "52px",
+ "textDecorationTextLinkPrimary": "none",
+ "textDecorationTextLinkPrimaryHover": "underline",
+ "textDecorationTextLinkSecondary": "underline",
+ "textDecorationTextLinkSecondaryHover": "underline",
+ "widthCheckbox": "20px",
+ "widthCountryFlag": "20px",
+ "widthIconLarge": "32px",
+ "widthIconMedium": "24px",
+ "widthIconSmall": "16px",
+ "widthRadioButton": "20px",
+ "zIndexDefault": "1",
+ "zIndexModal": "825",
+ "zIndexModalOverlay": "800",
+ "zIndexOnTheTop": "900",
+ "zIndexSticky": "100",
+ },
}
}
title="Czech Airlines"
diff --git a/src/CarrierLogo/__tests__/index.test.js b/src/CarrierLogo/__tests__/index.test.js
index c8ba53fcfe..e972eabd70 100644
--- a/src/CarrierLogo/__tests__/index.test.js
+++ b/src/CarrierLogo/__tests__/index.test.js
@@ -2,7 +2,7 @@
import * as React from "react";
import { mount } from "enzyme";
-import CarrierLogo from "../CarrierLogo";
+import CarrierLogo from "../index";
const carriers = [
{ code: "FR", name: "Ryanair" },
diff --git a/src/CarrierLogo/index.js b/src/CarrierLogo/index.js
index a7af102eca..561f1ba972 100644
--- a/src/CarrierLogo/index.js
+++ b/src/CarrierLogo/index.js
@@ -1,6 +1,90 @@
// @flow
-import { withTheme } from "theming";
+import * as React from "react";
+import styled from "styled-components";
-import CarrierLogo from "./CarrierLogo";
+import defaultTokens from "../defaultTokens";
+import { SIZE_OPTIONS, baseURL } from "./consts";
-export default withTheme(CarrierLogo);
+import type { Props } from "./index";
+
+const StyledCarrierLogo = styled.div`
+ background-color: ${({ theme }) => theme.orbit.backgroundCarrierLogo};
+ height: ${({ theme, tokens, size, carriers }) =>
+ carriers.length > 1 ? `${theme.orbit.heightIconLarge}` : `${tokens.renderSizes[size]}px`};
+ width: ${({ tokens, theme, size, carriers }) =>
+ carriers.length > 1 ? `${theme.orbit.widthIconLarge}` : `${tokens.renderSizes[size]}px`};
+ display: flex;
+ flex-direction: ${({ carriers }) => (carriers.length > 1 ? "column" : "row")};
+ flex-wrap: wrap;
+ align-content: space-between;
+ justify-content: space-between;
+`;
+
+StyledCarrierLogo.defaultProps = {
+ theme: defaultTokens,
+};
+
+const StyledImage = styled.img`
+ height: ${({ imageSize }) => imageSize}px;
+ width: ${({ imageSize }) => imageSize}px;
+ background-color: ${({ theme }) => theme.orbit.backgroundCarrierLogo};
+ border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
+ overflow: hidden;
+ &:last-child {
+ align-self: flex-end;
+ }
+`;
+
+StyledImage.defaultProps = {
+ theme: defaultTokens,
+};
+
+const CarrierLogo = (props: Props) => {
+ const { size = SIZE_OPTIONS.LARGE, carriers, theme = defaultTokens } = props;
+ const tokens = {
+ directorySizes: {
+ [SIZE_OPTIONS.SMALL]: 16,
+ [SIZE_OPTIONS.MEDIUM]: 32,
+ [SIZE_OPTIONS.LARGE]: 32,
+ },
+ retinaSizes: {
+ [SIZE_OPTIONS.SMALL]: 32,
+ [SIZE_OPTIONS.MEDIUM]: 64,
+ [SIZE_OPTIONS.LARGE]: 64,
+ },
+ renderSizes: {
+ [SIZE_OPTIONS.SMALL]: parseInt(theme.orbit.heightIconSmall, 10),
+ [SIZE_OPTIONS.MEDIUM]: parseInt(theme.orbit.heightIconMedium, 10),
+ [SIZE_OPTIONS.LARGE]: parseInt(theme.orbit.heightIconLarge, 10),
+ },
+ };
+ const sourceSize =
+ carriers.length > 1 ? tokens.directorySizes[SIZE_OPTIONS.SMALL] : tokens.directorySizes[size];
+ const imageSize =
+ carriers.length > 1 ? tokens.renderSizes[SIZE_OPTIONS.SMALL] : tokens.renderSizes[size];
+ const srcSetSize =
+ carriers.length > 1 ? tokens.retinaSizes[SIZE_OPTIONS.SMALL] : tokens.retinaSizes[size];
+
+ return (
+
+ {carriers.slice(0, 4).map(carrierImage => {
+ const type = carrierImage.type === undefined ? "airline" : carrierImage.type;
+ return (
+ 2 ? 1 : 0)}
+ tokens={tokens}
+ />
+ );
+ })}
+
+ );
+};
+
+export default CarrierLogo;
diff --git a/src/CarrierLogo/index.js.flow b/src/CarrierLogo/index.js.flow
index 45fa9ac4fc..9baaf689ae 100644
--- a/src/CarrierLogo/index.js.flow
+++ b/src/CarrierLogo/index.js.flow
@@ -1,4 +1,12 @@
// @flow
-import type { Props } from "./CarrierLogo";
+import defaultTokens from "../defaultTokens";
+
+type Carrier = { code: string, name: string, type?: "airline" | "bus" | "train" };
+
+export type Props = {|
+ +size?: "small" | "medium" | "large",
+ +carriers: Carrier[],
+ +theme?: typeof defaultTokens,
+|};
declare export default React$ComponentType;
diff --git a/src/Checkbox/Checkbox.js b/src/Checkbox/Checkbox.js
deleted file mode 100644
index c9aa95c5c3..0000000000
--- a/src/Checkbox/Checkbox.js
+++ /dev/null
@@ -1,134 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-import Check from "../icons/Check";
-import type { Props } from "./Checkbox";
-
-const IconContainer = styled.div`
- position: relative;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: ${({ theme }) => theme.backgroundInput};
- height: ${({ theme }) => theme.heightCheckbox};
- width: ${({ theme }) => theme.widthCheckbox};
- border-radius: ${({ theme }) => theme.borderRadiusNormal};
- overflow: hidden;
- border: 1px solid ${({ tokens }) => tokens.borderColor};
- transform: scale(1);
- transition: all ${({ theme }) => theme.durationFast} ease-in-out;
-
- & > svg {
- visibility: hidden;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 16px;
- height: 16px;
- }
-`;
-
-const TextContainer = styled.div`
- display: flex;
- flex-direction: column;
- margin-left: ${({ theme }) => theme.spaceXSmall};
-`;
-
-const Info = styled.span`
- font-size: ${({ theme }) => theme.fontSizeMessageForm};
- color: ${({ theme }) => theme.paletteInkLight}; // TODO create token
- line-height: ${({ theme }) => theme.lineHeightText};
-`;
-
-const LabelText = styled.span`
- font-weight: ${({ theme }) => theme.fontWeightNormal};
- font-size: ${({ theme }) => theme.fontSizeLabelForm};
- color: ${({ theme }) => theme.colorLabelForm};
- height: ${({ theme }) => theme.heightCheckbox};
- line-height: ${({ theme }) => theme.heightCheckbox};
-`;
-
-const Input = styled.input`
- visibility: hidden;
- display: none;
-
- &:checked ~ ${TextContainer} > ${LabelText} {
- font-weight: ${({ theme }) => theme.fontWeightMedium};
- }
-
- &:checked + ${IconContainer} > svg {
- visibility: visible;
- }
-`;
-
-const Label = styled(({ tokens, disabled, theme, type, ...props }) => (
- {props.children}
-))`
- font-family: ${({ theme }) => theme.fontFamily};
- display: flex;
- flex-direction: row;
- align-items: self-start;
- opacity: ${({ disabled, theme }) => (disabled ? theme.opacityCheckboxDisabled : "1")};
- cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
- position: relative;
-
- &:hover ${IconContainer} {
- border-color: ${({ disabled, theme }) =>
- disabled ? theme.borderColorInputHover : theme.paletteInkLight}; // TODO create token
- }
- &:active ${IconContainer} {
- border-color: ${({ disabled, theme, tokens }) =>
- disabled ? tokens.borderColor : theme.paletteInkNormal}; // TODO create token
- transform: ${({ disabled, theme }) => !disabled && `scale(${theme.modifierScaleButtonActive})`};
- }
- &:focus {
- outline: 0;
- & ${IconContainer} {
- box-shadow: 0 0 3px ${({ theme }) => theme.paletteBlueNormal}; // TODO create token
- }
- }
-`;
-
-const Checkbox = (props: Props) => {
- const {
- label,
- value,
- hasError = false,
- disabled = false,
- checked = false,
- onChange,
- theme = defaultTokens,
- info,
- } = props;
-
- const tokens = {
- borderColor:
- hasError && !disabled && !checked ? theme.borderColorInputError : theme.borderColorInput,
- iconColor: disabled ? theme.colorIconCheckboxDisabled : theme.colorIconCheckbox,
- };
-
- return (
-
-
-
-
- {label && {label} }
- {info && {info} }
-
-
- );
-};
-
-export default Checkbox;
diff --git a/src/Checkbox/Checkbox.js.flow b/src/Checkbox/Checkbox.js.flow
deleted file mode 100644
index f80dc4aaf7..0000000000
--- a/src/Checkbox/Checkbox.js.flow
+++ /dev/null
@@ -1,15 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-export type Props = {|
- +label: string,
- +value?: string,
- +hasError?: boolean,
- +disabled?: boolean,
- +checked?: boolean,
- +info?: React$Node,
- +onChange?: (SyntheticEvent) => void | Promise,
- +theme?: typeof defaultTokens,
-|};
-
-declare export default React$ComponentType;
diff --git a/src/Checkbox/Checkbox.stories.js b/src/Checkbox/Checkbox.stories.js
index 95d956076e..7eef81ae80 100644
--- a/src/Checkbox/Checkbox.stories.js
+++ b/src/Checkbox/Checkbox.stories.js
@@ -7,7 +7,7 @@ import styles from "@sambego/storybook-styles";
import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, text, boolean } from "@storybook/addon-knobs/react";
-import Checkbox from "./Checkbox";
+import Checkbox from "./index";
setAddon(chaptersAddon);
diff --git a/src/Checkbox/__tests__/__snapshots__/index.test.js.snap b/src/Checkbox/__tests__/__snapshots__/index.test.js.snap
index b7688a4c2b..e4bc4e007e 100644
--- a/src/Checkbox/__tests__/__snapshots__/index.test.js.snap
+++ b/src/Checkbox/__tests__/__snapshots__/index.test.js.snap
@@ -5,348 +5,7 @@ exports[`Default CheckBox should match snapshot 1`] = `
disabled={false}
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
- }
- }
- tokens={
- Object {
- "borderColor": "#bac7d5",
- "iconColor": "#00a991",
- }
- }
->
-
+
-
-
-
+
+
diff --git a/src/Checkbox/__tests__/index.test.js b/src/Checkbox/__tests__/index.test.js
index d9f3b8f36f..3780f4629b 100644
--- a/src/Checkbox/__tests__/index.test.js
+++ b/src/Checkbox/__tests__/index.test.js
@@ -3,7 +3,7 @@
import * as React from "react";
import { shallow } from "enzyme";
-import CheckBox from "../Checkbox";
+import CheckBox from "../index";
const label = "Checkbox";
const onChange = jest.fn();
diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
index 5a6c9a45ad..ad84212522 100644
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@@ -1,6 +1,163 @@
// @flow
-import { withTheme } from "theming";
+import * as React from "react";
+import styled from "styled-components";
-import Checkbox from "./Checkbox";
+import defaultTokens from "../defaultTokens";
+import Check from "../icons/Check";
-export default withTheme(Checkbox);
+import type { Props } from "./index";
+
+const IconContainer = styled.div`
+ position: relative;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: ${({ theme }) => theme.orbit.backgroundInput};
+ height: ${({ theme }) => theme.orbit.heightCheckbox};
+ width: ${({ theme }) => theme.orbit.widthCheckbox};
+ border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
+ overflow: hidden;
+ border: 1px solid ${({ tokens }) => tokens.borderColor};
+ transform: scale(1);
+ transition: all ${({ theme }) => theme.orbit.durationFast} ease-in-out;
+
+ & > svg {
+ visibility: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 16px;
+ height: 16px;
+ }
+`;
+
+IconContainer.defaultProps = {
+ theme: defaultTokens,
+};
+
+const TextContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ margin-left: ${({ theme }) => theme.orbit.spaceXSmall};
+`;
+
+TextContainer.defaultProps = {
+ theme: defaultTokens,
+};
+
+const Info = styled.span`
+ font-size: ${({ theme }) => theme.orbit.fontSizeMessageForm};
+ color: ${({ theme }) => theme.orbit.paletteInkLight}; // TODO create token
+ line-height: ${({ theme }) => theme.orbit.lineHeightText};
+`;
+
+Info.defaultProps = {
+ theme: defaultTokens,
+};
+
+const LabelText = styled.span`
+ font-weight: ${({ theme }) => theme.orbit.fontWeightNormal};
+ font-size: ${({ theme }) => theme.orbit.fontSizeLabelForm};
+ color: ${({ theme }) => theme.orbit.colorLabelForm};
+ height: ${({ theme }) => theme.orbit.heightCheckbox};
+ line-height: ${({ theme }) => theme.orbit.heightCheckbox};
+`;
+
+LabelText.defaultProps = {
+ theme: defaultTokens,
+};
+
+const Input = styled.input`
+ visibility: hidden;
+ display: none;
+
+ &:checked ~ ${TextContainer} > ${LabelText} {
+ font-weight: ${({ theme }) => theme.orbit.fontWeightMedium};
+ }
+
+ &:checked + ${IconContainer} > svg {
+ visibility: visible;
+ }
+`;
+
+Input.defaultProps = {
+ theme: defaultTokens,
+};
+
+const Label = styled(({ tokens, disabled, theme, type, ...props }) => (
+ {props.children}
+))`
+ font-family: ${({ theme }) => theme.orbit.fontFamily};
+ display: flex;
+ flex-direction: row;
+ align-items: self-start;
+ opacity: ${({ disabled, theme }) => (disabled ? theme.orbit.opacityCheckboxDisabled : "1")};
+ cursor: ${({ disabled }) => (disabled ? "default" : "pointer")};
+ position: relative;
+
+ &:hover ${IconContainer} {
+ border-color: ${({ disabled, theme }) =>
+ disabled
+ ? theme.orbit.borderColorInputHover
+ : theme.orbit.paletteInkLight}; // TODO create token
+ }
+ &:active ${IconContainer} {
+ border-color: ${({ disabled, theme, tokens }) =>
+ disabled ? tokens.borderColor : theme.orbit.paletteInkNormal}; // TODO create token
+ transform: ${({ disabled, theme }) =>
+ !disabled && `scale(${theme.orbit.modifierScaleButtonActive})`};
+ }
+ &:focus {
+ outline: 0;
+ & ${IconContainer} {
+ box-shadow: 0 0 3px ${({ theme }) => theme.orbit.paletteBlueNormal}; // TODO create token
+ }
+ }
+`;
+
+Label.defaultProps = {
+ theme: defaultTokens,
+};
+
+const Checkbox = (props: Props) => {
+ const {
+ label,
+ value,
+ hasError = false,
+ disabled = false,
+ checked = false,
+ onChange,
+ theme = defaultTokens,
+ info,
+ } = props;
+
+ const tokens = {
+ borderColor:
+ hasError && !disabled && !checked
+ ? theme.orbit.borderColorInputError
+ : theme.orbit.borderColorInput,
+ iconColor: disabled ? theme.orbit.colorIconCheckboxDisabled : theme.orbit.colorIconCheckbox,
+ };
+
+ return (
+
+
+
+
+ {label && {label} }
+ {info && {info} }
+
+
+ );
+};
+
+export default Checkbox;
diff --git a/src/Checkbox/index.js.flow b/src/Checkbox/index.js.flow
index 961cdf08b4..d95cd5a1e5 100644
--- a/src/Checkbox/index.js.flow
+++ b/src/Checkbox/index.js.flow
@@ -1,4 +1,15 @@
// @flow
-import type { Props } from "./Checkbox";
+import defaultTokens from "../defaultTokens";
+
+export type Props = {|
+ +label: string,
+ +value?: string,
+ +hasError?: boolean,
+ +disabled?: boolean,
+ +checked?: boolean,
+ +info?: React$Node,
+ +onChange?: (SyntheticEvent) => void | Promise,
+ +theme?: typeof defaultTokens,
+|};
declare export default React$ComponentType;
diff --git a/src/FormFeedback/FormFeedback.js b/src/FormFeedback/FormFeedback.js
deleted file mode 100644
index 872ab72c70..0000000000
--- a/src/FormFeedback/FormFeedback.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// @flow
-import * as React from "react";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-import styled from "styled-components";
-
-import TYPE_OPTIONS from "./consts";
-import type { Props } from "./FormFeedback";
-
-const StyledFormFeedback = styled(({ theme, type, ...props }) =>
)`
- color: ${({ theme, type }) =>
- type === TYPE_OPTIONS.ERROR ? theme.colorTextError : theme.colorTextSecondary};
- font-family: ${({ theme }) => theme.fontFamily};
- font-size: ${({ theme }) => theme.fontSizeMessageForm}; // TODO: rename token
- font-weight: ${({ theme, type }) =>
- type === TYPE_OPTIONS.ERROR ? theme.fontWeightMedium : theme.fontWeightNormal};
- margin-top: 2px; // TODO: create token for 2px
- line-height: ${({ theme }) => theme.lineHeightText};
-
- & a {
- color: ${({ theme, type }) =>
- type === TYPE_OPTIONS.ERROR ? theme.colorTextError : theme.colorTextAttention};
- font-weight: ${({ theme }) => theme.fontWeightMedium};
- text-decoration: underline;
- cursor: pointer;
- }
-`;
-
-const FormFeedback = (props: Props) => {
- const { children, type = TYPE_OPTIONS.HELP, theme = defaultTokens } = props;
- return (
-
- {children}
-
- );
-};
-
-export default FormFeedback;
diff --git a/src/FormFeedback/__tests__/__snapshots__/index.test.js.snap b/src/FormFeedback/__tests__/__snapshots__/index.test.js.snap
index 691849b29f..3cb53a66a5 100644
--- a/src/FormFeedback/__tests__/__snapshots__/index.test.js.snap
+++ b/src/FormFeedback/__tests__/__snapshots__/index.test.js.snap
@@ -4,321 +4,323 @@ exports[`FormFeedback should match snapshot 1`] = `
{
const component = shallow(FormFeedback );
diff --git a/src/FormFeedback/index.js b/src/FormFeedback/index.js
new file mode 100644
index 0000000000..f4443fbf1f
--- /dev/null
+++ b/src/FormFeedback/index.js
@@ -0,0 +1,38 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+
+import defaultTokens from "../defaultTokens";
+import TYPE_OPTIONS from "./consts";
+
+import type { Props } from "./index";
+
+const StyledFormFeedback = styled(({ theme, type, ...props }) =>
)`
+ color: ${({ theme, type }) =>
+ type === TYPE_OPTIONS.ERROR ? theme.orbit.colorTextError : theme.orbit.colorTextSecondary};
+ font-family: ${({ theme }) => theme.orbit.fontFamily};
+ font-size: ${({ theme }) => theme.orbit.fontSizeMessageForm}; // TODO: rename token
+ font-weight: ${({ theme, type }) =>
+ type === TYPE_OPTIONS.ERROR ? theme.orbit.fontWeightMedium : theme.orbit.fontWeightNormal};
+ margin-top: 2px; // TODO: create token for 2px
+ line-height: ${({ theme }) => theme.orbit.lineHeightText};
+
+ & a {
+ color: ${({ theme, type }) =>
+ type === TYPE_OPTIONS.ERROR ? theme.orbit.colorTextError : theme.orbit.colorTextAttention};
+ font-weight: ${({ theme }) => theme.orbit.fontWeightMedium};
+ text-decoration: underline;
+ cursor: pointer;
+ }
+`;
+
+StyledFormFeedback.defaultProps = {
+ theme: defaultTokens,
+};
+
+const FormFeedback = (props: Props) => {
+ const { children, type = TYPE_OPTIONS.HELP } = props;
+ return {children} ;
+};
+
+export default FormFeedback;
diff --git a/src/FormFeedback/FormFeedback.js.flow b/src/FormFeedback/index.js.flow
similarity index 62%
rename from src/FormFeedback/FormFeedback.js.flow
rename to src/FormFeedback/index.js.flow
index 2675a9aebe..f2c61e15b6 100644
--- a/src/FormFeedback/FormFeedback.js.flow
+++ b/src/FormFeedback/index.js.flow
@@ -1,12 +1,10 @@
// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
type Type = "help" | "error";
export type Props = {
children: React$Node,
type?: Type,
- theme?: typeof defaultTokens,
};
declare export default React$ComponentType;
diff --git a/src/FormLabel/FormLabel.js b/src/FormLabel/FormLabel.js
deleted file mode 100644
index 087ee1cc43..0000000000
--- a/src/FormLabel/FormLabel.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @flow
-import React from "react";
-import styled from "styled-components";
-
-const FormLabel = styled(({ className, children }) => (
- {children}
-))`
- display: block;
- font-family: ${({ theme }) => theme.fontFamily};
- font-size: ${({ theme }) => theme.fontSizeLabelForm};
- color: ${({ theme, filled, disabled }) =>
- !filled || disabled ? theme.colorLabelForm : theme.colorLabelFormFilled};
- line-height: ${({ theme }) => theme.lineHeightText};
- margin-bottom: ${({ theme }) => theme.spaceXXSmall};
-`;
-
-export default FormLabel;
diff --git a/src/FormLabel/__tests__/__snapshots__/index.test.js.snap b/src/FormLabel/__tests__/__snapshots__/index.test.js.snap
index 375d6f228a..1a10761478 100644
--- a/src/FormLabel/__tests__/__snapshots__/index.test.js.snap
+++ b/src/FormLabel/__tests__/__snapshots__/index.test.js.snap
@@ -2,7 +2,328 @@
exports[`FormLabel should match snapshot 1`] = `
FormLabel
diff --git a/src/FormLabel/__tests__/index.test.js b/src/FormLabel/__tests__/index.test.js
index d55b68a8a4..90677ac90a 100644
--- a/src/FormLabel/__tests__/index.test.js
+++ b/src/FormLabel/__tests__/index.test.js
@@ -2,7 +2,7 @@
import * as React from "react";
import { shallow } from "enzyme";
-import FormLabel from "../FormLabel";
+import FormLabel from "../index";
describe("FormLabel", () => {
const component = shallow(FormLabel );
diff --git a/src/FormLabel/index.js b/src/FormLabel/index.js
new file mode 100644
index 0000000000..a1f94a2146
--- /dev/null
+++ b/src/FormLabel/index.js
@@ -0,0 +1,23 @@
+// @flow
+import React from "react";
+import styled from "styled-components";
+
+import defaultTokens from "../defaultTokens";
+
+const FormLabel = styled(({ className, children }) => (
+ {children}
+))`
+ display: block;
+ font-family: ${({ theme }) => theme.orbit.fontFamily};
+ font-size: ${({ theme }) => theme.orbit.fontSizeLabelForm};
+ color: ${({ theme, filled, disabled }) =>
+ !filled || disabled ? theme.orbit.colorLabelForm : theme.orbit.colorLabelFormFilled};
+ line-height: ${({ theme }) => theme.orbit.lineHeightText};
+ margin-bottom: ${({ theme }) => theme.orbit.spaceXXSmall};
+`;
+
+FormLabel.defaultProps = {
+ theme: defaultTokens,
+};
+
+export default FormLabel;
diff --git a/src/FormLabel/FormLabel.js.flow b/src/FormLabel/index.js.flow
similarity index 61%
rename from src/FormLabel/FormLabel.js.flow
rename to src/FormLabel/index.js.flow
index 55e5e117e8..ba7a97b1c6 100644
--- a/src/FormLabel/FormLabel.js.flow
+++ b/src/FormLabel/index.js.flow
@@ -1,11 +1,9 @@
// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
export type Props = {
children: React$Node,
filled?: boolean,
disabled?: boolean,
- theme?: typeof defaultTokens,
};
declare export default React$ComponentType;
diff --git a/src/Heading/Heading.js b/src/Heading/Heading.js
deleted file mode 100644
index b771a52dc0..0000000000
--- a/src/Heading/Heading.js
+++ /dev/null
@@ -1,52 +0,0 @@
-// @flow
-import * as React from "react";
-import styled from "styled-components";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-import createComponentFromTagProp from "react-create-component-from-tag-prop";
-
-import { ELEMENT_OPTIONS, TYPE_OPTIONS } from "./consts";
-import type { Props } from "./Heading";
-
-const HeadingElement = createComponentFromTagProp({
- prop: "element",
- propsToOmit: ["type", "tokens", "theme"],
-});
-
-const StyledHeading = styled(HeadingElement)`
- font-family: ${props => props.theme.fontFamily};
- font-size: ${props => props.tokens.sizeHeading[props.type]};
- font-weight: ${props => props.tokens.weightHeading[props.type]};
- color: ${props => props.theme.colorHeading};
- line-height: ${props => props.theme.lineHeightHeading};
- margin: 0;
-`;
-
-const Heading = (props: Props) => {
- const {
- children,
- theme = defaultTokens,
- type = TYPE_OPTIONS.TITLE1,
- element = ELEMENT_OPTIONS.H1,
- } = props;
- const tokens = {
- weightHeading: {
- [TYPE_OPTIONS.DISPLAY]: theme.fontWeightHeadingDisplay,
- [TYPE_OPTIONS.TITLE1]: theme.fontWeightHeadingTitle1,
- [TYPE_OPTIONS.TITLE2]: theme.fontWeightHeadingTitle2,
- [TYPE_OPTIONS.TITLE3]: theme.fontWeightHeadingTitle3,
- },
- sizeHeading: {
- [TYPE_OPTIONS.DISPLAY]: theme.fontSizeHeadingDisplay,
- [TYPE_OPTIONS.TITLE1]: theme.fontSizeHeadingTitle1,
- [TYPE_OPTIONS.TITLE2]: theme.fontSizeHeadingTitle2,
- [TYPE_OPTIONS.TITLE3]: theme.fontSizeHeadingTitle3,
- },
- };
- return (
-
- {children}
-
- );
-};
-
-export default Heading;
diff --git a/src/Heading/Heading.js.flow b/src/Heading/Heading.js.flow
deleted file mode 100644
index ef2e70add5..0000000000
--- a/src/Heading/Heading.js.flow
+++ /dev/null
@@ -1,14 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-type Element = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-type Type = "display" | "title1" | "title2" | "title3";
-
-export type Props = {|
- +element?: Element,
- +type?: Type,
- +children: React$Node,
- +theme?: typeof defaultTokens,
-|};
-
-declare export default React$ComponentType;
diff --git a/src/Heading/Heading.stories.js b/src/Heading/Heading.stories.js
index b501ee2e2a..9f0f8f8f68 100644
--- a/src/Heading/Heading.stories.js
+++ b/src/Heading/Heading.stories.js
@@ -5,9 +5,10 @@ import styles from "@sambego/storybook-styles";
import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, text, select } from "@storybook/addon-knobs/react";
-import Heading from "./Heading";
import { ELEMENT_OPTIONS, TYPE_OPTIONS } from "./consts";
+import Heading from "./index";
+
setAddon(chaptersAddon);
storiesOf("Heading", module)
diff --git a/src/Heading/__tests__/__snapshots__/index.test.js.snap b/src/Heading/__tests__/__snapshots__/index.test.js.snap
index c613fb6a56..0002368ec5 100644
--- a/src/Heading/__tests__/__snapshots__/index.test.js.snap
+++ b/src/Heading/__tests__/__snapshots__/index.test.js.snap
@@ -5,321 +5,323 @@ exports[`Heading with defaultProps should match snapshot 1`] = `
element="h1"
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
+ "orbit": Object {
+ "backgroundAlertCritical": "#fae8e8",
+ "backgroundAlertInfo": "#e0f6ff",
+ "backgroundAlertSuccess": "#e7f3e8",
+ "backgroundAlertWarning": "#fcf1cd",
+ "backgroundBody": "#f5f7f9",
+ "backgroundButtonBordered": "transparent",
+ "backgroundButtonBorderedActive": "#fff",
+ "backgroundButtonBorderedHover": "#f5f7f9",
+ "backgroundButtonCritical": "#d21c1c",
+ "backgroundButtonCriticalActive": "#b21717",
+ "backgroundButtonCriticalHover": "#bd1919",
+ "backgroundButtonFacebook": "#3b5998",
+ "backgroundButtonFacebookActive": "#354f88",
+ "backgroundButtonFacebookHover": "#385490",
+ "backgroundButtonGoogle": "#f5f7f9",
+ "backgroundButtonGoogleActive": "#d6dee6",
+ "backgroundButtonGoogleHover": "#e5eaef",
+ "backgroundButtonInfo": "#0176D2",
+ "backgroundButtonInfoActive": "#0064b2",
+ "backgroundButtonInfoHover": "#006abd",
+ "backgroundButtonLinkPrimary": "transparent",
+ "backgroundButtonLinkPrimaryActive": "#d6dee6",
+ "backgroundButtonLinkPrimaryHover": "#e5eaef",
+ "backgroundButtonLinkSecondary": "transparent",
+ "backgroundButtonLinkSecondaryActive": "#d6dee6",
+ "backgroundButtonLinkSecondaryHover": "#e5eaef",
+ "backgroundButtonPrimary": "#00a991",
+ "backgroundButtonPrimaryActive": "#008f7b",
+ "backgroundButtonPrimaryHover": "#009882",
+ "backgroundButtonSecondary": "#e8edf1",
+ "backgroundButtonSecondaryActive": "#cad5df",
+ "backgroundButtonSecondaryHover": "#d9e1e8",
+ "backgroundButtonSuccess": "#46B655",
+ "backgroundButtonSuccessActive": "#3fa34c",
+ "backgroundButtonSuccessHover": "#42ac50",
+ "backgroundButtonWarning": "#f9971e",
+ "backgroundButtonWarningActive": "#e68206",
+ "backgroundButtonWarningHover": "#f48a06",
+ "backgroundCard": "#fff",
+ "backgroundCarrierLogo": "transparent",
+ "backgroundInput": "#fff",
+ "backgroundInputDisabled": "#e8edf1",
+ "backgroundModal": "#fff",
+ "borderColorButtonCriticalBordered": "#d21c1c",
+ "borderColorButtonCriticalBorderedActive": "#b21717",
+ "borderColorButtonCriticalBorderedHover": "#bd1919",
+ "borderColorButtonFacebookBordered": "#3b5998",
+ "borderColorButtonFacebookBorderedActive": "#354f88",
+ "borderColorButtonFacebookBorderedHover": "#385490",
+ "borderColorButtonGoogleBordered": "#46515e",
+ "borderColorButtonGoogleBorderedActive": "#38404b",
+ "borderColorButtonGoogleBorderedHover": "#3f4854",
+ "borderColorButtonInfoBordered": "#0176D2",
+ "borderColorButtonInfoBorderedActive": "#0064b2",
+ "borderColorButtonInfoBorderedHover": "#006abd",
+ "borderColorButtonPrimaryBordered": "#00a991",
+ "borderColorButtonPrimaryBorderedActive": "#008f7b",
+ "borderColorButtonPrimaryBorderedHover": "#009882",
+ "borderColorButtonSecondaryBordered": "#46515e",
+ "borderColorButtonSecondaryBorderedActive": "#38404b",
+ "borderColorButtonSecondaryBorderedHover": "#3f4854",
+ "borderColorButtonSuccessBordered": "#46B655",
+ "borderColorButtonSuccessBorderedActive": "#3fa34c",
+ "borderColorButtonSuccessBorderedHover": "#42ac50",
+ "borderColorButtonWarningBordered": "#f9971e",
+ "borderColorButtonWarningBorderedActive": "#e68206",
+ "borderColorButtonWarningBorderedHover": "#f48a06",
+ "borderColorCard": "#e8edf1",
+ "borderColorInput": "#bac7d5",
+ "borderColorInputActive": "#94a8be",
+ "borderColorInputError": "#d21c1c",
+ "borderColorInputErrorFocus": "#d21c1c",
+ "borderColorInputFocus": "#0176D2",
+ "borderColorInputHover": "#a6b6c8",
+ "borderColorModal": "#e8edf1",
+ "borderColorTableCell": "#bac7d5",
+ "borderRadiusCircle": "50%",
+ "borderRadiusLarge": "6px",
+ "borderRadiusNormal": "3px",
+ "borderRadiusSmall": "2px",
+ "borderStyleCard": "solid",
+ "borderStyleInput": "solid",
+ "borderWidthCard": "1px",
+ "borderWidthInput": "1px",
+ "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
+ "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
+ "colorAlertIconCritical": "#d21c1c",
+ "colorAlertIconInfo": "#0176D2",
+ "colorAlertIconSuccess": "#46B655",
+ "colorAlertIconWarning": "#f9971e",
+ "colorHeading": "#171b1e",
+ "colorHeadingInverted": "#fff",
+ "colorIconAttention": "#171b1e",
+ "colorIconCheckbox": "#00a991",
+ "colorIconCheckboxDisabled": "#bac7d5",
+ "colorIconInput": "#bac7d5",
+ "colorIconPrimary": "#46515e",
+ "colorIconRadioButton": "#00a991",
+ "colorIconRadioButtonDisabled": "#bac7d5",
+ "colorIconSecondary": "#7f91a8",
+ "colorIconTerciary": "#bac7d5",
+ "colorLabelForm": "#46515e",
+ "colorLabelFormFilled": "#7f91a8",
+ "colorPlaceholderInput": "#bac7d5",
+ "colorTextAlertCritical": "#650808",
+ "colorTextAlertInfo": "#07405c",
+ "colorTextAlertSuccess": "#065d12",
+ "colorTextAlertWarning": "#a93610",
+ "colorTextAttention": "#171b1e",
+ "colorTextButtonCritical": "#fff",
+ "colorTextButtonCriticalActive": "#fff",
+ "colorTextButtonCriticalBordered": "#d21c1c",
+ "colorTextButtonCriticalBorderedActive": "#b21717",
+ "colorTextButtonCriticalBorderedHover": "#bd1919",
+ "colorTextButtonCriticalHover": "#fff",
+ "colorTextButtonFacebook": "#fff",
+ "colorTextButtonFacebookActive": "#fff",
+ "colorTextButtonFacebookBordered": "#3b5998",
+ "colorTextButtonFacebookBorderedActive": "#354f88",
+ "colorTextButtonFacebookBorderedHover": "#385490",
+ "colorTextButtonFacebookHover": "#fff",
+ "colorTextButtonFilled": "#fff",
+ "colorTextButtonFilledActive": "#fff",
+ "colorTextButtonFilledHover": "#fff",
+ "colorTextButtonGoogle": "#46515e",
+ "colorTextButtonGoogleActive": "#38404b",
+ "colorTextButtonGoogleBordered": "#46515e",
+ "colorTextButtonGoogleBorderedActive": "#38404b",
+ "colorTextButtonGoogleBorderedHover": "#3f4854",
+ "colorTextButtonGoogleHover": "#3f4854",
+ "colorTextButtonInfo": "#fff",
+ "colorTextButtonInfoActive": "#fff",
+ "colorTextButtonInfoBordered": "#0176D2",
+ "colorTextButtonInfoBorderedActive": "#0064b2",
+ "colorTextButtonInfoBorderedHover": "#006abd",
+ "colorTextButtonInfoHover": "#fff",
+ "colorTextButtonLinkPrimary": "#00a991",
+ "colorTextButtonLinkPrimaryActive": "#008f7b",
+ "colorTextButtonLinkPrimaryHover": "#009882",
+ "colorTextButtonLinkSecondary": "#46515e",
+ "colorTextButtonLinkSecondaryActive": "#38404b",
+ "colorTextButtonLinkSecondaryHover": "#3f4854",
+ "colorTextButtonPrimary": "#fff",
+ "colorTextButtonPrimaryActive": "#fff",
+ "colorTextButtonPrimaryBordered": "#00a991",
+ "colorTextButtonPrimaryBorderedActive": "#008f7b",
+ "colorTextButtonPrimaryBorderedHover": "#009882",
+ "colorTextButtonPrimaryHover": "#fff",
+ "colorTextButtonSecondary": "#46515e",
+ "colorTextButtonSecondaryActive": "#38404b",
+ "colorTextButtonSecondaryBordered": "#46515e",
+ "colorTextButtonSecondaryBorderedActive": "#38404b",
+ "colorTextButtonSecondaryBorderedHover": "#3f4854",
+ "colorTextButtonSecondaryHover": "#3f4854",
+ "colorTextButtonSuccess": "#fff",
+ "colorTextButtonSuccessActive": "#fff",
+ "colorTextButtonSuccessBordered": "#46B655",
+ "colorTextButtonSuccessBorderedActive": "#3fa34c",
+ "colorTextButtonSuccessBorderedHover": "#42ac50",
+ "colorTextButtonSuccessHover": "#fff",
+ "colorTextButtonWarning": "#fff",
+ "colorTextButtonWarningActive": "#fff",
+ "colorTextButtonWarningBordered": "#f9971e",
+ "colorTextButtonWarningBorderedActive": "#e68206",
+ "colorTextButtonWarningBorderedHover": "#f48a06",
+ "colorTextButtonWarningHover": "#fff",
+ "colorTextError": "#d21c1c",
+ "colorTextInfo": "#0176D2",
+ "colorTextInput": "#46515e",
+ "colorTextInputDisabled": "#bac7d5",
+ "colorTextLinkPrimary": "#00a991",
+ "colorTextLinkPrimaryHover": "#00a991",
+ "colorTextLinkSecondary": "#171b1e",
+ "colorTextLinkSecondaryHover": "#00a991",
+ "colorTextPrimary": "#46515e",
+ "colorTextSecondary": "#7f91a8",
+ "durationFast": "0.2s",
+ "durationNormal": "0.3s",
+ "durationSlow": "0.4s",
+ "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
+ "fontSizeButtonLarge": "16px",
+ "fontSizeButtonNormal": "14px",
+ "fontSizeButtonSmall": "12px",
+ "fontSizeHeadingDisplay": "40px",
+ "fontSizeHeadingTitle1": "28px",
+ "fontSizeHeadingTitle2": "22px",
+ "fontSizeHeadingTitle3": "16px",
+ "fontSizeInputNormal": "16px",
+ "fontSizeInputSmall": "14px",
+ "fontSizeLabelForm": "14px",
+ "fontSizeMessage": "14px",
+ "fontSizeMessageForm": "12px",
+ "fontSizeTextLarge": "16px",
+ "fontSizeTextNormal": "14px",
+ "fontSizeTextSmall": "12px",
+ "fontWeightBold": "700",
+ "fontWeightHeadingDisplay": "700",
+ "fontWeightHeadingTitle1": "700",
+ "fontWeightHeadingTitle2": "500",
+ "fontWeightHeadingTitle3": "500",
+ "fontWeightLinks": "500",
+ "fontWeightMedium": "500",
+ "fontWeightNormal": "400",
+ "heightButtonLarge": "52px",
+ "heightButtonNormal": "44px",
+ "heightButtonSmall": "32px",
+ "heightCheckbox": "20px",
+ "heightCountryFlag": "20px",
+ "heightIconLarge": "32px",
+ "heightIconMedium": "24px",
+ "heightIconSmall": "16px",
+ "heightInputLarge": "52px",
+ "heightInputNormal": "44px",
+ "heightInputSmall": "32px",
+ "heightRadioButton": "20px",
+ "lineHeightHeading": "1.2",
+ "lineHeightText": "1.4",
+ "marginButtonIconLarge": "16px",
+ "marginButtonIconNormal": "12px",
+ "marginButtonIconSmall": "8px",
+ "modifierScaleButtonActive": 0.9,
+ "opacityButtonDisabled": "0.3",
+ "opacityCheckboxDisabled": "0.5",
+ "opacityOverlay": "0.8",
+ "opacityRadioButtonDisabled": "0.5",
+ "paddingAlert": "16px",
+ "paddingAlertWithIcon": "12px",
+ "paddingButtonLarge": "28px",
+ "paddingButtonLargeWithIcon": "12px",
+ "paddingButtonNormal": "16px",
+ "paddingButtonNormalWithIcon": "8px",
+ "paddingButtonSmall": "12px",
+ "paddingButtonSmallWithIcon": "8px",
+ "paddingInputNormal": "16px",
+ "paddingInputSmall": "12px",
+ "paletteBlueDark": "#07405c",
+ "paletteBlueLight": "#e0f6ff",
+ "paletteBlueLightActive": "#b0e8fe",
+ "paletteBlueLightHover": "#c8effe",
+ "paletteBlueNormal": "#0176D2",
+ "paletteBlueNormalActive": "#0064b2",
+ "paletteBlueNormalHover": "#006abd",
+ "paletteCloudLight": "#f5f7f9",
+ "paletteCloudLightActive": "#d6dee6",
+ "paletteCloudLightHover": "#e5eaef",
+ "paletteCloudNormal": "#e8edf1",
+ "paletteCloudNormalActive": "#cad5df",
+ "paletteCloudNormalHover": "#d9e1e8",
+ "paletteGreenDark": "#065d12",
+ "paletteGreenLight": "#e7f3e8",
+ "paletteGreenLightActive": "#c7e3c9",
+ "paletteGreenLightHover": "#d7ebd8",
+ "paletteGreenNormal": "#46B655",
+ "paletteGreenNormalActive": "#3fa34c",
+ "paletteGreenNormalHover": "#42ac50",
+ "paletteInkDark": "#171b1e",
+ "paletteInkLight": "#7f91a8",
+ "paletteInkLightActive": "#5f738c",
+ "paletteInkLightHover": "#6d819c",
+ "paletteInkLighter": "#bac7d5",
+ "paletteInkLighterActive": "#94a8be",
+ "paletteInkLighterHover": "#a6b6c8",
+ "paletteInkNormal": "#46515e",
+ "paletteInkNormalActive": "#38404b",
+ "paletteInkNormalHover": "#3f4854",
+ "paletteOrangeDark": "#a93610",
+ "paletteOrangeLight": "#fcf1cd",
+ "paletteOrangeLightActive": "#f9e4a1",
+ "paletteOrangeLightHover": "#faeab7",
+ "paletteOrangeNormal": "#f9971e",
+ "paletteOrangeNormalActive": "#e68206",
+ "paletteOrangeNormalHover": "#f48a06",
+ "paletteProductDark": "#005448",
+ "paletteProductLight": "#9ae5da",
+ "paletteProductLightActive": "#64d7c6",
+ "paletteProductLightHover": "#7fded0",
+ "paletteProductNormal": "#00a991",
+ "paletteProductNormalActive": "#008f7b",
+ "paletteProductNormalHover": "#009882",
+ "paletteRedDark": "#650808",
+ "paletteRedLight": "#fae8e8",
+ "paletteRedLightActive": "#f1c0c0",
+ "paletteRedLightHover": "#f5d4d4",
+ "paletteRedNormal": "#d21c1c",
+ "paletteRedNormalActive": "#b21717",
+ "paletteRedNormalHover": "#bd1919",
+ "paletteSocialFacebook": "#3b5998",
+ "paletteSocialFacebookActive": "#354f88",
+ "paletteSocialFacebookHover": "#385490",
+ "paletteWhite": "#fff",
+ "paletteWhiteActive": "#e5eaef",
+ "paletteWhiteHover": "#f5f7f9",
+ "spaceLarge": "24px",
+ "spaceMedium": "16px",
+ "spaceSmall": "12px",
+ "spaceXLarge": "32px",
+ "spaceXSmall": "8px",
+ "spaceXXLarge": "40px",
+ "spaceXXSmall": "4px",
+ "spaceXXXLarge": "52px",
+ "textDecorationTextLinkPrimary": "none",
+ "textDecorationTextLinkPrimaryHover": "underline",
+ "textDecorationTextLinkSecondary": "underline",
+ "textDecorationTextLinkSecondaryHover": "underline",
+ "widthCheckbox": "20px",
+ "widthCountryFlag": "20px",
+ "widthIconLarge": "32px",
+ "widthIconMedium": "24px",
+ "widthIconSmall": "16px",
+ "widthRadioButton": "20px",
+ "zIndexDefault": "1",
+ "zIndexModal": "825",
+ "zIndexModalOverlay": "800",
+ "zIndexOnTheTop": "900",
+ "zIndexSticky": "100",
+ },
}
}
tokens={
diff --git a/src/Heading/__tests__/index.test.js b/src/Heading/__tests__/index.test.js
index 6fdebe89cb..9396e8945c 100644
--- a/src/Heading/__tests__/index.test.js
+++ b/src/Heading/__tests__/index.test.js
@@ -2,7 +2,7 @@
import * as React from "react";
import { shallow } from "enzyme";
-import Heading from "../Heading";
+import Heading from "../index";
const children = "Children title";
diff --git a/src/Heading/index.js b/src/Heading/index.js
index a36cdd95d3..94c65b0a12 100644
--- a/src/Heading/index.js
+++ b/src/Heading/index.js
@@ -1,6 +1,57 @@
// @flow
-import { withTheme } from "theming";
+import * as React from "react";
+import styled from "styled-components";
+import createComponentFromTagProp from "react-create-component-from-tag-prop";
-import Heading from "./Heading";
+import defaultTokens from "../defaultTokens";
+import { ELEMENT_OPTIONS, TYPE_OPTIONS } from "./consts";
-export default withTheme(Heading);
+import type { Props } from "./index";
+
+const HeadingElement = createComponentFromTagProp({
+ prop: "element",
+ propsToOmit: ["type", "tokens", "theme"],
+});
+
+const StyledHeading = styled(HeadingElement)`
+ font-family: ${props => props.theme.orbit.fontFamily};
+ font-size: ${props => props.tokens.sizeHeading[props.type]};
+ font-weight: ${props => props.tokens.weightHeading[props.type]};
+ color: ${props => props.theme.orbit.colorHeading};
+ line-height: ${props => props.theme.orbit.lineHeightHeading};
+ margin: 0;
+`;
+
+StyledHeading.defaultProps = {
+ theme: defaultTokens,
+};
+
+const Heading = (props: Props) => {
+ const {
+ children,
+ theme = defaultTokens,
+ type = TYPE_OPTIONS.TITLE1,
+ element = ELEMENT_OPTIONS.H1,
+ } = props;
+ const tokens = {
+ weightHeading: {
+ [TYPE_OPTIONS.DISPLAY]: theme.orbit.fontWeightHeadingDisplay,
+ [TYPE_OPTIONS.TITLE1]: theme.orbit.fontWeightHeadingTitle1,
+ [TYPE_OPTIONS.TITLE2]: theme.orbit.fontWeightHeadingTitle2,
+ [TYPE_OPTIONS.TITLE3]: theme.orbit.fontWeightHeadingTitle3,
+ },
+ sizeHeading: {
+ [TYPE_OPTIONS.DISPLAY]: theme.orbit.fontSizeHeadingDisplay,
+ [TYPE_OPTIONS.TITLE1]: theme.orbit.fontSizeHeadingTitle1,
+ [TYPE_OPTIONS.TITLE2]: theme.orbit.fontSizeHeadingTitle2,
+ [TYPE_OPTIONS.TITLE3]: theme.orbit.fontSizeHeadingTitle3,
+ },
+ };
+ return (
+
+ {children}
+
+ );
+};
+
+export default Heading;
diff --git a/src/Heading/index.js.flow b/src/Heading/index.js.flow
index 4e54cb6034..d3ad751ecd 100644
--- a/src/Heading/index.js.flow
+++ b/src/Heading/index.js.flow
@@ -1,4 +1,14 @@
// @flow
-import type { Props } from "./Heading";
+import defaultTokens from "../defaultTokens";
+
+type Element = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+type Type = "display" | "title1" | "title2" | "title3";
+
+export type Props = {|
+ +element?: Element,
+ +type?: Type,
+ +children: React$Node,
+ +theme?: typeof defaultTokens,
+|};
declare export default React$ComponentType;
diff --git a/src/Icon/Icon.stories.js b/src/Icon/Icon.stories.js
index e2820d0947..97f03babfb 100644
--- a/src/Icon/Icon.stories.js
+++ b/src/Icon/Icon.stories.js
@@ -7,7 +7,7 @@ import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, select, text } from "@storybook/addon-knobs/react";
import * as Icons from "../icons";
-import { iconSizes, iconColors } from "../Icon";
+import { ICON_SIZES, ICON_COLORS } from "./consts";
setAddon(chaptersAddon);
@@ -24,8 +24,8 @@ storiesOf("Icon", module)
}),
)
.addWithChapters("Default", () => {
- const size = select("Size", Object.keys(iconSizes), "medium");
- const color = select("Color", Object.keys(iconColors), "primary");
+ const size = select("Size", Object.keys(ICON_SIZES), "medium");
+ const color = select("Color", Object.keys(ICON_COLORS), "primary");
const source = select("Icon", Object.keys(Icons), "Airplane");
const Icon = Icons[source];
return {
@@ -44,7 +44,7 @@ storiesOf("Icon", module)
};
})
.addWithChapters("Custom color", () => {
- const size = select("Size", Object.keys(iconSizes), "medium");
+ const size = select("Size", Object.keys(ICON_SIZES), "medium");
const customColor = text("Custom color", "#ABCDEF");
const source = select("Icon", Object.keys(Icons), "Airplane");
const Icon = Icons[source];
diff --git a/src/Icon/__tests__/index.test.js b/src/Icon/__tests__/index.test.js
index ad8b00c633..8f18a678d1 100644
--- a/src/Icon/__tests__/index.test.js
+++ b/src/Icon/__tests__/index.test.js
@@ -3,10 +3,10 @@ import * as React from "react";
import { mount } from "enzyme";
import Accommodation from "../../icons/Accommodation";
-import { iconColors, iconSizes } from "../index";
+import { ICON_SIZES, ICON_COLORS } from "../consts";
const size = "large";
-const defaultSize = iconSizes.medium;
+const defaultSize = ICON_SIZES.medium;
const color = "attention";
const customColor = "#FF0000";
@@ -22,7 +22,7 @@ describe("Icon with color", () => {
});
it("SVG contains a color", () => {
const svg = component.find("svg");
- expect(svg.prop("style")).toEqual({ color: iconColors[color], verticalAlign: "middle" });
+ expect(svg.prop("style")).toEqual({ color: ICON_COLORS[color], verticalAlign: "middle" });
});
it("Should match snapshot", () => {
expect(component).toMatchSnapshot();
@@ -35,8 +35,8 @@ describe("Icon with props", () => {
});
it("SVG contains default sizing", () => {
const svg = component.find("svg");
- expect(svg.prop("height")).toBe(iconSizes[size]);
- expect(svg.prop("width")).toBe(iconSizes[size]);
+ expect(svg.prop("height")).toBe(ICON_SIZES[size]);
+ expect(svg.prop("width")).toBe(ICON_SIZES[size]);
});
it("SVG contains default color", () => {
const svg = component.find("svg");
diff --git a/src/Icon/consts.js b/src/Icon/consts.js
new file mode 100644
index 0000000000..8525e37b99
--- /dev/null
+++ b/src/Icon/consts.js
@@ -0,0 +1,15 @@
+// @flow
+import defaultTokens from "../defaultTokens";
+
+export const ICON_SIZES = {
+ small: defaultTokens.orbit.widthIconSmall,
+ medium: defaultTokens.orbit.widthIconMedium,
+ large: defaultTokens.orbit.widthIconLarge,
+};
+
+export const ICON_COLORS = {
+ attention: defaultTokens.orbit.colorIconAttention,
+ primary: defaultTokens.orbit.colorIconPrimary,
+ secondary: defaultTokens.orbit.colorIconSecondary,
+ terciary: defaultTokens.orbit.colorIconTerciary,
+};
diff --git a/src/Icon/index.js b/src/Icon/index.js
index 5732357487..fd1279d083 100644
--- a/src/Icon/index.js
+++ b/src/Icon/index.js
@@ -1,29 +1,10 @@
// @flow
import * as React from "react";
import Icon from "react-icon-base";
-import { defaultTokens as tokens } from "@kiwicom/orbit-design-tokens";
-export const iconSizes = {
- small: tokens.widthIconSmall,
- medium: tokens.widthIconMedium,
- large: tokens.widthIconLarge,
-};
-
-export const iconColors = {
- attention: tokens.colorIconAttention,
- primary: tokens.colorIconPrimary,
- secondary: tokens.colorIconSecondary,
- terciary: tokens.colorIconTerciary,
-};
+import { ICON_SIZES, ICON_COLORS } from "./consts";
-type Props = {
- size: $Keys,
- color?: $Keys,
- className: string,
- customColor: string,
- children: React.Node,
- viewBox: string,
-};
+import type { Props } from "./index";
const OrbitIcon = (props: Props) => {
const { size, color, customColor, className, children, viewBox } = props;
@@ -31,9 +12,9 @@ const OrbitIcon = (props: Props) => {
return (
{children}
diff --git a/src/Icon/index.js.flow b/src/Icon/index.js.flow
new file mode 100644
index 0000000000..df2946b1fc
--- /dev/null
+++ b/src/Icon/index.js.flow
@@ -0,0 +1,16 @@
+// @flow
+
+type Size = "small" | "medium" | "large";
+
+type Color = "attention" | "primary" | "secondary" | "terciary";
+
+export type Props = {|
+ +size: Size,
+ +color?: Color,
+ +className: string,
+ +customColor: string,
+ +children: React$Node,
+ +viewBox: string,
+|};
+
+declare export default React$ComponentType;
diff --git a/src/InputField/InputField.js b/src/InputField/InputField.js
deleted file mode 100644
index b554924899..0000000000
--- a/src/InputField/InputField.js
+++ /dev/null
@@ -1,208 +0,0 @@
-// @flow
-import * as React from "react";
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-import styled from "styled-components";
-
-import { SIZE_OPTIONS, TYPE_OPTIONS } from "./consts";
-import type { Props } from "./InputField";
-import FormFeedback from "../FormFeedback/FormFeedback";
-import FormLabel from "../FormLabel/FormLabel";
-
-const Field = styled.label`
- font-family: ${({ theme }) => theme.fontFamily};
- position: relative;
- display: block;
-`;
-
-const FakeInput = styled(({ children, className }) => {children}
)`
- width: 100%;
- position: absolute;
- z-index: -1;
- box-sizing: border-box;
- height: ${({ tokens, size }) => tokens.heightInput[size]};
- border-radius: ${({ theme }) => theme.borderRadiusNormal};
- border: ${({ theme, error }) =>
- `${theme.borderStyleInput} ${theme.borderWidthInput} ${
- error ? theme.borderColorInputError : theme.borderColorInput
- }`};
- background-color: ${({ disabled, theme }) =>
- disabled ? theme.backgroundInputDisabled : theme.backgroundInput};
- font-size: ${({ size, tokens }) => tokens.fontSizeInput[size]};
- transition: all ${({ theme }) => theme.durationFast} ease-in-out;
-`;
-
-const InputContainer = styled(({ children, className }) => (
- {children}
-))`
- display: flex;
- position: relative;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- box-sizing: border-box;
- width: 100%;
- height: ${({ tokens, size }) => tokens.heightInput[size]};
- border-radius: ${({ theme }) => theme.borderRadiusNormal};
- color: ${({ disabled, theme }) =>
- disabled ? theme.colorTextInputDisabled : theme.colorTextInput};
- font-size: ${({ size, tokens }) => tokens.fontSizeInput[size]};
- cursor: ${({ disabled }) => (disabled ? "not-allowed" : "text")};
-
- &:hover > ${FakeInput} {
- border-color: ${({ disabled, theme, error }) =>
- !disabled && (error ? theme.paletteRedNormalHover : theme.borderColorInputHover)};
- }
-`;
-
-const Prefix = styled(({ children, className }) => {children}
)`
- height: 100%;
- color: ${({ theme }) => theme.paletteInkLight}; // TODO create token
- display: flex;
- align-items: center;
- pointer-events: none;
- justify-content: center;
- padding: 0 ${({ theme }) => theme.spaceSmall};
-
- & > svg {
- width: ${({ tokens, size }) => tokens.iconSize[size]};
- height: ${({ tokens, size }) => tokens.iconSize[size]};
- color: ${({ theme }) => theme.colorIconInput};
- }
-`;
-
-const Suffix = styled(({ children, className }) => {children}
)`
- height: ${({ tokens, size }) => tokens.heightInput[size]};
- color: ${({ theme }) => theme.colorIconInput};
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- pointer-events: ${({ disabled }) => disabled && "none"};
-
- & svg {
- color: ${({ theme }) => theme.colorIconSecondary};
- }
-`;
-
-const Input = styled(({ theme, tokens, size, prefix, suffix, error, help, ...props }) => (
-
- {props.label && (
-
- {props.label}
-
- )}
-
- {props.prefix && (
-
- {props.prefix}
-
- )}
-
- {props.suffix}
-
- )}
-
- {props.help && !props.error && {props.help} }
- {props.error && {props.error} }
-
- );
-};
-
-export default InputField;
diff --git a/src/InputField/InputField.js.flow b/src/InputField/InputField.js.flow
deleted file mode 100644
index 1007f5d47e..0000000000
--- a/src/InputField/InputField.js.flow
+++ /dev/null
@@ -1,26 +0,0 @@
-// @flow
-import { defaultTokens } from "@kiwicom/orbit-design-tokens";
-
-export type Props = {|
- +size?: "small" | "normal",
- +type?: "text" | "number" | "email" | "password",
- +name?: string,
- +label?: string,
- +value?: string,
- +placeholder?: string,
- +prefix?: React$Node,
- +suffix?: React$Node,
- +help?: React$Node,
- +error?: React$Node,
- +disabled?: boolean,
- +maxValue?: number,
- +minValue?: number,
- +maxLength?: number,
- +minLength?: number,
- +onChange?: (ev: SyntheticInputEvent) => void | Promise,
- +onFocus?: (ev: SyntheticInputEvent) => void | Promise,
- +onBlur?: (ev: SyntheticInputEvent) => void | Promise,
- +theme?: typeof defaultTokens,
-|};
-
-declare export default React$ComponentType;
diff --git a/src/InputField/InputField.stories.js b/src/InputField/InputField.stories.js
index 2b0f857856..3bd52d9807 100644
--- a/src/InputField/InputField.stories.js
+++ b/src/InputField/InputField.stories.js
@@ -8,10 +8,11 @@ import chaptersAddon from "react-storybook-addon-chapters";
import { withKnobs, text, boolean, select, number } from "@storybook/addon-knobs/react";
import * as Icons from "../icons";
-import InputField from "./InputField";
import { SIZE_OPTIONS, TYPE_OPTIONS } from "./consts";
-import ButtonLink from "../ButtonLink/ButtonLink";
-import TextLink from "../TextLink/TextLink";
+import ButtonLink from "../ButtonLink";
+import TextLink from "../TextLink";
+
+import InputField from "./index";
setAddon(chaptersAddon);
diff --git a/src/InputField/__snapshots__/InputField.stories.storyshot b/src/InputField/__snapshots__/InputField.stories.storyshot
index beaf92f9fc..eed418b63c 100644
--- a/src/InputField/__snapshots__/InputField.stories.storyshot
+++ b/src/InputField/__snapshots__/InputField.stories.storyshot
@@ -1672,6 +1672,327 @@ exports[`Storyshots InputField Playground 1`] = `
-
- Something went wrong.
-
- }
- size="normal"
- theme={
- Object {
+ "orbit": Object {
"backgroundAlertCritical": "#fae8e8",
"backgroundAlertInfo": "#e0f6ff",
"backgroundAlertSuccess": "#e7f3e8",
@@ -646,40 +320,20 @@ exports[`InputField number with error and help should match snapshot 1`] = `
"zIndexModalOverlay": "800",
"zIndexOnTheTop": "900",
"zIndexSticky": "100",
- }
+ },
}
- tokens={
- Object {
- "fontSizeInput": Object {
- "normal": "16px",
- "small": "14px",
- },
- "heightInput": Object {
- "normal": "44px",
- "small": "32px",
- },
- "iconSize": Object {
- "normal": "24px",
- "small": "16px",
- },
- "paddingInput": Object {
- "normal": "12px",
- "small": "12px",
- },
- }
+ }
+>
+
+ Something went wrong.
+
}
- >
-
- Something went wrong.
-
- }
- max={5}
- min={1}
- size="normal"
- theme={
- Object {
+ size="normal"
+ theme={
+ Object {
+ "orbit": Object {
"backgroundAlertCritical": "#fae8e8",
"backgroundAlertInfo": "#e0f6ff",
"backgroundAlertSuccess": "#e7f3e8",
@@ -995,2432 +649,358 @@ exports[`InputField number with error and help should match snapshot 1`] = `
"zIndexModalOverlay": "800",
"zIndexOnTheTop": "900",
"zIndexSticky": "100",
- }
+ },
}
- tokens={
- Object {
- "fontSizeInput": Object {
- "normal": "16px",
- "small": "14px",
- },
- "heightInput": Object {
- "normal": "44px",
- "small": "32px",
- },
- "iconSize": Object {
- "normal": "24px",
- "small": "16px",
- },
- "paddingInput": Object {
- "normal": "12px",
- "small": "12px",
- },
- }
+ }
+ tokens={
+ Object {
+ "fontSizeInput": Object {
+ "normal": "16px",
+ "small": "14px",
+ },
+ "heightInput": Object {
+ "normal": "44px",
+ "small": "32px",
+ },
+ "iconSize": Object {
+ "normal": "24px",
+ "small": "16px",
+ },
+ "paddingInput": Object {
+ "normal": "12px",
+ "small": "12px",
+ },
}
- type="number"
- />
-
+
Something went wrong.
}
+ max={5}
+ min={1}
size="normal"
theme={
Object {
- "backgroundAlertCritical": "#fae8e8",
- "backgroundAlertInfo": "#e0f6ff",
- "backgroundAlertSuccess": "#e7f3e8",
- "backgroundAlertWarning": "#fcf1cd",
- "backgroundBody": "#f5f7f9",
- "backgroundButtonBordered": "transparent",
- "backgroundButtonBorderedActive": "#fff",
- "backgroundButtonBorderedHover": "#f5f7f9",
- "backgroundButtonCritical": "#d21c1c",
- "backgroundButtonCriticalActive": "#b21717",
- "backgroundButtonCriticalHover": "#bd1919",
- "backgroundButtonFacebook": "#3b5998",
- "backgroundButtonFacebookActive": "#354f88",
- "backgroundButtonFacebookHover": "#385490",
- "backgroundButtonGoogle": "#f5f7f9",
- "backgroundButtonGoogleActive": "#d6dee6",
- "backgroundButtonGoogleHover": "#e5eaef",
- "backgroundButtonInfo": "#0176D2",
- "backgroundButtonInfoActive": "#0064b2",
- "backgroundButtonInfoHover": "#006abd",
- "backgroundButtonLinkPrimary": "transparent",
- "backgroundButtonLinkPrimaryActive": "#d6dee6",
- "backgroundButtonLinkPrimaryHover": "#e5eaef",
- "backgroundButtonLinkSecondary": "transparent",
- "backgroundButtonLinkSecondaryActive": "#d6dee6",
- "backgroundButtonLinkSecondaryHover": "#e5eaef",
- "backgroundButtonPrimary": "#00a991",
- "backgroundButtonPrimaryActive": "#008f7b",
- "backgroundButtonPrimaryHover": "#009882",
- "backgroundButtonSecondary": "#e8edf1",
- "backgroundButtonSecondaryActive": "#cad5df",
- "backgroundButtonSecondaryHover": "#d9e1e8",
- "backgroundButtonSuccess": "#46B655",
- "backgroundButtonSuccessActive": "#3fa34c",
- "backgroundButtonSuccessHover": "#42ac50",
- "backgroundButtonWarning": "#f9971e",
- "backgroundButtonWarningActive": "#e68206",
- "backgroundButtonWarningHover": "#f48a06",
- "backgroundCard": "#fff",
- "backgroundCarrierLogo": "transparent",
- "backgroundInput": "#fff",
- "backgroundInputDisabled": "#e8edf1",
- "backgroundModal": "#fff",
- "borderColorButtonCriticalBordered": "#d21c1c",
- "borderColorButtonCriticalBorderedActive": "#b21717",
- "borderColorButtonCriticalBorderedHover": "#bd1919",
- "borderColorButtonFacebookBordered": "#3b5998",
- "borderColorButtonFacebookBorderedActive": "#354f88",
- "borderColorButtonFacebookBorderedHover": "#385490",
- "borderColorButtonGoogleBordered": "#46515e",
- "borderColorButtonGoogleBorderedActive": "#38404b",
- "borderColorButtonGoogleBorderedHover": "#3f4854",
- "borderColorButtonInfoBordered": "#0176D2",
- "borderColorButtonInfoBorderedActive": "#0064b2",
- "borderColorButtonInfoBorderedHover": "#006abd",
- "borderColorButtonPrimaryBordered": "#00a991",
- "borderColorButtonPrimaryBorderedActive": "#008f7b",
- "borderColorButtonPrimaryBorderedHover": "#009882",
- "borderColorButtonSecondaryBordered": "#46515e",
- "borderColorButtonSecondaryBorderedActive": "#38404b",
- "borderColorButtonSecondaryBorderedHover": "#3f4854",
- "borderColorButtonSuccessBordered": "#46B655",
- "borderColorButtonSuccessBorderedActive": "#3fa34c",
- "borderColorButtonSuccessBorderedHover": "#42ac50",
- "borderColorButtonWarningBordered": "#f9971e",
- "borderColorButtonWarningBorderedActive": "#e68206",
- "borderColorButtonWarningBorderedHover": "#f48a06",
- "borderColorCard": "#e8edf1",
- "borderColorInput": "#bac7d5",
- "borderColorInputActive": "#94a8be",
- "borderColorInputError": "#d21c1c",
- "borderColorInputErrorFocus": "#d21c1c",
- "borderColorInputFocus": "#0176D2",
- "borderColorInputHover": "#a6b6c8",
- "borderColorModal": "#e8edf1",
- "borderColorTableCell": "#bac7d5",
- "borderRadiusCircle": "50%",
- "borderRadiusLarge": "6px",
- "borderRadiusNormal": "3px",
- "borderRadiusSmall": "2px",
- "borderStyleCard": "solid",
- "borderStyleInput": "solid",
- "borderWidthCard": "1px",
- "borderWidthInput": "1px",
- "boxShadowInputErrorFocus": "0px 0px 3px 1px rgba(210,28,28,0.3)",
- "boxShadowInputFocus": "0px 0px 3px 1px rgba(1,118,210,0.3)",
- "colorAlertIconCritical": "#d21c1c",
- "colorAlertIconInfo": "#0176D2",
- "colorAlertIconSuccess": "#46B655",
- "colorAlertIconWarning": "#f9971e",
- "colorHeading": "#171b1e",
- "colorHeadingInverted": "#fff",
- "colorIconAttention": "#171b1e",
- "colorIconCheckbox": "#00a991",
- "colorIconCheckboxDisabled": "#bac7d5",
- "colorIconInput": "#bac7d5",
- "colorIconPrimary": "#46515e",
- "colorIconRadioButton": "#00a991",
- "colorIconRadioButtonDisabled": "#bac7d5",
- "colorIconSecondary": "#7f91a8",
- "colorIconTerciary": "#bac7d5",
- "colorLabelForm": "#46515e",
- "colorLabelFormFilled": "#7f91a8",
- "colorPlaceholderInput": "#bac7d5",
- "colorTextAlertCritical": "#650808",
- "colorTextAlertInfo": "#07405c",
- "colorTextAlertSuccess": "#065d12",
- "colorTextAlertWarning": "#a93610",
- "colorTextAttention": "#171b1e",
- "colorTextButtonCritical": "#fff",
- "colorTextButtonCriticalActive": "#fff",
- "colorTextButtonCriticalBordered": "#d21c1c",
- "colorTextButtonCriticalBorderedActive": "#b21717",
- "colorTextButtonCriticalBorderedHover": "#bd1919",
- "colorTextButtonCriticalHover": "#fff",
- "colorTextButtonFacebook": "#fff",
- "colorTextButtonFacebookActive": "#fff",
- "colorTextButtonFacebookBordered": "#3b5998",
- "colorTextButtonFacebookBorderedActive": "#354f88",
- "colorTextButtonFacebookBorderedHover": "#385490",
- "colorTextButtonFacebookHover": "#fff",
- "colorTextButtonFilled": "#fff",
- "colorTextButtonFilledActive": "#fff",
- "colorTextButtonFilledHover": "#fff",
- "colorTextButtonGoogle": "#46515e",
- "colorTextButtonGoogleActive": "#38404b",
- "colorTextButtonGoogleBordered": "#46515e",
- "colorTextButtonGoogleBorderedActive": "#38404b",
- "colorTextButtonGoogleBorderedHover": "#3f4854",
- "colorTextButtonGoogleHover": "#3f4854",
- "colorTextButtonInfo": "#fff",
- "colorTextButtonInfoActive": "#fff",
- "colorTextButtonInfoBordered": "#0176D2",
- "colorTextButtonInfoBorderedActive": "#0064b2",
- "colorTextButtonInfoBorderedHover": "#006abd",
- "colorTextButtonInfoHover": "#fff",
- "colorTextButtonLinkPrimary": "#00a991",
- "colorTextButtonLinkPrimaryActive": "#008f7b",
- "colorTextButtonLinkPrimaryHover": "#009882",
- "colorTextButtonLinkSecondary": "#46515e",
- "colorTextButtonLinkSecondaryActive": "#38404b",
- "colorTextButtonLinkSecondaryHover": "#3f4854",
- "colorTextButtonPrimary": "#fff",
- "colorTextButtonPrimaryActive": "#fff",
- "colorTextButtonPrimaryBordered": "#00a991",
- "colorTextButtonPrimaryBorderedActive": "#008f7b",
- "colorTextButtonPrimaryBorderedHover": "#009882",
- "colorTextButtonPrimaryHover": "#fff",
- "colorTextButtonSecondary": "#46515e",
- "colorTextButtonSecondaryActive": "#38404b",
- "colorTextButtonSecondaryBordered": "#46515e",
- "colorTextButtonSecondaryBorderedActive": "#38404b",
- "colorTextButtonSecondaryBorderedHover": "#3f4854",
- "colorTextButtonSecondaryHover": "#3f4854",
- "colorTextButtonSuccess": "#fff",
- "colorTextButtonSuccessActive": "#fff",
- "colorTextButtonSuccessBordered": "#46B655",
- "colorTextButtonSuccessBorderedActive": "#3fa34c",
- "colorTextButtonSuccessBorderedHover": "#42ac50",
- "colorTextButtonSuccessHover": "#fff",
- "colorTextButtonWarning": "#fff",
- "colorTextButtonWarningActive": "#fff",
- "colorTextButtonWarningBordered": "#f9971e",
- "colorTextButtonWarningBorderedActive": "#e68206",
- "colorTextButtonWarningBorderedHover": "#f48a06",
- "colorTextButtonWarningHover": "#fff",
- "colorTextError": "#d21c1c",
- "colorTextInfo": "#0176D2",
- "colorTextInput": "#46515e",
- "colorTextInputDisabled": "#bac7d5",
- "colorTextLinkPrimary": "#00a991",
- "colorTextLinkPrimaryHover": "#00a991",
- "colorTextLinkSecondary": "#171b1e",
- "colorTextLinkSecondaryHover": "#00a991",
- "colorTextPrimary": "#46515e",
- "colorTextSecondary": "#7f91a8",
- "durationFast": "0.2s",
- "durationNormal": "0.3s",
- "durationSlow": "0.4s",
- "fontFamily": "\\"Roboto\\", -apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif",
- "fontSizeButtonLarge": "16px",
- "fontSizeButtonNormal": "14px",
- "fontSizeButtonSmall": "12px",
- "fontSizeHeadingDisplay": "40px",
- "fontSizeHeadingTitle1": "28px",
- "fontSizeHeadingTitle2": "22px",
- "fontSizeHeadingTitle3": "16px",
- "fontSizeInputNormal": "16px",
- "fontSizeInputSmall": "14px",
- "fontSizeLabelForm": "14px",
- "fontSizeMessage": "14px",
- "fontSizeMessageForm": "12px",
- "fontSizeTextLarge": "16px",
- "fontSizeTextNormal": "14px",
- "fontSizeTextSmall": "12px",
- "fontWeightBold": "700",
- "fontWeightHeadingDisplay": "700",
- "fontWeightHeadingTitle1": "700",
- "fontWeightHeadingTitle2": "500",
- "fontWeightHeadingTitle3": "500",
- "fontWeightLinks": "500",
- "fontWeightMedium": "500",
- "fontWeightNormal": "400",
- "heightButtonLarge": "52px",
- "heightButtonNormal": "44px",
- "heightButtonSmall": "32px",
- "heightCheckbox": "20px",
- "heightCountryFlag": "20px",
- "heightIconLarge": "32px",
- "heightIconMedium": "24px",
- "heightIconSmall": "16px",
- "heightInputLarge": "52px",
- "heightInputNormal": "44px",
- "heightInputSmall": "32px",
- "heightRadioButton": "20px",
- "lineHeightHeading": "1.2",
- "lineHeightText": "1.4",
- "marginButtonIconLarge": "16px",
- "marginButtonIconNormal": "12px",
- "marginButtonIconSmall": "8px",
- "modifierScaleButtonActive": 0.9,
- "opacityButtonDisabled": "0.3",
- "opacityCheckboxDisabled": "0.5",
- "opacityOverlay": "0.8",
- "opacityRadioButtonDisabled": "0.5",
- "paddingAlert": "16px",
- "paddingAlertWithIcon": "12px",
- "paddingButtonLarge": "28px",
- "paddingButtonLargeWithIcon": "12px",
- "paddingButtonNormal": "16px",
- "paddingButtonNormalWithIcon": "8px",
- "paddingButtonSmall": "12px",
- "paddingButtonSmallWithIcon": "8px",
- "paddingInputNormal": "16px",
- "paddingInputSmall": "12px",
- "paletteBlueDark": "#07405c",
- "paletteBlueLight": "#e0f6ff",
- "paletteBlueLightActive": "#b0e8fe",
- "paletteBlueLightHover": "#c8effe",
- "paletteBlueNormal": "#0176D2",
- "paletteBlueNormalActive": "#0064b2",
- "paletteBlueNormalHover": "#006abd",
- "paletteCloudLight": "#f5f7f9",
- "paletteCloudLightActive": "#d6dee6",
- "paletteCloudLightHover": "#e5eaef",
- "paletteCloudNormal": "#e8edf1",
- "paletteCloudNormalActive": "#cad5df",
- "paletteCloudNormalHover": "#d9e1e8",
- "paletteGreenDark": "#065d12",
- "paletteGreenLight": "#e7f3e8",
- "paletteGreenLightActive": "#c7e3c9",
- "paletteGreenLightHover": "#d7ebd8",
- "paletteGreenNormal": "#46B655",
- "paletteGreenNormalActive": "#3fa34c",
- "paletteGreenNormalHover": "#42ac50",
- "paletteInkDark": "#171b1e",
- "paletteInkLight": "#7f91a8",
- "paletteInkLightActive": "#5f738c",
- "paletteInkLightHover": "#6d819c",
- "paletteInkLighter": "#bac7d5",
- "paletteInkLighterActive": "#94a8be",
- "paletteInkLighterHover": "#a6b6c8",
- "paletteInkNormal": "#46515e",
- "paletteInkNormalActive": "#38404b",
- "paletteInkNormalHover": "#3f4854",
- "paletteOrangeDark": "#a93610",
- "paletteOrangeLight": "#fcf1cd",
- "paletteOrangeLightActive": "#f9e4a1",
- "paletteOrangeLightHover": "#faeab7",
- "paletteOrangeNormal": "#f9971e",
- "paletteOrangeNormalActive": "#e68206",
- "paletteOrangeNormalHover": "#f48a06",
- "paletteProductDark": "#005448",
- "paletteProductLight": "#9ae5da",
- "paletteProductLightActive": "#64d7c6",
- "paletteProductLightHover": "#7fded0",
- "paletteProductNormal": "#00a991",
- "paletteProductNormalActive": "#008f7b",
- "paletteProductNormalHover": "#009882",
- "paletteRedDark": "#650808",
- "paletteRedLight": "#fae8e8",
- "paletteRedLightActive": "#f1c0c0",
- "paletteRedLightHover": "#f5d4d4",
- "paletteRedNormal": "#d21c1c",
- "paletteRedNormalActive": "#b21717",
- "paletteRedNormalHover": "#bd1919",
- "paletteSocialFacebook": "#3b5998",
- "paletteSocialFacebookActive": "#354f88",
- "paletteSocialFacebookHover": "#385490",
- "paletteWhite": "#fff",
- "paletteWhiteActive": "#e5eaef",
- "paletteWhiteHover": "#f5f7f9",
- "spaceLarge": "24px",
- "spaceMedium": "16px",
- "spaceSmall": "12px",
- "spaceXLarge": "32px",
- "spaceXSmall": "8px",
- "spaceXXLarge": "40px",
- "spaceXXSmall": "4px",
- "spaceXXXLarge": "52px",
- "textDecorationTextLinkPrimary": "none",
- "textDecorationTextLinkPrimaryHover": "underline",
- "textDecorationTextLinkSecondary": "underline",
- "textDecorationTextLinkSecondaryHover": "underline",
- "widthCheckbox": "20px",
- "widthCountryFlag": "20px",
- "widthIconLarge": "32px",
- "widthIconMedium": "24px",
- "widthIconSmall": "16px",
- "widthRadioButton": "20px",
- "zIndexDefault": "1",
- "zIndexModal": "825",
- "zIndexModalOverlay": "800",
- "zIndexOnTheTop": "900",
- "zIndexSticky": "100",
- }
- }
- tokens={
- Object {
- "fontSizeInput": Object {
- "normal": "16px",
- "small": "14px",
- },
- "heightInput": Object {
- "normal": "44px",
- "small": "32px",
- },
- "iconSize": Object {
- "normal": "24px",
- "small": "16px",
- },
- "paddingInput": Object {
- "normal": "12px",
- "small": "12px",
- },
- }
- }
- />
-
-
-
- Something went wrong.
-
-
-
-`;
-
-exports[`InputField with help, prefix and suffix should match snapshot 1`] = `
-
-
- Label
-
-
-
-
-
-
+ Something went wrong.
+
+ }
+ size="normal"
+ theme={
+ Object {
+ "orbit": Object {
"backgroundAlertCritical": "#fae8e8",
"backgroundAlertInfo": "#e0f6ff",
"backgroundAlertSuccess": "#e7f3e8",
@@ -3766,17 +1350,696 @@ exports[`InputField with help, prefix and suffix should match snapshot 1`] = `
"zIndexModalOverlay": "800",
"zIndexOnTheTop": "900",
"zIndexSticky": "100",
- }
+ },
}
- transparent={true}
- type="primary"
- width={0}
- />
-
-
+
+`;
+
+exports[`InputField with help, prefix and suffix should match snapshot 1`] = `
+