From 04b12e6c39d4c5bcf42d695917b2f120c48ee9e9 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 20 Dec 2023 10:36:37 -0300
Subject: [PATCH] feat(fuselage): `FramedIcon` new component

---
 .../components/FramedIcon/FramedIcon.spec.tsx | 31 ++++++++++++++++
 .../FramedIcon/FramedIcon.stories.tsx         | 35 +++++++++++++++++++
 .../FramedIcon/FramedIcon.styles.scss         | 33 +++++++++++++++++
 .../src/components/FramedIcon/FramedIcon.tsx  | 35 +++++++++++++++++++
 .../src/components/FramedIcon/index.ts        |  1 +
 packages/fuselage/src/components/index.scss   |  1 +
 packages/fuselage/src/components/index.ts     |  1 +
 7 files changed, 137 insertions(+)
 create mode 100644 packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
 create mode 100644 packages/fuselage/src/components/FramedIcon/FramedIcon.stories.tsx
 create mode 100644 packages/fuselage/src/components/FramedIcon/FramedIcon.styles.scss
 create mode 100644 packages/fuselage/src/components/FramedIcon/FramedIcon.tsx
 create mode 100644 packages/fuselage/src/components/FramedIcon/index.ts

diff --git a/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx b/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
new file mode 100644
index 0000000000..80b4ae3eb0
--- /dev/null
+++ b/packages/fuselage/src/components/FramedIcon/FramedIcon.spec.tsx
@@ -0,0 +1,31 @@
+import { composeStories } from '@storybook/testing-react';
+import { render } from '@testing-library/react';
+import { axe } from 'jest-axe';
+import React from 'react';
+
+import * as stories from './FramedIcon.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[FramedIcon rendering]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />);
+      expect(tree.baseElement).toMatchSnapshot();
+    }
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    }
+  );
+});
diff --git a/packages/fuselage/src/components/FramedIcon/FramedIcon.stories.tsx b/packages/fuselage/src/components/FramedIcon/FramedIcon.stories.tsx
new file mode 100644
index 0000000000..54cf3057f4
--- /dev/null
+++ b/packages/fuselage/src/components/FramedIcon/FramedIcon.stories.tsx
@@ -0,0 +1,35 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+
+import { FramedIcon } from './FramedIcon';
+
+export default {
+  title: 'Data Display/FramedIcon',
+  component: FramedIcon,
+} as ComponentMeta<typeof FramedIcon>;
+
+const Template: ComponentStory<typeof FramedIcon> = (args) => (
+  <FramedIcon {...args} icon='rocket' />
+);
+
+export const Default = Template.bind({});
+
+export const Info = Template.bind({});
+Info.args = {
+  info: true,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  success: true,
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  warning: true,
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  danger: true,
+};
diff --git a/packages/fuselage/src/components/FramedIcon/FramedIcon.styles.scss b/packages/fuselage/src/components/FramedIcon/FramedIcon.styles.scss
new file mode 100644
index 0000000000..4ecc14a097
--- /dev/null
+++ b/packages/fuselage/src/components/FramedIcon/FramedIcon.styles.scss
@@ -0,0 +1,33 @@
+@use '../../styles/colors.scss';
+@use '../../styles/typography.scss';
+@use '../../styles/lengths.scss';
+
+.rcx-framed-icon {
+  @include typography.use-font-scale(p2m);
+
+  padding: lengths.padding(4);
+
+  color: colors.font(secondary-info);
+  border-radius: lengths.border-radius(medium);
+  background-color: colors.surface(tint);
+
+  &--info {
+    color: colors.status-font(on-info);
+    background-color: colors.status-background(info);
+  }
+
+  &--success {
+    color: colors.status-font(on-success);
+    background-color: colors.status-background(success);
+  }
+
+  &--warning {
+    color: colors.status-font(on-warning);
+    background-color: colors.status-background(warning);
+  }
+
+  &--danger {
+    color: colors.status-font(on-danger);
+    background-color: colors.status-background(danger);
+  }
+}
diff --git a/packages/fuselage/src/components/FramedIcon/FramedIcon.tsx b/packages/fuselage/src/components/FramedIcon/FramedIcon.tsx
new file mode 100644
index 0000000000..9ce6111885
--- /dev/null
+++ b/packages/fuselage/src/components/FramedIcon/FramedIcon.tsx
@@ -0,0 +1,35 @@
+import type { Keys } from '@rocket.chat/icons';
+import React from 'react';
+
+import { Icon } from '../Icon';
+
+type FramedIconProps = {
+  info?: boolean;
+  success?: boolean;
+  warning?: boolean;
+  danger?: boolean;
+  neutral?: boolean;
+  icon: Keys;
+};
+
+export const FramedIcon = ({
+  info,
+  success,
+  warning,
+  danger,
+  neutral,
+  icon,
+}: FramedIconProps) => (
+  <Icon
+    rcx-framed-icon
+    rcx-framed-icon--info={info}
+    rcx-framed-icon--success={success}
+    rcx-framed-icon--warning={warning}
+    rcx-framed-icon--danger={danger}
+    rcx-framed-icon--neutral={
+      neutral || (!info && !success && !warning && !danger)
+    }
+    name={icon}
+    size={20}
+  />
+);
diff --git a/packages/fuselage/src/components/FramedIcon/index.ts b/packages/fuselage/src/components/FramedIcon/index.ts
new file mode 100644
index 0000000000..0ebac1d5d7
--- /dev/null
+++ b/packages/fuselage/src/components/FramedIcon/index.ts
@@ -0,0 +1 @@
+export * from './FramedIcon';
diff --git a/packages/fuselage/src/components/index.scss b/packages/fuselage/src/components/index.scss
index 65ecfba99e..5b762d00d3 100644
--- a/packages/fuselage/src/components/index.scss
+++ b/packages/fuselage/src/components/index.scss
@@ -17,6 +17,7 @@
 @import './Dropdown/Dropdown.styles.scss';
 @import './Field/Field.styles.scss';
 @import './FieldGroup/FieldGroup.styles.scss';
+@import './FramedIcon/FramedIcon.styles.scss';
 @import './Grid/Grid.styles.scss';
 @import './Icon/Icon.styles.scss';
 @import './InputBox/InputBox.styles.scss';
diff --git a/packages/fuselage/src/components/index.ts b/packages/fuselage/src/components/index.ts
index 23225c7d63..6b4f9e3f0c 100644
--- a/packages/fuselage/src/components/index.ts
+++ b/packages/fuselage/src/components/index.ts
@@ -24,6 +24,7 @@ export * from './EmailInput';
 export { default as Field } from './Field';
 export * from './Field';
 export * from './FieldGroup';
+export * from './FramedIcon';
 export { default as Flex } from './Flex';
 export * from './Grid';
 export * from './Icon';