Button: update enum to explicit export and in constant case

Author: clairep94

client/common/Button.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { Button } from './Button';
+import { Button, ButtonDisplays, ButtonKinds, ButtonTypes } from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {
@@ -15,13 +15,13 @@ export default {
 };
 
 export const AllFeatures = (args) => (
-  <Button disabled={args.disabled} type="submit" label={args.label}>
+  <Button disabled={args.disabled} type={ButtonTypes.SUBMIT} label={args.label}>
     {args.children}
   </Button>
 );
 
 export const SubmitButton = () => (
-  <Button type="submit" label="submit">
+  <Button type={ButtonTypes.SUBMIT} label="submit">
     This is a submit button
   </Button>
 );
@@ -59,7 +59,7 @@ export const ButtonWithIconAfter = () => (
 );
 
 export const InlineButtonWithIconAfter = () => (
-  <Button iconAfter={<DropdownArrowIcon />} display={Button.displays.inline}>
+  <Button iconAfter={<DropdownArrowIcon />} display={ButtonDisplays.INLINE}>
     File name
   </Button>
 );
@@ -68,6 +68,6 @@ export const InlineIconOnlyButton = () => (
   <Button
     aria-label="Add to collection"
     iconBefore={<PlusIcon />}
-    display={Button.displays.inline}
+    display={ButtonDisplays.INLINE}
   />
 );

client/common/Button.tsx

@@ -3,19 +3,36 @@ import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import { remSize, prop } from '../theme';
 
-enum Kinds {
-  primary = 'primary',
-  secondary = 'secondary'
+/**
+ * Enum for the visual style of a Button.
+ *
+ * These values transpile to lowercase strings (`'primary' | 'secondary'`)
+ * that map directly to keys in the `Button` object in `theme.js` for styling.
+ */
+export enum ButtonKinds {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary'
 }
-
-enum Displays {
-  block = 'block',
-  inline = 'inline'
+/**
+ * Enum for the display type of a Button.
+ *
+ * These values transpile to lowercase strings (`'block' | 'inline'`)
+ * and map to display styles in the `Button` object in `theme.js`.
+ */
+export enum ButtonDisplays {
+  BLOCK = 'block',
+  INLINE = 'inline'
 }
-
-enum ButtonTypes {
-  button = 'button',
-  submit = 'submit'
+/**
+ * Enum for the native HTML button type.
+ *
+ * These values transpile to lowercase strings (`'button' | 'submit'`)
+ * and correspond to the `type` attribute on a native <button>.
+ * They can also be used in `theme.js` if needed for button-specific styles.
+ */
+export enum ButtonTypes {
+  BUTTON = 'button',
+  SUBMIT = 'submit'
 }
 
 export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
@@ -31,7 +48,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The display type of the button—inline or block
    */
-  display?: Displays;
+  display?: ButtonDisplays;
   /**
    * SVG icon to place after child content
    */
@@ -47,7 +64,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * The kind of button - determines how it appears visually
    */
-  kind?: Kinds;
+  kind?: ButtonKinds;
   /**
    * Specifying an href will use an <a> to link to the URL
    */
@@ -78,8 +95,8 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLElement> {
 }
 
 interface StyledButtonProps extends ButtonProps {
-  kind: Kinds;
-  display: Displays;
+  kind: ButtonKinds;
+  display: ButtonDisplays;
 }
 
 // The '&&&' will increase the specificity of the
@@ -89,7 +106,7 @@ const StyledButton = styled.button<StyledButtonProps>`
   &&& {
     font-weight: bold;
     display: ${({ display }) =>
-      display === Displays.inline ? 'inline-flex' : 'flex'};
+      display === ButtonDisplays.INLINE ? 'inline-flex' : 'flex'};
     justify-content: center;
     align-items: center;
 
@@ -183,15 +200,15 @@ const StyledInlineButton = styled.button`
  */
 export const Button = ({
   children = null,
-  display = Displays.block,
+  display = ButtonDisplays.BLOCK,
   href,
-  kind = Kinds.primary,
+  kind = ButtonKinds.PRIMARY,
   iconBefore = null,
   iconAfter = null,
   iconOnly = false,
   'aria-label': ariaLabel,
   to,
-  type = ButtonTypes.button,
+  type = ButtonTypes.BUTTON,
   ...props
 }: ButtonProps) => {
   const hasChildren = React.Children.count(children) > 0;
@@ -251,6 +268,3 @@ export const Button = ({
     </StyledComponent>
   );
 };
-
-Button.kinds = Kinds;
-Button.displays = Displays;

client/common/IconButton.tsx

@@ -1,6 +1,6 @@
 import React, { ComponentType } from 'react';
 import styled from 'styled-components';
-import { Button, ButtonProps } from './Button';
+import { Button, ButtonProps, ButtonDisplays } from './Button';
 import { remSize } from '../theme';
 
 const ButtonWrapper = styled(Button)`
@@ -23,7 +23,7 @@ export const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
   <ButtonWrapper
     iconBefore={Icon ? <Icon /> : undefined}
     iconOnly
-    display={Button.displays.inline}
+    display={ButtonDisplays.INLINE}
     focusable={false}
     {...otherProps}
   />

client/modules/IDE/components/NewFileForm.jsx

@@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';
 import { handleCreateFile } from '../actions/files';
 import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
 
-import { Button } from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 
 function NewFileForm() {
   const fileNameInput = useRef(null);
@@ -57,7 +57,7 @@ function NewFileForm() {
             </Field>
             <Field name="submitButton">
               {() => (
-                <Button type="submit" disabled={submitting}>
+                <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
                   {t('NewFileForm.AddFileSubmit')}
                 </Button>
               )}

client/modules/IDE/components/NewFolderForm.jsx

@@ -2,7 +2,7 @@ import React, { useRef, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
-import { Button } from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { handleCreateFolder } from '../actions/files';
 
 function NewFolderForm() {
@@ -54,7 +54,7 @@ function NewFolderForm() {
             </Field>
             <Field name="submitButton">
               {() => (
-                <Button type="submit" disabled={submitting}>
+                <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
                   {t('NewFolderForm.AddFolderSubmit')}
                 </Button>
               )}

client/modules/User/components/APIKeyForm.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button } from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { PlusIcon } from '../../../common/icons';
 import CopyableInput from '../../IDE/components/CopyableInput';
 import { createApiKey, removeApiKey } from '../actions';
@@ -78,7 +78,7 @@ const APIKeyForm = () => {
             disabled={keyLabel === ''}
             iconBefore={<PlusIcon />}
             label="Create new key"
-            type="submit"
+            type={ButtonTypes.SUBMIT}
           >
             {t('APIKeyForm.CreateTokenSubmit')}
           </Button>

client/modules/User/components/AccountForm.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Form, Field } from 'react-final-form';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Button } from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { validateSettings } from '../../../utils/reduxFormUtils';
 import { updateSettings, initiateVerification } from '../actions';
 import { apiClient } from '../../../utils/apiClient';
@@ -175,7 +175,7 @@ function AccountForm() {
               )}
             </Field>
           )}
-          <Button type="submit" disabled={submitting || invalid}>
+          <Button type={ButtonTypes.SUBMIT} disabled={submitting || invalid}>
             {t('AccountForm.SaveAccountDetails')}
           </Button>
         </form>

client/modules/User/components/CollectionCreate.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 
 import { generateCollectionName } from '../../../utils/generateRandomName';
-import { Button } from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { createCollection } from '../../IDE/actions/collections';
 
 const CollectionCreate = () => {
@@ -74,7 +74,7 @@ const CollectionCreate = () => {
               rows="6"
             />
           </p>
-          <Button type="submit" disabled={invalid}>
+          <Button type={ButtonTypes.SUBMIT} disabled={invalid}>
             {t('CollectionCreate.SubmitCollectionCreate')}
           </Button>
         </form>

client/modules/User/components/CookieConsent.jsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { getConfig } from '../../../utils/getConfig';
 import { setUserCookieConsent } from '../actions';
 import { remSize, prop, device } from '../../../theme';
-import { Button } from '../../../common/Button';
+import { Button, ButtonKinds } from '../../../common/Button';
 
 const CookieConsentContainer = styled.div`
   position: fixed;
@@ -177,10 +177,7 @@ function CookieConsent({ hide }) {
                 />
               </CookieConsentCopy>
               <CookieConsentButtons>
-                <Button
-                  kind={Button.kinds.secondary}
-                  onClick={acceptAllCookies}
-                >
+                <Button kind={ButtonKinds.SECONDARY} onClick={acceptAllCookies}>
                   {t('Cookies.AllowAll')}
                 </Button>
                 <Button onClick={acceptEssentialCookies}>

client/modules/User/components/LoginForm.jsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Form, Field } from 'react-final-form';
 import { useDispatch } from 'react-redux';
 import { AiOutlineEye, AiOutlineEyeInvisible } from 'react-icons/ai';
-import { Button } from '../../../common/Button';
+import { Button, ButtonTypes } from '../../../common/Button';
 import { validateLogin } from '../../../utils/reduxFormUtils';
 import { validateAndLoginUser } from '../actions';
 import { useSyncFormTranslations } from '../../../common/useSyncFormTranslations';
@@ -105,7 +105,7 @@ function LoginForm() {
                 {t('LoginForm.Errors.invalidCredentials')}
               </span>
             )}
-            <Button type="submit" disabled={submitting}>
+            <Button type={ButtonTypes.SUBMIT} disabled={submitting}>
               {t('LoginForm.Submit')}
             </Button>
           </form>