Update badge component to use new spacing grid (Skyscanner#2298)

Co-authored-by: Ana Belciug <[email protected]>
giriawu · Nov 25, 2021 · b2af634 · b2af634
1 parent 101fff1
commit b2af634
Show file tree

Hide file tree

Showing 38 changed files with 47 additions and 40 deletions.
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
@@ -1,8 +1,13 @@
+**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
-  - Export `CALENDAR_SELECTION_TYPE` so it can be imported from `bpk-component-datepicker` and `bpk-component-scrollable-calendar` instead of `bpk-component-calendar`
+  - Export `CALENDAR_SELECTION_TYPE` so it can be imported from `bpk-component-datepicker` and `bpk-component-scrollable-calendar` instead of `bpk-component-calendar`
diff --git a/packages/bpk-animate-height/package.json b/packages/bpk-animate-height/package.json
@@ -20,7 +20,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-button": "^5.0.14"
   }
 }
diff --git a/packages/bpk-component-accordion/package.json b/packages/bpk-component-accordion/package.json
@@ -25,7 +25,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-checkbox": "^3.0.17"
   }
 }
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
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-icon": "^9.1.1",
     "bpk-storybook-utils": "^1.0.15"
   }

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
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-animate-height": "^4.0.15",
     "bpk-component-close-button": "^3.0.17",
     "bpk-component-icon": "^9.1.1",

diff --git a/packages/bpk-component-barchart/package.json b/packages/bpk-component-barchart/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-mobile-scroll-container": "^3.0.16",
     "bpk-mixins": "^24.0.3",
     "bpk-react-utils": "^4.0.1",

diff --git a/packages/bpk-component-breakpoint/package.json b/packages/bpk-component-breakpoint/package.json
@@ -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-calendar/package.json b/packages/bpk-component-calendar/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-aria-live": "^2.0.28",
     "bpk-component-icon": "^9.1.1",
     "bpk-component-select": "^5.0.11",

diff --git a/packages/bpk-component-checkbox/package.json b/packages/bpk-component-checkbox/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-storybook-utils": "^1.0.15"
   }
 }
diff --git a/packages/bpk-component-datatable/package.json b/packages/bpk-component-datatable/package.json
@@ -25,6 +25,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-datepicker/package.json b/packages/bpk-component-datepicker/package.json
@@ -27,7 +27,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-storybook-utils": "^1.0.15"
   }
 }
diff --git a/packages/bpk-component-drawer/package.json b/packages/bpk-component-drawer/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-close-button": "^3.0.17",
     "bpk-component-icon": "^9.1.1",
     "bpk-component-link": "^3.0.15",

diff --git a/packages/bpk-component-form-validation/package.json b/packages/bpk-component-form-validation/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-button": "^5.0.14",
     "bpk-component-checkbox": "^3.0.17",
     "bpk-component-icon": "^9.1.1",

diff --git a/packages/bpk-component-horizontal-nav/package.json b/packages/bpk-component-horizontal-nav/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-text": "^4.0.17",
     "bpk-storybook-utils": "^1.0.15"
   }

diff --git a/packages/bpk-component-icon/package.json b/packages/bpk-component-icon/package.json
@@ -17,8 +17,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
-    "@skyscanner/bpk-svgs": "^14.0.10",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-svgs": "^14.0.12",
     "bpk-mixins": "^24.0.3",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"

diff --git a/packages/bpk-component-image/package.json b/packages/bpk-component-image/package.json
@@ -24,7 +24,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-mobile-scroll-container": "^3.0.16",
     "bpk-component-text": "^4.0.17"
   }

diff --git a/packages/bpk-component-link/package.json b/packages/bpk-component-link/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-storybook-utils": "^1.0.15"
   }
 }
diff --git a/packages/bpk-component-mobile-scroll-container/package.json b/packages/bpk-component-mobile-scroll-container/package.json
@@ -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-navigation-bar/package.json b/packages/bpk-component-navigation-bar/package.json
@@ -25,7 +25,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-icon": "^9.1.1",
     "bpk-storybook-utils": "^1.0.15"
   }

diff --git a/packages/bpk-component-navigation-stack/package.json b/packages/bpk-component-navigation-stack/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-mixins": "^24.0.3",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",

diff --git a/packages/bpk-component-nudger/package.json b/packages/bpk-component-nudger/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-button": "^5.0.14",
     "bpk-component-icon": "^9.1.1",
     "bpk-mixins": "^24.0.3",

diff --git a/packages/bpk-component-phone-input/package.json b/packages/bpk-component-phone-input/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-input": "^6.0.27",
     "bpk-component-label": "^5.0.15",
     "bpk-component-select": "^5.0.11",

diff --git a/packages/bpk-component-progress/package.json b/packages/bpk-component-progress/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-mixins": "^24.0.3",
     "bpk-react-utils": "^4.0.1",
     "lodash.clamp": "^4.0.3",

diff --git a/packages/bpk-component-radio/package.json b/packages/bpk-component-radio/package.json
@@ -22,7 +22,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-storybook-utils": "^1.0.15"
   }
 }
diff --git a/packages/bpk-component-rating/package.json b/packages/bpk-component-rating/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-text": "^4.0.17"
   }
 }
diff --git a/packages/bpk-component-scrollable-calendar/package.json b/packages/bpk-component-scrollable-calendar/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-calendar": "^10.0.1",
     "bpk-component-text": "^4.0.17",
     "bpk-mixins": "^24.0.3",

diff --git a/packages/bpk-component-section-list/package.json b/packages/bpk-component-section-list/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-icon": "^9.1.1",
     "bpk-component-text": "^4.0.17",
     "bpk-mixins": "^24.0.3",

diff --git a/packages/bpk-component-slider/package.json b/packages/bpk-component-slider/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-mixins": "^24.0.3",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2",

diff --git a/packages/bpk-component-spinner/package.json b/packages/bpk-component-spinner/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-svgs": "^14.0.8",
+    "@skyscanner/bpk-svgs": "^14.0.12",
     "bpk-mixins": "^24.0.3",
     "bpk-react-utils": "^4.0.1",
     "prop-types": "^15.7.2"

diff --git a/packages/bpk-component-theme-toggle/package.json b/packages/bpk-component-theme-toggle/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-label": "^5.0.15",
     "bpk-component-select": "^5.0.11",
     "bpk-mixins": "^24.0.3",

diff --git a/packages/bpk-component-tooltip/package.json b/packages/bpk-component-tooltip/package.json
@@ -23,7 +23,7 @@
     "react": "^16.3.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-component-text": "^4.0.17"
   }
 }
diff --git a/packages/bpk-mixins/package.json b/packages/bpk-mixins/package.json
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
-    "@skyscanner/bpk-svgs": "^14.0.8"
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
+    "@skyscanner/bpk-svgs": "^14.0.12"
   },
   "peerDependencies": {
     "node-sass": "^4.12.0"

diff --git a/packages/bpk-stylesheets/package.json b/packages/bpk-stylesheets/package.json
@@ -17,7 +17,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "bpk-mixins": "^24.0.3",
     "normalize.css": "4.2.0"
   }

diff --git a/packages/bpk-theming/package.json b/packages/bpk-theming/package.json
@@ -14,7 +14,7 @@
   },
   "gitHead": "c2217d61875a1f3aa2bb9ed9583c50e3f1523501",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^4.0.0",
+    "@skyscanner/bpk-foundations-web": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {