add CollapsibleSection & ExpandingContainer components

awx/ui_next/src/components/CollapsibleSection/CollapsibleSection.jsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { bool, string } from 'prop-types';
+import styled from 'styled-components';
+import { Button } from '@patternfly/react-core';
+import { AngleRightIcon } from '@patternfly/react-icons';
+import ExpandingContainer from './ExpandingContainer';
+
+const Toggle = styled.div`
+  display: flex;
+
+  hr {
+    margin-left: 20px;
+    flex: 1 1 auto;
+    align-self: center;
+    border: 0;
+    border-bottom: 1px solid var(--pf-global--BorderColor--300);
+  }
+`;
+
+const Arrow = styled(AngleRightIcon)`
+  margin-right: -5px;
+  margin-left: 5px;
+  transition: transform 0.1s ease-out;
+  transform-origin: 50% 50%;
+  ${(props) => props.isExpanded && `transform: rotate(90deg);`}
+`;
+
+function CollapsibleSection({ label, startExpanded, children }) {
+  const [isExpanded, setIsExpanded] = useState(startExpanded);
+  const toggle = () => setIsExpanded(!isExpanded);
+
+  return (
+    <div>
+      <Toggle>
+        <Button onClick={toggle}>
+          {label} <Arrow isExpanded={isExpanded} />
+        </Button>
+        <hr />
+      </Toggle>
+      <ExpandingContainer isExpanded={isExpanded}>
+        {children}
+      </ExpandingContainer>
+    </div>
+  );
+}
+CollapsibleSection.propTypes = {
+  label: string.isRequired,
+  startExpanded: bool,
+};
+CollapsibleSection.defaultProps = {
+  startExpanded: false,
+};
+
+export default CollapsibleSection;

awx/ui_next/src/components/CollapsibleSection/ExpandingContainer.jsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { bool } from 'prop-types';
+import styled from 'styled-components';
+
+const Container = styled.div`
+  margin: 15px 0;
+  transition: all 0.2s ease-out;
+  overflow: hidden;
+`;
+
+function ExpandingContainer({ isExpanded, children }) {
+  const [contentHeight, setContentHeight] = useState(0);
+  const ref = useRef(null);
+  useEffect(() => {
+    setContentHeight(ref.current.scrollHeight);
+  });
+  const height = isExpanded ? contentHeight : '0';
+  return (
+    <Container
+      ref={ref}
+      css={`
+        height: ${height}px;
+      `}
+    >
+      {children}
+    </Container>
+  );
+}
+ExpandingContainer.propTypes = {
+  isExpanded: bool,
+};
+ExpandingContainer.defaultProps = {
+  isExpanded: false,
+};
+
+export default ExpandingContainer;

awx/ui_next/src/components/CollapsibleSection/index.js

@@ -0,0 +1 @@
+export { default } from './CollapsibleSection';

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -13,6 +13,7 @@ import MultiSelect from '@components/MultiSelect';
 import FormActionGroup from '@components/FormActionGroup';
 import FormField from '@components/FormField';
 import FormRow from '@components/FormRow';
+import CollapsibleSection from '@components/CollapsibleSection';
 import { required } from '@util/validators';
 import styled from 'styled-components';
 import { JobTemplate } from '@types';
@@ -415,6 +416,9 @@ class JobTemplateForm extends Component {
             />
           </FormGroup>
         </FormRow>
+        <CollapsibleSection label="Advanced">
+          Advanced inputs here
+        </CollapsibleSection>
         <FormActionGroup onCancel={handleCancel} onSubmit={handleSubmit} />
       </Form>
     );