feat(onboarding-ui): create reusable InformationPage (#663)

Author: PedroRorato

packages/onboarding-ui/src/pages/InformationPage/InformationPage.spec.tsx

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

packages/onboarding-ui/src/pages/InformationPage/InformationPage.stories.tsx

@@ -0,0 +1,24 @@
+import type { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import InformationPage from './InformationPage';
+
+type Args = ComponentProps<typeof InformationPage>;
+
+export default {
+  title: 'pages/InformationPage',
+  component: InformationPage,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Place your title here',
+    description: 'Place your description here',
+  },
+} as Meta<Args>;
+
+export const _InformationPage: Story<Args> = (args) => (
+  <InformationPage {...args} />
+);
+_InformationPage.storyName = 'InformationPage';

packages/onboarding-ui/src/pages/InformationPage/InformationPage.tsx

@@ -0,0 +1,40 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+
+import BackgroundLayer from '../../common/BackgroundLayer';
+import { OnboardingLogo } from '../../common/OnboardingLogo';
+
+type InformationPageProps = {
+  title: string;
+  description: string;
+};
+
+const InformationPage = ({
+  title,
+  description,
+}: InformationPageProps): ReactElement => (
+  <BackgroundLayer>
+    <Box
+      display='flex'
+      flexDirection='column'
+      alignItems='center'
+      textAlign='center'
+      width='100%'
+      maxWidth={624}
+      paddingBlock={32}
+      paddingInline={16}
+    >
+      <Margins blockEnd={32}>
+        <OnboardingLogo />
+
+        <Box fontWeight={800} fontSize='x52' lineHeight='x62' fontFamily='sans'>
+          {title}
+        </Box>
+
+        <Box fontScale='p1'>{description}</Box>
+      </Margins>
+    </Box>
+  </BackgroundLayer>
+);
+
+export default InformationPage;

packages/onboarding-ui/src/pages/InformationPage/index.ts

@@ -0,0 +1 @@
+export { default } from './InformationPage';