feat(fuselage): Callout Custom Icon #881

RocketChat · Oct 21, 2022 · 3dadd68 · 3dadd68
1 parent cfa253f
commit 3dadd68
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/packages/fuselage/src/components/Callout/Callout.stories.tsx b/packages/fuselage/src/components/Callout/Callout.stories.tsx
@@ -81,3 +81,9 @@ Danger.args = {
 Danger.parameters = setStoryDescription(
   'Communicates that an important aspect of the system is not working as expected and requires urgent action.'
 );
+
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+  title: 'This is a danger message',
+  icon: 'hash',
+};
diff --git a/packages/fuselage/src/components/Callout/Callout.tsx b/packages/fuselage/src/components/Callout/Callout.tsx
@@ -8,10 +8,17 @@ type CalloutProps = Omit<ComponentProps<typeof Box>, 'type' | 'name'> & {
   type?: 'info' | 'success' | 'warning' | 'danger';
   title?: ReactNode;
   children?: ReactNode;
+  icon?: ComponentProps<typeof Icon>['name'];
 };
 
-export const Callout = ({ children, title, type, ...props }: CalloutProps) => {
-  const iconName: 'info-circled' | 'checkmark-circled' | 'warning' | 'ban' =
+export const Callout = ({
+  type,
+  title,
+  children,
+  icon,
+  ...props
+}: CalloutProps) => {
+  const defaultIcon =
     (type === 'info' && 'info-circled') ||
     (type === 'success' && 'checkmark-circled') ||
     (type === 'warning' && 'warning') ||
@@ -20,7 +27,7 @@ export const Callout = ({ children, title, type, ...props }: CalloutProps) => {
 
   return (
     <Box is='section' rcx-callout rcx-callout--type={type} {...props}>
-      <Icon name={iconName} size='x20' />
+      <Icon name={icon || defaultIcon} size='x20' />
       <Box rcx-callout__wrapper>
         {title && (
           <Box is='h1' rcx-callout__title>