feat: Callout improvements and new icons (#628)

pluralsh · Jul 30, 2024 · da12ac7 · da12ac7
1 parent bb1f422
commit da12ac7
Show file tree

Hide file tree

Showing 9 changed files with 2,005 additions and 1,794 deletions.
diff --git a/src/components/Callout.tsx b/src/components/Callout.tsx
@@ -7,7 +7,7 @@ import AnimateHeight from 'react-animate-height'
 
 import { type ColorKey, type SeverityExt, sanitizeSeverity } from '../types'
 
-import { CaretDownIcon, CloseIcon } from '../icons'
+import { CaretDownIcon, CloseIcon, InfoOutlineIcon } from '../icons'
 
 import { useDisclosure } from '../hooks/useDisclosure'
 
@@ -27,6 +27,7 @@ import IconFrame from './IconFrame'
 
 const CALLOUT_SEVERITIES = [
   'info',
+  'neutral',
   'danger',
   'warning',
   'success',
@@ -42,27 +43,31 @@ export type CalloutSize = 'compact' | 'full'
 
 const severityToIconColorKey: Record<CalloutSeverity, ColorKey> = {
   info: 'icon-info',
+  neutral: 'icon-light',
   success: 'icon-success',
   warning: 'icon-warning',
   danger: 'icon-danger',
 }
 
 const severityToBorderColorKey: Record<CalloutSeverity, ColorKey> = {
   info: 'border-info',
+  neutral: 'border-selected',
   success: 'border-success',
   warning: 'border-warning',
   danger: 'border-danger',
 }
 
 const severityToText: Record<CalloutSeverity, string> = {
   info: 'Info',
+  neutral: 'Neutral',
   success: 'Success',
   warning: 'Warning',
   danger: 'Danger',
 }
 
 const severityToIcon: Record<CalloutSeverity, any> = {
   info: InfoIcon,
+  neutral: InfoOutlineIcon,
   success: StatusOkIcon,
   warning: WarningIcon,
   danger: ErrorIcon,
@@ -198,7 +203,9 @@ const Callout = forwardRef<HTMLDivElement, CalloutProps>(
               {title}
             </h6>
             <AnimateHeight
-              contentClassName={classNames('body', { bodyWithTitle: !!title })}
+              contentClassName={classNames('body', {
+                bodyWithTitle: !!title && !!children,
+              })}
               duration={300}
               height={
                 (expandable && expanded) || !expandable

diff --git a/src/components/icons/PodContainerIcon.tsx b/src/components/icons/PodContainerIcon.tsx
@@ -0,0 +1,16 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M0.4 1.60669C0.18 1.60669 0 1.79955 0 2.03526C0 2.27098 0.18 2.46383 0.4 2.46383H0.8V12.7495H0.4C0.18 12.7495 0 12.9424 0 13.1781C0 13.4138 0.18 13.6067 0.4 13.6067H1.2H14.8H15.6C15.82 13.6067 16 13.4138 16 13.1781C16 12.9424 15.82 12.7495 15.6 12.7495H15.2V2.46383H15.6C15.82 2.46383 16 2.27098 16 2.03526C16 1.79955 15.82 1.60669 15.6 1.60669H14.8H1.2H0.4ZM1.6 12.7495V2.46383H14.4V12.7495H1.6ZM4.8 4.60669C4.8 4.37098 4.62 4.17812 4.4 4.17812C4.18 4.17812 4 4.37098 4 4.60669V10.6067C4 10.8424 4.18 11.0353 4.4 11.0353C4.62 11.0353 4.8 10.8424 4.8 10.6067V4.60669ZM7.2 4.60669C7.2 4.37098 7.02 4.17812 6.8 4.17812C6.58 4.17812 6.4 4.37098 6.4 4.60669V10.6067C6.4 10.8424 6.58 11.0353 6.8 11.0353C7.02 11.0353 7.2 10.8424 7.2 10.6067V4.60669ZM9.6 4.60669C9.6 4.37098 9.42 4.17812 9.2 4.17812C8.98 4.17812 8.8 4.37098 8.8 4.60669V10.6067C8.8 10.8424 8.98 11.0353 9.2 11.0353C9.42 11.0353 9.6 10.8424 9.6 10.6067V4.60669ZM12 4.60669C12 4.37098 11.82 4.17812 11.6 4.17812C11.38 4.17812 11.2 4.37098 11.2 4.60669V10.6067C11.2 10.8424 11.38 11.0353 11.6 11.0353C11.82 11.0353 12 10.8424 12 10.6067V4.60669Z"
+      fill={color}
+    />
+  </svg>
+))
diff --git a/src/components/icons/StackRunCanceledIcon.tsx b/src/components/icons/StackRunCanceledIcon.tsx
@@ -0,0 +1,37 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_5967_118)">
+      <path
+        d="M10.132 1.74243H5.86788C5.30524 1.74243 4.84912 2.19854 4.84912 2.76119V7.02527C4.84912 7.58791 5.30524 8.04403 5.86788 8.04403H10.132C10.6946 8.04403 11.1507 7.58791 11.1507 7.02527V2.76119C11.1507 2.19854 10.6946 1.74243 10.132 1.74243Z"
+        fill={color}
+      />
+    </g>
+    <path
+      d="M2 8.39331L7.89923 11.8345C7.9615 11.8709 8.0385 11.8709 8.10077 11.8345L14 8.39331"
+      stroke={color}
+      strokeLinecap="round"
+    />
+    <path
+      d="M2 11.8933L7.89923 15.3345C7.9615 15.3709 8.0385 15.3709 8.10077 15.3345L14 11.8933"
+      stroke={color}
+      strokeLinecap="round"
+    />
+    <defs>
+      <clipPath id="clip0_5967_118">
+        <rect
+          width="7"
+          height="7"
+          fill={color}
+          transform="translate(4.5 1.39331)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+))
diff --git a/src/components/icons/StackRunIcon.tsx b/src/components/icons/StackRunIcon.tsx
@@ -0,0 +1,28 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 4.5L8 8V1L14 4.5Z"
+      fill={color}
+      stroke={color}
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2 8L7.89923 11.4412C7.9615 11.4775 8.0385 11.4775 8.10077 11.4412L14 8"
+      stroke={color}
+      strokeLinecap="round"
+    />
+    <path
+      d="M2 11.5L7.89923 14.9412C7.9615 14.9775 8.0385 14.9775 8.10077 14.9412L14 11.5"
+      stroke={color}
+      strokeLinecap="round"
+    />
+  </svg>
+))
diff --git a/src/components/icons/StackRunPausedIcon.tsx b/src/components/icons/StackRunPausedIcon.tsx
@@ -0,0 +1,41 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_5968_142)">
+      <path
+        d="M7.29903 1.69507H5.91846V8.09155H7.29903V1.69507Z"
+        fill={color}
+      />
+      <path
+        d="M10.0815 1.69507H8.70093V8.09155H10.0815V1.69507Z"
+        fill={color}
+      />
+    </g>
+    <path
+      d="M2 8.39331L7.89923 11.8345C7.9615 11.8709 8.0385 11.8709 8.10077 11.8345L14 8.39331"
+      stroke={color}
+      strokeLinecap="round"
+    />
+    <path
+      d="M2 11.8933L7.89923 15.3345C7.9615 15.3709 8.0385 15.3709 8.10077 15.3345L14 11.8933"
+      stroke={color}
+      strokeLinecap="round"
+    />
+    <defs>
+      <clipPath id="clip0_5968_142">
+        <rect
+          width="7"
+          height="7"
+          fill={color}
+          transform="translate(4.5 1.39331)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+))
diff --git a/src/components/icons/StackRunPendingIcon.tsx b/src/components/icons/StackRunPendingIcon.tsx
@@ -0,0 +1,37 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    viewBox="0 0 16 17"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 8.39331L7.89923 11.8345C7.9615 11.8709 8.0385 11.8709 8.10077 11.8345L14 8.39331"
+      stroke={color}
+      strokeLinecap="round"
+    />
+    <path
+      d="M2 11.8933L7.89923 15.3345C7.9615 15.3709 8.0385 15.3709 8.10077 15.3345L14 11.8933"
+      stroke={color}
+      strokeLinecap="round"
+    />
+    <g clipPath="url(#clip0_5875_37792)">
+      <path
+        d="M8 1.39331C6.075 1.39331 4.5 2.96831 4.5 4.89331C4.5 6.81831 6.075 8.39331 8 8.39331C9.925 8.39331 11.5 6.81831 11.5 4.89331C11.5 2.96831 9.925 1.39331 8 1.39331ZM6.5125 5.28706C6.29375 5.28706 6.11875 5.11206 6.11875 4.89331C6.11875 4.67456 6.29375 4.49956 6.5125 4.49956C6.73125 4.49956 6.90625 4.67456 6.90625 4.89331C6.95 5.11206 6.73125 5.28706 6.5125 5.28706ZM8 5.28706C7.78125 5.28706 7.60625 5.11206 7.60625 4.89331C7.60625 4.67456 7.78125 4.49956 8 4.49956C8.21875 4.49956 8.39375 4.67456 8.39375 4.89331C8.39375 5.11206 8.21875 5.28706 8 5.28706ZM9.4875 5.28706C9.26875 5.28706 9.09375 5.11206 9.09375 4.89331C9.09375 4.67456 9.26875 4.49956 9.4875 4.49956C9.70625 4.49956 9.88125 4.67456 9.88125 4.89331C9.88125 5.11206 9.70625 5.28706 9.4875 5.28706Z"
+        fill={color}
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5875_37792">
+        <rect
+          width="7"
+          height="7"
+          fill={color}
+          transform="translate(4.5 1.39331)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+))
diff --git a/src/icons.ts b/src/icons.ts
@@ -146,6 +146,7 @@ export { default as PipelineIcon } from './components/icons/PipelineIcon'
 export { default as PlanIcon } from './components/icons/PlanIcon'
 export { default as PlayIcon } from './components/icons/PlayIcon'
 export { default as PlusIcon } from './components/icons/PlusIcon'
