Remove group from story feature

signalapp · Aug 30, 2022 · 9d7eaa0 · 9d7eaa0
1 parent 0c13ee8
commit 9d7eaa0
Show file tree

Hide file tree

Showing 10 changed files with 583 additions and 267 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -7443,6 +7443,14 @@
       }
     }
   },
+  "SendStoryModal__delete-story": {
+    "message": "Delete story",
+    "description": "Button label to delete a story"
+  },
+  "SendStoryModal__confirm-remove-group": {
+    "message": "Remove story? This will remove the story from your list, but you will still be able to view stories from this group.",
+    "description": "Confirmation body for removing a group story"
+  },
   "Stories__settings-toggle--title": {
     "message": "Share & View Stories",
     "description": "Select box title for the stories on/off toggle"

diff --git a/stylesheets/components/SendStoryModal.scss b/stylesheets/components/SendStoryModal.scss
@@ -27,6 +27,16 @@
   }
 
   &__icon {
+    &--delete {
+      @include color-svg(
+        '../images/icons/v2/trash-outline-24.svg',
+        $color-white
+      );
+      height: 14px;
+      margin-top: 2px;
+      width: 14px;
+    }
+
     &--lock {
       @include color-svg(
         '../images/icons/v2/lock-outline-24.svg',
@@ -46,6 +56,28 @@
       margin-top: 2px;
       width: 14px;
     }
+
+    &--settings {
+      @include color-svg(
+        '../images/icons/v2/settings-outline-16.svg',
+        $color-white
+      );
+      height: 14px;
+      margin-top: 2px;
+      width: 14px;
+    }
+  }
+
+  &__distribution-list-context {
+    &__container {
+      width: 100%;
+    }
+
+    &__button {
+      align-items: center;
+      display: flex;
+      width: 100%;
+    }
   }
 
   &__distribution-list {

diff --git a/ts/components/SendStoryModal.stories.tsx b/ts/components/SendStoryModal.stories.tsx
@@ -14,11 +14,16 @@ import {
 import { setupI18n } from '../util/setupI18n';
 import {
   getMyStories,
-  getFakeDistributionLists,
+  getFakeDistributionListsWithMembers,
 } from '../test-both/helpers/getFakeDistributionLists';
 
 const i18n = setupI18n('en', enMessages);
 
+const myStories = {
+  ...getMyStories(),
+  members: [],
+};
+
 export default {
   title: 'Components/SendStoryModal',
   component: SendStoryModal,
@@ -27,7 +32,7 @@ export default {
       defaultValue: Array.from(Array(100), () => getDefaultConversation()),
     },
     distributionLists: {
-      defaultValue: [getMyStories()],
+      defaultValue: [myStories],
     },
     getPreferredBadge: { action: true },
     groupConversations: {
@@ -46,6 +51,7 @@ export default {
       defaultValue: getDefaultConversation(),
     },
     onClose: { action: true },
+    onDeleteList: { action: true },
     onDistributionListCreated: { action: true },
     onHideMyStoriesFrom: { action: true },
     onSend: { action: true },
@@ -54,7 +60,7 @@ export default {
     signalConnections: {
       defaultValue: Array.from(Array(42), getDefaultConversation),
     },
-    tagGroupsAsNewGroupStory: { action: true },
+    toggleGroupsForStorySend: { action: true },
     toggleSignalConnectionsModal: { action: true },
   },
 } as Meta;
@@ -63,12 +69,25 @@ const Template: Story<PropsType> = args => <SendStoryModal {...args} />;
 
 export const Modal = Template.bind({});
 Modal.args = {
-  distributionLists: getFakeDistributionLists(),
+  distributionLists: getFakeDistributionListsWithMembers(),
 };
 
 export const FirstTime = Template.bind({});
 FirstTime.args = {
-  distributionLists: [getMyStories()],
+  distributionLists: [myStories],
+  groupStories: [],
+  hasFirstStoryPostExperience: true,
+};
+
+export const FirstTimeAlreadyConfiguredOnMobile = Template.bind({});
+FirstTime.args = {
+  distributionLists: [
+    {
+      ...myStories,
+      isBlockList: false,
+      members: Array.from(Array(3), getDefaultConversation),
+    },
+  ],
   groupStories: [],
   hasFirstStoryPostExperience: true,
 };