Merge pull request #126 from Lemoncode/feature/#125-to-do-collapse-items

added collapse items

Author: brauliodiez

front/src/pods/trainer/components/header.component.tsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import { cx } from 'emotion';
+import Collapse from '@material-ui/core/Collapse';
 import FileCopyOutlinedIcon from '@material-ui/icons/FileCopyOutlined';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import * as innerClasses from './header.styles';
 
 interface Props {
@@ -39,28 +42,47 @@ interface CopyFieldProps {
 export const CopyFieldComponent: React.FC<CopyFieldProps> = props => {
   const { labelName, inputId, urlLink } = props;
 
+  const [open, setOpen] = React.useState(true);
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
   return (
     <>
-      <label className={innerClasses.label} htmlFor={inputId}>
-        {labelName}
-      </label>
-      <div className={innerClasses.inputContainer}>
-        <input
-          id={inputId}
-          type="text"
-          className={innerClasses.input}
-          value={urlLink}
-          readOnly
-          aria-readonly
-        />
-        <button
-          aria-label={`copy ${labelName}`}
-          className={innerClasses.button}
-          onClick={() => navigator.clipboard.writeText(urlLink)}
+      <div className={innerClasses.labelContainer}>
+        <label
+          className={innerClasses.label}
+          htmlFor={inputId}
+          onClick={handleClick}
         >
-          <FileCopyOutlinedIcon className={innerClasses.icon} />
-        </button>
+          {labelName}
+          {open ? (
+            <ExpandLessIcon className={innerClasses.collapseIcon} />
+          ) : (
+            <ExpandMoreIcon className={innerClasses.collapseIcon} />
+          )}
+        </label>
       </div>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={innerClasses.inputContainer}>
+          <input
+            id={inputId}
+            type="text"
+            className={innerClasses.input}
+            value={urlLink}
+            readOnly
+            aria-readonly
+          />
+          <button
+            aria-label={`copy ${labelName}`}
+            className={innerClasses.button}
+            onClick={() => navigator.clipboard.writeText(urlLink)}
+          >
+            <FileCopyOutlinedIcon className={innerClasses.icon} />
+          </button>
+        </div>
+      </Collapse>
     </>
   );
 };

front/src/pods/trainer/components/header.styles.ts

@@ -9,11 +9,33 @@ export const root = css`
   grid-row-gap: 1rem;
   grid-column-gap: 1rem;
 `;
+export const labelContainer = css`
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+`;
 
 export const label = css`
   font-family: ${typography.fontFamily};
   font-size: 1.125rem;
   color: ${palette.text.primary};
+  display: flex;
+  justify-content: space-between;
+  width: 50%;
+  cursor: pointer;
+  & :hover {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
+
+  @media (min-width: ${theme.breakpoints.values.sm}px) {
+    width: 30%;
+  }
+  @media (min-width: ${theme.breakpoints.values.lg}px) {
+    width: 25%;
+  }
+`;
+
+export const collapseIcon = css`
+  font-size: 1.7rem;
+  margin: 0 1%;
 `;
 
 export const inputContainer = css`