@skyscanner/backpack-web 0.0.5 → 0.2.0

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -0,0 +1,196 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText from '../../bpk-component-text';
+import BpkButton from '../../bpk-component-button';
+import BpkCard from '../../bpk-component-card';
+
+import STYLES from './BpkGraphicPromo.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export const TEXT_ALIGN = {
+  start: 'start',
+  center: 'center',
+  end: 'end',
+};
+
+export type Props = {
+  className: ?string,
+  tagline: ?string,
+  headline: string,
+  subheading: ?string,
+  sponsor: ?{
+    label: string,
+    logo: string,
+    altText: string,
+  },
+  buttonText: string,
+  onClick: () => void,
+  invertVertically: boolean,
+  textAlign: TEXT_ALIGN,
+  style: ?{},
+};
+
+const constructAriaLabel = ({
+  buttonText,
+  headline,
+  sponsor,
+  subheading,
+  tagline,
+}: Props) => {
+  const text = [];
+  const addText = (value) => value && text.push(value);
+
+  if (sponsor) {
+    addText(sponsor.label);
+    addText(sponsor.altText);
+  } else {
+    addText(tagline);
+  }
+  addText(headline);
+  addText(subheading);
+  addText(buttonText);
+
+  return text.join('. ');
+};
+
+const BpkGraphicPromo = (props: Props) => {
+  const {
+    buttonText,
+    className,
+    headline,
+    invertVertically,
+    onClick,
+    sponsor,
+    style,
+    subheading,
+    tagline,
+    textAlign,
+  } = props;
+
+  // FIXME: Use useCallback() here when React is updated.
+  const onClickWrapper = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    onClick();
+  };
+
+  const cardClasses = getClassName('bpk-graphic-promo', className);
+  const containerClasses = getClassName(
+    'bpk-graphic-promo__container',
+    `bpk-graphic-promo__container--${textAlign}`,
+    invertVertically && 'bpk-graphic-promo__container--inverted',
+  );
+
+  const getTextClasses = (baseClass: string) =>
+    getClassName(baseClass, `${baseClass}--${textAlign}`);
+  return (
+    <BpkCard
+      className={cardClasses}
+      style={style}
+      onClick={onClickWrapper}
+      aria-label={constructAriaLabel(props)}
+      padded={false}
+    >
+      <div className={containerClasses} aria-hidden>
+        <div className={getTextClasses('bpk-graphic-promo__sponsor-content')}>
+          {sponsor && (
+            <>
+              <BpkText
+                tagName="span"
+                className={getClassName('bpk-graphic-promo__sponsor-label')}
+              >
+                {sponsor.label}
+              </BpkText>
+              <img
+                className={getClassName('bpk-graphic-promo__sponsor-logo')}
+                alt={sponsor.altText}
+                src={sponsor.logo}
+              />
+            </>
+          )}
+        </div>
+        <div className={getTextClasses('bpk-graphic-promo__promo-content')}>
+          {!sponsor && tagline && (
+            <BpkText
+              tagName="span"
+              className={getClassName('bpk-graphic-promo__tagline')}
+            >
+              {tagline}
+            </BpkText>
+          )}
+          <BpkText
+            tagName="h2"
+            className={getClassName('bpk-graphic-promo__headline')}
+          >
+            {headline}
+          </BpkText>
+          {subheading && (
+            <BpkText
+              tagName="p"
+              className={getClassName('bpk-graphic-promo__subheading')}
+            >
+              {subheading}
+            </BpkText>
+          )}
+          <BpkButton
+            primaryOnDark
+            className={getClassName('bpk-graphic-promo__cta')}
+            onClick={onClickWrapper}
+            tabIndex={-1} /* button is not focusable for accessibility */
+          >
+            {buttonText}
+          </BpkButton>
+        </div>
+      </div>
+    </BpkCard>
+  );
+};
+
+BpkGraphicPromo.propTypes = {
+  className: PropTypes.string,
+  tagline: PropTypes.string,
+  headline: PropTypes.string.isRequired,
+  subheading: PropTypes.string,
+  sponsor: PropTypes.shape({
+    label: PropTypes.string,
+    logo: PropTypes.string,
+    altText: PropTypes.string,
+  }),
+  buttonText: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  invertVertically: PropTypes.bool,
+  textAlign: PropTypes.oneOf(Object.values(TEXT_ALIGN)).isRequired,
+  style: PropTypes.shape({ [PropTypes.string]: PropTypes.string }),
+};
+
+BpkGraphicPromo.defaultProps = {
+  className: null,
+  tagline: null,
+  subheading: null,
+  sponsor: null,
+  invertVertically: false,
+  style: {},
+};
+
+export default BpkGraphicPromo;

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss

