@skyscanner/backpack-web 3.0.0 → 3.2.0

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

@@ -18,6 +18,6 @@
 
 /* @flow strict */
 
-import { secondaryThemeAttributes as themeAttributes } from 'bpk-component-button/themeAttributes';
+import { secondaryThemeAttributes as themeAttributes } from '../../bpk-component-button/themeAttributes';
 
 export default themeAttributes;

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

@@ -19,7 +19,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkOverlay.module.scss';
 

package/bpk-component-pagination/src/BpkPagination.js

@@ -18,7 +18,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationList from './BpkPaginationList';
 import BpkPaginationNudger from './BpkPaginationNudger';

package/bpk-component-pagination/src/BpkPaginationList.js

@@ -18,7 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkPaginationPage from './BpkPaginationPage';
 import BpkPaginationBreak from './BpkPaginationBreak';

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -18,10 +18,11 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
-import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
-import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
+
+import { cssModules } from '../../bpk-react-utils';
+import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
+import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
 
 import STYLES from './BpkPaginationNudger.module.scss';
 

package/bpk-component-pagination/src/BpkPaginationPage.js

@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import BpkButton from 'bpk-component-button';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import BpkButton from '../../bpk-component-button';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPaginationPage.module.scss';
 

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

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { secondaryThemeAttributes } from 'bpk-component-button';
+import { secondaryThemeAttributes } from '../../bpk-component-button';
 
 export default [
   ...secondaryThemeAttributes,

package/bpk-component-panel/src/BpkPanel.js

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

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -20,10 +20,11 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
-import BpkInput, { INPUT_TYPES } from 'bpk-component-input';
-import BpkLabel from 'bpk-component-label';
-import BpkSelect from 'bpk-component-select';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkInput, { INPUT_TYPES } from '../../bpk-component-input';
+import BpkLabel from '../../bpk-component-label';
+import BpkSelect from '../../bpk-component-select';
 
 import STYLES from './BpkPhoneInput.module.scss';
 

package/bpk-component-popover/src/BpkPopover.js

@@ -20,10 +20,11 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
-import { BpkButtonLink } from 'bpk-component-link';
-import BpkCloseButton from 'bpk-component-close-button';
-import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+import { BpkButtonLink } from '../../bpk-component-link';
+import BpkCloseButton from '../../bpk-component-close-button';
+import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkPopover.module.scss';
 import { ARROW_ID } from './constants';

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -22,7 +22,8 @@ import { createPopper, basePlacements } from '@popperjs/core';
 import PropTypes from 'prop-types';
 import React, { Component, type Node } from 'react';
 import focusStore from 'a11y-focus-store';
-import { Portal, cssModules } from 'bpk-react-utils';
+
+import { Portal, cssModules } from '../../bpk-react-utils';
 
 import keyboardFocusScope from './keyboardFocusScope';
 import STYLES from './BpkPopover.module.scss';

package/bpk-component-popover/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-price/README.md

@@ -0,0 +1,35 @@
+# bpk-component-price
+
+> Backpack example component.
+
+## Installation
+
+```sh
+npm install bpk-component-price --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkPrice, { SIZES } from 'bpk-component-price';
+
+export default () => (
+  <BpkPrice
+    size={SIZES.large}
+    subtitle="£209"
+    title="£1,830"
+    description="/ night"
+  />
+);
+```
+
+## Props
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| title     | string   | true     | -             |
+| size | oneOf(SIZES)   | false    | SIZES.small         |
+| subtitle  | string   | false    | null          |
+| description | string   | false    | null          |
+| className | string   | false    | null          |

package/bpk-component-price/index.js

@@ -0,0 +1,23 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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 BpkPrice, { SIZES } from './src/BpkPrice';
+
+export default BpkPrice;
+export { SIZES };

package/bpk-component-price/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-price",
+  "version": "1.0.0",
+  "description": "Backpack price 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-text": "^7.0.4",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-price/src/BpkPrice.js

@@ -0,0 +1,106 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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, { TEXT_STYLES } from '../../bpk-component-text';
+
+import STYLES from './BpkPrice.module.scss';
+
+export const SIZES = {
+  small: 'small',
+  large: 'large',
+};
+
+type Props = {
+  title: string,
+  size: $Values<typeof SIZES>,
+  className: ?string,
+  subtitle: ?string,
+  description: ?string,
+};
+
+const getClassName = cssModules(STYLES);
+
+const BpkPrice = (props: Props) => {
+  const { className, description, size, subtitle, title, ...rest } = props;
+
+  const isSmall = size === SIZES.small;
+
+  return (
+    <div
+      className={getClassName(
+        'bpk-price',
+        isSmall && 'bpk-price--small',
+        className,
+      )}
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      {...rest}
+    >
+      {subtitle && (
+        <BpkText
+          className={getClassName('bpk-price__subtitle')}
+          textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+          tagName="span"
+        >
+          {subtitle}
+        </BpkText>
+      )}
+      <div className={isSmall && getClassName('bpk-price__titleColumn')}>
+        <BpkText
+          textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
+          tagName="span"
+        >
+          {title}
+        </BpkText>
+        {description && (
+          <BpkText
+            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+            tagName="span"
+            className={getClassName(
+              'bpk-price__description',
+              !isSmall && 'bpk-price__descriptionSpacing',
+            )}
+          >
+            {description}
+          </BpkText>
+        )}
+      </div>
+    </div>
+  );
+};
+
+BpkPrice.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  className: PropTypes.string,
+  subtitle: PropTypes.string,
+  description: PropTypes.string,
+};
+
+BpkPrice.defaultProps = {
+  size: SIZES.small,
+  className: null,
+  subtitle: null,
+  description: null,
+};
+
+export default BpkPrice;

