From b158a6d7226fb50ecedcc07da8ef30e5e5690e46 Mon Sep 17 00:00:00 2001
From: August Skare <post@augustskare.no>
Date: Thu, 18 Oct 2018 13:28:44 +0200
Subject: initial commit

---
 .../dev-tools-pages/ts/components/ui/button.tsx    | 59 ----------------------
 1 file changed, 59 deletions(-)
 delete mode 100644 packages/dev-tools-pages/ts/components/ui/button.tsx

(limited to 'packages/dev-tools-pages/ts/components/ui/button.tsx')

diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx
deleted file mode 100644
index 754eca40e..000000000
--- a/packages/dev-tools-pages/ts/components/ui/button.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { darken, saturate } from 'polished';
-import * as React from 'react';
-import styled from 'styled-components';
-
-/**
- * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS
- * SEE: https://www.styled-components.com/docs/basics#coming-from-css
- */
-export interface ButtonProps {
-    backgroundColor?: string;
-    borderColor?: string;
-    width?: string;
-    padding?: string;
-    type?: string;
-    isDisabled?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    className?: string;
-}
-
-const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
-    <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
-        {children}
-    </button>
-);
-
-const darkenOnHoverAmount = 0.1;
-const darkenOnActiveAmount = 0.2;
-const saturateOnFocusAmount = 0.2;
-export const Button = styled(PlainButton)`
-    cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
-    transition: background-color, opacity 0.5s ease;
-    padding: ${props => props.padding};
-    border-radius: 3px;
-    outline: none;
-    width: ${props => props.width};
-    background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')};
-    border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')};
-    &:hover {
-        background-color: ${props =>
-            !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important;
-    }
-    &:active {
-        background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')};
-    }
-    &:disabled {
-        opacity: 0.5;
-    }
-    &:focus {
-        background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)};
-    }
-`;
-
-Button.defaultProps = {
-    backgroundColor: 'red',
-    width: 'auto',
-    isDisabled: false,
-    padding: '1em 2.2em',
-};
-Button.displayName = 'Button';
-- 
cgit v1.2.3