[MAT-1205] [BpkSkeleton] Add new component - bpk-component-skeleton (#…

…3337)

* implement skeleton

* add declare file

* [MAT-1241] add test files (#3340)

* add test file

* add accessibility test

---------

Co-authored-by: Felix luo <felix.luo@skyscanner.net>

* update examples and stories (#3341)

Co-authored-by: Felix luo <felix.luo@skyscanner.net>

* update readme file (#3342)

Co-authored-by: Felix luo <felix.luo@skyscanner.net>

* add role for base skeleton component

* optimize code and remove visual test

* update lint

* add a combined component example

* Refactored the code (#3352)

Co-authored-by: Felix luo <felix.luo@skyscanner.net>

* rename className to skeletonStyle

* update test

* update scss

* update examples

* use vertical style on examples

* remove ariaLabel, simplify bpkskeleton and categorize types

* update readme

* change the declare of default value

---------

Co-authored-by: Felix luo <felix.luo@skyscanner.net>

README.md

@@ -75,6 +75,7 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 [`bpk-component-section-header`](/packages/bpk-component-section-header)
 [`bpk-component-section-list`](/packages/bpk-component-section-list)
 [`bpk-component-select`](/packages/bpk-component-select)
+[`bpk-component-skeleton`](/packages/bpk-component-skeleton)
 [`bpk-component-slider`](/packages/bpk-component-slider)
 [`bpk-component-spinner`](/packages/bpk-component-spinner)
 [`bpk-component-star-rating`](/packages/bpk-component-star-rating)

examples/bpk-component-skeleton/examples.module.scss

@@ -0,0 +1,56 @@
+/*
+ * 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 '../../packages/unstable__bpk-mixins/tokens';
+
+@mixin flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.bpk-image-skeleton-layout {
+  @include flex-column;
+
+  > div {
+    margin-bottom: tokens.bpk-spacing-base();
+  }
+}
+
+.bpk-body-text-skeleton-layout {
+  @include flex-column;
+
+  > div {
+    margin-bottom: tokens.bpk-spacing-base() * 0.5;
+  }
+}
+
+.bpk-circle-skeleton-layout {
+  @include flex-column;
+
+  > div {
+    margin-bottom: 24 * tokens.$bpk-one-pixel-rem;
+  }
+}
+
+.bpk-headline-skeleton-layout {
+  @include flex-column;
+
+  > div {
+    margin-bottom: 14 * tokens.$bpk-one-pixel-rem;
+  }
+}

examples/bpk-component-skeleton/examples.tsx

@@ -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.
+ */
+
+import BpkSkeleton, {
+  SKELETON_TYPES,
+  SIZE_TYPES, 
+  IMAGE_SKELETON_STYLE 
+} from '../../packages/bpk-component-skeleton';
+import { cssModules } from '../../packages/bpk-react-utils';
+
+import STYLES from './examples.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const ImageDefaultSizeWithDefaultStyleExample = () => <BpkSkeleton type={SKELETON_TYPES.image} />
+const ImageDefaultSizeWithRoundedStyleExample = () => <BpkSkeleton type={SKELETON_TYPES.image} style={IMAGE_SKELETON_STYLE.rounded} />
+
+const BodyTextSmallSizeExample = () => <BpkSkeleton type={SKELETON_TYPES.bodyText} size={SIZE_TYPES.small} />
+const BodyTextDefaultSizeExample = () => <BpkSkeleton type={SKELETON_TYPES.bodyText} size={SIZE_TYPES.default} />
+const BodyTextLargeSizeExample = () => <BpkSkeleton type={SKELETON_TYPES.bodyText} size={SIZE_TYPES.large} />
+
+const CircleSmallSizeExample = () => <BpkSkeleton type={SKELETON_TYPES.circle} size={SIZE_TYPES.small} />;
+const CircleDefaultSizeExample = () => <BpkSkeleton type={SKELETON_TYPES.circle} />;
+
+const HeadlineSmallSizeExample = () => <BpkSkeleton type={SKELETON_TYPES.headline} size={SIZE_TYPES.small} />
+const HeadlineDefaultSizeExample = () => <BpkSkeleton type={SKELETON_TYPES.headline} size={SIZE_TYPES.default} />
+const HeadlineLargeSizeExample = () => <BpkSkeleton type={SKELETON_TYPES.headline} size={SIZE_TYPES.large} />
+
+const ImageSkeletonExample = () => 
+  <div className={getClassName('bpk-image-skeleton-layout')}>
+    <ImageDefaultSizeWithRoundedStyleExample />
+    <ImageDefaultSizeWithDefaultStyleExample />
+  </div>
+
+const BodyTextSkeletonExample = () => 
+  <div className={getClassName('bpk-body-text-skeleton-layout')}>
+    <BodyTextDefaultSizeExample />
+    <BodyTextLargeSizeExample />
+    <BodyTextSmallSizeExample />
+  </div>
+
+const CircleSkeletonExample = () => 
+  <div className={getClassName('bpk-circle-skeleton-layout')}>
+    <CircleSmallSizeExample />
+    <CircleDefaultSizeExample />
+  </div>
+
+const HeadlineSkeletonExample = () => 
+  <div className={getClassName('bpk-headline-skeleton-layout')}>
+    <HeadlineSmallSizeExample />
+    <HeadlineDefaultSizeExample />
+    <HeadlineLargeSizeExample />
+  </div>
+
+const CombinedComponentExample = () => 
+  <div>
+    <div>
+      <h2>ImageSkeleton</h2>
+      <ImageSkeletonExample />
+    </div>
+
+    <div>
+      <h2>HeadlineSkeleton</h2>
+      <HeadlineSkeletonExample />
+    </div>
+
+    <div>
+      <h2>CircleSkeleton</h2>
+      <CircleSkeletonExample />
+    </div>
+
+    <div>
+      <h2>BodyTextSkeleton</h2>
+      <BodyTextSkeletonExample />
+    </div>
+  </div>
+
+export {
+  ImageSkeletonExample,
+  BodyTextSkeletonExample,
+  CircleSkeletonExample,
+  HeadlineSkeletonExample,
+  CombinedComponentExample,
+};

examples/bpk-component-skeleton/stories.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 BpkSkeleton from '../../packages/bpk-component-skeleton';
+
+import {
+  ImageSkeletonExample,
+  BodyTextSkeletonExample,
+  CircleSkeletonExample,
+  HeadlineSkeletonExample,
+  CombinedComponentExample,
+} from './examples';
+
+export default {
+  title: 'bpk-component-skeleton',
+  component: BpkSkeleton,
+};
+
+
+export const ImageSkeleton = ImageSkeletonExample;
+export const BodyTextSkeleton = BodyTextSkeletonExample;
+export const CircleSkeleton = CircleSkeletonExample;
+export const HeadlineSkeleton = HeadlineSkeletonExample;
+
+export const CombinedComponent = CombinedComponentExample;

packages/bpk-component-skeleton/README.md

@@ -0,0 +1,24 @@
+# bpk-component-skeleton
+
+> Backpack skeleton component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import BpkSkeleton, {
+  SKELETON_TYPES,
+  SIZE_TYPES, 
+  IMAGE_SKELETON_STYLE 
+} from '../../packages/bpk-component-skeleton';
+
+export default () => (
+  <div>
+    <BpkSkeleton type={SKELETON_TYPES.image} size={{width: '7rem', height: '6rem'}} style={IMAGE_SKELETON_STYLE.rounded} />
+    <BpkSkeleton type={SKELETON_TYPES.bodyText} size={SIZE_TYPES.small} />
+  </div>
+);
+```

packages/bpk-component-skeleton/index.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 BpkSkeleton from "./src/BpkSkeleton";
+
+export { SIZE_TYPES, SKELETON_TYPES, IMAGE_SKELETON_STYLE } from './src/common-types';
+export default BpkSkeleton;

packages/bpk-component-skeleton/src/BpkBaseSkeleton-test.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 } from '@testing-library/react';
+
+import '@testing-library/jest-dom';
+import BpkBaseSkeleton from './BpkBaseSkeleton';
+
+describe('BpkBaseSkeleton', () => {
+  it('renders with default props', () => {
+    const { container } = render(<BpkBaseSkeleton skeletonStyle="custom-class" />);
+    const skeletonElement = container.querySelector('.bpk-skeleton');
+    expect(skeletonElement).toBeInTheDocument();
+    expect(skeletonElement).toHaveAttribute('class', 'bpk-skeleton custom-class');
+  });
+
+  it('renders with custom styles when provided', () => {
+    const customStyles = { width: '100px', height: '50px' };
+    const { container } = render(<BpkBaseSkeleton skeletonStyle="custom-class" styleObj={customStyles} />);
+    const skeletonElement = container.querySelector('.bpk-skeleton');
+    expect(skeletonElement).toBeInTheDocument();
+    expect(skeletonElement).toHaveStyle('width: 100px; height: 50px;');
+  });
+});

packages/bpk-component-skeleton/src/BpkBaseSkeleton.d.tsx

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+type Props = {
+  skeletonStyle: string;
+  styleObj?: {
+    width: string;
+    height: string;
+  };
+};
+
+declare const BpkBaseSkeleton: ({
+  skeletonStyle,
+  styleObj
+ }: Props) => JSX.Element;
+
+export default BpkBaseSkeleton;

packages/bpk-component-skeleton/src/BpkBaseSkeleton.module.scss

@@ -0,0 +1,49 @@
+/*
+ * 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/tokens';
+@use '../../unstable__bpk-mixins/utils';
+
+.bpk-skeleton {
+  width: tokens.$bpk-one-pixel-rem * 96;
+  height: tokens.$bpk-one-pixel-rem * 96;
+  background: tokens.$bpk-surface-highlight-day;
+  background-image: linear-gradient(
+    to right,
+    tokens.$bpk-private-skeleton-shimmer-start-end-day 7.08%,
+    tokens.$bpk-private-skeleton-shimmer-center-day 49.22%,
+    tokens.$bpk-private-skeleton-shimmer-start-end-day 100%
+  );
+  background-repeat: no-repeat;
+  animation: shimmer-animation tokens.$bpk-duration-base * 4 infinite linear;
+  animation-direction: normal;
+
+  @include utils.bpk-rtl {
+    animation-direction: reverse;
+  }
+}
+
+@keyframes shimmer-animation {
+  0% {
+    background-position: -24rem 0;
+  }
+
+  100% {
+    background-position: 24rem 0;
+  }
+}