feat: add bpk v2 for experiment

examples/bpk-component-price-v2/examples.js

@@ -0,0 +1,160 @@
+/*
+ * 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 { SIZES, ALIGNS, BpkPriceV2 } from '../../packages/bpk-component-price';
+
+const SmallExample = () => <BpkPriceV2 price="£1,830" />;
+
+const SmallWithTrailingTextExample = () => (
+  <BpkPriceV2 price="£1,830" trailingText="per day" />
+);
+
+const SmallWithLeadingAndTrailingTextExample = () => (
+  <BpkPriceV2 leadingText="from" price="£1,830" trailingText="per day" />
+);
+
+const SmallWithPreviousPriceExample = () => (
+  <BpkPriceV2 previousPrice="£2,033" price="£1,830" trailingText="per day" />
+);
+
+const SmallWithPreviousPriceLeadingTextExample = () => (
+  <BpkPriceV2
+    previousPrice="£2,033"
+    leadingText="Web only deal"
+    price="£1,830"
+    trailingText="per day"
+  />
+);
+
+const SmallRightExample = () => (
+  <BpkPriceV2 price="£1,830" align={ALIGNS.right} />
+);
+
+const SmallRightWithTrailingTextExample = () => (
+  <BpkPriceV2 price="£1,830" trailingText="per day" align={ALIGNS.right} />
+);
+
+const SmallRightWithLeadingandTrailingTextExample = () => (
+  <BpkPriceV2
+    leadingText="from"
+    price="£1,830"
+    trailingText="per day"
+    align={ALIGNS.right}
+  />
+);
+
+const SmallRightWithPreviousPriceExample = () => (
+  <BpkPriceV2
+    previousPrice="£2,033"
+    leadingText="Web only deal"
+    price="£1,830"
+    trailingText="per day"
+    align={ALIGNS.right}
+  />
+);
+
+const LargeExample = () => <BpkPriceV2 size={SIZES.large} price="£1,830" />;
+
+const LargeWithTrailingTextExample = () => (
+  <BpkPriceV2 size={SIZES.large} price="£1,830" trailingText="per day" />
+);
+
+const LargeWithLeadingAndTrailingTextExample = () => (
+  <BpkPriceV2
+    size={SIZES.large}
+    leadingText="from"
+    price="£1,830"
+    trailingText="per day"
+  />
+);
+
+const LargeWithPreviousPriceExample = () => (
+  <BpkPriceV2
+    size={SIZES.large}
+    price="£1,830"
+    trailingText="per day"
+    previousPrice="£2,033"
+  />
+);
+
+const LargeWithPreviousPriceLeadingTextExample = () => (
+  <BpkPriceV2
+    size={SIZES.large}
+    leadingText="App only deal"
+    price="£1,830"
+    trailingText="per day"
+    previousPrice="£2,033"
+  />
+);
+
+const LargeLongPriceExample = () => (
+  // eslint-disable-next-line backpack/use-tokens
+  <div style={{ width: 184 }}>
+    <BpkPriceV2
+      size={SIZES.large}
+      leadingText="from"
+      price="£1,830,123,123"
+      trailingText="per day"
+    />
+    <BpkPriceV2
+      size={SIZES.large}
+      leadingText="from"
+      price="ZK 20,309"
+      trailingText="a night"
+    />
+  </div>
+);
+
+const MixedExample = () => (
+  <div>
+    <SmallExample />
+    <SmallWithTrailingTextExample />
+    <SmallWithLeadingAndTrailingTextExample />
+    <SmallWithPreviousPriceExample />
+    <SmallWithPreviousPriceLeadingTextExample />
+    <SmallRightExample />
+    <SmallRightWithTrailingTextExample />
+    <SmallRightWithLeadingandTrailingTextExample />
+    <SmallRightWithPreviousPriceExample />
+    <LargeExample />
+    <LargeWithTrailingTextExample />
+    <LargeWithLeadingAndTrailingTextExample />
+    <LargeWithPreviousPriceExample />
+    <LargeWithPreviousPriceLeadingTextExample />
+    <LargeLongPriceExample />
+  </div>
+);
+
+export {
+  SmallExample,
+  SmallWithTrailingTextExample,
+  SmallWithLeadingAndTrailingTextExample,
+  SmallWithPreviousPriceExample,
+  SmallWithPreviousPriceLeadingTextExample,
+  SmallRightExample,
+  SmallRightWithTrailingTextExample,
+  SmallRightWithLeadingandTrailingTextExample,
+  SmallRightWithPreviousPriceExample,
+  LargeExample,
+  LargeWithTrailingTextExample,
+  LargeWithLeadingAndTrailingTextExample,
+  LargeWithPreviousPriceExample,
+  LargeWithPreviousPriceLeadingTextExample,
+  LargeLongPriceExample,
+  MixedExample,
+};

examples/bpk-component-price-v2/stories.js

@@ -0,0 +1,70 @@
+/*
+ * 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 BpkPriceV2 from '../../packages/bpk-component-price/src/BpkPriceV2/BpkPrice';
+
+import {
+  SmallExample,
+  SmallWithTrailingTextExample,
+  SmallWithLeadingAndTrailingTextExample,
+  SmallWithPreviousPriceExample,
+  SmallWithPreviousPriceLeadingTextExample,
+  SmallRightExample,
+  SmallRightWithTrailingTextExample,
+  SmallRightWithLeadingandTrailingTextExample,
+  SmallRightWithPreviousPriceExample,
+  LargeExample,
+  LargeWithTrailingTextExample,
+  LargeWithLeadingAndTrailingTextExample,
+  LargeWithPreviousPriceExample,
+  LargeWithPreviousPriceLeadingTextExample,
+  LargeLongPriceExample,
+  MixedExample,
+} from './examples';
+
+export default {
+  title: 'bpk-component-price-v2',
+  component: BpkPriceV2,
+};
+
+export const Small = SmallExample;
+export const SmallWithTrailingText = SmallWithTrailingTextExample;
+export const SmallWithLeadingAndTrailingText =
+  SmallWithLeadingAndTrailingTextExample;
+export const SmallWithPreviousPrice = SmallWithPreviousPriceExample;
+export const SmallWithPreviousPriceLeadingText =
+  SmallWithPreviousPriceLeadingTextExample;
+export const SmallRight = SmallRightExample;
+export const SmallRightWithTrailingText = SmallRightWithTrailingTextExample;
+export const SmallRightWithLeadingandTrailingText =
+  SmallRightWithLeadingandTrailingTextExample;
+export const SmallRightWithPreviousPrice = SmallRightWithPreviousPriceExample;
+export const Large = LargeExample;
+export const LargeWithTrailingText = LargeWithTrailingTextExample;
+export const LargeWithLeadingAndTrailingText =
+  LargeWithLeadingAndTrailingTextExample;
+export const LargeWithPreviousPrice = LargeWithPreviousPriceExample;
+export const LargeWithPreviousPriceLeadingText =
+  LargeWithPreviousPriceLeadingTextExample;
+export const LargeLongPrice = LargeLongPriceExample;
+
+export const VisualTest = MixedExample;
+export const VisualTestWithZoom = VisualTest.bind({});
+VisualTestWithZoom.args = {
+  zoomEnabled: true,
+};

packages/bpk-component-price/index.js

@@ -17,8 +17,9 @@
  */
 /* @flow strict */
 
