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 <[email protected]>

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'}`,

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%'}` }}
     >

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);
+  }
+}

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' />;
+};

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>
+      )}
+    </>
+  );
+};

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';

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>
   );