From d0fa615f32ae4214c49d883078b6b532d28d0163 Mon Sep 17 00:00:00 2001
From: Fred Carlsen <fred@sjelfull.no>
Date: Thu, 29 Nov 2018 13:31:04 +0100
Subject: Add transparent button

---
 packages/website/ts/@next/components/button.tsx | 27 +++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts/@next/components')

diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx
index e67f8a8e1..df784b8ef 100644
--- a/packages/website/ts/@next/components/button.tsx
+++ b/packages/website/ts/@next/components/button.tsx
@@ -3,12 +3,13 @@ import styled from 'styled-components';
 
 import { colors } from 'ts/style/colors';
 
-export interface ButtonInterface {
+export interface Props extends ButtonInterface {
     text: string;
-    transparent?: any;
+    transparent?: boolean;
+    inline?: boolean;
 }
 
-const StyledButton = styled.button<ButtonInterface>`
+const StyledButton = styled.button<Props>`
     appearance: none;
     border: 0;
     background-color: ${colors.brandLight};
@@ -17,8 +18,16 @@ const StyledButton = styled.button<ButtonInterface>`
     padding: 13px 22px 14px;
 
     ${props => props.transparent && `
+        background-color: transparent;
         border: 1px solid #6A6A6A;
     `}
+
+    ${props => props.inline && `
+        display: inline-block;
+        & + & {
+            margin-left: 10px;
+        }
+    `}
 `;
 
 const Text = styled.span`
@@ -27,9 +36,15 @@ const Text = styled.span`
     line-height: 1.375rem;
 `;
 
-export const Button: React.StatelessComponent<ButtonInterface> = ({ text, transparent }) => (
-    <StyledButton transparent>
-        <Text>{text}</Text>
+export const Button: React.StatelessComponent<Props> = ({ ...props }) => (
+    <StyledButton {...props}>
+        <Text>{props.text}</Text>
+    </StyledButton>
+);
+
+export const ButtonTransparent: React.StatelessComponent<Props> = ({ ...props }) => (
+    <StyledButton transparent={true} {...props}>
+        <Text>{props.text}</Text>
     </StyledButton>
 );
 
-- 
cgit