Merge pull request #233 from mlibrary/metadata-icon-size

Increase record related icon sizes from 16px to 19px.
mlibrary · May 5, 2020 · cd64290 · cd64290
2 parents 41eac6d + 9df61aa
commit cd64290
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 77 deletions.
diff --git a/src/modules/resource-acccess/components/holder.js b/src/modules/resource-acccess/components/holder.js
@@ -9,14 +9,14 @@ import {
   ExpandableProvider,
   ExpandableChildren,
   ExpandableButton,
-  Button
+  Button,
 } from "@umich-lib/core";
 import Icon from "../../reusable/components/Icon";
 
 const cell_padding = {
   paddingTop: SPACING["XS"],
   paddingBottom: SPACING["XS"],
-  paddingRight: SPACING["L"]
+  paddingRight: SPACING["L"],
 };
 
 export default function Holder({
@@ -32,9 +32,9 @@ export default function Holder({
     <div
       css={{
         a: {
-          textDecoration: "underline"
+          textDecoration: "underline",
         },
-        padding: `${SPACING["S"]} 0`
+        padding: `${SPACING["S"]} 0`,
       }}
       {...rest}
     >
@@ -45,7 +45,7 @@ export default function Holder({
             css={{
               color: COLORS.neutral["400"],
               display: "inline-block",
-              paddingBottom: SPACING["S"]
+              paddingBottom: SPACING["S"],
             }}
           >
             {captionLink.text}
@@ -58,15 +58,15 @@ export default function Holder({
         <Expandable>
           <div
             css={{
-              overflowX: "auto"
+              overflowX: "auto",
             }}
           >
             <table
               css={{
                 width: "100%",
                 minWidth: "24rem",
                 textAlign: "left",
-                tableLayout: "fixed"
+                tableLayout: "fixed",
               }}
             >
               <thead>
@@ -80,7 +80,8 @@ export default function Holder({
                         color: COLORS.neutral["300"],
                         ...cell_padding,
                         borderBottom: `solid 2px ${COLORS.neutral["100"]}`,
-                        width: headings.length === 3 && i === 2 ? "50%" : "auto"
+                        width:
+                          headings.length === 3 && i === 2 ? "50%" : "auto",
                       }}
                     >
                       {heading}
@@ -116,14 +117,14 @@ function Notes({ notes }) {
         css={{
           display: "flex",
           alignItems: "center",
-          marginBottom: SPACING["S"]
+          marginBottom: SPACING["S"],
         }}
       >
         <span css={{ paddingRight: "0.25rem" }}>Location has:</span>
         {expanded ? (
-          <Icon d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
+          <Icon d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" size={19} />
         ) : (
-          <Icon d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
+          <Icon d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" size={19} />
         )}
       </Button>
 
@@ -134,7 +135,7 @@ function Notes({ notes }) {
               key={note + i}
               css={{
                 paddingBottom: SPACING["XS"],
-                color: COLORS.neutral["300"]
+                color: COLORS.neutral["300"],
               }}
             >
               {note}
@@ -167,7 +168,7 @@ function HolderRows({ rows }) {
           colSpan={`${rows[0].length}`}
           css={{
             ...cell_padding,
-            wordBreak: "break-word"
+            wordBreak: "break-word",
           }}
         >
           <ExpandableButton kind="secondary" small count={rows.length} />
@@ -199,7 +200,7 @@ function HolderRows({ rows }) {
         ))}
       </ExpandableChildren>
       <ExpandableProvider>
-        {context => (
+        {(context) => (
           <React.Fragment>
             {context.expanded && (
               <React.Fragment>{renderExpandableButton()}</React.Fragment>

diff --git a/src/modules/resource-acccess/components/holders.js b/src/modules/resource-acccess/components/holders.js
@@ -1,34 +1,31 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
-import React from 'react'
+import { jsx } from "@emotion/core";
+import React from "react";
 import {
   Accordion,
   AccordionItem,
   AccordionItemHeading,
   AccordionItemPanel,
   AccordionItemButton,
-  AccordionItemState
-} from 'react-accessible-accordion';
-import Icon from '../../reusable/components/Icon'
+  AccordionItemState,
+} from "react-accessible-accordion";
+import Icon from "../../reusable/components/Icon";
 
-import HolderContainer from './holder-container'
-import {
-  COLORS,
-  SPACING
-} from '../../reusable/umich-lib-core-temp/index'
+import HolderContainer from "./holder-container";
+import { COLORS, SPACING } from "../../reusable/umich-lib-core-temp/index";
 
 /*
   Holders
     Holder
       Holdings
         Holding
 */
-export default function Holders ({
+export default function Holders({
   record,
   preExpandedIds,
   handleChange,
   createId,
-  context
+  context,
 }) {
   return (
     <Accordion
@@ -37,8 +34,8 @@ export default function Holders ({
       preExpanded={preExpandedIds}
       css={{
         '[aria-expanded="true"][data-accordion-component]': {
-          background: COLORS.blue['100']
-        }
+          background: COLORS.blue["100"],
+        },
       }}
       onChange={(ids) => handleChange(ids)}
       key={record.type + record.uid}
@@ -49,50 +46,55 @@ export default function Holders ({
             {({ expanded }) => (
               <React.Fragment>
                 <AccordionItemHeading>
-                  <AccordionItemHeadingContent data={data} expanded={expanded} />
+                  <AccordionItemHeadingContent
+                    data={data}
+                    expanded={expanded}
+                  />
                 </AccordionItemHeading>
                 <AccordionItemPanel>
-                {expanded ? (
-                  <HolderContainer context={context} {...data} />
-                ) : null}
+                  {expanded ? (
+                    <HolderContainer context={context} {...data} />
+                  ) : null}
                 </AccordionItemPanel>
               </React.Fragment>
             )}
           </AccordionItemState>
         </AccordionItem>
       ))}
     </Accordion>
-  )
+  );
 }
 
 const contentPadding = {
-  padding: `${SPACING['S']} ${SPACING['M']}`
-}
+  padding: `${SPACING["S"]} ${SPACING["M"]}`,
+};
 
 const headingStyles = {
   ...contentPadding,
-  borderTop: `solid 1px ${COLORS.neutral['100']}`,
-  cursor: 'pointer',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  ':hover [data-holdings-holder-name]': {
-    borderBottom: `solid 1px`
+  borderTop: `solid 1px ${COLORS.neutral["100"]}`,
+  cursor: "pointer",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  ":hover [data-holdings-holder-name]": {
+    borderBottom: `solid 1px`,
   },
-  color: COLORS.neutral['300']
-}
+  color: COLORS.neutral["300"],
+};
 
 const icons = {
-  'description': 'M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z',
-  'link': 'M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z'
-}
+  description:
+    "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z",
+  link:
+    "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z",
+};
 
 function getIconPath(type) {
-  switch(type) {
-    case 'electronic':
-      return icons['link']
+  switch (type) {
+    case "electronic":
+      return icons["link"];
     default:
-      return icons['description']
+      return icons["description"];
   }
 }
 
@@ -101,40 +103,36 @@ function getIconPath(type) {
   - And create the Google Analytics click event handler.
 */
 function AccordionItemHeadingContent({ data, expanded }) {
-  const {
-    rows,
-    caption,
-    type
-  } = data
-
+  const { rows, caption, type } = data;
+
   return (
     <AccordionItemButton css={headingStyles}>
-      <span css={{
-        paddingRight: SPACING['M']
-      }}>
-        <span css={{ paddingRight: SPACING['S'] }}>
-          <Icon d={getIconPath(type)} css={{ marginTop: '-4px' }} />
+      <span
+        css={{
+          paddingRight: SPACING["M"],
+        }}
+      >
+        <span css={{ paddingRight: SPACING["S"] }}>
+          <Icon d={getIconPath(type)} css={{ marginTop: "-4px" }} size={19} />
         </span>
         <span
           data-holdings-holder-name
-          css={{ fontWeight: '600', color: COLORS.neutral['400'] }}
-        >{caption || "Availability"}</span>
-        <span css={{ padding: `0 ${SPACING['XS']}` }}>·</span>
-        <span>{rows.length} item{rows.length > 1 ? 's' : null}</span>
+          css={{ fontWeight: "600", color: COLORS.neutral["400"] }}
+        >
+          {caption || "Availability"}
+        </span>
+        <span css={{ padding: `0 ${SPACING["XS"]}` }}>·</span>
+        <span>
+          {rows.length} item{rows.length > 1 ? "s" : null}
+        </span>
       </span>
       <span>
         {expanded ? (
-          <Icon
-            size={24}
-            d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"
-          />
+          <Icon size={24} d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
         ) : (
-          <Icon
-            size={24}
-            d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-          />
+          <Icon size={24} d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
         )}
       </span>
     </AccordionItemButton>
-  )
-}
+  );
+}
diff --git a/src/modules/reusable/components/Metadata/index.js b/src/modules/reusable/components/Metadata/index.js
@@ -168,7 +168,7 @@ function Description({ data }) {
             alignItems: "center",
           }}
         >
-          <Icon icon={icon} size={16} />
+          <Icon icon={icon} size={19} />
         </span>
       )}