@licklist/design 0.58.11-dev.0 → 0.58.11

package/dist/styles/iframe-page/PageBody.scss

@@ -1,4 +1,3 @@
-// TODO when all iframe pages will be ready, think how we can combine it all in page-body style
 .page-body {
   display: flex;
   background-color: transparent;
@@ -13,6 +12,9 @@
   .left-block {
     flex: 1;
     align-items: stretch;
+    border-radius: 0.5rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     padding: 1rem;
     background-color: $snippet-page-body-left-block-background-color;
     border: 0;
@@ -31,6 +33,7 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+
       .title {
         color: $snippet-elements-body-color;
         margin: 0;
@@ -61,7 +64,7 @@
       overflow-x: hidden;
       scrollbar-width: thin;
       .iframe-event-card {
-        border-bottom: 1px solid $separator-color;
+        border-bottom: 2px solid $separator-color;
       }
 
       @include media-breakpoint-down(sm) {
@@ -78,7 +81,9 @@
   }
 
   .right-block {
-    height: 100%;
+    margin-left: 1rem;
+    border-radius: 0.5rem;
+    height: calc(100% - 1rem);
     max-width: 17.5rem;
     min-width: 17.5rem;
     width: 100%;
@@ -110,7 +115,7 @@
       }
 
       .collapse {
-        max-height: calc(100vh - 15rem);
+        max-height: calc(100vh - 19rem);
         transition: none 0s ease 0s;
 
         &.show {
@@ -120,7 +125,7 @@
         }
 
         @include media-breakpoint-down(sm) {
-          max-height: 100%;
+          max-height: 7.5rem;
         }
       }
       .collapse-with-people-input {
@@ -146,14 +151,8 @@
     }
 
     .iframe-event-card {
-      border: none;
-
-      .card-image {
-        border-radius: 0;
-      }
-      .card-body {
-        padding-left: 1rem;
-      }
+      background-color: transparent;
+      border-color: transparent;
     }
 
     .price {
@@ -263,24 +262,3 @@
     }
   }
 }
-
-.event-list-page-body {
-  overflow: auto;
-  .left-block {
-    .navigation {
-      font-size: 1.125rem;
-      font-weight: 500;
-      padding-bottom: 2.625rem;
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      margin-top: 0.125rem;
-
-      .title {
-        position: absolute;
-        color: $snippet-elements-body-color;
-        margin: 0;
-      }
-    }
-  }
-}

package/dist/styles/iframe-page/PageHeader.scss

@@ -20,57 +20,55 @@ $base-height: 2.5rem;
       transition: $color-transition;
       border: 0;
     }
