@skyscanner/backpack-web 0.0.1 → 0.0.4

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

@@ -20,9 +20,9 @@
 
 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,8 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkText, { WEIGHT_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';
 
@@ -39,9 +39,7 @@ const BpkSectionListSection = (props: Props) => {
     <section {...rest}>
       {headerText && (
         <header className={getClassName('bpk-section-list-section__header')}>
-          <BpkText weight={WEIGHT_STYLES.bold} textStyle="base">
-            {headerText}
-          </BpkText>
+          <BpkText textStyle={TEXT_STYLES.label1}>{headerText}</BpkText>
         </header>
       )}
       <ul className={getClassName('bpk-section-list-section')}>

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

@@ -19,7 +19,7 @@
 
 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,7 @@
 
 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/examples.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { updateOnDirectionChange } from 'bpk-component-rtl-toggle';
+import { updateOnDirectionChange } from '../../bpk-component-rtl-toggle';
 
 import BpkSlider from './index';
 
@@ -51,15 +51,15 @@ class SliderContainer extends Component {
       <div>
         {this.state.value.length
           ? this.valueComponent(
-              this.state.value[0],
-              this.state.value[1],
-              time && this.valueTimeFormatter,
-            )
+            this.state.value[0],
+            this.state.value[1],
+            time && this.valueTimeFormatter,
+          )
           : this.valueComponent(
-              min,
-              this.state.value,
-              time && this.valueTimeFormatter,
-            )}
+            min,
+            this.state.value,
+            time && this.valueTimeFormatter,
+          )}
         <BpkSlider
           min={min}
           max={time ? 59 : 100}

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

@@ -19,7 +19,7 @@
 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/SpinnerLayout.js

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

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

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

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

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

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

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

package/bpk-component-star-rating/examples.js

@@ -27,7 +27,7 @@ import {
   BpkTableCell,
   BpkTableHead,
   BpkTableHeadCell,
-} from 'bpk-component-table';
+} from '../../bpk-component-table';
 
 import BpkInteractiveStarRating from './src/BpkInteractiveStarRating';
 import withInteractiveStarRatingState from './src/withInteractiveStarRatingState';

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^9.2.0",
+    "bpk-component-icon": "^9.2.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2"

package/bpk-component-star-rating/src/BpkInteractiveStar.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import { BpkStarNonRtl, STAR_TYPES } from './BpkStar';
 import STYLES from './BpkInteractiveStar.module.scss';

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import { STAR_TYPES } from './BpkStar';
 import BpkInteractiveStar from './BpkInteractiveStar';

package/bpk-component-star-rating/src/BpkStar.js

@@ -20,14 +20,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import SmallIcon from 'bpk-component-icon/sm/star';
-import LargeIcon from 'bpk-component-icon/lg/star';
-import OutlineSmallIcon from 'bpk-component-icon/sm/star-outline';
-import OutlineLargeIcon from 'bpk-component-icon/lg/star-outline';
-import HalfSmallIcon from 'bpk-component-icon/sm/star-half';
-import HalfLargeIcon from 'bpk-component-icon/lg/star-half';
-import { withRtlSupport } from 'bpk-component-icon';
-import { cssModules } from 'bpk-react-utils';
+import SmallIcon from '../../bpk-component-icon/sm/star';
+import LargeIcon from '../../bpk-component-icon/lg/star';
+import OutlineSmallIcon from '../../bpk-component-icon/sm/star-outline';
+import OutlineLargeIcon from '../../bpk-component-icon/lg/star-outline';
+import HalfSmallIcon from '../../bpk-component-icon/sm/star-half';
+import HalfLargeIcon from '../../bpk-component-icon/lg/star-half';
+import { withRtlSupport } from '../../bpk-component-icon';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkStar.module.scss';
 

package/bpk-component-star-rating/src/BpkStarRating.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from 'bpk-react-utils';
+import { cssModules } from '../../bpk-react-utils';
 
 import BpkStar, { STAR_TYPES } from './BpkStar';
 import STYLES from './BpkStarRating.module.scss';
