npm - @skyscanner/backpack-web - Versions diffs - 18.2.1 → 20.0.0 - Mend

@skyscanner/backpack-web 18.2.1 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (265) hide show

package/bpk-component-infinite-scroll/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import PropTypes from 'prop-types';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 import BpkSpinner, { SPINNER_TYPES } from '@skyscanner/backpack-web/bpk-component-spinner';
@@ -104,7 +103,6 @@ used by subclasses to tell the `InfiniteScroll` component it should refresh
 its data.
 ```js
-import React from 'react';
 import PropTypes from 'prop-types';
 import withInfiniteScroll, { DataSource } from '@skyscanner/backpack-web/bpk-component-infinite-scroll';

package/bpk-component-infinite-scroll/src/withInfiniteScroll-test.flow.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { Component } from 'react';
+import { Component, Fragment } from 'react';
 import withInfiniteScroll from './withInfiniteScroll';
 import { ArrayDataSource } from './DataSource';
@@ -64,7 +64,7 @@ List.defaultProps = {
 const InfiniteList = withInfiniteScroll(List);
 (() => (
-  <React.Fragment>
+  <Fragment>
     {/* $FlowExpectedError[prop-missing] */}
     <InfiniteList dataSource={new ArrayDataSource([])} />
@@ -98,5 +98,5 @@ const InfiniteList = withInfiniteScroll(List);
       )}
       seeMoreAfter={5}
     />
-  </React.Fragment>
+  </Fragment>
 ))();

package/bpk-component-infinite-scroll/src/withInfiniteScroll.js CHANGED Viewed

@@ -18,12 +18,8 @@
 /* @flow strict */
-import React, {
-  Component,
-  type Element,
-  type Config,
-  type AbstractComponent,
-} from 'react';
+import { Component } from 'react';
+import type { Element, Config, AbstractComponent } from 'react';
 import PropTypes from 'prop-types';
 import omit from 'lodash/omit';
 import extend from 'lodash/extend';

package/bpk-component-input/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from '@skyscanner/backpack-web/bpk-component-input';
 export default () => (
@@ -72,7 +71,6 @@ You can still attach custom handlers for these events as they will still be call
 | hasTouchSupport | bool                 | false     | (feature detection) |
 ```js
-import React from 'react';
 import BpkInput, { withOpenEvents } from '@skyscanner/backpack-web/bpk-component-input';
 import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';

package/bpk-component-input/index.js CHANGED Viewed

@@ -23,28 +23,19 @@ import {
   propTypes,
   defaultProps,
   CLEAR_BUTTON_MODES,
-  INPUT_TYPES as TYPES,
+  INPUT_TYPES,
   type Props,
 } from './src/common-types';
 import themeAttributes from './src/themeAttributes';
 export default BpkInput;
-// TODO: Remove these in the next major
-const DEPRECATED_INPUT_TYPES = {
-  TEXT: 'text',
-  EMAIL: 'email',
-  NUMBER: 'number',
-  PASSWORD: 'password',
-  TEL: 'tel',
-};
 export type BpkInputProps = Props;
-export const INPUT_TYPES = { ...DEPRECATED_INPUT_TYPES, ...TYPES };
 export {
   propTypes,
   defaultProps,
   withOpenEvents,
+  INPUT_TYPES,
   CLEAR_BUTTON_MODES,
   themeAttributes,
 };

package/bpk-component-input/src/BpkClearButton.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import ClearIcon from '../../bpk-component-icon/sm/close-circle';
 import { withButtonAlignment } from '../../bpk-component-icon';

