Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add ai sparkle icons #659

Merged
merged 2 commits into from
Oct 22, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Banner.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 3 additions & 4 deletions src/components/Toast.tsx
Original file line number Diff line number Diff line change
@@ -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'>
Expand All @@ -16,7 +15,7 @@ type ToastProps = {
onCloseComplete?: () => void
show?: boolean
severity?: ToastSeverity
} & FlexProps
} & BannerProps

const defaults = {
closeTimeout: 10000, // 10 seconds
Expand Down Expand Up @@ -110,4 +109,4 @@ function GraphQLToast({
)
}

export { Toast, GraphQLToast }
export { GraphQLToast, Toast }
19 changes: 19 additions & 0 deletions src/components/icons/AiSparkleFilledIcon.tsx
Original file line number Diff line number Diff line change
@@ -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>
))
17 changes: 17 additions & 0 deletions src/components/icons/AiSparkleOutlineIcon.tsx
Original file line number Diff line number Diff line change
@@ -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>
))
2 changes: 2 additions & 0 deletions src/icons.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand Down
Loading