@@ -53,9 +53,9 @@ type Props = {
   maxRating: number,
   rating: number,
   rounding:
-    | typeof ROUNDING_TYPES.down
-    | typeof ROUNDING_TYPES.up
-    | typeof ROUNDING_TYPES.nearest,
+  | typeof ROUNDING_TYPES.down
+  | typeof ROUNDING_TYPES.up
+  | typeof ROUNDING_TYPES.nearest,
 };
 
 const BpkStarRating = (props: Props) => {

package/bpk-component-star-rating/src/withInteractiveStarRatingState.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component, type ComponentType } from 'react';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 const withInteractiveStarRatingState = (
   InteractiveStarRating: ComponentType<any>,

package/bpk-component-switch/src/BpkSwitch.js

@@ -19,7 +19,7 @@
 
 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 './BpkSwitch.module.scss';
 

package/bpk-component-table/src/BpkTable.js

@@ -20,7 +20,7 @@
 
 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 './BpkTable.module.scss';
 

package/bpk-component-table/src/BpkTableCell.js

@@ -20,7 +20,7 @@
 
 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 './BpkTable.module.scss';
 

package/bpk-component-table/src/BpkTableHeadCell.js

@@ -20,7 +20,7 @@
 
 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 './BpkTable.module.scss';
 

package/bpk-component-text/examples.js

@@ -17,14 +17,14 @@
  */
 
 import React from 'react';
-import { withDefaultProps } from 'bpk-react-utils';
+import { withDefaultProps } from '../bpk-react-utils';
 
 import STYLE from './examples.module.scss';
 
-import BpkText from './index';
+import BpkText, { TEXT_STYLES } from './index';
 
 const Paragraph = withDefaultProps(BpkText, {
-  textStyle: 'body-longform',
+  textStyle: TEXT_STYLES.bodyLongform,
   tagName: 'p',
   className: STYLE['bpk-my-paragraph'],
 });
@@ -40,32 +40,32 @@ const DefaultExample = () => (
 
 const WithHeadingTagsExample = () => (
   <div>
-    <BpkText textStyle="subheading" tagName="h1">
+    <BpkText textStyle={TEXT_STYLES.subheading} tagName="h1">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="body-longform" tagName="h2">
+    <BpkText textStyle={TEXT_STYLES.bodyLongform} tagName="h2">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="label-1" tagName="h3">
+    <BpkText textStyle={TEXT_STYLES.label1} tagName="h3">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="body-default" tagName="h3">
+    <BpkText textStyle={TEXT_STYLES.bodyDefault} tagName="h3">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="label-2" tagName="h4">
+    <BpkText textStyle={TEXT_STYLES.label2} tagName="h4">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="footnote" tagName="h5">
+    <BpkText textStyle={TEXT_STYLES.footnote} tagName="h5">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="caption" tagName="h6">
+    <BpkText textStyle={TEXT_STYLES.caption} tagName="h6">
       The quick brown fox jumps over the lazy dog
     </BpkText>
   </div>
 );
 
 const ParagraphExample = () => (
-  <BpkText textStyle="body-default" tagName="p">
+  <BpkText textStyle={TEXT_STYLES.bodyDefault} tagName="p">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
     imperdiet lobortis tellus, non rhoncus erat tincidunt id. Pellentesque
     consectetur, dolor nec vulputate vehicula, ex metus mattis ante, non dictum
@@ -92,25 +92,25 @@ const WithDefaultProps = () => (
 
 const HeadingStylesExample = () => (
   <div>
-    <BpkText textStyle="hero-4" tagName="h5">
+    <BpkText textStyle={TEXT_STYLES.hero4} tagName="h5">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="hero-5" tagName="h6">
+    <BpkText textStyle={TEXT_STYLES.hero5} tagName="h6">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="heading-1" tagName="h1">
+    <BpkText textStyle={TEXT_STYLES.heading1} tagName="h1">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="heading-2" tagName="h4">
+    <BpkText textStyle={TEXT_STYLES.heading2} tagName="h4">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="heading-3" tagName="h2">
+    <BpkText textStyle={TEXT_STYLES.heading3} tagName="h2">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="heading-4" tagName="h6">
+    <BpkText textStyle={TEXT_STYLES.heading4} tagName="h6">
       The quick brown fox jumps over the lazy dog
     </BpkText>
-    <BpkText textStyle="heading-5" tagName="h4">
+    <BpkText textStyle={TEXT_STYLES.heading5} tagName="h4">
       The quick brown fox jumps over the lazy dog
     </BpkText>
   </div>

package/bpk-component-text/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-text",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Backpack text component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-text/src/BpkText.js

@@ -20,7 +20,7 @@
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import STYLES from './BpkText.module.scss';
 
@@ -140,7 +140,7 @@ BpkText.propTypes = {
 };
 
 BpkText.defaultProps = {
-  textStyle: TEXT_STYLES.base,
+  textStyle: TEXT_STYLES.bodyDefault,
   tagName: 'span',
   className: null,
   bold: null,

package/bpk-component-textarea/examples.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import { action } from 'bpk-storybook-utils';
-import BpkLabel from 'bpk-component-label';
+import BpkLabel from '../../bpk-component-label';
 
 import BpkTextarea from './index';
 

package/bpk-component-textarea/src/BpkTextarea.js

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

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -18,9 +18,9 @@
 
 import React from 'react';
 import Konami from 'konami';
-import BpkLabel from 'bpk-component-label';
-import BpkSelect from 'bpk-component-select';
-import { cssModules } from 'bpk-react-utils';
+import BpkLabel from '../../bpk-component-label';
+import BpkSelect from '../../bpk-component-select';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkThemeToggle.module.scss';
 import bpkCustomThemes from './theming';

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -18,7 +18,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { wrapDisplayName } from 'bpk-react-utils';
+import { wrapDisplayName } from '../../bpk-react-utils';
 
 import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
 

package/bpk-component-ticket/examples.js

@@ -20,10 +20,10 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from 'bpk-react-utils';
-import BpkButton from 'bpk-component-button';
-import ArrowRightIcon from 'bpk-component-icon/sm/long-arrow-right';
-import { withButtonAlignment, withRtlSupport } from 'bpk-component-icon';
+import { cssModules } from '../bpk-react-utils';
+import BpkButton from '../../bpk-component-button';
+import ArrowRightIcon from '../../bpk-component-icon/sm/long-arrow-right';
+import { withButtonAlignment, withRtlSupport } from '../../bpk-component-icon';
 
 import STYLES from './examples.module.scss';
 

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,6 +23,6 @@
   },
   "devDependencies": {
     "bpk-component-button": "^5.1.0",
-    "bpk-component-icon": "^9.2.0"
+    "bpk-component-icon": "^9.2.1"
   }
 }

package/bpk-component-ticket/src/BpkTicket.js

@@ -20,7 +20,7 @@
 
 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 './BpkTicket.module.scss';
 
@@ -93,13 +93,13 @@ const BpkTicket = (props: Props) => {
   const punchlineClassNames = getClassName(
     'bpk-ticket__punchline',
     vertical &&
-      (withNotches
-        ? 'bpk-ticket__punchline--horizontal-with-notches'
-        : 'bpk-ticket__punchline--horizontal'),
+    (withNotches
+      ? 'bpk-ticket__punchline--horizontal-with-notches'
+      : 'bpk-ticket__punchline--horizontal'),
     !vertical &&
-      (withNotches
-        ? 'bpk-ticket__punchline--vertical-with-notches'
-        : 'bpk-ticket__punchline--vertical'),
+    (withNotches
+      ? 'bpk-ticket__punchline--vertical-with-notches'
+      : 'bpk-ticket__punchline--vertical'),
   );
 
   const startNotchClassNames = getClassName(

package/bpk-component-tooltip/examples.js

@@ -19,8 +19,8 @@
 /* @flow strict */
 
 import React from 'react';
-import { withDefaultProps } from 'bpk-react-utils';
-import BpkText from 'bpk-component-text';
+import { withDefaultProps } from '../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import {
   spacingSm,
   colorMonteverde,
@@ -35,7 +35,7 @@ const wrapperStyle = {
 };
 
 const Heading = withDefaultProps(BpkText, {
-  textStyle: 'lg',
+  textStyle: TEXT_STYLES.bodyLongform,
   tagName: 'h4',
 });
 
@@ -157,7 +157,7 @@ const FocusExample = () => (
     >
       Should be focused on third
     </BpkTooltip>
-    <button type="button" onClick={() => {}}>
+    <button type="button" onClick={() => { }}>
       Four
     </button>
     <BpkTooltip

package/bpk-component-tooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-tooltip",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "description": "Backpack tooltip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-text": "^6.1.0"
+    "bpk-component-text": "^6.1.1"
   }
 }

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -26,7 +26,7 @@ The actual component that developers create (i.e. the default export from this p
 
 import PropTypes from 'prop-types';
 import React, { type Node } from 'react';
-import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+import { TransitionInitialMount, cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkTooltip.module.scss';
 import { ARROW_ID, TOOLTIP_TYPES } from './constants';

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -21,7 +21,7 @@
 import Popper from '@skyscanner/popper.js';
 import PropTypes from 'prop-types';
 import React, { Component, type Node, type Element } from 'react';
-import { Portal, cssModules } from 'bpk-react-utils';
+import { Portal, cssModules } from '../../bpk-react-utils';
 
 import BpkTooltip, {
   propTypes as tooltipPropTypes,

package/bpk-scrim-utils/src/BpkScrim.js

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

package/bpk-scrim-utils/src/withScrim.js

@@ -25,7 +25,7 @@ import {
   isDeviceIpad,
   isDeviceIphone,
   wrapDisplayName,
-} from 'bpk-react-utils';
+} from '../../bpk-react-utils';
 
 import BpkScrim from './BpkScrim';
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -47,4 +47,4 @@
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   }
-}
+}