@@ -0,0 +1,250 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~bpk-mixins/index';
+@import './custom-breakpoints.module';
+
+.bpk-graphic-promo {
+  max-width: 65.5rem;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: $bpk-color-sky-blue;
+  background-position: center;
+  background-size: cover;
+  color: $bpk-color-white;
+  box-shadow: none;
+
+  @include breakpoint-landscape {
+    pointer-events: none;
+
+    &__sponsor-label {
+      margin-bottom: bpk-spacing-sm();
+
+      @include bpk-label-1;
+    }
+
+    &__sponsor-content {
+      margin-bottom: bpk-spacing-xl();
+    }
+
+    &__tagline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-label-1;
+    }
+
+    &__subheading {
+      @include bpk-body-default;
+    }
+
+    &__headline {
+      @include breakpoint-landscape-desktop {
+        @include bpk-hero-5;
+      }
+
+      @include breakpoint-landscape-tablet {
+        @include bpk-heading-1;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: bpk-spacing-md();
+      }
+    }
+  }
+
+  @include breakpoint-portrait-large {
+    &__sponsor-label {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-heading-4;
+    }
+
+    &__tagline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-subheading;
+    }
+
+    &__headline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-hero-4;
+    }
+
+    &__subheading {
+      @include bpk-subheading;
+    }
+  }
+
+  @include breakpoint-portrait-medium {
+    &__sponsor-label {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-heading-3;
+    }
+
+    &__tagline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-subheading;
+    }
+
+    &__headline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-hero-5;
+    }
+
+    &__subheading {
+      @include bpk-body-longform;
+    }
+  }
+
+  @include breakpoint-portrait-small {
+    &__sponsor-label {
+      margin-bottom: bpk-spacing-sm();
+
+      @include bpk-label-1;
+    }
+
+    &__tagline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-label-1;
+    }
+
+    &__headline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-heading-2;
+    }
+
+    &__subheading {
+      @include bpk-body-default;
+    }
+  }
+
+  &__container {
+    display: flex;
+    flex-direction: column;
+
+    @include breakpoint-landscape {
+      justify-content: center;
+
+      &--start {
+        align-items: start;
+      }
+
+      &--center {
+        align-items: center;
+      }
+
+      &--end {
+        align-items: end;
+      }
+    }
+
+    @include breakpoint-portrait {
+      justify-content: space-between;
+
+      &--inverted {
+        flex-direction: column-reverse;
+      }
+    }
+
+    @include breakpoint-landscape-desktop {
+      height: 25rem;
+
+      @include bpk-margin-leading(bpk-spacing-xxxl(), false);
+      @include bpk-margin-trailing(bpk-spacing-xxl(), false);
+    }
+
+    @include breakpoint-landscape-tablet {
+      height: 25rem;
+
+      @include bpk-margin-leading(bpk-spacing-xxl(), false);
+      @include bpk-margin-trailing(bpk-spacing-xl(), false);
+    }
+
+    @include breakpoint-portrait-large {
+      height: 58.3125rem;
+      padding: bpk-spacing-xl();
+    }
+
+    @include breakpoint-portrait-medium {
+      height: 42.625rem;
+      padding: bpk-spacing-xl();
+    }
+
+    @include breakpoint-portrait-small {
+      height: 31.25rem;
+      padding: bpk-spacing-lg();
+    }
+  }
+
+  &__sponsor-content,
+  &__promo-content {
+    display: flex;
+    flex-direction: column;
+
+    @include breakpoint-landscape {
+      &--start {
+        align-items: start;
+        text-align: start;
+      }
+
+      &--center {
+        align-items: center;
+        text-align: center;
+      }
+
+      &--end {
+        align-items: start;
+        text-align: start;
+      }
+    }
+
+    @include breakpoint-landscape-desktop {
+      width: 22.5rem;
+    }
+
+    @include breakpoint-landscape-tablet {
+      width: 20rem;
+    }
+  }
+
+  &::after {
+    display: none;
+  }
+
+  &__sponsor-logo {
+    width: 9.25rem;
+  }
+
+  &__cta {
+    pointer-events: auto;
+
+    @include breakpoint-landscape {
+      margin-top: bpk-spacing-xl();
+    }
+
+    @include breakpoint-portrait {
+      display: none;
+    }
+  }
+}

