From f9a5e2740d789dcd6bc2a42688d66e281be89c53 Mon Sep 17 00:00:00 2001 From: Nitin Kumar Date: Wed, 24 Jan 2024 13:10:40 +0530 Subject: [PATCH] feat(Amount): add new props & remove `prefix` (#1987) --- .../blade/.storybook/react/preview-head.html | 6 +- .../__tests__/migrate-amount.test.ts | 300 ++++--- .../transformers/migrate-amount.ts | 33 +- .../src/components/Amount/Amount.stories.tsx | 11 +- .../blade/src/components/Amount/Amount.tsx | 111 ++- .../Amount/_KitchenSink.Amount.stories.tsx | 2 +- .../Amount/__tests__/Amount.native.test.tsx | 36 +- .../Amount/__tests__/Amount.web.test.tsx | 40 +- .../__snapshots__/Amount.native.test.tsx.snap | 796 ++++++++++++++++-- .../__snapshots__/Amount.ssr.test.tsx.snap | 15 +- .../__snapshots__/Amount.web.test.tsx.snap | 547 +++++++++++- .../src/components/Amount/amountTokens.ts | 14 +- .../Collapsible.native.test.tsx.snap | 26 +- .../Collapsible.ssr.test.tsx.snap | 15 +- .../Collapsible.web.test.tsx.snap | 22 +- .../Typography/BaseText/BaseText.native.tsx | 4 + .../Typography/BaseText/BaseText.web.tsx | 4 + .../Typography/BaseText/getBaseTextStyles.ts | 2 + .../components/Typography/BaseText/types.ts | 2 + packages/blade/upgrade-v11.md | 10 + 20 files changed, 1712 insertions(+), 284 deletions(-) diff --git a/packages/blade/.storybook/react/preview-head.html b/packages/blade/.storybook/react/preview-head.html index 6f250da3498..f836085e7ec 100644 --- a/packages/blade/.storybook/react/preview-head.html +++ b/packages/blade/.storybook/react/preview-head.html @@ -4,10 +4,10 @@ Fix these overrides when there is better resolution to this issue- https://github.com/storybookjs/storybook/discussions/21109 */ - * :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)), + * :where(p:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled p)), * :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)), - * :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)), - * :where(span:not(.sb-anchor, .sb-unstyled, .sb-unstyled span)), + * :where(div:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled div)), + * :where(span:not([data-blade-component="base-text"], .sb-anchor, .sb-unstyled, .sb-unstyled span)), * :where(ul:not(.sb-anchor, .sb-unstyled, .sb-unstyled ul)), * :where(ol:not(.sb-anchor, .sb-unstyled, .sb-unstyled ol)), * :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) { diff --git a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts index d47dc56660a..8fe22811eca 100644 --- a/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts +++ b/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-amount.test.ts @@ -1,132 +1,186 @@ import { applyTransform } from '@hypermod/utils'; import * as transformer from '..'; -it('should migrate the Amount component', async () => { - const result = await applyTransform( - transformer, - ` - const App = () => ( - <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); - `, - { parser: 'tsx' }, - ); - - expect(result).toMatchInlineSnapshot(` - "const App = () => ( - <> - - - - - - - - - - - - - +describe('should migrate the Amount & CardHeaderAmount components', () => { + it('should migrate the size prop', async () => { + const result = await applyTransform( + transformer, + ` + const App = () => ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + `, + { parser: 'tsx' }, + ); + + expect(result).toMatchInlineSnapshot(` + "const App = () => ( + <> + - - - + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - + + + - - - + - - - - - - - + + + + + + + + + + + + + + + + + + + + + );" + `); + }); + + it('should migrate the intent prop', async () => { + const result = await applyTransform( + transformer, + ` + const App = () => ( + <> + + + + + + + + + + + + + + + + + ); + `, + { parser: 'tsx' }, + ); + + expect(result).toMatchInlineSnapshot(` + "const App = () => ( + <> + + + + + + + + + + + + + + + + + );" + `); + }); + + it('should migrate the prefix prop', async () => { + const result = await applyTransform( + transformer, + ` + const App = () => ( + <> + + + + + + + + + ); + `, + { parser: 'tsx' }, + ); + + expect(result).toMatchInlineSnapshot(` + "const App = () => ( + <> + + + - - - );" - `); + + + + + );" + `); + }); }); diff --git a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts index fe3244cecf0..22328760a9e 100644 --- a/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts +++ b/packages/blade/codemods/brand-refresh/transformers/migrate-amount.ts @@ -1,6 +1,6 @@ import { red, isExpression } from './utils'; -// Amount component: changes to intent & size props +// Amount component: changes to intent, size, & prefix props function migrateAmountComponent({ root, j, file }): void { try { // -> @@ -137,6 +137,37 @@ function migrateAmountComponent({ root, j, file }): void { `\n${red(error.stack)}\n`, ); } + + // -> + try { + root + .find(j.JSXElement, { + openingElement: { + name: { + name: (name) => ['Amount', 'CardHeaderAmount'].includes(name), + }, + }, + }) + .find(j.JSXAttribute, { + name: { + name: (name) => name === 'prefix', + }, + }) + .replaceWith((path) => { + const { node } = path; + + node.name.name = 'currencyIndicator'; + + return node; + }); + } catch (error) { + console.error( + red( + `⛔️ ${file.path}: Oops! Ran into an issue while updating the "prefix" prop in "Amount" component.`, + ), + `\n${red(error.stack)}\n`, + ); + } } export default migrateAmountComponent; diff --git a/packages/blade/src/components/Amount/Amount.stories.tsx b/packages/blade/src/components/Amount/Amount.stories.tsx index 83243ac3c01..e74dae5a3e2 100644 --- a/packages/blade/src/components/Amount/Amount.stories.tsx +++ b/packages/blade/src/components/Amount/Amount.stories.tsx @@ -3,7 +3,7 @@ import { Title } from '@storybook/addon-docs'; import type { AmountProps } from './Amount'; import { Amount as AmountComponent } from './Amount'; import type { AmountHeadingProps, AmountDisplayProps, AmountBodyProps } from './amountTokens'; -import { currencyPrefixMapping } from './amountTokens'; +import { currencyIndicatorMapping } from './amountTokens'; import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes'; import BaseBox from '~components/Box/BaseBox'; import { Sandbox } from '~utils/storybook/Sandbox'; @@ -176,7 +176,7 @@ HumanizeSuffix.args = { HumanizeSuffix.storyName = 'Humanize Suffix'; const AmountCurrencyTemplate: StoryFn = (args) => { - const values = Object.keys(currencyPrefixMapping); + const values = Object.keys(currencyIndicatorMapping); return ( @@ -210,3 +210,10 @@ AffixSubtleOff.args = { isAffixSubtle: false, }; AffixSubtleOff.storyName = 'Affix Subtle Off'; + +export const StrikeThrough = AmountDefaultTemplate.bind({}); +StrikeThrough.args = { + ...defaultArgs, + isStrikethrough: true, +}; +StrikeThrough.storyName = 'Strike Through'; diff --git a/packages/blade/src/components/Amount/Amount.tsx b/packages/blade/src/components/Amount/Amount.tsx index 4cb5b7b5759..ca628bf3492 100644 --- a/packages/blade/src/components/Amount/Amount.tsx +++ b/packages/blade/src/components/Amount/Amount.tsx @@ -4,9 +4,10 @@ import type { AmountTypeProps, Currency } from './amountTokens'; import { normalAmountSizes, getCurrencyAbbreviations, - currencyPrefixMapping, + currencyIndicatorMapping, subtleFontSizes, amountLineHeights, + currencyPositionMapping, } from './amountTokens'; import type { BaseTextProps } from '~components/Typography/BaseText/types'; import BaseBox from '~components/Box/BaseBox'; @@ -20,6 +21,7 @@ import { throwBladeError } from '~utils/logger'; import { objectKeysWithType } from '~utils/objectKeysWithType'; import { BaseText } from '~components/Typography/BaseText'; import { Text } from '~components/Typography'; +import { opacity } from '~tokens/global'; import type { FontFamily } from '~tokens/global'; type AmountCommonProps = { @@ -41,17 +43,17 @@ type AmountCommonProps = { */ suffix?: 'decimals' | 'none' | 'humanize'; /** - * Makes the prefix symbol and decimal digits small and faded + * Makes the currency indicator(currency symbol/code) and decimal digits small and faded * * @default true */ isAffixSubtle?: true | false; /** - * Prefix to be shown before the amount value. The prefix can be either a currency symbol or a currency code. + * Determines the visual representation of the currency, choose between displaying the currency symbol or code. * * @default 'currency-symbol' */ - prefix?: 'currency-symbol' | 'currency-code'; + currencyIndicator?: 'currency-symbol' | 'currency-code'; /** * The currency of the amount. Note that this component * only displays the provided value in the specified currency, it does not perform any currency conversion. @@ -59,6 +61,12 @@ type AmountCommonProps = { * @default 'INR' * */ currency?: Currency; + /** + * If true, the amount text will have a line through it. + * + * @default false + */ + isStrikethrough?: boolean; } & TestID & StyledPropsBlade; @@ -99,8 +107,8 @@ const AmountValue = ({ const integer = value.split('.')[0]; const decimal = value.split('.')[1]; - // Native does not support alignItems of Text inside a div, insted we need to wrap is in a Text - const AmountWrapper = getPlatformType() === 'react-native' ? Text : React.Fragment; + // Native does not support alignItems of Text inside a div, instead we need to wrap is in a Text + const AmountWrapper = isReactNative ? Text : React.Fragment; return ( @@ -112,17 +120,17 @@ const AmountValue = ({ fontFamily={numberFontFamily} as={isReactNative ? undefined : 'span'} > - {integer}. + {integer} - {decimal || '00'} + .{decimal || '00'} ); @@ -159,29 +167,45 @@ export const addCommas = (amountValue: number, currency: Currency, decimalPlaces * ie: for INR 2000 => 2K * for MYR 2000000 => 2M */ -export const getHumanizedAmount = (amountValue: number, currency: Currency): string => { +export const getHumanizedAmount = ({ + value, + currency, + denominationPosition = 'right', +}: { + value: number; + currency: Currency; + denominationPosition?: 'left' | 'right'; +}): string => { + let amountValue = value; const abbreviations = getCurrencyAbbreviations(currency); - const abbreviation = abbreviations.find((abbr) => amountValue >= abbr.value); + if (abbreviation) { amountValue = amountValue / abbreviation.value; const formattedAmountValue = getFlooredFixed(amountValue, 2); - return addCommas(formattedAmountValue, currency) + abbreviation.symbol; - } else { - return amountValue.toString(); + + if (denominationPosition === 'right') { + return `${addCommas(formattedAmountValue, currency)}${abbreviation.symbol}`; + } + + return `${abbreviation.symbol}${addCommas(formattedAmountValue, currency)}`; } + + return amountValue.toString(); }; type FormatAmountWithSuffixType = { suffix: AmountProps['suffix']; value: number; currency: Currency; + denominationPosition?: 'left' | 'right'; }; export const formatAmountWithSuffix = ({ suffix, value, currency, + denominationPosition, }: FormatAmountWithSuffixType): string => { switch (suffix) { case 'decimals': { @@ -189,7 +213,7 @@ export const formatAmountWithSuffix = ({ return addCommas(decimalNumber, currency, 2); } case 'humanize': { - return getHumanizedAmount(value, currency); + return getHumanizedAmount({ value, currency, denominationPosition }); } case 'none': { return addCommas(getFlooredFixed(value, 0), currency); @@ -206,10 +230,11 @@ const _Amount = ({ size = 'medium', weight = 'regular', isAffixSubtle = true, + isStrikethrough = false, color, - prefix = 'currency-symbol', - testID, + currencyIndicator = 'currency-symbol', currency = 'INR', + testID, ...styledProps }: AmountProps): ReactElement => { if (__DEV__) { @@ -252,8 +277,10 @@ const _Amount = ({ } } - const currencyPrefix = currencyPrefixMapping[currency][prefix]; - const renderedValue = formatAmountWithSuffix({ suffix, value, currency }); + const currencySymbolOrCode = currencyIndicatorMapping[currency][currencyIndicator]; + const currencyPosition = currencyPositionMapping[currency] || 'left'; + const denominationPosition = currencyPosition === 'left' ? 'right' : 'left'; + const renderedValue = formatAmountWithSuffix({ suffix, value, currency, denominationPosition }); const { amountValueColor } = getTextColorProps({ color, }); @@ -266,6 +293,7 @@ const _Amount = ({ return ( @@ -273,16 +301,20 @@ const _Amount = ({ display={(isReactNative ? 'flex' : 'inline-flex') as never} alignItems="baseline" flexDirection="row" + position="relative" > - - {currencyPrefix} - + {currencyPosition === 'left' && ( + + {currencySymbolOrCode} + + )} + {currencyPosition === 'right' && ( + + {currencySymbolOrCode} + + )} + {isStrikethrough && ( + + )} ); diff --git a/packages/blade/src/components/Amount/_KitchenSink.Amount.stories.tsx b/packages/blade/src/components/Amount/_KitchenSink.Amount.stories.tsx index d1d2191bc13..5aa8b4fe8b9 100644 --- a/packages/blade/src/components/Amount/_KitchenSink.Amount.stories.tsx +++ b/packages/blade/src/components/Amount/_KitchenSink.Amount.stories.tsx @@ -24,7 +24,7 @@ export default { title: 'Components/KitchenSink/Amount', component: Amount, parameters: { - // enable Chromatic's snapshotting only for kitchensink + // enable Chromatic's snapshots only for kitchen sink chromatic: { disableSnapshot: false }, options: { showPanel: false }, }, diff --git a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx index a288d7abbb5..f1a68e583f9 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.native.test.tsx @@ -74,6 +74,21 @@ describe('', () => { expect(toJSON()).toMatchSnapshot(); }); + it('should render isStrikethrough={true}', () => { + const { toJSON } = renderWithTheme(); + expect(toJSON()).toMatchSnapshot(); + }); + + it('should render currencyIndicator="currency-symbol"', () => { + const { toJSON } = renderWithTheme(); + expect(toJSON()).toMatchSnapshot(); + }); + + it('should render currencyIndicator="currency-code"', () => { + const { toJSON } = renderWithTheme(); + expect(toJSON()).toMatchSnapshot(); + }); + it('should render positive intent Amount ', () => { const { toJSON } = renderWithTheme( , @@ -106,12 +121,21 @@ describe('', () => { }); it('should check if getHumanizedAmount is returning the right humanized value', () => { - expect(getHumanizedAmount(1000.22, 'INR')).toBe('1k'); - expect(getHumanizedAmount(1000000, 'INR')).toBe('10L'); - expect(getHumanizedAmount(10000000, 'INR')).toBe('1Cr'); - expect(getHumanizedAmount(1000.22, 'MYR')).toBe('1K'); - expect(getHumanizedAmount(1000000, 'MYR')).toBe('1M'); - expect(getHumanizedAmount(10000000, 'MYR')).toBe('10M'); + expect(getHumanizedAmount({ value: 1000.22, currency: 'INR' })).toBe('1k'); + expect(getHumanizedAmount({ value: 1000000, currency: 'INR' })).toBe('10L'); + expect(getHumanizedAmount({ value: 10000000, currency: 'INR' })).toBe('1Cr'); + expect(getHumanizedAmount({ value: 1000.22, currency: 'MYR' })).toBe('1K'); + expect(getHumanizedAmount({ value: 1000000, currency: 'MYR' })).toBe('1M'); + expect(getHumanizedAmount({ value: 10000000, currency: 'MYR' })).toBe('10M'); + expect( + getHumanizedAmount({ value: 1000.22, currency: 'MYR', denominationPosition: 'left' }), + ).toBe('K1'); + expect( + getHumanizedAmount({ value: 1000000, currency: 'MYR', denominationPosition: 'left' }), + ).toBe('M1'); + expect( + getHumanizedAmount({ value: 10000000, currency: 'MYR', denominationPosition: 'left' }), + ).toBe('M10'); }); it('should check if formatAmountWithSuffix is returning values for humanize decimals and none', () => { diff --git a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx index 0b54bc9243e..d0a898169cd 100644 --- a/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx +++ b/packages/blade/src/components/Amount/__tests__/Amount.web.test.tsx @@ -83,6 +83,25 @@ describe('', () => { expect(container).toMatchSnapshot(); }); + it('should render isStrikethrough={true}', () => { + const { container } = renderWithTheme(); + expect(container).toMatchSnapshot(); + }); + + it('should render currencyIndicator="currency-symbol"', () => { + const { container } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + }); + + it('should render currencyIndicator="currency-code"', () => { + const { container } = renderWithTheme( + , + ); + expect(container).toMatchSnapshot(); + }); + it('should render amount with Humanize value', () => { const { container } = renderWithTheme( , @@ -128,12 +147,21 @@ describe('', () => { }); it('should check if getHumanizedAmount is returning the humanized value', () => { - expect(getHumanizedAmount(1000.22, 'INR')).toBe('1k'); - expect(getHumanizedAmount(1000000, 'INR')).toBe('10L'); - expect(getHumanizedAmount(10000000, 'INR')).toBe('1Cr'); - expect(getHumanizedAmount(1000.22, 'MYR')).toBe('1K'); - expect(getHumanizedAmount(1000000, 'MYR')).toBe('1M'); - expect(getHumanizedAmount(10000000, 'MYR')).toBe('10M'); + expect(getHumanizedAmount({ value: 1000.22, currency: 'INR' })).toBe('1k'); + expect(getHumanizedAmount({ value: 1000000, currency: 'INR' })).toBe('10L'); + expect(getHumanizedAmount({ value: 10000000, currency: 'INR' })).toBe('1Cr'); + expect(getHumanizedAmount({ value: 1000.22, currency: 'MYR' })).toBe('1K'); + expect(getHumanizedAmount({ value: 1000000, currency: 'MYR' })).toBe('1M'); + expect(getHumanizedAmount({ value: 10000000, currency: 'MYR' })).toBe('10M'); + expect( + getHumanizedAmount({ value: 1000.22, currency: 'MYR', denominationPosition: 'left' }), + ).toBe('K1'); + expect( + getHumanizedAmount({ value: 1000000, currency: 'MYR', denominationPosition: 'left' }), + ).toBe('M1'); + expect( + getHumanizedAmount({ value: 10000000, currency: 'MYR', denominationPosition: 'left' }), + ).toBe('M10'); }); it('should check if formatAmountWithSuffix is returning the right value for humanize decimals and none', () => { diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap index a63a1676128..d7a69345489 100644 --- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap +++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.native.test.tsx.snap @@ -11,10 +11,12 @@ exports[` should render AED currency Amount 1`] = ` should render AED currency Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -41,6 +45,7 @@ exports[` should render AED currency Amount 1`] = ` fontSize={25} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -55,6 +60,7 @@ exports[` should render AED currency Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -130,7 +136,6 @@ exports[` should render AED currency Amount 1`] = ` } > 1,000 - . should render AED currency Amount 1`] = ` fontFamily="text" fontSize={25} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -151,9 +156,10 @@ exports[` should render AED currency Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -163,6 +169,7 @@ exports[` should render AED currency Amount 1`] = ` ] } > + . 00 @@ -182,10 +189,12 @@ exports[` should render Amount with default props 1`] = ` should render Amount with default props 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -212,6 +223,7 @@ exports[` should render Amount with default props 1`] = ` fontSize={25} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -226,6 +238,7 @@ exports[` should render Amount with default props 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -301,7 +314,6 @@ exports[` should render Amount with default props 1`] = ` } > 1,000 - . should render Amount with default props 1`] = ` fontFamily="text" fontSize={25} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -322,9 +334,10 @@ exports[` should render Amount with default props 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -334,6 +347,7 @@ exports[` should render Amount with default props 1`] = ` ] } > + . 00 @@ -353,10 +367,12 @@ exports[` should render MYR currency Amount 1`] = ` should render MYR currency Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -383,6 +401,7 @@ exports[` should render MYR currency Amount 1`] = ` fontSize={25} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -397,6 +416,7 @@ exports[` should render MYR currency Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -472,7 +492,6 @@ exports[` should render MYR currency Amount 1`] = ` } > 1,000 - . should render MYR currency Amount 1`] = ` fontFamily="text" fontSize={25} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -493,9 +512,10 @@ exports[` should render MYR currency Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -505,6 +525,7 @@ exports[` should render MYR currency Amount 1`] = ` ] } > + . 00 @@ -524,10 +545,12 @@ exports[` should render USD currency Amount 1`] = ` should render USD currency Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -554,6 +579,7 @@ exports[` should render USD currency Amount 1`] = ` fontSize={25} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -568,6 +594,7 @@ exports[` should render USD currency Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -643,7 +670,6 @@ exports[` should render USD currency Amount 1`] = ` } > 1,000 - . should render USD currency Amount 1`] = ` fontFamily="text" fontSize={25} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -664,9 +690,10 @@ exports[` should render USD currency Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -676,6 +703,7 @@ exports[` should render USD currency Amount 1`] = ` ] } > + . 00 @@ -695,10 +723,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -725,6 +757,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={25} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -739,6 +772,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -814,7 +848,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="text" fontSize={25} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -835,9 +868,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -847,6 +881,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -855,10 +890,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -885,6 +924,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={25} fontWeight="semibold" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -899,6 +939,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -974,7 +1015,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="text" fontSize={25} fontWeight="semibold" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -995,9 +1035,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1007,6 +1048,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -1015,10 +1057,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -1045,6 +1091,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={25} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -1059,6 +1106,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1134,7 +1182,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="text" fontSize={25} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -1155,9 +1202,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1167,6 +1215,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -1175,10 +1224,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -1205,6 +1258,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={25} fontWeight="semibold" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -1219,6 +1273,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1294,7 +1349,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="text" fontSize={25} fontWeight="semibold" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -1315,9 +1369,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1327,6 +1382,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -1335,10 +1391,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -1365,6 +1425,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={200} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -1379,6 +1440,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1454,7 +1516,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="heading" fontSize={200} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -1475,9 +1536,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1487,6 +1549,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -1495,10 +1558,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -1525,6 +1592,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={200} fontWeight="semibold" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -1539,6 +1607,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1614,7 +1683,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="heading" fontSize={200} fontWeight="semibold" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -1635,9 +1703,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1647,6 +1716,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -1655,10 +1725,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -1685,6 +1759,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={75} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -1699,6 +1774,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1774,7 +1850,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="heading" fontSize={75} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -1795,9 +1870,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1807,6 +1883,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -1815,10 +1892,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -1845,6 +1926,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={75} fontWeight="semibold" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -1859,6 +1941,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1934,7 +2017,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="heading" fontSize={75} fontWeight="semibold" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -1955,9 +2037,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -1967,6 +2050,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -1975,10 +2059,12 @@ exports[` should render all sizes of Amount 1`] = ` should render all sizes of Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -2005,6 +2093,7 @@ exports[` should render all sizes of Amount 1`] = ` fontSize={700} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -2019,6 +2108,7 @@ exports[` should render all sizes of Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -2094,7 +2184,6 @@ exports[` should render all sizes of Amount 1`] = ` } > 1,000 - . should render all sizes of Amount 1`] = ` fontFamily="heading" fontSize={700} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -2115,9 +2204,10 @@ exports[` should render all sizes of Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -2127,6 +2217,7 @@ exports[` should render all sizes of Amount 1`] = ` ] } > + . 00 @@ -2146,10 +2237,12 @@ exports[` should render amount with Decimal value 1`] = ` should render amount with Decimal value 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -2176,6 +2271,7 @@ exports[` should render amount with Decimal value 1`] = ` fontSize={75} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -2190,6 +2286,7 @@ exports[` should render amount with Decimal value 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -2265,7 +2362,6 @@ exports[` should render amount with Decimal value 1`] = ` } > 1,000 - . should render amount with Decimal value 1`] = ` fontFamily="heading" fontSize={75} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -2286,9 +2382,10 @@ exports[` should render amount with Decimal value 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -2298,6 +2395,7 @@ exports[` should render amount with Decimal value 1`] = ` ] } > + . 22 @@ -2317,10 +2415,12 @@ exports[` should render amount with Humanize value 1`] = ` should render amount with Humanize value 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -2347,6 +2449,7 @@ exports[` should render amount with Humanize value 1`] = ` fontSize={75} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -2361,6 +2464,7 @@ exports[` should render amount with Humanize value 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -2410,7 +2514,7 @@ exports[` should render amount with Humanize value 1`] = ` `; -exports[` should render information intent Amount 1`] = ` +exports[` should render currencyIndicator="currency-code" 1`] = ` should render information intent Amount 1`] = ` should render information intent Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } > should render information intent Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -2474,20 +2584,21 @@ exports[` should render information intent Amount 1`] = ` ] } > - ₹ + INR should render information intent Amount 1`] = ` ] } > - 1,000.00 + + 1,000 + + + . + 00 + `; -exports[` should render positive intent Amount 1`] = ` +exports[` should render currencyIndicator="currency-symbol" 1`] = ` should render positive intent Amount 1`] = ` should render positive intent Amount 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } > should render positive intent Amount 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -2614,7 +2798,7 @@ exports[` should render positive intent Amount 1`] = ` > should render positive intent Amount 1`] = ` style={ [ { - "color": "hsla(150, 100%, 27%, 1)", + "color": "hsla(212, 39%, 16%, 1)", "fontFamily": "Inter", "fontSize": 14, "fontStyle": "normal", @@ -2644,20 +2828,19 @@ exports[` should render positive intent Amount 1`] = ` } > 1,000 - . should render positive intent Amount 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -2677,6 +2861,494 @@ exports[` should render positive intent Amount 1`] = ` ] } > + . + 00 + + + + + +`; + +exports[` should render information intent Amount 1`] = ` + + + + + ₹ + + + 1,000.00 + + + + +`; + +exports[` should render isStrikethrough={true} 1`] = ` + + + + + ₹ + + + + 1,000 + + + . + 00 + + + + + + +`; + +exports[` should render positive intent Amount 1`] = ` + + + + + ₹ + + + + 1,000 + + + . 00 diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap index c9a028b5619..295b32794f5 100644 --- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap +++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render Amount on server 1`] = `"
₹10,000.00
"`; +exports[` should render Amount on server 1`] = `"
₹10,000.00
"`; exports[` should render Amount on server 2`] = ` .c0.c0.c0.c0.c0 { @@ -8,6 +8,9 @@ exports[` should render Amount on server 2`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -22,6 +25,7 @@ exports[` should render Amount on server 2`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -39,6 +43,7 @@ exports[` should render Amount on server 2`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -74,7 +79,7 @@ exports[` should render Amount on server 2`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
should render Amount on server 2`] = ` ₹ @@ -99,13 +105,14 @@ exports[` should render Amount on server 2`] = ` data-blade-component="base-text" > 10,000 - - . + . + 00
diff --git a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap index 0cbf94abf9d..1704258eb7b 100644 --- a/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap +++ b/packages/blade/src/components/Amount/__tests__/__snapshots__/Amount.web.test.tsx.snap @@ -6,6 +6,9 @@ exports[` should render AED currency Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -20,6 +23,7 @@ exports[` should render AED currency Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -37,6 +41,7 @@ exports[` should render AED currency Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -72,7 +77,7 @@ exports[` should render AED currency Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
@@ -87,6 +92,7 @@ exports[` should render AED currency Amount 1`] = ` د.إ @@ -95,12 +101,13 @@ exports[` should render AED currency Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00
@@ -114,6 +121,9 @@ exports[` should render Amount with default props 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -128,6 +138,7 @@ exports[` should render Amount with default props 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -145,6 +156,7 @@ exports[` should render Amount with default props 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -180,7 +192,7 @@ exports[` should render Amount with default props 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
@@ -195,6 +207,7 @@ exports[` should render Amount with default props 1`] = ` ₹ @@ -203,12 +216,13 @@ exports[` should render Amount with default props 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00
@@ -222,6 +236,9 @@ exports[` should render MYR currency Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -236,6 +253,7 @@ exports[` should render MYR currency Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -253,6 +271,7 @@ exports[` should render MYR currency Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -288,7 +307,7 @@ exports[` should render MYR currency Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
@@ -303,6 +322,7 @@ exports[` should render MYR currency Amount 1`] = ` RM @@ -311,12 +331,13 @@ exports[` should render MYR currency Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00
@@ -330,6 +351,9 @@ exports[` should render USD currency Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -344,6 +368,7 @@ exports[` should render USD currency Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -361,6 +386,7 @@ exports[` should render USD currency Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -396,7 +422,7 @@ exports[` should render USD currency Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
@@ -411,6 +437,7 @@ exports[` should render USD currency Amount 1`] = ` $ @@ -419,12 +446,13 @@ exports[` should render USD currency Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00
@@ -438,6 +466,9 @@ exports[` should render amount with Humanize value 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -452,6 +483,7 @@ exports[` should render amount with Humanize value 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -469,6 +501,7 @@ exports[` should render amount with Humanize value 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -501,6 +534,7 @@ exports[` should render amount with Humanize value 1`] = ` ₹ @@ -521,6 +555,9 @@ exports[` should render body-medium size Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -535,6 +572,7 @@ exports[` should render body-medium size Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -552,6 +590,7 @@ exports[` should render body-medium size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -587,7 +626,7 @@ exports[` should render body-medium size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
@@ -602,6 +641,7 @@ exports[` should render body-medium size Amount 1`] = ` ₹ @@ -610,12 +650,13 @@ exports[` should render body-medium size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00
@@ -629,6 +670,9 @@ exports[` should render body-medium-bold size Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -643,6 +687,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -660,6 +705,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -695,7 +741,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c5.c5.c5.c5.c5 { @@ -713,6 +759,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -748,7 +795,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c8.c8.c8.c8.c8 { @@ -800,6 +847,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -835,7 +883,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c13.c13.c13.c13.c13 { @@ -853,6 +901,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -888,7 +937,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c16.c16.c16.c16.c16 { @@ -906,6 +955,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -941,7 +991,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c19.c19.c19.c19.c19 { @@ -959,6 +1009,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -994,7 +1045,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c22.c22.c22.c22.c22 { @@ -1012,6 +1063,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -1047,7 +1099,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
@@ -1062,6 +1114,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1070,12 +1123,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00
@@ -1091,6 +1145,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1099,12 +1154,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -1120,6 +1176,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1128,12 +1185,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -1149,6 +1207,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1157,12 +1216,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -1178,6 +1238,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1186,12 +1247,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -1207,6 +1269,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1215,12 +1278,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -1236,6 +1300,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1244,12 +1309,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -1265,6 +1331,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1273,12 +1340,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -1294,6 +1362,7 @@ exports[` should render body-medium-bold size Amount 1`] = ` ₹ @@ -1302,12 +1371,13 @@ exports[` should render body-medium-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -1321,6 +1391,9 @@ exports[` should render body-small size Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -1335,6 +1408,7 @@ exports[` should render body-small size Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -1352,6 +1426,7 @@ exports[` should render body-small size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -1387,7 +1462,7 @@ exports[` should render body-small size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
@@ -1402,6 +1477,7 @@ exports[` should render body-small size Amount 1`] = ` ₹ @@ -1410,12 +1486,13 @@ exports[` should render body-small size Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00
@@ -1429,6 +1506,9 @@ exports[` should render body-small-bold size Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -1443,6 +1523,7 @@ exports[` should render body-small-bold size Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -1460,6 +1541,7 @@ exports[` should render body-small-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -1495,7 +1577,237 @@ exports[` should render body-small-bold size Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; +} + +
+
+
+ + ₹ + + + 1,000 + + + . + 00 + +
+
+
+`; + +exports[` should render currencyIndicator="currency-code" 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + position: relative; +} + +.c2.c2.c2.c2.c2 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.625rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + opacity: 0.64; + margin-right: 2px; +} + +.c3.c3.c3.c3.c3 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c4.c4.c4.c4.c4 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.625rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + opacity: 0.64; +} + +
+
+
+ + INR + + + 1,000 + + + . + 00 + +
+
+
+`; + +exports[` should render currencyIndicator="currency-symbol" 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + position: relative; +} + +.c2.c2.c2.c2.c2 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.625rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + opacity: 0.64; + margin-right: 2px; +} + +.c3.c3.c3.c3.c3 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c4.c4.c4.c4.c4 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.625rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + opacity: 0.64; }
@@ -1510,6 +1822,7 @@ exports[` should render body-small-bold size Amount 1`] = ` ₹ @@ -1518,14 +1831,173 @@ exports[` should render body-small-bold size Amount 1`] = ` data-blade-component="base-text" > 1,000 + + . + 00 + +
+ + +`; + +exports[` should render isStrikethrough={true} 1`] = ` +.c0.c0.c0.c0.c0 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; +} + +.c1.c1.c1.c1.c1 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + position: relative; +} + +.c5.c5.c5.c5.c5 { + position: absolute; + width: 100%; + top: 50%; + border-bottom-width: 1px; + border-bottom-color: hsla(212,39%,16%,1); + border-bottom-style: solid; +} + +.c2.c2.c2.c2.c2 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.625rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + opacity: 0.64; + margin-right: 2px; +} + +.c3.c3.c3.c3.c3 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.875rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; +} + +.c4.c4.c4.c4.c4 { + color: hsla(212,39%,16%,1); + font-family: "Inter",-apple-system,BlinkMacSystemFont,San Francisco,Segoe UI,Roboto,Helvetica Neue,sans-serif; + font-size: 0.625rem; + font-weight: 400; + font-style: normal; + -webkit-text-decoration-line: none; + text-decoration-line: none; + line-height: 1.25rem; + -webkit-letter-spacing: 0px; + -moz-letter-spacing: 0px; + -ms-letter-spacing: 0px; + letter-spacing: 0px; + margin: 0; + padding: 0; + opacity: 0.64; +} + +@media screen and (min-width:320px) { + .c5.c5.c5.c5.c5 { + border-bottom-style: solid; + } +} + +@media screen and (min-width:480px) { + .c5.c5.c5.c5.c5 { + border-bottom-style: solid; + } +} + +@media screen and (min-width:768px) { + .c5.c5.c5.c5.c5 { + border-bottom-style: solid; + } +} + +@media screen and (min-width:1024px) { + .c5.c5.c5.c5.c5 { + border-bottom-style: solid; + } +} + +@media screen and (min-width:1200px) { + .c5.c5.c5.c5.c5 { + border-bottom-style: solid; + } +} + +
+
+
+ + ₹ + + + 1,000 + . 00 +
@@ -1537,6 +2009,9 @@ exports[` should render negative intent Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -1551,6 +2026,7 @@ exports[` should render negative intent Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -1568,6 +2044,7 @@ exports[` should render negative intent Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 1; margin-right: 2px; } @@ -1600,6 +2077,7 @@ exports[` should render negative intent Amount 1`] = ` ₹ @@ -1620,6 +2098,9 @@ exports[` should render positive intent Amount 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c1.c1.c1.c1.c1 { @@ -1634,6 +2115,7 @@ exports[` should render positive intent Amount 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c2.c2.c2.c2.c2 { @@ -1651,6 +2133,7 @@ exports[` should render positive intent Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -1686,7 +2169,7 @@ exports[` should render positive intent Amount 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; }
@@ -1701,6 +2184,7 @@ exports[` should render positive intent Amount 1`] = ` ₹ @@ -1709,12 +2193,13 @@ exports[` should render positive intent Amount 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00
diff --git a/packages/blade/src/components/Amount/amountTokens.ts b/packages/blade/src/components/Amount/amountTokens.ts index 034ac517e4f..5b12eabc115 100644 --- a/packages/blade/src/components/Amount/amountTokens.ts +++ b/packages/blade/src/components/Amount/amountTokens.ts @@ -99,7 +99,7 @@ const amountLineHeights: Record< }; // All the supported currency codes are taken from Razorpay's Merchant Dashboard codebase -const currencyPrefixMapping = { +const currencyIndicatorMapping = { AED: { 'currency-symbol': 'د.إ', 'currency-code': 'AED' }, ALL: { 'currency-symbol': 'Lek', 'currency-code': 'ALL' }, AMD: { 'currency-symbol': '֏', 'currency-code': 'AMD' }, @@ -202,7 +202,7 @@ type CurrencyAbbreviation = { symbol: string; }; -type Currency = keyof typeof currencyPrefixMapping; +type Currency = keyof typeof currencyIndicatorMapping; const getCurrencyAbbreviations = (currency: Currency): CurrencyAbbreviation[] => { if (currency === 'INR') { @@ -220,11 +220,19 @@ const getCurrencyAbbreviations = (currency: Currency): CurrencyAbbreviation[] => ]; }; +const currencyPositionMapping: Record = { + DZD: 'right', + BHD: 'right', + OMR: 'right', + KWD: 'right', +}; + export { subtleFontSizes, normalAmountSizes, amountLineHeights, - currencyPrefixMapping, + currencyPositionMapping, + currencyIndicatorMapping, getCurrencyAbbreviations, }; diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap index e0af5b7bb91..d628ac2f4ff 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.native.test.tsx.snap @@ -285,10 +285,12 @@ exports[` should render with CollapsibleButton 1`] = ` should render with CollapsibleButton 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -315,6 +319,7 @@ exports[` should render with CollapsibleButton 1`] = ` fontSize={25} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -329,6 +334,7 @@ exports[` should render with CollapsibleButton 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -404,7 +410,6 @@ exports[` should render with CollapsibleButton 1`] = ` } > 1,000 - . should render with CollapsibleButton 1`] = ` fontFamily="text" fontSize={25} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -425,9 +430,10 @@ exports[` should render with CollapsibleButton 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -437,6 +443,7 @@ exports[` should render with CollapsibleButton 1`] = ` ] } > + . 00 @@ -779,10 +786,12 @@ exports[` should render with CollapsibleLink 1`] = ` should render with CollapsibleLink 1`] = ` data-blade-component="base-box" display="flex" flexDirection="row" + position="relative" style={ [ { "alignItems": "baseline", "display": "flex", "flexDirection": "row", + "position": "relative", }, ] } @@ -809,6 +820,7 @@ exports[` should render with CollapsibleLink 1`] = ` fontSize={25} fontWeight="regular" marginRight="spacing.1" + opacity={0.64} style={ [ { @@ -823,6 +835,7 @@ exports[` should render with CollapsibleLink 1`] = ` "marginLeft": 0, "marginRight": 2, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -898,7 +911,6 @@ exports[` should render with CollapsibleLink 1`] = ` } > 1,000 - . should render with CollapsibleLink 1`] = ` fontFamily="text" fontSize={25} fontWeight="regular" - marginLeft="spacing.1" + opacity={0.64} style={ [ { @@ -919,9 +931,10 @@ exports[` should render with CollapsibleLink 1`] = ` "letterSpacing": 0, "lineHeight": 20, "marginBottom": 0, - "marginLeft": 2, + "marginLeft": 0, "marginRight": 0, "marginTop": 0, + "opacity": 0.64, "paddingBottom": 0, "paddingLeft": 0, "paddingRight": 0, @@ -931,6 +944,7 @@ exports[` should render with CollapsibleLink 1`] = ` ] } > + . 00 diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap index ab18cb7f6a2..0118e40ef73 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.ssr.test.tsx.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` should render Collapsible on server 1`] = `"

Actual amount

₹1,000.00

Razorpay Platform Fees

2%

GST

18%

"`; +exports[` should render Collapsible on server 1`] = `"

Actual amount

₹1,000.00

Razorpay Platform Fees

2%

GST

18%

"`; exports[` should render Collapsible on server 2`] = ` .c0.c0.c0.c0.c0 { @@ -79,6 +79,9 @@ exports[` should render Collapsible on server 2`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c11.c11.c11.c11.c11 { @@ -93,6 +96,7 @@ exports[` should render Collapsible on server 2`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c1.c1.c1.c1.c1 { @@ -208,6 +212,7 @@ exports[` should render Collapsible on server 2`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -243,7 +248,7 @@ exports[` should render Collapsible on server 2`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c15.c15.c15.c15.c15 { @@ -369,6 +374,7 @@ exports[` should render Collapsible on server 2`] = ` ₹ @@ -377,13 +383,14 @@ exports[` should render Collapsible on server 2`] = ` data-blade-component="base-text" > 1,000 - - . + . + 00
diff --git a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap index b6753cea86d..b2435905042 100644 --- a/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap +++ b/packages/blade/src/components/Collapsible/__tests__/__snapshots__/Collapsible.web.test.tsx.snap @@ -59,6 +59,9 @@ exports[` should render with CollapsibleButton 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c10.c10.c10.c10.c10 { @@ -73,6 +76,7 @@ exports[` should render with CollapsibleButton 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c5.c5.c5.c5.c5 { @@ -201,6 +205,7 @@ exports[` should render with CollapsibleButton 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -236,7 +241,7 @@ exports[` should render with CollapsibleButton 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c3.c3.c3.c3.c3 { @@ -325,6 +330,7 @@ exports[` should render with CollapsibleButton 1`] = ` ₹ @@ -333,12 +339,13 @@ exports[` should render with CollapsibleButton 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 @@ -415,6 +422,9 @@ exports[` should render with CollapsibleLink 1`] = ` display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } .c11.c11.c11.c11.c11 { @@ -429,6 +439,7 @@ exports[` should render with CollapsibleLink 1`] = ` -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; + position: relative; } .c6.c6.c6.c6.c6 { @@ -494,6 +505,7 @@ exports[` should render with CollapsibleLink 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; + opacity: 0.64; margin-right: 2px; } @@ -529,7 +541,7 @@ exports[` should render with CollapsibleLink 1`] = ` letter-spacing: 0px; margin: 0; padding: 0; - margin-left: 2px; + opacity: 0.64; } .c5.c5.c5.c5.c5 { @@ -706,6 +718,7 @@ exports[` should render with CollapsibleLink 1`] = ` ₹ @@ -714,12 +727,13 @@ exports[` should render with CollapsibleLink 1`] = ` data-blade-component="base-text" > 1,000 - . + . 00 diff --git a/packages/blade/src/components/Typography/BaseText/BaseText.native.tsx b/packages/blade/src/components/Typography/BaseText/BaseText.native.tsx index 81725c042ab..e39f65ab952 100644 --- a/packages/blade/src/components/Typography/BaseText/BaseText.native.tsx +++ b/packages/blade/src/components/Typography/BaseText/BaseText.native.tsx @@ -19,6 +19,7 @@ const StyledBaseText = styled.Text( letterSpacing, textAlign, as, + opacity, ...props }) => { const styledPropsCSSObject = useStyledProps(props); @@ -35,6 +36,7 @@ const StyledBaseText = styled.Text( lineHeight, letterSpacing, textAlign, + opacity, theme: props.theme, }), ...styledPropsCSSObject, @@ -54,6 +56,7 @@ export const BaseText = ({ textAlign, children, truncateAfterLines, + opacity, className, style, accessibilityProps = {}, @@ -74,6 +77,7 @@ export const BaseText = ({ as={undefined} textAlign={textAlign} numberOfLines={truncateAfterLines} + opacity={opacity} className={className} style={style} id={id} diff --git a/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx b/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx index 3fe0b5fd0ef..f0375ef3a24 100644 --- a/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx +++ b/packages/blade/src/components/Typography/BaseText/BaseText.web.tsx @@ -24,6 +24,7 @@ const StyledBaseText = styled.div.withConfig({ letterSpacing, textAlign, wordBreak, + opacity, ...props }) => { const styledPropsCSSObject = useStyledProps(props); @@ -40,6 +41,7 @@ const StyledBaseText = styled.div.withConfig({ letterSpacing, textAlign, wordBreak, + opacity, theme: props.theme, }), ...styledPropsCSSObject, @@ -62,6 +64,7 @@ export const BaseText = ({ children, truncateAfterLines, wordBreak, + opacity, className, style, accessibilityProps = {}, @@ -84,6 +87,7 @@ export const BaseText = ({ textAlign={textAlign} numberOfLines={truncateAfterLines} wordBreak={wordBreak} + opacity={opacity} className={className} style={style} id={id} diff --git a/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts b/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts index 07d4451ee19..34138baf2e9 100644 --- a/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts +++ b/packages/blade/src/components/Typography/BaseText/getBaseTextStyles.ts @@ -17,6 +17,7 @@ const getBaseTextStyles = ({ lineHeight = 100, letterSpacing = 100, textAlign, + opacity, theme, }: StyledBaseTextProps): CSSObject => { const textColor = getIn(theme.colors, color); @@ -68,6 +69,7 @@ const getBaseTextStyles = ({ textAlign, margin: 0, padding: 0, + opacity, ...truncateStyles, ...wordBreakStyles, }; diff --git a/packages/blade/src/components/Typography/BaseText/types.ts b/packages/blade/src/components/Typography/BaseText/types.ts index 0dd88e25bd7..0fcbe565bb8 100644 --- a/packages/blade/src/components/Typography/BaseText/types.ts +++ b/packages/blade/src/components/Typography/BaseText/types.ts @@ -40,6 +40,7 @@ export type BaseTextProps = { lineHeight?: keyof Theme['typography']['lineHeights']; letterSpacing?: keyof Theme['typography']['letterSpacings']; wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word'; + opacity?: number; /** * Web only */ @@ -73,6 +74,7 @@ export type StyledBaseTextProps = Pick< | 'numberOfLines' | 'truncateAfterLines' | 'wordBreak' + | 'opacity' > & { theme: Theme }; export type BaseTextSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'; diff --git a/packages/blade/upgrade-v11.md b/packages/blade/upgrade-v11.md index b19cf622848..132e5e466df 100644 --- a/packages/blade/upgrade-v11.md +++ b/packages/blade/upgrade-v11.md @@ -140,6 +140,16 @@ Only use this if you're unable to run the codemod described above. + ``` +- **The `prefix` prop has been removed in favor of the new `currencyIndicator` prop.** + + ```diff + - + + + + - + + + ``` + ### Alert - **The `contrast` prop has been removed in favor of the new `emphasis` prop.**