+export { default as PodContainerIcon } from './components/icons/PodContainerIcon'
 export { default as PrClosedIcon } from './components/icons/PrClosedIcon'
 export { default as PrMergedIcon } from './components/icons/PrMergedIcon'
 export { default as ProjectIcon } from './components/icons/ProjectIcon'
@@ -176,6 +177,10 @@ export { default as SourcererHatIcon } from './components/icons/SourcererHatIcon
 export { default as SourcererIcon } from './components/icons/SourcererIcon'
 export { default as SprayIcon } from './components/icons/SprayIcon'
 export { default as StackIcon } from './components/icons/StackIcon'
+export { default as StackRunIcon } from './components/icons/StackRunIcon'
+export { default as StackRunCanceledIcon } from './components/icons/StackRunCanceledIcon'
+export { default as StackRunPausedIcon } from './components/icons/StackRunPausedIcon'
+export { default as StackRunPendingIcon } from './components/icons/StackRunPendingIcon'
 export { default as StarIcon } from './components/icons/StarIcon'
 export { default as StatusIpIcon } from './components/icons/StatusIpIcon'
 export { default as StatusOkIcon } from './components/icons/StatusOkIcon'

diff --git a/src/stories/Callout.stories.tsx b/src/stories/Callout.stories.tsx
@@ -33,6 +33,7 @@ export default {
 
 const styles: CalloutProps['severity'][] = [
   'info',
+  'neutral',
   'success',
   'warning',
   'danger',
@@ -61,7 +62,12 @@ function Template({
   title,
   fillLevel,
   onFillLevel,
-}: CalloutProps & { withButton: boolean; onFillLevel: FillLevel }) {
+  noContent,
+}: CalloutProps & {
+  withButton: boolean
+  noContent?: boolean
+  onFillLevel: FillLevel
+}) {
   let Wrapper = Div
   let wrapperProps = {}
 
@@ -93,7 +99,11 @@ function Template({
           buttonProps={withButton ? { children: 'Button text' } : undefined}
           expandable={expandable}
         >
-          {size === 'compact' ? compactContent : fullContent}
+          {noContent
+            ? undefined
+            : size === 'compact'
+            ? compactContent
+            : fullContent}
         </Callout>
       ))}
     </Wrapper>
@@ -192,6 +202,15 @@ WithTitle.args = {
   onFillLevel: 0,
 }
 
+export const OnlyTitle = Template.bind({})
+OnlyTitle.args = {
+  title: 'Title text - How to write a dummy title',
+  size: 'full',
+  noContent: true,
+  withButton: false,
+  onFillLevel: 0,
+}
+
 export const Compact = Template.bind({})
 Compact.args = {
   title: '',