WIP: Complete Profile -> Profile status

src/components/Dropdown/Dropdown.types.tsx

@@ -12,8 +12,8 @@ export interface DropdownProperties extends StateManagerProps {
   isDisabled?: boolean;
   isMulti?: boolean;
   label?: string;
-  labelClearAll: string;
-  onSelect: (event: OnChangeValue<SelectOption, boolean>) => void;
+  labelClearAll?: string;
+  onSelect?: (event: OnChangeValue<SelectOption, boolean>) => void;
   options: SelectOption[];
   pillAlign?: 'bottom' | 'hide' | 'top'; // Display pills below/above the select input or hide them
   showClearAllSelectedButton?: boolean; // Show/Hide our custom 'Clear All...' button

src/components/Layout/LayoutMain.tsx

@@ -14,7 +14,7 @@ export const LayoutMain = ({
   layout = '2-1',
   bleedbar
 }: LayoutMainProperties): JSX.Element => {
-  const cnames = ['content', `content__${layout}`, classes];
+  const cnames = ['content', 'content_main', `content__${layout}`, classes];
   if (bleedbar) cnames.push('content__bleedbar');
 
   return (

src/prototypes/UserProfile/@Notes.md

@@ -0,0 +1,12 @@
+# Updates to DSR
+- [New] Form component
+- [New] Form -> Fieldset 
+  - I think this would be used to wrap the groups of input fields
+- [New] HelperText variant: block 
+  - `.a-label_helper__block`
+- [Improvement] TextInput
+  - Support `label` property so that Input and Label are automatically linked
+  - Support `helperText` property so that it doesn't need to be created separately
+  ```
+  <TextInput id='input1' label='Input #1' helperText='A text input field' />
+  ```

src/prototypes/UserProfile/CompleteUserProfile.tsx

@@ -0,0 +1,163 @@
+import {
+  Button,
+  Checkbox,
+  FooterCfGov,
+  Heading,
+  Layout,
+  Link,
+  Dropdown as Multiselect,
+  PageHeader
+} from '~/src/index';
+import { DSRForm as Form } from './DSRForm';
+import { DSRLabeledInput as TextInput } from './DSRLabeledInput';
+import { SBLInstitutionCheckboxLabel as InstitutionLabel } from './SBLInstitutionCheckboxLabel';
+
+const TextIntroduction = ({ heading, lead, body }): JSX.Element => (
+  <div className='text-introduction'>
+    <h1>{heading}</h1>
+    <p className='lead-paragraph'>{lead}</p>
+    <p>{body}</p>
+  </div>
+);
+
+const Well = ({ children }): JSX.Element => (
+  <div className='well'>{children}</div>
+);
+
+const FormActions = (): JSX.Element => (
+  <div className='form-actions'>
+    <Button label='Submit' type='submit' />
+    <Button label='Clear form' asLink appearance='warning' />
+  </div>
+);
+
+const SectionIntroduction = ({ heading, body }): JSX.Element => (
+  <>
+    <Heading type='3'>{heading}</Heading>
+    <p className='body'>{body}</p>
+  </>
+);
+
+const HelperText = ({ children }) => <p>{children}</p>;
+
+const FieldGroup = ({ children }) => <div className='fieldset'>{children}</div>;
+
+export const CompleteUserProfile = ({ state, setState, onChange }) => (
+  <>
+    <PageHeader />
+
+    <Layout.Wrapper>
+      <Layout.Main>
+        <Form
+          id='complete-profile'
+          className='w-medium'
+          onSubmit={e => {
+            e.preventDefault();
+            setState(old => ({ ...old, submitted: true }));
+          }}
+        >
+          <TextIntroduction
+            heading='Complete your user profile'
+            lead='Select the financial institution you are authorized to file for to complete your user profile. Once you have successfully associated your user profile with a financial institution you will have access to the filing platform and can begin the filing process.'
+            body='In order to begin using the filing platform you must have a Legal Entity Identifier (LEI) for your financial institution. Visit the Global LEI Foundation (GLEIF) website for more information on how to obtain an LEI.'
+          />
+
+          <Well>
+            <SectionIntroduction
+              heading='Provide your identifying information'
+              body={
+                <>
+                  Type your first name and last name in the fields below. Your
+                  email address is automatically populated from{' '}
+                  <Link href='https://login.gov'>Login.gov</Link>.
+                </>
+              }
+            />
+            <FieldGroup>
+              <TextInput
+                id='firstName'
+                name='firstName'
+                value={state.firstName}
+                label='First Name'
+                onChange={onChange}
+              />
+
+              <TextInput
+                id='lastName'
+                name='lastName'
+                value={state.lastName}
+                label='Last Name'
+                onChange={onChange}
+              />
+
+              <TextInput
+                id='email'
+                name='email'
+                label='Email address'
+                value={state.email}
+                disabled
+              />
+            </FieldGroup>
+          </Well>
+
+          <Well>
+            <SectionIntroduction
+              heading='Select the financial institution you are authorized to file for'
+              body='Select from the pre-selected matches by email domain or search by LEI to find a match for your institution. Self-selections will be submitted to the technical help team for approval. If you are authorized to file for multiple financial institutions you can select more than one.'
+            />
+
+            <FieldGroup>
+              <HelperText>
+                The following financial institution matches your email domain.
+                Check the box if you are authorized to file for this
+                institution.
+              </HelperText>
+
+              <Checkbox
+                id='institutionSelected'
+                name='institutionSelected'
+                checked={state.institutionSelected}
+                onChange={onChange}
+                label={
+                  <InstitutionLabel
+                    name='Bank 1'
+                    lei='TESTS6AFX2TESTXJ89VJ'
+                    taxid='01-01234567'
+                    agency='9'
+                  />
+                }
+              />
+
+              <HelperText>
+                If the financial institution you are authorized to file for is
+                not included above or if you are authorized to file for
+                additional institutions, search by LEI and select your
+                institution.
+              </HelperText>
+
+              <Multiselect
+                id='additional-institutions'
+                label=''
+                placeholder=''
+                options={[
+                  {
+                    label: 'Credit Union 2  |  EX0YWS6AMX2PLE92J1LD',
+                    value: 'EX0YWS6AMX2PLE92J1LD'
+                  },
+                  {
+                    label: 'Bank 2  |  B90YWS6AFX2LGWOXJ1LD',
+                    value: 'B90YWS6AFX2LGWOXJ1LD'
+                  }
+                ]}
+              />
+            </FieldGroup>
+          </Well>
+
+          <FormActions />
+        </Form>
+      </Layout.Main>
+    </Layout.Wrapper>
+
+    <FooterCfGov />
+  </>
+);

src/prototypes/UserProfile/DSRForm.tsx

@@ -0,0 +1,24 @@
+/* DSR component that hasn't been created yet */
+
+import classnames from 'classnames';
+
+export interface FormProperties {
+  id: string;
+  className?: string;
+  onSubmit: React.FormEvent;
+  children: JSX.Element[];
+}
+
+export const DSRForm = ({
+  className = '',
+  children,
+  ...others
+}: FormProperties): JSX.Element => {
+  const cnames = ['o-form', className];
+
+  return (
+    <form {...others} className={classnames(cnames)}>
+      {children}
+    </form>
+  );
+};

src/prototypes/UserProfile/DSRLabeledInput.tsx

@@ -0,0 +1,24 @@
+/* Potential improvement to DSR component */
+
+import { HelperText } from '~/src/components/HelperText/HelperText';
+import type { TextInputProperties } from '~/src/components/TextInput/TextInput';
+import { Label, TextInput } from '~/src/index';
+
+interface LIProperties extends TextInputProperties {
+  label: JSX.Element | string;
+  id: string;
+  helperText?: string;
+}
+
+export const DSRLabeledInput = ({
+  label,
+  id,
+  helperText,
+  ...others
+}: LIProperties): JSX.Element => (
+  <div>
+    <Label htmlFor={id}>{label}</Label>
+    {helperText ? <HelperText>{helperText}</HelperText> : null}
+    <TextInput width='full' {...{ id, ...others }} />
+  </div>
+);

src/prototypes/UserProfile/Page.tsx

@@ -0,0 +1,19 @@
+/* Storybook prototype component */
+
+interface PageProperties {
+  children: JSX.Element;
+}
+
+/**
+ * Displays CFGov header and footer around provided page content
+ */
+export const Page = ({ children }: PageProperties): JSX.Element => children;
+// export const Page = ({ children }: PageProperties): JSX.Element => (
+//   <>
+//     <PageHeader />
+//     <Layout.Wrapper>
+//       <Layout.Main>{children}</Layout.Main>
+//     </Layout.Wrapper>
+//     <FooterCfGov />
+//   </>
+// );

src/prototypes/UserProfile/SBLInstitutionCheckboxLabel.tsx

@@ -0,0 +1,25 @@
+/* SBL Specific */
+
+interface ICLProperties {
+  name: string;
+  lei: string;
+  taxid: string;
+  agency: string;
+}
+
+export const SBLInstitutionCheckboxLabel = ({
+  name,
+  lei,
+  taxid,
+  agency
+}: ICLProperties): JSX.Element => (
+  <div>
+    <b>{name}</b>
+    <br />
+    LEI: {lei}
+    <br />
+    Tax ID: {taxid}
+    <br />
+    Agency Code: {agency}
+  </div>
+);

src/prototypes/UserProfile/UserProfile.less

@@ -0,0 +1,68 @@
+/** Complete Profile **/
+.fieldset {
+  padding: 30px 25px;
+  margin-bottom: 30px;
+  background-color: #f7f8f9;
+  border: 1px solid #a2a3a4;
+
+  & > *:not(:last-child) {
+    margin-bottom: 30px;
+  }
+}
+
+.fieldset + h3 {
+  margin-top: 45px;
+}
+
+.fieldset + .form-actions {
+  margin-top: 30px;
+}
+
+.form-actions > * {
+  margin-right: 10px;
+}
+
+.w-medium {
+  max-width: 770px;
+  margin: 0 auto;
+}
+
+.text-introduction {
+  margin-bottom: 45px;
+}
+
+/** Profile overview **/
+#profile-status {
+  .field {
+    margin-bottom: 30px;
+  }
+
+  .m-notification {
+    margin: 30px auto 45px;
+  }
+
+  h3 {
+    margin-bottom: 30px;
+  }
+
+  .details {
+    h4 {
+      margin-bottom: 8px;
+    }
+    .institution-list {
+      padding: 0;
+
+      .institution {
+        display: block;
+
+        svg {
+          color: #21aa40;
+        }
+
+        & > *:not(:last-child) {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}