✨ add Collapse React example

frontend · Jan 8, 2021 · df0a1db · df0a1db
1 parent fcd184d
commit df0a1db
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 17 deletions.
diff --git a/src/components/molecules/CollapseReact/CollapseReact.stories.tsx b/src/components/molecules/CollapseReact/CollapseReact.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import CollapseReact, { Props } from './CollapseReact';
+
+const doc = `
+Collapse (react) is a React widget. To use it in your project, follow these steps:
+
+**1**. Include the styles in the \`<head>\`:
+
+\`\`\`html
+<link rel="stylesheet" href="styles.css">
+\`\`\`
+
+**2**. Include React and the following bundle before \`<body>\` tag's closing:
+
+\`\`\`html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js" ></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
+<script src="collapse-vanilla.bundle.js"></script>
+\`\`\`
+
+**3**. Use it like so:
+
+\`\`\`html
+<div class="sb-collapse" data-label="Click me">
+  [HTML content]
+</div>
+\`\`\`
+`;
+
+export default {
+  title: 'Molecules/Collapse (react)',
+  component: CollapseReact,
+  parameters: {
+    docs: {
+      description: {
+        component: doc,
+      },
+    },
+  },
+};
+
+const Template = (args: Props) => <CollapseReact {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  open: false,
+  label: 'More content',
+  children: `
+    <p class="py-3">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non igitur potestis voluptate omnia dirigentes aut tueri aut retinere virtutem. Ergo, inquit, tibi Q. Duo Reges: constructio interrete. Ipse Epicurus fortasse redderet, ut [redacted]tus Peducaeus, [redacted]. Quae qui non vident, nihil umquam magnum ac cognitione dignum amaverunt. Illa videamus, quae a te de amicitia dicta sunt. An vero, inquit, quisquam potest probare, quod perceptfum, quod.
+    </p>
+  `,
+};
diff --git a/src/components/molecules/CollapseReact/CollapseReact.tsx b/src/components/molecules/CollapseReact/CollapseReact.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+
+import Button from 'components/atoms/Button';
+
+export type Props = {
+  open?: boolean;
+  label: string;
+  children: string;
+};
+
+const CollapseReact = ({ open, label, children }: Props): JSX.Element => {
+  const [expanded, setExpanded] = useState(open);
+
+  useEffect(() => setExpanded(open), [open]);
+
+  return (
+    <>
+      <Button
+        primary
+        aria-expanded={expanded}
+        aria-controls="collapse-example"
+        data-collapse-target="collapse-example"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {label}
+      </Button>
+
+      <div
+        id="collapse-example"
+        className={`overflow-hidden ${expanded ? 'h-auto' : 'h-0'}`}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{
+          __html: children,
+        }}
+      />
+    </>
+  );
+};
+
+CollapseReact.defaultProps = {};
+
+export default CollapseReact;
diff --git a/src/components/molecules/CollapseReact/index.ts b/src/components/molecules/CollapseReact/index.ts
@@ -0,0 +1 @@
+export { default } from './CollapseReact';
diff --git a/src/components/molecules/CollapseVanilla/CollapseVanilla.stories.tsx b/src/components/molecules/CollapseVanilla/CollapseVanilla.stories.tsx
@@ -3,16 +3,15 @@ import React from 'react';
 import CollapseVanilla from './CollapseVanilla';
 
 const doc = `
-
-Collapse (vanilla) is a zero-dependency JavaScript widget. To use it in your project, follow those steps:
+Collapse (vanilla) is a zero-dependency JavaScript widget. To use it in your project, follow these steps:
 
 **1**. Include the styles in the \`<head>\`:
 
 \`\`\`html
 <link rel="stylesheet" href="styles.css">
 \`\`\`
 
-**2**. Include the following script before \`<body>\` tag's closing:
+**2**. Include the following bundle before \`<body>\` tag's closing:
 
 \`\`\`html
 <script src="collapse-vanilla.bundle.js"></script>

diff --git a/src/modules/collapse-react.tsx b/src/modules/collapse-react.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import CollapseReact from 'components/molecules/CollapseReact';
+import { Props } from 'components/molecules/CollapseReact/CollapseReact';
+
+const roots = document.querySelectorAll('.sb-collapse');
+roots.forEach(root => {
+  if (root instanceof HTMLElement) {
+    const data = root?.dataset as Props;
+    const content = root?.innerHTML;
+    ReactDOM.render(<CollapseReact {...data}>{content}</CollapseReact>, root);
+  }
+});
+
+// Can be used like so:
+// <head>
+//   <link rel="stylesheet" href="styles.css">
+//   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
+//   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
+// </head>
+// <body>
+//   <div id="sb-button" data-size="small" data-label="My button"></div> <!-- bad idea ^^' -->
+//   <script src="button.bundle.js"></script>
+// </body>
+// </html>
diff --git a/src/modules/collapse-vanilla.tsx b/src/modules/collapse-vanilla.tsx
@@ -5,21 +5,12 @@ document.addEventListener('DOMContentLoaded', () => toggleCollapse());
 // Can be used like so:
 // <head>
 //   <link rel="stylesheet" href="styles.css">
+//   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js" ></script>
+//   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
 // </head>
 // <body>
-//   <button
-//     type="button"
-//     class="inline-flex items-center justify-center px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-base font-medium text-white border border-transparent rounded-md"
-//     aria-expanded="false"
-//     aria-controls="collapse-example"
-//     data-collapse-target="collapse-example"
-//   >
-//     More content
-//   </button>
-//   <div id="collapse-example" class="collapse">
-//     <p class="py-3">
-//       [...]
-//     </p>
+//   <div class="sb-collapse" data-label="Click me">
+//     [HTML content]
 //   </div>
-//   <script src="collapse-vanilla.bundle.js"></script>
+//   <script src="./collapse-react.bundle.js"></script>
 // </body>