Rename files

ts/components/CallingButton.dom.stories.tsx

@@ -0,0 +1,88 @@
+// Copyright 2020 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import type { Meta } from '@storybook/react';
+import type { PropsType } from './CallingButton.dom.js';
+import { CallingButton, CallingButtonType } from './CallingButton.dom.js';
+import { TooltipPlacement } from './Tooltip.dom.js';
+
+const { i18n } = window.SignalContext;
+
+export default {
+  title: 'Components/CallingButton',
+  component: CallingButton,
+  argTypes: {
+    buttonType: {
+      control: { type: 'select' },
+      options: Object.values(CallingButtonType),
+    },
+    tooltipDirection: {
+      control: { type: 'select' },
+      options: Object.values(TooltipPlacement),
+    },
+  },
+  args: {
+    buttonType: CallingButtonType.RING_ON,
+    i18n,
+    onClick: action('on-click'),
+    onMouseEnter: action('on-mouse-enter'),
+    onMouseLeave: action('on-mouse-leave'),
+    tooltipDirection: TooltipPlacement.Bottom,
+  },
+} satisfies Meta<PropsType>;
+
+export function KitchenSink(args: PropsType): JSX.Element {
+  return (
+    <>
+      {Object.values(CallingButtonType).map(buttonType => (
+        <CallingButton key={buttonType} {...args} buttonType={buttonType} />
+      ))}
+    </>
+  );
+}
+
+export function AudioOn(args: PropsType): JSX.Element {
+  return <CallingButton {...args} buttonType={CallingButtonType.AUDIO_ON} />;
+}
+
+export function AudioOff(args: PropsType): JSX.Element {
+  return <CallingButton {...args} buttonType={CallingButtonType.AUDIO_OFF} />;
+}
+
+export function AudioDisabled(args: PropsType): JSX.Element {
+  return (
+    <CallingButton {...args} buttonType={CallingButtonType.AUDIO_DISABLED} />
+  );
+}
+
+export function VideoOn(args: PropsType): JSX.Element {
+  return <CallingButton {...args} buttonType={CallingButtonType.VIDEO_ON} />;
+}
+
+export function VideoOff(args: PropsType): JSX.Element {
+  return <CallingButton {...args} buttonType={CallingButtonType.VIDEO_OFF} />;
+}
+
+export function VideoDisabled(args: PropsType): JSX.Element {
+  return (
+    <CallingButton {...args} buttonType={CallingButtonType.VIDEO_DISABLED} />
+  );
+}
+
+export function TooltipRight(args: PropsType): JSX.Element {
+  return <CallingButton {...args} tooltipDirection={TooltipPlacement.Right} />;
+}
+
+export function PresentingOn(args: PropsType): JSX.Element {
+  return (
+    <CallingButton {...args} buttonType={CallingButtonType.PRESENTING_ON} />
+  );
+}
+
+export function PresentingOff(args: PropsType): JSX.Element {
+  return (
+    <CallingButton {...args} buttonType={CallingButtonType.PRESENTING_OFF} />
+  );
+}