Skip to content

Commit

Permalink
feat(InfoSheet): update styles and allow adding a button to the conte…
Browse files Browse the repository at this point in the history 
…nt (#1294)

Issue: [Link](https://jira.tid.es/browse/WEB-2095)
  • Loading branch information
@marcoskolodny
marcoskolodny authored Nov 25, 2024
1 parent 15b798c commit c4a0749
Show file tree
Hide file tree
Showing 14 changed files with 128 additions and 55 deletions.
4 changes: 4 additions & 0 deletions src/__private_stories__/sheet-presets-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,13 +215,15 @@ ActionsList.argTypes = {

type InfoSheetArgs = SheetArgs & {
numItems: number;
buttonText: string;
iconType: 'bullet' | 'regular' | 'small';
};

export const Info: StoryComponent<InfoSheetArgs> = ({
title,
subtitle,
description,
buttonText,
multiparagraphDescription,
numItems,
iconType,
Expand All @@ -246,6 +248,7 @@ export const Info: StoryComponent<InfoSheetArgs> = ({
onClose={() => {
setOpen(false);
}}
button={buttonText ? {text: buttonText} : undefined}
title={title}
subtitle={subtitle}
description={
Expand Down Expand Up @@ -276,6 +279,7 @@ Info.storyName = 'InfoSheet';
Info.args = {
title: 'Title',
subtitle: 'Subtitle',
buttonText: '',
description: 'Description',
numItems: 5,
iconType: 'bullet',
Expand Down
Binary file modified .../__image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-desktop-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...image_snapshots__/sheet-screenshot-test-tsx-info-sheet-in-mobile-ios-1-snap.png
View file
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 .../sheet-screenshot-test-tsx-info-sheet-with-dismiss-button-in-desktop-1-snap.png
View file
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 ...eet-screenshot-test-tsx-info-sheet-with-dismiss-button-in-mobile-ios-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...-screenshot-test-tsx-info-sheet-with-multiple-description-paragraphs-1-snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 17 additions & 0 deletions src/__screenshot_tests__/sheet-screenshot-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,23 @@ test('InfoSheet with multiple description paragraphs', async () => {
expect(image).toMatchImageSnapshot();
});

test.each(TESTABLE_DEVICES)('InfoSheet with dismiss button in %s', async (device) => {
const page = await openStoryPage({
id: 'private-sheet-presets--info',
device,
args: {buttonText: 'Dismiss'},
});

const button = await screen.findByRole('button', {name: 'Open'});
await button.click();

await screen.findByRole('dialog');

const image = await page.screenshot();

expect(image).toMatchImageSnapshot();
});

test.each(TESTABLE_DEVICES_WITH_LARGE_DESKTOP)('ActionsSheet in %s', async (device) => {
const page = await openStoryPage({
id: 'private-sheet-presets--actions',
Expand Down
1 change: 1 addition & 0 deletions src/__stories__/sheet-story.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ export const ShowSheet: StoryComponent<ShowSheetArgs> = ({
},
},
],
button: {text: 'Dismiss'},
},
}).then((response) => {
setOpenDialogType(undefined);
Expand Down
4 changes: 2 additions & 2 deletions src/__tests__/sheet-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ test('showSheet INFO', async () => {
{timeout: 5000}
);

expect(resultSpy).toHaveBeenCalledWith(undefined);
expect(resultSpy).toHaveBeenCalledWith({action: 'DISMISS'});
}, 30000);

test('showSheet ACTIONS_LIST', async () => {
Expand Down Expand Up @@ -593,7 +593,7 @@ test('showSheet fails if there is already a sheet open', async () => {
test('showSheet with native implementation INFO', async () => {
const resultSpy = jest.fn();

const nativeImplementation = jest.fn();
const nativeImplementation = jest.fn(() => Promise.resolve({action: 'DISMISS' as const, result: []}));
render(
<ThemeContextProvider theme={makeTheme()}>
<SheetRoot nativeImplementation={nativeImplementation} />
Expand Down
12 changes: 12 additions & 0 deletions src/sheet-info.css.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,15 @@ export const infoItemIcon = sprinkles({
alignItems: 'center',
height: 24,
});

export const infoItemIconContainer = sprinkles({
height: '100%',
display: 'flex',
});

export const itemContainer = sprinkles({
display: 'flex',
alignItems: 'center',
minHeight: 72,
paddingY: 16,
});
99 changes: 62 additions & 37 deletions src/sheet-info.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {Text3, Text2} from './text';
import {vars as skinVars} from './skins/skin-contract.css';
import * as styles from './sheet-info.css';
import Image from './image';
import {ButtonPrimary} from './button';
import Divider from './divider';

import type {ExclusifyUnion} from './utils/utility-types';
import type {DataAttributes, IconProps} from './utils/types';
Expand Down Expand Up @@ -38,59 +40,82 @@ type InfoSheetProps = {
}>;
onClose?: () => void;
dataAttributes?: DataAttributes;
button?: {
text: string;
};
};

const InfoSheet = React.forwardRef<HTMLDivElement, InfoSheetProps>(
({title, subtitle, description, items, onClose, dataAttributes}, ref) => {
({title, subtitle, description, items, onClose, button, dataAttributes}, ref) => {
const {isDarkMode} = useTheme();
return (
<Sheet
onClose={onClose}
ref={ref}
dataAttributes={{'component-name': 'InfoSheet', ...dataAttributes}}
>
{({modalTitleId}) => (
{({closeModal, modalTitleId}) => (
<SheetBody
title={title}
subtitle={subtitle}
description={description}
modalTitleId={modalTitleId}
button={
button ? (
<ButtonPrimary onPress={closeModal}>{button.text}</ButtonPrimary>
) : undefined
}
>
<Box paddingBottom={16}>
<Stack space={16} role="list">
{items.map((item, idx) => (
<Inline key={item.id || idx} space={8}>
<div className={styles.infoItemIcon}>
{item.icon.type === 'bullet' ? (
<Circle
size={8}
backgroundColor={skinVars.colors.textPrimary}
/>
) : item.icon.Icon ? (
<item.icon.Icon size={item.icon.type === 'small' ? 16 : 24} />
) : (
<Image
src={
isDarkMode && item.icon.urlDark
? item.icon.urlDark
: item.icon.url
}
width={item.icon.type === 'small' ? 16 : 24}
height={item.icon.type === 'small' ? 16 : 24}
/>
)}
</div>
<Stack space={2}>
<Text3 regular>{item.title}</Text3>
{item.description && (
<Text2 regular color={skinVars.colors.textSecondary}>
{item.description}
</Text2>
)}
</Stack>
</Inline>
))}
</Stack>
<Box paddingBottom={16} role="list">
{items.map((item, idx) => (
<React.Fragment key={item.id || idx}>
<div className={styles.itemContainer} role="listitem">
<Inline space={8}>
<div
className={styles.infoItemIconContainer}
style={{
alignItems:
item.icon.type !== 'bullet' && !item.description
? 'center'
: undefined,
}}
>
<div className={styles.infoItemIcon}>
{item.icon.type === 'bullet' ? (
<Circle
size={8}
backgroundColor={skinVars.colors.textPrimary}
/>
) : item.icon.Icon ? (
<item.icon.Icon
size={item.icon.type === 'small' ? 16 : 24}
/>
) : (
<Image
src={
isDarkMode && item.icon.urlDark
? item.icon.urlDark
: item.icon.url
}
width={item.icon.type === 'small' ? 16 : 24}
height={item.icon.type === 'small' ? 16 : 24}
/>
)}
</div>
</div>
<Stack space={2}>
<Text3 regular>{item.title}</Text3>
{item.description && (
<Text2 regular color={skinVars.colors.textSecondary}>
{item.description}
</Text2>
)}
</Stack>
</Inline>
</div>
{idx < items.length - 1 && <Divider />}
</React.Fragment>
))}
</Box>
</SheetBody>
)}
Expand Down
39 changes: 25 additions & 14 deletions src/sheet-native.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,25 +88,36 @@ const showActionsListNativeSheet = (

const showInfoNativeSheet = async (
nativeSheetImplementation: NativeSheetImplementation,
{title, subtitle, description, items}: SheetPropsByType['INFO']
{title, subtitle, description, items, button}: SheetPropsByType['INFO']
): Promise<SheetResultByType['INFO']> => {
// nothing to return, this is an informative sheet
await (nativeSheetImplementation as NativeSheetImplementation)({
const infoSheetContent = {
type: 'LIST' as const,
id: 'list-0',
listType: 'INFORMATIVE' as const,
autoSubmit: false,
selectedIds: [],
items,
};

return await (nativeSheetImplementation as NativeSheetImplementation)({
title,
subtitle,
// TODO: add multiline support to native sheet
description: normalizeDescriptionForNative(description),
content: [
{
type: 'LIST',
id: 'list-0',
listType: 'INFORMATIVE',
autoSubmit: false,
selectedIds: [],
items,
},
],
});
content: button
? [
infoSheetContent,
{
type: 'BOTTOM_ACTIONS',
id: 'bottom-actions-0',
button,
},
]
: [infoSheetContent],
}).then(() => ({
// this is an informative sheet, it can only be dismissed
action: 'DISMISS',
}));
};

const showActionsNativeSheet = (
Expand Down
5 changes: 4 additions & 1 deletion src/sheet-types.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ export type SheetPropsByType = {
description?: string;
icon: InfoIcon;
}>;
button?: {
text: string;
};
}>;
ACTIONS: SheetProps<{
button: {
Expand All @@ -71,7 +74,7 @@ export type SheetType = keyof SheetPropsByType;
export type SheetResultByType = {
RADIO_LIST: {action: 'SUBMIT'; selectedId: string} | {action: 'DISMISS'};
ACTIONS_LIST: {action: 'SUBMIT'; selectedId: string} | {action: 'DISMISS'};
INFO: void;
INFO: {action: 'DISMISS'};
ACTIONS: {action: 'PRIMARY' | 'SECONDARY' | 'LINK' | 'DISMISS'};
};

Expand Down
2 changes: 1 addition & 1 deletion src/sheet-web.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ const SheetWeb = ({sheetProps, onResolve}: SheetWebProps): JSX.Element => {
}
switch (sheetProps.type) {
case 'INFO':
onResolve<'INFO'>(undefined);
onResolve<'INFO'>({action: 'DISMISS'});
break;
case 'ACTIONS_LIST':
if (selectionRef.current) {
Expand Down

1 comment on commit c4a0749

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for mistica-web ready!

✅ Preview
https://mistica-2hm7xjtn1-flows-projects-65bb050e.vercel.app

Built with commit c4a0749.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.