feat(fuselage): Field.Link component (#619)

* feat: add field link component

* add storybook improvements

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

packages/fuselage/src/components/Field/Field.Description.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Field } from '.';
+import Field from '.';
 
 it('renders without crashing', () => {
   render(<Field.Description />);

packages/fuselage/src/components/Field/Field.Error.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Field } from '.';
+import Field from '.';
 
 it('renders without crashing', () => {
   render(<Field.Error />);

packages/fuselage/src/components/Field/Field.Hint.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Field } from '.';
+import Field from '.';
 
 it('renders without crashing', () => {
   render(<Field.Hint />);

packages/fuselage/src/components/Field/Field.Label.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Field } from '.';
+import Field from '.';
 
 it('renders without crashing', () => {
   render(<Field.Label />);

packages/fuselage/src/components/Field/Field.Link.spec.tsx

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import Field from '.';
+
+it('renders without crashing', () => {
+  render(<Field.Link />);
+});

packages/fuselage/src/components/Field/Field.Row.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Field } from '.';
+import Field from '.';
 
 it('renders without crashing', () => {
   render(<Field.Row />);

packages/fuselage/src/components/Field/Field.spec.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import { Field } from '.';
+import Field from '.';
 
 it('renders without crashing', () => {
   render(<Field />);

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

@@ -1,4 +1,4 @@
-import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks';
 
 import { CheckBox, Field, InputBox, ToggleSwitch } from '../..';
 
@@ -16,17 +16,30 @@ A `Field` is a wrapper representing an entry in a form.
       <Field.Row>
         <InputBox.Skeleton />
       </Field.Row>
-      <Field.Hint>Hint</Field.Hint>
       <Field.Error>Error</Field.Error>
+      <Field.Hint>Hint</Field.Hint>
     </Field>
   </Story>
 </Canvas>
 
-<ArgsTable of={Field} />
-
 ## Field.Label
 
-<ArgsTable of={Field.Label} />
+This property is mandatory:
+
+- If the surrounding user interface does not make explicit how the input should be used;
+
+- Or there are no surrounding user interface explicitly connected to the input usage;
+
+<Canvas>
+  <Story name='Label'>
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Row>
+        <InputBox.Skeleton />
+      </Field.Row>
+    </Field>
+  </Story>
+</Canvas>
 
 ### Label positioning for selection buttons
 
@@ -54,16 +67,119 @@ A `Field` is a wrapper representing an entry in a form.
 
 ## Field.Description
 
-<ArgsTable of={Field.Description} />
+Descriptions should add useful and relevant additional information about what is required of the user for the related input. Its content is strictly composed by plain text.
 
-## Field.Row
+<Canvas>
+  <Story name='Description'>
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Description>Description</Field.Description>
+      <Field.Row>
+        <InputBox.Skeleton />
+      </Field.Row>
+    </Field>
+  </Story>
+</Canvas>
 
-<ArgsTable of={Field.Row} />
+## Field.Row
 
-## Field.Hint
+The `Field.Row` is mostly used to wrap a input component.
 
-<ArgsTable of={Field.Hint} />
+<Canvas>
+  <Story name='Row'>
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Row>
+        <InputBox.Skeleton />
+      </Field.Row>
+    </Field>
+  </Story>
+</Canvas>
 
 ## Field.Error
 
-<ArgsTable of={Field.Error} />
+They appear when the user has inputted an invalid response to a field and let's the user know exactly what the issue is so as to lets them remedy the error as easily as possible.
+
+<Canvas>
+  <Story name='Error'>
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Row>
+        <InputBox.Skeleton />
+      </Field.Row>
+      <Field.Error>Error text</Field.Error>
+    </Field>
+  </Story>
+</Canvas>
+
+## Field Hint
+
+Hint fields help by explaining technical terms or concepts related to third-party apps and integrations.
+
+<Canvas>
+  <Story name='Hint'>
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Row>
+        <InputBox.Skeleton />
+      </Field.Row>
+      <Field.Error>Error text</Field.Error>
+    </Field>
+  </Story>
+</Canvas>
+
+### Hint and Error together
+
+`Field.Error` must be above `Field.Hint` when both are present.
+
+<Canvas>
+  <Story name='Error and Hint'>
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Row>
+        <InputBox.Skeleton />
+      </Field.Row>
+      <Field.Error>Error text</Field.Error>
+      <Field.Hint>Hint text</Field.Hint>
+    </Field>
+  </Story>
+</Canvas>
+
+## Field Link
+
+Link to external resources or documentation to let the user learn more should they wish to.
+
+A `Field.Row` wrapper should be used to keep the `Field.Link` at the right side.
+
+<Canvas>
+  <Story name='Link'>
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Row>
+        <InputBox.Skeleton />
+      </Field.Row>
+      <Field.Row justifyContent='end'>
+        <Field.Link href='#'>Link name</Field.Link>
+      </Field.Row>
+    </Field>
+  </Story>
+</Canvas>
+
+### Hint and Link together
+
+When both `Field.Hint` and `Field.Link` are present, both must be in the same row but in opposite sides.
+
+<Canvas>
+  <Story name='Hint and Link'>
+    <Field>
+      <Field.Label>Label</Field.Label>
+      <Field.Row>
+        <InputBox.Skeleton />
+      </Field.Row>
+      <Field.Row justifyContent='space-between'>
+        <Field.Hint>Hint</Field.Hint>
+        <Field.Link href='#'>Link name</Field.Link>
+      </Field.Row>
+    </Field>
+  </Story>
+</Canvas>

packages/fuselage/src/components/Field/Field.tsx

@@ -1,26 +1,9 @@
-import React, { ComponentPropsWithoutRef, FC } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 
 import { Box } from '../Box';
-import { FieldDescription } from './FieldDescription';
-import { FieldError } from './FieldError';
-import { FieldHint } from './FieldHint';
-import { FieldLabel } from './FieldLabel';
-import { FieldRow } from './FieldRow';
 
 type FieldProps = ComponentPropsWithoutRef<typeof Box>;
 
-export const Field: FC<FieldProps> & {
-  Label: typeof FieldLabel;
-  Description: typeof FieldDescription;
-  Row: typeof FieldRow;
-  Hint: typeof FieldHint;
-  Error: typeof FieldError;
-} = function Field(props: FieldProps) {
+export function Field(props: FieldProps) {
   return <Box rcx-field {...props} />;
-};
-
-Field.Label = FieldLabel;
-Field.Description = FieldDescription;
-Field.Row = FieldRow;
-Field.Error = FieldError;
-Field.Hint = FieldHint;
+}

packages/fuselage/src/components/Field/FieldLink.tsx

@@ -0,0 +1,11 @@
+import React, { ComponentProps, ReactElement } from 'react';
+
+import { Box } from '../Box';
+
+type FieldLinkProps = ComponentProps<typeof Box>;
+
+const FieldLink = (props: FieldLinkProps): ReactElement => (
+  <Box is='a' target='_blank' rcx-field__link {...props} />
+);
+
+export default FieldLink;

packages/fuselage/src/components/Field/index.tsx

@@ -1 +1,16 @@
-export * from './Field';
+import { Field } from './Field';
+import { FieldDescription } from './FieldDescription';
+import { FieldError } from './FieldError';
+import { FieldHint } from './FieldHint';
+import { FieldLabel } from './FieldLabel';
+import FieldLink from './FieldLink';
+import { FieldRow } from './FieldRow';
+
+export default Object.assign(Field, {
+  Label: FieldLabel,
+  Description: FieldDescription,
+  Row: FieldRow,
+  Error: FieldError,
+  Hint: FieldHint,
+  Link: FieldLink,
+});

packages/fuselage/src/components/Field/styles.scss

@@ -57,4 +57,14 @@
     color: colors.foreground(danger);
     @extend %--with-inline-elements;
   }
+
+  &__link {
+    @include typography.use-font-scale(p2);
+    margin-block: lengths.margin(2);
+
+    text-decoration: none;
+
+    color: colors.foreground(link);
+    @extend %--with-inline-elements;
+  }
 }

packages/fuselage/src/components/index.ts

@@ -13,7 +13,7 @@ export { default as Chip } from './Chip';
 export * from './Divider';
 export * from './Dropdown';
 export * from './EmailInput';
-export * from './Field';
+export { default as Field } from './Field';
 export * from './FieldGroup';
 export * from './Grid';
 export * from './Icon';