diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
index d4f1eee426..d9f3e92172 100644
--- 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 0
+ }>Accordion 0
Content of Accordion 0
- Accordion 1
+ }>Accordion 1
Content of Accordion 1
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 59d8cece7e..8dff58ed9b 100644
--- 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
+type ContextType = Omit
export const AccordionContext = React.createContext({
expanded: false,
diff --git a/src/components/Accordion/AccordionContent.tsx b/src/components/Accordion/AccordionContent.tsx
index bbda6a1f3c..0b4ae18d95 100644
--- a/src/components/Accordion/AccordionContent.tsx
+++ b/src/components/Accordion/AccordionContent.tsx
@@ -69,6 +69,7 @@ const AccordionContentComponent: React.FC = ({ 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
index 9528f62194..6d6534569c 100644
--- 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 = ({
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 (
-