Add a permanent add story button to MyStories

stylesheets/components/MyStories.scss

@@ -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;
+    }
+  }
 }

stylesheets/components/StoryListItem.scss

@@ -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 {
     display: flex;
-    flex: 1;
     flex-direction: column;
+    flex: 1;
+    justify-content: center;
     margin-left: 12px;
     margin-right: 12px;
 

ts/components/MyStoriesButton.stories.tsx

@@ -33,12 +33,9 @@ export default {
     newestStory: {
       defaultValue: getFakeStoryView(),
     },
-    onClick: {
-      action: true,
-    },
-    queueStoryDownload: {
-      action: true,
-    },
+    onAddStory: { action: true },
+    onClick: { action: true },
+    queueStoryDownload: { action: true },
   },
 } as Meta;
 
@@ -49,6 +46,10 @@ const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
   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');
   await userEvent.click(btnStory);
   await expect(args.onClick).toHaveBeenCalled();

ts/components/MyStoriesButton.tsx

@@ -15,6 +15,7 @@ export type PropsType = {
   i18n: LocalizerType;
   me: ConversationType;
   newestStory?: StoryViewType;
+  onAddStory: () => unknown;
   onClick: () => unknown;
   queueStoryDownload: (storyId: string) => unknown;
 };
@@ -24,6 +25,7 @@ export const MyStoriesButton = ({
   i18n,
   me,
   newestStory,
+  onAddStory,
   onClick,
   queueStoryDownload,
 }: PropsType): JSX.Element => {
@@ -40,66 +42,96 @@ export const MyStoriesButton = ({
 
   return (
     <div className="Stories__my-stories">
-      <button
-        aria-label={i18n('StoryListItem__label')}
-        className="StoryListItem__button"
-        onClick={onClick}
-        tabIndex={0}
-        type="button"
-      >
-        <Avatar
-          acceptedMessageRequest={acceptedMessageRequest}
-          sharedGroupNames={sharedGroupNames}
-          avatarPath={avatarPath}
-          badge={undefined}
-          color={getAvatarColor(color)}
-          conversationType="direct"
-          i18n={i18n}
-          isMe={Boolean(isMe)}
-          name={name}
-          profileName={profileName}
-          size={AvatarSize.FORTY_EIGHT}
-          title={title}
-        />
-        <div className="StoryListItem__info">
-          <>
-            <div className="StoryListItem__info--title">
-              {i18n('Stories__mine')}
-            </div>
-            {!newestStory && (
-              <div className="StoryListItem__info--timestamp">
-                {i18n('Stories__add')}
-              </div>
-            )}
-          </>
+      <div className="StoryListItem__button">
+        <div className="MyStories__avatar-container">
+          <Avatar
+            acceptedMessageRequest={acceptedMessageRequest}
+            avatarPath={avatarPath}
+            badge={undefined}
+            color={getAvatarColor(color)}
+            conversationType="direct"
+            i18n={i18n}
+            isMe={Boolean(isMe)}
+            name={name}
+            onClick={onAddStory}
+            profileName={profileName}
+            sharedGroupNames={sharedGroupNames}
+            size={AvatarSize.FORTY_EIGHT}
+            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={classNames('StoryListItem__previews', {
-            'StoryListItem__previews--multiple': hasMultiple,
-          })}
+          className="StoryListItem__click-container"
+          onClick={onClick}
+          onKeyDown={ev => {
+            if (ev.key === 'Enter') {
+              onClick();
+              ev.stopPropagation();
+              ev.preventDefault();
+            }
+          }}
+          role="button"
+          tabIndex={0}
         >
-          {hasMultiple && <div className="StoryListItem__previews--more" />}
-          {newestStory ? (
-            <StoryImage
-              attachment={newestStory.attachment}
-              firstName={i18n('you')}
-              i18n={i18n}
-              isMe
-              isThumbnail
-              label=""
-              moduleClassName="StoryListItem__previews--image"
-              queueStoryDownload={queueStoryDownload}
-              storyId={newestStory.messageId}
-            />
-          ) : (
-            <div
-              aria-label={i18n('Stories__add')}
-              className="StoryListItem__previews--add StoryListItem__previews--image"
-            />
-          )}
+          <div className="StoryListItem__info">
+            <>
+              <div className="StoryListItem__info--title">
+                {i18n('Stories__mine')}
+              </div>
+              {!newestStory && (
+                <div className="StoryListItem__info--timestamp">
+                  {i18n('Stories__add')}
+                </div>
+              )}
+            </>
+          </div>
+
+          <div
+            aria-label={i18n('StoryListItem__label')}
+            className={classNames('StoryListItem__previews', {
+              'StoryListItem__previews--multiple': hasMultiple,
+            })}
+          >
+            {hasMultiple && <div className="StoryListItem__previews--more" />}
+            {newestStory ? (
+              <StoryImage
+                attachment={newestStory.attachment}
+                firstName={i18n('you')}
+                i18n={i18n}
+                isMe
+                isThumbnail
+                label=""
+                moduleClassName="StoryListItem__previews--image"
+                queueStoryDownload={queueStoryDownload}
+                storyId={newestStory.messageId}
+              />
+            ) : (
+              <div
+                aria-label={i18n('Stories__add')}
+                className="StoryListItem__previews--add StoryListItem__previews--image"
+              />
+            )}
+          </div>
         </div>
-      </button>
+      </div>
     </div>
   );
 };

ts/components/StoriesPane.tsx

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