@skyscanner/backpack-web 0.0.1 → 0.0.2

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

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import { cssModules } from 'bpk-react-utils';
-import BpkText from 'bpk-component-text';
+import BpkText, { TEXT_STYLES } from 'bpk-component-text';
 import {
   BpkCalendarGrid,
   BpkCalendarGridPropTypes,
@@ -38,8 +38,7 @@ const BpkScrollableCalendarGrid = (props) => {
       <BpkText
         className={getClassName('bpk-scrollable-calendar-grid__title')}
         tagName="h1"
-        textStyle="lg"
-        weight="bold"
+        textStyle={TEXT_STYLES.heading4}
       >
         {props.formatMonth(month)}
       </BpkText>

package/bpk-component-section-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-icon": "^9.2.0",
-    "bpk-component-text": "^6.1.0",
+    "bpk-component-icon": "^9.2.1",
+    "bpk-component-text": "^6.1.1",
     "bpk-mixins": "^26.1.0",
     "bpk-react-utils": "^4.1.0",
     "prop-types": "^15.7.2"

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

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

@@ -21,10 +21,10 @@ 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

@@ -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-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-tooltip/examples.js

@@ -20,7 +20,7 @@
 
 import React from 'react';
 import { withDefaultProps } from 'bpk-react-utils';
-import BpkText from 'bpk-component-text';
+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',
 });
 

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/package.json

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

package/bpk-component-heading/README.md

@@ -1,31 +0,0 @@
-# This component has been deprecated, please use bpk-component-text instead to apply heading styles
-# bpk-component-heading
-
-> Backpack heading component.
-
-## Installation
-
-```sh
-npm install bpk-component-heading --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkHeading from 'bpk-component-heading';
-
-export default () => (
-  <BpkHeading level="h1">My Heading</BpkHeading>
-);
-```
-
-## Props
-
-| Property     | PropType                           | Required | Default Value |
-| ------------ | ---------------------------------- | -------- | ------------- |
-| children     | -                                  | true     | -             |
-| level        | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' | true     | -             |
-| className    | string                             | false    | null          |
-| id           | string                             | false    | null          |
-| bottomMargin | bool                               | false    | true          |

package/bpk-component-heading/examples.js

@@ -1,36 +0,0 @@
-/*
- * 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 React from 'react';
-
-import BpkHeading from './index';
-
-const Examples = () => (
-  <div>
-    <BpkHeading level="h1">Heading 1</BpkHeading>
-    <BpkHeading level="h2">Heading 2</BpkHeading>
-    <BpkHeading level="h3">Heading 3</BpkHeading>
-    <BpkHeading level="h4">Heading 4</BpkHeading>
-    <BpkHeading level="h5">Heading 5</BpkHeading>
-    <BpkHeading level="h6">Heading 6</BpkHeading>
-  </div>
-);
-
-export default Examples;

package/bpk-component-heading/index.js

@@ -1,23 +0,0 @@
-/*
- * 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 component from './src/BpkHeading';
-
-export default component;

package/bpk-component-heading/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "bpk-component-heading",
-  "version": "5.1.0",
-  "description": "Backpack heading component.",
-  "license": "Apache-2.0",
-  "private": true,
-  "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/"
-  },
-  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}

package/bpk-component-heading/src/BpkHeading.js

@@ -1,70 +0,0 @@
-/*
- * 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, { type Node } from 'react';
-import { cssModules } from 'bpk-react-utils';
-
-import STYLES from './BpkHeading.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-type Props = {
-  children: Node,
-  level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6',
-  className: ?string,
-  id: ?string,
-  bottomMargin: boolean,
-};
-
-const BpkHeading = (props: Props) => {
-  const { bottomMargin, children, className, id, level } = props;
-  const classNames = [getClassName(`bpk-heading-${level}`)];
-  const Level = level;
-
-  if (className) {
-    classNames.push(className);
-  }
-  if (!bottomMargin) {
-    classNames.push(getClassName('bpk-heading--no-bottom-margin'));
-  }
-
-  return (
-    <Level className={classNames.join(' ')} id={id}>
-      {children}
-    </Level>
-  );
-};
-
-BpkHeading.propTypes = {
-  children: PropTypes.node.isRequired,
-  level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']).isRequired,
-  className: PropTypes.string,
-  id: PropTypes.string,
-  bottomMargin: PropTypes.bool,
-};
-
-BpkHeading.defaultProps = {
-  className: null,
-  id: null,
-  bottomMargin: true,
-};
-
-export default BpkHeading;

package/bpk-component-heading/src/BpkHeading.module.css

@@ -1,18 +0,0 @@
-/*
- * 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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-heading-h1{font-size:2.5rem;line-height:3rem;font-weight:700}@media (max-width: 32.25rem){.bpk-heading-h1{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-heading-h2{font-size:2rem;line-height:2.5rem;font-weight:700}@media (max-width: 32.25rem){.bpk-heading-h2{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-heading-h3{font-size:1.5rem;line-height:1.75rem;font-weight:700}@media (max-width: 32.25rem){.bpk-heading-h3{font-size:1.25rem;line-height:1.5rem;font-weight:700}}.bpk-heading-h4{font-size:1.25rem;line-height:1.5rem;font-weight:700}@media (max-width: 32.25rem){.bpk-heading-h4{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-heading-h5{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-heading-h6{font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-heading--no-bottom-margin{margin-bottom:0}

package/bpk-component-heading/src/BpkHeading.module.scss

@@ -1,49 +0,0 @@
-/*
- * 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-heading {
-  &-h1 {
-    @include bpk-heading-1;
-  }
-
-  &-h2 {
-    @include bpk-heading-2;
-  }
-
-  &-h3 {
-    @include bpk-heading-3;
-  }
-
-  &-h4 {
-    @include bpk-heading-4;
-  }
-
-  &-h5 {
-    @include bpk-heading-5;
-  }
-
-  &-h6 {
-    @include bpk-heading-6;
-  }
-
-  &--no-bottom-margin {
-    @include bpk-heading--no-bottom-margin;
-  }
-}

package/bpk-component-paragraph/README.md

@@ -1,28 +0,0 @@
-# This component has been deprecated, please use bpk-component-text instead to apply paragraph styles
-# bpk-component-paragraph
-
-> Backpack paragraph component.
-
-## Installation
-
-```sh
-npm install bpk-component-paragraph --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkParagraph from 'bpk-component-paragraph';
-
-export default () => (
-  <BpkParagraph>My paragraph content.</BpkParagraph>
-)
-```
-
-## Props
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| className | string   | false    | null          |

package/bpk-component-paragraph/examples.js

@@ -1,46 +0,0 @@
-/*
- * 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 React from 'react';
-
-import BpkParagraph from './index';
-
-const DefaultExample = () => (
-  <div>
-    <BpkParagraph>
-      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-      ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-      dis parturient montes, nascetur ridiculus mus.
-    </BpkParagraph>
-    <BpkParagraph>
-      Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla
-      consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
-      vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis
-      vitae, justo.
-    </BpkParagraph>
-    <BpkParagraph>
-      Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras
-      dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
-      Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
-    </BpkParagraph>
-  </div>
-);
-
-export default DefaultExample;

package/bpk-component-paragraph/index.js

@@ -1,23 +0,0 @@
-/*
- * 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 component from './src/BpkParagraph';
-
-export default component;

package/bpk-component-paragraph/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "bpk-component-paragraph",
-  "version": "3.1.0",
-  "description": "Backpack paragraph component.",
-  "license": "Apache-2.0",
-  "private": true,
-  "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/"
-  },
-  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}