-  }
-}
-
-.iframe-page {
-  .button-wrapper {
-    background-color: $snippet-page-header-steps-close-button-background-color;
-    height: $base-height;
-    width: $base-height;
-    border-radius: $base-height;
-    transition: $color-transition;
 
-    .close-button {
-      font-size: 1.25rem;
-      width: $base-height;
+    .button-wrapper {
+      background-color: $snippet-page-header-steps-close-button-background-color;
       height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $snippet-page-header-steps-close-button-border-color;
+      width: $base-height;
+      border-radius: $base-height;
       transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+      .close-button {
+        font-size: 1.25rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
+
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.close-button {
-      margin-left: 1rem;
-    }
+      &.close-button {
+        margin-left: 1rem;
+      }
 
-    .back-button {
-      font-size: 2rem;
-      width: $base-height;
-      height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: lighter;
-      color: $snippet-page-header-steps-close-button-border-color;
-      transition: $color-transition;
+      .back-button {
+        font-size: 2rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.back-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1rem;
+      &.back-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+      }
     }
   }
 }

package/dist/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -1,52 +1,10 @@
 .payment_link {
-  padding: 0 0 1rem 0;
-
-  .button-wrapper {
-    top: 2rem;
-    right: 2rem;
-    position: absolute;
-    z-index: 100;
-  }
-
   .page-body {
-    padding: 0;
-    height: calc(100vh - 2rem) !important;
-
-    .navigation {
-      display: block;
-      @include media-breakpoint-down(sm) {
-        padding: 0;
-      }
-    }
-
-    .right-block {
-      margin-left: 0;
-      height: calc(100vh - 2rem);
-      max-height: calc(100vh - 1rem);
-      @include media-breakpoint-down(sm) {
-        width: calc(100% - 2rem);
-        max-width: unset;
-        position: inherit;
-        overflow: visible;
-        margin: 0 1rem 1rem;
-        height: unset;
-        min-height: unset;
-        max-height: 100%;
-      }
-    }
-
     .left-block {
       .left-block-container {
         position: relative;
         max-height: 100%;
 
-        .payment-title {
-          font-size: 0.875rem;
-          font-weight: 600;
-          align-items: center;
-          margin-left: 0.5rem;
-        }
-
         .ryft-payment-form {
           .submit-button-wrapper {
             margin: -1rem 0 1rem;
@@ -55,55 +13,7 @@
               width: 100%;
             }
           }
-          #mobile-pay-divider-container {
-            display: flex;
-            position: relative;
-            margin-bottom: 1rem;
-            #mobile-pay-divider-text {
-              margin-right: 1rem;
-              font-size: 0.875rem;
-              font-weight: 600;
-            }
-            #mobile-pay-divider {
-              width: 100%;
-              border-bottom: 1px #dfdfdf solid;
-              margin-bottom: 0.6rem;
-            }
-          }
 
-          #card-title-container {
-            height: auto;
-            border: none;
-            margin-bottom: 0.5rem;
-            text-align: left;
-            :first-child {
-              font-size: 1rem;
-              font-weight: 600;
-              margin-bottom: 1rem;
-            }
-
-            .form-label {
-              margin-bottom: 0.5rem;
-            }
-          }
-          .mobile-pay-title {
-            display: block;
-            font-weight: 600;
-            font-size: 1rem;
-            color: black;
-            padding: 0;
-            font-style: normal;
-            font-family: inherit;
-            margin-bottom: 1rem;
-          }
-        }
-        .form {
-          .input {
-            border: 2px solid #525252 !important;
-          }
-        }
-
-        .ryft-payment-form {
           @include media-breakpoint-up(md) {
             .submit-button-wrapper {
               max-width: 15.5rem;
@@ -112,9 +22,10 @@
 
           // it's style for Google and Apple pay container, for unknown reasons we can't move this html elements with appendChild or replaceChild
           .ryft-pay-grid {
+            position: absolute !important;
+            top: 10rem;
             width: 100%;
             max-width: 15.5rem;
-            margin-bottom: 1rem;
           }
           .ryft-pay-apple-pay-button {
             border-radius: 0.25rem;
@@ -125,36 +36,6 @@
           display: none !important;
         }
       }
-      @include media-breakpoint-down(sm) {
-        .left-block-container {
-          max-height: 100%;
-          overflow: visible;
-        }
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      flex-direction: column-reverse;
-      overflow: scroll;
-
-      @include media-breakpoint-down(sm) {
-        .left-block {
-          min-height: 100%;
-        }
-        .right-block {
-          margin: 0 auto;
-          width: 100%;
-          .children-wrapper {
-            .accordion {
-              .collapse {
-                overflow: visible;
-                overflow-x: unset;
-                scrollbar-width: unset;
-              }
-            }
-          }
-        }
-      }
     }
   }
   ::-webkit-scrollbar {
@@ -181,7 +62,3 @@
     }
   }
 }
-
-#ryft-threeDSMethodIframe {
-  display: none;
-}

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 14.25rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/dist/zone/form/utils/dates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/utils/dates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAOtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BAuChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aAyC9D,CAAC"}
+{"version":3,"file":"dates.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/utils/dates.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAOtF,eAAO,MAAM,qBAAqB,cACrB,MAAM,WACR,MAAM,6BAuChB,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAAgB,QAAQ,EAAE,aA0C9D,CAAC"}

package/jest.config.js

