@internetarchive/ia-book-actions 0.0.1 → 0.0.2-7.1

package/README.md

@@ -1,69 +1,115 @@
-[![Build Status](https://travis-ci.com/internetarchive/iaux-your-webcomponent.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-your-webcomponent) [![codecov](https://codecov.io/gh/internetarchive/iaux-your-webcomponent/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-your-webcomponent)
+# Component for lendable and embed items
 
-# Internet Archive Javascript WebComponent Template
+The book action button component build on LitElement with support for custom content and light DOM elements.
 
-This is a base template for creating Javascript WebComponents. It is based off of the [Open WebComponents generator](https://open-wc.org/docs/development/generator/) with some IA-specific customizations and some development niceities.
-
-## Usage
-
-1. Click the "Use this Template" button in GitHub to create a new repository based on this one.
-2. Clone your new repo and update the things below.
-
-### Things to update in your copy
-1. Remove this section
-2. Search for the strings `your-webcomponent` and `YourWebComponent` and those are most of the spots that need to be updated.
-3. `README.md` (this file). Update the readme in general, but also the badge URLs
-4. `package.json` Update the name and description
-5. Rename the `your-webcomponent.ts` and its associated `.test` file
-6. Update `.travis.yml` with the proper secure key. See the [Travis docs](https://blog.travis-ci.com/2014-03-13-slack-notifications/) for more information.
-
-## Local Demo with `web-dev-server`
+## Installation
 ```bash
-yarn start
+yarn install --save @internetarchive/ia-book-actions
 ```
-To run a local development server that serves the basic demo located in `demo/index.html`
 
-## Testing with Web Test Runner
-To run the suite of Web Test Runner tests, run
-```bash
-yarn run test
+## Usage of Book Actions
+```html
+<!-- index.html -->
+<style>
+  html {
+    font-size: 10px;
+    /* This is to match petabox's base font size */
+  }
+  body {
+    margin: 0;
+    text-align: center;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+  #demo {
+    height: 50px;
+  }
+  ia-book-actions {
+    --white: #fff;
+    --black: #000;
+    --primaryBGColor: var(--black);
+    --secondaryBGColor: #222;
+    --tertiaryBGColor: #333;
+    --primaryTextColor:  var(--white);
+    --primaryCTAFill: #194880;
+    --primaryCTABorder: #c5d1df;
+    --secondaryCTAFill: #333;
+    --secondaryCTABorder: #999;
+    --secondaryCTAFillRGB: 51, 51, 51;
+    --primaryErrorCTAFill: #e51c26;
+    --primaryErrorCTABorder: #f8c6c8;
+    --primaryCTAFillRGB: 25, 72, 128;
+    --primaryErrorCTAFillRGB: 229, 28, 38;
+    --primaryDisableCTAFill: #767676;
+  }
+</style>
+
+<ia-book-actions></ia-book-actions>
+
+<script type="module">
+    import '@internetarchive/ia-book-actions.js';
+    import { ModalConfig } from '@internetarchive/modal-manager';
+    import {
+      defaultLendingStatus,
+      canBrowseAndBorrow,
+    } from '../src/assets/data/lending-get-status-service.js';
+
+    let iaBookActions = document.querySelector('ia-book-actions');
+    iaBookActions.userid = '@neeraj-archive';
+    iaBookActions.identifier = 'naturalhistoryof00unse_4111';
+    iaBookActions.bookTitle = 'This is test title for any book';
+    iaBookActions.lendingStatus = {}; // lendinStatus in json
+    iaBookActions.bwbPurchaseUrl = 'https://bwb.com/produce/123';
+    iaBookActions.barType = ''; // title|action
+</script>
 ```
 
-To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
+![Book Action Bar](./assets/ia-book-action-screen.png "Book Action Bar Demo")
 
-```bash
-yarn run test:watch
+## Usage of Book Title
+```html
+<!-- along with above properties, set barType to 'title' -->
+<script type="module">
+  iaBookActions.barType = 'title'; // title|action
+</script>
 ```
+![Book Title Bar](./assets/ia-book-title-screen.png "Book Title Bar Demo")
 
-## Linting with ESLint, Prettier, and Types
-To scan the project for linting errors, run
-```bash
-yarn run lint
-```
+### Config Options
 
-You can lint with ESLint and Prettier individually as well
-```bash
-yarn run lint:eslint
+All of the config options:
+
+```javascript
+let iaBookActions = document.querySelector('ia-book-actions');
+const modalConfig = new ModalConfig(); // to show info/error modal 
+
+// set defaultLendingStatus for unavailable (without borrowables) book
+iaBookActions.userid = '@jack';
+iaBookActions.identifier = 'jack-sparrow';
+iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
+iaBookActions.lendingStatus = {active_borrows: 0, active_browses: 0}, // complete lendingStatus object
+iaBookActions.bwbPurchaseUrl = ''; // BWB purchase URl if any 
+iaBookActions.barType = '';
+iaBookActions.modalConfig = modalConfig;
 ```
+
+# Development
+
+## Prerequisite
 ```bash
-yarn run lint:prettier
+yarn install
 ```
 
-To automatically fix many linting errors, run
+## Start Development Server
 ```bash
-yarn run format
+yarn start
 ```
 
-You can format using ESLint and Prettier individually as well
+## Testing
 ```bash
-yarn run format:eslint
+yarn test
 ```
+
+## Linting
 ```bash
-yarn run format:prettier
+yarn lint
 ```
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
-
-If you customize the configuration a lot, you can consider moving them to individual files.

package/demo/index.html

@@ -71,6 +71,14 @@
       float: left;
       margin: 2px;
     }
+
+    body.modal-manager-open {
+      overflow: hidden;
+    }
+  
+    modal-manager[mode='closed'] {
+      display: none;
+    }
   </style>
 </head>
 
@@ -83,13 +91,9 @@
     import '../src/ia-book-actions.js';
     import {
       defaultLendingStatus,
-      canBrowse,
-      browsed,
       canBrowseAndBorrow,
-      browsedAndBorrow,
-      canBrowseAndBorrowod,
-      canBrowseAndJoinWaitlistForBorrow,
     } from '../src/assets/data/lending-get-status-service.js';
+    import { ModalConfig } from '@internetarchive/modal-manager';
 
     const userid = '@neeraj-archive';
     const identifier = 'naturalhistoryof00unse_4111';
@@ -97,70 +101,126 @@
 
     let iaBookActions = document.querySelector('ia-book-actions');
 
+    // for debugging
+    window.iaBookActions = iaBookActions;
+
+    const modalConfig = new ModalConfig();
+    modalConfig.headerColor = '#d9534f';
+
+    let lendingBarPostInit = function lendingBarPostInit() {
+      setTimeout(function() {}, 100);
+    }
+
     // set defaultLendingStatus for unavailable (without borrowables) book
-    iaBookActions.userid = '';
+    iaBookActions.userid = userid;
     iaBookActions.identifier = identifier;
-    iaBookActions.lendingStatus = defaultLendingStatus;
+    iaBookActions.bookTitle = 'Contemporary Black biography. Volume 39 : profiles from the interContemporary Black biography. Volume 39';
+    iaBookActions.lendingStatus = canBrowseAndBorrow;
     iaBookActions.bwbPurchaseUrl = '';
+    iaBookActions.modalConfig = modalConfig;
+    iaBookActions.lendingBarPostInit = lendingBarPostInit;
+    iaBookActions.tokenDelay = 2000; // 2 seconds
+    iaBookActions.returnUrl = 'https://openlibrary.org';
+
+    let lendingStatus1 = iaBookActions.lendingStatus;
+
+    document.querySelectorAll('.titleBar input[type=checkbox]').forEach((item) => {
+      item.addEventListener('click', (e) => {
+        if (e.target.checked) {
+          iaBookActions.barType = 'title';
+        } else {
+          iaBookActions.barType = 'action';
+        }
+      });
+    });
+
+    document.querySelectorAll('.errorEnable input[type=checkbox]').forEach((item) => {
+      if (window.location.href.indexOf('?error=true') !== -1) {
+        item.checked = true;
+      }
+      item.addEventListener('click', (e) => {
+        var searchParams = new URLSearchParams(window.location.search);
+        var separate = '';
+        if (e.target.checked) {
+          separate = '?';
+          searchParams.set('error', true);
+        } else {
+          separate = '';
+          searchParams.delete('error');
+        }
 
+        if (history.pushState) {
+          var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + separate + searchParams;
+          window.history.pushState({path:newurl},'',newurl);
+        }
+      });
+    });
+
+    
     document.querySelectorAll('.userState input[type=checkbox]').forEach((item) => {
       item.addEventListener('click', (e) => {
-        let lendingStatus1 = defaultLendingStatus;
         if (e.target.checked) {
           if (e.target.value === 'isAdmin') lendingStatus1.isAdmin = true;
           if (e.target.value === 'isLoggedIn') iaBookActions.userid = '@neeraj';
-        }
-        if (e.target.checked === false) {
+        } else {
           if (e.target.value === 'isAdmin') lendingStatus1.isAdmin = false;
           if (e.target.value === 'isLoggedIn') iaBookActions.userid = '';
         }
-          iaBookActions.lendingStatus = lendingStatus1;
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
       });
     });
 
-
     document.querySelectorAll('.printDisabled input[type=checkbox]').forEach((item) => {
-      const is_printdisabled = false;
-      const user_is_printdisabled = false;
       item.addEventListener('click', (e) => {
-        let lendingStatus1 = defaultLendingStatus;
-        if (e.target.value === 'is_printdisabled') {
-          lendingStatus1.is_printdisabled = true;
-        }
-        if (e.target.value === 'user_is_printdisabled') {
-          lendingStatus1.user_is_printdisabled = true;
+        if (e.target.checked) {
+          if (e.target.value === 'is_printdisabled') lendingStatus1.is_printdisabled = true;
+          if (e.target.value === 'user_is_printdisabled') lendingStatus1.user_is_printdisabled = true;
+        } else {
+          if (e.target.value === 'is_printdisabled') lendingStatus1.is_printdisabled = false;
+          if (e.target.value === 'user_is_printdisabled') lendingStatus1.user_is_printdisabled = false;
         }
 
-        if (lendingStatus1.user_is_printdisabled && lendingStatus1.is_printdisabled) {
-          iaBookActions.lendingStatus = lendingStatus1;
-        }
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
       });
     });
 
     document.querySelectorAll('.availableToBrowse input[type=radio]').forEach((item) => {
       item.addEventListener('click', (e) => {
-        let lendingStatus1 = defaultLendingStatus;
-
         if (e.target.value === 'user_has_browsed') {
           lendingStatus1.user_has_browsed = true;
           lendingStatus1.available_to_browse = false;
+          lendingStatus1.secondsLeftOnLoan = 10;
+          lendingStatus1.browsingExpired = false;
+        } else if(e.target.value === 'browsingExpired') {
+          lendingStatus1.user_has_browsed = true;
+          lendingStatus1.available_to_browse = false;
+          lendingStatus1.secondsLeftOnLoan = 0;
+          lendingStatus1.browsingExpired = true;
         } else if (e.target.value === 'available_to_browse') {
           lendingStatus1.available_to_browse = true;
           lendingStatus1.user_has_browsed = false;
         }
-        iaBookActions.lendingStatus = lendingStatus1;
+
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
       });
     });
 
     document.querySelectorAll('.availableToBorrow input[type=radio]').forEach((item) => {
       item.addEventListener('click', (e) => {
-        let lendingStatus1 = defaultLendingStatus;
-
         if (e.target.value === 'available_to_borrow') {
           lendingStatus1.available_to_borrow = true;
           lendingStatus1.user_on_waitlist = false;
           lendingStatus1.available_to_waitlist = false;
           lendingStatus1.user_has_borrowed = false;
+        } else if (e.target.value === 'user_can_claim_waitlist') {
+          lendingStatus1.available_to_borrow = true;
+          lendingStatus1.user_on_waitlist = true;
+          lendingStatus1.user_can_claim_waitlist = true;
+          lendingStatus1.user_has_borrowed = false;
+          lendingStatus1.available_to_waitlist = false;
         } else if (e.target.value === 'user_on_waitlist') {
           lendingStatus1.available_to_borrow = false;
           lendingStatus1.user_on_waitlist = true;
@@ -178,7 +238,8 @@
           lendingStatus1.user_has_borrowed = true;
         }
 
-        iaBookActions.lendingStatus = lendingStatus1;
+        let lending = {...defaultLendingStatus, ...lendingStatus1};
+        iaBookActions.lendingStatus = lending;
       });
     });
 
@@ -196,8 +257,22 @@
 
   <div>
     <fieldset>
-      <legend>Dev try for lending banner</legend>
+      <legend>Dev testing for book title bar</legend>
+        <table class="initial">
+          <tr>
+            <td class="titleBar">
+              <label><input type="checkbox" name="title" value="title" />Title Bar</label>
+            </td>
+          </tr>
+        </table>
+    </fieldset>
+
+    <fieldset>
+      <legend>Dev testing for book action bar</legend>
         <table class="initial">
+          <tr colspan='5'>
+            <td class="errorEnable"><label><input type="checkbox" name="errorEnable" value="errorEnable" />Do you want to see error response?</label></td>
+          </tr>
           <tr>
             <td class="userState">
               <label><input type="checkbox" name="user" value="isAdmin" />isAdmin</label>
@@ -210,15 +285,17 @@
             <td class="availableToBrowse">
               <label><input type="radio" name="browse" value="available_to_browse" />available_to_browse</label>
               <label><input type="radio" name="browse" value="user_has_browsed" />user_has_browsed</label>
+              <label><input type="radio" name="browse" value="browsingExpired" />browsingExpired</label>
             </td>
             <td class="availableToBorrow">
               <label><input type="radio" name="borrow" value="available_to_borrow" />available_to_borrow</label>
               <label><input type="radio" name="borrow" value="user_on_waitlist" />user_on_waitlist</label>
+              <label><input type="radio" name="borrow" value="user_can_claim_waitlist" />user_can_claim_waitlist</label>
               <label><input type="radio" name="borrow" value="available_to_waitlist" />available_to_waitlist</label>
               <label><input type="radio" name="borrow" value="user_has_borrowed" />user_has_borrowed</label>
             </td>
             <td class="purchase">
-              <label><input type="checkbox" name="purchase" value="purchase" />purchase (Click to reflect selection)</label>
+              <label><input type="checkbox" name="purchase" value="purchase" />purchase</label>
             </td>
 
             <td class="reflect">
@@ -229,30 +306,6 @@
             </td>
           </tr>
         </table>
-
-        <table class="mode" style="display: none;">
-        <tr>
-          <td>
-            <label><input type="radio" name="contact" value="canBrowse" />CanBrowse</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact" value="browsed" />browsed</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact" value="canBrowseAndBorrow" />canBrowseAndBorrow</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact" value="browsedAndBorrow" />browsedAndBorrow</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact" value="canBrowseAndBorrowod" />canBrowseAndBorrowod</label>
-          </td>
-          <td>
-            <label><input type="radio" name="contact"
-              id="canBrowseAndJoinWaitlistForBorrow" value="canBrowseAndJoinWaitlistForBorrow" />canBrowseAndJoinWaitlistForBorrow</label>
-          </td>
-        </tr>
-        </table>
     </fieldset>
   </div>
 </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/ia-book-actions",
-  "version": "0.0.1",
+  "version": "0.0.27.1",
   "description": "Bookreader actions for borrowable book",
   "author": "Internet Archive",
   "license": "AGPL-3.0-only",
@@ -13,23 +13,24 @@
     "start": "web-dev-server",
     "lint": "eslint --ext .js,.html . --ignore-path .gitignore && prettier \"**/*.js\" --check --ignore-path .gitignore",
     "format": "eslint --ext .js,.html . --fix --ignore-path .gitignore && prettier \"**/*.js\" --write --ignore-path .gitignore",
-    "test": "yarn run lint && web-test-runner --coverage",
-    "test:fast": "web-test-runner --coverage",
-    "test:watch": "web-test-runner --watch"
+    "test": "yarn run lint && yarn test:fast",
+    "test:fast": "web-test-runner --coverage --playwright --browsers chromium firefox webkit",
+    "test:watch": "web-test-runner --watch --playwright --browsers chromium firefox webkit"
   },
   "dependencies": {
-    "@internetarchive/ia-icons": "^1.2.2",
-    "@internetarchive/icon-bookmark": "^1.1.3",
-    "@internetarchive/icon-info": "^1.2.5",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0",
-    "resize-observer-polyfill": "^1.5.1"
+    "@internetarchive/icon-info": "^1.2.6",
+    "@internetarchive/local-cache": "^0.2.0",
+    "@internetarchive/modal-manager": "^0.2.1",
+    "@internetarchive/shared-resize-observer": "^0.2.0",
+    "lit": "^2.2.1"
   },
   "devDependencies": {
     "@open-wc/eslint-config": "^4.2.0",
     "@open-wc/testing": "^2.0.0",
     "@web/dev-server": "^0.1.1",
-    "@web/test-runner": "^0.11.5",
+    "@web/dev-server-esbuild": "^0.2.16",
+    "@web/test-runner": "^0.11.7",
+    "@web/test-runner-playwright": "^0.8.8",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.1",
@@ -39,7 +40,7 @@
     "husky": "^1.0.0",
     "lint-staged": "^10.0.0",
     "prettier": "^2.0.4",
-    "sinon": "^9.2.4"
+    "sinon": "^13.0.2"
   },
   "eslintConfig": {
     "extends": [

package/src/assets/data/archive-logo.js

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+
+export const archiveLogo = html`
+  <svg
+    class="ia-logo"
+    width="26"
+    height="26"
+    viewBox="0 0 27 30"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby="logoTitleID logoDescID"
+  >
+    <title id="logoTitleID">Internet Archive logo</title>
+    <desc id="logoDescID">
+      A line drawing of the Internet Archive headquarters building façade.
+    </desc>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <mask id="mask-2" fill="white">
+        <path
+          d="M26.6666667,28.6046512 L26.6666667,30 L0,30 L0.000283687943,28.6046512 L26.6666667,28.6046512 Z M25.6140351,26.5116279 L25.6140351,28.255814 L1.05263158,28.255814 L1.05263158,26.5116279 L25.6140351,26.5116279 Z M3.62469203,7.6744186 L3.91746909,7.82153285 L4.0639977,10.1739544 L4.21052632,13.9963932 L4.21052632,17.6725617 L4.0639977,22.255044 L4.03962296,25.3421929 L3.62469203,25.4651163 L2.16024641,25.4651163 L1.72094074,25.3421929 L1.55031755,22.255044 L1.40350877,17.6970339 L1.40350877,14.0211467 L1.55031755,10.1739544 L1.68423854,7.80887484 L1.98962322,7.6744186 L3.62469203,7.6744186 Z M24.6774869,7.6744186 L24.9706026,7.82153285 L25.1168803,10.1739544 L25.2631579,13.9963932 L25.2631579,17.6725617 L25.1168803,22.255044 L25.0927809,25.3421929 L24.6774869,25.4651163 L23.2130291,25.4651163 L22.7736357,25.3421929 L22.602418,22.255044 L22.4561404,17.6970339 L22.4561404,14.0211467 L22.602418,10.1739544 L22.7369262,7.80887484 L23.0420916,7.6744186 L24.6774869,7.6744186 Z M9.94042303,7.6744186 L10.2332293,7.82153285 L10.3797725,10.1739544 L10.5263158,13.9963932 L10.5263158,17.6725617 L10.3797725,22.255044 L10.3556756,25.3421929 L9.94042303,25.4651163 L8.47583122,25.4651163 L8.0362015,25.3421929 L7.86556129,22.255044 L7.71929825,17.6970339 L7.71929825,14.0211467 L7.86556129,10.1739544 L8.00005604,7.80887484 L8.30491081,7.6744186 L9.94042303,7.6744186 Z M18.0105985,7.6744186 L18.3034047,7.82153285 L18.449948,10.1739544 L18.5964912,13.9963932 L18.5964912,17.6725617 L18.449948,22.255044 L18.425851,25.3421929 L18.0105985,25.4651163 L16.5460067,25.4651163 L16.1066571,25.3421929 L15.9357367,22.255044 L15.7894737,17.6970339 L15.7894737,14.0211467 L15.9357367,10.1739544 L16.0702315,7.80887484 L16.3753664,7.6744186 L18.0105985,7.6744186 Z M25.6140351,4.53488372 L25.6140351,6.97674419 L1.05263158,6.97674419 L1.05263158,4.53488372 L25.6140351,4.53488372 Z M13.0806755,0 L25.9649123,2.93331338 L25.4484139,3.8372093 L0.771925248,3.8372093 L0,3.1041615 L13.0806755,0 Z"
+          id="path-1"
+        ></path>
+      </mask>
+      <use fill="#FFFFFF" xlink:href="#path-1"></use>
+      <g mask="url(#mask-2)" fill="#FFFFFF">
+        <path
+          d="M0,0 L26.6666667,0 L26.6666667,30 L0,30 L0,0 Z"
+          id="swatch"
+        ></path>
+      </g>
+    </g>
+  </svg>
+`;

package/src/assets/data/dropdown-arrow.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html } from 'lit';
 
 export const dropdownOpened = html`<svg
   height="4"