Adds suspend Icon and update icons stories

Signed-off-by: Leonardo Rossi <[email protected]>

Author: leorossi

src/components/constants.js

@@ -40,7 +40,7 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERL
 export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
 export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_RICH_BLACK]
 
-export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, RICH_BLACK, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
+export const COLORS_ICON = [RICH_BLACK, MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
 export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
 export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
 

src/components/icons/SuspendIcon.jsx

@@ -0,0 +1,93 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const SuspendIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  let icon = <></>
+
+  switch (size) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='8' cy='8' r='6' stroke='currentColor' />
+          <rect x='6' y='6' width='4' height='4' rx='1' fill='currentColor' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='12' cy='12' r='9' stroke='currentColor' strokeWidth='1.5' />
+          <rect x='9' y='9' width='6' height='6' rx='1' fill='currentColor' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='20' cy='20' r='15' stroke='currentColor' strokeWidth='2' />
+          <rect x='15' y='15' width='10' height='10' rx='1.5' fill='currentColor' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+SuspendIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default SuspendIcon

src/components/icons/index.js

@@ -178,6 +178,7 @@ import SendIcon from './SendIcon'
 import ServiceIcon from './ServiceIcon'
 import ServicesWorkingIcon from './ServicesWorkingIcon'
 import SlotIcon from './SlotIcon'
+import SuspendIcon from './SuspendIcon'
 import SwitchIcon from './SwitchIcon'
 import SocialDiscordIcon from './SocialDiscordIcon'
 import SocialGitHubIcon from './SocialGitHubIcon'
@@ -399,6 +400,7 @@ export default {
   ServiceIcon,
   ServicesWorkingIcon,
   SlotIcon,
+  SuspendIcon,
   SwitchIcon,
   SocialDiscordIcon,
   SocialGitHubIcon,

src/stories/icons/Icons.stories.jsx

@@ -5,7 +5,7 @@ import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
 import WorkspaceStaticIcon from '../../components/icons/WorkspaceStaticIcon'
 import UpgradeIcon from '../../components/icons/UpgradeIcon'
 import WorkspaceDynamicIcon from '../../components/icons/WorkspaceDynamicIcon'
-import { COLORS_ICON, RICH_BLACK } from '../../components/constants'
+import { COLORS_ICON, LARGE, MEDIUM, RICH_BLACK, SIZES, SMALL } from '../../components/constants'
 import icons from '../../components/icons/index.js'
 
 const divStyle = {
@@ -121,3 +121,39 @@ export const AlertIcon = AllSizesIcons(icons.AlertIcon).bind({})
 export const ScheduledJobSettingsIcons = AllSizesIcons(icons.ScheduledJobSettingsIcon).bind({})
 export const ScheduledJobsSuspendIcons = AllSizesIcons(icons.ScheduledJobsSuspendIcon).bind({})
 export const ScheduledJobsDetailIcons = AllSizesIcons(icons.ScheduledJobsDetailIcon).bind({})
+
+const IconPreviewTemplate = ({ iconName, size, color }) => {
+  const Icon = icons[iconName]
+  if (!Icon) return <div>Icon not found</div>
+
+  return (
+    <div style={{ backgroundColor: RICH_BLACK, padding: '20px', display: 'flex', gap: '10px' }}>
+      <Icon size={SMALL} color={color} />
+      <Icon size={MEDIUM} color={color} />
+      <Icon size={LARGE} color={color} />
+    </div>
+  )
+}
+
+export const IconPreview = IconPreviewTemplate.bind({})
+IconPreview.args = {
+  iconName: 'AddIcon',
+  color: 'rich-black'
+}
+IconPreview.argTypes = {
+  iconName: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Select an icon to preview'
+  },
+  size: {
+    control: 'select',
+    options: SIZES,
+    description: 'Select icon size'
+  },
+  color: {
+    control: 'select',
+    options: COLORS_ICON,
+    description: 'Select icon color'
+  }
+}