feat(amount): drop vars, add props

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');

packages/amount/src/__snapshots__/component.test.tsx.snap

@@ -3,12 +3,12 @@
 exports[`Amount should match snapshots for base and Pure components 1`] = `
 <div>
   <span
-    class="component"
+    class="component default"
   >
 
     1
     <span
-      class="minorPartAndCurrency"
+      class="minorPartAndCurrency defaultMinor"
     >
 
 
@@ -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`] = `
 <div>
   <span
-    class="component"
+    class="component default"
   >
 
     0
     <span
-      class="minorPartAndCurrency"
+      class="minorPartAndCurrency defaultMinor"
     >
 
 
     </span>
   </span>
   <span
-    class="component"
+    class="component default"
   >
 
     −1
     <span
-      class="minorPartAndCurrency"
+      class="minorPartAndCurrency defaultMinor"
     >
 
 
@@ -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`] = `
 <div>
   <span
-    class="component"
+    class="component default"
   >
     +
     1
     <span
-      class="minorPartAndCurrency"
+      class="minorPartAndCurrency defaultMinor"
     >
 
 
@@ -92,12 +92,12 @@ exports[`Amount should render plus sign when showPlus and value > 0 1`] = `
 exports[`Amount should render rightAddons 1`] = `
 <div>
   <span
-    class="component"
+    class="component default"
   >
 
     1
     <span
-      class="minorPartAndCurrency"
+      class="minorPartAndCurrency defaultMinor"
     >
 
 

packages/amount/src/component.screenshots.test.tsx

@@ -12,18 +12,33 @@ describe(
     screenshotTesting({
         cases: [
             [
-                'sprite',
+                'main',
                 createSpriteStorybookUrl({
                     componentName: 'Amount',
                     knobs: {
-                        value: [12300],
+                        value: 12300,
                         currency: ['RUR', 'USD'],
                         minority: [100, 10],
                         view: ['default', 'withZeroMinorPart'],
                     },
                     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 },
+                }),
+            ],
         ],
     }),
 );

packages/amount/src/component.tsx

@@ -14,6 +14,8 @@ export const Amount: React.FC<AmountProps> = ({
     minority,
     currency,
     view = 'default',
+    bold,
+    transparentMinor,
     rightAddons,
     showPlus = false,
     className,
@@ -26,11 +28,26 @@ export const Amount: React.FC<AmountProps> = ({
         view,
     });
 
+    const defaultStyles = bold === undefined && transparentMinor === undefined;
+
     return (
-        <span className={cn(styles.component, className)} data-test-id={dataTestId}>
+        <span
+            className={cn(styles.component, className, {
+                [styles.bold]: bold === 'full',
+                [styles.boldMajor]: bold === 'major',
+                [styles.default]: defaultStyles,
+            })}
+            data-test-id={dataTestId}
+        >
             {showPlus && value > 0 ? '+' : ''}
             {majorPart}
-            <span className={styles.minorPartAndCurrency}>
+            <span
+                className={cn(styles.minorPartAndCurrency, {
+                    [styles.transparentMinor]: transparentMinor,
+                    [styles.normalMinor]: bold === 'major',
+                    [styles.defaultMinor]: defaultStyles,
+                })}
+            >
                 {minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
                 {minorPart}
                 {currency ? `${THINSP}${currencySymbol}` : null}

packages/amount/src/docs/component.stories.mdx

@@ -22,13 +22,13 @@ import styles from '!!raw-loader!../index.module.css';
 <Story name='Amount'>
     {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 (
             <Container>
                 <Row>
@@ -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}
                         />
                     </Col>
                     <Col>
@@ -54,8 +54,6 @@ import styles from '!!raw-loader!../index.module.css';
                             minority={minority}
                             showPlus={showPlus}
                             view={view}
-                            className={className}
-                            dataTestId={dataTestId}
                         />
                     </Col>
                 </Row>

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);
 }

packages/amount/src/types/amount-props.ts

@@ -28,6 +28,16 @@ export type AmountProps = {
      */
     view?: 'default' | 'withZeroMinorPart';
 
+    /**
+     * Управление жирностью
+     */
+    bold?: 'full' | 'major' | 'none';
+
+    /**
+     * Делает минорную часть полупрозрачной
+     */
+    transparentMinor?: boolean;
+
     /**
      * Показывать значок + для положительных значений
      */

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();
         });

packages/bottom-sheet/src/components/closer/Component.tsx

@@ -32,7 +32,7 @@ export const Closer: React.FC<CloserProps> = ({
     const { onClose } = useContext(BaseModalContext);
 
     const handleClick = useCallback(
-        (event) => {
+        event => {
             onClose(event, 'closerClick');
         },
         [onClose],

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<JSXElement>) => {
             const { node } = path;
 

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';
-

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(<DateInput onChange={onChange} onComplete={onComplete} />);
+            const { queryByRole } = render(
+                <DateInput onChange={onChange} onComplete={onComplete} />,
+            );
 
             const input = queryByRole('textbox') as HTMLInputElement;
 

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(

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],

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];

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;
 }

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 = {