Include new QuickButton Component

Author: Hector Arce De Las Heras

src/components/quickButton/__tests__/quickButton.test.tsx

@@ -0,0 +1,61 @@
+import { screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { axe } from 'jest-axe';
+
+import { ButtonType } from '@/components/button';
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+
+import { QuickButton } from '../quickButton';
+
+const mockProps = {
+  variant: 'PRIMARY',
+  onClick: jest.fn,
+  dataTestId: 'button-component',
+  buttonId: 'labelId',
+  icon: { icon: 'ARROW_RIGHT', altText: 'altText' },
+  ['aria-label']: 'quickButton',
+  type: ButtonType.BUTTON,
+};
+
+describe('QuickButton component', () => {
+  it('Should render a label when provided', async () => {
+    const { container } = renderProvider(
+      <QuickButton {...mockProps} label={{ content: 'label' }} />
+    );
+
+    const quickButton = screen.getByRole('button');
+    const label = screen.getByText('label');
+
+    expect(quickButton).toBeDefined();
+    expect(label).toBeDefined();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Variant is optional', async () => {
+    const { container } = renderProvider(<QuickButton {...mockProps} variant={undefined} />);
+
+    const quickButton = screen.getByRole('button', { name: 'quickButton' });
+
+    expect(quickButton).toBeDefined();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Type is optional', async () => {
+    const { container } = renderProvider(<QuickButton {...mockProps} type={undefined} />);
+
+    const button = screen.getByRole('button', { name: 'quickButton' });
+
+    expect(button).toBeDefined();
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+});

src/components/quickButton/index.ts

@@ -0,0 +1,4 @@
+export { QuickButtonStandAlone } from './quickButtonStandAlone';
+export { QuickButton } from './quickButton';
+
+export * from './types';

src/components/quickButton/quickButton.styled.ts

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components';
+
+import { getStyles, getTypographyStyles } from '@/utils/getStyles/getStyles';
+
+import { QuickButtonState, QuickButtonVariantStylesType } from './types';
+
+export const QuickButtonContainerStyled = styled.div<{
+  maxWidth?: string;
+  styles?: QuickButtonVariantStylesType;
+}>`
+  ${({ styles }) => getStyles(styles?.[QuickButtonState.DEFAULT]?.container)}
+  ${({ styles }) => getTypographyStyles(styles?.[QuickButtonState.DEFAULT]?.container)}
+  ${({ maxWidth }) =>
+    maxWidth &&
+    css`
+      max-width: ${maxWidth};
+    `};
+
+  &:disabled {
+    ${({ styles }) => getStyles(styles?.[QuickButtonState.DISABLED]?.container)}
+    ${({ styles }) => getTypographyStyles(styles?.[QuickButtonState.DISABLED]?.container)}
+  }
+
+  &:hover:not(:disabled) {
+    ${({ styles }) => getStyles(styles?.[QuickButtonState.HOVER]?.container)}
+    ${({ styles }) => getTypographyStyles(styles?.[QuickButtonState.HOVER]?.container)}
+  }
+
+  &:active:not(:disabled) {
+    ${({ styles }) => getStyles(styles?.[QuickButtonState.PRESSED]?.container)}
+    ${({ styles }) => getTypographyStyles(styles?.[QuickButtonState.PRESSED]?.container)}
+  }
+`;
+
+export const QuickButtonStyled = styled.button<{
+  styles?: QuickButtonVariantStylesType;
+}>`
+  ${({ styles }) => getStyles(styles?.[QuickButtonState.DEFAULT]?.button)}
+
+  &:disabled {
+    ${({ styles }) => getStyles(styles?.[QuickButtonState.DISABLED]?.button)}
+  }
+
+  &:hover:not(:disabled) {
+    ${({ styles }) => getStyles(styles?.[QuickButtonState.HOVER]?.button)}
+  }
+
+  &:active:not(:disabled) {
+    ${({ styles }) => getStyles(styles?.[QuickButtonState.PRESSED]?.button)}
+  }
+`;

src/components/quickButton/quickButton.tsx

@@ -0,0 +1,80 @@
+//vendors
+import * as React from 'react';
+
+import { States, useManageState } from '@/hooks';
+//hooks
+import { useStyles } from '@/hooks/useStyles/useStyles';
+import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
+
+import { ButtonType } from '../button';
+//components
+import { QuickButtonStandAlone } from './quickButtonStandAlone';
+import {
+  IQuickButton,
+  IQuickButtonStandAlone,
+  QuickButtonState,
+  QuickButtonVariantStylesType,
+} from './types';
+
+//types
+
+const QUICK_BUTTON_STYLES = 'QUICK_BUTTON_STYLES';
+
+const QuickButtonComponent = React.forwardRef(
+  <V extends string | unknown>(
+    { type = ButtonType.BUTTON, disabled = false, ctv, ...props }: IQuickButton<V>,
+    ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
+  ): JSX.Element => {
+    const styles = useStyles<QuickButtonVariantStylesType, V>(
+      QUICK_BUTTON_STYLES,
+      props.variant,
+      ctv
+    );
+
+    const { state, setRef } = useManageState({
+      states: Object.values(QuickButtonState) as States,
+      ref: ref as React.ForwardedRef<HTMLElement> | undefined | null,
+      disabled,
+    });
+
+    return (
+      <QuickButtonStandAlone
+        {...props}
+        ref={setRef as React.ForwardedRef<HTMLButtonElement>}
+        state={state as unknown as QuickButtonState}
+        styles={styles}
+        type={type}
+      />
+    );
+  }
+);
+QuickButtonComponent.displayName = 'QuickButtonComponent';
+
+const QuickButtonBoundary = <V extends string | unknown>(
+  props: IQuickButton<V>,
+  ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
+): JSX.Element => (
+  <ErrorBoundary
+    fallBackComponent={
+      <FallbackComponent>
+        <QuickButtonStandAlone {...(props as unknown as IQuickButtonStandAlone)} ref={ref} />
+      </FallbackComponent>
+    }
+  >
+    <QuickButtonComponent {...props} ref={ref} />
+  </ErrorBoundary>
+);
+
+/**
+ * @description
+ * QuickButton component is a button component that can be used to create a button.
+ * @param {React.PropsWithChildren<IQuickButton<V>>} props
+ * @returns {JSX.Element}
+ */
+const QuickButton = React.forwardRef(QuickButtonBoundary) as <V>(
+  props: React.PropsWithChildren<IQuickButton<V>> & {
+    ref?: React.ForwardedRef<HTMLButtonElement> | undefined | null;
+  }
+) => ReturnType<typeof QuickButtonBoundary>;
+
+export { QuickButton };

src/components/quickButton/quickButtonStandAlone.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { ElementOrIcon } from '@/components/elementOrIcon';
+
+import { Label } from '../label';
+import { QuickButtonContainerStyled, QuickButtonStyled } from './quickButton.styled';
+import { IQuickButtonStandAlone, QuickButtonState } from './types';
+
+const QuickButtonStandAloneComponent = (
+  props: IQuickButtonStandAlone,
+  ref: React.ForwardedRef<HTMLButtonElement> | undefined | null
+): JSX.Element => {
+  const button = (
+    <QuickButtonStyled
+      ref={ref}
+      aria-label={props.label ? '' : props['aria-label']}
+      data-testid={props.dataTestId}
+      disabled={props.state === QuickButtonState.DISABLED}
+      id={props.buttonId}
+      styles={props.styles}
+      type={props.type}
+      onClick={props.onClick}
+    >
+      <ElementOrIcon
+        color={props.styles?.[props.state]?.icon?.color}
+        height={props.styles?.[props.state]?.icon?.height}
+        width={props.styles?.[props.state]?.icon?.width}
+        {...props.icon}
+      />
+    </QuickButtonStyled>
+  );
+
+  return props.label ? (
+    <QuickButtonContainerStyled maxWidth={props.maxWidth} styles={props.styles}>
+      {button}
+      <Label
+        color={props.styles?.[props.state]?.label?.color}
+        inputId={props.buttonId}
+        textVariant={props.styles?.[props.state]?.label?.font_family}
+        weight={props.styles?.[props.state]?.label?.font_weight}
+        {...props.label}
+      >
+        {props.label.content}
+      </Label>
+    </QuickButtonContainerStyled>
+  ) : (
+    button
+  );
+};
+
+/**
+ * @description
+ * QuickButton component is a button component that can be used to create a button.
+ * @param {React.PropsWithChildren<IQuickButtonStandAlone>} props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export const QuickButtonStandAlone = React.forwardRef(QuickButtonStandAloneComponent);

src/components/quickButton/stories/argtypes.ts

@@ -0,0 +1,140 @@
+import { ICONS } from '@/assets';
+import { ButtonType } from '@/components/button';
+import { CATEGORY_CONTROL } from '@/constants/categoryControl';
+import { IThemeObjectVariants } from '@/designSystem/themesObject';
+import { objectFlip } from '@/storybook/utils/utils';
+import { ArgTypesReturn } from '@/types';
+
+export const argtypes = (variants: IThemeObjectVariants, themeSelected: string): ArgTypesReturn => {
+  return {
+    theme: {
+      table: {
+        disable: true,
+      },
+    },
+    variant: {
+      control: { type: 'select' },
+      type: { name: 'string', required: true },
+      description: 'Quick button variant',
+      options: Object.keys(variants[themeSelected].QuickButtonVariantType || {}),
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    disabled: {
+      description: 'Specifies if the quickButton element is disabled or not',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: false },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    buttonId: {
+      description: 'String used for join button with label',
+      control: { type: 'text' },
+      type: { name: 'string' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    label: {
+      description: 'Object with label properties',
+      control: { type: 'object' },
+      type: { name: 'object' },
+      table: {
+        type: {
+          summary: 'QuickButtonLabelType',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    icon: {
+      description: 'Object with icon properties',
+      control: { type: 'object', labels: objectFlip(ICONS) },
+      type: { name: 'object' },
+      table: {
+        type: {
+          summary: 'IElementOrIcon',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    maxWidth: {
+      description: 'Max width container box',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    onClick: {
+      description: 'The event occurs when the user clicks on the element',
+      control: false,
+      table: {
+        type: {
+          summary: 'MouseEventHandler<HTMLButtonElement>',
+        },
+        category: CATEGORY_CONTROL.FUNCTIONS,
+      },
+    },
+    type: {
+      options: Object.keys(ButtonType),
+      control: { type: 'select' },
+      type: { name: 'string' },
+      description: 'Define buttons type',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: ButtonType.BUTTON },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    ['aria-label']: {
+      description: 'Aria label of the button',
+      control: { type: 'text' },
+      type: { name: 'string' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    dataTestId: {
+      description: 'String used for testing',
+      control: { type: 'text' },
+      type: { name: 'string' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.TESTING,
+      },
+    },
+    ctv: {
+      description: 'Object used for update variant styles',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'object',
+        },
+        category: CATEGORY_CONTROL.CUSTOMIZATION,
+      },
+    },
+  };
+};