@skyscanner/backpack-web 0.0.4 → 0.1.0

package/bpk-component-drawer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-drawer",
-  "version": "4.1.1",
+  "version": "4.1.5",
   "description": "Backpack drawer component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-close-button": "^3.1.1",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-link": "^3.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
-    "bpk-scrim-utils": "^5.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-close-button": "^3.1.5",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-component-link": "^3.1.4",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
+    "bpk-scrim-utils": "^5.1.3",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -28,7 +28,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-text": "^6.1.5"
   }
 }

package/bpk-component-drawer/src/BpkDrawer.js

@@ -20,8 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Portal, cssModules } from '../../bpk-react-utils';
-import { withScrim } from '../../bpk-react-utils';
+import { Portal, cssModules } from 'bpk-react-utils';
+import { withScrim } from 'bpk-scrim-utils';
 
 import BpkDrawerContent from './BpkDrawerContent';
 import STYLES from './BpkDrawer.module.scss';

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -22,9 +22,9 @@ import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
 import Transition from 'react-transition-group/Transition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from '../../bpk-react-utils';
-import { BpkButtonLink } from '../../bpk-component-link';
-import BpkCloseButton from '../../bpk-component-close-button';
+import { cssModules } from 'bpk-react-utils';
+import { BpkButtonLink } from 'bpk-component-link';
+import BpkCloseButton from 'bpk-component-close-button';
 
 import STYLES from './BpkDrawerContent.module.scss';
 

package/bpk-component-drawer/src/themeAttributes.js

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { themeAttributes as linkAttributes } from '../../bpk-component-link';
+import { themeAttributes as linkAttributes } from 'bpk-component-link';
 
 export default [...linkAttributes];

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "4.1.1",
+  "version": "4.1.7",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,23 +14,23 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^4.2.1",
-    "bpk-component-label": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-form-validation": "^4.2.5",
+    "bpk-component-label": "^5.1.4",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^6.1.1",
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-calendar": "^11.1.1",
-    "bpk-component-checkbox": "^4.1.1",
-    "bpk-component-datepicker": "^15.2.1",
-    "bpk-component-input": "^6.1.1",
-    "bpk-component-select": "^5.1.0",
-    "bpk-component-textarea": "^4.2.0"
+    "bpk-component-autosuggest": "^6.1.5",
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-calendar": "^11.1.7",
+    "bpk-component-checkbox": "^4.1.5",
+    "bpk-component-datepicker": "^15.2.7",
+    "bpk-component-input": "^6.1.5",
+    "bpk-component-select": "^5.1.4",
+    "bpk-component-textarea": "^4.2.4"
   }
 }

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -19,9 +19,9 @@
 
 import PropTypes from 'prop-types';
 import React, { cloneElement, type Element } from 'react';