@@ -0,0 +1,29 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  modulePathIgnorePatterns: ["/dist/"],
+  roots: ["<rootDir>/src", "<rootDir>/tests"],
+  globals: {
+    "ts-jest": {
+      isolatedModules: true,
+      babelConfig: {
+        presets: ["@babel/preset-env", "@babel/preset-react"],
+      },
+    },
+  },
+  transform: {
+    "^.+\\.(t|j)sx?$": "ts-jest",
+  },
+  transformIgnorePatterns: [
+    "node_modules/(?!(redux-persist)/)",
+    "node_modules/(?!(@licklist)/)",
+  ],
+  testRegex: ["(\\/tests\\/.*.(test|spec))\\.tsx?$"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  setupFilesAfterEnv: ["<rootDir>/tests/setupTests.ts"],
+  moduleNameMapper: {
+    "^.+\\.(css|scss|sass|less)$": "<rootDir>/tests/__mock__/styleMock.js",
+    ".+\\.(svg|png|jpg)$": "identity-obj-proxy",
+  },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.58.11-dev.0",
+  "version": "0.58.11",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -16,11 +16,14 @@
     "type-check:watch": "yarn type-check -- --watch",
     "build": "rollup -c",
     "watch": "yarn build -- -w",
+    "test": "jest --verbose --coverage --watchAll=false",
+    "run-test": "jest --verbose --watchAll=false",
     "lint": "eslint --ext .ts,.tsx .",
     "lint:fix": "yarn run lint -- --fix",
     "lint:format": "prettier \"**/*.{md,json,yml,scss}\" --check",
     "lint:format:fix": "prettier \"**/*.{md,json,yml,scss}\" --write",
     "prepare": "husky install",
+    "test-staged": "CI=true jest --passWithNoTests --findRelatedTests",
     "tests": "yarn tests-staged",
     "prettier-write": "prettier --write",
     "tsc": "bash -c tsc -p tsconfig.json -b"
@@ -50,9 +53,9 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": ">=0.23.3-dev.0 < 0.23.3",
-    "@licklist/eslint-config": "0.4.5",
-    "@licklist/plugins": ">=0.27.2-dev.2 < 0.27.2",
+    "@licklist/core": "^0.23.1",
+    "@licklist/eslint-config": "0.3.4",
+    "@licklist/plugins": "^0.27.2",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -70,6 +73,10 @@
     "@svgr/rollup": "5.5.0",
     "@svgr/webpack": "5.5.0",
     "@tanstack/react-table": "8.10.6",
+    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/react": "11.2.5",
+    "@testing-library/react-hooks": "5.1.0",
+    "@testing-library/user-event": "13.5.0",
     "@tiptap/core": "2.0.0-beta.176",
     "@tiptap/extension-blockquote": "2.0.0-beta.29",
     "@tiptap/extension-bold": "2.0.0-beta.28",
@@ -92,10 +99,14 @@
     "@tiptap/react": "2.0.0-beta.109",
     "@tiptap/suggestion": "2.0.0-beta.92",
     "@types/babel__core": "7.1.12",
+    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/jest": "26.0.20",
     "@types/luxon": "1.26.2",
     "@types/mdx-js__react": "1.5.3",
+    "@types/react": "17.0.2",
     "@types/react-bootstrap": "1.0.1",
     "@types/react-date-range": "^1.4.4",
+    "@types/react-dom": "17.0.1",
     "@types/react-email-editor": "1.1.7",
     "@types/react-loader": "2.4.4",
     "@types/react-phone-number-input": "3.0.6",
@@ -105,6 +116,7 @@
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.8.1",
     "@wojtekmaj/react-daterange-picker": "^4.1.0",
+    "babel-jest": "26.6.3",
     "babel-loader": "8.2.2",
     "babel-plugin-inline-react-svg": "2.0.1",
     "bootstrap": "4.6.0",
@@ -116,16 +128,21 @@
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
     "emojibase-regex": "6.0.1",
+    "enzyme": "3.11.0",
+    "enzyme-adapter-react-16": "1.15.6",
     "eslint": "7.32.0",
     "eslint-config-airbnb": "18.2.1",
     "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-jest": "25.3.2",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-testing-library": "5.0.1",
     "framer-motion": "4.1.17",
     "history": "5.3.0",
     "husky": "7.0.4",
     "i18next": "19.4.5",
+    "jest": "26.6.0",
     "klona": "2.0.4",
     "konva": "6.0.0",
     "lint-staged": "11.1.2",
@@ -133,18 +150,18 @@
     "luxon": "1.26.0",
     "moment": "2.29.1",
     "prettier": "2.5.1",
-    "react": "17.0.2",
+    "react": "16.14.0",
     "react-bootstrap": "1.6.1",
     "react-color": "2.19.3",
     "react-copy-to-clipboard": "5.0.3",
     "react-date-range": "^1.4.0",
-    "react-dom": "17.0.2",
+    "react-dom": "16.14.0",
     "react-email-editor": "1.6.1",
     "react-highlighter": "0.4.3",
     "react-hook-form": "7.13.0",
     "react-i18next": "11.8.8",
     "react-intl": "5.15.8",
-    "react-konva": "^17.0.2-6",
+    "react-konva": "16.13.0-6",
     "react-loader": "2.4.7",
     "react-loading-skeleton": "^3.3.1",
     "react-overlays": "4.1.1",
@@ -169,6 +186,7 @@
     "sass": "1.32.8",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
+    "ts-jest": "26.5.2",
     "twemoji-parser": "14.0.0",
     "typescript": "4.9.5",
     "url-loader": "4.1.1",
@@ -176,17 +194,24 @@
   },
   "resolutions": {
     "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2"
+    "@types/react-dom": "17.0.1"
+  },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "./jest.config.js"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ]
   },
   "lint-staged": {
     "*.{ts,tsx}": [
+      "yarn test-staged",
       "yarn prettier-write",
       "yarn lint:fix"
     ]
   },
   "devDependencies": {
-    "@types/react": "17.0.2",
-    "@types/react-dom": "17.0.2",
     "identity-obj-proxy": "^3.0.0"
   },
   "volta": {

package/src/assets/iframe/calendar.svg

@@ -1,3 +1,3 @@
-<svg width="16" height="15" viewBox="0 0 16 15" fill="#979797" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C3.44772 0 3 0.447715 3 1H1C0.447715 1 0 1.44772 0 2V4H16V2C16 1.44772 15.5523 1 15 1H13C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1H5C5 0.447715 4.55228 0 4 0ZM16 6C16 5.44772 15.5523 5 15 5H1C0.447715 5 0 5.44772 0 6V12C0 13.6569 1.34315 15 3 15H13C14.6569 15 16 13.6569 16 12V6ZM2 7H14V12C14 12.5523 13.5523 13 13 13H3L2.88338 12.9933C2.38604 12.9355 2 12.5128 2 12V7ZM10.5 9C10.2239 9 10 9.22386 10 9.5V11.5C10 11.7761 10.2239 12 10.5 12H12.5C12.7761 12 13 11.7761 13 11.5V9.5C13 9.22386 12.7761 9 12.5 9H10.5Z" />
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0C3.44772 0 3 0.447715 3 1H1C0.447715 1 0 1.44772 0 2V4H16V2C16 1.44772 15.5523 1 15 1H13C13 0.447715 12.5523 0 12 0C11.4477 0 11 0.447715 11 1H5C5 0.447715 4.55228 0 4 0ZM16 6C16 5.44772 15.5523 5 15 5H1C0.447715 5 0 5.44772 0 6V12C0 13.6569 1.34315 15 3 15H13C14.6569 15 16 13.6569 16 12V6ZM2 7H14V12C14 12.5523 13.5523 13 13 13H3L2.88338 12.9933C2.38604 12.9355 2 12.5128 2 12V7ZM10.5 9C10.2239 9 10 9.22386 10 9.5V11.5C10 11.7761 10.2239 12 10.5 12H12.5C12.7761 12 13 11.7761 13 11.5V9.5C13 9.22386 12.7761 9 12.5 9H10.5Z" fill="#979797"/>
 </svg>

package/src/assets/iframe/ticket.svg

@@ -1,3 +1,3 @@
-<svg width="18" height="14" viewBox="0 0 18 14" fill="#979797" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.00002C18 0.89543 17.1046 0 16 0H2C0.89543 0 0 0.89543 0 2L0.000956201 4.35567C0.00105503 4.59911 0.0899525 4.83415 0.250979 5.01672C0.731269 5.56128 1 6.25846 1 7C1 7.74154 0.731269 8.43872 0.250979 8.98328C0.0899525 9.16585 0.00105503 9.4009 0.000956201 9.64433L0 11.9996C0 13.1046 0.89543 14 2 14H16C17.1046 14 18 13.1046 18 12L17.9999 9.64574C17.9999 9.40205 17.9109 9.16675 17.7497 8.98404C17.269 8.43938 17 7.7419 17 7C17 6.2581 17.269 5.56062 17.7497 5.01596C17.9109 4.83325 17.9999 4.59795 17.9999 4.35426L18 2.00002ZM2.07187 4.09764L2 4.002L1.999 2H5C5 2.55228 5.44772 3 6 3C6.55228 3 7 2.55228 7 2H16L15.999 4.002L15.929 4.09646C15.3306 4.93393 15 5.94228 15 7L15.0069 7.26333C15.057 8.22459 15.3805 9.13586 15.929 9.90354L15.999 9.997L16 12H7C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12H2V9.996L2.07187 9.90236C2.66972 9.06511 3 8.05722 3 7C3 5.94278 2.66972 4.93489 2.07187 4.09764ZM6 6C6.55228 6 7 5.55228 7 5C7 4.44772 6.55228 4 6 4C5.44772 4 5 4.44772 5 5C5 5.55228 5.44772 6 6 6ZM7 9C7 9.55229 6.55228 10 6 10C5.44772 10 5 9.55229 5 9C5 8.44771 5.44772 8 6 8C6.55228 8 7 8.44771 7 9Z" />
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.00002C18 0.89543 17.1046 0 16 0H2C0.89543 0 0 0.89543 0 2L0.000956201 4.35567C0.00105503 4.59911 0.0899525 4.83415 0.250979 5.01672C0.731269 5.56128 1 6.25846 1 7C1 7.74154 0.731269 8.43872 0.250979 8.98328C0.0899525 9.16585 0.00105503 9.4009 0.000956201 9.64433L0 11.9996C0 13.1046 0.89543 14 2 14H16C17.1046 14 18 13.1046 18 12L17.9999 9.64574C17.9999 9.40205 17.9109 9.16675 17.7497 8.98404C17.269 8.43938 17 7.7419 17 7C17 6.2581 17.269 5.56062 17.7497 5.01596C17.9109 4.83325 17.9999 4.59795 17.9999 4.35426L18 2.00002ZM2.07187 4.09764L2 4.002L1.999 2H5C5 2.55228 5.44772 3 6 3C6.55228 3 7 2.55228 7 2H16L15.999 4.002L15.929 4.09646C15.3306 4.93393 15 5.94228 15 7L15.0069 7.26333C15.057 8.22459 15.3805 9.13586 15.929 9.90354L15.999 9.997L16 12H7C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12H2V9.996L2.07187 9.90236C2.66972 9.06511 3 8.05722 3 7C3 5.94278 2.66972 4.93489 2.07187 4.09764ZM6 6C6.55228 6 7 5.55228 7 5C7 4.44772 6.55228 4 6 4C5.44772 4 5 4.44772 5 5C5 5.55228 5.44772 6 6 6ZM7 9C7 9.55229 6.55228 10 6 10C5.44772 10 5 9.55229 5 9C5 8.44771 5.44772 8 6 8C6.55228 8 7 8.44771 7 9Z" fill="#979797"/>
 </svg>

package/src/calendar/Calendar.stories.tsx

@@ -38,26 +38,3 @@ Default.args = {
     isDisabled: false,
   }),
 };
