feat: add ai sparkle icons (#659)

pluralsh · Oct 22, 2024 · 1d0e141 · 1d0e141
1 parent e603004
commit 1d0e141
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 5 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -23,7 +23,7 @@ export const BANNER_SEVERITIES = [
 type BannerSeverity = Extract<SeverityExt, (typeof BANNER_SEVERITIES)[number]>
 const DEFAULT_SEVERITY: BannerSeverity = 'success'
 
-type BannerProps = FlexProps & {
+export type BannerProps = FlexProps & {
   severity?: BannerSeverity | 'error'
   heading?: ReactNode
   action?: ReactNode

diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
@@ -1,10 +1,9 @@
-import { type FlexProps } from 'honorable'
 import { type Ref, forwardRef, useCallback, useEffect, useState } from 'react'
 
 import { type Severity } from '../types'
 import { type Extends } from '../utils/ts-utils'
 
-import Banner from './Banner'
+import Banner, { type BannerProps } from './Banner'
 import Layer, { type LayerPositionType } from './Layer'
 
 export type ToastSeverity = Extends<Severity, 'info' | 'success' | 'danger'>
@@ -16,7 +15,7 @@ type ToastProps = {
   onCloseComplete?: () => void
   show?: boolean
   severity?: ToastSeverity
-} & FlexProps
+} & BannerProps
 
 const defaults = {
   closeTimeout: 10000, // 10 seconds
@@ -110,4 +109,4 @@ function GraphQLToast({
   )
 }
 
-export { Toast, GraphQLToast }
+export { GraphQLToast, Toast }
diff --git a/src/components/icons/AiSparkleFilledIcon.tsx b/src/components/icons/AiSparkleFilledIcon.tsx
@@ -0,0 +1,19 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.542 9.60267L5 11.5L4.458 9.60267C4.31792 9.11257 4.05527 8.66625 3.69484 8.30583C3.33441 7.9454 2.88809 7.68275 2.398 7.54267L0.5 7L2.39733 6.458C2.88743 6.31792 3.33375 6.05527 3.69417 5.69484C4.0546 5.33441 4.31725 4.88809 4.45733 4.398L5 2.5L5.542 4.39733C5.68209 4.88743 5.94473 5.33375 6.30516 5.69417C6.66559 6.0546 7.11191 6.31725 7.602 6.45733L9.5 7L7.60267 7.542C7.11257 7.68209 6.66625 7.94473 6.30583 8.30516C5.9454 8.66559 5.68275 9.11191 5.54267 9.602L5.542 9.60267ZM11.1727 4.81L11 5.5L10.8273 4.81C10.7285 4.41439 10.524 4.05308 10.2357 3.76469C9.94746 3.47629 9.58623 3.27166 9.19067 3.17267L8.5 3L9.19067 2.82733C9.58623 2.72834 9.94746 2.52371 10.2357 2.23531C10.524 1.94692 10.7285 1.58561 10.8273 1.19L11 0.5L11.1727 1.19C11.2716 1.58569 11.4761 1.94706 11.7645 2.23546C12.0529 2.52386 12.4143 2.72844 12.81 2.82733L13.5 3L12.81 3.17267C12.4143 3.27156 12.0529 3.47614 11.7645 3.76454C11.4761 4.05294 11.2716 4.41431 11.1727 4.81ZM10.2627 12.7113L10 13.5L9.73733 12.7113C9.66369 12.4904 9.53963 12.2897 9.37497 12.125C9.21031 11.9604 9.00958 11.8363 8.78867 11.7627L8 11.5L8.78867 11.2373C9.00958 11.1637 9.21031 11.0396 9.37497 10.875C9.53963 10.7103 9.66369 10.5096 9.73733 10.2887L10 9.5L10.2627 10.2887C10.3363 10.5096 10.4604 10.7103 10.625 10.875C10.7897 11.0396 10.9904 11.1637 11.2113 11.2373L12 11.5L11.2113 11.7627C10.9904 11.8363 10.7897 11.9604 10.625 12.125C10.4604 12.2897 10.3363 12.4904 10.2627 12.7113Z"
+      fill={color}
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+))
diff --git a/src/components/icons/AiSparkleOutlineIcon.tsx b/src/components/icons/AiSparkleOutlineIcon.tsx
@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M5.542 9.60267L5 11.5L4.458 9.60267C4.31792 9.11257 4.05527 8.66625 3.69484 8.30583C3.33441 7.9454 2.88809 7.68275 2.398 7.54267L0.5 7L2.39733 6.458C2.88743 6.31792 3.33375 6.05527 3.69417 5.69484C4.0546 5.33441 4.31725 4.88809 4.45733 4.398L5 2.5L5.542 4.39733C5.68208 4.88743 5.94473 5.33375 6.30516 5.69417C6.66559 6.0546 7.11191 6.31725 7.602 6.45733L9.5 7L7.60267 7.542C7.11257 7.68208 6.66625 7.94473 6.30583 8.30516C5.9454 8.66559 5.68208 9.11257 5.542 9.60267ZM11.1727 4.81L11 5.5L10.8273 4.81C10.7285 4.41439 10.524 4.05308 10.2357 3.76469C9.94746 3.47629 9.58623 3.27166 9.19067 3.17267L8.5 3L9.19067 2.82733C9.58623 2.72834 9.94746 2.52371 10.2357 2.23531C10.524 1.94692 10.7285 1.58561 10.8273 1.19L11 0.5L11.1727 1.19C11.2716 1.58569 11.4761 1.94706 11.7645 2.23546C12.0529 2.52386 12.4143 2.72844 12.81 2.82733L13.5 3L12.81 3.17267C12.4143 3.27156 12.0529 3.47614 11.7645 3.76454C11.4761 4.05294 11.2716 4.41431 11.1727 4.81ZM10.2627 12.7113L10 13.5L9.73733 12.7113C9.66369 12.4904 9.53963 12.2897 9.37497 12.125C9.21031 11.9604 9.00958 11.8363 8.78867 11.7627L8 11.5L8.78867 11.2373C9.00958 11.1637 9.21031 11.0396 9.37497 10.875C9.53963 10.7103 9.66369 10.5096 9.73733 10.2887L10 9.5L10.2627 10.2887C10.3363 10.5096 10.4604 10.7103 10.625 10.875C10.7897 11.0396 10.9904 11.1637 11.2113 11.2373L12 11.5L11.2113 11.7627C10.9904 11.8363 10.7897 11.9604 10.625 12.125C10.4604 12.2897 10.3363 12.4904 10.2627 12.7113Z"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+))
diff --git a/src/icons.ts b/src/icons.ts
@@ -1,3 +1,5 @@
+export { default as AiSparkleFilledIcon } from './components/icons/AiSparkleFilledIcon'
+export { default as AiSparkleOutlineIcon } from './components/icons/AiSparkleOutlineIcon'
 export { default as AmazonLogoIcon } from './components/icons/AmazonLogoIcon'
 export { default as AnsibleIcon } from './components/icons/AnsibleIcon'
 export { default as ApiIcon } from './components/icons/ApiIcon'