-import BpkLabel from '../../bpk-component-label';
-import BpkFormValidation from '../../bpk-component-form-validation';
-import { cssModules } from '../../bpk-react-utils';
+import BpkLabel from 'bpk-component-label';
+import BpkFormValidation from 'bpk-component-form-validation';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkFieldset.module.scss';
 

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "2.1.1",
+  "version": "2.1.5",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,10 +17,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^5.1.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-label": "^5.1.4",
+    "bpk-component-text": "^6.1.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-flare/src/BpkContentBubble.js

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

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './bpk-flare-bar.module.scss';
 import Pointer from './__generated__/js/pointer';

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "4.2.1",
+  "version": "4.2.5",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,21 +14,21 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^4.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-animate-height": "^4.1.4",
+    "bpk-mixins": "^28.1.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-button": "^5.1.0",
-    "bpk-component-checkbox": "^4.1.1",
-    "bpk-component-icon": "^9.2.1",
-    "bpk-component-input": "^6.1.1",
-    "bpk-component-select": "^5.1.0",
-    "bpk-component-textarea": "^4.2.0"
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-checkbox": "^4.1.5",
+    "bpk-component-icon": "^9.2.5",
+    "bpk-component-input": "^6.1.5",
+    "bpk-component-select": "^5.1.4",
+    "bpk-component-textarea": "^4.2.4"
   }
 }

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -18,10 +18,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import AnimateHeight from '../../bpk-animate-height';
-import { cssModules } from '../../bpk-react-utils';
-import BpkSmallExclamationIcon from '../../bpk-component-icon/sm/exclamation-circle';
-import { withAlignment } from '../../bpk-component-icon';
+import AnimateHeight from 'bpk-animate-height';
+import { cssModules } from 'bpk-react-utils';
+import BpkSmallExclamationIcon from 'bpk-component-icon/sm/exclamation-circle';
+import { withAlignment } from 'bpk-component-icon';
 import {
   lineHeightSm,
   iconSizeSm,

package/bpk-component-graphic-promotion/README.md

@@ -0,0 +1,70 @@
+# bpk-component-graphic-promotion
+
+## Installation
+
+```sh
+npm install bpk-component-graphic-promotion --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkGraphicPromo from 'bpk-component-graphic-promotion';
+
+export default () => (
+  <BpkGraphicPromo
+    tagline="Tagline"
+    headline="Ride your wave"
+    subheading="Portugal and 6 more countries have just been added to the UK travel green list"
+    image="./path/to/background/image.jpg"
+    sponsor={{
+      label: 'Sponsored',
+      logo: './path/to/sponsor/logo.png',
+      altText: 'Sponsor Name',
+    }}
+    buttonText="Learn more"
+    onClick={() => redirect("https://www.sponsor-name.com/promotion"))}
+    textAlign={TEXT_ALIGN.start}
+    invertVertically
+  />
+);
+```
+
+## Props
+
+| Property         | PropType          | Required | Default Value |
+| ---------------- | ----------------- | -------- | ------------- |
+| buttonText       | string            | true     | -             |
+| headline         | string            | true     | -             |
+| image            | string            | true     | -             |
+| invertVertically | bool              | true     | -             |
+| onClick          | func              | true     | -             |
+| textAlign        | oneOf(TEXT_ALIGN) | true     | -             |
+| textColor        | oneOf(TEXT_COLOR) | true     | -             |
+| className        | string            | false    | null          |
+| tagline          | string            | false    | null          |
+| sponsor          | object            | false    | null          |
+| subheading       | string            | false    | null          |
+
+### Prop Details
+
+#### sponsor
+
+An object that groups together all the sponsor related properties. This should only be provided if the graphic promo is sponsored, in which case all of the object's properties are required.
+
+The object consists of the following fields:
+
+- `altText`: string
+- `label`: string
+- `logo`: string
+
+##### Example
+
+```typescript
+const sponsor = {
+  label: 'Sponsored',
+  altText: 'Skyscanner',
+  logo: './path/to/skyscanner/logo.png',
+};
+```

package/{bpk-component-close-button/examples.js → bpk-component-graphic-promotion/index.js}

@@ -1,7 +1,7 @@
 /*
  * Backpack - Skyscanner's Design System
  *
- * Copyright 2016 Skyscanner Ltd
+ * 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.
@@ -15,16 +15,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 /* @flow strict */
 
-import React from 'react';
-import { action } from 'bpk-storybook-utils';
-
-import BpkCloseButton from './index';
-
-const DefaultExample = () => (
-  <BpkCloseButton label="Close" onClick={action('Close button clicked')} />
-);
+import BpkGraphicPromo, {
+  type Props as BpkGraphicPromoProps,
+  TEXT_ALIGN,
+  TEXT_COLORS,
+} from './src/BpkGraphicPromo';
 
-export default DefaultExample;
+export type { BpkGraphicPromoProps };
+export { TEXT_ALIGN, TEXT_COLORS };
+export default BpkGraphicPromo;

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

@@ -0,0 +1,26 @@
+{
+  "name": "bpk-component-graphic-promotion",
+  "version": "1.0.3",
+  "description": "Backpack graphic-promotion component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-card": "^4.1.5",
+    "bpk-component-text": "^6.1.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

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

@@ -0,0 +1,202 @@
+/*
+ * 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 const TEXT_COLORS = {
+  black: 'black',
+  white: 'white',
+};
+
+export type Props = {
+  className: ?string,
+  tagline: ?string,
+  headline: string,
+  subheading: ?string,
+  image: string,
+  sponsor: ?{
+    label: string,
+    logo: string,
+    altText: string,
+  },
+  buttonText: string,
+  onClick: () => void,
+  invertVertically: boolean,
+  textAlign: TEXT_ALIGN,
+  textColor: TEXT_COLORS,
+};
+
+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,
+    image,
+    invertVertically,
+    onClick,
+    sponsor,
+    subheading,
+    tagline,
+    textAlign,
+    textColor,
+  } = 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={{ backgroundImage: `url(${image})`, color: textColor }}
+      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
+            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,
+  image: PropTypes.string.isRequired,
+  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,
+  textColor: PropTypes.oneOf(Object.values(TEXT_COLORS)),
+};
+
+BpkGraphicPromo.defaultProps = {
+  className: null,
+  tagline: null,
+  subheading: null,
+  sponsor: null,
+  invertVertically: false,
+  textColor: TEXT_COLORS.white,
+};
+
+export default BpkGraphicPromo;