fix: AccordionPanel -> AccordionPanelItem

kufu · Oct 31, 2019 · c221c65 · c221c65
1 parent 1d0dd75
commit c221c65
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 20 deletions.
diff --git a/src/components/AccordionPanel/AccordionPanel.stories.tsx b/src/components/AccordionPanel/AccordionPanel.stories.tsx
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/react'
 import React, { useState } from 'react'
 import styled from 'styled-components'
 
-import { AccordionPanel } from './AccordionPanel'
+import { AccordionPanelItem } from './AccordionPanelItem'
 import { AccordionPanelTrigger } from './AccordionPanelTrigger'
 import { AccordionPanelContent } from './AccordionPanelContent'
 import { Base as BaseComponent } from '../Base'
@@ -31,7 +31,7 @@ storiesOf('AccordionPanel', module)
           <ul>
             {arr.map((_, index) => (
               <li className="border" key={index}>
-                <AccordionPanel
+                <AccordionPanelItem
                   name={`left-icon-${index}`}
                   expanded={state === `left-icon-${index}`}
                   onClick={handleClick}
@@ -42,7 +42,7 @@ storiesOf('AccordionPanel', module)
                       <div>{lorem}</div>
                     </Content>
                   </AccordionPanelContent>
-                </AccordionPanel>
+                </AccordionPanelItem>
               </li>
             ))}
           </ul>
@@ -51,7 +51,7 @@ storiesOf('AccordionPanel', module)
           <ul>
             {arr.map((_, index) => (
               <li className="border" key={index}>
-                <AccordionPanel
+                <AccordionPanelItem
                   name={`right-icon-${index}`}
                   expanded={state === `right-icon-${index}`}
                   icon="right"
@@ -61,7 +61,7 @@ storiesOf('AccordionPanel', module)
                   <AccordionPanelContent>
                     <Content>{lorem}</Content>
                   </AccordionPanelContent>
-                </AccordionPanel>
+                </AccordionPanelItem>
               </li>
             ))}
           </ul>
@@ -70,7 +70,7 @@ storiesOf('AccordionPanel', module)
           <ul>
             {arr.map((_, index) => (
               <li className="border" key={index}>
-                <AccordionPanel
+                <AccordionPanelItem
                   name={`no-icon-${index}`}
                   expanded={state === `no-icon-${index}`}
                   icon="none"
@@ -80,7 +80,7 @@ storiesOf('AccordionPanel', module)
                   <AccordionPanelContent>
                     <Content>{lorem}</Content>
                   </AccordionPanelContent>
-                </AccordionPanel>
+                </AccordionPanelItem>
               </li>
             ))}
           </ul>
@@ -89,7 +89,7 @@ storiesOf('AccordionPanel', module)
           <ul>
             {arr.map((_, index) => (
               <li key={index}>
-                <AccordionPanel
+                <AccordionPanelItem
                   name={`no-border-${index}`}
                   expanded={state === `no-border-${index}`}
                   icon="none"
@@ -99,7 +99,7 @@ storiesOf('AccordionPanel', module)
                   <AccordionPanelContent>
                     <Content>{lorem}</Content>
                   </AccordionPanelContent>
-                </AccordionPanel>
+                </AccordionPanelItem>
               </li>
             ))}
           </ul>

diff --git a/src/components/AccordionPanel/AccordionPanelContent.tsx b/src/components/AccordionPanel/AccordionPanelContent.tsx
@@ -2,7 +2,7 @@ import React, { useContext, useCallback } from 'react'
 import styled from 'styled-components'
 import { Transition } from 'react-transition-group'
 import { InjectedProps, withTheme } from '../../hocs/withTheme'
-import { AccordionPanelContext } from './AccordionPanel'
+import { AccordionPanelItemContext } from './AccordionPanelItem'
 
 type Props = {
   children: React.ReactNode
@@ -13,7 +13,7 @@ const AccordionPanelContentComponent: React.FC<Props & InjectedProps> = ({
   children,
   className = '',
 }) => {
-  const { expanded, name } = useContext(AccordionPanelContext)
+  const { expanded, name } = useContext(AccordionPanelItemContext)
   const wrapperRef = React.useRef<HTMLDivElement>(null)
 
   const handleEntering = useCallback(

diff --git a/...ponents/AccordionPanel/AccordionPanel.tsx → ...nts/AccordionPanel/AccordionPanelItem.tsx b/...ponents/AccordionPanel/AccordionPanel.tsx → ...nts/AccordionPanel/AccordionPanelItem.tsx
@@ -11,22 +11,22 @@ type Props = {
 
 type ContextType = Omit<Props, 'children'>
 
-export const AccordionPanelContext = React.createContext<ContextType>({
+export const AccordionPanelItemContext = React.createContext<ContextType>({
   expanded: false,
   name: '',
   icon: 'left',
   onClick: () => {},
 })
 
-const AccordionPanelComponent: React.FC<Props> = ({
+const AccordionPanelItemComponent: React.FC<Props> = ({
   children,
   name,
   expanded = false,
   icon = 'left',
   onClick,
 }) => {
   return (
-    <AccordionPanelContext.Provider
+    <AccordionPanelItemContext.Provider
       value={{
         expanded,
         name,
@@ -35,8 +35,8 @@ const AccordionPanelComponent: React.FC<Props> = ({
       }}
     >
       {children}
-    </AccordionPanelContext.Provider>
+    </AccordionPanelItemContext.Provider>
   )
 }
 
-export const AccordionPanel = withTheme(AccordionPanelComponent)
+export const AccordionPanelItem = withTheme(AccordionPanelItemComponent)
diff --git a/src/components/AccordionPanel/AccordionPanelTrigger.tsx b/src/components/AccordionPanel/AccordionPanelTrigger.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import { withTheme, InjectedProps } from '../../hocs/withTheme'
-import { AccordionPanelContext } from './AccordionPanel'
+import { AccordionPanelItemContext } from './AccordionPanelItem'
 import styled, { css } from 'styled-components'
 import { isTouchDevice } from '../../libs/ua'
 import { Icon as IconComponent } from '../Icon'
@@ -17,7 +17,7 @@ const AccordionPanelTriggerComponent: React.SFC<MergedProps> = ({
   className = '',
   theme,
 }) => {
-  const { expanded, name, onClick, icon } = useContext(AccordionPanelContext)
+  const { expanded, name, onClick, icon } = useContext(AccordionPanelItemContext)
 
   const expandedClassName = expanded ? 'expanded' : ''
   const buttonClassNames = `${className} ${expandedClassName} ${icon}`

diff --git a/src/components/AccordionPanel/index.ts b/src/components/AccordionPanel/index.ts
@@ -1,3 +1,3 @@
-export { AccordionPanel } from './AccordionPanel'
+export { AccordionPanelItem } from './AccordionPanelItem'
 export { AccordionPanelContent } from './AccordionPanelContent'
 export { AccordionPanelTrigger } from './AccordionPanelTrigger'
diff --git a/src/index.ts b/src/index.ts
@@ -33,7 +33,7 @@ export { Heading } from './components/Heading'
 export { HeadlineArea } from './components/HeadlineArea'
 export { Select } from './components/Select'
 export {
-  AccordionPanel,
+  AccordionPanelItem,
   AccordionPanelContent,
   AccordionPanelTrigger,
 } from './components/AccordionPanel'