feat(components): ✨ created collapsible / accordion component

content/editing/rich_content/custom_components.md

@@ -88,6 +88,47 @@ luctus mi imperdiet lobortis vitae at urna. Sed posuere lacinia turpis a commodo
 </div>
 </Layout>
 
+## Collapsible
+
+Collapsible component allow hiding (collapsing) a content and revealing it on click.
+You can use other components inside collapsible.
+
+**Syntax**
+
+```html
+<Collapsible 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>
+
+<Collapsible 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>
+```
+
+**Examples**
+
+<Collapsible 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>  
+
+<Collapsible 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.
+
+You can change title when collapsible is open by setting `titleWhenOpen` property.
+
+</Collapsible>
+
 ## Highlights
 
 Highlights can be used to distinguish some part of text.

package.json

@@ -71,6 +71,7 @@
     "node-sass-glob-importer": "5.3.2",
     "puppeteer": "5.2.1",
     "react": "16.13.1",
+    "react-collapsible": "^2.8.0",
     "react-dom": "16.13.1",
     "react-feather": "2.0.8",
     "react-helmet": "6.1.0",

src/components/MdxComponents/collapsible.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from 'emotion-theming';
+import Collapsible from 'react-collapsible';
+import { ChevronUp, ChevronDown } from 'react-feather';
+import { renderToStaticMarkup } from 'react-dom/server';
+import emoji from '../../utils/emoji';
+
+const CollapsibleWrapper = styled.div`
+margin: 10px 0;
+& > div {
+    box-shadow: 0 0 6px 0 ${(props) => props.theme.header.shadow};
+    border-radius: 4px;
+
+    & > span {
+        &.is-open {
+            border-bottom: 1px solid ${(props) => props.theme.colors.border};
+            &:after {
+                content: url('data:image/svg+xml; utf8, ${(props) => props.openImg}');
+            }
+        }
+        &:hover {
+            border: 1px solid ${(props) => props.theme.colors.primary + 'cc'};
+            padding: 15px;
+        }
+        &:after {
+            content: url('data:image/svg+xml; utf8, ${(props) => props.closedImg}');
+            float: right;
+        }
+        font-weight: 500;
+        padding: 16px;
+        cursor: pointer;
+        display: block;
+        width: 100%;
+    }
+
+    & > div > div { 
+        padding: 8px 16px;
+    }
+}
+`;
+
+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>
+    )
+};

src/components/MdxComponents/index.js

@@ -1,12 +1,13 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import CodeBlock from './codeBlock';
 import AnchorTag from './anchor';
-import Layout from './layout';
+import Badge from './badge';
+import CodeBlock from './codeBlock';
+import Collapsible from './collapsible';
 import Highlights from './highlights';
 import Icon from './icon';
-import Badge from './badge';
 import Jargon from './jargon';
+import Layout from './layout';
 import { blockquote, pre, table, list } from '../../styles';
 import { useTheme } from 'emotion-theming';
 import emoji from '../../utils/emoji';
@@ -71,5 +72,6 @@ export default {
   Badge,
   Layout,
   Icon,
+  Collapsible,
   ...Highlights,
 };