Feature 69 - ButtonsGroup [Dev]

packages/components/src/ButtonsGroup/ButtonsGroup.d.ts

@@ -0,0 +1,5 @@
+import { HTMLProps } from 'react';
+
+export interface ButtonsGroupProps extends HTMLProps<HTMLButtonElement> {}
+
+export default function ButtonsGroup(props: ButtonsGroupProps): JSX.Element;

packages/components/src/ButtonsGroup/ButtonsGroup.js

@@ -0,0 +1,165 @@
+import { forwardRef, useEffect, useState } from 'react';
+import { createStyleSheet } from '@platzily-ui/styling';
+import { PropTypes } from 'prop-types';
+
+const useStyleSheet = createStyleSheet(
+  (theme, { borderWrapperComponent }) => ({
+    buttonsGroupWrapper: {
+      width: 'auto',
+      height: 'auto',
+      display: 'inline-block',
+      borderStyle: 'solid',
+      borderColor: theme.palette.neutral.secondary,
+      borderWidth: 1,
+      borderRadius: borderWrapperComponent || theme.spacing(),
+    },
+    firstButtonStyle:{
+      borderTopLeftRadius: borderWrapperComponent || theme.spacing(),
+      borderBottomLeftRadius: borderWrapperComponent || theme.spacing(),
+    },
+    lastButtonStyle:{
+      borderTopRightRadius: borderWrapperComponent || theme.spacing(),
+      borderBottomRightRadius: borderWrapperComponent || theme.spacing(),
+    },
+    separationLinesButton: {
+      borderRightStyle: 'solid',
+      borderRightColor: theme.palette.neutral.secondary,
+      borderRightWidth: 1,
+    },
+    buttonsStyles:{
+      padding: '5px 10px',
+    },
+    buttonUnselected: {
+      backgroundColor: theme.palette.neutral.light,
+      color: theme.palette.neutral.dark
+    },
+    buttonSelected: {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.neutral.light
+    },
+  }),
+  { key: 'ButtonsGroup' },
+);
+
+const ButtonsGroup = forwardRef(function ButtonsGroup(props, ref) {
+  const { actions, className, classNameButtons, separationLinesButtonProp, selectedStyles, unselectedStyles, selectedButtonDefault, borderWrapperComponent, ...otherProps } = props;
+  const [state, setState] = useState(actions);
+  const { classes, cx } = useStyleSheet(props);
+  const stateLength = actions.length;
+
+  useEffect(() => {
+    if (selectedButtonDefault <= (state.length - 1)) {
+      setState(state.map((element, indexMap) => (
+        (selectedButtonDefault === indexMap)
+          ? {
+            ...element,
+            selected: true,
+          }
+          : {
+            ...element,
+            selected: false,
+          }
+      )));
+    } else {
+      setState(state.map((element, indexMap) => (
+        (indexMap === 0)
+          ? {
+            ...element,
+            selected: true,
+          }
+          : {
+            ...element,
+            selected: false,
+          }
+      )));
+    }
+  },[]);
+
+
+
+  const selectButtonStyles = (stateButton) => {
+    return stateButton ? (selectedStyles || classes.buttonSelected) : (unselectedStyles || classes.buttonUnselected);
+  };
+
+  const cornerButtonsGroup = (index) => {
+    let styleButton;
+    if (index === 0) { styleButton = classes.firstButtonStyle; }
+    if (index === (stateLength - 1)) { styleButton = classes.lastButtonStyle; }
+
+    return styleButton;
+  };
+
+  const separationLinesButton = (index) => {
+    let separationStyle;
+    if (index !== (stateLength - 1)) { separationStyle = separationLinesButtonProp || classes.separationLinesButton; }
+
+    return separationStyle;
+  };
+
+  function setStateRender(index) {
+    setState(state.map((element, indexMap) => (
+      (index === indexMap)
+        ? {
+          ...element,
+          selected: true,
+        }
+        : {
+          ...element,
+          selected: false,
+        }
+    )));
+  };
+
+  return (
+    <div ref={ref} className={cx(classes.buttonsGroupWrapper, className)} {...otherProps}>
+      {state.map((button, index) => {
+        const { selected, childrenButton, onClick } = button;
+        return (
+          <button
+            type="button"
+            key={index}
+            onClick={() => {
+              setStateRender(index);
+              onClick();
+            }}
+            className={cx(
+              selectButtonStyles(selected),
+              cornerButtonsGroup(index),
+              separationLinesButton(index),
+              classes.buttonsStyles,
+              classNameButtons
+            )}
+          >
+            {childrenButton}
+          </button>
+        );
+      })}
+    </div>
+  );
+});
+
+ButtonsGroup.propTypes = {
+  actions: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.object).isRequired,
+    PropTypes.shape({
+      childrenButton: PropTypes.element,
+      onClick: PropTypes.func,
+      selected: PropTypes.boolean,
+    }).isRequired,
+  ]),
+  borderWrapperComponent: PropTypes.number,
+  className: PropTypes.string,
+  classNameButtons: PropTypes.string,
+  selectedButtonDefault: PropTypes.number,
+  selectedStyles: PropTypes.string,
+  separationLinesButtonProp: PropTypes.string,
+  unselectedStyles: PropTypes.string,
+};
+
+ButtonsGroup.defaultProps = {
+  className: '',
+  separationLinesButtonProp: undefined,
+
+};
+
+export default ButtonsGroup;

