UIIN-1522: Add icons and label text for bound-with materials (folio-o…

…rg#1436)

* Modify display of statistical codes in instance detail view (UIIN-1150)

* Show bound-with icon for BW items (UIIN-1522)

* Display multi-title notice for bound-withs (UIIN-1523)

* Add bound-with icon and CSS

* Update bound-with icon display

* Update changelog

CHANGELOG.md

@@ -12,6 +12,8 @@
 * Sort statistical codes by code-type, then code, then name. Refs UIIN-1550.
 * Populate a value in Source field when View/Edit Inventory Holdings Record. Refs UIIN-1548.
 * Fix instance duplication when child or parent records are present. Fixes UIIN-1562.
+* Add bound-with icons and item detail view header note. Refs UIIN-1522, UIIN-1523, UIIN-1524.
+
 
 ## [7.1.2](https://github.com/folio-org/ui-inventory/tree/v7.1.2) (2021-07-14)
 [Full Changelog](https://github.com/folio-org/ui-inventory/compare/v7.1.1...v7.1.2)

package.json

@@ -26,6 +26,11 @@
         "alt": "View and manage instance records, holdings records and item records",
         "title": "Inventory"
       },
+      {
+        "name": "bound-with",
+        "alt": "Bound with one or more instances or holdings",
+        "title": "Bound-with"
+      },
       {
         "name": "holdings",
         "alt": "",

src/Instance/ItemsList/ItemBarcode.js

@@ -21,6 +21,7 @@ import {
   Highlighter,
   IconButton,
 } from '@folio/stripes/components';
+import css from '../../View.css';
 
 const ItemBarcode = ({ location, item, holdingId, instanceId }) => {
   const { search } = location;
@@ -62,6 +63,14 @@ const ItemBarcode = ({ location, item, holdingId, instanceId }) => {
           </div>
         </CopyToClipboard>
       }
+      {(item.isBoundWith) &&
+        <AppIcon
+          size="small"
+          app="@folio/inventory"
+          iconKey="bound-with"
+          iconClassName={css.boundWithIcon}
+        />
+      }
     </>
   );
 };

src/View.css

@@ -1,3 +1,16 @@
 .rowMarginBottom {
   margin-bottom: 0.5em;
 }
+
+.multiTitle {
+  color: red;
+}
+
+.warnIcon {
+  margin-left: var(--gutter-static-one-third);
+}
+
+.boundWithIcon {
+  background-color: transparent !important;
+  margin-left: var(--gutter-static-one-third);
+}

src/components/InstancesList/InstancesList.js

@@ -632,6 +632,7 @@ class InstancesList extends React.Component {
       'title': ({
         title,
         discoverySuppress,
+        isBoundWith,
         staffSuppress,
       }) => (
         <AppIcon
@@ -641,6 +642,14 @@ class InstancesList extends React.Component {
           iconAlignment="baseline"
         >
           {title}
+          {(isBoundWith) &&
+            <AppIcon
+              size="small"
+              app="@folio/inventory"
+              iconKey="bound-with"
+              iconClassName={css.boundWithIcon}
+            />
+          }
           {(discoverySuppress || staffSuppress) &&
           <span className={css.warnIcon}>
             <Icon

src/components/InstancesList/instances.css

@@ -6,6 +6,12 @@
 .warnIcon {
   margin-left: var(--gutter-static-one-third);
 }
+
+.boundWithIcon {
+  background-color: transparent !important;
+  margin-left: var(--gutter-static-one-third);
+}
+
 .cellAlign {
   align-items: flex-start;
 }

src/views/ItemView.js

@@ -76,6 +76,7 @@ import {
 } from '../constants';
 import ItemStatus from './ItemStatus';
 import { WarningMessage } from '../components';
+import css from '../View.css';
 
 export const requestStatusFiltersString = map(requestStatuses, requestStatus => `requestStatus.${requestStatus}`).join(',');
 
@@ -690,6 +691,8 @@ class ItemView extends React.Component {
       </Col>
     );
 
+    const boundWithCount = item?.boundWithTitles?.length;
+
     return (
       <IntlConsumer>
         {intl => (
@@ -824,6 +827,19 @@ class ItemView extends React.Component {
                     </em>
                   </span>
                   )}
+                  { boundWithCount > 0 &&
+                    <>
+                      {' '}
+                      <span className={css.multiTitle}>
+                        <FormattedMessage
+                          id="ui-inventory.boundWith"
+                          values={{
+                            boundWithCount,
+                          }}
+                        />
+                      </span>
+                    </>
+                  }
                   <div>
                     <FormattedMessage
                       id="ui-inventory.holdingsTitle"

translations/ui-inventory/en.json

@@ -102,6 +102,7 @@
   "createNewItem": "Create New Item",
   "updateItem": "Update item",
   "instanceTitle": "Instance: {title}.",
+  "boundWith": "and {boundWithCount, plural, one {one more title} other {and other titles}}",
   "holdingsTitle": " Holdings: {location} > {callNumber}",
   "holdingsPaneTitle": "Holdings • {location} • {callNumber}",
   "waitingForResources": "Waiting for resources",

translations/ui-inventory/en_US.json

@@ -358,6 +358,7 @@
     "natureOfContentTerms": "Nature of content",
     "natureOfContentTerm": "Nature of content term",
     "instanceTitle": "Instance: {title}.",
+    "boundWith": "and {boundWithCount, plural, one {one more title} other {and other titles}}",
     "items.damageStatus.damaged": "Damaged",
     "items.damageStatus.notdamaged": "Not damaged",
     "instanceNotes": "Instance notes",