Added Variants and Action layout. Changed Buttons components

src/components/Buttons/Button/Button.module.scss

@@ -0,0 +1,38 @@
+.button {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__size {
+    &--small {
+      height: 32px;
+      width: 32px;
+      min-width: 32px;
+    }
+
+    &--default {
+      height: 40px;
+      width: 40px;
+      min-width: 40px;
+    }
+
+    &--large {
+      height: 48px;
+      width: 48px;
+      min-width: 48px;
+    }
+  }
+
+  &__shape {
+    &--circle {
+      border-radius: 48px;
+    }
+
+    &--rectangle {
+      border-radius: 4px;
+      width: auto;
+      padding: 8px;
+    }
+  }
+}

src/components/Buttons/Button/Button.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import styles from './Button.module.scss';
+import classNames from 'classnames';
+import { ButtonSize } from '../../../utils/types/ButtonSize';
+import { ButtonShape } from '../../../utils/types/ButtonShape';
+
+type Props = {
+  children: ReactNode;
+  className: string;
+  onClick?: () => void;
+  size?: ButtonSize;
+  shape?: ButtonShape;
+};
+
+export const Button: React.FC<Props> = ({
+  children,
+  className,
+  size = ButtonSize.Default,
+  shape = ButtonShape.Circle,
+  onClick = () => {},
+}) => {
+  return (
+    <button
+      className={classNames(styles.button, className, {
+        [styles['button__size--small']]: size === ButtonSize.Small,
+        [styles['button__size--default']]: size === ButtonSize.Default,
+        [styles['button__size--large']]: size === ButtonSize.Large,
+        [styles['button__shape--circle']]: shape === ButtonShape.Circle,
+        [styles['button__shape--rectangle']]: shape === ButtonShape.Rectangle,
+      })}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};

src/components/Buttons/Button/index.ts

@@ -0,0 +1 @@
+export * from './Button';

src/components/Buttons/ButtonWithColor/ButtonWithColor.module.scss

@@ -0,0 +1,19 @@
+.button-with-color {
+  border: $button-with-color-border;
+  overflow: hidden;
+  padding: 3px;
+
+  &__element {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+
+    &--selected {
+      border-color: $primary-color;
+    }
+  }
+
+  &:hover {
+    border-color: $icons-color;
+  }
+}

src/components/Buttons/ButtonWithColor/ButtonWithColor.tsx

@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import { Button } from '../Button';
+import styles from './ButtonWithColor.module.scss';
+import colorsMap from '../../../utils/constants/colorsMap.json';
+import { ProductColor } from '../../../utils/types/ProductColor';
+import React from 'react';
+import { ButtonSize } from '../../../utils/types/ButtonSize';
+
+type Props = {
+  isSelected: boolean;
+  color: ProductColor;
+  onClick?: () => void;
+  size: ButtonSize;
+};
+
+export const ButtonWithColor: React.FC<Props> = ({
+  isSelected,
+  color,
+  onClick,
+  size,
+}) => {
+  return (
+    <Button
+      onClick={onClick}
+      className={classNames(styles['button-with-color'], {
+        [styles['button-with-color__element--selected']]: isSelected,
+      })}
+      size={size}
+    >
+      <div
+        className={styles['button-with-color__element']}
+        style={{ backgroundColor: colorsMap[color] }}
+      ></div>
+    </Button>
+  );
+};

src/components/Buttons/ButtonWithColor/index.ts

@@ -0,0 +1 @@
+export * from './ButtonWithColor';

src/components/Buttons/ButtonWithImage/ButtonWithImage.module.scss

@@ -0,0 +1,16 @@
+.button-with-image {
+  border: $button-border-default;
+
+  &__image {
+    width: 16px;
+    height: 16px;
+  }
+
+  &--selected {
+    border-color: $elemnts-color;
+  }
+
+  &:hover {
+    border-color: $primary-color;
+  }
+}

src/components/Buttons/ButtonWithImage/ButtonWithImage.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { Button } from '../Button';
+import styles from './ButtonWithImage.module.scss';
+import React from 'react';
+import { ButtonSize } from '../../../utils/types/ButtonSize';
+
+type Props = {
+  isSelected: boolean;
+  path: string;
+  onClick?: () => void;
+  size: ButtonSize;
+};
+
+export const ButtonWithImage: React.FC<Props> = ({
+  path,
+  size,
+  onClick,
+  isSelected,
+}) => {
+  return (
+    <Button
+      onClick={onClick}
+      className={classNames(styles['button-with-image'], {
+        [styles['button-with-image--selected']]: isSelected,
+      })}
+      size={size}
+    >
+      <img src={path} alt="" className={styles['button-with-image__image']} />
+    </Button>
+  );
+};

src/components/Buttons/ButtonWithImage/index.ts

@@ -0,0 +1 @@
+export * from './ButtonWithImage';

src/components/Buttons/ButtonWithText/ButtonWithText.module.scss

@@ -0,0 +1,14 @@
+.button-with-text {
+  border: $button-with-color-border;
+  font-weight: 600;
+
+  &--selected {
+    border-color: $primary-color;
+    background-color: $primary-color;
+    color: $white-color;
+  }
+
+  &:hover {
+    border-color: $primary-color;
+  }
+}

src/components/Buttons/ButtonWithText/ButtonWithText.tsx

@@ -0,0 +1,35 @@
+import classNames from 'classnames';
+import { Button } from '../Button';
+import styles from './ButtonWithText.module.scss';
+import React from 'react';
+import { ButtonSize } from '../../../utils/types/ButtonSize';
+import { ButtonShape } from '../../../utils/types/ButtonShape';
+
+type Props = {
+  isSelected: boolean;
+  shape: ButtonShape;
+  label: string;
+  onClick?: () => void;
+  size: ButtonSize;
+};
+
+export const ButtonWithText: React.FC<Props> = ({
+  shape,
+  label,
+  isSelected,
+  size,
+  onClick,
+}) => {
+  return (
+    <Button
+      shape={shape}
+      size={size}
+      onClick={onClick}
+      className={classNames(styles['button-with-text'], {
+        [styles['button-with-text--selected']]: isSelected,
+      })}
+    >
+      {label}
+    </Button>
+  );
+};

src/components/Buttons/ButtonWithText/index.ts

@@ -0,0 +1 @@
+export * from './ButtonWithText';

src/components/Buttons/FavoriteButton/FavoriteButton.tsx

@@ -0,0 +1,25 @@
+import heart from '../../../img/headerIcon/like.png';
+import heartSelected from '../../../img/heartOnClick.png';
+import React, { useState } from 'react';
+import { ButtonWithImage } from '../ButtonWithImage';
+import { ButtonSize } from '../../../utils/types/ButtonSize';
+
+type Props = {
+  size: ButtonSize;
+};
+
+export const FavoriteButton: React.FC<Props> = ({ size }) => {
+  const isDefaultSelected = false;
+  const [isSelected, setIsSelected] = useState(isDefaultSelected);
+
+  return (
+    <ButtonWithImage
+      onClick={() => {
+        setIsSelected(!isSelected);
+      }}
+      size={size}
+      path={isSelected ? heartSelected : heart}
+      isSelected={isSelected}
+    />
+  );
+};

src/components/Buttons/FavoriteButton/index.ts

@@ -0,0 +1 @@
+export * from './FavoriteButton';

src/components/Buttons/MainButton/MainButton.module.scss

@@ -0,0 +1,29 @@
+.main-button {
+  background-color: $wide-button-bg-color-default;
+  color: $wide-button-text-color-default;
+  width: 100%;
+  border-radius: 48px;
+  border: none;
+  transition: box-shadow, background-color, 0.1s;
+
+  &__size {
+    &--default {
+      height: 40px;
+    }
+
+    &--large {
+      height: 48px;
+    }
+  }
+
+  &:hover {
+    box-shadow: $wide-button-box-shadow-on-hover;
+  }
+
+  &:active {
+    color: $wide-button-text-color-on-click;
+    border: $wide-button-border-on-click;
+    background-color: $wide-button-bg-color-on-click;
+    box-shadow: none;
+  }
+}

src/components/Buttons/MainButton/MainButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from './MainButton.module.scss';
+import classNames from 'classnames';
+import { ButtonSize } from '../../../utils/types/ButtonSize';
+
+type Props = {
+  onClick?: () => void;
+  label: string;
+  size: Exclude<ButtonSize, ButtonSize.Small>;
+};
+
+export const MainButton: React.FC<Props> = ({
+  label,
+  onClick = () => {},
+  size,
+}) => {
+  return (
+    <button
+      className={classNames('button', styles['main-button'], {
+        [styles['main-button__size--default']]: size === ButtonSize.Default,
+        [styles['main-button__size--large']]: size === ButtonSize.Large,
+      })}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+};

src/components/Buttons/MainButton/index.ts

@@ -0,0 +1 @@
+export * from './MainButton';