Voice notes drafts

ts/components/PlaybackButton.stories.tsx

@@ -0,0 +1,48 @@
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+import type { CSSProperties } from 'react';
+import { action } from '@storybook/addon-actions';
+import { PlaybackButton } from './PlaybackButton';
+
+export default {
+  title: 'components/PlaybackButton',
+  component: PlaybackButton,
+};
+
+const rowStyles: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'row',
+  padding: 10,
+};
+
+export function Default(): JSX.Element {
+  return (
+    <>
+      {(['message', 'draft', 'mini'] as const).map(variant => (
+        <>
+          {(['incoming', 'outgoing'] as const).map(context => (
+            <div
+              style={{
+                ...rowStyles,
+                background: context === 'outgoing' ? '#2c6bed' : undefined,
+              }}
+            >
+              {(['play', 'download', 'pending', 'pause'] as const).map(mod => (
+                <PlaybackButton
+                  key={`${variant}_${context}_${mod}`}
+                  variant={variant}
+                  label="playback"
+                  onClick={action('click')}
+                  context={context}
+                  mod={mod}
+                />
+              ))}
+            </div>
+          ))}
+        </>
+      ))}
+    </>
+  );
+}