feat: add style

kufu · Oct 28, 2019 · 2c99af2 · 2c99af2
1 parent df2623d
commit 2c99af2
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 11 deletions.
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react'
 import { Accordion } from './Accordion'
 import { AccordionTrigger } from './AccordionTrigger'
 import { AccordionContent } from './AccordionContent'
+import { Icon } from '../Icon'
 
 storiesOf('Accordion', module).add('Accordion', () => {
   const [state, setstate] = useState('')
@@ -13,13 +14,13 @@ storiesOf('Accordion', module).add('Accordion', () => {
   return (
     <>
       <Accordion name="accordion-0" expanded={state === 'accordion-0'} onClick={handleClick}>
-        <AccordionTrigger>Accordion 0</AccordionTrigger>
+        <AccordionTrigger prefix={<Icon name="fa-caret-up" />}>Accordion 0</AccordionTrigger>
         <AccordionContent>
           <div>Content of Accordion 0</div>
         </AccordionContent>
       </Accordion>
       <Accordion name="accordion-1" expanded={state === 'accordion-1'} onClick={handleClick}>
-        <AccordionTrigger>Accordion 1</AccordionTrigger>
+        <AccordionTrigger suffix={<Icon name="fa-caret-up" />}>Accordion 1</AccordionTrigger>
         <AccordionContent>
           <div>Content of Accordion 1</div>
         </AccordionContent>

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -5,10 +5,11 @@ type Props = {
   children: React.ReactNode
   expanded?: boolean
   name: string
+  bordered?: boolean
   onClick: (name: string, expanded: boolean) => void
 }
 
-type ContextType = Omit<Props, 'children'>
+type ContextType = Omit<Props, 'children' | 'bordered'>
 
 export const AccordionContext = React.createContext<ContextType>({
   expanded: false,

diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx
@@ -69,6 +69,7 @@ const AccordionContentComponent: React.FC<Props & InjectedProps> = ({ children }
 
 export const AccordionContent = withTheme(AccordionContentComponent)
 
+// TODO: transition 調整する
 const CollapseContainer = styled.div`
   height: 0;
   overflow: hidden;

diff --git a/src/components/Accordion/AccordionTrigger.tsx b/src/components/Accordion/AccordionTrigger.tsx
@@ -2,6 +2,7 @@ import React, { useContext } from 'react'
 import { withTheme, InjectedProps } from '../../hocs/withTheme'
 import { AccordionContext } from './Accordion'
 import styled, { css } from 'styled-components'
+import { isTouchDevice } from '../../libs/ua'
 
 type Props = {
   children: React.ReactNode
@@ -20,20 +21,28 @@ const AccordionTriggerComponent: React.SFC<MergedProps> = ({
   theme,
 }) => {
   const { expanded, name, onClick } = useContext(AccordionContext)
+  const expandedClassName = expanded ? 'expanded' : ''
+
+  // prettier-ignore
+  const classNames = `${className} ${expandedClassName} ${prefix ? 'prefix' : ''} ${suffix ? 'suffix' : ''}`
 
   const handleClick = () => {
     return onClick(name, !expanded)
   }
 
   return (
-    <Button
-      onClick={handleClick}
-      className={`${className} ${expanded ? 'expanded' : ''}`}
-      theme={theme}
-    >
-      {prefix && <Prefix theme={theme}>{prefix}</Prefix>}
+    <Button onClick={handleClick} className={classNames} theme={theme}>
+      {prefix && (
+        <Prefix className={expandedClassName} theme={theme}>
+          {prefix}
+        </Prefix>
+      )}
       {children}
-      {suffix && <Suffix theme={theme}>{suffix}</Suffix>}
+      {suffix && (
+        <Suffix className={expandedClassName} theme={theme}>
+          {suffix}
+        </Suffix>
+      )}
     </Button>
   )
 }
@@ -51,7 +60,7 @@ const resetButtonStyle = css`
 const Button = styled.button`
   ${resetButtonStyle}
   ${({ theme }: InjectedProps) => {
-    const { size, palette } = theme
+    const { size, palette, interaction } = theme
 
     return css`
       display:flex;
@@ -63,6 +72,19 @@ const Button = styled.button`
       font-size: ${size.pxToRem(size.font.TALL)};
       text-align: left;
       cursor: pointer;
+      transition: ${isTouchDevice ? 'none' : `all ${interaction.hover.animation}`};
+
+      &:hover {
+        background-color: ${palette.hoverColor('#fff')};
+      }
+
+      &.suffix {
+        justify-content: space-between;
+      }
+
+      &.prefix {
+        justify-content: left;
+      }
     `
   }}
 `
@@ -74,6 +96,11 @@ const Prefix = styled.span`
     return css`
       display: inline-flex;
       margin-right: ${size.pxToRem(size.space.XXS)};
+      transition: all 0.3s;
+
+      &.expanded {
+        transform: rotate(180deg);
+      }
     `
   }}
 `
@@ -84,6 +111,11 @@ const Suffix = styled.span`
     return css`
       display: inline-flex;
       margin-left: ${size.pxToRem(size.space.XXS)};
+      transition: all 0.3s;
+
+      &.expanded {
+        transform: rotate(180deg);
+      }
     `
   }}
 `