Add a permanent add story button to MyStories

This commit is contained in:
Josh Perez 2022-08-05 19:24:49 -04:00 committed by GitHub
parent 71382b8f65
commit 7a1686b915
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 142 additions and 63 deletions

View file

@ -101,4 +101,31 @@
); );
} }
} }
&__avatar-container {
position: relative;
}
&__avatar__add-story {
@include button-reset;
@include rounded-corners;
align-items: center;
background: $color-ultramarine-dawn;
border: 2px solid $color-gray-80;
bottom: -2px;
display: flex;
height: 20px;
justify-content: center;
position: absolute;
right: -4px;
width: 20px;
z-index: $z-index-base;
&::after {
content: '';
@include color-svg('../images/icons/v2/plus-20.svg', $color-white);
height: 10px;
width: 10px;
}
}
} }

View file

@ -22,10 +22,28 @@
} }
} }
&__click-container {
align-items: center;
display: flex;
height: 100%;
width: 100%;
&:focus {
outline: none;
}
@include keyboard-mode {
&:focus {
outline: 1px solid $color-ultramarine;
}
}
}
&__info { &__info {
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
flex: 1;
justify-content: center;
margin-left: 12px; margin-left: 12px;
margin-right: 12px; margin-right: 12px;

View file

@ -33,12 +33,9 @@ export default {
newestStory: { newestStory: {
defaultValue: getFakeStoryView(), defaultValue: getFakeStoryView(),
}, },
onClick: { onAddStory: { action: true },
action: true, onClick: { action: true },
}, queueStoryDownload: { action: true },
queueStoryDownload: {
action: true,
},
}, },
} as Meta; } as Meta;
@ -49,6 +46,10 @@ const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
canvasElement, canvasElement,
}) => { }) => {
const canvas = within(canvasElement); const canvas = within(canvasElement);
const [btnAddStory] = canvas.getAllByLabelText('Add a story');
await userEvent.click(btnAddStory);
await expect(args.onAddStory).toHaveBeenCalled();
const [btnStory] = canvas.getAllByLabelText('Story'); const [btnStory] = canvas.getAllByLabelText('Story');
await userEvent.click(btnStory); await userEvent.click(btnStory);
await expect(args.onClick).toHaveBeenCalled(); await expect(args.onClick).toHaveBeenCalled();

View file

@ -15,6 +15,7 @@ export type PropsType = {
i18n: LocalizerType; i18n: LocalizerType;
me: ConversationType; me: ConversationType;
newestStory?: StoryViewType; newestStory?: StoryViewType;
onAddStory: () => unknown;
onClick: () => unknown; onClick: () => unknown;
queueStoryDownload: (storyId: string) => unknown; queueStoryDownload: (storyId: string) => unknown;
}; };
@ -24,6 +25,7 @@ export const MyStoriesButton = ({
i18n, i18n,
me, me,
newestStory, newestStory,
onAddStory,
onClick, onClick,
queueStoryDownload, queueStoryDownload,
}: PropsType): JSX.Element => { }: PropsType): JSX.Element => {
@ -40,16 +42,10 @@ export const MyStoriesButton = ({
return ( return (
<div className="Stories__my-stories"> <div className="Stories__my-stories">
<button <div className="StoryListItem__button">
aria-label={i18n('StoryListItem__label')} <div className="MyStories__avatar-container">
className="StoryListItem__button"
onClick={onClick}
tabIndex={0}
type="button"
>
<Avatar <Avatar
acceptedMessageRequest={acceptedMessageRequest} acceptedMessageRequest={acceptedMessageRequest}
sharedGroupNames={sharedGroupNames}
avatarPath={avatarPath} avatarPath={avatarPath}
badge={undefined} badge={undefined}
color={getAvatarColor(color)} color={getAvatarColor(color)}
@ -57,10 +53,44 @@ export const MyStoriesButton = ({
i18n={i18n} i18n={i18n}
isMe={Boolean(isMe)} isMe={Boolean(isMe)}
name={name} name={name}
onClick={onAddStory}
profileName={profileName} profileName={profileName}
sharedGroupNames={sharedGroupNames}
size={AvatarSize.FORTY_EIGHT} size={AvatarSize.FORTY_EIGHT}
title={title} title={title}
/> />
<div
aria-label={i18n('Stories__add')}
className="MyStories__avatar__add-story"
onClick={ev => {
onAddStory();
ev.stopPropagation();
ev.preventDefault();
}}
onKeyDown={ev => {
if (ev.key === 'Enter') {
onAddStory();
ev.stopPropagation();
ev.preventDefault();
}
}}
role="button"
tabIndex={0}
/>
</div>
<div
className="StoryListItem__click-container"
onClick={onClick}
onKeyDown={ev => {
if (ev.key === 'Enter') {
onClick();
ev.stopPropagation();
ev.preventDefault();
}
}}
role="button"
tabIndex={0}
>
<div className="StoryListItem__info"> <div className="StoryListItem__info">
<> <>
<div className="StoryListItem__info--title"> <div className="StoryListItem__info--title">
@ -75,6 +105,7 @@ export const MyStoriesButton = ({
</div> </div>
<div <div
aria-label={i18n('StoryListItem__label')}
className={classNames('StoryListItem__previews', { className={classNames('StoryListItem__previews', {
'StoryListItem__previews--multiple': hasMultiple, 'StoryListItem__previews--multiple': hasMultiple,
})} })}
@ -99,7 +130,8 @@ export const MyStoriesButton = ({
/> />
)} )}
</div> </div>
</button> </div>
</div>
</div> </div>
); );
}; };

View file

@ -187,6 +187,7 @@ export const StoriesPane = ({
newestStory={ newestStory={
myStories.length ? getNewestMyStory(myStories[0]) : undefined myStories.length ? getNewestMyStory(myStories[0]) : undefined
} }
onAddStory={onAddStory}
onClick={onMyStoriesClicked} onClick={onMyStoriesClicked}
queueStoryDownload={queueStoryDownload} queueStoryDownload={queueStoryDownload}
/> />