From dde6e5b3ecea7db2841d7161de3278546f52bbe5 Mon Sep 17 00:00:00 2001 From: avlyalin Date: Fri, 5 Jun 2020 20:54:16 +0300 Subject: [PATCH] feat: share button description text --- ...with-description-text-on-center-1-snap.png | Bin 0 -> 2939 bytes ...t-with-description-text-on-left-1-snap.png | Bin 0 -> 2918 bytes ...-with-description-text-on-right-1-snap.png | Bin 0 -> 2928 bytes ...orrect-without-description-text-1-snap.png | Bin 0 -> 1786 bytes src/components/form-group/form-group.ispec.js | 39 +++++++++++++ src/components/form-group/form-group.js | 31 +++++++++- .../form-group/form-group.stories.js | 55 +++++++++++++++++- src/containers/lobby/lobby.js | 7 ++- 8 files changed, 126 insertions(+), 6 deletions(-) create mode 100644 src/components/form-group/__image_snapshots__/form-group-ispec-js-form-group-visually-looks-correct-with-description-text-on-center-1-snap.png create mode 100644 src/components/form-group/__image_snapshots__/form-group-ispec-js-form-group-visually-looks-correct-with-description-text-on-left-1-snap.png create mode 100644 src/components/form-group/__image_snapshots__/form-group-ispec-js-form-group-visually-looks-correct-with-description-text-on-right-1-snap.png create mode 100644 src/components/form-group/__image_snapshots__/form-group-ispec-js-form-group-visually-looks-correct-without-description-text-1-snap.png create mode 100644 src/components/form-group/form-group.ispec.js diff --git a/src/components/form-group/__image_snapshots__/form-group-ispec-js-form-group-visually-looks-correct-with-description-text-on-center-1-snap.png b/src/components/form-group/__image_snapshots__/form-group-ispec-js-form-group-visually-looks-correct-with-description-text-on-center-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..16cf1943ba64de53633cf459c63b4fe05bf96942 GIT binary patch literal 2939 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 F{l7La>0ST; literal 0 HcmV?d00001 diff --git a/src/components/form-group/__image_snapshots__/form-group-ispec-js-form-group-visually-looks-correct-without-description-text-1-snap.png b/src/components/form-group/__image_snapshots__/form-group-ispec-js-form-group-visually-looks-correct-without-description-text-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..34bebb5a943c871404908d9aa4071bc77b96733d GIT binary patch literal 1786 zcmcIkYc$kp9Da2{woKazn~JSmy3EotSh>t@E@LR9mem&7&27vgDaLI&X}4uDi^5cl zM5D`4MlMYZIiki4g*2ua4r5%VVT@+XxXr#g`(;1&VgKiUp7(No@B2Q_@0Q`~joGAQ zr~?4lg!ORs17Izj0*tmM#7C&FJK&&k-VbvaRB?7p0-#xob^YN);w=gP+ao(VjI@T0 zsV*aLk3J8~{Ch)<-X70^yQpioQQu(ouI|sMd>EfwnYUN3j?r*M-;*;|VPjhKyiT{> zjpM0f=~2oEP@c1@lgUab8X3#YxR~&mX(E3qEG*&b!g3lKfbUKFI1Kpw@CR*(zPr{y zJn<(4py$URs?(+gO^e=bFJ8DeFDrN-W@acZfdI5bR`Q!u9TpcCRg(H4P4oHr`Ci-; zD{Jd~_dDlu#xwvh_G{we!@|PM#A0zHVJ47pEDH1epnXMfq!3csRYWkudVqBwbx6P^Tm2;sjgn*Y>BNdX}Cbw3FK7uVTr_QUGx@W{x>*w)!D;&y^K*Y@#ad|h3g z_r@!%8ppXZLG9zmxfdD5?d|PZBobnJo08bYW^bB~0pQYp!nhNN>Aq#$tzg~V$}3mITYMy7<+rqZJ+e2Re3^jHIp+q zI5_-!NC!#7sji`+==$~RDRXQ)a#2wyyk3iU2!%#dt|E*@(|ksx?M-rVF?(*jyLU2P z5Y@dR6rR;LFrYtudZWL;AEqBvR@~453&Z06?KI{PdS*9NNuMSCdiL4J?C%{SN|QePA${@nZ%6NR6iCNttCH$F^?UzTJy< zF^)s59GaOYq2n2R$7BUEpz74i&Q6cavQDW~N;cR8z%xo)TN^B$^z`%(63N(9|ATEi zckZl3tZ6YOF6A;;77kES72HO>F91mSiNRo~Chm~pRI)J>b+c9}Phz;V7PPF7UtW+e zsm3V;l`J%`{H<6n`@pqMhhb|dtqNwAP<<$O2gIS3y^|ls@+4=KFn_KJ-uIoUWzaK^ z>H#krl9iQ}bt}OMwwrx8lp#Sr)h`CVTiXc(uzB7pE8FW=5Q>8ujpQ2uFnBMO#^&VY zJlpUU%!|)+-2Z7^?q5A{J~1&-Z~?}WIw6%FlqWeoS>-A>^-My7-9Xi8R!>il zmx1iX8>Pb}Z+mg`k$5eiwlxVV@P as@JcrMNSxaJNyAf0IZw0Yt`X1m;V92i%+Nk literal 0 HcmV?d00001 diff --git a/src/components/form-group/form-group.ispec.js b/src/components/form-group/form-group.ispec.js new file mode 100644 index 0000000..b66d68b --- /dev/null +++ b/src/components/form-group/form-group.ispec.js @@ -0,0 +1,39 @@ +const customConfig = { + failureThreshold: 0.01, + failureThresholdType: 'percent', +}; + +describe(' 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); + }); +}); diff --git a/src/components/form-group/form-group.js b/src/components/form-group/form-group.js index 317844b..aba2a3e 100644 --- a/src/components/form-group/form-group.js +++ b/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 ( -
+
{content} + {description && ( + + {description} + + )}
); }); FormGroup.propTypes = { + description: PropTypes.string, + descriptionPosition: PropTypes.oneOf(['start', 'center', 'end']), label: PropTypes.node, labelFor: PropTypes.string, childrenContainerClass: PropTypes.string, diff --git a/src/components/form-group/form-group.stories.js b/src/components/form-group/form-group.stories.js index 2428e8d..42a9e5d 100644 --- a/src/components/form-group/form-group.stories.js +++ b/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 ( - + ); }; export const WithMultipleChildren = () => { + const description = text('Description', 'helper text'); const label = text('Label', 'Options'); let value = 'option-1'; const onChange = () => {}; return ( - + { ); }; + +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 ( + + + + ); +}; +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 ( + + + + ); +}; diff --git a/src/containers/lobby/lobby.js b/src/containers/lobby/lobby.js index 6bbe558..2d7d6d3 100644 --- a/src/containers/lobby/lobby.js +++ b/src/containers/lobby/lobby.js @@ -56,6 +56,7 @@ function Lobby({ } const shareIcon = navigator.share ? 'share-alt' : 'clone'; + const shareDescription = navigator.share ? 'Поделиться' : 'Копировать ссылку'; return (
- +