diff --git a/src/components/InformationPanel/InformationPanel.stories.tsx b/src/components/InformationPanel/InformationPanel.stories.tsx index c56d625f17..bcb5ec86fd 100644 --- a/src/components/InformationPanel/InformationPanel.stories.tsx +++ b/src/components/InformationPanel/InformationPanel.stories.tsx @@ -12,17 +12,38 @@ storiesOf('InformationPanel', module) }, }) .add('all', () => ( - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in - voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - - + +
  • + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure + dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + +
  • +
  • + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure + dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + + +
  • +
    )) +const List = styled.ul` + list-style: none; + padding: 0; +` const Wrapper = styled.div` width: 1140px; margin: 32px auto; diff --git a/src/components/InformationPanel/InformationPanel.tsx b/src/components/InformationPanel/InformationPanel.tsx index 4ce72bb28d..ffd6ebaab9 100644 --- a/src/components/InformationPanel/InformationPanel.tsx +++ b/src/components/InformationPanel/InformationPanel.tsx @@ -12,6 +12,7 @@ type Props = { title: string titleTag?: HeadingTagTypes type?: 'success' | 'info' | 'warning' | 'error' | '' + togglable?: boolean openButtonLabel?: string closeButtonLabel?: string active?: boolean @@ -24,6 +25,7 @@ export const InformationPanel: FC = ({ title, titleTag = 'span', type = 'info', + togglable = true, openButtonLabel = '開く', closeButtonLabel = '閉じる', active: activeProps = true, @@ -77,15 +79,17 @@ export const InformationPanel: FC = ({ {title} -
    - } - size="s" - onClick={handleClickTrigger} - > - {active ? closeButtonLabel : openButtonLabel} - -
    + {togglable && ( +
    + } + size="s" + onClick={handleClickTrigger} + > + {active ? closeButtonLabel : openButtonLabel} + +
    + )} {active && {children}}