@transferwise/components 0.0.0-experimental-5783280 → 0.0.0-experimental-1887cd9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/Body/Body.js +2 -2
- package/build/Body/Body.js.map +1 -1
- package/build/Body/Body.mjs +2 -2
- package/build/Body/Body.mjs.map +1 -1
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.js +1 -1
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.js.map +1 -1
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs +1 -1
- package/build/Calendar/DayCalendar/Table/DayCalendarTable.mjs.map +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.js.map +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs +1 -1
- package/build/Calendar/MonthCalendar/Table/MonthCalendarTable.mjs.map +1 -1
- package/build/Calendar/TableLink/TableLink.js +1 -1
- package/build/Calendar/TableLink/TableLink.js.map +1 -1
- package/build/Calendar/TableLink/TableLink.mjs +1 -1
- package/build/Calendar/TableLink/TableLink.mjs.map +1 -1
- package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js +1 -1
- package/build/ExpressiveMoneyInput/AmountInput/AmountInput.js.map +1 -1
- package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs +1 -1
- package/build/ExpressiveMoneyInput/AmountInput/AmountInput.mjs.map +1 -1
- package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js +1 -1
- package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.js.map +1 -1
- package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs +1 -1
- package/build/FlowNavigation/AnimatedLabel/AnimatedLabel.mjs.map +1 -1
- package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js +2 -2
- package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.js.map +1 -1
- package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs +2 -2
- package/build/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.mjs.map +1 -1
- package/build/Inputs/SelectInput/Option/SelectInputOption.js +1 -1
- package/build/Inputs/SelectInput/Option/SelectInputOption.js.map +1 -1
- package/build/Inputs/SelectInput/Option/SelectInputOption.mjs +1 -1
- package/build/Inputs/SelectInput/Option/SelectInputOption.mjs.map +1 -1
- package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js +3 -3
- package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.js.map +1 -1
- package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs +3 -3
- package/build/Inputs/SelectInput/OptionContent/SelectInputOptionContent.mjs.map +1 -1
- package/build/Inputs/SelectInput/Popover/SelectInputPopover.js +2 -2
- package/build/Inputs/SelectInput/Popover/SelectInputPopover.js.map +1 -1
- package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs +2 -2
- package/build/Inputs/SelectInput/Popover/SelectInputPopover.mjs.map +1 -1
- package/build/Label/Label.js +1 -1
- package/build/Label/Label.js.map +1 -1
- package/build/Label/Label.mjs +1 -1
- package/build/Label/Label.mjs.map +1 -1
- package/build/Stepper/Stepper.js +1 -1
- package/build/Stepper/Stepper.js.map +1 -1
- package/build/Stepper/Stepper.mjs +1 -1
- package/build/Stepper/Stepper.mjs.map +1 -1
- package/build/Table/Header/TableHeader.js +1 -1
- package/build/Table/Header/TableHeader.js.map +1 -1
- package/build/Table/Header/TableHeader.mjs +1 -1
- package/build/Table/Header/TableHeader.mjs.map +1 -1
- package/build/Tabs/Tab/Tab.js +1 -1
- package/build/Tabs/Tab/Tab.js.map +1 -1
- package/build/Tabs/Tab/Tab.mjs +1 -1
- package/build/Tabs/Tab/Tab.mjs.map +1 -1
- package/build/Tag/Tag.js +1 -1
- package/build/Tag/Tag.js.map +1 -1
- package/build/Tag/Tag.mjs +1 -1
- package/build/Tag/Tag.mjs.map +1 -1
- package/build/Typeahead/TypeaheadOption/TypeaheadOption.js +2 -2
- package/build/Typeahead/TypeaheadOption/TypeaheadOption.js.map +1 -1
- package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs +2 -2
- package/build/Typeahead/TypeaheadOption/TypeaheadOption.mjs.map +1 -1
- package/build/Upload/Steps/UploadImageStep/UploadImageStep.js +2 -2
- package/build/Upload/Steps/UploadImageStep/UploadImageStep.js.map +1 -1
- package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs +2 -2
- package/build/Upload/Steps/UploadImageStep/UploadImageStep.mjs.map +1 -1
- package/build/_deprecated/ActionButton/ActionButton.js +1 -1
- package/build/_deprecated/ActionButton/ActionButton.js.map +1 -1
- package/build/_deprecated/ActionButton/ActionButton.mjs +1 -1
- package/build/_deprecated/ActionButton/ActionButton.mjs.map +1 -1
- package/build/_deprecated/Avatar/Avatar.js +1 -1
- package/build/_deprecated/Avatar/Avatar.js.map +1 -1
- package/build/_deprecated/Avatar/Avatar.mjs +1 -1
- package/build/_deprecated/Avatar/Avatar.mjs.map +1 -1
- package/build/_deprecated/Select/Select.js +2 -2
- package/build/_deprecated/Select/Select.js.map +1 -1
- package/build/_deprecated/Select/Select.mjs +2 -2
- package/build/_deprecated/Select/Select.mjs.map +1 -1
- package/build/common/PropsValues/typography.js +0 -6
- package/build/common/PropsValues/typography.js.map +1 -1
- package/build/common/PropsValues/typography.mjs +0 -6
- package/build/common/PropsValues/typography.mjs.map +1 -1
- package/build/main.css +2097 -9250
- package/build/styles/Accordion/Accordion.css +6 -7
- package/build/styles/Body/Body.css +1 -2
- package/build/styles/Calendar/Calendar.css +4 -5
- package/build/styles/Calendar/TableLink/TableLink.css +4 -5
- package/build/styles/Chips/Chip/Chip.css +3 -5
- package/build/styles/Decision/Decision.css +3 -4
- package/build/styles/Emphasis/Emphasis.css +1 -1
- package/build/styles/ExpressiveMoneyInput/AmountInput/AmountInput.css +1 -2
- package/build/styles/ExpressiveMoneyInput/ExpressiveMoneyInput.css +1 -2
- package/build/styles/Inputs/Input/Input.css +24 -98
- package/build/styles/Inputs/TextArea/TextArea.css +24 -98
- package/build/styles/Markup/Markup.css +2 -2
- package/build/styles/MoneyInput/MoneyInput.css +6 -9
- package/build/styles/Nudge/Nudge.css +3 -3
- package/build/styles/Popover/Popover.css +7 -30
- package/build/styles/ProgressBar/ProgressBar.css +2 -3
- package/build/styles/Prompt/PrimitivePrompt/PrimitivePrompt.css +1 -2
- package/build/styles/Snackbar/Snackbar.css +1 -1
- package/build/styles/Table/Table.css +8 -18
- package/build/styles/Tabs/Tabs.css +3 -3
- package/build/styles/Tag/Tag.css +1 -1
- package/build/styles/Tile/Tile.css +3 -4
- package/build/styles/Typeahead/Typeahead.css +2 -4
- package/build/styles/UploadInput/UploadInput.css +1 -1
- package/build/styles/_deprecated/ActionButton/ActionButton.css +4 -3
- package/build/styles/_deprecated/Avatar/Avatar.css +2 -2
- package/build/styles/_deprecated/CriticalBanner/CriticalCommsBanner.css +1 -2
- package/build/styles/_deprecated/Select/Select.css +14 -49
- package/build/styles/_deprecated/Summary/Summary.css +2 -2
- package/build/styles/common/Circle/Circle.css +1 -1
- package/build/styles/common/Option/Option.css +4 -4
- package/build/styles/css/accordion.css +11 -53
- package/build/styles/css/badge.css +2 -2
- package/build/styles/css/button-groups.css +6 -29
- package/build/styles/css/buttons.css +11 -35
- package/build/styles/css/decision.css +11 -53
- package/build/styles/css/dropdowns.css +18 -65
- package/build/styles/css/droppable.css +6 -28
- package/build/styles/css/footer.css +10 -41
- package/build/styles/css/input-groups.css +117 -249
- package/build/styles/css/list-group.css +8 -28
- package/build/styles/css/modals.css +1 -1
- package/build/styles/css/navbar.css +45 -92
- package/build/styles/css/navs.css +8 -8
- package/build/styles/css/neptune-addons.css +0 -15
- package/build/styles/css/neptune-core.css +538 -6244
- package/build/styles/css/neptune.css +1961 -8984
- package/build/styles/css/panels.css +2 -2
- package/build/styles/css/popovers.css +20 -64
- package/build/styles/css/progress-bars.css +2 -2
- package/build/styles/css/sequences.css +9 -14
- package/build/styles/css/table.css +7 -7
- package/build/styles/css/tooltip.css +6 -28
- package/build/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
- package/build/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
- package/build/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
- package/build/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
- package/build/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
- package/build/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
- package/build/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
- package/build/styles/fonts/rubik/rubik-body-cyrillic-330-normal.woff2 +0 -0
- package/build/styles/fonts/rubik/rubik-body-cyrillic-600-normal.woff2 +0 -0
- package/build/styles/fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2 +0 -0
- package/build/styles/fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2 +0 -0
- package/build/styles/fonts/rubik/rubik-cyrillic-900-normal.woff2 +0 -0
- package/build/styles/fonts/rubik/rubik-cyrillic-ext-900-normal.woff2 +0 -0
- package/build/styles/less/legacy-variables.less +3 -3
- package/build/styles/less/neptune-tokens.less +48 -0
- package/build/styles/main.css +2097 -9250
- package/build/styles/props/neptune-tokens.css +3 -805
- package/build/styles/styles/less/accordion.css +11 -53
- package/build/styles/styles/less/badge.css +2 -2
- package/build/styles/styles/less/button-groups.css +6 -29
- package/build/styles/styles/less/buttons.css +11 -35
- package/build/styles/styles/less/decision.css +11 -53
- package/build/styles/styles/less/dropdowns.css +18 -65
- package/build/styles/styles/less/droppable.css +6 -28
- package/build/styles/styles/less/footer.css +10 -41
- package/build/styles/styles/less/forms/bootstrap-forms.css +100 -153
- package/build/styles/styles/less/forms/checkbox-radio.css +3 -3
- package/build/styles/styles/less/input-groups.css +117 -249
- package/build/styles/styles/less/list-group.css +8 -28
- package/build/styles/styles/less/modals.css +1 -1
- package/build/styles/styles/less/navbar.css +45 -92
- package/build/styles/styles/less/navs.css +8 -8
- package/build/styles/styles/less/neptune-addons.css +0 -15
- package/build/styles/styles/less/neptune-core.css +538 -6244
- package/build/styles/styles/less/neptune.css +1961 -8984
- package/build/styles/styles/less/panels.css +2 -2
- package/build/styles/styles/less/popovers.css +20 -64
- package/build/styles/styles/less/progress-bars.css +2 -2
- package/build/styles/styles/less/sequences.css +9 -14
- package/build/styles/styles/less/table.css +7 -7
- package/build/styles/styles/less/tooltip.css +6 -28
- package/build/types/Body/Body.d.ts +2 -2
- package/build/types/Body/Body.d.ts.map +1 -1
- package/build/types/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map +1 -1
- package/build/types/IconButton/IconButton.d.ts +1 -1
- package/build/types/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.d.ts.map +1 -1
- package/build/types/Inputs/SelectInput/Popover/SelectInputPopover.d.ts.map +1 -1
- package/build/types/MoneyInput/MoneyInput.d.ts +1 -1
- package/build/types/MoneyInput/MoneyInput.d.ts.map +1 -1
- package/build/types/Stepper/Stepper.d.ts.map +1 -1
- package/build/types/Tabs/Tab/Tab.d.ts.map +1 -1
- package/build/types/Title/Title.d.ts +2 -2
- package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts +1 -1
- package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts.map +1 -1
- package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts +1 -1
- package/build/types/_deprecated/Select/Select.d.ts.map +1 -1
- package/build/types/common/PropsValues/typography.d.ts +1 -13
- package/build/types/common/PropsValues/typography.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/Accordion/Accordion.css +6 -7
- package/src/Accordion/Accordion.less +6 -7
- package/src/Body/Body.css +1 -2
- package/src/Body/Body.less +1 -2
- package/src/Body/Body.test.tsx +4 -13
- package/src/Body/Body.tsx +3 -4
- package/src/Body/_stories/Body.test.story.tsx +0 -42
- package/src/Calendar/Calendar.css +4 -5
- package/src/Calendar/DayCalendar/Table/DayCalendarTable.tsx +2 -2
- package/src/Calendar/MonthCalendar/Table/MonthCalendarTable.tsx +1 -1
- package/src/Calendar/TableLink/TableLink.css +4 -5
- package/src/Calendar/TableLink/TableLink.less +4 -5
- package/src/Calendar/TableLink/TableLink.tsx +1 -1
- package/src/Calendar/_stories/Calendar.test.story.tsx +0 -33
- package/src/Chips/Chip/Chip.css +3 -5
- package/src/Chips/Chip/Chip.less +2 -3
- package/src/CircularButton/_stories/CircularButton.story.tsx +16 -6
- package/src/DateInput/_stories/DateInput.rtl.test.story.tsx +0 -46
- package/src/Decision/Decision.css +3 -4
- package/src/Decision/Decision.less +3 -4
- package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
- package/src/Display/_stories/Display.story.tsx +6 -20
- package/src/Emphasis/Emphasis.css +1 -1
- package/src/Emphasis/Emphasis.less +1 -1
- package/src/ExpressiveMoneyInput/AmountInput/AmountInput.css +1 -2
- package/src/ExpressiveMoneyInput/AmountInput/AmountInput.less +1 -2
- package/src/ExpressiveMoneyInput/AmountInput/AmountInput.tsx +4 -1
- package/src/ExpressiveMoneyInput/ExpressiveMoneyInput.css +1 -2
- package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
- package/src/Inputs/Input/Input.css +24 -98
- package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +2 -4
- package/src/Inputs/SelectInput/Option/SelectInputOption.tsx +1 -1
- package/src/Inputs/SelectInput/OptionContent/SelectInputOptionContent.tsx +3 -3
- package/src/Inputs/SelectInput/Popover/SelectInputPopover.tsx +2 -6
- package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
- package/src/Inputs/TextArea/TextArea.css +24 -98
- package/src/Inputs/_common.less +10 -16
- package/src/Label/Label.tsx +1 -1
- package/src/Markup/Markup.css +2 -2
- package/src/Markup/Markup.less +2 -2
- package/src/MoneyInput/MoneyInput.css +6 -9
- package/src/MoneyInput/MoneyInput.less +7 -10
- package/src/Nudge/Nudge.css +3 -3
- package/src/Nudge/Nudge.less +3 -3
- package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
- package/src/Popover/Popover.css +7 -30
- package/src/Popover/Popover.less +2 -2
- package/src/ProgressBar/ProgressBar.css +2 -3
- package/src/ProgressBar/ProgressBar.less +11 -12
- package/src/Prompt/PrimitivePrompt/PrimitivePrompt.css +1 -2
- package/src/Prompt/PrimitivePrompt/PrimitivePrompt.less +1 -2
- package/src/SentimentSurface/_stories/SentimentSurface.story.tsx +1 -1
- package/src/Snackbar/Snackbar.css +1 -1
- package/src/Snackbar/Snackbar.less +1 -1
- package/src/Stepper/Stepper.tsx +1 -3
- package/src/Table/Header/TableHeader.tsx +1 -1
- package/src/Table/StatusText/TableStatusText.test.tsx +5 -20
- package/src/Table/Table.css +8 -18
- package/src/Table/Table.less +9 -20
- package/src/Tabs/Tab/Tab.tsx +5 -11
- package/src/Tabs/Tabs.css +3 -3
- package/src/Tabs/Tabs.less +3 -3
- package/src/Tag/Tag.css +1 -1
- package/src/Tag/Tag.less +1 -1
- package/src/Tag/Tag.tsx +1 -1
- package/src/Tag/_stories/Tag.story.tsx +1 -1
- package/src/Tile/Tile.css +3 -4
- package/src/Tile/Tile.less +3 -4
- package/src/Typeahead/Typeahead.css +2 -4
- package/src/Typeahead/Typeahead.less +1 -2
- package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx +2 -2
- package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +2 -4
- package/src/UploadInput/UploadInput.css +1 -1
- package/src/UploadInput/UploadInput.less +4 -7
- package/src/_deprecated/ActionButton/ActionButton.css +4 -3
- package/src/_deprecated/ActionButton/ActionButton.less +5 -4
- package/src/_deprecated/ActionButton/ActionButton.tsx +1 -1
- package/src/_deprecated/Avatar/Avatar.css +2 -2
- package/src/_deprecated/Avatar/Avatar.less +2 -2
- package/src/_deprecated/Avatar/Avatar.tsx +1 -1
- package/src/_deprecated/CriticalBanner/CriticalCommsBanner.css +1 -2
- package/src/_deprecated/CriticalBanner/CriticalCommsBanner.less +1 -2
- package/src/_deprecated/NavigationOption/_stories/NavigationOption.story.tsx +6 -6
- package/src/_deprecated/Select/Select.css +14 -49
- package/src/_deprecated/Select/Select.less +10 -14
- package/src/_deprecated/Select/Select.test.tsx +0 -16
- package/src/_deprecated/Select/Select.tsx +1 -6
- package/src/_deprecated/Summary/Summary.css +2 -2
- package/src/_deprecated/Summary/Summary.less +2 -2
- package/src/common/Circle/Circle.css +1 -1
- package/src/common/Circle/Circle.less +1 -1
- package/src/common/Option/Option.css +4 -4
- package/src/common/Option/Option.less +4 -4
- package/src/common/PropsValues/typography.ts +1 -20
- package/src/main.css +2097 -9250
- package/src/main.less +2 -3
- package/src/styles/fonts/inter-cyrillic-ext-variable-wghtOnly-normal.woff2 +0 -0
- package/src/styles/fonts/inter-cyrillic-variable-wghtOnly-normal.woff2 +0 -0
- package/src/styles/fonts/inter-greek-ext-variable-wghtOnly-normal.woff2 +0 -0
- package/src/styles/fonts/inter-greek-variable-wghtOnly-normal.woff2 +0 -0
- package/src/styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2 +0 -0
- package/src/styles/fonts/inter-latin-variable-wghtOnly-normal.woff2 +0 -0
- package/src/styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2 +0 -0
- package/src/styles/fonts/rubik/rubik-body-cyrillic-330-normal.woff2 +0 -0
- package/src/styles/fonts/rubik/rubik-body-cyrillic-600-normal.woff2 +0 -0
- package/src/styles/fonts/rubik/rubik-body-cyrillic-ext-330-normal.woff2 +0 -0
- package/src/styles/fonts/rubik/rubik-body-cyrillic-ext-600-normal.woff2 +0 -0
- package/src/styles/fonts/rubik/rubik-cyrillic-900-normal.woff2 +0 -0
- package/src/styles/fonts/rubik/rubik-cyrillic-ext-900-normal.woff2 +0 -0
- package/src/styles/less/accordion.css +11 -53
- package/src/styles/less/addons/_background-utilities.less +0 -5
- package/src/styles/less/badge.css +2 -2
- package/src/styles/less/badge.less +2 -2
- package/src/styles/less/button-groups.css +6 -29
- package/src/styles/less/button-groups.less +2 -3
- package/src/styles/less/buttons.css +11 -35
- package/src/styles/less/buttons.less +7 -7
- package/src/styles/less/core/_fonts.less +75 -7
- package/src/styles/less/core/_scaffolding.less +4 -4
- package/src/styles/less/core/_typography-utilities.less +3 -3
- package/src/styles/less/core/_typography.less +238 -93
- package/src/styles/less/decision.css +11 -53
- package/src/styles/less/decision.less +2 -2
- package/src/styles/less/dropdowns.css +18 -65
- package/src/styles/less/dropdowns.less +7 -8
- package/src/styles/less/droppable.css +6 -28
- package/src/styles/less/droppable.less +4 -4
- package/src/styles/less/footer.css +10 -41
- package/src/styles/less/footer.less +3 -4
- package/src/styles/less/forms/bootstrap-forms.css +100 -153
- package/src/styles/less/forms/bootstrap-forms.less +72 -85
- package/src/styles/less/forms/checkbox-radio.css +3 -3
- package/src/styles/less/forms/checkbox-radio.less +3 -3
- package/src/styles/less/input-groups.css +117 -249
- package/src/styles/less/input-groups.less +9 -23
- package/src/styles/less/list-group.css +8 -28
- package/src/styles/less/list-group.less +5 -8
- package/src/styles/less/mixins/_reset-text.less +1 -1
- package/src/styles/less/mixins/_text-emphasis.less +1 -7
- package/src/styles/less/modals.css +1 -1
- package/src/styles/less/modals.less +1 -1
- package/src/styles/less/navbar.css +45 -92
- package/src/styles/less/navbar.less +19 -19
- package/src/styles/less/navs.css +8 -8
- package/src/styles/less/navs.less +8 -8
- package/src/styles/less/neptune-addons.css +0 -15
- package/src/styles/less/neptune-core.css +538 -6244
- package/src/styles/less/neptune.bundle.less +0 -4
- package/src/styles/less/neptune.css +1961 -8984
- package/src/styles/less/panels.css +2 -2
- package/src/styles/less/panels.less +2 -2
- package/src/styles/less/popovers.css +20 -64
- package/src/styles/less/popovers.less +7 -7
- package/src/styles/less/progress-bars.css +2 -2
- package/src/styles/less/progress-bars.less +2 -2
- package/src/styles/less/sequences.css +9 -14
- package/src/styles/less/sequences.less +10 -15
- package/src/styles/less/table.css +7 -7
- package/src/styles/less/table.less +7 -7
- package/src/styles/less/tooltip.css +6 -28
- package/src/styles/less/tooltip.less +1 -1
- package/src/styles/variables/legacy-variables.less +3 -3
- package/build/styles/Label/Label.css +0 -3
- package/src/Label/Label.css +0 -3
- package/src/Label/Label.less +0 -8
- package/src/styles/less/core/fonts/_fonts-ar.less +0 -86
- package/src/styles/less/core/fonts/_fonts-base.less +0 -99
- package/src/styles/less/core/fonts/_fonts-he.less +0 -8
- package/src/styles/less/core/fonts/_fonts-ja.less +0 -4247
- package/src/styles/less/core/fonts/_fonts-ko.less +0 -1079
- package/src/styles/less/core/fonts/_fonts-th.less +0 -8
- package/src/styles/less/core/fonts/_fonts-zh.less +0 -872
package/src/Body/Body.less
CHANGED
package/src/Body/Body.test.tsx
CHANGED
|
@@ -9,10 +9,7 @@ describe('Body', () => {
|
|
|
9
9
|
const copy = screen.getByText('Test');
|
|
10
10
|
expect(copy).toBeInTheDocument();
|
|
11
11
|
expect(copy.tagName).toBe('DIV');
|
|
12
|
-
expect(copy).toHaveClass(
|
|
13
|
-
`np-text-${Typography.BODY_DEFAULT}`,
|
|
14
|
-
`wds-text-${Typography.BODY_DEFAULT}`,
|
|
15
|
-
);
|
|
12
|
+
expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
|
|
16
13
|
});
|
|
17
14
|
|
|
18
15
|
it('enforces tag via `as` prop', () => {
|
|
@@ -20,10 +17,7 @@ describe('Body', () => {
|
|
|
20
17
|
const copy = screen.getByText('Test');
|
|
21
18
|
expect(copy).toBeInTheDocument();
|
|
22
19
|
expect(copy.tagName).toBe('P');
|
|
23
|
-
expect(copy).toHaveClass(
|
|
24
|
-
`np-text-${Typography.BODY_DEFAULT}`,
|
|
25
|
-
`wds-text-${Typography.BODY_DEFAULT}`,
|
|
26
|
-
);
|
|
20
|
+
expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
|
|
27
21
|
});
|
|
28
22
|
|
|
29
23
|
it('supports native HTML attrs', () => {
|
|
@@ -41,7 +35,7 @@ describe('Body', () => {
|
|
|
41
35
|
it('renders newlines as line breaks when preserveNewlines is true', () => {
|
|
42
36
|
render(<Body preserveNewlines>{'Line 1.\nLine 2'}</Body>);
|
|
43
37
|
const copy = screen.getByText(/Line 1\.\s*Line 2/);
|
|
44
|
-
expect(copy).toHaveClass('np-text--pre-line'
|
|
38
|
+
expect(copy).toHaveClass('np-text--pre-line');
|
|
45
39
|
expect(copy).toHaveTextContent('Line 1.');
|
|
46
40
|
expect(copy).toHaveTextContent('Line 2');
|
|
47
41
|
});
|
|
@@ -53,9 +47,6 @@ describe('Body', () => {
|
|
|
53
47
|
const copy = screen.getByText('Test');
|
|
54
48
|
expect(copy).toBeInTheDocument();
|
|
55
49
|
expect(copy.tagName).toBe('DIV');
|
|
56
|
-
expect(copy).toHaveClass(
|
|
57
|
-
`np-text-${Typography.BODY_DEFAULT}`,
|
|
58
|
-
`wds-text-${Typography.BODY_DEFAULT}`,
|
|
59
|
-
);
|
|
50
|
+
expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
|
|
60
51
|
});
|
|
61
52
|
});
|
package/src/Body/Body.tsx
CHANGED
|
@@ -33,7 +33,7 @@ const Body = forwardRef(function Body(
|
|
|
33
33
|
| null
|
|
34
34
|
>,
|
|
35
35
|
) {
|
|
36
|
-
const
|
|
36
|
+
const isTypeSupported = bodyTypes.has(type);
|
|
37
37
|
return (
|
|
38
38
|
<Element
|
|
39
39
|
{...props}
|
|
@@ -41,9 +41,8 @@ const Body = forwardRef(function Body(
|
|
|
41
41
|
// See: https://fettblog.eu/typescript-react-generic-forward-refs/
|
|
42
42
|
ref={reference}
|
|
43
43
|
className={clsx(
|
|
44
|
-
`np-text-${
|
|
45
|
-
|
|
46
|
-
preserveNewlines && 'np-text--pre-line wds-text--pre-line',
|
|
44
|
+
`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
|
|
45
|
+
preserveNewlines && 'np-text--pre-line',
|
|
47
46
|
className,
|
|
48
47
|
)}
|
|
49
48
|
/>
|
|
@@ -5,7 +5,6 @@ import Container from '../../Container';
|
|
|
5
5
|
import Title from '../../Title';
|
|
6
6
|
import { Typography } from '../../common/PropsValues/typography';
|
|
7
7
|
import { withVariantConfig } from '../../../.storybook/helpers';
|
|
8
|
-
import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
|
|
9
8
|
|
|
10
9
|
export default {
|
|
11
10
|
title: 'Typography/Body/Tests',
|
|
@@ -89,44 +88,3 @@ export const HyphenationMobile: Story = {
|
|
|
89
88
|
...HyphenationTest,
|
|
90
89
|
...withVariantConfig(['mobile'], HyphenationTest),
|
|
91
90
|
};
|
|
92
|
-
|
|
93
|
-
const rtlDiffBodyLarge = withRTLDiff({
|
|
94
|
-
i18n: {
|
|
95
|
-
secondParagraph: {
|
|
96
|
-
en: "Set up a transfer in a few minutes from your phone or computer. We'll keep you updated at every step, so you always know where your money is.",
|
|
97
|
-
ar: 'أعدّ تحويلك في بضع دقائق من هاتفك أو حاسوبك. سنبقيك على اطلاع في كل خطوة، لتعرف دائمًا أين أموالك.',
|
|
98
|
-
he: 'הגדירו העברה תוך כמה דקות מהטלפון או מהמחשב. נעדכן אתכם בכל שלב, כך שתמיד תדעו איפה הכסף שלכם.',
|
|
99
|
-
},
|
|
100
|
-
paragraph: {
|
|
101
|
-
en: "Send money abroad at the real exchange rate, with low, transparent fees. You'll always see what you pay upfront, and your recipient gets the money quickly and securely.",
|
|
102
|
-
ar: 'أرسل الأموال إلى الخارج بسعر الصرف الحقيقي ومع رسوم منخفضة وشفافة. سترى دائمًا ما تدفعه مقدمًا، ويحصل المستلم على أمواله بسرعة وأمان.',
|
|
103
|
-
he: 'שלחו כסף לחו״ל בשער החליפין האמיתי, עם עמלות נמוכות ושקופות. תמיד תראו מראש כמה אתם משלמים, והנמען יקבל את הכסף במהירות ובבטחה.',
|
|
104
|
-
},
|
|
105
|
-
},
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
/**
|
|
109
|
-
* Two body large paragraphs in RTL and LTR, for the RTL Typography docs page.
|
|
110
|
-
* Hidden from the sidebar, tests and Chromatic.
|
|
111
|
-
*/
|
|
112
|
-
export const RTLDiffBodyLarge: Story = {
|
|
113
|
-
tags: ['!dev', '!test'],
|
|
114
|
-
render: function Render() {
|
|
115
|
-
const i18n = useRtlDiffI18n();
|
|
116
|
-
return (
|
|
117
|
-
<>
|
|
118
|
-
<Body as="p" type={Typography.BODY_LARGE}>
|
|
119
|
-
{i18n.paragraph}
|
|
120
|
-
</Body>
|
|
121
|
-
<Body as="p" type={Typography.BODY_LARGE}>
|
|
122
|
-
{i18n.secondParagraph}
|
|
123
|
-
</Body>
|
|
124
|
-
</>
|
|
125
|
-
);
|
|
126
|
-
},
|
|
127
|
-
...rtlDiffBodyLarge,
|
|
128
|
-
parameters: {
|
|
129
|
-
...rtlDiffBodyLarge.parameters,
|
|
130
|
-
chromatic: { ...rtlDiffBodyLarge.parameters.chromatic, disableSnapshot: true },
|
|
131
|
-
},
|
|
132
|
-
};
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
border: transparent;
|
|
8
8
|
border-radius: var(--radius-small);
|
|
9
9
|
background-color: transparent;
|
|
10
|
-
font-weight: var(--
|
|
10
|
+
font-weight: var(--font-weight-semi-bold);
|
|
11
11
|
color: var(--color-content-primary);
|
|
12
12
|
}
|
|
13
13
|
@media (max-width: 320px) {
|
|
@@ -89,11 +89,10 @@
|
|
|
89
89
|
text-decoration-color: var(--color-content-tertiary);
|
|
90
90
|
}
|
|
91
91
|
.wds-Calendar__option--day {
|
|
92
|
-
|
|
93
|
-
block-size: var(--circleSize);
|
|
94
|
-
line-height: var(--circleSize);
|
|
95
|
-
inline-size: var(--circleSize);
|
|
92
|
+
block-size: var(--size-40);
|
|
96
93
|
border-radius: var(--radius-full);
|
|
94
|
+
line-height: var(--size-40);
|
|
95
|
+
inline-size: var(--size-40);
|
|
97
96
|
padding: 0;
|
|
98
97
|
display: inline-flex;
|
|
99
98
|
align-items: center;
|
|
@@ -134,8 +134,8 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
|
|
|
134
134
|
key={day}
|
|
135
135
|
className={
|
|
136
136
|
index > 4
|
|
137
|
-
? 'text-xs-center np-text-body-default
|
|
138
|
-
: 'text-xs-center np-text-body-default-bold
|
|
137
|
+
? 'text-xs-center np-text-body-default'
|
|
138
|
+
: 'text-xs-center np-text-body-default-bold'
|
|
139
139
|
}
|
|
140
140
|
>
|
|
141
141
|
<span className="hidden-xs">
|
|
@@ -76,7 +76,7 @@ const MonthCalendarTable = ({
|
|
|
76
76
|
})();
|
|
77
77
|
|
|
78
78
|
return (
|
|
79
|
-
<table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold
|
|
79
|
+
<table className="table table-condensed table-bordered tw-date-lookup-calendar np-text-body-default-bold m-b-0">
|
|
80
80
|
<thead className="sr-only">
|
|
81
81
|
<tr>
|
|
82
82
|
<th colSpan={COLS}>{placeholder}</th>
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
border: transparent;
|
|
8
8
|
border-radius: var(--radius-small);
|
|
9
9
|
background-color: transparent;
|
|
10
|
-
font-weight: var(--
|
|
10
|
+
font-weight: var(--font-weight-semi-bold);
|
|
11
11
|
color: var(--color-content-primary);
|
|
12
12
|
}
|
|
13
13
|
@media (max-width: 320px) {
|
|
@@ -89,11 +89,10 @@
|
|
|
89
89
|
text-decoration-color: var(--color-content-tertiary);
|
|
90
90
|
}
|
|
91
91
|
.wds-Calendar__option--day {
|
|
92
|
-
|
|
93
|
-
block-size: var(--circleSize);
|
|
94
|
-
line-height: var(--circleSize);
|
|
95
|
-
inline-size: var(--circleSize);
|
|
92
|
+
block-size: var(--size-40);
|
|
96
93
|
border-radius: var(--radius-full);
|
|
94
|
+
line-height: var(--size-40);
|
|
95
|
+
inline-size: var(--size-40);
|
|
97
96
|
padding: 0;
|
|
98
97
|
display: inline-flex;
|
|
99
98
|
align-items: center;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
border: transparent;
|
|
12
12
|
border-radius: var(--radius-small);
|
|
13
13
|
background-color: transparent;
|
|
14
|
-
font-weight: var(--
|
|
14
|
+
font-weight: var(--font-weight-semi-bold);
|
|
15
15
|
color: var(--color-content-primary);
|
|
16
16
|
|
|
17
17
|
&:focus {
|
|
@@ -51,11 +51,10 @@
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
.wds-Calendar__option--day {
|
|
54
|
-
|
|
55
|
-
height: var(--circleSize);
|
|
56
|
-
line-height: var(--circleSize);
|
|
57
|
-
width: var(--circleSize);
|
|
54
|
+
height: var(--size-40);
|
|
58
55
|
border-radius: var(--radius-full);
|
|
56
|
+
line-height: var(--size-40);
|
|
57
|
+
width: var(--size-40);
|
|
59
58
|
padding: 0;
|
|
60
59
|
display: inline-flex;
|
|
61
60
|
align-items: center;
|
|
@@ -96,7 +96,7 @@ const TableLink = ({
|
|
|
96
96
|
aria-pressed={active}
|
|
97
97
|
className={clsx(
|
|
98
98
|
`wds-Calendar__option--${type}`,
|
|
99
|
-
`tw-date-lookup-${type}-option np-text-body-default-bold
|
|
99
|
+
`tw-date-lookup-${type}-option np-text-body-default-bold`,
|
|
100
100
|
{ active: !!active },
|
|
101
101
|
{ today: !!today },
|
|
102
102
|
{ disabled: !!isUnavailable },
|
|
@@ -175,36 +175,3 @@ export const RTLDiff: Story = {
|
|
|
175
175
|
},
|
|
176
176
|
}),
|
|
177
177
|
};
|
|
178
|
-
|
|
179
|
-
const rtlDiffDayView = withRTLDiff({
|
|
180
|
-
i18n: {
|
|
181
|
-
disabledReason: {
|
|
182
|
-
en: 'Weekends and specific dates are unavailable.',
|
|
183
|
-
ar: 'عطلات نهاية الأسبوع وتواريخ محددة غير متاحة.',
|
|
184
|
-
},
|
|
185
|
-
},
|
|
186
|
-
});
|
|
187
|
-
|
|
188
|
-
/**
|
|
189
|
-
* Day view only, for the RTL Layout docs page. Hidden from the sidebar, tests and Chromatic,
|
|
190
|
-
* as `RTLDiff` already covers it.
|
|
191
|
-
*/
|
|
192
|
-
export const RTLDiffDayView: Story = {
|
|
193
|
-
tags: ['!dev', '!test'],
|
|
194
|
-
render: () => {
|
|
195
|
-
const i18n = useRtlDiffI18n();
|
|
196
|
-
return (
|
|
197
|
-
<Calendar
|
|
198
|
-
value={selectedDate}
|
|
199
|
-
min={minDate}
|
|
200
|
-
max={maxDate}
|
|
201
|
-
disabledRules={{ ...disabledRulesRtl, reason: i18n.disabledReason }}
|
|
202
|
-
/>
|
|
203
|
-
);
|
|
204
|
-
},
|
|
205
|
-
...rtlDiffDayView,
|
|
206
|
-
parameters: {
|
|
207
|
-
...rtlDiffDayView.parameters,
|
|
208
|
-
chromatic: { ...rtlDiffDayView.parameters.chromatic, disableSnapshot: true },
|
|
209
|
-
},
|
|
210
|
-
};
|
package/src/Chips/Chip/Chip.css
CHANGED
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
border-color: var(--color-sentiment-negative-active) !important;
|
|
71
71
|
}
|
|
72
72
|
.np-theme-personal .np-chip {
|
|
73
|
-
font-weight: var(--
|
|
73
|
+
font-weight: var(--font-weight-semi-bold);
|
|
74
74
|
color: var(--color-interactive-primary);
|
|
75
75
|
padding-block: 0;
|
|
76
76
|
padding-inline: var(--size-16);
|
|
@@ -114,13 +114,11 @@
|
|
|
114
114
|
.np-theme-personal .np-chip.np-chip--removable {
|
|
115
115
|
position: relative;
|
|
116
116
|
}
|
|
117
|
-
.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold
|
|
118
|
-
.np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
|
|
117
|
+
.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
|
|
119
118
|
padding-inline-end: var(--size-24);
|
|
120
119
|
}
|
|
121
120
|
@media (max-width: 320px) {
|
|
122
|
-
.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold
|
|
123
|
-
.np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
|
|
121
|
+
.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
|
|
124
122
|
padding-inline-end: var(--size-48);
|
|
125
123
|
}
|
|
126
124
|
}
|
package/src/Chips/Chip/Chip.less
CHANGED
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.np-theme-personal & {
|
|
93
|
-
font-weight: var(--
|
|
93
|
+
font-weight: var(--font-weight-semi-bold);
|
|
94
94
|
color: var(--color-interactive-primary);
|
|
95
95
|
padding: 0 var(--size-16);
|
|
96
96
|
border-color: var(--color-interactive-secondary);
|
|
@@ -137,8 +137,7 @@
|
|
|
137
137
|
&.np-chip--removable {
|
|
138
138
|
position: relative;
|
|
139
139
|
|
|
140
|
-
.np-text-body-default-bold
|
|
141
|
-
.wds-text-body-default-bold {
|
|
140
|
+
.np-text-body-default-bold {
|
|
142
141
|
padding-right: var(--size-24);
|
|
143
142
|
|
|
144
143
|
@media (--screen-400-zoom) {
|
|
@@ -232,8 +232,13 @@ export const SentimentAwareness: Story = {
|
|
|
232
232
|
style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
|
|
233
233
|
>
|
|
234
234
|
<div
|
|
235
|
-
|
|
236
|
-
|
|
235
|
+
style={{
|
|
236
|
+
width: '120px',
|
|
237
|
+
fontSize: '11px',
|
|
238
|
+
fontWeight: 'bold',
|
|
239
|
+
textAlign: 'left',
|
|
240
|
+
paddingLeft: '8px',
|
|
241
|
+
}}
|
|
237
242
|
>
|
|
238
243
|
{sentiment} (base)
|
|
239
244
|
</div>
|
|
@@ -241,7 +246,7 @@ export const SentimentAwareness: Story = {
|
|
|
241
246
|
<div
|
|
242
247
|
key={button.label}
|
|
243
248
|
style={{
|
|
244
|
-
width: '
|
|
249
|
+
width: '100px',
|
|
245
250
|
display: 'flex',
|
|
246
251
|
justifyContent: 'center',
|
|
247
252
|
}}
|
|
@@ -265,8 +270,13 @@ export const SentimentAwareness: Story = {
|
|
|
265
270
|
style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
|
|
266
271
|
>
|
|
267
272
|
<div
|
|
268
|
-
|
|
269
|
-
|
|
273
|
+
style={{
|
|
274
|
+
width: '120px',
|
|
275
|
+
fontSize: '11px',
|
|
276
|
+
fontWeight: 'bold',
|
|
277
|
+
textAlign: 'left',
|
|
278
|
+
paddingLeft: '8px',
|
|
279
|
+
}}
|
|
270
280
|
>
|
|
271
281
|
{sentiment} (elevated)
|
|
272
282
|
</div>
|
|
@@ -274,7 +284,7 @@ export const SentimentAwareness: Story = {
|
|
|
274
284
|
<div
|
|
275
285
|
key={button.label}
|
|
276
286
|
style={{
|
|
277
|
-
width: '
|
|
287
|
+
width: '100px',
|
|
278
288
|
display: 'flex',
|
|
279
289
|
justifyContent: 'center',
|
|
280
290
|
}}
|
|
@@ -57,52 +57,6 @@ export const Sizes: Story = {
|
|
|
57
57
|
},
|
|
58
58
|
}),
|
|
59
59
|
};
|
|
60
|
-
export const MobileSizes: Story = {
|
|
61
|
-
render: () => {
|
|
62
|
-
const i18n = useRtlDiffI18n();
|
|
63
|
-
return (
|
|
64
|
-
<>
|
|
65
|
-
<DateInput
|
|
66
|
-
size="sm"
|
|
67
|
-
dayLabel={i18n.dayLabel}
|
|
68
|
-
monthLabel={i18n.monthLabel}
|
|
69
|
-
yearLabel={i18n.yearLabel}
|
|
70
|
-
onChange={fn()}
|
|
71
|
-
/>
|
|
72
|
-
<DateInput
|
|
73
|
-
size="md"
|
|
74
|
-
dayLabel={i18n.dayLabel}
|
|
75
|
-
monthLabel={i18n.monthLabel}
|
|
76
|
-
yearLabel={i18n.yearLabel}
|
|
77
|
-
onChange={fn()}
|
|
78
|
-
/>
|
|
79
|
-
<DateInput
|
|
80
|
-
size="lg"
|
|
81
|
-
dayLabel={i18n.dayLabel}
|
|
82
|
-
monthLabel={i18n.monthLabel}
|
|
83
|
-
yearLabel={i18n.yearLabel}
|
|
84
|
-
onChange={fn()}
|
|
85
|
-
/>
|
|
86
|
-
<DateInput
|
|
87
|
-
mode="month-year"
|
|
88
|
-
monthLabel={i18n.monthLabel}
|
|
89
|
-
yearLabel={i18n.yearLabel}
|
|
90
|
-
onChange={fn()}
|
|
91
|
-
/>
|
|
92
|
-
</>
|
|
93
|
-
);
|
|
94
|
-
},
|
|
95
|
-
...withRTLDiff({
|
|
96
|
-
renderAs: 'iframe',
|
|
97
|
-
width: '320px',
|
|
98
|
-
fixedRows: { heights: [13, 16, 21] },
|
|
99
|
-
i18n: {
|
|
100
|
-
dayLabel: { en: 'Day', ar: 'اليوم' },
|
|
101
|
-
monthLabel: { en: 'Month', ar: 'الشهر' },
|
|
102
|
-
yearLabel: { en: 'Year', ar: 'السنة' },
|
|
103
|
-
},
|
|
104
|
-
}),
|
|
105
|
-
};
|
|
106
60
|
|
|
107
61
|
export const OpenDropdown: Story = {
|
|
108
62
|
render: () => {
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
.np-decision .decision {
|
|
2
2
|
display: flex;
|
|
3
3
|
}
|
|
4
|
-
.np-decision__tile--small .np-text-title-subsection
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
line-height: var(--wds-line-height-body-large);
|
|
4
|
+
.np-decision__tile--small .np-text-title-subsection {
|
|
5
|
+
font-size: var(--font-size-16);
|
|
6
|
+
line-height: var(--line-height-title);
|
|
8
7
|
}
|
|
9
8
|
.np-decision:not(.flex-column) {
|
|
10
9
|
gap: var(--size-24);
|
|
@@ -4,10 +4,9 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
&__tile--small {
|
|
7
|
-
.np-text-title-subsection
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
line-height: var(--wds-line-height-body-large);
|
|
7
|
+
.np-text-title-subsection {
|
|
8
|
+
font-size: var(--font-size-16);
|
|
9
|
+
line-height: var(--line-height-title);
|
|
11
10
|
}
|
|
12
11
|
}
|
|
13
12
|
|
|
@@ -118,40 +118,26 @@ export const Basic = () => {
|
|
|
118
118
|
export const Numbers = () => {
|
|
119
119
|
return (
|
|
120
120
|
<>
|
|
121
|
-
<Title type={Typography.TITLE_SCREEN}>Display Number
|
|
121
|
+
<Title type={Typography.TITLE_SCREEN}>Display Number</Title>
|
|
122
122
|
<hr />
|
|
123
|
-
<Display type={Typography.
|
|
123
|
+
<Display type={Typography.DISPLAY_NUMBER}>
|
|
124
124
|
<Money amount={1050.6} currency="UAH" />
|
|
125
125
|
</Display>
|
|
126
126
|
<hr />
|
|
127
|
-
<Display type={Typography.
|
|
127
|
+
<Display type={Typography.DISPLAY_NUMBER}>
|
|
128
128
|
<Money amount={10.17} currency="JPY" />
|
|
129
129
|
</Display>
|
|
130
|
-
|
|
131
|
-
<Title type={Typography.TITLE_SCREEN}>Display Number Medium</Title>
|
|
132
130
|
<hr />
|
|
133
|
-
<Display type={Typography.
|
|
131
|
+
<Display type={Typography.DISPLAY_NUMBER}>
|
|
134
132
|
<Money amount={0.01} currency="EUR" />
|
|
135
133
|
</Display>
|
|
136
134
|
<hr />
|
|
137
|
-
<Display type={Typography.
|
|
135
|
+
<Display type={Typography.DISPLAY_NUMBER}>
|
|
138
136
|
<Money amount={1000000} currency="EUR" />
|
|
139
137
|
</Display>
|
|
140
|
-
|
|
141
|
-
<Title type={Typography.TITLE_SCREEN}>Display Number Large</Title>
|
|
142
|
-
<hr />
|
|
143
|
-
<Display type={Typography.DISPLAY_NUMBER_LARGE}>
|
|
144
|
-
<Money amount={1000000} currency="GBP" />
|
|
145
|
-
</Display>
|
|
146
|
-
<hr />
|
|
147
|
-
<Display type={Typography.DISPLAY_NUMBER_LARGE}>
|
|
148
|
-
<Money amount={1050.6} currency="UAH" />
|
|
149
|
-
</Display>
|
|
150
|
-
|
|
151
|
-
<Title type={Typography.TITLE_SCREEN}>Display Number (Deprecated)</Title>
|
|
152
138
|
<hr />
|
|
153
139
|
<Display type={Typography.DISPLAY_NUMBER}>
|
|
154
|
-
<Money amount={
|
|
140
|
+
<Money amount={1000000} currency="GBP" />
|
|
155
141
|
</Display>
|
|
156
142
|
</>
|
|
157
143
|
);
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
inline-size: 100%;
|
|
3
3
|
}
|
|
4
4
|
.wds-amount-input-input-container {
|
|
5
|
-
font-family: var(--wds-font-family-display-number);
|
|
6
5
|
display: flex;
|
|
7
6
|
justify-content: right;
|
|
8
7
|
inline-size: 100%;
|
|
@@ -37,5 +36,5 @@
|
|
|
37
36
|
flex-grow: 0;
|
|
38
37
|
display: flex;
|
|
39
38
|
align-items: center;
|
|
40
|
-
line-height:
|
|
39
|
+
line-height: inherit;
|
|
41
40
|
}
|
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
&-input-container {
|
|
7
|
-
font-family: var(--wds-font-family-display-number);
|
|
8
7
|
display: flex;
|
|
9
8
|
justify-content: right;
|
|
10
9
|
width: 100%;
|
|
@@ -48,6 +47,6 @@
|
|
|
48
47
|
flex-grow: 0;
|
|
49
48
|
display: flex;
|
|
50
49
|
align-items: center;
|
|
51
|
-
line-height:
|
|
50
|
+
line-height: inherit;
|
|
52
51
|
}
|
|
53
52
|
}
|
|
@@ -297,7 +297,10 @@ export const AmountInput = ({
|
|
|
297
297
|
|
|
298
298
|
return (
|
|
299
299
|
<div className="wds-amount-input-container" dir="ltr">
|
|
300
|
-
<div
|
|
300
|
+
<div
|
|
301
|
+
className={clsx('wds-amount-input-input-container', 'np-text-display-large--forced')}
|
|
302
|
+
style={style}
|
|
303
|
+
>
|
|
301
304
|
<input
|
|
302
305
|
ref={ref}
|
|
303
306
|
dir="auto"
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
inline-size: 100%;
|
|
3
3
|
}
|
|
4
4
|
.wds-amount-input-input-container {
|
|
5
|
-
font-family: var(--wds-font-family-display-number);
|
|
6
5
|
display: flex;
|
|
7
6
|
justify-content: right;
|
|
8
7
|
inline-size: 100%;
|
|
@@ -37,7 +36,7 @@
|
|
|
37
36
|
flex-grow: 0;
|
|
38
37
|
display: flex;
|
|
39
38
|
align-items: center;
|
|
40
|
-
line-height:
|
|
39
|
+
line-height: inherit;
|
|
41
40
|
}
|
|
42
41
|
.wds-currency-selector:disabled {
|
|
43
42
|
opacity: 1 !important;
|
|
@@ -40,7 +40,7 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
|
|
|
40
40
|
className={clsx(
|
|
41
41
|
'np-animated-label',
|
|
42
42
|
'btn-unstyled',
|
|
43
|
-
'np-text-body-large-bold
|
|
43
|
+
'np-text-body-large-bold',
|
|
44
44
|
className,
|
|
45
45
|
)}
|
|
46
46
|
onClick={() => setShowSteps(true)}
|