@skyscanner/backpack-web 9.2.0-beta.2 → 9.3.0

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -18,11 +18,13 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { cssModules, deprecated, isDeviceIos } from 'bpk-react-utils';
+
+import { cssModules, deprecated, isDeviceIos } from '../../bpk-react-utils';
 
 import BpkCalendarGridHeader from './BpkCalendarGridHeader';
 import Week from './Week';
 import {
+  addMonths,
   formatIsoDate,
   getCalendarMonthWeeks,
   isSameMonth,
@@ -198,8 +200,8 @@ BpkCalendarGrid.defaultProps = {
   isKeyboardFocusable: true,
   markOutsideDays: true,
   markToday: true,
-  maxDate: null,
-  minDate: null,
+  maxDate: addMonths(new Date(), 12),
+  minDate: new Date(),
   onDateClick: null,
   onDateKeyDown: null,
   preventKeyboardFocus: false,

package/bpk-component-calendar/src/BpkCalendarGridHeader.js

@@ -18,7 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
+
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import CustomPropTypes from './custom-proptypes';
 import { orderDaysOfWeek } from './date-utils';

package/bpk-component-calendar/src/BpkCalendarGridTransition.js

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

package/bpk-component-calendar/src/BpkCalendarNav.js

@@ -18,11 +18,12 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import ArrowLeftIcon from 'bpk-component-icon/lg/arrow-left';
-import ArrowRightIcon from 'bpk-component-icon/lg/arrow-right';
-import BpkSelect from 'bpk-component-select';
-import { cssModules } from 'bpk-react-utils';
-import BpkAriaLive from 'bpk-component-aria-live';
+
+import ArrowLeftIcon from '../../bpk-component-icon/lg/arrow-left';
+import ArrowRightIcon from '../../bpk-component-icon/lg/arrow-right';
+import BpkSelect from '../../bpk-component-select';
+import { cssModules } from '../../bpk-react-utils';
+import BpkAriaLive from '../../bpk-component-aria-live';
 
 import {
   addMonths,

package/bpk-component-calendar/src/Week.js

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

package/bpk-component-calendar/src/composeCalendar.js

@@ -18,7 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules, deprecated } from 'bpk-react-utils';
+
+import { cssModules, deprecated } from '../../bpk-react-utils';
 
 import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
 import STYLES from './BpkCalendar.module.scss';

package/bpk-component-card/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-card",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Backpack card component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-link": "^4.0.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-link": "^4.0.2",
+    "bpk-component-text": "^8.0.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-card/src/BpkCard.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 './BpkCard.module.scss';
 

package/bpk-component-checkbox/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-checkbox",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Backpack checkbox component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-storybook-utils": "^2.0.1"
+    "@skyscanner/bpk-foundations-web": "^9.0.0",
+    "bpk-storybook-utils": "^2.0.2"
   }
 }

package/bpk-component-checkbox/src/BpkCheckbox.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 './BpkCheckbox.module.scss';
 

package/bpk-component-chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,7 +23,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^3.0.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-aria-live": "^3.0.2",
+    "bpk-component-text": "^8.0.2"
   }
 }

package/bpk-component-chip/src/BpkDismissibleChip.js

@@ -25,7 +25,8 @@ of a close icon.
 */
 
 import React from 'react';
