[CYB-2251][Snippet] Add new Snippet component (#3531)

* [CYB-2251][Snippet] Add new Snippet component

* add vertical style for web

* Add radius style and update stories

* fix comments

* replace img with bpkimage

* update

* update as comments

* update

* update example

examples/bpk-component-snippet/examples.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 BpkSnippet, {
+  BODY_STYLE,
+  DESKTOP_LAYOUT,
+  IMAGE_ORIENTATION,
+} from '../../packages/bpk-component-snippet';
+import BpkText, {
+  TEXT_STYLES,
+} from '../../packages/bpk-component-text/src/BpkText';
+
+const props = {
+  src: 'https://content.skyscnr.com/m/f427e62297cce49/original/edinburgh-view-from-calton-hill.jpg',
+  altText: 'image description',
+  headline: 'Title of the section',
+  subheading: 'Subheading',
+  bodyText:
+    'Lorem ipsum dolor sit amet consectetur. Tristique at pharetra tincidunt elementum vulputate varius sit euismod hac. Dignissim hendrerit enim eros nisi diam. Elit arcu mattis cum in id varius vitae augue neque. Quisque in semper malesuada lacus ut etiam elementum.',
+  buttonText: 'Call to Action',
+  onClick: () => window.open('https://www.skyscanner.net/flights', '_blank'),
+};
+
+const DesktopExample = () => (
+  <div>
+    <div style={{ paddingBottom: '2rem' }}>
+      <BpkText textStyle={TEXT_STYLES.heading2}>Default Desktop</BpkText>
+      <BpkSnippet {...props} />
+    </div>
+    <div style={{ paddingBottom: '2rem' }}>
+      <BpkText textStyle={TEXT_STYLES.heading2}>Desktop square</BpkText>
+      <BpkSnippet {...props} imageOrientation={IMAGE_ORIENTATION.square} />
+    </div>
+    <div style={{ paddingBottom: '2rem' }}>
+      <BpkText textStyle={TEXT_STYLES.heading2}>Desktop Radius off</BpkText>
+      <BpkSnippet {...props} imageRadius={false} />
+    </div>
+    <div style={{ paddingBottom: '2rem' }}>
+      <BpkText textStyle={TEXT_STYLES.heading2}>Desktop Reverse</BpkText>
+      <BpkSnippet {...props} desktopLayout={DESKTOP_LAYOUT.imageRight} />
+    </div>
+    <div style={{ paddingBottom: '2rem' }}>
+      <BpkText textStyle={TEXT_STYLES.heading2}>Desktop bodyLongform</BpkText>
+      <BpkSnippet {...props} bodyStyle={BODY_STYLE.bodyLongform} />
+    </div>
+    <div style={{ paddingBottom: '2rem', width: '33.33%' }}>
+      <BpkText textStyle={TEXT_STYLES.heading2}>Desktop Vertical</BpkText>
+      <BpkSnippet {...props} desktopLayout={DESKTOP_LAYOUT.vertical} />
+    </div>
+    <div style={{ paddingBottom: '2rem' }}>
+      <BpkText textStyle={TEXT_STYLES.heading2}>Desktop Empty Content</BpkText>
+      <BpkSnippet {...props} />
+    </div>
+  </div>
+);
+
+const MobileLandscapeExample = () => (
+  <BpkSnippet {...props} imageOrientation={IMAGE_ORIENTATION.landscape} />
+);
+
+const MobileSquareExample = () => (
+  <BpkSnippet {...props} imageOrientation={IMAGE_ORIENTATION.square} />
+);
+
+const MobilePortraitExample = () => (
+  <BpkSnippet {...props} imageOrientation={IMAGE_ORIENTATION.portrait} />
+);
+
+export {
+  DesktopExample,
+  MobileLandscapeExample,
+  MobileSquareExample,
+  MobilePortraitExample,
+};

examples/bpk-component-snippet/stories.tsx

@@ -0,0 +1,77 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 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 { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import BpkSnippet from '../../packages/bpk-component-snippet';
+
+import {
+  DesktopExample,
+  MobileLandscapeExample,
+  MobileSquareExample,
+  MobilePortraitExample
+} from './examples';
+
+import type { StoryObj } from '@storybook/react';
+
+export default {
+  title: 'bpk-component-snippet',
+  component: BpkSnippet,
+};
+
+export const Desktop = DesktopExample;
+
+type Story = StoryObj;
+
+export const MobileLandscape: Story = {
+  render: () => <MobileLandscapeExample />,
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'iphone6',
+    },
+  },
+};
+
+export const MobileSquare: Story = {
+  render: () => <MobileSquareExample />,
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'iphone6',
+    },
+  },
+};
+
+export const MobilePortrait: Story = {
+  render: () => <MobilePortraitExample />,
+  parameters: {
+    viewport: {
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: 'iphone6',
+    },
+  },
+};
+
+export const VisualTest = DesktopExample;
+export const VisualTestWithZoom = {
+  render: VisualTest,
+  args: {
+    zoomEnabled: true
+  }
+}