-
-export const Loading: Story<CalendarProps> = (args) => {
-  return (
-    <div style={{ backgroundColor: "white" }}>
-      <Calendar {...args} />
-    </div>
-  );
-};
-
-Loading.args = {
-  isLoading: true,
-  fromPrice: "from £10",
-  selectedDate: null,
-  setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates(now),
-  currentDate: now,
-  getDateTimeButtonProps: () => ({
-    resources: [],
-    showResources: false,
-    shouldCalculateResources: false,
-    isDisabled: false,
-  }),
-};

package/src/calendar/Calendar.tsx

@@ -3,7 +3,6 @@ import { DateTime } from "luxon";
 import { DateTimeButtonProps } from "src/date-time-button";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
-import { LoaderIndicator } from "../static";
 
 export const defaultStartDay = DateTime.now().set({
   millisecond: 0,
@@ -29,14 +28,15 @@ export type CalendarProps = {
   >;
 };
 
-export const Calendar = (props: CalendarProps) => {
-  const { initialDate = defaultStartDay, isLoading } = props;
+export const Calendar = ({
+  initialDate = defaultStartDay,
+  ...props
+}: CalendarProps) => {
   return (
     <div className="calendar-wrapper">
       <div className="calendar">
         <CalendarButtons initialDate={initialDate} {...props} />
-
-        {isLoading ? <LoaderIndicator /> : <CalendarDates {...props} />}
+        <CalendarDates {...props} />
       </div>
     </div>
   );

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -6,6 +6,7 @@ import { CalendarProps } from "../../Calendar";
 
 export type CalendarDatesProps = Pick<
   CalendarProps,
+  | "isLoading"
   | "calendarDates"
   | "selectedDate"
   | "setSelectedDate"
@@ -14,6 +15,7 @@ export type CalendarDatesProps = Pick<
 >;
 
 export const CalendarDates = ({
+  isLoading = false,
   calendarDates,
   selectedDate,
   setSelectedDate,
@@ -46,9 +48,12 @@ export const CalendarDates = ({
 
           const props = getDateTimeButtonProps(date);
 
+          const isDisabled = isLoading || props.isDisabled;
+
           return (
             <DateTimeButton
               key={+date}
+              isDisabled={isDisabled}
               isSelected={
                 selectedDate ? date.hasSame(selectedDate, "day") : undefined
               }

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -16,7 +16,6 @@ export function Default() {
   return (
     <div>
       <IframeEventCard
-        showMoreInfo
         imageSrc={
           showImage
             ? // eslint-disable-next-line max-len