Merge branch 'main' of github.com:Skyscanner/backpack into KOA-4846

giriawu · Nov 29, 2021 · 49c845b · 49c845b
2 parents ede890c + 739d5ce
commit 49c845b
Show file tree

Hide file tree

Showing 85 changed files with 536 additions and 358 deletions.
diff --git a/.spelling b/.spelling
@@ -519,6 +519,7 @@ schemaMetaData
 
 autoScrollToSelected
 calendarComponent
+inputComponent
 leadingScrollIndicatorClassName
 trailingScrollIndicatorClassName
 bottomMargin

diff --git a/...ts__/storyshots-test-js-visual-tests-bpk-component-badge-visual-test-1-snap.png b/...ts__/storyshots-test-js-visual-tests-bpk-component-badge-visual-test-1-snap.png
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -4,7 +4,15 @@
 - bpk-component-scrollable-calendar:
   - Fixed white spaces selection in calendar component. 
 
+**Breaking:**
+
+- bpk-component-badge:
+    - Updated badge component to use the new spacing grid. This component will now appear larger in height so should be checked this does not alter layout.
+
 **Added:**
+  - bpk-component-datepicker:
+    - Added new (OPTIONAL) `inputComponent` property to allow for custom and multiple input fields to be provided for the calendar component when using ranges.
+      - The previous input will continue to work as expected if you do not supply your own input. 
 
 - bpk-component-datepicker
 - bpk-component-scrollable-calendar

diff --git a/meta.json b/meta.json
@@ -11,6 +11,9 @@
     },
     {
       "npm": "zgeor"
+    },
+    {
+      "npm": "frugoman"
     }
   ]
 }
diff --git a/packages/bpk-animate-height/package.json b/packages/bpk-animate-height/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-animate-height",
-  "version": "4.0.15",
+  "version": "4.0.16",
   "description": "Animate height using CSS transitions.",
   "license": "Apache-2.0",
   "repository": {
@@ -20,7 +20,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
-    "bpk-component-button": "^5.0.14"
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "bpk-component-button": "^5.0.15"
   }
 }
diff --git a/packages/bpk-component-accordion/package.json b/packages/bpk-component-accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-accordion",
-  "version": "3.0.17",
+  "version": "3.0.18",
   "description": "Backpack accordion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,18 +14,18 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^4.0.15",
-    "bpk-component-icon": "^9.1.1",
-    "bpk-component-text": "^4.0.17",
-    "bpk-mixins": "^24.0.3",
+    "bpk-animate-height": "^4.0.16",
+    "bpk-component-icon": "^9.1.2",
+    "bpk-component-text": "^4.0.18",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
-    "bpk-component-checkbox": "^3.0.17"
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "bpk-component-checkbox": "^3.0.18"
   }
 }
diff --git a/packages/bpk-component-aria-live/package.json b/packages/bpk-component-aria-live/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-aria-live",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "description": "Backpack aria-live component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,17 +13,17 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-mixins": "^24.0.3",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
-    "bpk-component-chip": "^5.1.10",
-    "bpk-component-code": "^3.0.15",
-    "bpk-component-fieldset": "^4.0.4",
-    "bpk-component-paragraph": "^3.0.15",
-    "bpk-component-select": "^5.0.11",
-    "bpk-component-switch": "^2.0.16"
+    "bpk-component-chip": "^5.1.11",
+    "bpk-component-code": "^3.0.16",
+    "bpk-component-fieldset": "^4.0.5",
+    "bpk-component-paragraph": "^3.0.16",
+    "bpk-component-select": "^5.0.12",
+    "bpk-component-switch": "^2.0.17"
   },
   "peerDependencies": {
     "react": "^16.3.0"

diff --git a/packages/bpk-component-autosuggest/package.json b/packages/bpk-component-autosuggest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-autosuggest",
-  "version": "6.0.25",
+  "version": "6.0.26",
   "description": "Backpack autosuggest component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-input": "^6.0.27",
-    "bpk-mixins": "^24.0.3",
+    "bpk-component-input": "^6.0.28",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3"
@@ -24,6 +24,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.1.1"
+    "bpk-component-icon": "^9.1.2"
   }
 }
