Button to Tailwind

docs/src/components/BrandedTile.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Heading, Stack, Button, mediaQueries as mq } from "@kiwicom/orbit-components";
-import { StyledButtonPrimitive } from "@kiwicom/orbit-components/lib/primitives/ButtonPrimitive";
 import useTheme from "@kiwicom/orbit-components/lib/hooks/useTheme";
 import styled, { css } from "styled-components";
 
@@ -40,18 +39,18 @@ const StyledWrapper = styled.a<{ primary: string; type?: "primary" | "secondary"
       ${boxShadowActive};
     }
 
-    ${StyledButtonPrimitive} {
+    .orbit-button-primitive {
       pointer-events: none;
       background: ${getBgColor({ theme, type, color })};
     }
 
-    &:hover ${StyledButtonPrimitive} {
+    &:hover .orbit-button-primitive {
       background: ${getBgColorHover({ theme, type, color })}
     }
-    &:focus ${StyledButtonPrimitive} {
+    &:focus .orbit-button-primitive {
       background: ${getBgColor({ theme, type, color })}
     }
-    &:active ${StyledButtonPrimitive} {
+    &:active .orbit-button-primitive {
       background: ${getBgColorActive({ theme, type, color })}
     }
   `};

packages/orbit-components/src/Button/Button.stories.tsx

@@ -11,9 +11,9 @@ import SPACINGS_AFTER from "../common/getSpacingToken/consts";
 import Button from ".";
 
 const getIcons = (name: string, defaultIcon: string) =>
-  select(name, Object.keys(Icons), defaultIcon);
+  select(name, ["none", ...Object.keys(Icons)], defaultIcon);
 
-const getIcon = (source: string | null) => (source ? Icons[source] : null);
+const getIcon = (source: string) => (source in Icons ? Icons[source] : null);
 
 export default {
   title: "Button",

packages/orbit-components/src/Button/consts.ts

@@ -15,24 +15,3 @@ export enum SIZE_OPTIONS {
   NORMAL = "normal",
   LARGE = "large",
 }
-
-export enum TOKENS {
-  // Size tokens
-  heightButton = "heightButton",
-  loadingWidth = "loadingWidth",
-  loadingHeight = "loadingHeight",
-  fontSizeButton = "fontSizeButton",
-  paddingButton = "paddingButton",
-  paddingButtonWithIcons = "paddingButtonWithIcons",
-  paddingButtonWithLeftIcon = "paddingButtonWithLeftIcon",
-  paddingButtonWithRightIcon = "paddingButtonWithRightIcon",
-  // Type tokens
-  backgroundButton = "backgroundButton",
-  backgroundButtonHover = "backgroundButtonHover",
-  backgroundButtonActive = "backgroundButtonActive",
-  backgroundButtonFocus = "backgroundButtonFocus",
-  colorTextButton = "colorTextButton",
-  colorTextButtonHover = "colorTextButtonHover",
-  colorTextButtonActive = "colorTextButtonActive",
-  borderColorButtonFocus = "borderColorButtonFocus",
-}