feat(amount): add default styles

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

Hide file tree

Showing 3 changed files with 23 additions and 2 deletions.
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;
 }