Adds collapse and expand square icons

Signed-off-by: Leonardo Rossi <[email protected]>
platformatic · Feb 5, 2025 · 5a1e649 · 5a1e649
1 parent 69ca20d
commit 5a1e649
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 2 deletions.
diff --git a/src/components/icons/CollapseSquareIcon.jsx b/src/components/icons/CollapseSquareIcon.jsx
@@ -0,0 +1,97 @@
+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 CollapseSquareIcon = ({
+  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}
+        >
+          <path d='M13 8L8 8L8 3' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M6 4H3C2.44772 4 2 4.44772 2 5V13C2 13.5523 2.44772 14 3 14H11C11.5523 14 12 13.5523 12 13V10' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8.5 7.5L14 2' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+        </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}
+        >
+          <path d='M19.5 12L12 12L12 4.5' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9 6H4C3.44772 6 3 6.44772 3 7V20C3 20.5523 3.44772 21 4 21H17C17.5523 21 18 20.5523 18 20V15' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12.75 11.25L21 3' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+
+        </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}
+        >
+          <path d='M32.5 20L20 20L20 7.5' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M15 10H6C5.44772 10 5 10.4477 5 11V34C5 34.5523 5.44772 35 6 35H29C29.5523 35 30 34.5523 30 34V25' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21.25 18.75L35 5' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CollapseSquareIcon.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 CollapseSquareIcon
diff --git a/src/components/icons/ExpandSquadreIcon.jsx b/src/components/icons/ExpandSquadreIcon.jsx
@@ -0,0 +1,97 @@
+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 ExpandSquareIcon = ({
+  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}
+        >
+          <path d='M9 2H14V7' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M8 4H3C2.44772 4 2 4.44772 2 5V13C2 13.5523 2.44772 14 3 14H11C11.5523 14 12 13.5523 12 13V8' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M13.5 2.5L8 8' stroke={color} strokeLinecap='round' strokeLinejoin='round' />
+        </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}
+        >
+          <path d='M13.5 3H21V10.5' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M12 6H4C3.44772 6 3 6.44772 3 7V20C3 20.5523 3.44772 21 4 21H17C17.5523 21 18 20.5523 18 20V12' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20.25 3.75L12 12' stroke={color} strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+
+        </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}
+        >
+          <path d='M22.5 5H35V17.5' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M20 10H6C5.44772 10 5 10.4477 5 11V34C5 34.5523 5.44772 35 6 35H29C29.5523 35 30 34.5523 30 34V20' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M33.75 6.25L20 20' stroke={color} strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ExpandSquareIcon.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 ExpandSquareIcon
diff --git a/src/components/icons/index.js b/src/components/icons/index.js
@@ -15,10 +15,11 @@ import ApiPerformanceIcon from './ApiPerformanceIcon'
 import AppConfigurationIcon from './AppConfigurationIcon'
 import AppDetailsIcon from './AppDetailsIcon'
 import AppEditIcon from './AppEditIcon'
+import AppEmptyIcon from './AppEmptyIcon'
 import AppIcon from './AppIcon'
 import AppListIcon from './AppListIcon'
 import AppMissingIcon from './AppMissingIcon'
-import AppEmptyIcon from './AppEmptyIcon'
+import AppOptimizedIcon from './AppOptimizedIcon'
 import AppSettingsIcon from './AppSettingsIcon'
 import ApplicationTypeIcon from './ApplicationTypeIcon'
 import AppWorkspace from './AppWorkspace'
@@ -67,6 +68,7 @@ import CloudIcon from './CloudIcon'
 import CLIIcon from './CLIIcon'
 import CodeTestingIcon from './CodeTestingIcon'
 import CollapseIcon from './CollapseIcon'
+import CollapseSquareIcon from './CollapseSquareIcon'
 import ComputerIcon from './ComputerIcon'
 import ComputerInIcon from './ComputerInIcon'
 import ComputerOutIcon from './ComputerOutIcon'
@@ -90,6 +92,7 @@ import EnlargeIcon from './EnlargeIcon'
 import EntryIcon from './EntryIcon'
 import EnvVariableszIcon from './EnvVariableszIcon'
 import ExpandIcon from './ExpandIcon'
+import ExpandSquareIcon from './ExpandSquadreIcon'
 import ExploreDocIcon from './ExploreDocIcon'
 import ExportIcon from './ExportIcon'
 import EyeClosedIcon from './EyeClosedIcon'
@@ -210,7 +213,6 @@ import WorkspaceReadyIcon from './WorkspaceReadyIcon'
 import WorkspaceStaticIcon from './WorkspaceStaticIcon'
 import ZoomInIcon from './ZoomInIcon'
 import ZoomOutIcon from './ZoomOutIcon'
-import AppOptimizedIcon from './AppOptimizedIcon'
 
 export default {
   AddIcon,
@@ -283,6 +285,7 @@ export default {
   CLIIcon,
   CodeTestingIcon,
   CollapseIcon,
+  CollapseSquareIcon,
   ComputerIcon,
   ComputerInIcon,
   ComputerOutIcon,
@@ -305,6 +308,7 @@ export default {
   EyeClosedIcon,
   EyeOpenedIcon,
   ExpandIcon,
+  ExpandSquareIcon,
   ExploreDocIcon,
   ExportIcon,
   EnlargeIcon,

diff --git a/src/stories/icons/Icons.stories.jsx b/src/stories/icons/Icons.stories.jsx
@@ -111,3 +111,5 @@ export const AWSIcons = AllSizesIcons(icons.AWSIcon).bind({})
 export const ImportIcons = AllSizesIcons(icons.ImportIcon).bind({})
 export const ExportIcons = AllSizesIcons(icons.ExportIcon).bind({})
 export const InfoCircleIcons = AllSizesIcons(icons.InfoCircleIcon).bind({})
+export const CollapseSquareIcons = AllSizesIcons(icons.CollapseSquareIcon).bind({})
+export const ExpandSquareIcon = AllSizesIcons(icons.ExpandSquareIcon).bind({})