From b507e6a110fbea79868220e9fd4cfdb9c5f48494 Mon Sep 17 00:00:00 2001
From: reme3d2y <AYatsenko@alfabank.ru>
Date: Fri, 16 Jul 2021 09:16:49 +0300
Subject: [PATCH 1/2] feat(amount): drop vars, add props

---
 ...p.png => amount-screenshots-main-snap.png} |  0
 .../amount-screenshots-styles-snap.png        |  3 +++
 .../src/__snapshots__/component.test.tsx.snap |  4 ++--
 .../amount/src/component.screenshots.test.tsx | 19 +++++++++++++++--
 packages/amount/src/component.tsx             | 17 +++++++++++++--
 .../amount/src/docs/component.stories.mdx     | 13 +++++-------
 packages/amount/src/index.module.css          | 21 ++++++++++++-------
 packages/amount/src/types/amount-props.ts     | 10 +++++++++
 packages/themes/src/mixins/click.css          |  2 --
 9 files changed, 65 insertions(+), 24 deletions(-)
 rename packages/amount/src/__image_snapshots__/{amount-screenshots-sprite-snap.png => amount-screenshots-main-snap.png} (100%)
 create mode 100644 packages/amount/src/__image_snapshots__/amount-screenshots-styles-snap.png

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 9bea4b0b74..b0ec661890 100644
--- a/packages/amount/src/__snapshots__/component.test.tsx.snap
+++ b/packages/amount/src/__snapshots__/component.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`Amount should match snapshots for base and Pure components 1`] = `
 <div>
   <span
-    class="component"
+    class="component boldMajor"
   >
     1
     <span
-      class="minorPartAndCurrency"
+      class="minorPartAndCurrency transparentMinor normalMinor"
     >
       
       
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 fdeb240e40..49afd00ad2 100644
--- a/packages/amount/src/component.tsx
+++ b/packages/amount/src/component.tsx
@@ -14,6 +14,8 @@ export const Amount: React.FC<AmountProps> = ({
     minority,
     currency,
     view = 'default',
+    bold = 'major',
+    transparentMinor = true,
     className,
     dataTestId,
 }) => {
@@ -25,9 +27,20 @@ export const Amount: React.FC<AmountProps> = ({
     });
 
     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',
+            })}
+            data-test-id={dataTestId}
+        >
             {majorPart}
-            <span className={styles.minorPartAndCurrency}>
+            <span
+                className={cn(styles.minorPartAndCurrency, {
+                    [styles.transparentMinor]: transparentMinor,
+                    [styles.normalMinor]: bold === 'major',
+                })}
+            >
                 {minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
                 {minorPart}
                 {THINSP}
diff --git a/packages/amount/src/docs/component.stories.mdx b/packages/amount/src/docs/component.stories.mdx
index b2d5ff6020..83d755dd11 100644
--- a/packages/amount/src/docs/component.stories.mdx
+++ b/packages/amount/src/docs/component.stories.mdx
@@ -14,7 +14,6 @@ import styles from '!!raw-loader!../index.module.css';
 <Meta
     title='Компоненты/Amount'
     component={Amount}
-    parameters={{ 'theme-switcher': { themes: ['click'] } }}
 />
 
 
@@ -23,12 +22,12 @@ 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 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>
@@ -42,8 +41,8 @@ import styles from '!!raw-loader!../index.module.css';
                             currency={currency}
                             minority={minority}
                             view={view}
-                            className={className}
-                            dataTestId={dataTestId}
+                            bold={bold}
+                            transparentMinor={transparentMinor}
                         />
                     </Col>
                     <Col>
@@ -52,8 +51,6 @@ import styles from '!!raw-loader!../index.module.css';
                             currency={currency}
                             minority={minority}
                             view={view}
-                            className={className}
-                            dataTestId={dataTestId}
                         />
                     </Col>
                 </Row>
diff --git a/packages/amount/src/index.module.css b/packages/amount/src/index.module.css
index 207de1d225..67d517ed57 100644
--- a/packages/amount/src/index.module.css
+++ b/packages/amount/src/index.module.css
@@ -1,16 +1,21 @@
 @import '../../themes/src/default.css';
 
-:root {
-    --amount-major-part-font-weight: bold;
-    --amount-minor-part-font-weight: normal;
-}
-
 .component {
     white-space: nowrap;
-    font-weight: var(--amount-major-part-font-weight);
 }
 
-.minorPartAndCurrency {
+.transparentMinor {
     opacity: 0.6;
-    font-weight: var(--amount-minor-part-font-weight);
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.boldMajor {
+    font-weight: bold;
+}
+
+.normalMinor {
+    font-weight: normal;
 }
diff --git a/packages/amount/src/types/amount-props.ts b/packages/amount/src/types/amount-props.ts
index 2f7dd1a7ea..419e91e35a 100644
--- a/packages/amount/src/types/amount-props.ts
+++ b/packages/amount/src/types/amount-props.ts
@@ -22,6 +22,16 @@ export type AmountProps = {
      */
     view?: 'default' | 'withZeroMinorPart';
 
+    /**
+     * Управление жирностью
+     */
+    bold?: 'full' | 'major' | 'none';
+
+    /**
+     * Делает минорную часть полупрозрачной
+     */
+    transparentMinor?: boolean;
+
     /**
      * Дополнительный класс
      */
diff --git a/packages/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css
index 5d607c7b58..a732a58880 100644
--- a/packages/themes/src/mixins/click.css
+++ b/packages/themes/src/mixins/click.css
@@ -1,4 +1,3 @@
-@import './amount/click.css';
 @import './form-control/click.css';
 @import './input/click.css';
 @import './button/click.css';
@@ -23,7 +22,6 @@
     --disabled-cursor: not-allowed;
     --arrow-transform: rotate(-180deg);
 
-    @mixin amount-click;
     @mixin form-control-click;
     @mixin input-click;
     @mixin button-click;

From 1fd54ab156f0a39c91dd6e93135d091e2b590b35 Mon Sep 17 00:00:00 2001
From: Alex Yatsenko <reme3d2y@gmail.com>
Date: Wed, 30 Mar 2022 13:38:03 +0300
Subject: [PATCH 2/2] feat(amount): add default styles

---
 .../src/__snapshots__/component.test.tsx.snap | 20 +++++++++----------
 packages/amount/src/component.tsx             |  8 ++++++--
 packages/amount/src/index.module.css          | 15 ++++++++++++++
 packages/themes/src/mixins/click.css          |  2 ++
 4 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/packages/amount/src/__snapshots__/component.test.tsx.snap b/packages/amount/src/__snapshots__/component.test.tsx.snap
index 30476e0751..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`] = `
 <div>
   <span
-    class="component boldMajor"
+    class="component default"
   >
     
     1
     <span
-      class="minorPartAndCurrency transparentMinor normalMinor"
+      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 boldMajor"
+    class="component default"
   >
     
     0
     <span
-      class="minorPartAndCurrency transparentMinor normalMinor"
+      class="minorPartAndCurrency defaultMinor"
     >
       
       
     </span>
   </span>
   <span
-    class="component boldMajor"
+    class="component default"
   >
     
     −1
     <span
-      class="minorPartAndCurrency transparentMinor normalMinor"
+      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 boldMajor"
+    class="component default"
   >
     +
     1
     <span
-      class="minorPartAndCurrency transparentMinor normalMinor"
+      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 boldMajor"
+    class="component default"
   >
     
     1
     <span
-      class="minorPartAndCurrency transparentMinor normalMinor"
+      class="minorPartAndCurrency defaultMinor"
     >
       
       
diff --git a/packages/amount/src/component.tsx b/packages/amount/src/component.tsx
index 74836ff88d..bc0add455f 100644
--- a/packages/amount/src/component.tsx
+++ b/packages/amount/src/component.tsx
@@ -14,8 +14,8 @@ export const Amount: React.FC<AmountProps> = ({
     minority,
     currency,
     view = 'default',
-    bold = 'major',
-    transparentMinor = true,
+    bold,
+    transparentMinor,
     rightAddons,
     showPlus = false,
     className,
@@ -28,11 +28,14 @@ export const Amount: React.FC<AmountProps> = ({
         view,
     });
 
+    const defaultStyles = bold === undefined && transparentMinor === undefined;
+
     return (
         <span
             className={cn(styles.component, className, {
                 [styles.bold]: bold === 'full',
                 [styles.boldMajor]: bold === 'major',
+                [styles.default]: defaultStyles,
             })}
             data-test-id={dataTestId}
         >
@@ -42,6 +45,7 @@ export const Amount: React.FC<AmountProps> = ({
                 className={cn(styles.minorPartAndCurrency, {
                     [styles.transparentMinor]: transparentMinor,
                     [styles.normalMinor]: bold === 'major',
+                    [styles.defaultMinor]: defaultStyles,
                 })}
             >
                 {minorPart && AMOUNT_MAJOR_MINOR_PARTS_SEPARATOR}
diff --git a/packages/amount/src/index.module.css b/packages/amount/src/index.module.css
index 67d517ed57..da4978fa1e 100644
--- a/packages/amount/src/index.module.css
+++ b/packages/amount/src/index.module.css
@@ -1,5 +1,11 @@
 @import '../../themes/src/default.css';
 
+:root {
+    --amount-major-part-font-weight: bold;
+    --amount-minor-part-font-weight: normal;
+    --amount-minor-part-opacity: 0.6;
+}
+
 .component {
     white-space: nowrap;
 }
@@ -19,3 +25,12 @@
 .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/themes/src/mixins/click.css b/packages/themes/src/mixins/click.css
index 730781785e..89d3d0897c 100644
--- a/packages/themes/src/mixins/click.css
+++ b/packages/themes/src/mixins/click.css
@@ -1,3 +1,4 @@
+@import './amount/click.css';
 @import './form-control/click.css';
 @import './input/click.css';
 @import './button/click.css';
@@ -49,4 +50,5 @@
     @mixin dropzone-click;
     @mixin code-input-click;
     @mixin bottom-sheet-click;
+    @mixin amount-click;
 }