diff --git a/bin/demo-build.js b/bin/demo-build.js index fbba7f883d..166654f2bd 100644 --- a/bin/demo-build.js +++ b/bin/demo-build.js @@ -43,7 +43,7 @@ const gitPagesUrl = `https://${parsedGitUrl.owner}.github.io/${parsedGitUrl.name console.log('Publish storybook demo for github'); console.log('=> Build storybook'); shell.exec(`yarn build-storybook -o ${tempOutputDir}`, { fatal: true }); -shell.exec(`STORYBOOK_BUILD_DIR=${tempOutputDir} node bin/generate-docs-urls.js`) +shell.exec(`STORYBOOK_BUILD_DIR=${tempOutputDir} node bin/generate-docs-urls.js`); // Prepare temporary gh-pages dir console.log('=> Prepare temporary dir'); diff --git a/packages/amount/src/__image_snapshots__/amount-screenshots-sprite-snap.png b/packages/amount/src/__image_snapshots__/amount-screenshots-main-snap.png similarity index 100% rename from packages/amount/src/__image_snapshots__/amount-screenshots-sprite-snap.png rename to packages/amount/src/__image_snapshots__/amount-screenshots-main-snap.png diff --git a/packages/amount/src/__image_snapshots__/amount-screenshots-styles-snap.png b/packages/amount/src/__image_snapshots__/amount-screenshots-styles-snap.png new file mode 100644 index 0000000000..d657fa390b --- /dev/null +++ b/packages/amount/src/__image_snapshots__/amount-screenshots-styles-snap.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:547ad7dc255c47c0b160a7a002185ff05d570b3b454c38c348fae270346f968e +size 19692 diff --git a/packages/amount/src/__snapshots__/component.test.tsx.snap b/packages/amount/src/__snapshots__/component.test.tsx.snap index 483627c57c..adbb2f4d9e 100644 --- a/packages/amount/src/__snapshots__/component.test.tsx.snap +++ b/packages/amount/src/__snapshots__/component.test.tsx.snap @@ -3,12 +3,12 @@ exports[`Amount should match snapshots for base and Pure components 1`] = `
1 @@ -28,24 +28,24 @@ exports[`Amount should match snapshots for base and Pure components 1`] = ` exports[`Amount should not render plus sign when showPlus and value <= 0 1`] = `
0 −1 @@ -69,12 +69,12 @@ exports[`Amount should not render plus sign when showPlus and value <= 0 1`] = ` exports[`Amount should render plus sign when showPlus and value > 0 1`] = `
+ 1 @@ -92,12 +92,12 @@ exports[`Amount should render plus sign when showPlus and value > 0 1`] = ` exports[`Amount should render rightAddons 1`] = `
1 diff --git a/packages/amount/src/component.screenshots.test.tsx b/packages/amount/src/component.screenshots.test.tsx index a6dcff3269..c7d8729e04 100644 --- a/packages/amount/src/component.screenshots.test.tsx +++ b/packages/amount/src/component.screenshots.test.tsx @@ -12,11 +12,11 @@ describe( screenshotTesting({ cases: [ [ - 'sprite', + 'main', createSpriteStorybookUrl({ componentName: 'Amount', knobs: { - value: [12300], + value: 12300, currency: ['RUR', 'USD'], minority: [100, 10], view: ['default', 'withZeroMinorPart'], @@ -24,6 +24,21 @@ describe( size: { width: 100, height: 50 }, }), ], + [ + 'styles', + createSpriteStorybookUrl({ + componentName: 'Amount', + knobs: { + value: 12300, + currency: 'RUR', + minority: 100, + view: 'withZeroMinorPart', + bold: ['none', 'full', 'major'], + transparentMinor: [false, true], + }, + size: { width: 100, height: 50 }, + }), + ], ], }), ); diff --git a/packages/amount/src/component.tsx b/packages/amount/src/component.tsx index 89f524933e..bc0add455f 100644 --- a/packages/amount/src/component.tsx +++ b/packages/amount/src/component.tsx @@ -14,6 +14,8 @@ export const Amount: React.FC = ({ minority, currency, view = 'default', + bold, + transparentMinor, rightAddons, showPlus = false, className, @@ -26,11 +28,26 @@ export const Amount: React.FC = ({ view, }); + const defaultStyles = bold === undefined && transparentMinor === undefined; + return ( - + {showPlus && value > 0 ? '+' : ''} {majorPart} - + {minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR} {minorPart} {currency ? `${THINSP}${currencySymbol}` : null} diff --git a/packages/amount/src/docs/component.stories.mdx b/packages/amount/src/docs/component.stories.mdx index 8eaaeae108..6b4e7b6a2f 100644 --- a/packages/amount/src/docs/component.stories.mdx +++ b/packages/amount/src/docs/component.stories.mdx @@ -22,13 +22,13 @@ import styles from '!!raw-loader!../index.module.css'; {React.createElement(() => { const currencyCodes = getAllCurrencyCodes(); - const value = number('value', 12300); + const value = number('value', 10099); const currency = select('currency', currencyCodes, 'RUR'); const minority = number('minority', 100); const showPlus = boolean('showPlus', false); const view = select('view', ['default', 'withZeroMinorPart'], 'default'); - const className = select('className', ''); - const dataTestId = text('dataTestId', ''); + const bold = select('bold', ['full', 'major', 'none'], 'bold'); + const transparentMinor = boolean('transparentMinor', true); return ( @@ -43,8 +43,8 @@ import styles from '!!raw-loader!../index.module.css'; minority={minority} showPlus={showPlus} view={view} - className={className} - dataTestId={dataTestId} + bold={bold} + transparentMinor={transparentMinor} /> @@ -54,8 +54,6 @@ import styles from '!!raw-loader!../index.module.css'; minority={minority} showPlus={showPlus} view={view} - className={className} - dataTestId={dataTestId} /> diff --git a/packages/amount/src/index.module.css b/packages/amount/src/index.module.css index 207de1d225..da4978fa1e 100644 --- a/packages/amount/src/index.module.css +++ b/packages/amount/src/index.module.css @@ -3,14 +3,34 @@ :root { --amount-major-part-font-weight: bold; --amount-minor-part-font-weight: normal; + --amount-minor-part-opacity: 0.6; } .component { white-space: nowrap; - font-weight: var(--amount-major-part-font-weight); } -.minorPartAndCurrency { +.transparentMinor { opacity: 0.6; +} + +.bold { + font-weight: bold; +} + +.boldMajor { + font-weight: bold; +} + +.normalMinor { + font-weight: normal; +} + +.default { + font-weight: var(--amount-major-part-font-weight); +} + +.defaultMinor { + opacity: var(--amount-minor-part-opacity); font-weight: var(--amount-minor-part-font-weight); } diff --git a/packages/amount/src/types/amount-props.ts b/packages/amount/src/types/amount-props.ts index 699091f63a..e340028e62 100644 --- a/packages/amount/src/types/amount-props.ts +++ b/packages/amount/src/types/amount-props.ts @@ -28,6 +28,16 @@ export type AmountProps = { */ view?: 'default' | 'withZeroMinorPart'; + /** + * Управление жирностью + */ + bold?: 'full' | 'major' | 'none'; + + /** + * Делает минорную часть полупрозрачной + */ + transparentMinor?: boolean; + /** * Показывать значок + для положительных значений */ diff --git a/packages/bottom-sheet/src/component.test.tsx b/packages/bottom-sheet/src/component.test.tsx index ef9f492e0d..07544fbfcb 100644 --- a/packages/bottom-sheet/src/component.test.tsx +++ b/packages/bottom-sheet/src/component.test.tsx @@ -189,7 +189,7 @@ describe('Bottom sheet', () => { fireEvent.click(content); } - await new Promise((res) => setTimeout(res, 1000)); + await new Promise(res => setTimeout(res, 1000)); expect(queryByTestId(dataTestId)).toBeInTheDocument(); }); diff --git a/packages/bottom-sheet/src/components/closer/Component.tsx b/packages/bottom-sheet/src/components/closer/Component.tsx index 7b0d8494db..f3193041ac 100644 --- a/packages/bottom-sheet/src/components/closer/Component.tsx +++ b/packages/bottom-sheet/src/components/closer/Component.tsx @@ -32,7 +32,7 @@ export const Closer: React.FC = ({ const { onClose } = useContext(BaseModalContext); const handleClick = useCallback( - (event) => { + event => { onClose(event, 'closerClick'); }, [onClose], diff --git a/packages/codemod/src/button-xs/transform.ts b/packages/codemod/src/button-xs/transform.ts index 127407e133..930bad1ac4 100644 --- a/packages/codemod/src/button-xs/transform.ts +++ b/packages/codemod/src/button-xs/transform.ts @@ -31,7 +31,7 @@ const buttonTransform: Transform = (fileInfo, api) => { /** * Находим использование компонента Tag и меняем ему пропсы */ - source.findJSXElements('Tag').forEach(path => { + source.findJSXElements('Tag').forEach(path => { j(path).replaceWith((path: ASTPath) => { const { node } = path; diff --git a/packages/confirmation/src/components/screens/index.ts b/packages/confirmation/src/components/screens/index.ts index 1abea19de0..8d96385db1 100644 --- a/packages/confirmation/src/components/screens/index.ts +++ b/packages/confirmation/src/components/screens/index.ts @@ -2,4 +2,3 @@ export * from './initial'; export * from './hint'; export * from './fatal-error'; export * from './temp-block'; - diff --git a/packages/date-input/src/Component.test.tsx b/packages/date-input/src/Component.test.tsx index 21089d4e14..d22709e280 100644 --- a/packages/date-input/src/Component.test.tsx +++ b/packages/date-input/src/Component.test.tsx @@ -72,7 +72,9 @@ describe('DateInput', () => { const onChange = jest.fn(); const onComplete = jest.fn(); const value = '01.01.2020'; - const { queryByRole } = render(); + const { queryByRole } = render( + , + ); const input = queryByRole('textbox') as HTMLInputElement; diff --git a/packages/file-upload-item/src/Component.test.tsx b/packages/file-upload-item/src/Component.test.tsx index c3175069f1..f1fcf7c1ac 100644 --- a/packages/file-upload-item/src/Component.test.tsx +++ b/packages/file-upload-item/src/Component.test.tsx @@ -77,7 +77,7 @@ describe('FileUploadItem', () => { expect(cb.mock.calls[0][0]).toBe(fileId); }); - it('should call `onDownload` prop', async() => { + it('should call `onDownload` prop', async () => { const cb = jest.fn(); const fileId = 'id'; const { baseElement } = render( diff --git a/packages/file-upload-item/src/component.screenshots.test.tsx b/packages/file-upload-item/src/component.screenshots.test.tsx index dff281f41b..044158b9b1 100644 --- a/packages/file-upload-item/src/component.screenshots.test.tsx +++ b/packages/file-upload-item/src/component.screenshots.test.tsx @@ -83,14 +83,15 @@ describe( }), ); - describe( 'FileUploadItem | ellipsis', screenshotTesting({ cases: generateTestCases({ componentName: 'FileUploadItem', knobs: { - name: ['very-long-file-name-123-very-long-file-name-123-very-long-file-name-123.jpg'], + name: [ + 'very-long-file-name-123-very-long-file-name-123-very-long-file-name-123.jpg', + ], uploadDate: ['22.01.2018'], size: [45000], showRestore: [true], diff --git a/packages/screenshot-utils/screenshots-story/components.ts b/packages/screenshot-utils/screenshots-story/components.ts index ec4740ac3b..eede7cc4d1 100644 --- a/packages/screenshot-utils/screenshots-story/components.ts +++ b/packages/screenshot-utils/screenshots-story/components.ts @@ -1,8 +1,4 @@ -const req = require.context( - '../../', - true, - /^\.\/(.*)\/src\/index.ts$/, -); +const req = require.context('../../', true, /^\.\/(.*)\/src\/index.ts$/); const packages = req.keys().reduce((acc, key) => { const packageName = key.split('/')[1]; diff --git a/packages/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css index a058b59566..89d3d0897c 100644 --- a/packages/themes/src/mixins/click.css +++ b/packages/themes/src/mixins/click.css @@ -27,7 +27,6 @@ --disabled-cursor: not-allowed; --arrow-transform: rotate(-180deg); - @mixin amount-click; @mixin form-control-click; @mixin input-click; @mixin button-click; @@ -51,4 +50,5 @@ @mixin dropzone-click; @mixin code-input-click; @mixin bottom-sheet-click; + @mixin amount-click; } diff --git a/packages/tooltip/src/Component.test.tsx b/packages/tooltip/src/Component.test.tsx index 8f2b705b79..7bc31edf5b 100644 --- a/packages/tooltip/src/Component.test.tsx +++ b/packages/tooltip/src/Component.test.tsx @@ -12,7 +12,7 @@ import * as popoverModule from '@alfalab/core-components-popover'; import { Tooltip, TooltipProps } from './index'; jest.mock('react-transition-group', () => { - return { CSSTransition: jest.fn((props) => (props.in ? props.children : null)) }; + return { CSSTransition: jest.fn(props => (props.in ? props.children : null)) }; }); type PopoverComponent = {