-
Notifications
You must be signed in to change notification settings - Fork 184
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[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>
- Loading branch information
1 parent
af5e312
commit 594f25a
Showing
17 changed files
with
749 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
39 changes: 39 additions & 0 deletions
39
packages/bpk-component-skeleton/src/BpkBaseSkeleton-test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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;'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
49 changes: 49 additions & 0 deletions
49
packages/bpk-component-skeleton/src/BpkBaseSkeleton.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} |
Oops, something went wrong.