feat: Callout component (#69)

.vscode/fuselage.code-snippets

@@ -6,8 +6,7 @@
       "import React from 'react';",
       "import ReactDOM from 'react-dom';",
       "",
-      "import { $1 } from '.';",
-      "",
+      "import { $1 } from '../..';",
       "",
       "it('renders without crashing', () => {",
       "  const div = document.createElement('div');",

packages/fuselage/.jest/setup.js

@@ -0,0 +1,11 @@
+const { warn, error } = console;
+
+global.console.warn = (message) => {
+  warn.call(console, message);
+  throw (message instanceof Error ? message : new Error(message));
+}
+
+global.console.error = (message) => {
+  error.call(console, message);
+  throw (message instanceof Error ? message : new Error(message));
+}

packages/fuselage/package.json

@@ -92,7 +92,10 @@
   "jest": {
     "moduleNameMapper": {
       "\\.(css|scss)$": "<rootDir>/.jest/styleMock.js"
-    }
+    },
+    "setupFiles": [
+      "<rootDir>/.jest/setup.js"
+    ]
   },
   "loki": {
     "configurations": {

packages/fuselage/src/components/Callout/index.js

@@ -0,0 +1,49 @@
+import { useClassName } from '@rocket.chat/fuselage-hooks';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { useTheme } from '../../hooks/useTheme';
+import { Icon } from '../Icon';
+import { StyledCallout, Wrapper, Title } from './styles';
+
+export const Callout = React.forwardRef(function Callout({
+  children,
+  className,
+  title,
+  type = 'info',
+  ...props
+}, ref) {
+  const classNames = {
+    container: useClassName('rcx-callout', { type }, className),
+    wrapper: useClassName('rcx-callout__wrapper'),
+    title: useClassName('rcx-callout__title'),
+    description: useClassName('rcx-callout__description'),
+  };
+  const theme = useTheme();
+
+  const iconName = (type === 'info' && 'info-circled')
+    || (type === 'success' && 'checkmark-circled')
+    || (type === 'warning' && 'warning')
+    || (type === 'danger' && 'ban');
+
+  return <StyledCallout className={classNames.container} ref={ref} theme={theme} type={type} {...props}>
+    <Icon name={iconName} />
+    <Wrapper theme={theme}>
+      <Title hasChildren={!!children} theme={theme}>{title}</Title>
+      {children}
+    </Wrapper>
+  </StyledCallout>;
+});
+
+Callout.defaultProps = {
+  type: 'info',
+};
+
+Callout.displayName = 'Callout';
+
+Callout.propTypes = {
+  children: PropTypes.node,
+  invisible: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['info', 'success', 'warning', 'danger']).isRequired,
+};

packages/fuselage/src/components/Callout/spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Callout } from '../..';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Callout title='' />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/fuselage/src/components/Callout/stories.mdx

@@ -0,0 +1,45 @@
+import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+import LinkTo from '@storybook/addon-links/react';
+
+import { Callout } from '../..';
+
+<Meta title='Misc|Callout' parameters={{ jest: ['Callout/spec'] }} />
+
+# Callout
+
+The <LinkTo kind='Misc|Callout' story='Default Story'>`Callout`</LinkTo> is used to get the user's attention explaining
+something important in the content of the current page.
+
+<Preview>
+  <Story name='Default'>
+    <>
+      <Callout title='This is a generic message' />
+      <Callout title='This is a successful message' type='success' />
+      <Callout title='This is a warning message' type='warning' />
+      <Callout title='This is a danger message' type='danger' />
+    </>
+  </Story>
+</Preview>
+
+<Props of={Callout} />
+
+## With description
+
+<Preview>
+  <Story name='With Description'>
+    <>
+      <Callout title='This is a generic message'>
+        This is a generic description.
+      </Callout>
+      <Callout title='This is a successful message' type='success'>
+        This is a successful description.
+      </Callout>
+      <Callout title='This is a warning message' type='warning'>
+        This is a warning description.
+      </Callout>
+      <Callout title='This is a danger message' type='danger'>
+        This is a danger description.
+      </Callout>
+    </>
+  </Story>
+</Preview>

packages/fuselage/src/components/Callout/styles.js

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components';
+import colors from '@rocket.chat/fuselage-tokens/colors';
+
+import box from '../../styles/box';
+import { truncate, caption, captionBold } from '../../styles/utilities/typography';
+import { StyledIcon } from '../Icon/styles';
+
+export const StyledCallout = styled.div`
+  ${ box }
+
+  display: flex;
+  margin: 0 0 ${ ({ theme }) => theme.spaces.x24 };
+  padding: ${ ({ theme }) => theme.spaces.x16 };
+  border-radius: ${ ({ theme }) => theme.borders.radius.x2 };
+
+  ${ ({ type }) =>
+    (type === 'info' && css`
+      background-color: ${ colors.blue200 };
+    `)
+    || (type === 'success' && css`
+      background-color: ${ colors.green200 };
+    `)
+    || (type === 'warning' && css`
+      background-color: ${ colors.yellow200 };
+    `)
+    || (type === 'danger' && css`
+      background-color: ${ colors.red200 };
+    `) }
+
+  & > ${ StyledIcon } {
+    font-size: ${ ({ theme }) => theme.sizes.x16 };
+  }
+`;
+
+export const Wrapper = styled.div`
+  ${ box }
+  flex: 1 1 0;
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 0 ${ ({ theme }) => theme.spaces.x8 };
+  color: ${ ({ theme }) => theme.textColors.default };
+  ${ ({ theme }) => caption(theme) }
+`;
+
+export const Title = styled.div`
+  ${ box }
+  ${ ({ theme }) => captionBold(theme) }
+  ${ ({ hasChildren, theme }) => hasChildren && css`
+    margin-bottom: ${ theme.spaces.x4 };
+  ` }
+  ${ truncate }
+`;

packages/fuselage/src/components/index.js

@@ -1,6 +1,7 @@
 export * from './Box';
 export * from './Button';
 export * from './ButtonGroup';
+export * from './Callout';
 export * from './CheckBox';
 export * from './EmailInput';
 export * from './Field';