Merge pull request react95-io#39 from arturbien/new-components

Flat variants for components
Mrpanquecas · May 22, 2019 · d652580 · d652580
2 parents b5aa123 + bdb6915
commit d652580
Show file tree

Hide file tree

Showing 24 changed files with 724 additions and 256 deletions.
diff --git a/src/components/Bar/Bar.stories.js b/src/components/Bar/Bar.stories.js
@@ -21,10 +21,8 @@ storiesOf("Bar", module)
     <AppBar>
       <Toolbar>
         <Bar />
-        <Button flat accent>
-          Edit
-        </Button>
-        <Button flat accent disabled>
+        <Button variant="menu">Edit</Button>
+        <Button variant="menu" disabled>
           Save
         </Button>
         <Bar />

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -1,41 +1,61 @@
 import React from "react";
 import propTypes from "prop-types";
 
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import {
   createBorderStyles,
+  createWellBorderStyles,
   createBoxStyles,
+  createFlatBoxStyles,
   createDisabledTextStyles
 } from "../common";
 import { blockSizes, fontSizes, padding } from "../common/system";
 
-const StyledButton = styled.button`
-  ${createBoxStyles()};
+const commonButtonStyles = css`
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  ${props =>
-    props.flat
-      ? null
-      : props.active
-      ? createBorderStyles(true)
-      : createBorderStyles(false)}
-  height: ${props => blockSizes[props.size]};
-  width: ${props =>
-    props.fullWidth ? "100%" : props.square ? blockSizes[props.size] : "auto"};
-  padding: ${props => (props.square ? 0 : "0 " + padding.sm)};
+  height: ${({ size }) => blockSizes[size]};
+  width: ${({ fullWidth, square, size }) =>
+    fullWidth ? "100%" : square ? blockSizes[size] : "auto"};
+  padding: ${({ square }) => (square ? 0 : "0 " + padding.sm)};
   font-size: ${fontSizes.md};
-    
-  ${props => props.isDisabled && createDisabledTextStyles()}
   &:active {
-    ${props => !props.isDisabled && !props.flat && createBorderStyles(true)}
-   
-    padding-top: ${props => !props.isDisabled && "2px"};
-    
+    padding-top: ${({ isDisabled }) => !isDisabled && "2px"};
   }
-  padding-top: ${props => props.active && !props.isDisabled && "2px"};
-  ${props => props.flat && "border: none;"}
+  padding-top: ${({ active, isDisabled }) => active && !isDisabled && "2px"};
+`;
+
+const StyledButton = styled.button`
+  ${({ variant }) =>
+    variant === "flat"
+      ? css`
+          ${createFlatBoxStyles()} /* background: none; */
+        `
+      : variant === "menu"
+      ? css`
+          ${createBoxStyles()};
+          border: 2px solid transparent;
+          &:hover {
+            ${({ isDisabled }) => !isDisabled && createWellBorderStyles(false)}
+          }
+          &:active {
+            ${({ isDisabled }) => !isDisabled && createWellBorderStyles(true)}
+          }
+          ${({ active }) => active && createBorderStyles(true)}
+          ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
+        `
+      : css`
+          ${createBoxStyles()};
+          ${({ active }) =>
+            active ? createBorderStyles(true) : createBorderStyles(false)}
+          &:active {
+            ${({ isDisabled }) => !isDisabled && createBorderStyles(true)}
+          }
+          ${({ isDisabled }) => isDisabled && createDisabledTextStyles()}
+        `}
+  ${commonButtonStyles}
 `;
 
 const Button = ({
@@ -47,22 +67,22 @@ const Button = ({
   size,
   square,
   active,
-  flat,
+  variant,
   className,
   children,
   ...otherProps
 }) => {
   return (
     <StyledButton
       type={type}
+      variant={variant}
       onClick={disabled ? undefined : onClick}
       style={style}
       isDisabled={disabled}
       fullWidth={fullWidth}
       size={size}
       square={square}
       active={active}
-      flat={flat}
       className={className}
       style={style}
       // onTouchStart below to enable button :active style on iOS
@@ -83,7 +103,7 @@ Button.defaultProps = {
   size: "md",
   square: false,
   active: false,
-  flat: false
+  variant: "default"
 };
 
 Button.propTypes = {
@@ -95,7 +115,7 @@ Button.propTypes = {
   size: propTypes.oneOf(["sm", "md", "lg"]),
   square: propTypes.bool,
   active: propTypes.bool,
-  flat: propTypes.bool,
+  variant: propTypes.oneOf(["default", "menu", "flat"]),
   className: propTypes.string,
   children: propTypes.node.isRequired
 };

diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
@@ -3,11 +3,15 @@ import { withInfo } from "@storybook/addon-info";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 
-import styled from "styled-components";
+import styled, {ThemeProvider} from "styled-components";
 
-import Button from "./Button";
+import { Button, Window, WindowContent, Cutout, Toolbar } from "../";
 export const actions = { onClick: action("onClick") };
 
+const StyledCutout = styled(Cutout)`
+  background: ${({theme})=>theme.canvas};
+`;
+
 storiesOf("Button", module)
   .addDecorator(story => (
     <div
@@ -45,8 +49,36 @@ storiesOf("Button", module)
       💖
     </Button>
   ))
-  .add("flat", () => (
-    <Button {...actions} flat size="sm" accent>
+  .add("menu button", () => (
+    <Button {...actions} variant="menu" size="sm" accent>
       File
     </Button>
+  ))
+  .add("flat button", () => (
+    <Window>
+      <WindowContent>
+        <StyledCutout
+          style={{ padding: "1rem", width: "300px" }}
+        >
+          <p style={{ lineHeight: 1.3 }}>
+            When you want to use Buttons on a light background (like scrollable
+            content), just use the flat variant:
+          </p>
+          <div
+            style={{
+              marginTop: "1.5rem"
+            }}
+          >
+            <Toolbar>
+              <Button {...actions} variant="flat" fullWidth accent>
+                OK
+              </Button>
+              <Button {...actions} variant="flat" disabled fullWidth accent>
+                Cancel
+              </Button>
+            </Toolbar>
+          </div>
+        </StyledCutout>
+      </WindowContent>
+    </Window>
   ));
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import propTypes from "prop-types";
 
 import styled, { css } from "styled-components";
-import { createDisabledTextStyles } from "../common";
+import { createDisabledTextStyles, createFlatBoxStyles } from "../common";
+
 import { padding, fontSizes } from "../common/system";
 import Cutout from "../Cutout/Cutout";
 
@@ -44,27 +45,37 @@ const createCheckmarkSymbol = ({ checked }) =>
       transform: translate(-50%, -50%) rotate(45deg);
     }
   `;
-const StyledCheckmark = styled(Cutout)`
+const sharedCheckmarkStyles = css`
   position: absolute;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
+  ${props => createCheckmarkSymbol(props)}
+`;
+const StyledCheckmark = styled(Cutout)`
+  ${sharedCheckmarkStyles}
   background: ${({ theme, isDisabled }) =>
     isDisabled ? theme.material : theme.canvas};
-  ${props => createCheckmarkSymbol(props)};
   box-shadow: ${({ shadow }) =>
     shadow ? `inset 3px 3px 10px rgba(0, 0, 0, 0.1)` : "none"};
   &:before {
     box-shadow: none;
   }
 `;
-
+const StyledFlatCheckmark = styled.div`
+  ${createFlatBoxStyles()}
+  ${sharedCheckmarkStyles}
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.flatLight : theme.canvas};
+  
+`;
 const Checkbox = ({
   onChange,
   label,
   disabled,
+  variant,
   value,
   checked,
   defaultChecked,
@@ -74,8 +85,9 @@ const Checkbox = ({
   shadow,
   ...otherProps
 }) => {
-  let Input, isChecked;
+  let Input;
 
+  const Checkmark = variant === "flat" ? StyledFlatCheckmark : StyledCheckmark;
   if (defaultChecked || checked === undefined) {
     const [state, setState] = useState(defaultChecked || false);
 
@@ -95,11 +107,7 @@ const Checkbox = ({
           name={name}
           {...otherProps}
         />
-        <StyledCheckmark
-          checked={state}
-          isDisabled={disabled}
-          shadow={shadow}
-        />
+        <Checkmark checked={state} isDisabled={disabled} shadow={shadow} />
       </>
     );
   } else {
@@ -114,11 +122,7 @@ const Checkbox = ({
           name={name}
           {...otherProps}
         />
-        <StyledCheckmark
-          checked={checked}
-          isDisabled={disabled}
-          shadow={shadow}
-        />
+        <Checkmark checked={checked} isDisabled={disabled} shadow={shadow} />
       </>
     );
   }
@@ -135,6 +139,7 @@ Checkbox.defaultProps = {
   value: null,
   label: "",
   disabled: false,
+  variant: "default",
   shadow: true
 };
 
@@ -149,6 +154,7 @@ Checkbox.propTypes = {
   label: propTypes.oneOfType([propTypes.string, propTypes.number]),
   checked: propTypes.bool,
   disabled: propTypes.bool,
+  variant: propTypes.oneOf(["default", "flat"]),
   shadow: propTypes.bool,
   style: propTypes.object
 };

diff --git a/src/components/Checkbox/Checkbox.stories.js b/src/components/Checkbox/Checkbox.stories.js
@@ -1,26 +1,48 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import styled from "styled-components";
 
-import Checkbox from "./Checkbox";
-import { Fieldset, Toolbar, Button } from "../";
+import { Checkbox, Fieldset, Toolbar, Button, Cutout } from "../";
+
+const StyledCutout = styled(Cutout)`
+  background: ${({ theme }) => theme.canvas};
+`;
+const Wrapper = styled.div`
+  background: ${({ theme }) => theme.material};
+  padding: 5rem;
+`;
 storiesOf("Checkbox", module)
-  .addDecorator(story => (
-    <div
-      style={{
-        padding: "5rem",
-        background: "#ced0cf"
-      }}
-    >
-      {story()}
-    </div>
-  ))
+  .addDecorator(story => <Wrapper>{story()}</Wrapper>)
   .add("controlled group", () => <ControlledCheckboxGroupExample />)
   .add("uncontrolled", () => (
     <Checkbox
       defaultChecked={true}
       value="single"
       label="I'm single 😥 ...and no one's controlling me 😎"
     />
+  ))
+  .add("flat", () => (
+    <StyledCutout style={{ padding: "1rem", width: "300px" }}>
+      <p style={{ lineHeight: 1.3 }}>
+        When you want to add input field on a light background (like scrollable
+        content), just use the flat variant:
+      </p>
+      <div style={{ marginTop: "1rem" }}>
+        <Checkbox
+          variant="flat"
+          defaultChecked={true}
+          value="single"
+          label="Earth is flat 🌍"
+        />
+        <Checkbox
+          variant="flat"
+          defaultChecked={false}
+          value="single"
+          label="Reptilians rule the world 🦎"
+          disabled
+        />
+      </div>
+    </StyledCutout>
   ));
 
 class ControlledCheckboxGroupExample extends React.Component {