fix: move icon props to Accordion component

kufu · Oct 30, 2019 · e6717aa · e6717aa
1 parent d9609db
commit e6717aa
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -54,9 +54,10 @@ storiesOf('Accordion', module)
                 <Accordion
                   name={`right-icon-${index}`}
                   expanded={state === `right-icon-${index}`}
+                  icon="right"
                   onClick={handleClick}
                 >
-                  <AccordionTrigger icon="right">Right Icon {index}</AccordionTrigger>
+                  <AccordionTrigger>Right Icon {index}</AccordionTrigger>
                   <AccordionContent>
                     <Content>{lorem}</Content>
                   </AccordionContent>
@@ -72,9 +73,10 @@ storiesOf('Accordion', module)
                 <Accordion
                   name={`no-icon-${index}`}
                   expanded={state === `no-icon-${index}`}
+                  icon="none"
                   onClick={handleClick}
                 >
-                  <AccordionTrigger icon="none">No Icon {index}</AccordionTrigger>
+                  <AccordionTrigger>No Icon {index}</AccordionTrigger>
                   <AccordionContent>
                     <Content>{lorem}</Content>
                   </AccordionContent>
@@ -90,9 +92,10 @@ storiesOf('Accordion', module)
                 <Accordion
                   name={`no-border-${index}`}
                   expanded={state === `no-border-${index}`}
+                  icon="none"
                   onClick={handleClick}
                 >
-                  <AccordionTrigger icon="none">No Border {index}</AccordionTrigger>
+                  <AccordionTrigger>No Border {index}</AccordionTrigger>
                   <AccordionContent>
                     <Content>{lorem}</Content>
                   </AccordionContent>

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -5,6 +5,7 @@ type Props = {
   children: React.ReactNode
   expanded?: boolean
   name: string
+  icon?: 'left' | 'right' | 'none'
   onClick: (name: string, expanded: boolean) => void
 }
 
@@ -16,12 +17,19 @@ export const AccordionContext = React.createContext<ContextType>({
   onClick: () => {},
 })
 
-const AccordionComponent: React.FC<Props> = ({ children, name, expanded = false, onClick }) => {
+const AccordionComponent: React.FC<Props> = ({
+  children,
+  name,
+  expanded = false,
+  icon = 'left',
+  onClick,
+}) => {
   return (
     <AccordionContext.Provider
       value={{
         expanded,
         name,
+        icon,
         onClick,
       }}
     >

diff --git a/src/components/Accordion/AccordionTrigger.tsx b/src/components/Accordion/AccordionTrigger.tsx
@@ -8,18 +8,12 @@ import { Icon as IconComponent } from '../Icon'
 type Props = {
   children: React.ReactNode
   className?: string
-  icon?: 'left' | 'right' | 'none'
 }
 
 type MergedProps = Props & InjectedProps
 
-const AccordionTriggerComponent: React.SFC<MergedProps> = ({
-  children,
-  className = '',
-  icon = 'left',
-  theme,
-}) => {
-  const { expanded, name, onClick } = useContext(AccordionContext)
+const AccordionTriggerComponent: React.SFC<MergedProps> = ({ children, className = '', theme }) => {
+  const { expanded, name, onClick, icon } = useContext(AccordionContext)
 
   const expandedClassName = expanded ? 'expanded' : ''
   const buttonClassNames = `${className} ${expandedClassName} ${icon}`

diff --git a/src/components/Accordion/README.md b/src/components/Accordion/README.md
@@ -3,8 +3,8 @@
 ```tsx
 import { Accordion, AccordionTrigger, AccordionContent } from 'smarthr-ui'
 
-<Accordion name="accordion" expanded={true} onClick={handleClick}>
-  <AccordionTrigger icon="none">accodion trigger</AccordionTrigger>
+<Accordion name="accordion" expanded={true} icon="none" onClick={handleClick}>
+  <AccordionTrigger>accodion trigger</AccordionTrigger>
   <AccordionContent>
     <Content>accordion content</Content>
   </AccordionContent>
@@ -19,10 +19,6 @@ import { Accordion, AccordionTrigger, AccordionContent } from 'smarthr-ui'
 | -------- | -------- | ------------ | ------------ | ---------------------------------------------------------------------------------------------------- |
 | name     | ✓        | **string**   | -            | Name for Accordion                                                                                   |
 | expanded | ✓        | **boolean**  | false        | If true, expands the panel, otherwise collapse the panel.                                            |
+| icon | -        | **string** <br> left &#124; right &#124; none | left         | Position of icon. If sets 'none', icon is not display. |
 | onClick  | ✓        | **function** | -            | Fires when the AccordionTrigger clicked. <br><br>function: (name: string, expanded: boolean) => void |
 
-### AccordionTrigger component
-
-| Name | Required | Type                                          | DefaultValue | Description                                            |
-| ---- | -------- | --------------------------------------------- | ------------ | ------------------------------------------------------ |
-| icon | -        | **string** <br> left &#124; right &#124; none | left         | Position of icon. If sets 'none', icon is not display. |