fix(components): rename collapsible to accordion to make name more me…

…aningful
filipowm · Aug 1, 2020 · 892a19b · 892a19b
1 parent 60e52a0
commit 892a19b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 32 deletions.
diff --git a/content/editing/rich_content/custom_components.md b/content/editing/rich_content/custom_components.md
@@ -88,46 +88,46 @@ luctus mi imperdiet lobortis vitae at urna. Sed posuere lacinia turpis a commodo
 </div>
 </Layout>
 
-## Collapsible
+## Accordion
 
-Collapsible component allow hiding (collapsing) a content and revealing it on click.
-You can use other components inside collapsible.
+Accordion component allow hiding (collapsing) a content and revealing it on click.
+You can use other components inside accordion.
 
 **Syntax**
 
 ```html
-<Collapsible title="Click here to open">
+<Accordion title="Click here to open">
 
 *Lorem ipsum* dolor **sit amet**, consectetur adipiscing elit. Aenean lobortis turpis 
 luctus mi imperdiet lobortis vitae at urna. Sed posuere lacinia turpis a commodo.
 
-</Collapsible>
+</Accordion>
 
-<Collapsible title=":thumbsdown: Now is closed" titleWhenOpen=":thumbsup: Now is open" open="true">
+<Accordion title=":thumbsdown: Now is closed" titleWhenOpen=":thumbsup: Now is open" open="true">
 
 `open` define whether collapsible should be open or closed by default. Defaults to closed.
 
 You can change title when collapsible is open by setting `titleWhenOpen` property.
 
-</Collapsible>
+</Accordion>
 ```
 
 **Examples**
 
-<Collapsible title="Click here to open">
+<Accordion title="Click here to open">
 
 *Lorem ipsum* dolor **sit amet**, consectetur adipiscing elit. Aenean lobortis turpis 
 luctus mi imperdiet lobortis vitae at urna. Sed posuere lacinia turpis a commodo.
 
-</Collapsible>  
+</Accordion>  
 
-<Collapsible title=":thumbsdown: Now is closed" titleWhenOpen=":thumbsup: Now is open" open="true">
+<Accordion title=":thumbsdown: Now is closed" titleWhenOpen=":thumbsup: Now is open" open="true">
 
-`open` define whether collapsible should be open or closed by default. Default to closed.
+`open` define whether accordion should be open or closed by default. Default to closed.
 
-You can change title when collapsible is open by setting `titleWhenOpen` property.
+You can change title when arccordion is open by setting `titleWhenOpen` property.
 
-</Collapsible>
+</Accordion>
 
 ## Highlights
 

diff --git a/src/components/MdxComponents/collapsible.js → src/components/MdxComponents/accordion.js b/src/components/MdxComponents/collapsible.js → src/components/MdxComponents/accordion.js
@@ -6,7 +6,7 @@ import { ChevronUp, ChevronDown } from 'react-feather';
 import { renderToStaticMarkup } from 'react-dom/server';
 import emoji from '../../utils/emoji';
 
-const CollapsibleWrapper = styled.div`
+const AccordionWrapper = styled.div`
 margin: 10px 0;
 & > div {
     box-shadow: 0 0 6px 0 ${(props) => props.theme.header.shadow};
@@ -20,13 +20,14 @@ margin: 10px 0;
             }
         }
         &:hover {
-            border: 1px solid ${(props) => props.theme.colors.primary + 'cc'};
-            padding: 15px;
+            border: 1px solid ${(props) => props.theme.colors.primary};
         }
         &:after {
             content: url('data:image/svg+xml; utf8, ${(props) => props.closedImg}');
             float: right;
         }
+        transition: ${(props) => props.theme.transitions.hover};
+        border: 1px solid transparent;
         font-weight: 500;
         padding: 16px;
         cursor: pointer;
@@ -40,17 +41,22 @@ margin: 10px 0;
 }
 `;
 
-export default ({title, titleWhenOpen, expanded, children, ...props}) => {
-    const theme = useTheme();
-    const color = encodeURIComponent(theme.colors.primary); // replace # to not follow uri as usual
-    const closed = renderToStaticMarkup(<ChevronDown size={22} color={color}/>)
-    const open = renderToStaticMarkup(<ChevronUp size={22} color={color}/>)
-    const triggerWhenOpen = titleWhenOpen ? titleWhenOpen : title;
-    return (
-        <CollapsibleWrapper theme={theme} openImg={open} closedImg={closed}>
-            <Collapsible lazyRender={true} trigger={emoji.emojify(title)} triggerWhenOpen={emoji.emojify(triggerWhenOpen)} {...props}>
-                {children}
-            </Collapsible>
-        </CollapsibleWrapper>
-    )
-};
+export default ({ title, titleWhenOpen, expanded, children, ...props }) => {
+  const theme = useTheme();
+  const color = encodeURIComponent(theme.colors.primary); // replace # to not follow uri as usual
+  const closed = renderToStaticMarkup(<ChevronDown size={22} color={color} />);
+  const open = renderToStaticMarkup(<ChevronUp size={22} color={color} />);
+  const triggerWhenOpen = titleWhenOpen ? titleWhenOpen : title;
+  return (
+    <AccordionWrapper theme={theme} openImg={open} closedImg={closed}>
+      <Collapsible
+        lazyRender={true}
+        trigger={emoji.emojify(title)}
+        triggerWhenOpen={emoji.emojify(triggerWhenOpen)}
+        {...props}
+      >
+        {children}
+      </Collapsible>
+    </AccordionWrapper>
+  );
+};
diff --git a/src/components/MdxComponents/index.js b/src/components/MdxComponents/index.js
@@ -1,9 +1,9 @@
 /* eslint-disable react/display-name */
 import React from 'react';
+import Accordion from './accordion';
 import AnchorTag from './anchor';
 import Badge from './badge';
 import CodeBlock from './codeBlock';
-import Collapsible from './collapsible';
 import Highlights from './highlights';
 import Icon from './icon';
 import Jargon from './jargon';
@@ -73,7 +73,7 @@ export default {
   Badge,
   Layout,
   Icon,
-  Collapsible,
+  Accordion,
   LinkCard,
   ...Highlights,
 };