-import CloseCircleIconSm from 'bpk-component-icon/sm/close-circle';
+
+import CloseCircleIconSm from '../../bpk-component-icon/sm/close-circle';
 
 import BpkSelectableChip from './BpkSelectableChip';
 import {

package/bpk-component-chip/src/BpkSelectableChip.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 './BpkSelectableChip.module.scss';
 import {

package/bpk-component-close-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-close-button",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Backpack close button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,13 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.2",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-storybook-utils": "^2.0.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-close-button/src/BpkCloseButton.js

@@ -20,8 +20,9 @@
 
 import PropTypes from 'prop-types';
 import React, { type StatelessFunctionalComponent } from 'react';
-import CloseIcon from 'bpk-component-icon/sm/close';
-import { cssModules } from 'bpk-react-utils';
+
+import CloseIcon from '../../bpk-component-icon/sm/close';
+import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkCloseButton.module.scss';
 

package/bpk-component-code/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-code",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Backpack code component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.5.0",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-code/src/BpkCode.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 './BpkCode.module.scss';
 

package/bpk-component-code/src/BpkCodeBlock.js

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

package/bpk-component-content-cards/README.md

@@ -0,0 +1,43 @@
+# BpkContentCards
+
+> Backpack example component.
+
+- [Storybook link](https://backpack.github.io/storybook)
+- [Content Cards Docs](backpack.github.io/components/content-cards)
+
+## Installation
+
+```sh
+npm install bpk-component-content-cards --save-dev
+```
+
+## Usage
+
+```tsx
+import React from 'react';
+import BpkContentCards from '@skyscanner/backpack-web/bpk-component-content-cards';
+
+<BpkContentCards
+    heading='Heading'
+    cards=[
+        {
+            image: {
+                url: 'http://skyscanner.net/card-1-image-link.jpg',
+                alt: 'People surfing in the ocean',
+            },
+            headline: 'Card headline',
+            description: 'Card description',
+            href: 'http://skyscanner.net/card-1-cta-link.html',
+        },
+    ]
+/>
+
+export default () => <BpkContentCards />;
+```
+
+## Props
+
+| Property                                                                                                         | PropType                                                                                                           | Required                                                                                               | Default Value |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | ------------- |
+| heading                                                                                                          | string                                                                                                             | true                                                                                                   |               |
+| cards <ul><li>image</li><ul><li>url</li><li>alt</li></ul><li>headline</li><li>description</li><li>href</li></ul> | Array <ul><li>Object</li><ul><li>string</li><li>string</li></ul><li>string</li><li>string</li><li>string</li></ul> | true <ul><li>true</li><ul><li>true</li><li>false</li></ul><li>true</li><li>true</li><li>true</li></ul> | ""            |

package/bpk-component-content-cards/index.ts

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

package/bpk-component-content-cards/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "bpk-component-content-cards",
+  "version": "1.0.0",
+  "description": "Backpack content-cards component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.ts",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "bpk-component-text": "^8.0.2",
+    "bpk-mixins": "^31.1.6",
+    "bpk-react-utils": "^7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

package/bpk-component-content-cards/src/BpkContentCard/BpkContentCard-test.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import BpkContentCard from './BpkContentCard';
+
+describe('Content Card widget', () => {
+  const horizontalCardTestProps: React.ComponentProps<typeof BpkContentCard> = {
+    card: {
+      image: {
+        url: 'http://skyscanner.net/card-1-image-link.jpg',
+        alt: 'People surfing in the ocean',
+      },
+      headline: 'Card 1 headline',
+      description: 'Card 1 description',
+      href: 'http://skyscanner.net/card-1-cta-link.html',
+    },
+    layout: 'HORIZONTAL',
+  };
+
+  const verticalCardTestProps: React.ComponentProps<typeof BpkContentCard> = {
+    card: {
+      image: {
+        url: 'http://skyscanner.net/card-1-image-link.jpg',
+        alt: 'People surfing in the ocean',
+      },
+      headline: 'Card 1 headline',
+      description: 'Card 1 description',
+      href: 'http://skyscanner.net/card-1-cta-link.html',
+    },
+    layout: 'VERTICAL',
+  };
+
+  it('renders horizontal card correctly', async () => {
+    const { asFragment } = render(
+      <BpkContentCard
+        card={horizontalCardTestProps.card}
+        layout={horizontalCardTestProps.layout}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders vertical card correctly', async () => {
+    const { asFragment } = render(
+      <BpkContentCard
+        card={verticalCardTestProps.card}
+        layout={verticalCardTestProps.layout}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('renders the headline and the description for the card', async () => {
+    render(
+      <BpkContentCard
+        card={horizontalCardTestProps.card}
+        layout={horizontalCardTestProps.layout}
+      />,
+    );
+
+    const expectedElements = ['Card 1 headline', 'Card 1 description'];
+
+    expectedElements.forEach((element) =>
+      expect(screen.getByText(element)).toBeVisible(),
+    );
+  });
+});

package/bpk-component-content-cards/src/BpkContentCard/BpkContentCard.module.scss

@@ -0,0 +1,87 @@
+/*
+ * 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-spacing-v2: true;
+
+.bpk-content-card {
+  &--link {
+    color: inherit;
+    font: inherit;
+    text-decoration: inherit;
+  }
+
+  &--horizontal {
+    display: grid;
+    column-gap: bpk-spacing-xxl();
+    grid-template-columns: minmax(min(10%, 50%), $bpk-one-pixel-rem * 620) 40%;
+    align-items: center;
+
+    @include bpk-breakpoint-mobile {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  &--horizontal &--image-container {
+    width: 100%;
+    height: $bpk-one-pixel-rem * 420;
+
+    @include bpk-breakpoint-mobile {
+      max-height: $bpk-one-pixel-rem * 180;
+      margin-bottom: bpk-spacing-base();
+    }
+
+    @include bpk-breakpoint-tablet {
+      height: 100%;
+    }
+  }
+
+  &--vertical &--image {
+    height: $bpk-one-pixel-rem * 460;
+    margin-bottom: bpk-spacing-base();
+
+    @include bpk-breakpoint-small-tablet {
+      width: 100%;
+      height: auto;
+      max-height: $bpk-one-pixel-rem * 260;
+    }
+
+    @include bpk-breakpoint-mobile {
+      max-height: $bpk-one-pixel-rem * 180;
+    }
+  }
+
+  &--headline {
+    margin-bottom: $bpk-heading-margin-bottom;
+
+    @include bpk-heading-4;
+  }
+
+  &--description {
+    color: $bpk-color-sky-gray-tint-02;
+
+    @include bpk-body-default;
+  }
+
+  &--image {
+    width: 100%;
+    height: 100%;
+    border-radius: $bpk-border-radius-md;
+    object-fit: cover;
+  }
+}

package/bpk-component-content-cards/src/BpkContentCard/BpkContentCard.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 React from 'react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkText from '../../../bpk-component-text';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { cssModules } from '../../../bpk-react-utils';
+
+import STYLES from './BpkContentCard.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type CardLayout = 'HORIZONTAL' | 'VERTICAL';
+
+type Props = {
+  card: {
+    image: {
+      url: string;
+      alt?: string;
+    };
+    headline: string;
+    description: string;
+    href: string;
+  };
+  layout: CardLayout;
+};
+
+const BpkContentCard = ({ card, layout }: Props) => (
+  <a
+    className={getClassName(
+      'bpk-content-card--link',
+      layout === 'HORIZONTAL'
+        ? 'bpk-content-card--horizontal'
+        : 'bpk-content-card--vertical',
+    )}
+    href={card.href}
+    target="_blank"
+    rel="noreferrer"
+  >
+    <div className={getClassName('bpk-content-card--image-container')}>
+      {/* eslint-disable-next-line jsx-a11y/img-redundant-alt */}
+      <img
+        className={getClassName('bpk-content-card--image')}
+        alt={card.image.alt || ''}
+        src={card.image.url}
+        loading="lazy"
+      />
+    </div>
+
+    <div>
+      <BpkText
+        className={getClassName('bpk-content-card--headline')}
+        tagName="h3"
+      >
+        {card.headline}
+      </BpkText>
+      <BpkText
+        className={getClassName('bpk-content-card--description')}
+        tagName="p"
+      >
+        {card.description}
+      </BpkText>
+    </div>
+  </a>
+);
+
+export default BpkContentCard;

package/bpk-component-content-cards/src/BpkContentCard/index.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+export { default } from './BpkContentCard';