-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(Blocks): new Mistica Community Components #770
Merged
Merged
Changes from 30 commits
Commits
Show all changes
33 commits
Select commit
Hold shift + click to select a range
f221837
add: AdvancedSlots
daviteixeira-tlf 01f1f1f
add: slots on index
daviteixeira-tlf 657d79e
add: description on ProgressBlock
daviteixeira-tlf e92fcb9
fix: ValueBlock, InformationBlock and HighlightedValueBlock description
daviteixeira-tlf 6dab710
fix: PR Adjustments
daviteixeira-tlf 18c4037
fix: content name and SimpleBlock linesMax
daviteixeira-tlf 0571f51
fix: ProgressBlock process reverse
daviteixeira-tlf c2b0328
create slider component
brunocezar-tlf 32d9eaa
Merge remote-tracking branch 'origin' into slider-component
brunocezar-tlf 7d74924
correction merger
brunocezar-tlf 69dd26a
Merge branch 'master' of https://github.com/Telefonica/mistica-web
brunocezar-tlf 8d33b9b
fix: SimpleBlock remove truncate
daviteixeira-tlf b605333
Merge branch 'master' of https://github.com/Telefonica/mistica-web
brunocezar-tlf 8d690bf
adjustment for merger with chip
brunocezar-tlf fd5c14e
re-test theme variant
brunocezar-tlf a4abeff
Merge branch 'master' of https://github.com/Telefonica/mistica-web
brunocezar-tlf 74821de
creation blocks story
brunocezar-tlf 2da5a01
Merge branch 'master' into advanced-slots
brunocezar-tlf 41cad13
add blocks storybook
brunocezar-tlf ccbb2f5
fix: align baseline and change name storybook
brunocezar-tlf a1e28a6
add: blocks test-screenshot
brunocezar-tlf c2b6efb
change prop text and value of highligthedvalueblock
brunocezar-tlf a68e536
move files to community
brunocezar-tlf 62178fa
fix: prettier
brunocezar-tlf 648f562
fix: code optimization and adjustment
brunocezar-tlf 5f799cf
fix: rename showstackinggroup and error in storybook
brunocezar-tlf d8205bd
fix: remove arialabel in storybook
brunocezar-tlf de8d12c
fix: code otimization and creation of folder screenshot in community
brunocezar-tlf ec64bb1
fix: prop and validation changes in row highlighted and progress blocks
brunocezar-tlf 7f2c4c9
fix: storybook and test for row block
brunocezar-tlf 2fcaa8b
fix: change props type from number to string
brunocezar-tlf 1970046
fix: blockcontent refining
brunocezar-tlf 0050e59
Add support for multiple lines in description, allowing Array<string>…
atabel File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file added
BIN
+16.4 KB
...napshots__/blocks-screenshot-test-tsx-blocks-highlighted-value-block-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+8.39 KB
...mage_snapshots__/blocks-screenshot-test-tsx-blocks-information-block-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+10.4 KB
...__image_snapshots__/blocks-screenshot-test-tsx-blocks-progress-block-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+24.7 KB
...__image_snapshots__/blocks-screenshot-test-tsx-blocks-progress-block-2-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+20.1 KB
...ts__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+17.8 KB
..._/__image_snapshots__/blocks-screenshot-test-tsx-blocks-simple-block-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+8.49 KB
...__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-value-block-1-snap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
71 changes: 71 additions & 0 deletions
71
src/community/__screenshot_tests__/blocks-screenshot-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,71 @@ | ||
import {openStoryPage, screen} from '../../test-utils'; | ||
|
||
test('Blocks Highlighted Value Block', async () => { | ||
await openStoryPage({id: 'community-blocks--block-highlighted-value', device: 'MOBILE_IOS'}); | ||
|
||
const stepper = await screen.findByTestId('highlighted-value-block'); | ||
|
||
const image = await stepper.screenshot(); | ||
|
||
expect(image).toMatchImageSnapshot(); | ||
}); | ||
|
||
test('Blocks Information Block', async () => { | ||
await openStoryPage({id: 'community-blocks--block-information', device: 'MOBILE_IOS'}); | ||
|
||
const stepper = await screen.findByTestId('information-block'); | ||
|
||
const image = await stepper.screenshot(); | ||
|
||
expect(image).toMatchImageSnapshot(); | ||
}); | ||
|
||
test.each` | ||
stackingGroup | ||
${false} | ${true} | ||
`('Blocks Progress Block', async ({stackingGroup}) => { | ||
await openStoryPage({ | ||
id: 'community-blocks--block-progress', | ||
device: 'MOBILE_IOS', | ||
args: {stackingGroup}, | ||
}); | ||
|
||
const stepper = await screen.findByTestId('progress-block'); | ||
|
||
const image = await stepper.screenshot(); | ||
|
||
expect(image).toMatchImageSnapshot(); | ||
}); | ||
|
||
test('Blocks Row Block', async () => { | ||
await openStoryPage({ | ||
id: 'community-blocks--block-row', | ||
device: 'MOBILE_IOS', | ||
}); | ||
|
||
const stepper = await screen.findByTestId('row-block'); | ||
|
||
const image = await stepper.screenshot(); | ||
|
||
expect(image).toMatchImageSnapshot(); | ||
}); | ||
|
||
test('Blocks Simple Block', async () => { | ||
await openStoryPage({id: 'community-blocks--block-simple', device: 'MOBILE_IOS'}); | ||
|
||
const stepper = await screen.findByTestId('simple-block'); | ||
|
||
const image = await stepper.screenshot(); | ||
|
||
expect(image).toMatchImageSnapshot(); | ||
}); | ||
|
||
test('Blocks Value Block', async () => { | ||
await openStoryPage({id: 'community-blocks--block-value', device: 'MOBILE_IOS'}); | ||
|
||
const stepper = await screen.findByTestId('value-block'); | ||
|
||
const image = await stepper.screenshot(); | ||
|
||
expect(image).toMatchImageSnapshot(); | ||
}); |
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,255 @@ | ||
import * as React from 'react'; | ||
import {Avatar, Image, Box, ResponsiveLayout, StackingGroup, Tag, Stack} from '../..'; | ||
import { | ||
HighlightedValueBlock, | ||
InformationBlock, | ||
ProgressBlock, | ||
RowBlock, | ||
SimpleBlock, | ||
ValueBlock, | ||
} from '../blocks'; | ||
import imgExample from '../../__stories__/images/avatar.jpg'; | ||
|
||
import type {TagType} from '../..'; | ||
|
||
export default { | ||
title: 'Community/Blocks', | ||
parameters: { | ||
fullScreen: true, | ||
}, | ||
}; | ||
|
||
type RowBlockArgs = { | ||
title: string; | ||
description: string; | ||
stackingGroup: boolean; | ||
}; | ||
|
||
export const BlockRow: StoryComponent<RowBlockArgs> = ({title, description, stackingGroup}) => { | ||
return ( | ||
<ResponsiveLayout> | ||
<Box paddingY={24}> | ||
<Stack space={24} dataAttributes={{testid: 'row-block'}}> | ||
<RowBlock | ||
title={title} | ||
stackingGroup={ | ||
stackingGroup ? ( | ||
<StackingGroup | ||
stacked | ||
maxItems={3} | ||
moreItemsStyle={{type: 'circle', size: 40}} | ||
> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
</StackingGroup> | ||
) : undefined | ||
} | ||
/> | ||
<RowBlock title={title} description={description} /> | ||
</Stack> | ||
</Box> | ||
</ResponsiveLayout> | ||
); | ||
}; | ||
|
||
BlockRow.storyName = 'RowBlock'; | ||
BlockRow.args = { | ||
title: 'title', | ||
description: 'description', | ||
stackingGroup: true, | ||
}; | ||
|
||
type SimpleBlockArgs = { | ||
description: string; | ||
}; | ||
|
||
export const BlockSimple: StoryComponent<SimpleBlockArgs> = ({description}) => { | ||
return ( | ||
<ResponsiveLayout> | ||
<Box paddingY={24} dataAttributes={{testid: 'simple-block'}}> | ||
<SimpleBlock description={description} image={<Image height={40} src={imgExample} />} /> | ||
</Box> | ||
</ResponsiveLayout> | ||
); | ||
}; | ||
|
||
BlockSimple.storyName = 'SimpleBlock'; | ||
BlockSimple.args = { | ||
description: 'description', | ||
}; | ||
|
||
type InformationBlockArgs = { | ||
title: string; | ||
description: Array<string>; | ||
value: number; | ||
secondaryValue: number; | ||
}; | ||
|
||
export const BlockInformation: StoryComponent<InformationBlockArgs> = ({ | ||
title, | ||
description, | ||
value, | ||
secondaryValue, | ||
}) => { | ||
return ( | ||
<ResponsiveLayout> | ||
<Box paddingY={24} dataAttributes={{testid: 'information-block'}}> | ||
<InformationBlock | ||
title={title} | ||
description={description} | ||
value={value} | ||
secondaryValue={secondaryValue} | ||
/> | ||
</Box> | ||
</ResponsiveLayout> | ||
); | ||
}; | ||
|
||
BlockInformation.storyName = 'InformationBlock'; | ||
BlockInformation.args = { | ||
title: 'title', | ||
description: ['description'], | ||
value: 20, | ||
secondaryValue: 20, | ||
}; | ||
|
||
type HighlightedValueBlockArgs = { | ||
headline: string; | ||
headlineType: TagType; | ||
|
||
value: number; | ||
text: string; | ||
|
||
secondaryValue: number; | ||
|
||
title: string; | ||
description: Array<string>; | ||
}; | ||
|
||
export const BlockHighlightedValue: StoryComponent<HighlightedValueBlockArgs> = ({ | ||
headline, | ||
headlineType, | ||
value, | ||
text, | ||
secondaryValue, | ||
title, | ||
description, | ||
}) => { | ||
return ( | ||
<ResponsiveLayout> | ||
<Box paddingY={24} dataAttributes={{testid: 'highlighted-value-block'}}> | ||
<HighlightedValueBlock | ||
headline={<Tag type={headlineType}>{headline}</Tag>} | ||
title={title} | ||
description={description} | ||
mainHeading={{value, text}} | ||
secondaryValue={secondaryValue} | ||
/> | ||
</Box> | ||
</ResponsiveLayout> | ||
); | ||
}; | ||
|
||
BlockHighlightedValue.storyName = 'HighlightedValueBlock'; | ||
BlockHighlightedValue.args = { | ||
headline: 'Priority', | ||
headlineType: 'promo', | ||
text: 'text', | ||
value: 20, | ||
secondaryValue: 20, | ||
title: 'title', | ||
description: ['description'], | ||
}; | ||
BlockHighlightedValue.argTypes = { | ||
headlineType: { | ||
options: ['promo', 'active', 'inactive', 'success', 'warning', 'error'], | ||
control: {type: 'select'}, | ||
}, | ||
}; | ||
|
||
type ValueBlockArgs = { | ||
title: string; | ||
value: string; | ||
description: Array<string>; | ||
}; | ||
|
||
export const BlockValue: StoryComponent<ValueBlockArgs> = ({title, value, description}) => { | ||
return ( | ||
<ResponsiveLayout> | ||
<Box paddingY={24} dataAttributes={{testid: 'value-block'}}> | ||
<ValueBlock title={title} description={description} value={value} /> | ||
</Box> | ||
</ResponsiveLayout> | ||
); | ||
}; | ||
|
||
BlockValue.storyName = 'ValueBlock'; | ||
BlockValue.args = { | ||
title: 'title', | ||
description: ['description'], | ||
value: '20', | ||
}; | ||
|
||
type ProgressBlockArgs = { | ||
title: string; | ||
|
||
stackingGroup: boolean; | ||
|
||
progressPercent: number; | ||
reverse: boolean; | ||
|
||
value: number; | ||
text: string; | ||
description: string; | ||
}; | ||
|
||
export const BlockProgress: StoryComponent<ProgressBlockArgs> = ({ | ||
title, | ||
stackingGroup, | ||
progressPercent, | ||
reverse, | ||
value, | ||
text, | ||
description, | ||
}) => { | ||
return ( | ||
<ResponsiveLayout> | ||
<Box paddingY={24} dataAttributes={{testid: 'progress-block'}}> | ||
<ProgressBlock | ||
title={title} | ||
stackingGroup={ | ||
stackingGroup ? ( | ||
<StackingGroup stacked maxItems={3} moreItemsStyle={{type: 'circle', size: 40}}> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
<Avatar size={40} src={imgExample} /> | ||
</StackingGroup> | ||
) : null | ||
} | ||
progressPercent={progressPercent} | ||
reverse={reverse} | ||
heading={{value, text}} | ||
description={description} | ||
/> | ||
</Box> | ||
</ResponsiveLayout> | ||
); | ||
}; | ||
|
||
BlockProgress.storyName = 'ProgressBlock'; | ||
BlockProgress.args = { | ||
title: 'title', | ||
stackingGroup: false, | ||
progressPercent: 20, | ||
reverse: false, | ||
value: 20, | ||
text: 'text', | ||
description: 'description', | ||
}; |
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,12 @@ | ||
import {style} from '@vanilla-extract/css'; | ||
import {sprinkles} from '../sprinkles.css'; | ||
|
||
export const column = sprinkles({ | ||
display: 'flex', | ||
flexDirection: 'column', | ||
}); | ||
|
||
export const rightContent = style({ | ||
paddingLeft: 32, | ||
textAlign: 'right', | ||
}); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not used, right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
in this case the value and text are being used to pass the object with their information in the mainHeadling