ui wip

src/registrar/assets/src/js/getgov/portfolio-member-page.js

@@ -94,7 +94,7 @@ export function initAddNewMemberPageListeners() {
     const permissionDetailsContainer = document.getElementById("permission_details");
     permissionDetailsContainer.innerHTML = ""; // Clear previous content
 
-    if (permission_details_div_id == 'new-member-basic-permissions') {
+    if (permission_details_div_id == 'member-basic-permissions') {
       // for basic users, display values are based on selections in the form
       // Get all permission sections (divs with h3 and radio inputs)
       const permissionSections = document.querySelectorAll(`#${permission_details_div_id} > h3`);
@@ -181,7 +181,7 @@ export function initAddNewMemberPageListeners() {
       if (selectedAccess && selectedAccess.value === 'organization_admin') {
         populatePermissionDetails('admin');
       } else {
-        populatePermissionDetails('new-member-basic-permissions');
+        populatePermissionDetails('member-basic-permissions');
       }
 
       //------- Show the modal
@@ -198,7 +198,7 @@ export function initPortfolioMemberPageRadio() {
   document.addEventListener("DOMContentLoaded", () => {
       let memberForm = document.getElementById("member_form");
       let newMemberForm = document.getElementById("add_member_form")
-      if (memberForm) {
+      if (memberForm || newMemberForm) {
         hookupRadioTogglerListener(
           'role', 
           {
@@ -206,14 +206,6 @@ export function initPortfolioMemberPageRadio() {
             'organization_member': 'member-basic-permissions'
           }
         );
-      }else if (newMemberForm){
-        hookupRadioTogglerListener(
-          'role', 
-          {
-              'organization_admin': '',
-              'organization_member': 'new-member-basic-permissions'
-          }
-        );
       }
   });
 }

src/registrar/assets/src/sass/_theme/_accordions.scss

@@ -49,3 +49,29 @@ tr:last-of-type .usa-accordion--more-actions .usa-accordion__content {
     bottom: -10px;
     right: 30px;
 }
+
+.usa-accordion--show-more {
+    width: auto;
+    .usa-accordion__button[aria-expanded=false],
+    .usa-accordion__button[aria-expanded=false]:hover,
+    .usa-accordion__button[aria-expanded=true],
+    .usa-accordion__button[aria-expanded=true]:hover {
+        background-image: none;
+        background-color: transparent;
+        padding-right: 0;
+        padding-left: 0;
+        font-weight: normal;
+    }
+    .usa-accordion__button[aria-expanded=true] .expand-more {
+        display: inline-block;
+    }
+    .usa-accordion__button[aria-expanded=true] .expand-less {
+        display: none;
+    }
+    .usa-accordion__button[aria-expanded=false] .expand-more {
+        display: none;
+    }
+    .usa-accordion__button[aria-expanded=false] .expand-less {
+        display: inline-block;
+    }
+}

src/registrar/assets/src/sass/_theme/_tables.scss

@@ -99,3 +99,15 @@ th {
     }
   }
 }
+
+.dotgov-table--padding-left {
+  td, th {
+    padding: units(2) units(4) units(2) units(2);
+  }
+}
+
+.usa-table--bg-transparent {
+  td, thead th {
+    background-color: transparent;
+  }
+}

src/registrar/assets/src/sass/_theme/_typography.scss

@@ -51,3 +51,7 @@ h2 {
   padding-left: units(1);
   border-left: 2px solid color('base-lighter');
 }
+
+.font-body-1 {
+  font-size: size('body', 1);
+}

src/registrar/forms/portfolio.py

@@ -132,6 +132,7 @@ class BasePortfolioMemberForm(forms.ModelForm):
         ],
         widget=forms.RadioSelect,
         required=False,
+        initial=UserPortfolioPermissionChoices.VIEW_MANAGED_DOMAINS.value,
         error_messages={
             "required": "Member domain permission is required",
         },
@@ -146,6 +147,7 @@ class BasePortfolioMemberForm(forms.ModelForm):
         ],
         widget=forms.RadioSelect,
         required=False,
+        initial="no_access",
         error_messages={
             "required": "Basic member permission is required",
         },
@@ -158,6 +160,7 @@ class BasePortfolioMemberForm(forms.ModelForm):
         ],
         widget=forms.RadioSelect,
         required=False,
+        initial="no_access",
         error_messages={
             "required": "Admin member permission is required",
         },

src/registrar/templates/portfolio_members_add_new.html

@@ -62,8 +62,139 @@
       {% endwith %}
     </fieldset>
 
+    <div class="usa-accordion usa-accordion--show-more">
+      <h4 class="usa-accordion__heading">
+        <button
+          type="button"
+          class="usa-accordion__button"
+          aria-expanded="false"
+          aria-controls="admin-vs-basic-matrix"
+        >
+          <svg class="usa-icon font-body-xl text-primary-darker text-middle" aria-hidden="true" focusable="false" role="img">
+            <use xlink:href="/public/img/sprite.svg#help_outline"></use>
+          </svg>
+          <span class="text-middle">
+            How are admins and basic members different?
+          </span>
+          <svg class="usa-icon font-body-xl text-primary text-middle expand-less" aria-hidden="true" focusable="false" role="img">
+            <use xlink:href="/public/img/sprite.svg#expand_less"></use>
+          </svg>
+          <svg class="usa-icon font-body-xl text-primary text-middle expand-more" aria-hidden="true" focusable="false" role="img">
+            <use xlink:href="/public/img/sprite.svg#expand_more"></use>
+          </svg>
+        </button>
+      </h4>
+      <div id="admin-vs-basic-matrix" class="usa-accordion__content bg-transparent padding-top-0">
+        <table class="usa-table dotgov-table dotgov-table--padding-left usa-table--bg-transparent usa-table--borderless usa-table--striped font-body-2xs">
+          <thead>
+            <tr>
+              <th scope="col" role="columnheader"><span class="text-base-darkest text-normal">Member actions available</span></th>
+              <th scope="col" role="columnheader" class="text-center">Admin</th>
+              <th scope="col" role="columnheader" class="text-center">Basic</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row">
+                View domains they manage
+                <svg 
+                  class="usa-icon usa-tooltip text-primary text-middle margin-bottom-05 no-click-outline-and-cursor-help"
+                  data-position="top"
+                  title="Domains can be assigned after invitation."
+                  focusable="true"
+                  aria-label="Domains can be assigned after invitation."
+                  role="tooltip"
+                >
+                  <use aria-hidden="true" xlink:href="/public/img/sprite.svg#info_outline"></use>
+                </svg>
+              </th>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#check"></use>
+                </svg>
+              </td>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#check"></use>
+                </svg>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">View all domains for the organization</th>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#check"></use>
+                </svg>
+              </td>
+              <td class="text-center">
+                <span class="font-body-1 text-primary-darker">Optional</span>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">View all domain requests</th>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#check"></use>
+                </svg>
+              </td>
+              <td class="text-center">
+                <span class="font-body-1 text-primary-darker">Optional</span>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Create domain requests</th>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#check"></use>
+                </svg>
+              </td>
+              <td class="text-center">
+                <span class="font-body-1 text-primary-darker">Optional</span>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">View all member permissions</th>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#check"></use>
+                </svg>
+              </td>
+              <td class="text-center">
+                <span class="font-body-1 text-primary-darker">Optional</span>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Manage member permissions</th>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#check"></use>
+                </svg>
+              </td>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#cancel"></use>
+                </svg>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Manage organization metadata (address)</th>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#check"></use>
+                </svg>
+              </td>
+              <td class="text-center">
+                <svg class="usa-icon font-body-xl text-primary-darker" aria-hidden="true" focusable="false" role="img">
+                  <use xlink:href="/public/img/sprite.svg#cancel"></use>
+                </svg>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
     <!-- Basic access form -->
-    <div id="new-member-basic-permissions" class="margin-top-2">
+    <div id="member-basic-permissions" class="margin-top-2">
       <h2>What permissions do you want to add?</h2>
       <p>Configure the permissions for this member. Basic members cannot manage member permissions or organization metadata.</p>
 
@@ -85,7 +216,7 @@
 
     <h3 class="margin-bottom-1">Domain management</h3>
 
-    <p>After you invite this person to your organization, you can assign domain management permissions on their member profile.</p>
+    <p class="margin-top-0">After you invite this person to your organization, you can assign domain management permissions on their member profile.</p>
 
     <!-- Submit/cancel buttons -->
     <div class="margin-top-3">