feat(fuselage): FramedIcon new component

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();
+    }
+  );
+});

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,
+};

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);
+  }
+}

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}
+  />
+);

packages/fuselage/src/components/FramedIcon/index.ts

@@ -0,0 +1 @@
+export * from './FramedIcon';

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';

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';