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

package/src/assets/data/lending-get-status-service.js

@@ -34,6 +34,7 @@ export const defaultLendingStatus = {
   users_on_waitlist: 0,
   // userid: "",
   bookUrl: '/details/practicalorganic00plim',
+  browsingExpired: false,
   daysLeftOnLoan: 0,
   isAdmin: false,
   isArchiveOrgLending: true,
@@ -47,7 +48,7 @@ export const defaultLendingStatus = {
   loanRecord: [],
   loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
   maxLoans: 10,
-  secondsLeftOnLoan: 0,
+  secondsLeftOnLoan: 10,
   shouldProtectImages: true,
   totalWaitlistCount: 0,
   userHasBorrowed: false,
@@ -58,139 +59,6 @@ export const defaultLendingStatus = {
   userWaitlistPosition: -1,
   userid: '@neeraj-archive',
 };
-
-export const canBrowse = {
-  active_borrows: 0,
-  active_browses: 0,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 1,
-  available_lendable_copies: 1,
-  available_to_borrow: false,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: null,
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: null,
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 0,
-  user_loan_record: [],
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: true,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 0,
-  loanRecord: [],
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 0,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: false,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const browsed = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: false,
-  available_to_browse: false,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: true,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
 export const canBrowseAndBorrow = {
   active_borrows: 0,
   active_browses: 1,
@@ -261,206 +129,3 @@ export const canBrowseAndBorrow = {
   userWaitlistPosition: -1,
   userid: '@neeraj-archive',
 };
-
-export const browsedAndBorrow = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: true,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: true,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const canBrowseAndBorrowod = {
-  active_borrows: 0,
-  active_browses: 1,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 0,
-  available_lendable_copies: 0,
-  available_to_borrow: true,
-  available_to_browse: true,
-  available_to_waitlist: false,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: null,
-  last_browse: '2021-07-30 09:57:40',
-  last_waitlist: null,
-  max_borrowable_copies: 0,
-  max_browsable_copies: 1,
-  max_lendable_copies: 1,
-  next_borrow_expiration: null,
-  next_browse_expiration: '2021-07-30 10:57:40',
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: true,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 1,
-  user_loan_record: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  user_on_waitlist: false,
-  users_on_waitlist: 0,
-  // userid: "",
-  bookUrl: '/details/practicalorganic00plim',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: false,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 1,
-  loanId: '1ca15f92d07dfdae3f7b1516084aec5d603800b8',
-  loanRecord: {
-    userid: '@neeraj-archive',
-    listname: 'loan',
-    identifier: 'practicalorganic00plim',
-  },
-  loanStartDate: '2021-07-30 09:57:40',
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 3591,
-  shouldProtectImages: true,
-  totalWaitlistCount: 0,
-  userHasBorrowed: false,
-  userHasBrowsed: true,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};
-
-export const canBrowseAndJoinWaitlistForBorrow = {
-  active_borrows: 1,
-  active_browses: 0,
-  available_borrowable_copies: 0,
-  available_browsable_copies: 1,
-  available_lendable_copies: 1,
-  available_to_borrow: false,
-  available_to_browse: true,
-  available_to_waitlist: true,
-  copies_reserved_for_waitlist: 0,
-  is_lendable: true,
-  is_login_required: false,
-  is_printdisabled: true,
-  is_readable: false,
-  last_borrow: '2021-07-24 18:17:46',
-  last_browse: null,
-  last_waitlist: '2021-07-27 11:03:23',
-  max_borrowable_copies: 1,
-  max_browsable_copies: 2,
-  max_lendable_copies: 2,
-  next_borrow_expiration: '2021-08-02 18:29:41',
-  next_browse_expiration: null,
-  orphaned_acs_loans: 0,
-  upgradable_browses: 0,
-  user_at_max_loans: false,
-  user_can_claim_waitlist: false,
-  user_has_acs_borrowed: false,
-  user_has_borrowed: false,
-  user_has_browsed: false,
-  user_is_printdisabled: false,
-  user_loan_count: 0,
-  user_loan_record: [],
-  user_on_waitlist: false,
-  users_on_waitlist: 2,
-  // userid: "",
-  bookUrl: '/details/worldletitutio0000vish',
-  daysLeftOnLoan: 0,
-  isAdmin: false,
-  isArchiveOrgLending: true,
-  isAvailable: false,
-  isAvailableForBrowsing: true,
-  isBrowserBorrowable: true,
-  isLendingRequired: true,
-  isOpenLibraryLending: false,
-  isPrintDisabledOnly: false,
-  loanCount: 0,
-  loanRecord: [],
-  loansUrl: '/details/@neeraj-archive?tab=loans#loans-on-loan',
-  maxLoans: 10,
-  secondsLeftOnLoan: 0,
-  shouldProtectImages: true,
-  totalWaitlistCount: 2,
-  userHasBorrowed: false,
-  userHasBrowsed: false,
-  userHoldIsReady: false,
-  userIsPrintDisabled: false,
-  userOnWaitingList: false,
-  userWaitlistPosition: -1,
-  userid: '@neeraj-archive',
-};

package/src/assets/data/purchase.js

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

package/src/assets/styles/collapsible-action-group.js

@@ -1,73 +1,132 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
+
+const whiteColor = css`var(--white, #fff)`;
+const blackColor = css`var(--primaryBGColor, #000)`;
+const dropdownBGColor = css`var(--iaBookActionsDropdownBGColor, #2d2d2d)`;
 
 export default css`
+  :host {
+    display: inline-flex;
+    height: 3.5rem;
+    padding: 1rem 0;
+  }
+  .actiongroup {
+    display: flex;
+  }
   .action-buttons {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
   }
   .action-buttons .ia-button {
-    display: inline-table;
+    margin: 0;
     height: 3.5rem;
-    transition: all 0.1s;
-    vertical-align: middle;
-    margin: 0px;
+  }
+  .action-buttons .desktop {
+    background-color: ${whiteColor};
+    border-radius: 10px;
+  }
+  .action-buttons .desktop.purchase {
+    margin-left: 5px;
+  }
+  .action-buttons .mobile.purchase.dark {
+    padding-left: 0;
+  }
+  .primary {
+    background-color: ${whiteColor};
   }
   .primary,
   .secondary {
     position: relative;
+    border-radius: 5px;
+    margin: 0 3px;
   }
   .primary .initial {
-    margin-right: -4px;
-    border-radius: 0.4rem 0 0 0.4rem;
+    border-radius: 4px 0 0 4px;
+    margin-right: 0;
   }
-  .secondary .ia-button {
-    margin: 0 3px;
+  .primary svg {
+    vertical-align: middle;
   }
-  .dropdown-group {
+
+  .secondary .ia-button.purchase {
+    padding: 2px 10px 2px 35px;
+    position: relative;
     display: inline-block;
+    vertical-align: middle;
   }
+  .secondary .ia-button.exit-admin {
+    background-color: ${blackColor};
+    border: 1px solid ${whiteColor};
+  }
+
   .dropdown-content {
     position: absolute;
     min-width: 14rem;
     margin: 0;
     padding: 0;
-    left: 0;
-    background: #2d2d2d;
-    border-radius: 0.4rem;
+    background: ${dropdownBGColor};
+    border-radius: 4px;
     border: 1px solid var(--primaryCTABorder);
-    top: 3.5rem;
+    top: 3.4rem;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
   }
   .dropdown-content li {
-    color: var(--primaryBGColor);
+    color: ${blackColor};
     list-style: none;
     height: 3rem;
   }
   .dropdown-content .ia-button {
     background: none;
+    color: ${whiteColor};
     border: none;
     box-sizing: border-box;
-    display: block;
     width: 100%;
     text-align: left;
     height: 3rem;
     position: relative;
     padding: 0.6rem 1.2rem;
+    margin: 0;
+  }
+  .dropdown-content .ia-button:is(:focus-visible, :hover) {
+    background: unset;
+  }
+  .dropdown-content li .ia-button {
+    border-radius: 0;
   }
   .dropdown-content li .ia-button:hover {
-    background: var(--primaryTextColor);
+    background: ${whiteColor};
     color: rgb(45, 45, 45);
   }
+  .dropdown-content li:first-child .ia-button {
+    border-radius: 0.3rem 0.3rem 0 0;
+  }
+  .dropdown-content li:last-child .ia-button {
+    border-radius: 0;
+    border-radius: 0 0 0.3rem 0.3rem;
+  }
   .dropdown-content .purchase:hover svg g {
     fill: black;
   }
-  .down-arrow {
+  .dropdown-content .purchase {
+    padding-left: 35px;
+    margin: 0;
+  }
+  .dropdown-content .purchase small {
+    display: initial;
+    font-size: 1.4rem;
+  }
+
+  .ia-button.down-arrow {
     border-radius: 0 0.4rem 0.4rem 0;
     padding: 0 0.6rem;
     margin-left: 0;
-    vertical-align: bottom;
   }
-  .action-loader {
+  .actionloader {
     vertical-align: middle;
     visibility: hidden;
+    padding: 0.9rem 0.2rem;
   }
   .close {
     display: none;
@@ -75,34 +134,33 @@ export default css`
   .open {
     display: block;
     z-index: 2;
-    border-top: 0;
   }
   .visible {
     display: inline-block;
   }
   .btn:hover,
   .dropdown:hover .btn {
-    background-color: var(--primaryTextColor);
+    background-color: ${whiteColor};
   }
-
   a {
     text-decoration: none;
   }
-  .primary svg {
-    vertical-align: middle;
-  }
-  .dropdown-content .purchase,
-  .purchase {
-    padding-left: 35px;
-    position: relative;
+  .purchase small {
+    display: block;
+    font-size: 1rem;
   }
   .purchase svg {
     position: absolute;
-    left: 12px;
+    left: 10px;
     top: 20%;
   }
   .unavailable {
     opacity: 0.7;
     pointer-events: none;
   }
+  .disabled {
+    opacity: 0.8;
+    pointer-events: none;
+    visibility: visible;
+  }
 `;

package/src/assets/styles/ia-button.js

@@ -1,65 +1,107 @@
-import { css } from 'lit-element';
+import { css } from 'lit';
+
+const whiteColor = css`var(--white, #fff)`;
+const disabledButtonFillColor = css`var(--primaryDisableCTAFill, #767676)`;
+const disabledButtonBorderColor = css`var(--secondaryCTABorder, #999)`;
+
+const primaryButtonFillColor = css`var(--primaryCTAFill, #194880)`;
+const primaryButtonFillColorRGB = css`var(--primaryCTAFillRGB, 25, 72, 128)`; // RBG format of --primaryCTAFill
+const primaryButtonBorderColor = css`var(--primaryCTABorder, #c5d1df)`;
+
+const dangerButtonFillColor = css`var(--primaryErrorCTAFill, #d9534f)`;
+const dangerButtonFillColorRGB = css`var(--primaryErrorCTAFillRGB, 229, 28, 38)`; // RBG format of --primaryErrorCTAFill
+const dangerButtonBorderColor = css`var(--primaryErrorCTABorder, #d43f3a)`;
+
+const darkButtonFillColor = css`var(--secondaryCTAFill, #333)`;
+const darkButtonFillColorRGB = css`var(--secondaryCTAFillRGB, 51, 51, 51)`; // RBG format of --secondaryCTAFill
+const darkButtonBorderColor = css`var(--primaryCTABorder, #979797)`;
+
+const warningButtonBGColor = css`#ee8950`;
+const warningButtonBorderColor = css`#ec7939`;
 
 export default css`
   .ia-button {
     min-height: 3rem;
-    border: none;
-    outline: none;
     cursor: pointer;
-    color: #fff;
+    color: ${whiteColor};
     line-height: normal;
     border-radius: 0.4rem;
-    text-align: center;
-    vertical-align: middle;
     font-size: 1.4rem;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    display: inline-block;
-    padding: 0.85rem 1.2rem;
     border: 1px solid transparent;
     white-space: nowrap;
     appearance: auto;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    transition: all 0.1s ease 0s;
+    vertical-align: middle;
+    padding: 0 1rem;
+    outline-color: ${whiteColor};
+    outline-offset: -4px;
+    user-select: none;
+    text-decoration: none;
+    width: fit-content;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    user-select: none;
   }
-  .ia-button:disabled,
-  .ia-button.disabled {
+  .ia-button:focus-visible {
+    outline-style: double;
+  }
+  .ia-button:disabled {
     cursor: not-allowed;
-    background-color: var(--primaryDisableCTAFill, #767676);
-    border: 1px solid var(--secondaryCTABorder, #999);
-    color: var(--primaryTextColor, #fff);
+    background-color: ${disabledButtonFillColor};
+    border: 1px solid ${disabledButtonBorderColor};
   }
   .ia-button.transparent {
     background-color: transparent;
   }
-
-  .ia-button.slim {
-    padding: 0;
+  .ia-button.warning {
+    background-color: ${warningButtonBGColor}
+    border-color: ${warningButtonBorderColor};
   }
+
   .ia-button.primary {
-    background-color: #194880;
-    border-color: #c5d1df;
+    background-color: ${primaryButtonFillColor};
+    border-color: ${primaryButtonBorderColor};
   }
-  .ia-button.dark {
-    color: #fff;
-    background-color: #333;
-    border-color: #979797;
+  .ia-button.primary:hover {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.primary:focus-visible {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.8);
+  }
+  .ia-button.primary:active {
+    background-color: rgba(${primaryButtonFillColorRGB}, 0.7);
   }
+
   .ia-button.danger {
-    color: #fff;
-    background-color: #d9534f;
-    border-color: #d43f3a;
+    background-color: ${dangerButtonFillColor};
+    border-color: ${dangerButtonBorderColor};
   }
-  .ia-button.warning {
-    color: #fff;
-    background-color: #ee8950;
-    border-color: #ec7939;
+  .ia-button.danger:hover {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.danger:focus-visible {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.8);
+  }
+  .ia-button.danger:active {
+    background-color: rgba(${dangerButtonFillColorRGB}, 0.7);
+  }
+
+  .ia-button.dark {
+    background-color: ${darkButtonFillColor};
+    border-color: ${darkButtonBorderColor};
+  }
+  .ia-button.dark:hover {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.9);
+  }
+  .ia-button.dark:focus-visible {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.8);
   }
-  .ia-button.cancel {
-    background-color: #e51c26;
-    border-color: #f8c6c8;
+  .ia-button.dark:active {
+    background-color: rgba(${darkButtonFillColorRGB}, 0.7);
   }
 `;