feat: add togglable option in InformationPanel (#817)

* feat: add togglable option * fix: remove extra space
kufu · Jun 5, 2020 · 5df6953 · 5df6953
1 parent 180520d
commit 5df6953
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 18 deletions.
diff --git a/src/components/InformationPanel/InformationPanel.stories.tsx b/src/components/InformationPanel/InformationPanel.stories.tsx
@@ -12,17 +12,38 @@ storiesOf('InformationPanel', module)
     },
   })
   .add('all', () => (
-    <Wrapper>
-      <InformationPanel title="Panel Title" openButtonLabel="OPEN" closeButtonLabel="CLOSE">
-        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.
-      </InformationPanel>
-    </Wrapper>
+    <List>
+      <li>
+        <Wrapper>
+          <InformationPanel title="Panel Title" openButtonLabel="OPEN" closeButtonLabel="CLOSE">
+            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.
+          </InformationPanel>
+        </Wrapper>
+      </li>
+      <li>
+        <Wrapper>
+          <InformationPanel title="Panel without a toggle button" togglable={false}>
+            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.
+          </InformationPanel>
+        </Wrapper>
+      </li>
+    </List>
   ))
 
+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
@@ -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<Props> = ({
   title,
   titleTag = 'span',
   type = 'info',
+  togglable = true,
   openButtonLabel = '開く',
   closeButtonLabel = '閉じる',
   active: activeProps = true,
@@ -77,15 +79,17 @@ export const InformationPanel: FC<Props> = ({
             {title}
           </StyledHeading>
         </Title>
-        <div>
-          <SecondaryButton
-            suffix={<Icon size={14} name={active ? 'fa-caret-up' : 'fa-caret-down'} />}
-            size="s"
-            onClick={handleClickTrigger}
-          >
-            {active ? closeButtonLabel : openButtonLabel}
-          </SecondaryButton>
-        </div>
+        {togglable && (
+          <div>
+            <SecondaryButton
+              suffix={<Icon size={14} name={active ? 'fa-caret-up' : 'fa-caret-down'} />}
+              size="s"
+              onClick={handleClickTrigger}
+            >
+              {active ? closeButtonLabel : openButtonLabel}
+            </SecondaryButton>
+          </div>
+        )}
       </Header>
       {active && <Content themes={theme}>{children}</Content>}
     </Wrapper>