feat: add style

src/components/Accordion/AccordionTrigger.tsx

@@ -1,17 +1,23 @@
 import React, { useContext } from 'react'
-import { withTheme } from '../../hocs/withTheme'
+import { withTheme, InjectedProps } from '../../hocs/withTheme'
 import { AccordionContext } from './Accordion'
+import styled, { css } from 'styled-components'
 
 type Props = {
-  children: React.ReactElement | string
-  disabled?: boolean
+  children: React.ReactNode
   className?: string
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
 }
 
-const AccordionTriggerComponent: React.SFC<Props> = ({
+type MergedProps = Props & InjectedProps
+
+const AccordionTriggerComponent: React.SFC<MergedProps> = ({
   children,
-  disabled = false,
   className = '',
+  prefix = '',
+  suffix = '',
+  theme,
 }) => {
   const { expanded, name, onClick } = useContext(AccordionContext)
 
@@ -20,29 +26,64 @@ const AccordionTriggerComponent: React.SFC<Props> = ({
   }
 
   return (
-    <button
+    <Button
       onClick={handleClick}
-      disabled={disabled}
       className={`${className} ${expanded ? 'expanded' : ''}`}
+      theme={theme}
     >
-      {React.Children.map(children, (child: any) => {
-        switch (typeof child) {
-          case 'string':
-            return child
-
-          case 'object':
-            return React.cloneElement(child, {
-              className: `${expanded ? 'expanded' : ''}`,
-            })
-
-          default:
-            return null
-        }
-      })}
-    </button>
+      {prefix && <Prefix theme={theme}>{prefix}</Prefix>}
+      {children}
+      {suffix && <Suffix theme={theme}>{suffix}</Suffix>}
+    </Button>
   )
 }
 
-AccordionTriggerComponent.displayName = 'AccordionTriggerComponent'
-
 export const AccordionTrigger = withTheme(AccordionTriggerComponent)
+
+const resetButtonStyle = css`
+  background-color: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  appearance: none;
+`
+
+const Button = styled.button`
+  ${resetButtonStyle}
+  ${({ theme }: InjectedProps) => {
+    const { size, palette } = theme
+
+    return css`
+      display:flex;
+      align-items: center;
+      width: 100%;
+      height: 40px;
+      padding: 0 ${size.pxToRem(size.space.XS)}
+      color: ${palette.TEXT_BLACK};
+      font-size: ${size.pxToRem(size.font.TALL)};
+      text-align: left;
+      cursor: pointer;
+    `
+  }}
+`
+
+const Prefix = styled.span`
+  ${({ theme }: InjectedProps) => {
+    const { size } = theme
+
+    return css`
+      display: inline-flex;
+      margin-right: ${size.pxToRem(size.space.XXS)};
+    `
+  }}
+`
+const Suffix = styled.span`
+  ${({ theme }: InjectedProps) => {
+    const { size } = theme
+
+    return css`
+      display: inline-flex;
+      margin-left: ${size.pxToRem(size.space.XXS)};
+    `
+  }}
+`