adjust styling from dsc meeting feedback

department-of-veterans-affairs · Mar 10, 2025 · e1b3b61 · e1b3b61
1 parent 9baa5d3
commit e1b3b61
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git a/packages/storybook/stories/va-service-list-item.stories.jsx b/packages/storybook/stories/va-service-list-item.stories.jsx
@@ -57,6 +57,8 @@ MaximalBase.args = {
     'Approved on': 'May 5, 2011',
     'Program': 'Post-9/11 GI Bill',
     'Eligibility': '70%',
+    "Fourth item": 'Here is a fourth item',
+    "Fifth item": 'Here is a fifth item',
   },
   icon: 'school',
   serviceName: 'Education',
@@ -91,7 +93,7 @@ MaximalBase.argTypes = {
   },
   serviceNameHeadingLevel: {
     description: 'The heading level for the service name (defaults to h3)',
-    control: { type: 'number', min:2, max:6, },
+    control: { type: 'number', min: 2, max: 6, },
     table: { category: 'Properties', type: { summary: 'number' }, defaultValue: { summary: 3 } },
   },
   serviceLink: {
@@ -179,7 +181,7 @@ BaseWithCriticalInformation.args = {
   },
 };
 
-export const ServiceListWithMultipleServiceListItems = ({}) => {
+export const ServiceListWithMultipleServiceListItems = ({ }) => {
   return (
     <div>
       <MaximalBase {...MaximalBase.args} />

diff --git a/packages/web-components/src/components/va-service-list-item/va-service-list-item.scss b/packages/web-components/src/components/va-service-list-item/va-service-list-item.scss
@@ -34,9 +34,9 @@
 
     .name-and-chevron {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       width: 100%;
-    }    
+    }
 
     .icon {
       display: flex;
@@ -113,19 +113,20 @@
     .chevron-icon {
       margin-left: auto;
       font-size: 24px;
-      color: var(--vads-color-link);  
+      color: var(--vads-color-link);
       @media (min-width: 768px) {
         margin-left: 0.938rem;
       }
     }
+
   }
 
   .status {
     margin-top: .75rem;
   }
 
   .action-bar {
-    padding: 1rem 1.25rem;
+    padding: 1.25rem;
     margin-top: 1rem;
     background-color: var(--vads-color-warning);
     position: relative;
@@ -156,17 +157,22 @@
     }
   }
 
+  li {
+    padding-bottom: 0.25rem;
+  }
+
   ul {
     list-style-type: none;
     padding-left: 0;
     font-size: 1.06rem;
-    padding: 1.5rem 0 1.5rem 0;
+    padding: 1.25rem 0 1.25rem 0;
     margin: 0;
     &:last-child {
       padding-bottom: 0;
     }
   }
 
+
   .optional-link {
     margin-top: 1.5rem;
   }

diff --git a/packages/web-components/src/components/va-service-list-item/va-service-list-item.tsx b/packages/web-components/src/components/va-service-list-item/va-service-list-item.tsx
@@ -141,7 +141,11 @@ export class VaServiceListItem {
               )}
               <div class="name-and-chevron">
                 <HeadingTag class="service-name">{serviceName}</HeadingTag>
-                <va-icon class="chevron-icon" icon="chevron_right"></va-icon>
+                <va-icon
+                  class="chevron-icon"
+                  icon="chevron_right"
+                  size={4}
+                ></va-icon>
               </div>
             </div>
           </a>