diff --git a/packages/bpk-component-badge/BpkBadgeLayout.module.css b/packages/bpk-component-badge/BpkBadgeLayout.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-badge-layout__container{position:relative;display:flex;min-height:2.625rem;padding:1.5rem}.bpk-badge-layout__container--light{background-color:#f1f2f8;border-radius:.25rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-badge-layout__container{position:relative;display:flex;min-height:2.5rem;padding:1.5rem}.bpk-badge-layout__container--light{background-color:#f1f2f8;border-radius:.25rem}
diff --git a/packages/bpk-component-badge/BpkBadgeLayout.module.scss b/packages/bpk-component-badge/BpkBadgeLayout.module.scss
@@ -18,12 +18,14 @@
 
 @import '~bpk-mixins/index';
 
+$bpk-spacing-v2: true;
+
 .bpk-badge-layout {
   &__container {
     position: relative;
     display: flex;
-    min-height: $bpk-spacing-xxl;
-    padding: $bpk-spacing-base;
+    min-height: bpk-spacing-xxl();
+    padding: bpk-spacing-lg();
 
     &--light {
       background-color: $bpk-color-sky-gray-tint-07;

diff --git a/packages/bpk-component-badge/package.json b/packages/bpk-component-badge/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-badge",
-  "version": "3.0.17",
+  "version": "4.0.0",
   "description": "Backpack badge component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,16 +14,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^24.0.3",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
-    "bpk-component-icon": "^9.1.1",
-    "bpk-storybook-utils": "^1.0.15"
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "bpk-component-icon": "^9.1.2",
+    "bpk-storybook-utils": "^1.0.16"
   }
 }
diff --git a/packages/bpk-component-badge/src/BpkBadge.module.css b/packages/bpk-component-badge/src/BpkBadge.module.css
@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-badge{display:inline-flex;padding:0 .375rem;align-items:center;color:#111236;background-color:#ffb54d;background-color:var(--bpk-badge-background-color, #ffb54d);border-radius:.25rem;margin:0;font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}.bpk-badge>svg{width:1rem !important;height:1rem !important;margin-top:.125rem;margin-bottom:.125rem}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--success{background-color:#73cec6;background-color:var(--bpk-badge-success-background-color, #73cec6)}.bpk-badge--destructive{color:#fff;fill:#fff;background-color:#d1435b;background-color:var(--bpk-badge-destructive-background-color, #d1435b)}.bpk-badge--light{background-color:#f1f2f8;fill:#111236}.bpk-badge--inverse{background-color:#fff;fill:#111236}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-badge{display:inline-flex;padding:.25rem .5rem;align-items:center;color:#111236;background-color:#ffb54d;background-color:var(--bpk-badge-background-color, #ffb54d);border-radius:.25rem;margin:0;font-size:.75rem;line-height:1rem;font-weight:400;font-weight:700}.bpk-badge>svg{width:1rem !important;height:1rem !important;margin-top:.125rem;margin-bottom:.125rem}.bpk-badge--centered{vertical-align:text-bottom}.bpk-badge--docked-right{position:absolute;top:0;right:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}html[dir='rtl'] .bpk-badge--docked-right{right:inherit;left:0;border-bottom-left-radius:0;border-bottom-right-radius:.25rem}.bpk-badge--docked-left{position:absolute;top:0;left:0;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0}html[dir='rtl'] .bpk-badge--docked-left{right:0;left:inherit;border-bottom-left-radius:.25rem;border-bottom-right-radius:0}.bpk-badge--success{background-color:#73cec6;background-color:var(--bpk-badge-success-background-color, #73cec6)}.bpk-badge--destructive{color:#fff;fill:#fff;background-color:#d1435b;background-color:var(--bpk-badge-destructive-background-color, #d1435b)}.bpk-badge--light{background-color:#f1f2f8;fill:#111236}.bpk-badge--inverse{background-color:#fff;fill:#111236}.bpk-badge--outline{background-color:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff;fill:#fff}
diff --git a/packages/bpk-component-banner-alert/package.json b/packages/bpk-component-banner-alert/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-banner-alert",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "Backpack banner alert component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
-    "bpk-animate-height": "^4.0.15",
-    "bpk-component-close-button": "^3.0.17",
-    "bpk-component-icon": "^9.1.1",
-    "bpk-mixins": "^24.0.3",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "bpk-animate-height": "^4.0.16",
+    "bpk-component-close-button": "^3.0.18",
+    "bpk-component-icon": "^9.1.2",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.0.28",
-    "bpk-component-button": "^5.0.14",
-    "bpk-storybook-utils": "^1.0.15"
+    "bpk-component-aria-live": "^2.0.29",
+    "bpk-component-button": "^5.0.15",
+    "bpk-storybook-utils": "^1.0.16"
   },
   "peerDependencies": {
     "react": "^16.3.0"

diff --git a/packages/bpk-component-barchart/package.json b/packages/bpk-component-barchart/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-barchart",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "description": "Backpack bar chart component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
-    "bpk-component-mobile-scroll-container": "^3.0.16",
-    "bpk-mixins": "^24.0.3",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "bpk-component-mobile-scroll-container": "^3.0.17",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
@@ -27,9 +27,9 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "bpk-component-breakpoint": "^3.0.16",
-    "bpk-component-content-container": "^3.0.15",
-    "bpk-component-rtl-toggle": "^3.0.15",
-    "bpk-component-text": "^4.0.17"
+    "bpk-component-breakpoint": "^3.0.17",
+    "bpk-component-content-container": "^3.0.16",
+    "bpk-component-rtl-toggle": "^3.0.16",
+    "bpk-component-text": "^4.0.18"
   }
 }
diff --git a/packages/bpk-component-blockquote/package.json b/packages/bpk-component-blockquote/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-blockquote",
-  "version": "3.0.15",
+  "version": "3.0.16",
   "description": "Backpack blockquote component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^24.0.3",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"
   },

