@skyscanner/backpack-web 9.2.0 → 11.0.0

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss

@@ -30,8 +30,8 @@
   transition: opacity $bpk-duration-base ease-in-out,
     transform $bpk-duration-base ease-in-out;
   border-radius: $bpk-border-radius-md;
-  background: $bpk-color-sky-blue-shade-03;
-  color: $bpk-color-white;
+  background: $bpk-core-primary-day;
+  color: $bpk-text-on-dark-day;
   box-shadow: $bpk-box-shadow-xl, $bpk-box-shadow-lg;
 
   @include bpk-breakpoint-mobile {
@@ -67,30 +67,17 @@
     min-height: 0;
     margin: 0 0 auto auto;
     padding: 0;
-    color: $bpk-color-sky-blue-tint-01;
-
-    &--dark {
-      color: $bpk-link-color;
-    }
+    color: $bpk-text-on-dark-day;
   }
 
   &__icon {
     margin: bpk-spacing-sm() bpk-spacing-md() 0 bpk-spacing-sm();
     flex-shrink: 0;
     text-align: bottom;
-    fill: $bpk-color-white;
-
-    &--dark {
-      fill: $bpk-color-sky-gray;
-    }
+    fill: $bpk-text-on-dark-day;
   }
 
   &__text {
     margin-right: bpk-spacing-md();
   }
-
-  &--dark {
-    background: $bpk-color-white;
-    color: $bpk-color-sky-gray;
-  }
 }

package/bpk-component-form-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^5.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-animate-height": "^5.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,12 +23,12 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-checkbox": "^5.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-input": "^7.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-component-textarea": "^5.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-button": "^7.0.4",
+    "bpk-component-checkbox": "^5.0.4",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-component-input": "^7.0.4",
+    "bpk-component-select": "^6.0.4",
+    "bpk-component-textarea": "^5.0.4"
   }
 }

package/bpk-component-graphic-promotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "5.1.0",
+  "version": "5.1.2",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -8,15 +8,16 @@
     "url": "git@github.com:Skyscanner/backpack.git"
   },
   "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.ts",
+  "main": "index.js",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0"
+    "bpk-component-button": "^7.0.4",
+    "bpk-component-text": "^8.0.4",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.0",
+    "prop-types": "^15.5.8"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-graphic-promotion/src/{BpkGraphicPromo.tsx → BpkGraphicPromo.js}

@@ -42,24 +42,24 @@ export const TEXT_ALIGN = {
   start: 'start',
   center: 'center',
   end: 'end',
-} as const;
+}; // as const; // Temp disabling TS types due to non TS projects compatibility.
 
 export type Props = {
-  className?: string | null;
-  contentId?: string | null;
-  tagline?: string | null;
-  headline: string;
-  subheading?: string | null;
+  className?: string | null,
+  contentId?: string | null,
+  tagline?: string | null,
+  headline: string,
+  subheading?: string | null,
   sponsor?: {
-    label: string;
-    logo: string;
-    altText: string;
-  } | null;
-  buttonText: string;
-  onClick: () => void;
-  invertVertically?: boolean;
-  textAlign: typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN];
-  style?: {};
+    label: string,
+    logo: string,
+    altText: string,
+  } | null,
+  buttonText: string,
+  onClick: () => void,
+  invertVertically?: boolean,
+  textAlign: $Keys<typeof TEXT_ALIGN>, // typeof TEXT_ALIGN[keyof typeof TEXT_ALIGN]; // Temp disabling TS types due to non TS projects compatibility.
+  style?: {},
 };
 
 const constructAriaLabel = ({
@@ -70,7 +70,7 @@ const constructAriaLabel = ({
   tagline,
 }: Pick<
   Props,
-  'buttonText' | 'headline' | 'sponsor' | 'subheading' | 'tagline'
+  'buttonText' | 'headline' | 'sponsor' | 'subheading' | 'tagline',
 >) => {
   const text: string[] = [];
   const addText = (value?: string | null) => value && text.push(value);
@@ -199,4 +199,14 @@ const BpkGraphicPromo = ({
   );
 };
 
+BpkGraphicPromo.defaultProps = {
+  className: null,
+  contentId: null,
+  tagline: null,
+  subheading: null,
+  sponsor: null,
+  invertVertically: false,
+  style: {},
+};
+
 export default BpkGraphicPromo;

package/bpk-component-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "Backpack grid components.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-grid-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid-toggle",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "Backpack vertical grid toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^4.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-link": "^4.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-horizontal-nav/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "6.0.2",
+  "version": "6.1.0",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^4.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-mobile-scroll-container": "^4.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-text": "^8.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-text": "^8.0.4",
+    "bpk-storybook-utils": "^2.0.4"
   }
 }

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.scss

@@ -20,11 +20,11 @@
 
 .bpk-horizontal-nav {
   &--show-default-underline {
-    @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06, '');
+    @include bpk-border-bottom-sm($bpk-line-day, '');
   }
 
   &--show-light-underline {
-    @include bpk-border-bottom-sm($bpk-color-white, '');
+    @include bpk-border-bottom-sm($bpk-line-day, '');
   }
 
   &__list {

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss

@@ -50,7 +50,7 @@ $bpk-spacing-v2: true;
       );
 
       @include bpk-hover {
-        @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06);
+        @include bpk-border-bottom-xl($bpk-surface-highlight-day);
         @include bpk-themeable-property(
           color,
           --bpk-horizontal-nav-link-hover-color,
@@ -59,7 +59,7 @@ $bpk-spacing-v2: true;
       }
 
       &:active {
-        @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-05);
+        @include bpk-border-bottom-xl($bpk-line-day);
         @include bpk-themeable-property(
           color,
           --bpk-horizontal-nav-link-active-color,
@@ -68,11 +68,11 @@ $bpk-spacing-v2: true;
       }
 
       &-disabled {
-        color: $bpk-color-sky-gray-tint-06;
+        color: $bpk-text-disabled-day;
         cursor: not-allowed;
 
         &:active {
-          color: $bpk-color-sky-gray-tint-06;
+          color: $bpk-text-disabled-day;
           box-shadow: unset;
         }
       }
@@ -114,37 +114,37 @@ $bpk-spacing-v2: true;
     }
 
     &--light {
-      color: $bpk-color-white;
+      color: $bpk-text-on-dark-day;
 
       @include bpk-hover {
-        @include bpk-border-bottom-xl($bpk-color-white);
+        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
       }
 
       &:active {
-        @include bpk-border-bottom-xl($bpk-color-white);
+        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
       }
 
       &-disabled {
-        color: $bpk-color-sky-gray-tint-06;
+        color: $bpk-text-disabled-day;
         cursor: not-allowed;
 
         &:active {
-          color: $bpk-color-sky-gray-tint-06;
+          color: $bpk-text-disabled-day;
           box-shadow: unset;
         }
       }
 
       &-selected {
-        color: $bpk-color-white;
+        color: $bpk-text-on-dark-day;
 
-        @include bpk-border-bottom-xl($bpk-color-white);
+        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
 
         @include bpk-hover {
-          @include bpk-border-bottom-xl($bpk-color-white);
+          @include bpk-border-bottom-xl($bpk-text-on-dark-day);
         }
 
         &:active {
-          @include bpk-border-bottom-xl($bpk-color-white);
+          @include bpk-border-bottom-xl($bpk-text-on-dark-day);
         }
       }
     }

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "10.0.2",
+  "version": "10.0.4",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,16 +17,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "@skyscanner/bpk-svgs": "^14.3.8",
-    "bpk-mixins": "^31.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "@skyscanner/bpk-svgs": "^14.4.3",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-list": "^5.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-button": "^7.0.4",
+    "bpk-component-list": "^5.1.1",
+    "bpk-component-text": "^8.0.4"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-spinner": "^6.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
@@ -25,7 +25,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-mobile-scroll-container": "^4.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-mobile-scroll-container": "^4.0.4",
+    "bpk-component-text": "^8.0.4"
   }
 }

