Fix button (#47)

* Fix button * Update snapshot * Fix button style
blivesta · Jan 9, 2020 · 545cdc6 · 545cdc6
1 parent 5783ef4
commit 545cdc6
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "screenshot": "zisui --serverCmd 'start-storybook -p 6006 -s ./public' http://localhost:6006 --serverTimeout 1000000 --viewport '1280x800'"
   },
   "dependencies": {
+    "@storybook/addon-actions": "^5.2.8",
     "@storybook/react": "^5.2.8",
     "@types/react": "^16.9.17",
     "chroma-js": "^2.1.0",
@@ -57,7 +58,6 @@
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/preset-env": "^7.7.7",
     "@babel/preset-react": "^7.7.4",
-    "@storybook/addon-actions": "^5.2.8",
     "@storybook/addon-links": "^5.2.8",
     "@storybook/addon-options": "^5.2.8",
     "@storybook/addon-storysource": "^5.2.8",

diff --git a/src/components/atoms/Button/index.stories.tsx b/src/components/atoms/Button/index.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 import Button from '.';
 
 const Wrapper = styled.div`
@@ -9,6 +10,8 @@ const Wrapper = styled.div`
 
 storiesOf(`atoms|Button`, module).add(`default`, () => (
   <Wrapper>
-    <Button type="submit">Button</Button>
+    <Button type="submit" ariaLabel="button" onClick={action('clicked')}>
+      Button
+    </Button>
   </Wrapper>
 ));
diff --git a/src/components/atoms/Button/index.tsx b/src/components/atoms/Button/index.tsx
@@ -32,10 +32,15 @@ const StyledButton = styled.button`
   &:last-child {
     margin-right: 0;
   }
+
   &:hover,
-  &:focus,
   &:active {
-    background-color: ${({ theme }) => theme.colors.button.forcus.bg};
+    background-color: ${({ theme }) => theme.colors.button.hover.bg};
+  }
+
+  &:focus {
+    transition: box-shadow 0.2s ease-out;
+    box-shadow: 0 0 4px 4px ${({ theme }) => theme.colors.button.forcus.shadow};
   }
 `;
 
@@ -44,11 +49,12 @@ export interface ButtonProps {
   type?: 'submit' | 'reset' | 'button';
   name?: string;
   disabled?: boolean;
+  ariaLabel?: string;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
-const Button = ({ children, type, name, disabled, onClick }: ButtonProps) => (
-  <StyledButton type={type} name={name} disabled={disabled} onClick={onClick}>
+const Button = ({ children, type, name, disabled, onClick, ariaLabel }: ButtonProps) => (
+  <StyledButton type={type} name={name} disabled={disabled} onClick={onClick} aria-label={ariaLabel}>
     {children}
   </StyledButton>
 );

diff --git a/src/components/organisms/Header/__snapshots__/index.spec.tsx.snap b/src/components/organisms/Header/__snapshots__/index.spec.tsx.snap
@@ -18,6 +18,7 @@ exports[`Header snapshot 1`] = `
         </styled.li>
         <styled.li>
           <styled.div
+            aria-label="theme switch button"
             onClick={[Function]}
             onKeyPress={[Function]}
             role="button"

diff --git a/src/components/organisms/Header/index.tsx b/src/components/organisms/Header/index.tsx
@@ -93,7 +93,13 @@ const Header = ({ siteTitle, pageLocation, themeSwich, themeState }: HeaderProps
               )}
             </Li>
             <Li>
-              <ModeButton onClick={themeToggle} onKeyPress={themeToggle} role="button" tabIndex={0}>
+              <ModeButton
+                onClick={themeToggle}
+                onKeyPress={themeToggle}
+                role="button"
+                tabIndex={0}
+                aria-label="theme switch button"
+              >
                 {themeState === 'light' ? <IconMoon /> : <IconSun />}
               </ModeButton>
             </Li>

diff --git a/src/components/organisms/NetlifyForm/__snapshots__/index.spec.tsx.snap b/src/components/organisms/NetlifyForm/__snapshots__/index.spec.tsx.snap
@@ -90,6 +90,7 @@ exports[`NetlifyForm snapshot 1`] = `
   </FormItem>
   <styled.div>
     <Button
+      ariaLabel="Submit button"
       type="submit"
     >
       Submit

diff --git a/src/components/organisms/NetlifyForm/index.tsx b/src/components/organisms/NetlifyForm/index.tsx
@@ -81,7 +81,9 @@ const NetlifyForm = () => {
         <Textarea id="meaasage" name="meaasage" required aria-required />
       </FormItem>
       <ButtonBox>
-        <Button type="submit">Submit</Button>
+        <Button type="submit" ariaLabel="Submit button">
+          Submit
+        </Button>
       </ButtonBox>
     </Form>
   );

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -94,12 +94,16 @@ export const darkTheme = {
     button: {
       bg: 'transparent',
       border: '#fff',
-      forcus: {
+      hover: {
         bg: chroma(mainColor)
           .brighten(2)
           .alpha(0.2)
           .hex(),
-        border: '#fff',
+      },
+      forcus: {
+        shadow: chroma('#fff')
+          .alpha(0.3)
+          .hex(),
       },
     },
   },
@@ -134,12 +138,16 @@ export const lightTheme = {
     button: {
       bg: 'transparent',
       border: mainColor,
-      forcus: {
+      hover: {
         bg: chroma(mainColor)
           .brighten(2)
           .alpha(0.2)
           .hex(),
-        border: mainColor,
+      },
+      forcus: {
+        shadow: chroma(mainColor)
+          .alpha(0.15)
+          .hex(),
       },
     },
   },