[Fix][Filing landing] Associated institution links - Avoid "list" styles at mobile screen sizes

src/components/AssociatedInstitution.tsx

@@ -1,40 +1,61 @@
+/* eslint-disable react/require-default-props */
 import { Link } from 'components/Link';
 import { Icon, ListItem } from 'design-system-react';
 import type { InstitutionDetailsApiType } from 'types/formTypes';
 
+interface FirstLast {
+  isFirst?: boolean;
+  isLast?: boolean;
+}
+
 export function AssociatedInstitution({
   name,
   lei,
-}: InstitutionDetailsApiType): JSX.Element {
-  let displayText = null;
+  isFirst,
+  isLast,
+}: FirstLast & InstitutionDetailsApiType): JSX.Element {
+  let baseStylesLink = `inline-block w-full border-pacific visited:border-teal border-dashed border-0 border-t-[1px] py-[.625rem]`;
+  if (isLast) baseStylesLink += ' border-b-[1px]';
 
-  // Generate the Institution's label
-  if (name && lei) displayText = `${name} | ${lei}`;
-  else if (!name && !lei)
-    displayText = 'Missing institution details; please contact support staff';
-  else if (!lei)
-    displayText = `"${name}" has no LEI; please contact support staff`;
-  else if (!name) displayText = lei;
+  let desktopStylesLink = 'lg:border-0 lg:pb-0';
+  if (isFirst) desktopStylesLink += ' lg:pt-0';
+  if (isLast) desktopStylesLink += ' lg:pb-0';
 
-  // Do we have enough info to link to the Institution's details page?
-  const institutionLabel = lei ? (
-    <Link href={`/institution/${lei}`} type='list'>
-      {displayText}
-    </Link>
-  ) : (
-    <span>{displayText}</span>
-  );
+  // Error
+  if (!name || !lei)
+    return (
+      <ListItem key={lei} className='associated-institution my-0'>
+        <Link
+          href='mailto:SBLHelp@cfpb.gov?subject=[BETA] Associated institutions: Missing "Name" or "LEI"'
+          className={`${baseStylesLink} ${desktopStylesLink} font-medium`}
+        >
+          <Icon
+            className='mr-[5px] text-[#20aa3f]'
+            isPresentational
+            name='approved'
+            withBg
+          />
+          <span className='mr-[10px] font-normal text-[#101820]'>Approved</span>
+          Missing institution details, email our support staff.
+        </Link>
+      </ListItem>
+    );
 
   return (
-    <ListItem key={lei} className='associated-institution'>
-      <Icon
-        className='mr-[5px] text-[#20aa3f]'
-        isPresentational
-        name='approved'
-        withBg
-      />
-      <span className='mr-[10px] font-normal'>Approved</span>
-      {institutionLabel}
+    <ListItem key={lei} className='associated-institution my-0'>
+      <Link
+        href={lei ? `/institution/${lei}` : `/404`}
+        className={`${baseStylesLink} ${desktopStylesLink} font-medium`}
+      >
+        <Icon
+          className='mr-[5px] text-[#20aa3f]'
+          isPresentational
+          name='approved'
+          withBg
+        />
+        <span className='mr-[10px] font-normal text-[#101820]'>Approved</span>
+        {`${name} | ${lei}`}
+      </Link>
     </ListItem>
   );
 }

src/components/AssociatedInstitutionList.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable react/require-default-props */
+import { List } from 'design-system-react';
+import type { JSXElement } from 'design-system-react/dist/types/jsxElement';
+import type { ReactElement } from 'react';
+import type { InstitutionDetailsApiType } from 'types/formTypes';
+import { One } from 'utils/constants';
+import { AssociatedInstitution } from './AssociatedInstitution';
+
+function AssociatedInstitutionList({
+  institutions,
+  className = '',
+  children,
+}: {
+  institutions?: InstitutionDetailsApiType[] | undefined;
+  className?: string;
+  children?: (JSX.Element | ReactElement)[] | JSX.Element | ReactElement;
+}): JSXElement {
+  if (children)
+    return (
+      <List isLinks className={`institution-list ${className}`}>
+        {children}
+      </List>
+    );
+
+  if (!institutions || institutions.length === 0) return null;
+  const lastIndex = institutions.length - One;
+
+  return (
+    <List isLinks className={`institution-list ${className}`}>
+      {institutions.map((object, index) => {
+        return (
+          <AssociatedInstitution
+            {...object}
+            key={object.lei}
+            isFirst={index === 0}
+            isLast={index === lastIndex}
+          />
+        );
+      })}
+    </List>
+  );
+}
+
+export default AssociatedInstitutionList;

