feat: share button description text

src/components/form-group/form-group.ispec.js

@@ -0,0 +1,39 @@
+const customConfig = {
+  failureThreshold: 0.01,
+  failureThresholdType: 'percent',
+};
+
+describe('<FormGroup /> visually looks correct', () => {
+  test('without description text', async () => {
+    await page.goto(
+      'http://localhost:9009/iframe.html?path=/story/components-form-group--without-description&&knob-Description position=end&knob-Label=Your name',
+    );
+    const formGroup = await page.$('[data-testid=form-group]');
+    const image = await formGroup.screenshot();
+    expect(image).toMatchImageSnapshot(customConfig);
+  });
+  test('with description text on left', async () => {
+    await page.goto(
+      'http://localhost:9009/iframe.html?path=/story/components-form-group--with-description&&knob-Description position=start&knob-Label=Your name',
+    );
+    const formGroup = await page.$('[data-testid=form-group]');
+    const image = await formGroup.screenshot();
+    expect(image).toMatchImageSnapshot(customConfig);
+  });
+  test('with description text on center', async () => {
+    await page.goto(
+      'http://localhost:9009/iframe.html?path=/story/components-form-group--with-description&&knob-Description position=center&knob-Label=Your name',
+    );
+    const formGroup = await page.$('[data-testid=form-group]');
+    const image = await formGroup.screenshot();
+    expect(image).toMatchImageSnapshot(customConfig);
+  });
+  test('with description text on right', async () => {
+    await page.goto(
+      'http://localhost:9009/iframe.html?path=/story/components-form-group--with-description&&knob-Description position=end&knob-Label=Your name',
+    );
+    const formGroup = await page.$('[data-testid=form-group]');
+    const image = await formGroup.screenshot();
+    expect(image).toMatchImageSnapshot(customConfig);
+  });
+});

src/components/form-group/form-group.js

@@ -1,8 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 const FormGroup = React.forwardRef(function FormGroup(props, ref) {
-  const { label, labelFor, children, childrenContainerClass, ...other } = props;
+  const {
+    description = '',
+    descriptionPosition = 'start',
+    label,
+    labelFor,
+    children,
+    childrenContainerClass,
+    ...other
+  } = props;
   const childrenCount = React.Children.count(children);
   const labelClasses = 'text-sm text-gray-400 mb-2';
   let content;
@@ -25,13 +34,31 @@ const FormGroup = React.forwardRef(function FormGroup(props, ref) {
   }
 
   return (
-    <div className="flex flex-col" ref={ref} {...other}>
+    <div
+      data-testid={'form-group'}
+      className="flex flex-col"
+      ref={ref}
+      {...other}
+    >
       {content}
+      {description && (
+        <span
+          className={classnames('text-sm text-gray-300 mt-2', {
+            'self-start': descriptionPosition === 'start',
+            'self-center': descriptionPosition === 'center',
+            'self-end': descriptionPosition === 'end',
+          })}
+        >
+          {description}
+        </span>
+      )}
     </div>
   );
 });
 
 FormGroup.propTypes = {
+  description: PropTypes.string,
+  descriptionPosition: PropTypes.oneOf(['start', 'center', 'end']),
   label: PropTypes.node,
   labelFor: PropTypes.string,
   childrenContainerClass: PropTypes.string,

src/components/form-group/form-group.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withKnobs, text } from '@storybook/addon-knobs';
+import { withKnobs, text, radios } from '@storybook/addon-knobs';
 import { containerDecorator } from '_storybook/container';
 import { Input } from '../input';
 import { FormGroup } from './form-group';
@@ -11,20 +11,22 @@ export default {
 };
 
 export const WithSingleChildren = () => {
+  const description = text('Description', 'helper text');
   const label = text('Label', 'Your name');
   return (
-    <FormGroup label={label} labelFor="input-1">
+    <FormGroup label={label} labelFor="input-1" description={description}>
       <Input id="input-1" />
     </FormGroup>
   );
 };
 
 export const WithMultipleChildren = () => {
+  const description = text('Description', 'helper text');
   const label = text('Label', 'Options');
   let value = 'option-1';
   const onChange = () => {};
   return (
-    <FormGroup label={label} labelFor="input-1">
+    <FormGroup label={label} labelFor="input-1" description={description}>
       <input
         id="option-1"
         type="checkbox"
@@ -44,3 +46,50 @@ export const WithMultipleChildren = () => {
     </FormGroup>
   );
 };
+
+export const WithDescription = () => {
+  const description = text('Description', 'helper text');
+  const descriptionPosition = radios(
+    'Description position',
+    {
+      start: 'start',
+      center: 'center',
+      end: 'end',
+    },
+    'end',
+  );
+  const label = text('Label', 'Your name');
+  return (
+    <FormGroup
+      label={label}
+      labelFor="input-1"
+      description={description}
+      descriptionPosition={descriptionPosition}
+    >
+      <Input id="input-1" />
+    </FormGroup>
+  );
+};
+export const WithoutDescription = () => {
+  const description = text('Description', '');
+  const descriptionPosition = radios(
+    'Description position',
+    {
+      start: 'start',
+      center: 'center',
+      end: 'end',
+    },
+    'end',
+  );
+  const label = text('Label', 'Your name');
+  return (
+    <FormGroup
+      label={label}
+      labelFor="input-1"
+      description={description}
+      descriptionPosition={descriptionPosition}
+    >
+      <Input id="input-1" />
+    </FormGroup>
+  );
+};

src/containers/lobby/lobby.js

@@ -56,6 +56,7 @@ function Lobby({
   }
 
   const shareIcon = navigator.share ? 'share-alt' : 'clone';
+  const shareDescription = navigator.share ? 'Поделиться' : 'Копировать ссылку';
 
   return (
     <div
@@ -76,7 +77,11 @@ function Lobby({
         )}
       >
         <div className={'mt-6 row-start-1 col-start-1'}>
-          <FormGroup label={'ID сессии'}>
+          <FormGroup
+            description={shareDescription}
+            descriptionPosition={'end'}
+            label={'ID сессии'}
+          >
             <InputGroup
               append={
                 <Button