package/bpk-component-price/src/BpkPrice.module.scss

@@ -0,0 +1,55 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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';
+
+.bpk-price {
+  display: flex;
+  flex-direction: column;
+
+  &--small {
+    text-align: right;
+
+    @include bpk-rtl {
+      text-align: left;
+    }
+  }
+
+  &__subtitle {
+    color: $bpk-color-sky-gray-tint-02;
+    text-decoration-line: line-through;
+  }
+
+  &__titleColumn {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__description {
+    color: $bpk-color-sky-gray-tint-02;
+
+    &Spacing {
+      margin-left: bpk-spacing-sm();
+
+      @include bpk-rtl {
+        margin-right: bpk-spacing-sm();
+        margin-left: unset;
+      }
+    }
+  }
+}

package/bpk-component-progress/src/BpkProgress.js

@@ -22,7 +22,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import clamp from 'lodash.clamp';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkProgress.module.scss';
 

package/bpk-component-radio/src/BpkRadio.js

@@ -20,7 +20,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkRadio.module.scss';
 

package/bpk-component-rating/src/BpkRating.js

@@ -20,8 +20,9 @@
 import React, { type Node } from 'react';
 import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkRating.module.scss';
 import { RATING_SIZES, RATING_SCALES } from './common-types';

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

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

package/bpk-component-rtl-toggle/src/updateOnDirectionChange.js

@@ -17,7 +17,8 @@
  */
 
 import React, { Component } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 import { getHtmlElement, DIRECTION_CHANGE_EVENT } from './utils';
 

package/bpk-component-scrollable-calendar/index.js

@@ -17,7 +17,7 @@
  */
 /* @flow strict */
 
-import { CALENDAR_SELECTION_TYPE } from 'bpk-component-calendar';
+import { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
 
 import BpkScrollableCalendar from './src/BpkScrollableCalendar';
 import BpkScrollableCalendarDate from './src/BpkScrollableCalendarDate';

package/bpk-component-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.15",
+  "version": "6.1.16",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendar.js

@@ -21,7 +21,7 @@ import {
   BpkCalendarGridHeader,
   withCalendarState,
   composeCalendar,
-} from 'bpk-component-calendar';
+} from '../../bpk-component-calendar';
 
 import BpkscrollableCalendarDate from './BpkScrollableCalendarDate';
 import BpkScrollableCalendarGridList from './BpkScrollableCalendarGridList';

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarDate.js

@@ -18,10 +18,11 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+
 import {
   BpkCalendarDate,
   BpkCalendarDatePropTypes,
-} from 'bpk-component-calendar';
+} from '../../bpk-component-calendar';
 
 class BpkScrollableCalendarDate extends PureComponent {
   render() {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -17,12 +17,13 @@
  */
 
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import {
   BpkCalendarGrid,
   BpkCalendarGridPropTypes,
-} from 'bpk-component-calendar';
+} from '../../bpk-component-calendar';
 
 import STYLES from './BpkScrollableCalendarGrid.module.scss';
 

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js

@@ -18,8 +18,6 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
-import { DateUtils, BpkCalendarGridPropTypes } from 'bpk-component-calendar';
 import { startOfDay, startOfMonth } from 'date-fns';
 import {
   AutoSizer,
@@ -28,6 +26,12 @@ import {
   CellMeasurerCache,
 } from 'react-virtualized';
 
+import { cssModules, deprecated } from '../../bpk-react-utils';
+import {
+  DateUtils,
+  BpkCalendarGridPropTypes,
+} from '../../bpk-component-calendar';
+
 import STYLES from './BpkScrollableCalendarGridList.module.scss';
 import BpkScrollableCalendarGrid from './BpkScrollableCalendarGrid';
 import getMonthsArray from './utils';

package/bpk-component-scrollable-calendar/src/utils.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { DateUtils } from 'bpk-component-calendar';
+import { DateUtils } from '../../bpk-component-calendar';
 
 const getMonthsArray = (startDate, count) => {
   const months = [];

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkLargeChevronRightIcon from 'bpk-component-icon/lg/chevron-right';
-import { withRtlSupport } from 'bpk-component-icon';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkLargeChevronRightIcon from '../../bpk-component-icon/lg/chevron-right';
+import { withRtlSupport } from '../../bpk-component-icon';
 
 import STYLES from './BpkSectionListItem.module.scss';
 

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -20,8 +20,9 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { TEXT_STYLES } from 'bpk-component-text';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkSectionListSection.module.scss';
 

package/bpk-component-select/src/BpkSelect.js

@@ -19,7 +19,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
-import { cssModules } from 'bpk-react-utils';
+
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkSelect.module.scss';
 

package/bpk-component-skip-link/src/BpkSkipLink.js

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

package/bpk-component-slider/src/BpkSlider.js

@@ -19,7 +19,8 @@
 import React from 'react';
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';
-import { cssModules, isRTL } from 'bpk-react-utils';
+
+import { cssModules, isRTL } from '../../bpk-react-utils';
 
 import STYLES from './BpkSlider.module.scss';
 

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -20,9 +20,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
 import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkLargeSpinner.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
 import LgSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/lg';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';
 

package/bpk-component-spinner/src/BpkSpinner.js

@@ -20,9 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
 import SmSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/sm';
 
+import { cssModules } from '../../bpk-react-utils';
+
 import STYLES from './BpkSpinner.module.scss';
 import SPINNER_TYPES from './spinnerTypes';