package/bpk-component-input/src/BpkInput.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { Component } from 'react';
+import { Component } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-input/src/withOpenEvents.js CHANGED Viewed

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
-import React from 'react';
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
@@ -45,7 +45,7 @@ const withEventHandler = (fn, eventHandler) => (e) => {
 };
 const withOpenEvents = (InputComponent) => {
-  class WithOpenEvents extends React.Component {
+  class WithOpenEvents extends Component {
     constructor(props) {
       super(props);

package/bpk-component-label/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 export default () => (

package/bpk-component-label/src/BpkLabel.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-link/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkLink, { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';
 export default () => (

package/bpk-component-link/src/BpkButtonLink.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';
@@ -32,15 +32,14 @@ type Props = {
   children: Node,
   className: ?string,
   onClick: (event: SyntheticEvent<>) => mixed,
-  white: boolean,
   alternate: boolean,
 };
 const BpkButtonLink = (props: Props) => {
-  const { alternate, children, className, onClick, white, ...rest } = props;
+  const { alternate, children, className, onClick, ...rest } = props;
   const classNames = [getClassName('bpk-link')];
-  if (white || alternate) {
+  if (alternate) {
     classNames.push(getClassName('bpk-link--alternate'));
   }
   if (className) {
@@ -65,15 +64,11 @@ BpkButtonLink.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string,
   alternate: PropTypes.bool,
-  // DEPRECATED
-  white: PropTypes.bool,
 };
 BpkButtonLink.defaultProps = {
   className: null,
   alternate: false,
-  // DEPRECATED
-  white: false,
 };
 export { themeAttributes };

package/bpk-component-link/src/BpkLink.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';
@@ -38,7 +38,6 @@ type Props = {
   blank: boolean,
   rel: ?string,
   alternate: boolean,
-  white: boolean,
 };
 const BpkLink = (props: Props) => {
@@ -50,7 +49,6 @@ const BpkLink = (props: Props) => {
     href,
     onClick,
     rel: propRel,
-    white,
     ...rest
   } = props;
@@ -59,7 +57,7 @@ const BpkLink = (props: Props) => {
   const target = blank ? '_blank' : null;
   const rel = blank ? propRel || 'noopener noreferrer' : propRel;
-  if (white || alternate) {
+  if (alternate) {
     classNames.push(getClassName('bpk-link--alternate'));
   }
   if (className) {
@@ -92,8 +90,6 @@ BpkLink.propTypes = {
   blank: PropTypes.bool,
   rel: PropTypes.string,
   alternate: PropTypes.bool,
-  // DEPRECATED
-  white: PropTypes.bool,
 };
 BpkLink.defaultProps = {
@@ -102,8 +98,6 @@ BpkLink.defaultProps = {
   blank: false,
   rel: null,
   alternate: false,
-  // DEPRECATED
-  white: false,
 };
 export default BpkLink;

package/bpk-component-list/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { BpkList, BpkListItem } from '@skyscanner/backpack-web/bpk-component-list';
 export default () => (

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

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-list/src/BpkListItem.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-loading-button/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkLoadingButton from '@skyscanner/backpack-web/bpk-component-loading-button';
 import BaggageIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/baggage';
 import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';

package/bpk-component-loading-button/src/BpkLoadingButton.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node, type Element } from 'react';
+import type { Node, Element } from 'react';
 import BpkButton from '../../bpk-component-button';
 import { BpkSpinner, BpkLargeSpinner } from '../../bpk-component-spinner';

package/bpk-component-map/README.md CHANGED Viewed

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
 import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
 import LandmarkIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/landmark';
@@ -61,7 +60,6 @@ export default () => (
 Price markers are used to display clickable prices on a map.
 ```js
-import React from 'react';
 import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from '@skyscanner/backpack-web/bpk-component-map';
 export default () => (
@@ -103,7 +101,6 @@ export default () => (
 If you intend to include multiple maps on one page, it's better to load the Google Maps JavaScript in this HOC, as it ensures that script will not be re-downloaded every time it's used.
 ```js
-import React from 'react';
 import BpkMap, { withGoogleMapsScript } from '@skyscanner/backpack-web/bpk-component-map';
 const BpkMapWithScript = withGoogleMapsScript(BpkMap);

package/bpk-component-map/src/BpkBasicMapMarker.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import BpkOverlayView from './BpkOverlayView';

package/bpk-component-map/src/BpkIconMarker.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-map/src/BpkIconMarkerBackground.js CHANGED Viewed

@@ -18,8 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import STYLES from './BpkIconMarkerBackground.module.scss';

package/bpk-component-map/src/BpkMap.js CHANGED Viewed

@@ -18,7 +18,8 @@
 /* @flow strict */
-import React, { type Node, useCallback, useRef } from 'react';
+import type { Node } from 'react';
+import { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { GoogleMap } from '@react-google-maps/api';

package/bpk-component-map/src/BpkOverlayView.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 import { OverlayView } from '@react-google-maps/api';

package/bpk-component-map/src/BpkPriceMarker.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-map/src/DefaultLoadingElement.js CHANGED Viewed

@@ -17,8 +17,6 @@
  */
 /* @flow strict */
-import React from 'react';
 import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-map/src/withGoogleMapsScript.js CHANGED Viewed

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
-import React, { type ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 import { useJsApiLoader } from '@react-google-maps/api';

package/bpk-component-mobile-scroll-container/README.md CHANGED Viewed

@@ -9,7 +9,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
 import BpkMobileScrollContainer from '@skyscanner/backpack-web/bpk-component-mobile-scroll-container';

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js CHANGED Viewed

@@ -20,7 +20,8 @@
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
-import React, { Component, type Node } from 'react';
+import type { Node } from 'react';
+import { Component } from 'react';
 import { cssModules, isRTL } from '../../bpk-react-utils';

package/bpk-component-modal/README.md CHANGED Viewed

@@ -9,7 +9,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkModal from '@skyscanner/backpack-web/bpk-component-modal';
 import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
 import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';

package/bpk-component-modal/src/BpkModal.js CHANGED Viewed

@@ -19,7 +19,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import { withScrim } from '../../bpk-scrim-utils';
 import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';

package/bpk-component-modal/src/BpkModalInner.js CHANGED Viewed

@@ -19,7 +19,7 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node, type Element } from 'react';
+import type { Node, Element } from 'react';
 import { BpkButtonLink } from '../../bpk-component-link';
 import BpkCloseButton from '../../bpk-component-close-button';

package/bpk-component-navigation-bar/README.md CHANGED Viewed

@@ -11,7 +11,6 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ### BpkNavigationBar
 ```js
-import React from 'react';
 import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
 import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
@@ -55,7 +54,6 @@ export default () => (
 ### BpkNavigationBarIconButton
 ```js
-import React from 'react';
 import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-left';
 import { BpkNavigationBarIconButton } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
@@ -86,7 +84,6 @@ export default () => (
 ### BpkNavigationBarButtonLink
 ```js
-import React from 'react';
 import { BpkNavigationBarButtonLink } from '@skyscanner/backpack-web/bpk-component-navigation-bar';
 export default () => (

package/bpk-component-navigation-bar/src/BpkNavigationBar.js CHANGED Viewed

@@ -18,7 +18,8 @@
 /* @flow strict */
-import React, { type Node, type Element } from 'react';
+import type { Node, Element } from 'react';
+import { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';
@@ -39,7 +40,7 @@ export type Props = {
 const cloneWithClass = (elem: Element<any>, newStyle: string) => {
   const className = getClassNames(elem.props.className, newStyle);
-  return React.cloneElement(elem, { ...elem.props, className });
+  return cloneElement(elem, { ...elem.props, className });
 };
 const BpkNavigationBar = (props: Props) => {

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type Node } from 'react';
+import type { Node } from 'react';
 import PropTypes from 'prop-types';
 // TODO: close button is not really only a close button, we should rename and update the import here

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js CHANGED Viewed

@@ -18,7 +18,7 @@
 /* @flow strict */
-import React, { type ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import PropTypes from 'prop-types';
 // TODO: close button is not really only a close button, we should rename and update the import here

package/bpk-component-nudger/README.md CHANGED Viewed

@@ -11,7 +11,7 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ### `BpkNudger`
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 import BpkNudger from '@skyscanner/backpack-web/bpk-component-nudger';
@@ -50,7 +50,7 @@ class App extends Component {
 ### `BpkConfigurableNudger`
 ```js
-import React, { Component } from 'react';
+import { Component } from 'react';
 import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
 import { BpkConfigurableNudger } from '@skyscanner/backpack-web/bpk-component-nudger';

package/bpk-component-nudger/src/BpkConfigurableNudger.js CHANGED Viewed

@@ -20,7 +20,6 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React from 'react';
 import BpkButtonSecondary from '../../bpk-component-button/BpkButtonSecondary';
 import BpkButtonSecondaryOnDark from '../../bpk-component-button/BpkButtonSecondaryOnDark';

package/bpk-component-nudger/src/BpkNudger.js CHANGED Viewed

@@ -18,7 +18,6 @@
 /* @flow strict */
-import React from 'react';
 import PropTypes from 'prop-types';
 import { cssModules } from '../../bpk-react-utils';

package/bpk-component-overlay/README.md CHANGED Viewed

@@ -9,9 +9,8 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 ## Usage
 ```js
-import React from 'react';
 import BpkText from '@skyscanner/backpack-web/bpk-component-text';
-import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';
+import BpkOverlay, { OVERLAY_TYPES } from '@skyscanner/backpack-web/bpk-component-overlay';
 export default () => (
   <div>
@@ -44,7 +43,6 @@ export default () => (
 | Property  | PropType | Required | Default Value |
 | --------- | -------- | -------- | ------------- |
 | children | Node | true | - |
-| borderRadiusStyle (deprecated) | BORDER_RADIUS_STYLES | false | BORDER_RADIUS_STYLES.none |
 | className | string | false | null |
 | foregroundContent | Node | false | null |
 | overlayType | oneOf(OVERLAY_TYPES) | false | OVERLAY_TYPES.solid |

package/bpk-component-overlay/index.js CHANGED Viewed

@@ -20,10 +20,9 @@
 import BpkOverlay, {
   OVERLAY_TYPES,
   OVERLAY_LEVELS,
-  BORDER_RADIUS_STYLES,
   type Props as BpkOverlayProps,
 } from './src/BpkOverlay';
 export type { BpkOverlayProps };
 export default BpkOverlay;
-export { OVERLAY_TYPES, OVERLAY_LEVELS, BORDER_RADIUS_STYLES };
+export { OVERLAY_TYPES, OVERLAY_LEVELS };

package/bpk-component-overlay/src/BpkOverlay.js CHANGED Viewed

@@ -18,9 +18,9 @@
 /* @flow strict */
 import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import type { Node } from 'react';
-import { cssModules, deprecated } from '../../bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 import STYLES from './BpkOverlay.module.scss';
@@ -42,14 +42,7 @@ export const OVERLAY_LEVELS = {
   off: 'off',
 };
-// DEPRECATED
-export const BORDER_RADIUS_STYLES = {
-  none: 'none',
-  sm: 'sm',
-};
 export type Props = {
-  borderRadiusStyle: ?$Keys<typeof BORDER_RADIUS_STYLES>,
   children: Node,
   overlayType: ?$Keys<typeof OVERLAY_TYPES>,
   overlayLevel: ?$Keys<typeof OVERLAY_LEVELS>,
@@ -59,7 +52,6 @@ export type Props = {
 const BpkOverlay = (props: Props) => {
   const {
-    borderRadiusStyle,
     children,
     className,
     foregroundContent,
@@ -88,10 +80,6 @@ const BpkOverlay = (props: Props) => {
 BpkOverlay.propTypes = {
   children: PropTypes.node.isRequired,
-  borderRadiusStyle: deprecated(
-    PropTypes.oneOf(Object.keys(BORDER_RADIUS_STYLES)),
-    'This property is deprecated and radius will now be set based on the content. Please remove usage of this property.',
-  ),
   className: PropTypes.string,
   foregroundContent: PropTypes.node,
   overlayType: PropTypes.oneOf(Object.keys(OVERLAY_TYPES)),
@@ -99,7 +87,6 @@ BpkOverlay.propTypes = {
 };
 BpkOverlay.defaultProps = {
-  borderRadiusStyle: null,
   className: null,
   foregroundContent: null,
   overlayType: OVERLAY_TYPES.solid,