packages/components/src/ButtonsGroup/ButtonsGroup.spec.js

@@ -0,0 +1,44 @@
+import { render } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@platzily-ui/styling';
+import ButtonsGroup from './ButtonsGroup';
+
+describe('@Components/ButtonsGroup', () => {
+  it('Given the ButtonsGroup Component, when the props provide borderWrapperComponent with a number then the ButtonsGroup component will take border-radius attribute', () => {
+    // arrange
+    const actions = [
+      {
+        childrenButton: 'Button One',
+        selected: false,
+        onClick: () => {},
+      },
+      {
+        childrenButton: 'Button Two',
+        selected: false,
+        onClick: () => {},
+      },
+      {
+        childrenButton: 'Button Three',
+        selected: false,
+        onClick: () => {},
+      },
+    ];
+
+    const { getByRole } = render(
+      <ThemeProvider theme={createTheme()}>
+        <ButtonsGroup
+          role="banner"
+          actions={actions}
+          borderWrapperComponent={5}
+        />
+      </ThemeProvider>,
+    );
+
+    // act
+    const ButtonsGroupTestedText = getByRole('banner');
+
+    // assert
+    expect(ButtonsGroupTestedText).toBeDefined();
+    expect(ButtonsGroupTestedText).toHaveStyle(`border-radius:5px`);
+  });
+
+});

packages/components/src/ButtonsGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ButtonsGroup';
+export { default } from './ButtonsGroup';

packages/components/src/ButtonsGroup/index.js

@@ -0,0 +1 @@
+export { default } from './ButtonsGroup';

packages/components/src/index.d.ts

@@ -12,3 +12,6 @@ export { default as Button } from './Button';
 
 export * from './SvgIcon';
 export { default as SvgIcon } from './SvgIcon';
+
+export * from './ButtonsGroup';
+export { default as ButtonsGroup } from './ButtonsGroup';

packages/components/src/index.js

@@ -3,3 +3,4 @@ export { default as Text } from './Text';
 export { default as Header } from './Header';
 export { default as Button } from './Button';
 export { default as SvgIcon } from './SvgIcon';
+export { default as ButtonsGroup } from './ButtonsGroup';

packages/docs/components/ButtonsGroup/ButtonsGroup.js

@@ -0,0 +1,50 @@
+import { ButtonsGroup } from '@platzily-ui/components';
+import { Fragment, useState } from 'react';
+import { createStyleSheet } from '@platzily-ui/styling';
+
+const useStyleSheet = createStyleSheet(
+  (theme) => ({
+    buttonsGroupWrapper: {
+      borderColor: theme.palette.neutral.secondary,
+    },
+  }),
+  { key: 'ButtonsGroupImplementation' },
+);
+
+export default function ButtonsGroupComponent(props) {
+  const { classes } = useStyleSheet(props);
+
+  const [render, setRender] = useState('');
+
+  const actions = [
+    {
+      childrenButton: 'Button One',
+      selected: false,
+      onClick: () => setRender('One'),
+    },
+    {
+      childrenButton: 'Button Two',
+      selected: false,
+      onClick: () => setRender('Two'),
+    },
+    {
+      childrenButton: 'Button Three',
+      selected: false,
+      onClick: () => setRender('Three'),
+    },
+  ];
+
+  return (
+    <Fragment >
+      <span style={{ display:'flex', justifyContent:'center', margin:'20px' }}>
+        <ButtonsGroup
+          actions={actions}
+          className={ classes.buttonsGroupWrapper }
+          classNameButtons = { classes.ButtonsStyles }
+        />
+      </span>
+      <p style={{ textAlign:'center', margin:'20px' }}> Actions {render}</p>
+    </Fragment>
+  );
+}
+

packages/docs/components/styling/index.js

@@ -5,6 +5,7 @@ import UseThemeStyledBoxComponent from './UseThemeStyledBox';
 import ColorComponent from './ColorComponent';
 
 import HeaderComponent from '../Header/Header';
+import ButtonsGroupComponent from '../ButtonsGroup/ButtonsGroup';
 
 import { defaultTheme, customTheme } from './theme';
 
@@ -55,7 +56,15 @@ export function Color({ color, colorType }) {
 export function Header() {
   return (
     <ThemeProvider theme={defaultTheme}>
-      <HeaderComponent  />
+      <HeaderComponent />
+    </ThemeProvider>
+  );
+}
+
+export function ButtonsGroup() {
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <ButtonsGroupComponent />
     </ThemeProvider>
   );
 }