src/pages/AuthenticatedLanding/Landing.less

@@ -18,10 +18,6 @@
     }
   }
 
-  .institution-list {
-    margin-top: 15px;
-  }
-
   .additional-resources {
     ul {
       padding-left: 0;

src/pages/AuthenticatedLanding/ReviewInstitutions.tsx

@@ -1,5 +1,5 @@
-import AssociatedInstitution from 'components/AssociatedInstitution';
-import { Alert, Heading, List, Paragraph } from 'design-system-react';
+import AssociatedInstitutionList from 'components/AssociatedInstitutionList';
+import { Alert, Heading, Paragraph } from 'design-system-react';
 import type { InstitutionDetailsApiType } from 'types/formTypes';
 import { SubsectionWrapper } from './SubsectionWrapper';
 
@@ -10,31 +10,40 @@ export function ReviewInstitutions({
   institutions: InstitutionDetailsApiType[] | undefined;
   error: boolean | string | null;
 }): JSX.Element {
-  let institutionList = [];
+  let institutionList: JSX.Element | JSX.Element[];
   const hasInstitutions = (institutions?.length ?? 0) > 0;
+  const sharedStyles = 'u-mt15';
 
   if (error) {
-    institutionList = [
-      <Alert
-        isFieldLevel
-        key='query-error'
-        status='error'
-        message='There was an error loading your associated financial institutions'
-      />,
-    ];
+    institutionList = (
+      <AssociatedInstitutionList className={sharedStyles}>
+        <Alert
+          isFieldLevel
+          key='query-error'
+          status='error'
+          message='There was an error loading your associated financial institutions'
+        />
+      </AssociatedInstitutionList>
+    );
   } else if (hasInstitutions) {
-    institutionList = institutions.map(object => (
-      <AssociatedInstitution key={object.lei} {...object} />
-    ));
+    institutionList = (
+      <AssociatedInstitutionList
+        institutions={institutions}
+        className={sharedStyles}
+        key='institutions'
+      />
+    );
   } else {
-    institutionList = [
-      <Alert
-        isFieldLevel
-        key='no-associations'
-        status='warning'
-        message='You have no associated institutions.'
-      />,
-    ];
+    institutionList = (
+      <AssociatedInstitutionList className={sharedStyles}>
+        <Alert
+          isFieldLevel
+          key='no-associations'
+          status='warning'
+          message='You have no associated institutions.'
+        />
+      </AssociatedInstitutionList>
+    );
   }
 
   return (
@@ -48,9 +57,7 @@ export function ReviewInstitutions({
         your financial institution to view or update your financial institution
         profile.
       </Paragraph>
-      <List isLinks className='institution-list'>
-        {institutionList}
-      </List>
+      {institutionList}
     </SubsectionWrapper>
   );
 }

src/pages/Filing/ViewUserProfile/AssociatedInstitutions.tsx

@@ -1,7 +1,7 @@
-import { AssociatedInstitution } from 'components/AssociatedInstitution';
+import AssociatedInstitutionList from 'components/AssociatedInstitutionList';
 import { Link } from 'components/Link';
 import SectionIntro from 'components/SectionIntro';
-import { List, WellContainer } from 'design-system-react';
+import { WellContainer } from 'design-system-react';
 import type { InstitutionDetailsApiType } from 'types/formTypes';
 
 export default function AssociatedInstitutions({
@@ -32,11 +32,7 @@ export default function AssociatedInstitutions({
       </SectionIntro>
 
       <WellContainer className='u-mt30'>
-        <List isLinks className='institution-list'>
-          {associatedInstitutions.map(object => (
-            <AssociatedInstitution {...object} key={object.lei} />
-          ))}
-        </List>
+        <AssociatedInstitutionList institutions={associatedInstitutions} />
       </WellContainer>
     </div>
   );

tailwind.config.js

@@ -17,6 +17,8 @@ const config = {
         stepIndicatorIncomplete: '#D2D3D5',
         inProgressUploadValidation: '#43484E',
         labelHelper: '#43484E',
+        pacific: '#0072CE', // TODO: Integrate DS color vars
+        teal: '#257675',
       },
       fontFamily: {
         inter: ['Inter', ...defaultConfig.theme.fontFamily.sans],