package/bpk-component-graphic-promotion/src/custom-breakpoints.module.scss

@@ -0,0 +1,70 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// FIXME: Replace the custom breakpoints with on es from Backpack when ready. (ST-4102)
+
+$breakpoint-landscape-desktop-min: 50.01rem;
+$breakpoint-landscape-tablet-max: 50rem;
+$breakpoint-landscape-tablet-min: 43.76rem;
+$breakpoint-portrait-large-max: 43.75rem;
+$breakpoint-portrait-large-min: 32.01rem;
+$breakpoint-portrait-medium-max: 32rem;
+$breakpoint-portrait-medium-min: 26.51rem;
+$breakpoint-portrait-small-max: 26.5rem;
+
+@mixin breakpoint-landscape-desktop {
+  @media (min-width: $breakpoint-landscape-desktop-min) {
+    @content;
+  }
+}
+
+@mixin breakpoint-landscape-tablet {
+  @media (min-width: $breakpoint-landscape-tablet-min) and (max-width: $breakpoint-landscape-tablet-max) {
+    @content;
+  }
+}
+
+@mixin breakpoint-portrait-large {
+  @media (min-width: $breakpoint-portrait-large-min) and (max-width: $breakpoint-portrait-large-max) {
+    @content;
+  }
+}
+
+@mixin breakpoint-portrait-medium {
+  @media (min-width: $breakpoint-portrait-medium-min) and (max-width: $breakpoint-portrait-medium-max) {
+    @content;
+  }
+}
+
+@mixin breakpoint-portrait-small {
+  @media (max-width: $breakpoint-portrait-small-max) {
+    @content;
+  }
+}
+
+@mixin breakpoint-landscape {
+  @media (min-width: $breakpoint-landscape-tablet-min) {
+    @content;
+  }
+}
+
+@mixin breakpoint-portrait {
+  @media (max-width: $breakpoint-portrait-large-max) {
+    @content;
+  }
+}

package/bpk-component-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack grid components.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-grid/src/BpkGridColumn.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkGridColumn.module.scss';

package/bpk-component-grid/src/BpkGridContainer.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkGridContainer.module.scss';

package/bpk-component-grid/src/BpkGridRow.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkGridRow.module.scss';

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid-toggle",
-  "version": "3.1.0",
+  "version": "3.1.6",
   "description": "Backpack vertical grid toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-link": "^3.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { cssModules } from '../../bpk-react-utils';
 import { BpkButtonLink } from '../../bpk-component-link';
 

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.1",
+  "version": "5.1.7",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-mobile-scroll-container": "^3.1.6",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-storybook-utils": "^1.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "bpk-component-text": "^7.0.0",
+    "bpk-storybook-utils": "^1.1.5"
   }
 }

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -19,8 +19,9 @@
 
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { cssModules } from '../../bpk-react-utils';
 import React, { Component, type Node } from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
 import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
 
 import STYLES from './BpkHorizontalNav.module.scss';

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

@@ -19,6 +19,7 @@
 
 import React, { Component, type Node } from 'react';
 import PropTypes from 'prop-types';
+
 import { cssModules } from '../../bpk-react-utils';
 
 import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav';

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "9.2.1",
+  "version": "9.2.7",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,16 +17,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "@skyscanner/bpk-svgs": "^14.0.19",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.2.0",
+    "@skyscanner/bpk-svgs": "^14.1.7",
+    "bpk-mixins": "^29.0.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-list": "^3.1.0",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-button": "^6.2.1",
+    "bpk-component-list": "^3.1.6",
+    "bpk-component-text": "^7.0.0"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-icon/src/classNameModifierHOCFactory.js

@@ -18,6 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+
 import { wrapDisplayName } from '../../bpk-react-utils';
 
 export default (displayName, classNamesToAdd = []) =>