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,16 +42,10 @@ export const MyStoriesButton = ({
 
   return (
     <div className="Stories__my-stories">
-      <button
-        aria-label={i18n('StoryListItem__label')}
-        className="StoryListItem__button"
-        onClick={onClick}
-        tabIndex={0}
-        type="button"
-      >
+      <div className="StoryListItem__button">
+        <div className="MyStories__avatar-container">
           <Avatar
             acceptedMessageRequest={acceptedMessageRequest}
-          sharedGroupNames={sharedGroupNames}
             avatarPath={avatarPath}
             badge={undefined}
             color={getAvatarColor(color)}
@@ -57,10 +53,44 @@ export const MyStoriesButton = ({
             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="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--title">
@@ -75,6 +105,7 @@ export const MyStoriesButton = ({
           </div>
 
           <div
+            aria-label={i18n('StoryListItem__label')}
             className={classNames('StoryListItem__previews', {
               'StoryListItem__previews--multiple': hasMultiple,
             })}
@@ -99,7 +130,8 @@ export const MyStoriesButton = ({
               />
             )}
           </div>
-      </button>
+        </div>
+      </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}
           />