feat(amount): add default styles

alfa-laboratory · Mar 30, 2022 · 1fd54ab · 1fd54ab
1 parent f60a499
commit 1fd54ab
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
 }