feat(onboarding-ui): Create Cloud Workspace Form (#499)

* new translations

* Form

* Move List and ListItem to common

* Fix subtitle, more translations

* Create page

* Update list

* New icon

* Loki

* new input

* Fix type

* Fix domain

* Fix loki

* Fix review

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

Author: gabriellsh

packages/onboarding-ui/.i18n/en.i18n.json

@@ -6,7 +6,8 @@
         "back": "Back",
         "next": "Next"
       },
-      "requiredField": "This field is required"
+      "requiredField": "This field is required",
+      "termsAndConditions": "I agree with <1>Terms and Conditions</1> and <3>Privacy Policy</3>"
     }
   },
   "page": {
@@ -25,6 +26,18 @@
     "confirmationProcess": {
       "title": "Confirmation in Process"
     },
+    "cloudDescription": {
+      "tryGold": "Try our best Gold plan for 14 days for free",
+      "availability": "High availability",
+      "auditing": "Message audit panel / Audit logs",
+      "integrations": "1,000 integrations",
+      "ldap": "LDAP enhanced sync",
+      "omnichannel": "Omnichannel premium",
+      "sla": "SLA: Premium",
+      "push": "Secured push notifications",
+      "goldIncludes": "* Golden plan includes all features from other plans"
+    },
+    "alreadyHaveAccount": "Already have an account? <1>Manage your workspaces.</1>",
     "invalidLink": {
       "title": "Your Link is no Longer Valid",
       "content": "Seems like you have already used invite link. It’s generated for a single sign in. Request a new one to join your workspace.",
@@ -102,8 +115,7 @@
           "oAuth": "OAuth proxy for social network",
           "apps": "Apps Marketplace"
         },
-        "includeUpdates": "Include product and security updates",
-        "agreement": "I agree with <1>Terms and Conditions</1> and <3>Privacy Policy</3>"
+        "includeUpdates": "Include product and security updates"
       },
       "standalone": {
         "title": "Standalone server",
@@ -115,6 +127,32 @@
         }
       }
     },
+    "createCloudWorkspace": {
+      "title": "Create Cloud Workspace",
+      "fields": {
+        "orgName": "Organization name",
+        "orgEmail": {
+          "label": "Organization email",
+          "placeholder": "Email",
+          "invalid": "Invalid email"
+        },
+        "workspaceName": {
+          "label": "Workspace name",
+          "tooltip": "How should be a good Workspace name"
+        },
+        "workspaceUrl": {
+          "label": "Workspace URL",
+          "placeholder": "workspaceurl",
+          "tooltip": "URL of your Workspace",
+          "exists": "Workspace already exists"
+        },
+        "serverRegion": {
+          "label": "Server region",
+          "tooltip": "Where is your server located"
+        },
+        "keepMePosted": "Keep me posted about Rocket.Chat updates"
+      }
+    },
     "requestTrialForm": {
       "request": "Request Trial",
       "emailAddress": {

packages/onboarding-ui/.loki/reference/desktop_forms_CreateCloudWorkspaceForm_CreateCloudWorkspaceForm.png

@@ -72,9 +72,10 @@ export const Title = styled('div')`
 `;
 
 export const Subtitle = styled('div')`
-  font-size: ${String(40 / 16)}rem;
+  font-size: ${String(16 / 16)}rem;
+  line-height: ${String(22 / 16)}rem;
   font-family: ${sans};
-  line-height: ${String(42 / 16)}rem;
+  font-weight: 500;
   text-align: center;
 
   @media (min-width: 1440px) {

packages/onboarding-ui/.loki/reference/desktop_forms_CreateCloudWorkspaceForm_Workspace_Url_Input.png

@@ -0,0 +1,21 @@
+import styled from '@rocket.chat/styled';
+import type { CSSProperties } from 'react';
+
+type ListComponentProps = {
+  color: string;
+  icon?: string;
+  listStyleType: CSSProperties['listStyleType'];
+};
+
+export const ListComponent = styled(
+  'ul',
+  ({ color, icon, listStyleType, ...props }: ListComponentProps) => props
+)`
+  padding: 0;
+  margin: 0;
+  color: ${(p) => p.color};
+  list-style: ${(p) =>
+    p.icon
+      ? `none url('data:image/svg+xml,${p.icon}') inside`
+      : `${p.listStyleType || 'none'} inside`};
+`;

packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_Selected.png

@@ -1,25 +1,30 @@
 import { Box, Margins } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/colors.json';
 import type {
   ReactElement,
   ReactNode,
   ComponentProps,
   CSSProperties,
 } from 'react';
 
+import { ListComponent } from './List.styles';
+
 const List = ({
   children,
-  listStyle,
+  listStyleType,
+  icon,
   spacing = 'x6',
-  color = 'default',
+  color = colors.n900,
 }: {
   children: ReactNode;
   spacing?: ComponentProps<typeof Margins>['block'];
-  listStyle?: CSSProperties['listStyle'];
+  listStyleType?: CSSProperties['listStyleType'];
   color?: ComponentProps<typeof Box>['color'];
+  icon?: string;
 }): ReactElement => (
-  <Box is='ul' style={{ listStyle: listStyle || 'none' }} color={color}>
+  <ListComponent icon={icon} listStyleType={listStyleType} color={color}>
     <Margins block={spacing}>{children}</Margins>
-  </Box>
+  </ListComponent>
 );
 
 export default List;

packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_OptionCard_Unselected.png

@@ -0,0 +1,6 @@
+import List from './List';
+import ListItem from './ListItem';
+
+export default Object.assign(List, {
+  Item: ListItem,
+});

packages/onboarding-ui/.loki/reference/desktop_forms_RegisterServerForm_RegisterServerForm.png

@@ -0,0 +1,36 @@
+import type { Meta, Story } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import CreateCloudWorkspaceForm from './CreateCloudWorkspaceForm';
+import WorkspaceUrlInput from './WorkspaceUrlInput';
+
+type Args = ComponentProps<typeof CreateCloudWorkspaceForm>;
+
+export default {
+  title: 'forms/CreateCloudWorkspaceForm',
+  component: CreateCloudWorkspaceForm,
+  parameters: {
+    layout: 'centered',
+    actions: { argTypesRegex: '^on.*' },
+  },
+  args: {
+    currentStep: 1,
+    stepCount: 2,
+    serverRegionOptions: [
+      ['us', 'US'],
+      ['br', 'BR'],
+    ],
+    domain: 'rocket.chat',
+    validateUrl: async (url) => url !== 'rocket',
+    validateEmail: async (email) => email !== 'rocket',
+  },
+} as Meta<Args>;
+
+export const _CreateCloudWorkspaceForm: Story<Args> = (args) => (
+  <CreateCloudWorkspaceForm {...args} />
+);
+
+export const _WorkspaceUrlInput: Story<Args> = () => (
+  <WorkspaceUrlInput domain='rocket.chat' />
+);
+_CreateCloudWorkspaceForm.storyName = 'CreateCloudWorkspaceForm';