Adding ExpandableButton to notes that have more than 2 list items.

Author: erinesullivan

src/modules/resource-acccess/components/Holder/index.js

@@ -22,26 +22,37 @@ const notesList = (notes) => {
   }
 
   return (
-    <ul>
-      {notes.map((note, index) => {
-        return (
-          <li
-            key={note + index}
-            className='text-grey__light padding-bottom__xs'
-          >
-            {note}
-          </li>
-        );
-      })}
-    </ul>
+    <Expandable>
+      <ul className='margin-bottom__none'>
+        <ExpandableChildren show={2}>
+          {notes.map((note, index) => {
+            return (
+              <li
+                key={note + index}
+                className='text-grey__light padding-bottom__xs'
+              >
+                {note}
+              </li>
+            );
+          })}
+        </ExpandableChildren>
+      </ul>
+
+      {notes.length > 2 && (
+        <ExpandableButton
+          name='holdings notes'
+          count={notes.length}
+        />
+      )}
+    </Expandable>
   );
 };
 
 const Holder = ({ captionLink, headings, notes, preExpanded, rows, ...rest }) => {
   const isExpandable = rows.length > 10;
   return (
-    <div {...rest}>
-      {captionLink && (
+    <div className='holder-content' {...rest}>
+      {captionLink?.href && (
         <p className='margin__none'>
           <Anchor href={captionLink.href} className='btn--tertiary'>
             {captionLink.text}

src/modules/resource-acccess/components/Holder/styles.css

@@ -1,3 +1,12 @@
+.holder-content > * + * {
+  margin-top: 1rem;
+}
+
+.holder-content > ul + .btn {
+  margin-left: 2.5rem;
+  margin-top: 0;
+}
+
 .holder-container {
   overflow-x: auto;
 }