Avatar defaults and colors

ts/components/AvatarLightbox.stories.tsx

@@ -0,0 +1,59 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { select } from '@storybook/addon-knobs';
+
+import enMessages from '../../_locales/en/messages.json';
+import { AvatarColors } from '../types/Colors';
+import { AvatarLightbox, PropsType } from './AvatarLightbox';
+import { setup as setupI18n } from '../../js/modules/i18n';
+import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
+
+const i18n = setupI18n('en', enMessages);
+
+const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
+  avatarColor: select(
+    'Color',
+    AvatarColors,
+    overrideProps.avatarColor || AvatarColors[0]
+  ),
+  avatarPath: overrideProps.avatarPath,
+  conversationTitle: overrideProps.conversationTitle,
+  i18n,
+  isGroup: Boolean(overrideProps.isGroup),
+  onClose: action('onClose'),
+});
+
+const story = storiesOf('Components/AvatarLightbox', module);
+
+story.add('Group', () => (
+  <AvatarLightbox
+    {...createProps({
+      isGroup: true,
+    })}
+  />
+));
+
+story.add('Person', () => {
+  const conversation = getDefaultConversation();
+  return (
+    <AvatarLightbox
+      {...createProps({
+        avatarColor: conversation.color,
+        conversationTitle: conversation.title,
+      })}
+    />
+  );
+});
+
+story.add('Photo', () => (
+  <AvatarLightbox
+    {...createProps({
+      avatarPath: '/fixtures/kitten-1-64-64.jpg',
+    })}
+  />
+));