package/bpk-component-infinite-scroll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Backpack infinite scroll component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
@@ -23,9 +23,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-list": "^5.0.2",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-button": "^7.0.4",
+    "bpk-component-list": "^5.1.1",
+    "bpk-component-spinner": "^6.0.4",
+    "bpk-storybook-utils": "^2.0.4"
   }
 }

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^7.0.2",
-    "bpk-component-label": "^6.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-banner-alert": "^7.0.4",
+    "bpk-component-label": "^6.0.4",
+    "bpk-storybook-utils": "^2.0.4"
   }
 }

package/bpk-component-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "6.0.2",
+  "version": "6.0.4",
   "description": "Backpack label component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "Backpack link component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -22,7 +22,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-storybook-utils": "^2.0.4"
   }
 }

package/bpk-component-list/README.md

@@ -34,11 +34,14 @@ export default () => (
 
 ### BpkList
 
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| ordered   | bool     | false    | false         |
-| className | string   | false    | null          |
+| Property       | PropType | Required | Default Value |
+| -------------- | -------- | -------- | ------------- |
+| children       | -        | true     | -             |
+| ordered        | bool     | false    | false         |
+| className      | string   | false    | null          |
+| ariaLabel      | string   | false    | null          |
+| ariaLabelledby | string   | false    | null          |
+| title          | string   | false    | null          |
 
 ### BpkListItem
 

package/bpk-component-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-list",
-  "version": "5.0.2",
+  "version": "5.1.1",
   "description": "Backpack list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-list/src/BpkList.js

@@ -31,15 +31,28 @@ type Props = {
   children: Node,
   ordered: boolean,
   className: ?string,
+  ariaLabel: ?string,
+  ariaLabelledby: ?string,
+  title: ?string,
 };
 
 const BpkList = (props: Props) => {
-  const { children, className, ordered } = props;
+  const { ariaLabel, ariaLabelledby, children, className, ordered, title } =
+    props;
 
   const TagName: any = ordered ? 'ol' : 'ul';
   const classNames: string = getClassName('bpk-list', className);
 
-  return <TagName className={classNames}>{children}</TagName>;
+  return (
+    <TagName
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      title={title}
+      className={classNames}
+    >
+      {children}
+    </TagName>
+  );
 };
 
 BpkList.propTypes = {
@@ -54,6 +67,9 @@ BpkList.propTypes = {
 BpkList.defaultProps = {
   ordered: false,
   className: null,
+  ariaLabel: null,
+  ariaLabelledby: null,
+  title: null,
 };
 
 export default BpkList;

package/bpk-component-loading-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-button": "^7.0.4",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-component-spinner": "^6.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-storybook-utils": "^2.0.4"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "7.1.0",
+  "version": "7.1.2",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@react-google-maps/api": "^2.8.1",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-spinner": "^6.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },
@@ -24,9 +24,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-storybook-utils": "^2.0.2",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-component-text": "^8.0.4",
+    "bpk-storybook-utils": "^2.0.4",
     "prop-types": "^15.5.8"
   }
 }