packages/bpk-component-snippet/README.md

@@ -0,0 +1,24 @@
+# bpk-component-snippet
+
+> Backpack snippet component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+### Desktop
+
+```ts
+import BpkSnippet from '@skyscanner/backpack-web/bpk-component-snippet';
+
+<BpkSnippet
+  src='https://content.skyscnr.com/m/f427e62297cce49/original/edinburgh-view-from-calton-hill.jpg',
+  altText='image description',
+/>
+```
+
+## Props
+
+Check out the full list of props on Skyscanner's design system [documentation website](https://www.skyscanner.design/latest/components/snippet/compose-CaNywPG3).

packages/bpk-component-snippet/index.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 BpkSnippet, {
+  BODY_STYLE,
+  BUTTON_STYLE,
+  DESKTOP_LAYOUT,
+  HEADLINE_STYLE,
+  IMAGE_ORIENTATION,
+} from './src/BpkSnippet';
+
+export default BpkSnippet;
+export {
+  BODY_STYLE,
+  BUTTON_STYLE,
+  DESKTOP_LAYOUT,
+  HEADLINE_STYLE,
+  IMAGE_ORIENTATION,
+};

packages/bpk-component-snippet/src/BpkSnippet-test.tsx

@@ -0,0 +1,64 @@
+/*
+ * 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 { render, screen } from '@testing-library/react';
+
+import BpkSnippet, { DESKTOP_LAYOUT } from './BpkSnippet';
+
+const props = {
+  src: 'https://content.skyscnr.com/m/f427e62297cce49/original/edinburgh-view-from-calton-hill.jpg',
+  altText: 'image description',
+  headline: 'Title of the section',
+  subheading: 'Subheading',
+  bodyText: 'Lorem ipsum dolor sit amet consectetur.',
+  buttonText: 'Call to Action',
+  onClick: () => window.open('https://www.skyscanner.net/flights', '_blank'),
+};
+
+describe('BpkSnippet', () => {
+  it('should render desktop correctly', () => {
+    const { container } = render(<BpkSnippet {...props} />);
+    expect(container.querySelectorAll('.bpk-snippet--image').length).toBe(1);
+    expect(screen.getByText('Title of the section')).toBeVisible();
+    expect(screen.getByText('Subheading')).toBeInTheDocument();
+    expect(
+      screen.getByText('Lorem ipsum dolor sit amet consectetur.'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Call to Action')).toBeInTheDocument();
+  });
+
+  it('should render desktop reverse correctly', () => {
+    const { container } = render(
+      <BpkSnippet {...props} desktopLayout={DESKTOP_LAYOUT.imageRight} />,
+    );
+    expect(container.querySelectorAll('.bpk-snippet--image').length).toBe(1);
+    expect(container.querySelectorAll('.bpk-snippet--row-reverse').length).toBe(
+      1,
+    );
+  });
+
+  it('should render desktop vertical correctly', () => {
+    const { container } = render(
+      <BpkSnippet {...props} desktopLayout={DESKTOP_LAYOUT.vertical} />,
+    );
+    expect(container.querySelectorAll('.bpk-snippet--image').length).toBe(1);
+    expect(container.querySelectorAll('.bpk-snippet--vertical').length).toBe(
+      1,
+    );
+  });
+});

packages/bpk-component-snippet/src/BpkSnippet.module.scss

@@ -0,0 +1,91 @@
+/*
+ * 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.
+ */
+
+@use '../../unstable__bpk-mixins/breakpoints';
+@use '../../unstable__bpk-mixins/tokens';
+@use '../../unstable__bpk-mixins/typography';
+
+.bpk-snippet {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  @include breakpoints.bpk-breakpoint-small-tablet {
+    flex-direction: column;
+    gap: tokens.bpk-spacing-base();
+  }
+
+  &--row-reverse {
+    flex-direction: row-reverse;
+
+    @include breakpoints.bpk-breakpoint-small-tablet {
+      flex-direction: column;
+      gap: tokens.bpk-spacing-base();
+    }
+  }
+
+  &--vertical {
+    flex-direction: column;
+    gap: tokens.bpk-spacing-base();
+
+    &--container {
+      width: 100%;
+    }
+
+    &--content {
+      padding: 0;
+    }
+  }
+
+  &--container {
+    width: 50%;
+
+    @include breakpoints.bpk-breakpoint-small-tablet {
+      width: 100%;
+    }
+  }
+
+  &--image {
+    img {
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &--content {
+    display: flex;
+    padding: tokens.bpk-spacing-xxxl();
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+
+    @include breakpoints.bpk-breakpoint-small-tablet {
+      padding: 0;
+    }
+  }
+
+  &--headline,
+  &--subheading,
+  &--bodyText {
+    padding-bottom: tokens.bpk-spacing-base();
+
+    @include breakpoints.bpk-breakpoint-small-tablet {
+      padding-bottom: tokens.bpk-spacing-md();
+    }
+  }
+}