From 13d2116897c0841c01ada62fd8ae505c15a9ac76 Mon Sep 17 00:00:00 2001
From: dmtrack <dmtrack.dev@gmail.com>
Date: Sun, 15 Oct 2023 12:53:19 +0500
Subject: [PATCH] feat: new badge component and updated iconwrapper (#125)

* feat: new badge component and updated iconwrapper

* fix: stories

* fix: badge type added

* fix: styles/logic

---------

Co-authored-by: Nikita Mashchenko <mashchenko1@icloud.com>
---
 .../badge/badge-framework/badge-framework.tsx |  4 +-
 .../badge/badge-language/badge-language.tsx   |  4 +-
 .../shared/ui/badge/badge/badge.module.scss   | 20 +++++
 .../shared/ui/badge/badge/badge.stories.tsx   | 29 +++++++
 client/src/shared/ui/badge/badge/badge.tsx    | 78 +++++++++++++++++++
 client/src/shared/ui/badge/index.ts           |  1 +
 .../shared/ui/icon-wrapper/icon-wrapper.tsx   |  8 +-
 7 files changed, 137 insertions(+), 7 deletions(-)
 create mode 100644 client/src/shared/ui/badge/badge/badge.module.scss
 create mode 100644 client/src/shared/ui/badge/badge/badge.stories.tsx
 create mode 100644 client/src/shared/ui/badge/badge/badge.tsx

diff --git a/client/src/shared/ui/badge/badge-framework/badge-framework.tsx b/client/src/shared/ui/badge/badge-framework/badge-framework.tsx
index d7d67e5e7..e2308bf94 100644
--- a/client/src/shared/ui/badge/badge-framework/badge-framework.tsx
+++ b/client/src/shared/ui/badge/badge-framework/badge-framework.tsx
@@ -32,16 +32,14 @@ import styles from './badge-framework.module.scss';
 
 interface BadgeFrameworkProps {
   data: string;
-  key: number;
   className?: string;
   maxWidth?: string;
 }
 
 export const BadgeFramework: FC<BadgeFrameworkProps> = props => {
-  const { className, maxWidth, data, key } = props;
+  const { className, maxWidth, data } = props;
   return (
     <div
-      key={key}
       className={clsx([className], styles.badge_framework)}
       style={{
         backgroundColor: `${frameworkColors[data] ? frameworkColors[data] : '#2F3239'}`,
diff --git a/client/src/shared/ui/badge/badge-language/badge-language.tsx b/client/src/shared/ui/badge/badge-language/badge-language.tsx
index 2f45b9dff..4db294123 100644
--- a/client/src/shared/ui/badge/badge-language/badge-language.tsx
+++ b/client/src/shared/ui/badge/badge-language/badge-language.tsx
@@ -31,16 +31,14 @@ import styles from './badge-language.module.scss';
  */
 interface BadgeLanguageProps {
   data: string;
-  key: number;
   className?: string;
   maxWidth?: string;
 }
 
 export const BadgeLanguage: FC<BadgeLanguageProps> = props => {
-  const { data, className, maxWidth, key } = props;
+  const { data, className, maxWidth } = props;
   return (
     <div
-      key={key}
       className={clsx([className], styles.badge_language)}
       style={{ maxWidth: `${maxWidth ? maxWidth : '100%'}` }}
     >
diff --git a/client/src/shared/ui/badge/badge/badge.module.scss b/client/src/shared/ui/badge/badge/badge.module.scss
new file mode 100644
index 000000000..f0d7fdb3f
--- /dev/null
+++ b/client/src/shared/ui/badge/badge/badge.module.scss
@@ -0,0 +1,20 @@
+.badge {
+  cursor: pointer;
+  display: flex;
+  height: 30px;
+  padding: 6px 8px 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+
+  background: var(--grey-dark-color, #2f3239);
+  border-radius: 5px;
+
+  transition: opacity 0.3s;
+  outline: none;
+  border: 1px solid transparent;
+  color: white;
+  &:hover {
+    border: 1px solid var(--green-bright-color);
+  }
+}
diff --git a/client/src/shared/ui/badge/badge/badge.stories.tsx b/client/src/shared/ui/badge/badge/badge.stories.tsx
new file mode 100644
index 000000000..5a661b512
--- /dev/null
+++ b/client/src/shared/ui/badge/badge/badge.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta } from '@storybook/react';
+import { Badge } from './badge';
+import { Cookie, Link } from '@/shared/assets';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Badge> = {
+  title: 'shared/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {},
+};
+
+export default meta;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Badge_link = () => {
+  return (
+    <Badge
+      type='link'
+      to='https://teameights.com'
+      icon={<Link width='16' height='16xs' />}
+      title='Link'
+    />
+  );
+};
+
+export const Badge_default = () => {
+  return <Badge type='block' icon={<Cookie width='16' height='16xs' />} title='Cookie' />;
+};
diff --git a/client/src/shared/ui/badge/badge/badge.tsx b/client/src/shared/ui/badge/badge/badge.tsx
new file mode 100644
index 000000000..c620abd5d
--- /dev/null
+++ b/client/src/shared/ui/badge/badge/badge.tsx
@@ -0,0 +1,78 @@
+import clsx from 'clsx';
+import { FC, ReactNode } from 'react';
+import styles from './badge.module.scss';
+import { Typography, IconWrapper } from '@/shared/ui';
+import { Colors } from '@/shared/types';
+import Link from 'next/link';
+
+/**
+ * Badge Component
+ *
+ * This is a customizable badge component tailored for displaying programming languages.
+ * The badge's content is derived from the provided `data` prop using the 'languageOptions'.
+ *
+ * Props:
+ * @prop {string} [className] - Additional Css classes to apply to the badge for custom styling.
+ * @prop {string} [maxWidth='100%'] - Custom maximum width for the badge. Must be passed with a valid Css unit (e.g. '50px', '100%'). Default is '100%'.
+ * @prop {string} [fontColor] - Color prop for text styling is located inside a badge.
+ * @prop {ReactNode} [icon] - Icon prop.
+ * @prop {string} [type] - Type prop is setting Link or just simple Badge option of component.
+ * @prop {string} [to] - Link address.
+ * @prop {string} [title] - Text inside a Badge.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * import { BadgeTeam } from 'shared/ui';
+ *
+ * <BadgeTeam data="javascript" key={1} />
+ * ```
+ *
+ * Note:
+ * - This component uses `clsx` for conditional class joining.
+ * - External styles are imported from 'styles.module.scss'. Ensure the styles are appropriately set in the SCSS file.
+ * - 'languageOptions' is used to fetch the display name of the programming language. If a language key is not listed in this object, the badge will not display the corresponding name.
+ */
+interface BadgeProps {
+  className?: string;
+  maxWidth?: string;
+  fontColor?: Colors;
+  icon: ReactNode;
+  type: 'block' | 'link';
+  to?: string;
+  title: string;
+}
+
+export const Badge: FC<BadgeProps> = props => {
+  const { className, maxWidth, icon, fontColor, title, type = 'block', to } = props;
+
+  return (
+    <>
+      {type === 'block' && (
+        <div
+          className={clsx(styles.badge, [className])}
+          style={{ maxWidth: `${maxWidth ? maxWidth : '100%'}` }}
+        >
+          <IconWrapper>{icon}</IconWrapper>
+          <Typography size='body_s' color={fontColor}>
+            {title}
+          </Typography>
+        </div>
+      )}
+
+      {type === 'link' && (
+        <Link
+          href={to || ''}
+          target='_blank'
+          className={clsx(styles.badge, [className])}
+          style={{ maxWidth: `${maxWidth ? maxWidth : '100%'}` }}
+        >
+          <IconWrapper>{icon}</IconWrapper>
+          <Typography size='body_s' color={fontColor}>
+            {title}
+          </Typography>
+        </Link>
+      )}
+    </>
+  );
+};
diff --git a/client/src/shared/ui/badge/index.ts b/client/src/shared/ui/badge/index.ts
index fe6763ddf..729feff45 100644
--- a/client/src/shared/ui/badge/index.ts
+++ b/client/src/shared/ui/badge/index.ts
@@ -1,2 +1,3 @@
 export { BadgeLanguage } from './badge-language/badge-language';
 export { BadgeFramework } from './badge-framework/badge-framework';
+export { Badge } from './badge/badge';
diff --git a/client/src/shared/ui/icon-wrapper/icon-wrapper.tsx b/client/src/shared/ui/icon-wrapper/icon-wrapper.tsx
index ed75756c6..11956a98f 100644
--- a/client/src/shared/ui/icon-wrapper/icon-wrapper.tsx
+++ b/client/src/shared/ui/icon-wrapper/icon-wrapper.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import styles from './icon-wrapper.module.scss';
+import clsx from 'clsx';
 
 export interface IconWrapperProps {
   /**
@@ -22,6 +23,10 @@ export interface IconWrapperProps {
    * [margin=0] - The margin of the wrapper.
    */
   margin?: string | number;
+  /**
+   *  - Extra styles.
+   */
+  className?: string;
   /**
    * The content to be wrapped, typically an SVG icon.
    */
@@ -50,6 +55,7 @@ export const IconWrapper: React.FC<IconWrapperProps> = props => {
     padding = 0,
     margin = 0,
     children,
+    className,
   } = props;
 
   const style = {
@@ -63,7 +69,7 @@ export const IconWrapper: React.FC<IconWrapperProps> = props => {
   } as React.CSSProperties;
 
   return (
-    <div className={styles.iconWrapper} style={style}>
+    <div className={clsx(styles.iconWrapper, [className])} style={style}>
       {children}
     </div>
   );