@skyscanner/backpack-web 9.3.0 → 11.1.0

package/bpk-component-drawer/src/BpkDrawer.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-drawer__container {
   position: fixed;

package/bpk-component-drawer/src/BpkDrawerContent.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,23 +14,23 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^5.0.2",
-    "bpk-component-label": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-form-validation": "^5.0.5",
+    "bpk-component-label": "^6.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^7.0.2",
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-calendar": "^12.0.2",
-    "bpk-component-checkbox": "^5.0.2",
-    "bpk-component-datepicker": "^18.0.2",
-    "bpk-component-input": "^7.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-component-textarea": "^5.0.2"
+    "bpk-component-autosuggest": "^7.0.5",
+    "bpk-component-button": "^7.0.5",
+    "bpk-component-calendar": "^13.0.2",
+    "bpk-component-checkbox": "^5.0.5",
+    "bpk-component-datepicker": "^18.0.5",
+    "bpk-component-input": "^7.0.5",
+    "bpk-component-select": "^6.0.5",
+    "bpk-component-textarea": "^5.0.5"
   }
 }

package/bpk-component-fieldset/src/BpkFieldset.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "3.0.2",
+  "version": "3.0.5",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,10 +17,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^6.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-label": "^6.0.5",
+    "bpk-component-text": "^8.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-flare/src/bpk-content-bubble.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-content-bubble {
   &__pointer {
@@ -50,6 +50,7 @@
 
   &__content-wrapper {
     display: flex;
+
     // flex-direction is required because IE doesn't cope well with
     // flex-row when the parent is flex-col
     flex-direction: column;

package/bpk-component-flare/src/bpk-flare-bar.module.scss

@@ -16,13 +16,14 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 
 .bpk-flare-bar {
   &__container {
     position: relative;
+
     // when we use `margin: X%`, the percentage is proportional to the size of the nearest block container's width
     // https://developer.mozilla.org/en-US/docs/Web/CSS/margin
     // By using `display: flex` we ensure that this container is the nearest block container

package/bpk-component-floating-notification/README.md

@@ -16,7 +16,6 @@ import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';
 export default () => (
   <BpkFloatingNotification
     ctaText="View"
-    type={TYPE.dark}
     icon={BpkIconHeart}
     onClick={() => {}}
     text="Killer Combo saved to New York and Miami 🎉"
@@ -37,7 +36,6 @@ export default () => (
 | onClick        | func         | false    | null          |
 | onExit         | func         | false    | null          |
 | text           | string       | true     | -             |
-| type           | oneOf(TYPE)  | false    | TYPE.light    |
 
 ### Prop Details
 
@@ -50,9 +48,3 @@ The default value is 4 seconds (4000 milliseconds).
 #### onExit
 
 Execute a function after the component has finished the exit animation.
-
-#### type
-
-By default the component is rendered in the light theme (`TYPE.light`) which uses a dark background and white text for the notification. This contrasts against a white page.
-
-The dark theme (`TYPE.dark`) displays the notification with a white background and black text. This contrasts against a dark page.

package/bpk-component-floating-notification/index.js

@@ -19,9 +19,7 @@
 
 import BpkFloatingNotification, {
   type Props as BpkFloatingNotificationProps,
-  TYPE,
 } from './src/BpkFloatingNotification';
 
 export type { BpkFloatingNotificationProps };
-export { TYPE };
 export default BpkFloatingNotification;

package/bpk-component-floating-notification/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-floating-notification",
-  "version": "2.0.2",
+  "version": "3.0.1",
   "description": "Backpack floating-notification component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,11 +13,11 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-aria-live": "^3.0.2",
-    "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-aria-live": "^3.1.2",
+    "bpk-component-button": "^7.0.5",
+    "bpk-component-text": "^8.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -30,11 +30,6 @@ import STYLES from './BpkFloatingNotification.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-export const TYPE = {
-  light: 'light',
-  dark: 'dark',
-};
-
 type Props = {
   animateOnEnter: ?boolean,
   animateOnExit: ?boolean,
@@ -45,7 +40,6 @@ type Props = {
   onClick: ?() => void,
   onExit: ?() => void,
   text: string,
-  type: ?TYPE,
 };
 
 const BpkFloatingNotification = (props: Props) => {
@@ -61,25 +55,10 @@ const BpkFloatingNotification = (props: Props) => {
     onClick,
     onExit,
     text,
-    type,
     ...rest
   } = props;
 
-  const classNames = getClassName(
-    'bpk-floating-notification',
-    type === TYPE.dark && 'bpk-floating-notification--dark',
-    className,
-  );
-
-  const iconClassNames = getClassName(
-    'bpk-floating-notification__icon',
-    type === TYPE.dark && 'bpk-floating-notification__icon--dark',
-  );
-
-  const buttonClassNames = getClassName(
-    'bpk-floating-notification__button',
-    type === TYPE.dark && 'bpk-floating-notification__button--dark',
-  );
+  const classNames = getClassName('bpk-floating-notification', className);
 
   useEffect(() => {
     let timer;
@@ -107,7 +86,7 @@ const BpkFloatingNotification = (props: Props) => {
     >
       <div className={classNames} {...rest}>
         {Icon && (
-          <div className={iconClassNames}>
+          <div className={getClassName('bpk-floating-notification__icon')}>
             <Icon aria-hidden />
           </div>
         )}
@@ -120,7 +99,11 @@ const BpkFloatingNotification = (props: Props) => {
         </BpkText>
         <BpkAriaLive aria-hidden>{text}</BpkAriaLive>
         {ctaText && (
-          <BpkButton link onClick={onClick} className={buttonClassNames}>
+          <BpkButton
+            link
+            onClick={onClick}
+            className={getClassName('bpk-floating-notification__button')}
+          >
             {ctaText}
           </BpkButton>
         )}
@@ -139,7 +122,6 @@ BpkFloatingNotification.propTypes = {
   onClick: PropTypes.func,
   onExit: PropTypes.func,
   text: PropTypes.string.isRequired,
-  type: PropTypes.oneOf(Object.values(TYPE)),
 };
 
 BpkFloatingNotification.defaultProps = {
@@ -151,7 +133,6 @@ BpkFloatingNotification.defaultProps = {
   icon: null,
   onClick: null,
   onExit: null,
-  type: TYPE.light,
 };
 
 export default BpkFloatingNotification;

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-floating-notification {
   position: absolute;
@@ -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.5",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,21 +14,21 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^5.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-animate-height": "^5.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "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.5",
+    "bpk-component-checkbox": "^5.0.5",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-input": "^7.0.5",
+    "bpk-component-select": "^6.0.5",
+    "bpk-component-textarea": "^5.0.5"
   }
 }

package/bpk-component-form-validation/src/BpkFormValidation.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-form-validation {
   @include bpk-form-validation;

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "5.1.0",
+  "version": "5.1.3",
   "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.5",
+    "bpk-component-text": "^8.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
+    "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-graphic-promotion/src/BpkGraphicPromo.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 @mixin aspect-ratio($ratio) {
   padding-top: $ratio;

package/bpk-component-grid/package.json

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

package/bpk-component-grid/src/BpkGridColumn.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-grid {
   &__column {

package/bpk-component-grid/src/BpkGridContainer.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-grid {
   &__container {

package/bpk-component-grid/src/BpkGridRow.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-grid {
   &__row {

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

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

package/bpk-component-grid-toggle/src/BpkGridToggle.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-vertical-grid {
   &--on {

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "6.0.2",
+  "version": "6.1.1",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^4.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-mobile-scroll-container": "^4.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "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.5",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

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

@@ -16,15 +16,15 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .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 {