diff --git a/_locales/en/messages.json b/_locales/en/messages.json index f0c0f9013..54875dd83 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -7169,6 +7169,14 @@ "message": "Sending reaction...", "description": "Toast message" }, + "Stories__settings-toggle--title": { + "message": "Share & View Stories", + "description": "Select box title for the stories on/off toggle" + }, + "Stories__settings-toggle--description": { + "message": "You will no longer be able to share or view Stories when this option is turned off.", + "description": "Select box description for the stories on/off toggle" + }, "StoryViewer__pause": { "message": "Pause", "description": "Aria label for pausing a story" diff --git a/ts/components/Preferences.stories.tsx b/ts/components/Preferences.stories.tsx index 9263132a1..c1a375821 100644 --- a/ts/components/Preferences.stories.tsx +++ b/ts/components/Preferences.stories.tsx @@ -1,16 +1,17 @@ // Copyright 2021 Signal Messenger, LLC // SPDX-License-Identifier: AGPL-3.0-only +import type { Meta, Story } from '@storybook/react'; import React from 'react'; -import { action } from '@storybook/addon-actions'; import enMessages from '../../_locales/en/messages.json'; -import type { PropsType } from './Preferences'; +import type { PropsDataType, PropsType } from './Preferences'; import { Preferences } from './Preferences'; import { setupI18n } from '../util/setupI18n'; import { DEFAULT_CONVERSATION_COLOR } from '../types/Colors'; import { PhoneNumberSharingMode } from '../util/phoneNumberSharingMode'; import { PhoneNumberDiscoverability } from '../util/phoneNumberDiscoverability'; +import { objectMap } from '../util/objectMap'; const i18n = setupI18n('en', enMessages); @@ -42,7 +43,7 @@ const availableSpeakers = [ }, ]; -const createProps = (): PropsType => ({ +const getDefaultArgs = (): PropsDataType => ({ availableCameras: [ { deviceId: @@ -73,6 +74,7 @@ const createProps = (): PropsType => ({ hasCallNotifications: true, hasCallRingtoneNotification: false, hasCountMutedConversations: false, + hasCustomTitleBar: true, hasHideMenuBar: false, hasIncomingCallNotifications: true, hasLinkPreviews: true, @@ -85,38 +87,9 @@ const createProps = (): PropsType => ({ hasReadReceipts: true, hasRelayCalls: false, hasSpellCheck: true, + hasStoriesEnabled: true, hasTypingIndicators: true, - lastSyncTime: Date.now(), - notificationContent: 'name', - selectedCamera: - 'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c', - selectedMicrophone: availableMicrophones[0], - selectedSpeaker: availableSpeakers[1], - themeSetting: 'system', - universalExpireTimer: 3600, - whoCanFindMe: PhoneNumberDiscoverability.Discoverable, - whoCanSeeMe: PhoneNumberSharingMode.Everybody, - zoomFactor: 1, - - addCustomColor: action('addCustomColor'), - closeSettings: action('closeSettings'), - doDeleteAllData: action('doDeleteAllData'), - doneRendering: action('doneRendering'), - editCustomColor: action('editCustomColor'), - getConversationsWithCustomColor: () => Promise.resolve([]), initialSpellCheckSetting: true, - makeSyncRequest: () => { - action('makeSyncRequest'); - return Promise.resolve(); - }, - removeCustomColor: action('removeCustomColor'), - removeCustomColorOnConversations: action('removeCustomColorOnConversations'), - resetAllChatColors: action('resetAllChatColors'), - resetDefaultChatColor: action('resetDefaultChatColor'), - setGlobalDefaultConversationColor: action( - 'setGlobalDefaultConversationColor' - ), - isAudioNotificationsSupported: true, isAutoDownloadUpdatesSupported: true, isAutoLaunchSupported: true, @@ -125,62 +98,95 @@ const createProps = (): PropsType => ({ isPhoneNumberSharingSupported: false, isSyncSupported: true, isSystemTraySupported: true, + lastSyncTime: Date.now(), + notificationContent: 'name', + selectedCamera: + 'dfbe6effe70b0611ba0fdc2a9ea3f39f6cb110e6687948f7e5f016c111b7329c', + selectedMicrophone: availableMicrophones[0], + selectedSpeaker: availableSpeakers[1], + shouldShowStoriesSettings: true, + themeSetting: 'system', + universalExpireTimer: 3600, + whoCanFindMe: PhoneNumberDiscoverability.Discoverable, + whoCanSeeMe: PhoneNumberSharingMode.Everybody, + zoomFactor: 1, +}); - onAudioNotificationsChange: action('onAudioNotificationsChange'), - onAutoDownloadUpdateChange: action('onAutoDownloadUpdateChange'), - onAutoLaunchChange: action('onAutoLaunchChange'), - onCallNotificationsChange: action('onCallNotificationsChange'), - onCallRingtoneNotificationChange: action('onCallRingtoneNotificationChange'), - onCountMutedConversationsChange: action('onCountMutedConversationsChange'), - onHideMenuBarChange: action('onHideMenuBarChange'), - onIncomingCallNotificationsChange: action( - 'onIncomingCallNotificationsChange' - ), - onLastSyncTimeChange: action('onLastSyncTimeChange'), - onMediaCameraPermissionsChange: action('onMediaCameraPermissionsChange'), - onMediaPermissionsChange: action('onMediaPermissionsChange'), - onMinimizeToAndStartInSystemTrayChange: action( - 'onMinimizeToAndStartInSystemTrayChange' - ), - onMinimizeToSystemTrayChange: action('onMinimizeToSystemTrayChange'), - onNotificationAttentionChange: action('onNotificationAttentionChange'), - onNotificationContentChange: action('onNotificationContentChange'), - onNotificationsChange: action('onNotificationsChange'), - onRelayCallsChange: action('onRelayCallsChange'), - onSelectedCameraChange: action('onSelectedCameraChange'), - onSelectedMicrophoneChange: action('onSelectedMicrophoneChange'), - onSelectedSpeakerChange: action('onSelectedSpeakerChange'), - onSpellCheckChange: action('onSpellCheckChange'), - onThemeChange: action('onThemeChange'), - onUniversalExpireTimerChange: action('onUniversalExpireTimerChange'), - onZoomFactorChange: action('onZoomFactorChange'), - - i18n, - - executeMenuRole: action('executeMenuRole'), - hasCustomTitleBar: true, +const defaultArgTypes: Record = {}; +objectMap(getDefaultArgs(), (key, defaultValue) => { + defaultArgTypes[key] = { defaultValue }; }); export default { title: 'Components/Preferences', + component: Preferences, + argTypes: { + // ...defaultArgTypes, + + i18n: { + defaultValue: i18n, + }, + + addCustomColor: { action: true }, + closeSettings: { action: true }, + doDeleteAllData: { action: true }, + doneRendering: { action: true }, + editCustomColor: { action: true }, + executeMenuRole: { action: true }, + getConversationsWithCustomColor: { action: true }, + makeSyncRequest: { action: true }, + onAudioNotificationsChange: { action: true }, + onAutoDownloadUpdateChange: { action: true }, + onAutoLaunchChange: { action: true }, + onCallNotificationsChange: { action: true }, + onCallRingtoneNotificationChange: { action: true }, + onCountMutedConversationsChange: { action: true }, + onHasStoriesEnabledChanged: { action: true }, + onHideMenuBarChange: { action: true }, + onIncomingCallNotificationsChange: { action: true }, + onLastSyncTimeChange: { action: true }, + onMediaCameraPermissionsChange: { action: true }, + onMediaPermissionsChange: { action: true }, + onMinimizeToAndStartInSystemTrayChange: { action: true }, + onMinimizeToSystemTrayChange: { action: true }, + onNotificationAttentionChange: { action: true }, + onNotificationContentChange: { action: true }, + onNotificationsChange: { action: true }, + onRelayCallsChange: { action: true }, + onSelectedCameraChange: { action: true }, + onSelectedMicrophoneChange: { action: true }, + onSelectedSpeakerChange: { action: true }, + onSpellCheckChange: { action: true }, + onThemeChange: { action: true }, + onUniversalExpireTimerChange: { action: true }, + onZoomFactorChange: { action: true }, + removeCustomColor: { action: true }, + removeCustomColorOnConversations: { action: true }, + resetAllChatColors: { action: true }, + resetDefaultChatColor: { action: true }, + setGlobalDefaultConversationColor: { action: true }, + }, +} as Meta; + +const Template: Story = args => ; + +export const _Preferences = Template.bind({}); +_Preferences.args = getDefaultArgs(); + +export const Blocked1 = Template.bind({}); +Blocked1.args = { + blockedCount: 1, }; -export const _Preferences = (): JSX.Element => ( - -); - -export const Blocked1 = (): JSX.Element => ( - -); - -export const BlockedMany = (): JSX.Element => ( - -); - -export const CustomUniversalExpireTimer = (): JSX.Element => ( - -); +export const BlockedMany = Template.bind({}); +BlockedMany.args = { + blockedCount: 55, +}; +export const CustomUniversalExpireTimer = Template.bind({}); +CustomUniversalExpireTimer.args = { + universalExpireTimer: 9000, +}; CustomUniversalExpireTimer.story = { name: 'Custom universalExpireTimer', }; diff --git a/ts/components/Preferences.tsx b/ts/components/Preferences.tsx index 5a426323e..bc2a2a581 100644 --- a/ts/components/Preferences.tsx +++ b/ts/components/Preferences.tsx @@ -44,7 +44,7 @@ import { useTheme } from '../hooks/useTheme'; type CheckboxChangeHandlerType = (value: boolean) => unknown; type SelectChangeHandlerType = (value: T) => unknown; -export type PropsType = { +export type PropsDataType = { // Settings blockedCount: number; customColors: Record; @@ -68,6 +68,7 @@ export type PropsType = { hasReadReceipts: boolean; hasRelayCalls?: boolean; hasSpellCheck: boolean; + hasStoriesEnabled: boolean; hasTypingIndicators: boolean; lastSyncTime?: number; notificationContent: NotificationSettingType; @@ -80,16 +81,37 @@ export type PropsType = { whoCanSeeMe: PhoneNumberSharingMode; zoomFactor: ZoomFactorType; + // Other props + hasCustomTitleBar: boolean; + initialSpellCheckSetting: boolean; + shouldShowStoriesSettings: boolean; + + // Limited support features + isAudioNotificationsSupported: boolean; + isAutoDownloadUpdatesSupported: boolean; + isAutoLaunchSupported: boolean; + isHideMenuBarSupported: boolean; + isNotificationAttentionSupported: boolean; + isPhoneNumberSharingSupported: boolean; + isSyncSupported: boolean; + isSystemTraySupported: boolean; + + availableCameras: Array< + Pick + >; +} & Omit; + +type PropsFunctionType = { // Other props addCustomColor: (color: CustomColorType) => unknown; closeSettings: () => unknown; doDeleteAllData: () => unknown; doneRendering: () => unknown; editCustomColor: (colorId: string, color: CustomColorType) => unknown; + executeMenuRole: ExecuteMenuRoleType; getConversationsWithCustomColor: ( colorId: string ) => Promise>; - initialSpellCheckSetting: boolean; makeSyncRequest: () => unknown; removeCustomColor: (colorId: string) => unknown; removeCustomColorOnConversations: (colorId: string) => unknown; @@ -102,18 +124,6 @@ export type PropsType = { value: CustomColorType; } ) => unknown; - hasCustomTitleBar: boolean; - executeMenuRole: ExecuteMenuRoleType; - - // Limited support features - isAudioNotificationsSupported: boolean; - isAutoDownloadUpdatesSupported: boolean; - isAutoLaunchSupported: boolean; - isHideMenuBarSupported: boolean; - isNotificationAttentionSupported: boolean; - isPhoneNumberSharingSupported: boolean; - isSyncSupported: boolean; - isSystemTraySupported: boolean; // Change handlers onAudioNotificationsChange: CheckboxChangeHandlerType; @@ -122,6 +132,7 @@ export type PropsType = { onCallNotificationsChange: CheckboxChangeHandlerType; onCallRingtoneNotificationChange: CheckboxChangeHandlerType; onCountMutedConversationsChange: CheckboxChangeHandlerType; + onHasStoriesEnabledChanged: SelectChangeHandlerType; onHideMenuBarChange: CheckboxChangeHandlerType; onIncomingCallNotificationsChange: CheckboxChangeHandlerType; onLastSyncTimeChange: (time: number) => unknown; @@ -141,13 +152,11 @@ export type PropsType = { onUniversalExpireTimerChange: SelectChangeHandlerType; onZoomFactorChange: SelectChangeHandlerType; - availableCameras: Array< - Pick - >; - // Localization i18n: LocalizerType; -} & Omit; +}; + +export type PropsType = PropsDataType & PropsFunctionType; enum Page { // Accessible through left nav @@ -218,6 +227,7 @@ export const Preferences = ({ hasReadReceipts, hasRelayCalls, hasSpellCheck, + hasStoriesEnabled, hasTypingIndicators, i18n, initialSpellCheckSetting, @@ -239,6 +249,7 @@ export const Preferences = ({ onCallNotificationsChange, onCallRingtoneNotificationChange, onCountMutedConversationsChange, + onHasStoriesEnabledChanged, onHideMenuBarChange, onIncomingCallNotificationsChange, onLastSyncTimeChange, @@ -265,12 +276,14 @@ export const Preferences = ({ selectedMicrophone, selectedSpeaker, setGlobalDefaultConversationColor, + shouldShowStoriesSettings, themeSetting, universalExpireTimer = 0, whoCanFindMe, whoCanSeeMe, zoomFactor, }: PropsType): JSX.Element => { + const storiesId = useUniqueId(); const themeSelectId = useUniqueId(); const zoomSelectId = useUniqueId(); @@ -947,6 +960,39 @@ export const Preferences = ({ } /> + {shouldShowStoriesSettings && ( + + +
{i18n('Stories__settings-toggle--title')}
+
+ {i18n('Stories__settings-toggle--description')} +
+ + } + right={ +