diff --git a/packages/bpk-component-boilerplate/package.json b/packages/bpk-component-boilerplate/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-boilerplate",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "Backpack boilerplate component.",
   "license": "Apache-2.0",
   "private": true,
@@ -14,7 +14,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-mixins": "^24.0.3",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.5.8"
   },

diff --git a/packages/bpk-component-breadcrumb/package.json b/packages/bpk-component-breadcrumb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-breadcrumb",
-  "version": "3.0.19",
+  "version": "3.0.20",
   "description": "Backpack breadcrumb component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.1.1",
-    "bpk-component-link": "^3.0.15",
-    "bpk-component-text": "^4.0.17",
-    "bpk-mixins": "^24.0.3",
+    "bpk-component-icon": "^9.1.2",
+    "bpk-component-link": "^3.0.16",
+    "bpk-component-text": "^4.0.18",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"
   },

diff --git a/packages/bpk-component-breakpoint/package.json b/packages/bpk-component-breakpoint/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-breakpoint",
-  "version": "3.0.16",
+  "version": "3.0.17",
   "description": "Backpack breakpoint component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^24.0.3",
+    "bpk-mixins": "^24.0.4",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",
     "react-responsive": "^6.1.2"
@@ -23,6 +23,6 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0"
+    "@skyscanner/bpk-foundations-web": "^4.1.1"
   }
 }
diff --git a/packages/bpk-component-button/package.json b/packages/bpk-component-button/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-button",
-  "version": "5.0.14",
+  "version": "5.0.15",
   "description": "Backpack button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^24.0.3",
+    "bpk-mixins": "^24.0.4",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.0.15"
+    "bpk-storybook-utils": "^1.0.16"
   },
   "peerDependencies": {
     "react": "^16.3.0"
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,9 @@ @@
         },
         {
           "npm": "zgeor"
+        },
+        {
+          "npm": "frugoman"
         }
       ]
     }