Create <Button> component and use it in <GroupV2JoinDialog>

ts/components/Button.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 { Button, ButtonVariant } from './Button';
+
+const story = storiesOf('Components/Button', module);
+
+story.add('Kitchen sink', () => (
+  <>
+    <p>
+      <Button onClick={action('onClick')} variant={ButtonVariant.Primary}>
+        Hello world
+      </Button>
+    </p>
+    <p>
+      <Button
+        onClick={action('onClick')}
+        variant={ButtonVariant.Primary}
+        disabled
+      >
+        Hello world
+      </Button>
+    </p>
+
+    <p>
+      <Button onClick={action('onClick')} variant={ButtonVariant.Secondary}>
+        Hello world
+      </Button>
+    </p>
+    <p>
+      <Button
+        onClick={action('onClick')}
+        variant={ButtonVariant.Secondary}
+        disabled
+      >
+        Hello world
+      </Button>
+    </p>
+
+    <p>
+      <Button onClick={action('onClick')} variant={ButtonVariant.Destructive}>
+        Hello world
+      </Button>
+    </p>
+    <p>
+      <Button
+        onClick={action('onClick')}
+        variant={ButtonVariant.Destructive}
+        disabled
+      >
+        Hello world
+      </Button>
+    </p>
+  </>
+));

ts/components/Button.tsx

@@ -0,0 +1,55 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import React, { MouseEventHandler, ReactNode } from 'react';
+import classNames from 'classnames';
+
+import { assert } from '../util/assert';
+
+export enum ButtonVariant {
+  Primary,
+  Secondary,
+  Destructive,
+}
+
+type PropsType = {
+  children: ReactNode;
+  className?: string;
+  disabled?: boolean;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  variant?: ButtonVariant;
+};
+
+const VARIANT_CLASS_NAMES = new Map<ButtonVariant, string>([
+  [ButtonVariant.Primary, 'module-Button--primary'],
+  [ButtonVariant.Secondary, 'module-Button--secondary'],
+  [ButtonVariant.Destructive, 'module-Button--destructive'],
+]);
+
+export const Button = React.forwardRef<HTMLButtonElement, PropsType>(
+  (
+    {
+      children,
+      className,
+      disabled = false,
+      onClick,
+      variant = ButtonVariant.Primary,
+    },
+    ref
+  ) => {
+    const variantClassName = VARIANT_CLASS_NAMES.get(variant);
+    assert(variantClassName, '<Button> variant not found');
+
+    return (
+      <button
+        className={classNames('module-Button', variantClassName, className)}
+        disabled={disabled}
+        onClick={onClick}
+        ref={ref}
+        type="button"
+      >
+        {children}
+      </button>
+    );
+  }
+);

ts/components/GroupV2JoinDialog.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { LocalizerType } from '../types/Util';
 import { Avatar } from './Avatar';
 import { Spinner } from './Spinner';
+import { Button, ButtonVariant } from './Button';
 
 import { PreJoinConversationType } from '../state/ducks/conversations';
 
@@ -90,30 +91,30 @@ export const GroupV2JoinDialog = React.memo((props: PropsType) => {
       </div>
       <div className="module-group-v2-join-dialog__prompt">{promptString}</div>
       <div className="module-group-v2-join-dialog__buttons">
-        <button
+        <Button
           className={classNames(
             'module-group-v2-join-dialog__button',
             'module-group-v2-join-dialog__button--secondary'
           )}
           disabled={isWorking}
-          type="button"
           onClick={wrappedClose}
+          variant={ButtonVariant.Secondary}
         >
           {i18n('cancel')}
-        </button>
-        <button
+        </Button>
+        <Button
           className="module-group-v2-join-dialog__button"
           disabled={isWorking}
           ref={focusRef}
-          type="button"
           onClick={wrappedJoin}
+          variant={ButtonVariant.Primary}
         >
           {isJoining ? (
             <Spinner size="20px" svgSize="small" direction="on-avatar" />
           ) : (
             joinString
           )}
-        </button>
+        </Button>
       </div>
     </div>
   );