+import BpkPriceV2 from './src/BpkPriceV2/BpkPrice';
 import BpkPrice from './src/BpkPrice';
 import { SIZES, ALIGNS } from './src/common-types';
 
 export default BpkPrice;
-export { SIZES, ALIGNS };
+export { SIZES, ALIGNS, BpkPriceV2 };

packages/bpk-component-price/src/BpkPriceV2/BpkPrice-test.js

@@ -0,0 +1,99 @@
+/*
+ * 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 { render } from '@testing-library/react';
+
+import BpkPrice from './BpkPrice';
+import { ALIGNS, SIZES } from './common-types';
+
+const price = '£1,830';
+const previousPrice = '£2,000';
+const leadingText = 'from';
+const trailingText = 'per day';
+let props;
+
+describe.each([
+  [SIZES.small, ALIGNS.left],
+  [SIZES.large, ALIGNS.left],
+  [SIZES.small, ALIGNS.right],
+])(`%s %s view`, (size, align) => {
+  beforeEach(() => {
+    props = {
+      price,
+      size,
+      align,
+    };
+  });
+
+  it('should render correctly', () => {
+    const { asFragment } = render(<BpkPrice {...props} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support trailing text attribute', () => {
+    const { asFragment } = render(
+      <BpkPrice {...props} trailingText={trailingText} />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support leading text attribute', () => {
+    const { asFragment } = render(
+      <BpkPrice {...props} leadingText={leadingText} />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support previous price attribute', () => {
+    const { asFragment } = render(
+      <BpkPrice
+        {...props}
+        previousPrice={previousPrice}
+        trailingText={trailingText}
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support previous price with leading text attribute', () => {
+    const { asFragment } = render(
+      <BpkPrice
+        {...props}
+        previousPrice={previousPrice}
+        leadingText={leadingText}
+        trailingText={trailingText}
+      />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support custom class names', () => {
+    const { asFragment } = render(
+      <BpkPrice {...props} className="custom-classname" />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should support custom leading class names', () => {
+    const { asFragment } = render(
+      <BpkPrice {...props} leadingClassName="leading-classname" />,
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});