feat(fuselage): create LabelInfo component (#1214)

RocketChat · Nov 8, 2023 · 68674c5 · 68674c5
1 parent 51e16ef
commit 68674c5
Show file tree

Hide file tree

Showing 10 changed files with 298 additions and 1 deletion.
diff --git a/.changeset/tame-bikes-reflect.md b/.changeset/tame-bikes-reflect.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": minor
+---
+
+feat(fuselage): create `LabelInfo` component
diff --git a/packages/fuselage/src/components/Field/Field.stories.tsx b/packages/fuselage/src/components/Field/Field.stories.tsx
@@ -14,6 +14,7 @@ import {
   ToggleSwitch,
   FieldLink,
 } from '../..';
+import { FieldLabelInfo } from './FieldLabelInfo';
 
 export default {
   title: 'Inputs/Field',
@@ -47,6 +48,38 @@ export const Default: ComponentStory<typeof Field> = () => (
     <FieldHint>Hint</FieldHint>
   </Field>
 );
+export const WithLabelInfo: ComponentStory<typeof Field> = () => (
+  <Field>
+    <FieldLabel htmlFor='label-info-id'>
+      Label
+      <FieldLabelInfo id='info-id' title='this is a info label' />
+    </FieldLabel>
+    <FieldDescription>Description</FieldDescription>
+    <FieldRow>
+      <InputBox id='label-info-id' type='text' aria-describedby='info-id' />
+    </FieldRow>
+    <FieldError>Error</FieldError>
+    <FieldHint>Hint</FieldHint>
+  </Field>
+);
+export const RequiredWithLabelInfo: ComponentStory<typeof Field> = () => (
+  <Field>
+    <FieldLabel required htmlFor='label-required-id'>
+      Label
+      <FieldLabelInfo id='required-info-id' title='this is a info label' />
+    </FieldLabel>
+    <FieldDescription>Description</FieldDescription>
+    <FieldRow>
+      <InputBox
+        id='label-required-id'
+        type='text'
+        aria-describedby='required-info-id'
+      />
+    </FieldRow>
+    <FieldError>Error</FieldError>
+    <FieldHint>Hint</FieldHint>
+  </Field>
+);
 
 export const WithCheckBox: ComponentStory<typeof Field> = () => (
   <Field>

diff --git a/packages/fuselage/src/components/Field/FieldLabel.tsx b/packages/fuselage/src/components/Field/FieldLabel.tsx
@@ -6,7 +6,7 @@ import Box from '../Box';
 import { Label } from '../Label';
 import { FieldContext } from './Field';
 
-type FieldLabelProps = ComponentPropsWithoutRef<typeof Box>;
+type FieldLabelProps = ComponentPropsWithoutRef<typeof Label>;
 
 export const FieldLabel = (props: FieldLabelProps) => {
   const component = <Box is={Label} rcx-field__label {...props} />;

diff --git a/packages/fuselage/src/components/Field/FieldLabelInfo.tsx b/packages/fuselage/src/components/Field/FieldLabelInfo.tsx
@@ -0,0 +1,26 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import WithErrorWrapper from '../../helpers/WithErrorWrapper';
+import { LabelInfo } from '../Label/LabelInfo';
+import { FieldContext } from './Field';
+
+type FieldLabelInfoProps = ComponentProps<typeof LabelInfo>;
+
+export const FieldLabelInfo = (props: FieldLabelInfoProps) => {
+  const component = <LabelInfo {...props} />;
+
+  if (process.env.NODE_ENV === 'development') {
+    return (
+      <WithErrorWrapper
+        context={FieldContext}
+        parentComponent='Field'
+        componentName={FieldLabelInfo.name}
+      >
+        {component}
+      </WithErrorWrapper>
+    );
+  }
+
+  return component;
+};
diff --git a/packages/fuselage/src/components/Field/__snapshots__/Field.spec.tsx.snap b/packages/fuselage/src/components/Field/__snapshots__/Field.spec.tsx.snap
@@ -42,6 +42,72 @@ exports[`[Field Component] renders Default without crashing 1`] = `
 </body>
 `;
 
+exports[`[Field Component] renders RequiredWithLabelInfo without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-field"
+    >
+      <label
+        class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-field__label"
+        for="label-required-id"
+      >
+        Label
+        <span
+          class="rcx-box rcx-box--full rcx-label__info rcx-css-wcp0mp"
+        >
+          <span
+            hidden=""
+            id="required-info-id"
+          >
+            this is a info label
+          </span>
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon"
+            title="this is a info label"
+          >
+            
+          </i>
+        </span>
+        <span
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-label__required rcx-css-b7g1a9"
+        >
+          *
+        </span>
+      </label>
+      <span
+        class="rcx-box rcx-box--full rcx-field__description"
+      >
+        Description
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__row"
+      >
+        <input
+          aria-describedby="required-info-id"
+          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+          id="label-required-id"
+          size="1"
+          type="text"
+        />
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__error"
+      >
+        Error
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__hint"
+      >
+        Hint
+      </span>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`[Field Component] renders WithCheckBox without crashing 1`] = `
 <body>
   <div>
@@ -252,6 +318,66 @@ exports[`[Field Component] renders WithHintAndLink without crashing 1`] = `
 </body>
 `;
 
+exports[`[Field Component] renders WithLabelInfo without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-field"
+    >
+      <label
+        class="rcx-box rcx-box--full rcx-label  rcx-box rcx-box--full rcx-field__label"
+        for="label-info-id"
+      >
+        Label
+        <span
+          class="rcx-box rcx-box--full rcx-label__info rcx-css-wcp0mp"
+        >
+          <span
+            hidden=""
+            id="info-id"
+          >
+            this is a info label
+          </span>
+          <i
+            aria-hidden="true"
+            class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon"
+            title="this is a info label"
+          >
+            
+          </i>
+        </span>
+      </label>
+      <span
+        class="rcx-box rcx-box--full rcx-field__description"
+      >
+        Description
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__row"
+      >
+        <input
+          aria-describedby="info-id"
+          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--type-text rcx-input-box"
+          id="label-info-id"
+          size="1"
+          type="text"
+        />
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__error"
+      >
+        Error
+      </span>
+      <span
+        class="rcx-box rcx-box--full rcx-field__hint"
+      >
+        Hint
+      </span>
+    </div>
+  </div>
+</body>
+`;
+
 exports[`[Field Component] renders WithLink without crashing 1`] = `
 <body>
   <div>

diff --git a/packages/fuselage/src/components/Field/index.tsx b/packages/fuselage/src/components/Field/index.tsx
@@ -3,6 +3,7 @@ import { FieldDescription } from './FieldDescription';
 import { FieldError } from './FieldError';
 import { FieldHint } from './FieldHint';
 import { FieldLabel } from './FieldLabel';
+import { FieldLabelInfo } from './FieldLabelInfo';
 import { FieldLink } from './FieldLink';
 import { FieldRow } from './FieldRow';
 
@@ -12,6 +13,7 @@ export {
   FieldError,
   FieldHint,
   FieldLabel,
+  FieldLabelInfo,
   FieldLink,
   FieldRow,
 };

diff --git a/packages/fuselage/src/components/Label/Label.stories.tsx b/packages/fuselage/src/components/Label/Label.stories.tsx
@@ -9,6 +9,7 @@ import type { ComponentStory, ComponentMeta } from '@storybook/react';
 import React from 'react';
 
 import { Label } from '../..';
+import { LabelInfo } from './LabelInfo';
 
 export default {
   title: 'Inputs/Label',
@@ -42,6 +43,20 @@ Required.args = {
   required: true,
 };
 
+export const Info: ComponentStory<typeof Label> = (args) => (
+  <Label {...args}>
+    Label
+    <LabelInfo title='this is a label info' />
+  </Label>
+);
+
+export const InfoRequired: ComponentStory<typeof Label> = (args) => (
+  <Label required {...args}>
+    Label
+    <LabelInfo title='this is a label info' />
+  </Label>
+);
+
 export const Disabled: ComponentStory<typeof Label> = Template.bind({});
 Disabled.args = {
   disabled: true,

diff --git a/packages/fuselage/src/components/Label/Label.styles.scss b/packages/fuselage/src/components/Label/Label.styles.scss
@@ -1,8 +1,11 @@
 @use '../../styles/colors.scss';
 @use '../../styles/typography.scss';
+@use '../../styles/lengths.scss';
 
 .rcx-label {
   @include typography.use-font-scale(p2m);
+  display: flex;
+
   color: colors.font(default);
 
   &--disabled {
@@ -11,6 +14,12 @@
     color: colors.font(secondary-info);
   }
 
+  &__info {
+    display: flex;
+    align-items: center;
+    order: 1;
+  }
+
   &__required {
     color: colors.font(danger);
   }

diff --git a/packages/fuselage/src/components/Label/LabelInfo.tsx b/packages/fuselage/src/components/Label/LabelInfo.tsx
@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import Box from '../Box/Box';
+import { Icon } from '../Icon';
+
+type LabelInfoProps = {
+  title: string;
+  id?: string;
+} & Omit<ComponentProps<typeof Icon>, 'name'>;
+
+export const LabelInfo = ({ title, id, ...props }: LabelInfoProps) => (
+  <Box is='span' mi={2} rcx-label__info>
+    <span hidden id={id}>
+      {title}
+    </span>
+    <Icon {...props} name='info-circled' title={title} />
+  </Box>
+);
diff --git a/packages/fuselage/src/components/Label/__snapshots__/Label.spec.tsx.snap b/packages/fuselage/src/components/Label/__snapshots__/Label.spec.tsx.snap
@@ -24,6 +24,68 @@ exports[`[Label Component] renders Disabled without crashing 1`] = `
 </body>
 `;
 
+exports[`[Label Component] renders Info without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label"
+    >
+      Label
+      <span
+        class="rcx-box rcx-box--full rcx-label__info rcx-css-wcp0mp"
+      >
+        <span
+          hidden=""
+        >
+          this is a label info
+        </span>
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon"
+          title="this is a label info"
+        >
+          
+        </i>
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
+exports[`[Label Component] renders InfoRequired without crashing 1`] = `
+<body>
+  <div>
+    <label
+      class="rcx-box rcx-box--full rcx-label"
+    >
+      Label
+      <span
+        class="rcx-box rcx-box--full rcx-label__info rcx-css-wcp0mp"
+      >
+        <span
+          hidden=""
+        >
+          this is a label info
+        </span>
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-info-circled rcx-icon"
+          title="this is a label info"
+        >
+          
+        </i>
+      </span>
+      <span
+        aria-hidden="true"
+        class="rcx-box rcx-box--full rcx-label__required rcx-css-b7g1a9"
+      >
+        *
+      </span>
+    </label>
+  </div>
+</body>
+`;
+
 exports[`[Label Component] renders Required without crashing 1`] = `
 <body>
   <div>