Support for sending formatting messages

ts/components/ShortcutGuide.stories.tsx

@@ -3,7 +3,6 @@
 
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
 
 import { setupI18n } from '../util/setupI18n';
 import enMessages from '../../_locales/en/messages.json';
@@ -19,18 +18,16 @@ export default {
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
   close: action('close'),
-  hasInstalledStickers: boolean(
-    'hasInstalledStickers',
-    overrideProps.hasInstalledStickers || false
-  ),
-  platform: select(
-    'platform',
-    {
-      macOS: 'darwin',
-      other: 'other',
-    },
-    overrideProps.platform || 'other'
-  ),
+  isFormattingFlagEnabled:
+    overrideProps.isFormattingFlagEnabled === false
+      ? overrideProps.isFormattingFlagEnabled
+      : true,
+  isFormattingSpoilersFlagEnabled:
+    overrideProps.isFormattingSpoilersFlagEnabled === false
+      ? overrideProps.isFormattingSpoilersFlagEnabled
+      : true,
+  hasInstalledStickers: overrideProps.hasInstalledStickers === true || false,
+  platform: overrideProps.platform || 'other',
 });
 
 export function Default(): JSX.Element {
@@ -47,3 +44,13 @@ export function HasStickers(): JSX.Element {
   const props = createProps({ hasInstalledStickers: true });
   return <ShortcutGuide {...props} />;
 }
+
+export function NoFormatting(): JSX.Element {
+  const props = createProps({ isFormattingFlagEnabled: false });
+  return <ShortcutGuide {...props} />;
+}
+
+export function NoSpoilerFormatting(): JSX.Element {
+  const props = createProps({ isFormattingSpoilersFlagEnabled: false });
+  return <ShortcutGuide {...props} />;
+}