collapse component

zfletch · zfletch · commit 0d24e602c26c · 2023-03-12T15:06:33.000-04:00
diff --git a/src/components/Collapse/Collapse.js b/src/components/Collapse/Collapse.js
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import { bool, node, string } from 'prop-types';
+
+import styles from './Collapse.module.scss';
+
+const Collapse = ({ title, children, collapsed: beginCollapsed }) => {
+  const [collapsed, setCollapsed] = useState(beginCollapsed);
+  const toggleCollapse = () => setCollapsed(!collapsed);
+
+  useEffect(() => {
+    setCollapsed(beginCollapsed);
+  }, [beginCollapsed]);
+
+  return (
+    <div>
+      <button type="button" className={styles.button} onClick={toggleCollapse}>
+        <div>
+          {title}
+        </div>
+        <div className={styles.right}>
+          {collapsed ? '+' : '-'}
+        </div>
+      </button>
+      {collapsed ? null : children}
+    </div>
+  );
+};
+
+Collapse.propTypes = {
+  title: string.isRequired,
+  children: node.isRequired,
+  collapsed: bool,
+};
+
+Collapse.defaultProps = {
+  collapsed: true,
+};
+
+export default Collapse;
diff --git a/src/components/Collapse/Collapse.module.scss b/src/components/Collapse/Collapse.module.scss
@@ -0,0 +1,26 @@
+.button {
+  background-color: #8f8f8f;
+  color: #ffffff;
+  font-size: 1rem;
+  width: 100%;
+
+  display: flex;
+  justify-content: space-between;
+  border: none;
+  cursor: pointer;
+
+  padding-bottom: 0.5rem;
+  padding-top: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  margin-bottom: 0.2rem;
+}
+
+.button:hover {
+  background-color: #707070;
+}
+
+.right {
+  font-weight: bold;
+}
diff --git a/src/components/Collapse/index.js b/src/components/Collapse/index.js
@@ -0,0 +1,3 @@
+import Collapse from './Collapse';
+
+export default Collapse;
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,11 @@
 import Alignment from './components/Alignment';
-import Sentence from './components/Alignment/Sentence';
+import Collapse from './components/Collapse';
 import Segment from './components/Alignment/Segment';
+import Sentence from './components/Alignment/Sentence';
 
 export {
-  Alignment, Sentence, Segment,
+  Alignment,
+  Collapse,
+  Segment,
+  Sentence,
 };

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import Collapse from './Collapse';`
	`2`	`+`
	`3`	`+export default Collapse;`