@transferwise/components 0.0.0-experimental-6bc68bd → 0.0.0-experimental-012dcef
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 +1 -1
- package/build/Body/Body.js.map +1 -1
- package/build/Body/Body.mjs +1 -1
- 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 +2432 -8907
- package/build/styles/Accordion/Accordion.css +6 -7
- package/build/styles/Body/Body.css +1 -1
- package/build/styles/Calendar/Calendar.css +4 -11
- package/build/styles/Calendar/TableLink/TableLink.css +4 -11
- 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 +60 -67
- package/build/styles/Inputs/TextArea/TextArea.css +60 -67
- 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 +43 -4
- 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 +44 -22
- 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 +44 -22
- package/build/styles/css/dropdowns.css +54 -39
- package/build/styles/css/droppable.css +6 -28
- package/build/styles/css/footer.css +10 -41
- package/build/styles/css/input-groups.css +167 -203
- package/build/styles/css/list-group.css +42 -1
- package/build/styles/css/modals.css +1 -1
- package/build/styles/css/navbar.css +81 -66
- package/build/styles/css/navs.css +8 -8
- package/build/styles/css/neptune-addons.css +0 -15
- package/build/styles/css/neptune-core.css +524 -5935
- package/build/styles/css/neptune.css +2092 -8533
- package/build/styles/css/panels.css +2 -2
- package/build/styles/css/popovers.css +56 -39
- 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/less/legacy-variables.less +3 -3
- package/build/styles/less/neptune-tokens.less +48 -0
- package/build/styles/main.css +2432 -8907
- package/build/styles/props/neptune-tokens.css +3 -804
- package/build/styles/styles/less/accordion.css +44 -22
- 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 +44 -22
- package/build/styles/styles/less/dropdowns.css +54 -39
- 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 +167 -203
- package/build/styles/styles/less/list-group.css +42 -1
- package/build/styles/styles/less/modals.css +1 -1
- package/build/styles/styles/less/navbar.css +81 -66
- 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 +524 -5935
- package/build/styles/styles/less/neptune.css +2092 -8533
- package/build/styles/styles/less/panels.css +2 -2
- package/build/styles/styles/less/popovers.css +56 -39
- 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/ExpressiveMoneyInput/AmountInput/AmountInput.d.ts.map +1 -1
- package/build/types/IconButton/IconButton.d.ts +1 -1
- package/build/types/ListItem/_stories/variants/helpers.d.ts +1 -4
- package/build/types/ListItem/_stories/variants/helpers.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/Title/Title.d.ts +2 -2
- package/build/types/Upload/Steps/UploadImageStep/UploadImageStep.d.ts +1 -1
- package/build/types/UploadInput/UploadItem/UploadItemLink.d.ts +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 +1 -1
- package/src/Accordion/Accordion.css +6 -7
- package/src/Accordion/Accordion.less +6 -7
- package/src/Body/Body.css +1 -1
- package/src/Body/Body.less +1 -1
- package/src/Body/Body.test.tsx +4 -4
- package/src/Body/Body.tsx +2 -2
- package/src/Button/_stories/Button.test.story.tsx +0 -1
- package/src/Calendar/Calendar.css +4 -11
- 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 -11
- package/src/Calendar/TableLink/TableLink.less +4 -14
- package/src/Calendar/TableLink/TableLink.tsx +1 -1
- package/src/Calendar/_stories/Calendar.test.story.tsx +0 -1
- 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 +2 -3
- package/src/DateInput/_stories/DateInput.story.tsx +0 -1
- package/src/Decision/Decision.css +3 -4
- package/src/Decision/Decision.less +3 -4
- package/src/Decision/_stories/Decision.test.story.tsx +2 -3
- package/src/DefinitionList/_stories/DefinitionList.story.tsx +1 -1
- package/src/DefinitionList/_stories/DefinitionList.test.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/ExpressiveMoneyInput/_stories/ExpressiveMoneyInput.rtl.test.story.tsx +2 -3
- package/src/Field/_stories/Field.test.story.tsx +2 -3
- package/src/FlowNavigation/AnimatedLabel/AnimatedLabel.tsx +1 -1
- package/src/Header/_stories/Header.test.story.tsx +1 -1
- package/src/InputWithDisplayFormat/_stories/InputWithDisplayFormat.test.story.tsx +2 -3
- package/src/Inputs/Input/Input.css +60 -67
- package/src/Inputs/InputGroup/_stories/InputGroup.test.story.tsx +2 -3
- package/src/Inputs/SelectInput/BottomSheet/SelectInputBottomSheet.tsx +2 -2
- 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 -2
- package/src/Inputs/SelectInput/_stories/SelectInput.rtl.test.story.tsx +2 -3
- package/src/Inputs/SelectInput/_stories/SelectInput.story.tsx +1 -1
- package/src/Inputs/TextArea/TextArea.css +60 -67
- package/src/Inputs/TextArea/_stories/TextArea.test.story.tsx +2 -3
- package/src/Inputs/_common.less +10 -12
- package/src/InstructionsList/_stories/InstructionsList.test.story.tsx +1 -2
- package/src/Label/Label.tsx +1 -1
- package/src/Label/_stories/Label.test.story.tsx +2 -3
- package/src/ListItem/_stories/ListItem.rtl.test.story.tsx +8 -15
- package/src/ListItem/_stories/variants/helpers.tsx +1 -5
- 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/MoneyInput/_stories/MoneyInput.rtl.test.story.tsx +3 -5
- package/src/Nudge/Nudge.css +3 -3
- package/src/Nudge/Nudge.less +3 -3
- package/src/PhoneNumberInput/_stories/PhoneNumberInput.rtl.test.story.tsx +3 -3
- package/src/PocketSurface/_stories/PocketSurface.story.tsx +2 -2
- package/src/Popover/Popover.css +43 -4
- package/src/Popover/Popover.less +2 -2
- package/src/ProgressBar/ProgressBar.css +2 -3
- package/src/ProgressBar/ProgressBar.less +11 -12
- package/src/ProgressBar/_stories/ProgressBar.test.story.tsx +2 -3
- package/src/Prompt/ActionPrompt/_stories/ActionPrompt.test.story.tsx +2 -3
- package/src/Prompt/CriticalBanner/_stories/CriticalBanner.test.story.tsx +2 -3
- package/src/Prompt/InfoPrompt/_stories/InfoPrompt.test.story.tsx +2 -3
- package/src/Prompt/InlinePrompt/_stories/InlinePrompt.test.story.tsx +2 -3
- 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 -1
- package/src/Table/Header/TableHeader.tsx +1 -1
- package/src/Table/StatusText/TableStatusText.test.tsx +5 -5
- package/src/Table/Table.css +8 -18
- package/src/Table/Table.less +9 -20
- package/src/Table/_stories/Table.test.story.tsx +15 -26
- package/src/Tabs/Tab/Tab.tsx +1 -1
- package/src/Tabs/Tabs.css +3 -3
- package/src/Tabs/Tabs.less +3 -3
- package/src/Tabs/_stories/Tabs.test.story.tsx +1 -1
- 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/TextareaWithDisplayFormat/_stories/TextareaWithDisplayFormat.test.story.tsx +2 -3
- 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/Typeahead/_stories/Typeahead.rtl.test.story.tsx +1 -1
- package/src/Upload/Steps/UploadImageStep/UploadImageStep.tsx +2 -2
- package/src/Upload/_stories/Upload.rtl.test.story.tsx +0 -1
- package/src/UploadInput/UploadInput.css +1 -1
- package/src/UploadInput/UploadInput.less +4 -7
- package/src/UploadInput/_stories/UploadInput.test.story.tsx +0 -1
- 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.tsx +2 -2
- 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 +2432 -8907
- 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/less/accordion.css +44 -22
- 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 +235 -81
- package/src/styles/less/decision.css +44 -22
- package/src/styles/less/decision.less +2 -2
- package/src/styles/less/dropdowns.css +54 -39
- 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 +167 -203
- package/src/styles/less/input-groups.less +10 -20
- package/src/styles/less/list-group.css +42 -1
- 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 +81 -66
- 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 +524 -5935
- package/src/styles/less/neptune.bundle.less +0 -4
- package/src/styles/less/neptune.css +2092 -8533
- package/src/styles/less/panels.css +2 -2
- package/src/styles/less/panels.less +2 -2
- package/src/styles/less/popovers.css +56 -39
- 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 -140
- package/src/styles/less/core/fonts/_fonts-en.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.test.tsx
CHANGED
|
@@ -9,7 +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(`
|
|
12
|
+
expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
it('enforces tag via `as` prop', () => {
|
|
@@ -17,7 +17,7 @@ describe('Body', () => {
|
|
|
17
17
|
const copy = screen.getByText('Test');
|
|
18
18
|
expect(copy).toBeInTheDocument();
|
|
19
19
|
expect(copy.tagName).toBe('P');
|
|
20
|
-
expect(copy).toHaveClass(`
|
|
20
|
+
expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
it('supports native HTML attrs', () => {
|
|
@@ -35,7 +35,7 @@ describe('Body', () => {
|
|
|
35
35
|
it('renders newlines as line breaks when preserveNewlines is true', () => {
|
|
36
36
|
render(<Body preserveNewlines>{'Line 1.\nLine 2'}</Body>);
|
|
37
37
|
const copy = screen.getByText(/Line 1\.\s*Line 2/);
|
|
38
|
-
expect(copy).toHaveClass('
|
|
38
|
+
expect(copy).toHaveClass('np-text--pre-line');
|
|
39
39
|
expect(copy).toHaveTextContent('Line 1.');
|
|
40
40
|
expect(copy).toHaveTextContent('Line 2');
|
|
41
41
|
});
|
|
@@ -47,6 +47,6 @@ describe('Body', () => {
|
|
|
47
47
|
const copy = screen.getByText('Test');
|
|
48
48
|
expect(copy).toBeInTheDocument();
|
|
49
49
|
expect(copy.tagName).toBe('DIV');
|
|
50
|
-
expect(copy).toHaveClass(`
|
|
50
|
+
expect(copy).toHaveClass(`np-text-${Typography.BODY_DEFAULT}`);
|
|
51
51
|
});
|
|
52
52
|
});
|
package/src/Body/Body.tsx
CHANGED
|
@@ -41,8 +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
|
-
`
|
|
45
|
-
preserveNewlines && '
|
|
44
|
+
`np-text-${isTypeSupported ? type : DEFAULT_TYPE}`,
|
|
45
|
+
preserveNewlines && 'np-text--pre-line',
|
|
46
46
|
className,
|
|
47
47
|
)}
|
|
48
48
|
/>
|
|
@@ -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;
|
|
@@ -105,12 +104,6 @@
|
|
|
105
104
|
text-decoration-thickness: 2px;
|
|
106
105
|
text-underline-offset: 4px;
|
|
107
106
|
}
|
|
108
|
-
.wds-Calendar__option--year {
|
|
109
|
-
display: inline-flex;
|
|
110
|
-
align-items: center;
|
|
111
|
-
justify-content: center;
|
|
112
|
-
block-size: calc(1rlh * 1.6);
|
|
113
|
-
}
|
|
114
107
|
.tw-date-lookup-calendar {
|
|
115
108
|
min-inline-size: 300px;
|
|
116
109
|
text-align: 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
|
|
138
|
-
: 'text-xs-center
|
|
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
|
|
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;
|
|
@@ -105,9 +104,3 @@
|
|
|
105
104
|
text-decoration-thickness: 2px;
|
|
106
105
|
text-underline-offset: 4px;
|
|
107
106
|
}
|
|
108
|
-
.wds-Calendar__option--year {
|
|
109
|
-
display: inline-flex;
|
|
110
|
-
align-items: center;
|
|
111
|
-
justify-content: center;
|
|
112
|
-
block-size: calc(1rlh * 1.6);
|
|
113
|
-
}
|
|
@@ -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;
|
|
@@ -67,12 +66,3 @@
|
|
|
67
66
|
text-underline-offset: 4px;
|
|
68
67
|
}
|
|
69
68
|
}
|
|
70
|
-
|
|
71
|
-
.wds-Calendar__option--year{
|
|
72
|
-
display: inline-flex;
|
|
73
|
-
align-items: center;
|
|
74
|
-
justify-content: center;
|
|
75
|
-
height: calc(1rlh * 1.6);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
|
|
@@ -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
|
|
99
|
+
`tw-date-lookup-${type}-option np-text-body-default-bold`,
|
|
100
100
|
{ active: !!active },
|
|
101
101
|
{ today: !!today },
|
|
102
102
|
{ disabled: !!isUnavailable },
|
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
|
}}
|
|
@@ -16,7 +16,7 @@ export const Sizes: Story = {
|
|
|
16
16
|
render: () => {
|
|
17
17
|
const i18n = useRtlDiffI18n();
|
|
18
18
|
return (
|
|
19
|
-
|
|
19
|
+
<>
|
|
20
20
|
<DateInput
|
|
21
21
|
size="sm"
|
|
22
22
|
dayLabel={i18n.dayLabel}
|
|
@@ -44,12 +44,11 @@ export const Sizes: Story = {
|
|
|
44
44
|
yearLabel={i18n.yearLabel}
|
|
45
45
|
onChange={fn()}
|
|
46
46
|
/>
|
|
47
|
-
|
|
47
|
+
</>
|
|
48
48
|
);
|
|
49
49
|
},
|
|
50
50
|
...withRTLDiff({
|
|
51
51
|
renderAs: 'iframe',
|
|
52
|
-
fixedRows: { heights: [6, 7, 9] },
|
|
53
52
|
i18n: {
|
|
54
53
|
dayLabel: { en: 'Day', ar: 'اليوم' },
|
|
55
54
|
monthLabel: { en: 'Month', ar: 'الشهر' },
|
|
@@ -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
|
|
|
@@ -50,7 +50,7 @@ export const RTLDiff: Story = {
|
|
|
50
50
|
];
|
|
51
51
|
|
|
52
52
|
return (
|
|
53
|
-
|
|
53
|
+
<>
|
|
54
54
|
<Decision
|
|
55
55
|
options={options}
|
|
56
56
|
presentation={DecisionPresentation.LIST}
|
|
@@ -80,11 +80,10 @@ export const RTLDiff: Story = {
|
|
|
80
80
|
type={DecisionType.NAVIGATION}
|
|
81
81
|
size={Size.MEDIUM}
|
|
82
82
|
/>
|
|
83
|
-
|
|
83
|
+
</>
|
|
84
84
|
);
|
|
85
85
|
},
|
|
86
86
|
...withRTLDiff({
|
|
87
|
-
fixedRows: { heights: 'auto' },
|
|
88
87
|
i18n: {
|
|
89
88
|
sendTitle: { en: 'Send money', ar: 'إرسال الأموال' },
|
|
90
89
|
sendDescription: { en: 'Fast international transfers.', ar: 'تحويلات دولية سريعة.' },
|
|
@@ -222,7 +222,7 @@ export const RTLDiff: Story = {
|
|
|
222
222
|
);
|
|
223
223
|
},
|
|
224
224
|
...withRTLDiff({
|
|
225
|
-
fixedRows: { heights:
|
|
225
|
+
fixedRows: { heights: [8, 11, 8, 8, 8, 10, 12, 8, 8, 8] },
|
|
226
226
|
i18n: {
|
|
227
227
|
fullName: { en: 'Full name', ar: 'الاسم الكامل' },
|
|
228
228
|
customerName: { en: 'Alice Smith', ar: 'أليس سميث' },
|
|
@@ -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;
|
|
@@ -27,7 +27,7 @@ export const TriggerVariants: Story = {
|
|
|
27
27
|
render: () => {
|
|
28
28
|
const i18n = useRtlDiffI18n();
|
|
29
29
|
return (
|
|
30
|
-
|
|
30
|
+
<>
|
|
31
31
|
{/* Currency selector on leading side — flips in RTL */}
|
|
32
32
|
<ExpressiveMoneyInput
|
|
33
33
|
label={i18n.youSend}
|
|
@@ -90,11 +90,10 @@ export const TriggerVariants: Story = {
|
|
|
90
90
|
}}
|
|
91
91
|
onAmountChange={fn()}
|
|
92
92
|
/>
|
|
93
|
-
|
|
93
|
+
</>
|
|
94
94
|
);
|
|
95
95
|
},
|
|
96
96
|
...withRTLDiff({
|
|
97
|
-
fixedRows: { heights: [8, 8, 10, 8] },
|
|
98
97
|
renderAs: 'iframe',
|
|
99
98
|
width: 'stretch',
|
|
100
99
|
i18n: {
|
|
@@ -61,7 +61,7 @@ export const RTLDiff: Story = {
|
|
|
61
61
|
render: () => {
|
|
62
62
|
const i18n = useRtlDiffI18n();
|
|
63
63
|
return (
|
|
64
|
-
|
|
64
|
+
<>
|
|
65
65
|
<Field label="Localised placeholder">
|
|
66
66
|
<Input placeholder={i18n.placeholder_ar} />
|
|
67
67
|
</Field>
|
|
@@ -107,11 +107,10 @@ export const RTLDiff: Story = {
|
|
|
107
107
|
<Field label={i18n.textareaLabel} required={false} description={i18n.maxChars}>
|
|
108
108
|
<TextArea maxLength={100} defaultValue={i18n.textareaValue} />
|
|
109
109
|
</Field>
|
|
110
|
-
|
|
110
|
+
</>
|
|
111
111
|
);
|
|
112
112
|
},
|
|
113
113
|
...withRTLDiff({
|
|
114
|
-
fixedRows: { heights: 'auto' },
|
|
115
114
|
width: 'stretch',
|
|
116
115
|
i18n: {
|
|
117
116
|
placeholder_en: { en: 'LTR placeholder...', ar: 'LTR placeholder...' },
|
|
@@ -40,7 +40,7 @@ const AnimatedLabel = ({ activeLabel, className, steps }: AnimatedLabelProps) =>
|
|
|
40
40
|
className={clsx(
|
|
41
41
|
'np-animated-label',
|
|
42
42
|
'btn-unstyled',
|
|
43
|
-
'
|
|
43
|
+
'np-text-body-large-bold',
|
|
44
44
|
className,
|
|
45
45
|
)}
|
|
46
46
|
onClick={() => setShowSteps(true)}
|
|
@@ -151,7 +151,7 @@ export const RTLDiff: Story = {
|
|
|
151
151
|
);
|
|
152
152
|
},
|
|
153
153
|
...withRTLDiff({
|
|
154
|
-
fixedRows: { heights:
|
|
154
|
+
fixedRows: { heights: [4, 4, 5, 5], hideSeparators: true },
|
|
155
155
|
i18n: {
|
|
156
156
|
groupWithoutAction: { en: 'Group level without action', ar: 'مستوى المجموعة بدون إجراء' },
|
|
157
157
|
groupWithAction: { en: 'Group level with action', ar: 'مستوى المجموعة مع إجراء' },
|
|
@@ -38,7 +38,7 @@ export const RTLDiff: StoryObj<typeof InputWithDisplayFormat> = {
|
|
|
38
38
|
const i18n = useRtlDiffI18n();
|
|
39
39
|
|
|
40
40
|
return (
|
|
41
|
-
|
|
41
|
+
<>
|
|
42
42
|
<Field id="empty" label="Empty with placeholder">
|
|
43
43
|
<InputWithDisplayFormat
|
|
44
44
|
id="empty"
|
|
@@ -66,11 +66,10 @@ export const RTLDiff: StoryObj<typeof InputWithDisplayFormat> = {
|
|
|
66
66
|
onChange={() => {}}
|
|
67
67
|
/>
|
|
68
68
|
</Field>
|
|
69
|
-
|
|
69
|
+
</>
|
|
70
70
|
);
|
|
71
71
|
},
|
|
72
72
|
...withRTLDiff({
|
|
73
|
-
fixedRows: { heights: 'auto' },
|
|
74
73
|
width: 'stretch',
|
|
75
74
|
i18n: {
|
|
76
75
|
value: {
|