From b805ded8960b64377d6c6534f9939361e0d5724a Mon Sep 17 00:00:00 2001 From: Mukul Bansal Date: Mon, 6 May 2024 01:06:54 +0530 Subject: [PATCH 1/2] refactor: upgrade react and styled-components version affects: @medly-components/core, @medly-components/forms, @medly-components/icons, @medly-components/layout, @medly-components/loaders, @medly-components/markdown, @medly-components/utils BREAKING CHANGE: React v18 and styled-components v6 has some breaking changes --- .storybook/main.js | 7 - .vscode/settings.json | 6 +- README.md | 6 +- docs/Colors/Colors.stories.tsx | 4 +- docs/Typography/Typography.stories.tsx | 8 +- package.json | 13 +- packages/core/package.json | 14 +- .../src/components/Accordion/Accordion.tsx | 7 +- .../components/Accordion/Content/Content.tsx | 6 +- .../components/Accordion/Header/Header.tsx | 6 +- .../__snapshots__/Accordion.test.tsx.snap | 17 - .../core/src/components/Accordion/types.ts | 6 +- .../src/components/Avatar/Avatar.stories.tsx | 4 +- .../src/components/Avatar/Avatar.styled.tsx | 16 +- .../core/src/components/Avatar/Avatar.tsx | 8 +- .../Avatar/__snapshots__/Avatar.test.tsx.snap | 103 +- .../core/src/components/Box/Box.stories.tsx | 6 +- packages/core/src/components/Box/Box.tsx | 6 +- .../Box/__snapshots__/Box.test.tsx.snap | 658 +- .../src/components/Breadcrumb/Back/Back.tsx | 4 +- .../Breadcrumb/Breadcrumb.stories.tsx | 4 +- .../src/components/Breadcrumb/Breadcrumb.tsx | 8 +- .../Breadcrumb/Item/Item.styled.tsx | 2 +- .../src/components/Breadcrumb/Item/Item.tsx | 8 +- .../__snapshots__/Breadcrumb.test.tsx.snap | 248 +- .../src/components/Button/Button.stories.tsx | 4 +- .../core/src/components/Button/Button.tsx | 10 +- .../src/components/Button/Loader/Loader.tsx | 6 +- .../Button/__snapshots__/Button.test.tsx.snap | 1440 +- .../core/src/components/Calendar/Calendar.tsx | 6 +- .../MonthAndYearSelection.tsx | 8 +- .../__snapshots__/Calendar.test.tsx.snap | 556 +- .../core/src/components/Card/Card.stories.tsx | 4 +- .../core/src/components/Card/Card.styled.tsx | 20 +- packages/core/src/components/Card/Card.tsx | 8 +- .../Card/__snapshots__/Card.test.tsx.snap | 333 +- .../src/components/CardTable/Body/Body.tsx | 4 +- .../components/CardTable/Body/Cell/Cell.tsx | 6 +- .../Cell/__snapshots__/Cell.test.tsx.snap | 106 +- .../CardTable/Body/Row/Row.styled.tsx | 44 +- .../Body/Row/__snapshots__/Row.test.tsx.snap | 24 +- .../components/CardTable/Body/Row/types.ts | 4 +- .../Body/__snapshots__/Body.test.tsx.snap | 69 +- .../src/components/CardTable/CardTable.tsx | 4 +- .../src/components/CardTable/Head/Head.tsx | 4 +- .../Head/HeadCell/HeadCell.styled.tsx | 104 +- .../CardTable/Head/HeadCell/HeadCell.tsx | 6 +- .../__snapshots__/HeadCell.test.tsx.snap | 292 +- .../Head/__snapshots__/Head.test.tsx.snap | 70 +- .../__snapshots__/CardTable.test.tsx.snap | 126 +- .../CardTable/docs/CardTable.stories.tsx | 8 +- .../CenterAlignedLoader.tsx | 6 +- .../components/Checkbox/Checkbox.stories.tsx | 9 +- .../components/Checkbox/Checkbox.styled.tsx | 35 +- .../core/src/components/Checkbox/Checkbox.tsx | 13 +- .../__snapshots__/checkbox.test.tsx.snap | 630 +- .../CheckboxGroup/CheckboxGroup.stories.tsx | 4 +- .../CheckboxGroup/CheckboxGroup.tsx | 10 +- .../__snapshots__/CheckboxGroup.test.tsx.snap | 379 +- .../core/src/components/Chip/Chip.stories.tsx | 4 +- packages/core/src/components/Chip/Chip.tsx | 8 +- .../Chip/__snapshots__/Chip.test.tsx.snap | 108 +- .../DatePicker/DatePicker.stories.tsx | 6 +- .../src/components/DatePicker/DatePicker.tsx | 8 +- .../__snapshots__/DatePicker.test.tsx.snap | 4505 ++--- .../DateRangeCalendar/DateRangeCalendar.tsx | 6 +- .../DateRangeCalendar/Month/Month.tsx | 6 +- .../Month/Styled/Date.styled.tsx | 66 +- .../DateRangePicker.stories.tsx | 8 +- .../DateRangePicker/DateRangePicker.tsx | 6 +- .../DateRangeTextField/DateRangeTextField.tsx | 6 +- .../DateRangeTextFields.tsx | 4 +- .../useDateRangeTextFieldsHandlers.ts | 2 +- .../DateRangePicker.test.tsx.snap | 14421 +++++++++------- .../components/DialogBox/Actions/Actions.tsx | 6 +- .../components/DialogBox/Content/Content.tsx | 8 +- .../DialogBox/DialogBox.stories.tsx | 6 +- .../src/components/DialogBox/DialogBox.tsx | 10 +- .../components/DialogBox/Header/Header.tsx | 8 +- .../Header/__snapshots__/Header.test.tsx.snap | 6 +- .../src/components/DialogBox/Popup/Popup.tsx | 8 +- .../Popup/__snapshots__/Popup.test.tsx.snap | 24 +- .../__snapshots__/DialogBox.test.tsx.snap | 210 +- .../core/src/components/DialogBox/types.ts | 10 +- .../src/components/Drawer/Content/Content.tsx | 6 +- .../src/components/Drawer/Drawer.stories.tsx | 4 +- .../src/components/Drawer/Drawer.test.tsx | 4 +- .../core/src/components/Drawer/Drawer.tsx | 6 +- .../src/components/Drawer/Footer/Footer.tsx | 8 +- .../src/components/Drawer/Header/Header.tsx | 8 +- .../Header/__snapshots__/Header.test.tsx.snap | 10 +- .../Drawer/__snapshots__/Drawer.test.tsx.snap | 58 +- packages/core/src/components/Drawer/types.ts | 8 +- .../FieldWithLabel/FieldWithLabel.styled.tsx | 4 +- .../FieldWithLabel/FieldWithLabel.tsx | 8 +- .../FieldWithLabel.test.tsx.snap | 141 +- .../src/components/FieldWithLabel/types.ts | 15 +- .../components/FileInput/FileInput.styled.tsx | 10 +- .../src/components/FileInput/FileInput.tsx | 6 +- .../__snapshots__/FileInput.test.tsx.snap | 68 +- .../HelperAndErrorTextTooltip.stories.tsx | 4 +- .../HelperAndErrorTextTooltip.tsx | 6 +- .../src/components/Hidden/Hidden.stories.tsx | 4 +- .../core/src/components/Hidden/Hidden.tsx | 6 +- .../__snapshots__/HiddenCss.test.tsx.snap | 10 +- .../components/Hidden/HiddenJs/HiddenJs.tsx | 9 +- .../src/components/Input/Input.stories.tsx | 4 +- .../src/components/Input/Input.styled.tsx | 14 +- packages/core/src/components/Input/Input.tsx | 8 +- .../Input/__snapshots__/Input.test.tsx.snap | 342 +- .../src/components/Label/Label.stories.tsx | 4 +- packages/core/src/components/Label/Label.tsx | 8 +- .../Label/__snapshots__/label.test.tsx.snap | 12 +- .../core/src/components/Link/Link.stories.tsx | 4 +- packages/core/src/components/Link/Link.tsx | 8 +- .../Link/__snapshots__/Link.test.tsx.snap | 14 +- .../core/src/components/List/List.styled.tsx | 22 +- packages/core/src/components/List/List.tsx | 8 +- .../List/__snapshots__/List.test.tsx.snap | 12 +- .../core/src/components/Logo/Logo.stories.tsx | 4 +- packages/core/src/components/Logo/Logo.tsx | 8 +- .../src/components/Modal/Actions/Actions.tsx | 6 +- .../src/components/Modal/Content/Content.tsx | 8 +- .../src/components/Modal/Header/Header.tsx | 6 +- .../Header/__snapshots__/Header.test.tsx.snap | 16 +- .../src/components/Modal/Modal.stories.tsx | 6 +- packages/core/src/components/Modal/Modal.tsx | 6 +- .../components/Modal/Popup/Popup.styled.tsx | 14 +- .../core/src/components/Modal/Popup/Popup.tsx | 6 +- .../Popup/__snapshots__/Popup.test.tsx.snap | 34 +- .../Modal/__snapshots__/Modal.test.tsx.snap | 129 +- packages/core/src/components/Modal/types.ts | 10 +- .../MultiSelect/InputSuffix/Chip/Chip.tsx | 6 +- .../MultiSelect/InputSuffix/InputSuffix.tsx | 4 +- .../MultiSelect/MultiSelect.stories.tsx | 4 +- .../components/MultiSelect/MultiSelect.tsx | 6 +- .../MultiSelect/Options/Chip/Chip.tsx | 6 +- .../MultiSelect/Options/Options.tsx | 8 +- .../__snapshots__/MultiSelect.test.tsx.snap | 1075 +- .../Pagination/Pagination.stories.tsx | 4 +- .../src/components/Pagination/Pagination.tsx | 8 +- .../PaginationPopup/PaginationPopup.tsx | 6 +- .../PaginationPopup.test.tsx.snap | 38 +- .../__snapshots__/Pagination.test.tsx.snap | 351 +- .../core/src/components/Popover/Popover.tsx | 6 +- .../src/components/Popover/Popup/Popup.tsx | 6 +- .../Popup/__snapshots__/Popup.test.tsx.snap | 108 +- .../src/components/Radio/Radio.stories.tsx | 4 +- .../src/components/Radio/Radio.styled.tsx | 18 +- packages/core/src/components/Radio/Radio.tsx | 8 +- .../Radio/__snapshots__/radio.test.tsx.snap | 456 +- .../RadioGroup/RadioGroup.stories.tsx | 4 +- .../src/components/RadioGroup/RadioGroup.tsx | 6 +- .../__snapshots__/RadioGroup.test.tsx.snap | 156 +- .../SearchBox/SearchBox.stories.tsx | 6 +- .../components/SearchBox/SearchBox.styled.tsx | 4 +- .../src/components/SearchBox/SearchBox.tsx | 6 +- .../__snapshots__/SearchBox.test.tsx.snap | 286 +- .../components/SearchBox/styles/options.tsx | 6 +- .../src/components/SearchBox/styles/utils.tsx | 2 +- .../core/src/components/SearchBox/types.ts | 3 + .../SingleSelect/FlatVariant/FlatVariant.tsx | 6 +- .../Options/Option/Option.styled.tsx | 22 +- .../SingleSelect/Options/Option/Option.tsx | 19 +- .../SingleSelect/Options/Option/types.ts | 3 +- .../SingleSelect/Options/Options.tsx | 6 +- .../SingleSelect/SingleSelect.stories.tsx | 6 +- .../SingleSelect/SingleSelect.test.tsx | 3 +- .../components/SingleSelect/SingleSelect.tsx | 6 +- .../__snapshots__/SingleSelect.test.tsx.snap | 3257 +--- .../core/src/components/Stepper/Step/Step.tsx | 8 +- .../components/Stepper/Stepper.stories.tsx | 4 +- .../core/src/components/Stepper/Stepper.tsx | 8 +- .../__snapshots__/Stepper.test.tsx.snap | 147 +- .../components/Table/ActionBar/ActionBar.tsx | 6 +- .../__snapshots__/ActionBar.test.tsx.snap | 333 +- .../core/src/components/Table/Body/Body.tsx | 6 +- .../src/components/Table/Body/Cell/Cell.tsx | 10 +- .../Cell/ExtendedRowCell/ExtendedRowCell.tsx | 6 +- .../Cell/RowActionsCell/RowActionsCell.tsx | 6 +- .../RowHoverActionsCell.tsx | 6 +- .../Cell/__snapshots__/Cell.test.tsx.snap | 127 +- .../Body/GroupedRow/ContentRow/ContentRow.tsx | 4 +- .../Table/Body/GroupedRow/GroupedRow.tsx | 4 +- .../Body/GroupedRow/TitleRow/TitleRow.tsx | 4 +- .../components/Table/Body/Row/Row.styled.tsx | 2 +- .../src/components/Table/Body/Row/Row.tsx | 6 +- .../Body/Row/__snapshots__/Row.test.tsx.snap | 96 +- .../Body/__snapshots__/Body.test.tsx.snap | 251 +- .../ColumnConfiguration.tsx | 6 +- .../core/src/components/Table/Foot/Foot.tsx | 4 +- .../Foot/__snapshots__/Foot.test.tsx.snap | 436 +- .../Table/GroupCell/GroupCell.styled.tsx | 2 +- .../__snapshots__/GroupCell.test.tsx.snap | 44 +- .../core/src/components/Table/Head/Head.tsx | 6 +- .../Table/Head/HeadCell/HeadCell.tsx | 8 +- .../Table/Head/HeadRow/HeadRow.styled.tsx | 2 +- .../src/components/Table/Minimap/Minimap.tsx | 10 +- .../__snapshots__/Minimap.test.tsx.snap | 234 +- packages/core/src/components/Table/Table.tsx | 6 +- .../Table/__snapshots__/Table.test.tsx.snap | 1785 +- .../components/Table/docs/Table.stories.tsx | 8 +- .../src/components/Tabs/Tab/Tab.styled.tsx | 43 +- packages/core/src/components/Tabs/Tab/Tab.tsx | 6 +- .../Tabs/Tab/__snapshots__/Tab.test.tsx.snap | 816 +- .../core/src/components/Tabs/Tab/types.ts | 24 +- .../src/components/Tabs/TabList/TabList.tsx | 6 +- .../__snapshots__/TabList.test.tsx.snap | 199 +- .../src/components/Tabs/TabPanel/TabPanel.tsx | 8 +- .../core/src/components/Tabs/Tabs.stories.tsx | 4 +- packages/core/src/components/Tabs/Tabs.tsx | 6 +- .../Tabs/__snapshots__/Tabs.test.tsx.snap | 722 +- packages/core/src/components/Text/Text.tsx | 6 +- .../Text/__snapshots__/Text.test.tsx.snap | 25 +- .../InnerWrapper/InnerWrapper.styled.tsx | 21 +- .../Styled/InnerWrapper/filled.styled.tsx | 6 +- .../Styled/InnerWrapper/fusion.styled.tsx | 8 +- .../Styled/InnerWrapper/outlined.styled.tsx | 6 +- .../TextField/TextField.stories.tsx | 6 +- .../src/components/TextField/TextField.tsx | 6 +- .../__snapshots__/TextField.test.tsx.snap | 6616 ++----- .../core/src/components/TextField/types.ts | 4 +- .../src/components/TimePicker/TimePicker.tsx | 6 +- .../TimePickerPopup.styled.tsx | 6 +- .../TimePickerPopup/TimePickerPopup.tsx | 8 +- .../TimePickerTextField.tsx | 6 +- .../__snapshots__/TimePicker.test.tsx.snap | 486 +- .../src/components/Toast/Toast.stories.tsx | 4 +- packages/core/src/components/Toast/Toast.tsx | 8 +- .../Toast/__snapshots__/Toast.test.tsx.snap | 322 +- .../ToastContainer.component.tsx | 8 +- .../ToastContainer/ToastContainer.stories.tsx | 4 +- .../ToastContainer.test.tsx.snap | 668 +- .../src/components/Toggle/Toggle.stories.tsx | 4 +- .../core/src/components/Toggle/Toggle.tsx | 6 +- .../Toggle/__snapshots__/Toggle.test.tsx.snap | 174 +- packages/forms/package.json | 12 +- .../forms/src/components/Actions/Actions.tsx | 4 +- .../__snapshots__/Actions.test.tsx.snap | 185 +- .../components/Fields/Fields.components.tsx | 4 +- .../Form/__snapshots__/Form.test.tsx.snap | 1874 +- .../components/Form/stories/Form.stories.tsx | 8 +- .../forms/src/components/Form/testSchema.ts | 1 + packages/icons/package.json | 10 +- packages/icons/src/IconGrid/IconGrid.tsx | 4 +- packages/icons/src/Icons.stories.tsx | 6 +- packages/icons/src/SvgIcon/SvgIcon.styled.tsx | 16 +- .../src/icons/Action/AccessibilityIcon.tsx | 8 +- .../icons/Action/AccessibleForwardIcon.tsx | 8 +- .../icons/src/icons/Action/AccessibleIcon.tsx | 8 +- .../src/icons/Action/AccountBalanceIcon.tsx | 8 +- .../icons/Action/AccountBalanceWalletIcon.tsx | 8 +- .../icons/src/icons/Action/AccountBoxIcon.tsx | 8 +- .../src/icons/Action/AccountCircleIcon.tsx | 8 +- .../src/icons/Action/Action3dRotationIcon.tsx | 8 +- .../src/icons/Action/AddShoppingCartIcon.tsx | 8 +- .../icons/src/icons/Action/AlarmAddIcon.tsx | 8 +- packages/icons/src/icons/Action/AlarmIcon.tsx | 8 +- .../icons/src/icons/Action/AlarmOffIcon.tsx | 8 +- .../icons/src/icons/Action/AlarmOnIcon.tsx | 8 +- .../icons/src/icons/Action/AllInboxIcon.tsx | 8 +- .../icons/src/icons/Action/AllOutIcon.tsx | 8 +- .../icons/src/icons/Action/AndroidIcon.tsx | 8 +- .../src/icons/Action/AnnouncementIcon.tsx | 8 +- .../src/icons/Action/ArrowRightAltIcon.tsx | 8 +- .../src/icons/Action/AspectRatioIcon.tsx | 8 +- .../icons/src/icons/Action/AssessmentIcon.tsx | 8 +- .../icons/src/icons/Action/AssignmentIcon.tsx | 8 +- .../src/icons/Action/AssignmentIndIcon.tsx | 8 +- .../src/icons/Action/AssignmentLateIcon.tsx | 8 +- .../src/icons/Action/AssignmentReturnIcon.tsx | 8 +- .../icons/Action/AssignmentReturnedIcon.tsx | 8 +- .../icons/Action/AssignmentTurnedInIcon.tsx | 8 +- .../icons/src/icons/Action/AutorenewIcon.tsx | 8 +- .../icons/src/icons/Action/BackupIcon.tsx | 8 +- packages/icons/src/icons/Action/BookIcon.tsx | 8 +- .../src/icons/Action/BookmarkBorderIcon.tsx | 8 +- .../icons/src/icons/Action/BookmarkIcon.tsx | 8 +- .../icons/src/icons/Action/BookmarksIcon.tsx | 8 +- .../icons/src/icons/Action/BugReportIcon.tsx | 8 +- packages/icons/src/icons/Action/BuildIcon.tsx | 8 +- .../icons/src/icons/Action/CachedIcon.tsx | 8 +- .../src/icons/Action/CalendarTodayIcon.tsx | 8 +- .../src/icons/Action/CalendarViewDayIcon.tsx | 8 +- .../src/icons/Action/CameraEnhanceIcon.tsx | 8 +- .../src/icons/Action/CardGiftcardIcon.tsx | 8 +- .../src/icons/Action/CardMembershipIcon.tsx | 8 +- .../icons/src/icons/Action/CardTravelIcon.tsx | 8 +- .../src/icons/Action/ChangeHistoryIcon.tsx | 8 +- .../src/icons/Action/CheckCircleIcon.tsx | 8 +- .../icons/Action/CheckCircleOutlineIcon.tsx | 8 +- .../src/icons/Action/ChromeReaderModeIcon.tsx | 8 +- packages/icons/src/icons/Action/ClassIcon.tsx | 8 +- packages/icons/src/icons/Action/CodeIcon.tsx | 8 +- .../icons/src/icons/Action/CommuteIcon.tsx | 8 +- .../src/icons/Action/CompareArrowsIcon.tsx | 8 +- .../src/icons/Action/ContactSupportIcon.tsx | 8 +- .../icons/src/icons/Action/CopyrightIcon.tsx | 8 +- .../icons/src/icons/Action/CreditCardIcon.tsx | 8 +- .../icons/src/icons/Action/DashboardIcon.tsx | 8 +- .../icons/src/icons/Action/DateRangeIcon.tsx | 8 +- .../src/icons/Action/DeleteForeverIcon.tsx | 8 +- .../icons/src/icons/Action/DeleteIcon.tsx | 8 +- .../src/icons/Action/DeleteOutlineIcon.tsx | 8 +- .../src/icons/Action/DescriptionIcon.tsx | 8 +- packages/icons/src/icons/Action/DnsIcon.tsx | 8 +- .../icons/src/icons/Action/DoneAllIcon.tsx | 8 +- packages/icons/src/icons/Action/DoneIcon.tsx | 8 +- .../src/icons/Action/DoneOutlineIcon.tsx | 8 +- .../icons/src/icons/Action/DonutLargeIcon.tsx | 8 +- .../icons/src/icons/Action/DonutSmallIcon.tsx | 8 +- .../src/icons/Action/DragIndicatorIcon.tsx | 8 +- packages/icons/src/icons/Action/EjectIcon.tsx | 8 +- .../icons/src/icons/Action/EuroSymbolIcon.tsx | 8 +- packages/icons/src/icons/Action/EventIcon.tsx | 8 +- .../icons/src/icons/Action/EventSeatIcon.tsx | 8 +- .../icons/src/icons/Action/ExitToAppIcon.tsx | 8 +- .../icons/src/icons/Action/ExpandIcon.tsx | 8 +- .../icons/src/icons/Action/ExploreIcon.tsx | 8 +- .../icons/src/icons/Action/ExploreOffIcon.tsx | 8 +- .../icons/src/icons/Action/ExtensionIcon.tsx | 8 +- packages/icons/src/icons/Action/FaceIcon.tsx | 8 +- .../icons/src/icons/Action/FaceUnlockIcon.tsx | 8 +- .../src/icons/Action/FavoriteBorderIcon.tsx | 8 +- .../icons/src/icons/Action/FavoriteIcon.tsx | 8 +- .../icons/src/icons/Action/FeedbackIcon.tsx | 8 +- .../icons/src/icons/Action/FindInPageIcon.tsx | 8 +- .../src/icons/Action/FindReplaceIcon.tsx | 8 +- .../src/icons/Action/FingerprintIcon.tsx | 8 +- .../icons/src/icons/Action/FlightLandIcon.tsx | 8 +- .../src/icons/Action/FlightTakeoffIcon.tsx | 8 +- .../icons/src/icons/Action/FlipToBackIcon.tsx | 8 +- .../src/icons/Action/FlipToFrontIcon.tsx | 8 +- .../icons/src/icons/Action/GTranslateIcon.tsx | 8 +- packages/icons/src/icons/Action/GavelIcon.tsx | 8 +- .../icons/src/icons/Action/GetAppIcon.tsx | 8 +- packages/icons/src/icons/Action/GifIcon.tsx | 8 +- packages/icons/src/icons/Action/GradeIcon.tsx | 8 +- .../icons/src/icons/Action/GroupWorkIcon.tsx | 8 +- packages/icons/src/icons/Action/HelpIcon.tsx | 8 +- .../src/icons/Action/HelpOutlineIcon.tsx | 8 +- .../src/icons/Action/HighlightOffIcon.tsx | 8 +- .../icons/src/icons/Action/HistoryIcon.tsx | 8 +- packages/icons/src/icons/Action/HomeIcon.tsx | 8 +- .../src/icons/Action/HorizontalSplitIcon.tsx | 8 +- .../src/icons/Action/HourglassEmptyIcon.tsx | 8 +- .../src/icons/Action/HourglassFullIcon.tsx | 8 +- packages/icons/src/icons/Action/HttpIcon.tsx | 8 +- packages/icons/src/icons/Action/HttpsIcon.tsx | 8 +- .../src/icons/Action/ImportantDevicesIcon.tsx | 8 +- packages/icons/src/icons/Action/InfoIcon.tsx | 8 +- .../src/icons/Action/InfoOutlineIcon.tsx | 8 +- packages/icons/src/icons/Action/InputIcon.tsx | 8 +- .../src/icons/Action/InvertColorsIcon.tsx | 8 +- packages/icons/src/icons/Action/LabelIcon.tsx | 8 +- .../src/icons/Action/LabelImportantIcon.tsx | 8 +- .../Action/LabelImportantOutlineIcon.tsx | 8 +- .../icons/src/icons/Action/LabelOffIcon.tsx | 8 +- .../src/icons/Action/LabelOutlineIcon.tsx | 8 +- .../icons/src/icons/Action/LanguageIcon.tsx | 8 +- .../icons/src/icons/Action/LaunchIcon.tsx | 8 +- .../src/icons/Action/LightbulbOutlineIcon.tsx | 8 +- .../icons/src/icons/Action/LineStyleIcon.tsx | 8 +- .../icons/src/icons/Action/LineWeightIcon.tsx | 8 +- packages/icons/src/icons/Action/ListIcon.tsx | 8 +- packages/icons/src/icons/Action/LockIcon.tsx | 8 +- .../icons/src/icons/Action/LockOpenIcon.tsx | 8 +- .../src/icons/Action/LockOutlineIcon.tsx | 8 +- .../icons/src/icons/Action/LoyaltyIcon.tsx | 8 +- .../icons/Action/MarkunreadMailboxIcon.tsx | 8 +- .../icons/src/icons/Action/MaximizeIcon.tsx | 8 +- .../icons/src/icons/Action/MinimizeIcon.tsx | 8 +- .../icons/src/icons/Action/MotorcycleIcon.tsx | 8 +- .../icons/src/icons/Action/NoteAddIcon.tsx | 8 +- .../src/icons/Action/OfflineBoltIcon.tsx | 8 +- .../icons/src/icons/Action/OfflinePinIcon.tsx | 8 +- .../icons/src/icons/Action/OpacityIcon.tsx | 8 +- .../src/icons/Action/OpenInBrowserIcon.tsx | 8 +- .../icons/src/icons/Action/OpenInNewIcon.tsx | 8 +- .../icons/src/icons/Action/OpenWithIcon.tsx | 8 +- .../icons/src/icons/Action/PageviewIcon.tsx | 8 +- .../icons/src/icons/Action/PanToolIcon.tsx | 8 +- .../icons/src/icons/Action/PaymentIcon.tsx | 8 +- .../src/icons/Action/PermCameraMicIcon.tsx | 8 +- .../icons/Action/PermContactCalendarIcon.tsx | 8 +- .../src/icons/Action/PermDataSettingIcon.tsx | 8 +- .../Action/PermDeviceInformationIcon.tsx | 8 +- .../src/icons/Action/PermIdentityIcon.tsx | 8 +- .../icons/src/icons/Action/PermMediaIcon.tsx | 8 +- .../src/icons/Action/PermPhoneMsgIcon.tsx | 8 +- .../src/icons/Action/PermScanWifiIcon.tsx | 8 +- packages/icons/src/icons/Action/PetsIcon.tsx | 8 +- .../icons/Action/PictureInPictureAltIcon.tsx | 8 +- .../src/icons/Action/PictureInPictureIcon.tsx | 8 +- .../src/icons/Action/PlayForWorkIcon.tsx | 8 +- .../icons/src/icons/Action/PolymerIcon.tsx | 8 +- .../src/icons/Action/PowerSettingsNewIcon.tsx | 8 +- .../src/icons/Action/PregnantWomanIcon.tsx | 8 +- .../src/icons/Action/QueryBuilderIcon.tsx | 8 +- .../src/icons/Action/QuestionAnswerIcon.tsx | 8 +- .../icons/src/icons/Action/ReceiptIcon.tsx | 8 +- .../src/icons/Action/ReceiptOutlinedIcon.tsx | 8 +- .../src/icons/Action/RecordVoiceOverIcon.tsx | 8 +- .../icons/src/icons/Action/RedeemIcon.tsx | 8 +- .../icons/Action/RemoveShoppingCartIcon.tsx | 8 +- .../icons/src/icons/Action/ReorderIcon.tsx | 8 +- .../src/icons/Action/ReportProblemIcon.tsx | 8 +- .../src/icons/Action/RestoreFromTrashIcon.tsx | 8 +- .../icons/src/icons/Action/RestoreIcon.tsx | 8 +- .../src/icons/Action/RestorePageIcon.tsx | 8 +- packages/icons/src/icons/Action/RoomIcon.tsx | 8 +- .../src/icons/Action/RoundedCornerIcon.tsx | 8 +- .../icons/src/icons/Action/RowingIcon.tsx | 8 +- .../icons/src/icons/Action/ScheduleIcon.tsx | 8 +- .../icons/src/icons/Action/SearchIcon.tsx | 8 +- .../icons/Action/SettingsApplicationsIcon.tsx | 8 +- .../Action/SettingsBackupRestoreIcon.tsx | 8 +- .../icons/Action/SettingsBluetoothIcon.tsx | 8 +- .../icons/Action/SettingsBrightnessIcon.tsx | 8 +- .../src/icons/Action/SettingsCellIcon.tsx | 8 +- .../src/icons/Action/SettingsEthernetIcon.tsx | 8 +- .../icons/src/icons/Action/SettingsIcon.tsx | 8 +- .../icons/Action/SettingsInputAntennaIcon.tsx | 8 +- .../Action/SettingsInputComponentIcon.tsx | 8 +- .../Action/SettingsInputCompositeIcon.tsx | 8 +- .../icons/Action/SettingsInputHdmiIcon.tsx | 8 +- .../icons/Action/SettingsInputSvideoIcon.tsx | 8 +- .../src/icons/Action/SettingsOverscanIcon.tsx | 8 +- .../src/icons/Action/SettingsPhoneIcon.tsx | 8 +- .../src/icons/Action/SettingsPowerIcon.tsx | 8 +- .../src/icons/Action/SettingsRemoteIcon.tsx | 8 +- .../src/icons/Action/SettingsVoiceIcon.tsx | 8 +- packages/icons/src/icons/Action/ShopIcon.tsx | 8 +- .../icons/src/icons/Action/ShopTwoIcon.tsx | 8 +- .../src/icons/Action/ShoppingBasketIcon.tsx | 8 +- .../src/icons/Action/ShoppingCartIcon.tsx | 8 +- .../src/icons/Action/SpeakerNotesIcon.tsx | 8 +- .../src/icons/Action/SpeakerNotesOffIcon.tsx | 8 +- .../icons/src/icons/Action/SpellcheckIcon.tsx | 8 +- .../icons/Action/StarRate18pxRoundedIcon.tsx | 8 +- packages/icons/src/icons/Action/StarsIcon.tsx | 8 +- packages/icons/src/icons/Action/StoreIcon.tsx | 8 +- .../icons/src/icons/Action/SubjectIcon.tsx | 8 +- .../icons/Action/SupervisedUserCircleIcon.tsx | 8 +- .../icons/Action/SupervisorAccountIcon.tsx | 8 +- .../icons/src/icons/Action/SwapHorizIcon.tsx | 8 +- .../icons/Action/SwapHorizontalCircleIcon.tsx | 8 +- .../icons/src/icons/Action/SwapVertIcon.tsx | 8 +- .../icons/Action/SwapVerticalCircleIcon.tsx | 8 +- .../icons/Action/SystemVerticalAltIcon.tsx | 8 +- packages/icons/src/icons/Action/TabIcon.tsx | 8 +- .../src/icons/Action/TabUnselectedIcon.tsx | 8 +- .../src/icons/Action/TextRotateUpIcon.tsx | 8 +- .../icons/Action/TextRotateVerticalIcon.tsx | 8 +- .../Action/TextRotationAngleDownIcon.tsx | 8 +- .../icons/Action/TextRotationAngleUpIcon.tsx | 8 +- .../src/icons/Action/TextRotationDownIcon.tsx | 8 +- .../src/icons/Action/TextRotationNoneIcon.tsx | 8 +- .../icons/src/icons/Action/TheatersIcon.tsx | 8 +- .../icons/src/icons/Action/ThumbDownIcon.tsx | 8 +- .../icons/src/icons/Action/ThumbUpIcon.tsx | 8 +- .../src/icons/Action/ThumbsUpDownIcon.tsx | 8 +- .../icons/src/icons/Action/TimelineIcon.tsx | 8 +- packages/icons/src/icons/Action/TocIcon.tsx | 8 +- packages/icons/src/icons/Action/TodayIcon.tsx | 8 +- .../src/icons/Action/TodayOutlinedIcon.tsx | 8 +- packages/icons/src/icons/Action/TollIcon.tsx | 8 +- .../icons/src/icons/Action/TouchAppIcon.tsx | 8 +- .../src/icons/Action/TrackChangesIcon.tsx | 8 +- .../icons/src/icons/Action/TranslateIcon.tsx | 8 +- .../src/icons/Action/TrendingDownIcon.tsx | 8 +- .../src/icons/Action/TrendingFlatIcon.tsx | 8 +- .../icons/src/icons/Action/TrendingUpIcon.tsx | 8 +- .../icons/src/icons/Action/TurnedInIcon.tsx | 8 +- .../src/icons/Action/TurnedInNotIcon.tsx | 8 +- .../icons/src/icons/Action/UpdateIcon.tsx | 8 +- .../src/icons/Action/VerifiedUserIcon.tsx | 8 +- .../src/icons/Action/VerticalSplitIcon.tsx | 8 +- .../icons/src/icons/Action/ViewAgendaIcon.tsx | 8 +- .../icons/src/icons/Action/ViewArrayIcon.tsx | 8 +- .../src/icons/Action/ViewCarouselIcon.tsx | 8 +- .../icons/src/icons/Action/ViewColumnIcon.tsx | 8 +- .../icons/src/icons/Action/ViewDayIcon.tsx | 8 +- .../src/icons/Action/ViewHeadlineIcon.tsx | 8 +- .../icons/src/icons/Action/ViewListIcon.tsx | 8 +- .../icons/src/icons/Action/ViewModuleIcon.tsx | 8 +- .../icons/src/icons/Action/ViewQuiltIcon.tsx | 8 +- .../icons/src/icons/Action/ViewStreamIcon.tsx | 8 +- .../icons/src/icons/Action/ViewWeekIcon.tsx | 8 +- .../icons/src/icons/Action/VisibilityIcon.tsx | 8 +- .../src/icons/Action/VisibilityOffIcon.tsx | 8 +- .../src/icons/Action/VoiceOverOffIcon.tsx | 8 +- .../icons/src/icons/Action/WatchLaterIcon.tsx | 8 +- packages/icons/src/icons/Action/WorkIcon.tsx | 8 +- .../icons/src/icons/Action/WorkOffIcon.tsx | 8 +- .../src/icons/Action/WorkOutlineIcon.tsx | 8 +- .../icons/Action/YoutubeSearchedForIcon.tsx | 8 +- .../icons/src/icons/Action/ZoomInIcon.tsx | 8 +- .../icons/src/icons/Action/ZoomOutIcon.tsx | 8 +- packages/icons/src/icons/Alert/ErrorIcon.tsx | 8 +- .../src/icons/Alert/ErrorOutlineIcon.tsx | 8 +- .../src/icons/Alert/NotificationAddIcon.tsx | 8 +- .../icons/Alert/NotificationImportantIcon.tsx | 8 +- .../src/icons/Alert/WarningAmberIcon.tsx | 8 +- .../icons/src/icons/Alert/WarningIcon.tsx | 8 +- .../src/icons/Communication/AddCallIcon.tsx | 8 +- .../Communication/AlternateEmailIcon.tsx | 8 +- .../src/icons/Communication/BusinessIcon.tsx | 8 +- .../src/icons/Communication/CallEndIcon.tsx | 8 +- .../src/icons/Communication/CallIcon.tsx | 8 +- .../src/icons/Communication/CallMadeIcon.tsx | 8 +- .../src/icons/Communication/CallMergeIcon.tsx | 8 +- .../icons/Communication/CallMissedIcon.tsx | 8 +- .../Communication/CallMissedOutgoingIcon.tsx | 8 +- .../icons/Communication/CallReceivedIcon.tsx | 8 +- .../src/icons/Communication/CallSplitIcon.tsx | 8 +- .../Communication/CancelPresentationIcon.tsx | 8 +- .../src/icons/Communication/CellWifiIcon.tsx | 8 +- .../icons/Communication/ChatBubbleIcon.tsx | 8 +- .../Communication/ChatBubbleOutlineIcon.tsx | 8 +- .../src/icons/Communication/ChatIcon.tsx | 8 +- .../src/icons/Communication/ClearAllIcon.tsx | 8 +- .../src/icons/Communication/CommentIcon.tsx | 8 +- .../icons/Communication/ContactMailIcon.tsx | 8 +- .../icons/Communication/ContactPhoneIcon.tsx | 8 +- .../src/icons/Communication/ContactsIcon.tsx | 8 +- .../DesktopAccessDisabledIcon.tsx | 8 +- .../src/icons/Communication/DialerSipIcon.tsx | 8 +- .../src/icons/Communication/DialpadIcon.tsx | 8 +- .../Communication/DomainDisabledIcon.tsx | 8 +- .../icons/src/icons/Communication/DuoIcon.tsx | 8 +- .../src/icons/Communication/EmailIcon.tsx | 8 +- .../src/icons/Communication/ForumIcon.tsx | 8 +- .../Communication/ImportContactsIcon.tsx | 8 +- .../icons/Communication/ImportExportIcon.tsx | 8 +- .../Communication/InvertColorsOffIcon.tsx | 8 +- .../src/icons/Communication/ListAltIcon.tsx | 8 +- .../src/icons/Communication/LiveHelpIcon.tsx | 8 +- .../icons/Communication/LocationOffIcon.tsx | 8 +- .../icons/Communication/LocationOnIcon.tsx | 8 +- .../icons/Communication/MailOutlineIcon.tsx | 8 +- .../src/icons/Communication/MessageIcon.tsx | 8 +- .../Communication/MobileScreenShareIcon.tsx | 8 +- .../src/icons/Communication/NoSimIcon.tsx | 8 +- .../Communication/PausePresentationIcon.tsx | 8 +- .../Communication/PersonAddDisabledIcon.tsx | 8 +- .../src/icons/Communication/PhoneIcon.tsx | 8 +- .../Communication/PhonelinkEraseIcon.tsx | 8 +- .../icons/Communication/PhonelinkLockIcon.tsx | 8 +- .../icons/Communication/PhonelinkRingIcon.tsx | 8 +- .../Communication/PhonelinkSetupIcon.tsx | 8 +- .../Communication/PortableWifiOffIcon.tsx | 8 +- .../icons/Communication/PresentToAllIcon.tsx | 8 +- .../icons/Communication/PrintDisabledIcon.tsx | 8 +- .../icons/Communication/RingVolumeIcon.tsx | 8 +- .../src/icons/Communication/RssFeedIcon.tsx | 8 +- .../icons/Communication/ScreenShareIcon.tsx | 8 +- .../SentimentSatisfiedAltIcon.tsx | 8 +- .../icons/Communication/SpeakerPhoneIcon.tsx | 8 +- .../StayCurrentLandscapeIcon.tsx | 8 +- .../Communication/StayCurrentPortraitIcon.tsx | 8 +- .../StayPrimaryLandscapeIcon.tsx | 8 +- .../Communication/StayPrimaryPortraitIcon.tsx | 8 +- .../Communication/StopScreenShareIcon.tsx | 8 +- .../src/icons/Communication/SwapCallsIcon.tsx | 8 +- .../src/icons/Communication/TextsmsIcon.tsx | 8 +- .../icons/Communication/UnsubscribeIcon.tsx | 8 +- .../src/icons/Communication/VoicemailIcon.tsx | 8 +- .../src/icons/Communication/VpnKeyIcon.tsx | 8 +- .../icons/src/icons/Content/AddBoxIcon.tsx | 8 +- .../icons/src/icons/Content/AddCircleIcon.tsx | 8 +- .../icons/Content/AddCircleOutlineIcon.tsx | 8 +- packages/icons/src/icons/Content/AddIcon.tsx | 8 +- .../icons/src/icons/Content/ArchiveIcon.tsx | 8 +- .../src/icons/Content/AttributionIcon.tsx | 8 +- .../icons/src/icons/Content/BackspaceIcon.tsx | 8 +- .../icons/src/icons/Content/BallotIcon.tsx | 8 +- .../icons/src/icons/Content/BlockIcon.tsx | 8 +- .../icons/src/icons/Content/ClearIcon.tsx | 8 +- packages/icons/src/icons/Content/CopyIcon.tsx | 8 +- .../icons/src/icons/Content/CreateIcon.tsx | 8 +- packages/icons/src/icons/Content/CutIcon.tsx | 8 +- .../src/icons/Content/DeleteSweepIcon.tsx | 8 +- .../icons/src/icons/Content/DraftsIcon.tsx | 8 +- .../icons/src/icons/Content/FileCopyIcon.tsx | 8 +- .../src/icons/Content/FilterListIcon.tsx | 8 +- packages/icons/src/icons/Content/FlagIcon.tsx | 8 +- .../src/icons/Content/FontDownloadIcon.tsx | 8 +- .../icons/src/icons/Content/ForwardIcon.tsx | 8 +- .../icons/src/icons/Content/GestureIcon.tsx | 8 +- .../icons/src/icons/Content/HowToRegIcon.tsx | 8 +- .../icons/src/icons/Content/HowToVoteIcon.tsx | 8 +- .../icons/src/icons/Content/InboxIcon.tsx | 8 +- packages/icons/src/icons/Content/LinkIcon.tsx | 8 +- .../icons/src/icons/Content/LinkOffIcon.tsx | 8 +- .../src/icons/Content/LowPriorityIcon.tsx | 8 +- packages/icons/src/icons/Content/MailIcon.tsx | 8 +- .../src/icons/Content/MarkunreadIcon.tsx | 8 +- .../src/icons/Content/MoveToInboxIcon.tsx | 8 +- .../icons/src/icons/Content/NextWeekIcon.tsx | 8 +- .../src/icons/Content/OutlinedFlagIcon.tsx | 8 +- .../icons/src/icons/Content/PasteIcon.tsx | 8 +- packages/icons/src/icons/Content/RedoIcon.tsx | 8 +- .../src/icons/Content/RemoveCircleIcon.tsx | 8 +- .../icons/Content/RemoveCircleOutlineIcon.tsx | 8 +- .../icons/src/icons/Content/RemoveIcon.tsx | 8 +- .../icons/src/icons/Content/ReplyAllIcon.tsx | 8 +- .../icons/src/icons/Content/ReplyIcon.tsx | 8 +- .../icons/Content/ReportGmailerrorredIcon.tsx | 8 +- .../icons/src/icons/Content/ReportIcon.tsx | 8 +- .../icons/src/icons/Content/ReportOffIcon.tsx | 8 +- .../icons/src/icons/Content/SaveAltIcon.tsx | 8 +- packages/icons/src/icons/Content/SaveIcon.tsx | 8 +- .../icons/src/icons/Content/SelectAllIcon.tsx | 8 +- packages/icons/src/icons/Content/SendIcon.tsx | 8 +- packages/icons/src/icons/Content/SortIcon.tsx | 8 +- .../src/icons/Content/TextFormatIcon.tsx | 8 +- .../icons/src/icons/Content/UnarchiveIcon.tsx | 8 +- packages/icons/src/icons/Content/UndoIcon.tsx | 8 +- .../icons/src/icons/Content/WavesIcon.tsx | 8 +- .../icons/src/icons/Content/WeekendIcon.tsx | 8 +- .../src/icons/Content/WhereToVoteIcon.tsx | 8 +- .../icons/src/icons/Custom/CalculatorIcon.tsx | 8 +- .../icons/src/icons/Custom/CapsuleIcon.tsx | 8 +- packages/icons/src/icons/Custom/CheckIcon.tsx | 8 +- .../src/icons/Custom/ChevronDownIcon.tsx | 8 +- .../icons/src/icons/Custom/ChevronUpIcon.tsx | 8 +- .../icons/src/icons/Custom/ClinicIcon.tsx | 8 +- .../icons/src/icons/Custom/DeliveredIcon.tsx | 8 +- .../icons/src/icons/Custom/DropdownIcon.tsx | 8 +- packages/icons/src/icons/Custom/DrugsIcon.tsx | 8 +- .../icons/src/icons/Custom/MenuExpandIcon.tsx | 8 +- .../icons/src/icons/Custom/MenuHideIcon.tsx | 8 +- .../icons/src/icons/Custom/PendingIcon.tsx | 8 +- packages/icons/src/icons/Custom/PillIcon.tsx | 8 +- .../src/icons/Device/AccessAlarmIcon.tsx | 8 +- .../src/icons/Device/AccessAlarmsIcon.tsx | 8 +- .../icons/src/icons/Device/AccessTimeIcon.tsx | 8 +- .../icons/src/icons/Device/AddAlarmIcon.tsx | 8 +- .../src/icons/Device/AddToHomeScreenIcon.tsx | 8 +- .../icons/Device/AirplanemodeActiveIcon.tsx | 8 +- .../icons/Device/AirplanemodeInactiveIcon.tsx | 8 +- .../src/icons/Device/BatteryAlertIcon.tsx | 8 +- .../icons/Device/BatteryChargingFullIcon.tsx | 8 +- .../src/icons/Device/BatteryFullIcon.tsx | 8 +- .../icons/src/icons/Device/BatteryStdIcon.tsx | 8 +- .../src/icons/Device/BatteryUnknownIcon.tsx | 8 +- .../icons/Device/BluetoothConnectedIcon.tsx | 8 +- .../icons/Device/BluetoothDisabledIcon.tsx | 8 +- .../icons/src/icons/Device/BluetoothIcon.tsx | 8 +- .../icons/Device/BluetoothSearchingIcon.tsx | 8 +- .../src/icons/Device/BrightnessAutoIcon.tsx | 8 +- .../src/icons/Device/BrightnessHighIcon.tsx | 8 +- .../src/icons/Device/BrightnessLowIcon.tsx | 8 +- .../src/icons/Device/BrightnessMediumIcon.tsx | 8 +- .../icons/src/icons/Device/DataUsageIcon.tsx | 8 +- .../src/icons/Device/DeveloperModeIcon.tsx | 8 +- .../icons/src/icons/Device/DevicesIcon.tsx | 8 +- packages/icons/src/icons/Device/DvrIcon.tsx | 8 +- packages/icons/src/icons/Device/EqIcon.tsx | 8 +- .../icons/src/icons/Device/GpsFixedIcon.tsx | 8 +- .../src/icons/Device/GpsNotFixedIcon.tsx | 8 +- .../icons/src/icons/Device/GpsOffIcon.tsx | 8 +- .../src/icons/Device/LocationDisabledIcon.tsx | 8 +- .../icons/Device/LocationSearchingIcon.tsx | 8 +- .../src/icons/Device/MobileFriendlyIcon.tsx | 8 +- .../icons/src/icons/Device/MobileOffIcon.tsx | 8 +- .../src/icons/Device/NetworkCellIcon.tsx | 8 +- .../src/icons/Device/NetworkWifiIcon.tsx | 8 +- packages/icons/src/icons/Device/NfcIcon.tsx | 8 +- .../icons/Device/ScreenLockLandscapeIcon.tsx | 8 +- .../icons/Device/ScreenLockPortraitIcon.tsx | 8 +- .../icons/Device/ScreenLockRotationIcon.tsx | 8 +- .../src/icons/Device/ScreenRotationIcon.tsx | 8 +- .../icons/src/icons/Device/SdStorageIcon.tsx | 8 +- .../Device/SettingsSystemDaydreamIcon.tsx | 8 +- .../icons/Device/SignalCellularAltIcon.tsx | 8 +- ...nalCellularConnectedNoInternet4BarIcon.tsx | 8 +- .../icons/Device/SignalCellularNoSimIcon.tsx | 8 +- .../icons/Device/SignalCellularNullIcon.tsx | 8 +- .../icons/Device/SignalCellularOffIcon.tsx | 8 +- .../src/icons/Device/SignalWifiOffIcon.tsx | 8 +- ...rConnectedNoInternet26x24pxRoundedIcon.tsx | 10 +- ...tatusbarNotConnected26x24pxRoundedIcon.tsx | 8 +- ...nalWifiStatusbarNull26x24pxRoundedIcon.tsx | 8 +- .../icons/src/icons/Device/StorageIcon.tsx | 8 +- .../icons/src/icons/Device/ThermostatIcon.tsx | 8 +- packages/icons/src/icons/Device/UsbIcon.tsx | 8 +- .../icons/src/icons/Device/WallpaperIcon.tsx | 8 +- .../icons/src/icons/Device/WidgetsIcon.tsx | 8 +- .../icons/src/icons/Device/WifiLockIcon.tsx | 8 +- .../src/icons/Device/WifiTetheringIcon.tsx | 8 +- .../icons/src/icons/Editor/AddCommentIcon.tsx | 8 +- .../icons/src/icons/Editor/AttachFileIcon.tsx | 8 +- .../src/icons/Editor/AttachMoneyIcon.tsx | 8 +- .../icons/src/icons/Editor/BarChartIcon.tsx | 8 +- .../icons/src/icons/Editor/BorderAllIcon.tsx | 8 +- .../src/icons/Editor/BorderBottomIcon.tsx | 8 +- .../src/icons/Editor/BorderClearIcon.tsx | 8 +- .../src/icons/Editor/BorderColorIcon.tsx | 8 +- .../src/icons/Editor/BorderHorizontalIcon.tsx | 8 +- .../src/icons/Editor/BorderInnerIcon.tsx | 8 +- .../icons/src/icons/Editor/BorderLeftIcon.tsx | 8 +- .../src/icons/Editor/BorderOuterIcon.tsx | 8 +- .../src/icons/Editor/BorderRightIcon.tsx | 8 +- .../src/icons/Editor/BorderStyleIcon.tsx | 8 +- .../icons/src/icons/Editor/BorderTopIcon.tsx | 8 +- .../src/icons/Editor/BorderVerticalIcon.tsx | 8 +- .../src/icons/Editor/BubbleChartIcon.tsx | 8 +- .../icons/src/icons/Editor/DragHandleIcon.tsx | 8 +- .../icons/Editor/FormatAlignCenterIcon.tsx | 8 +- .../icons/Editor/FormatAlignJustifyIcon.tsx | 8 +- .../src/icons/Editor/FormatAlignLeftIcon.tsx | 8 +- .../src/icons/Editor/FormatAlignRightIcon.tsx | 8 +- .../icons/src/icons/Editor/FormatBoldIcon.tsx | 8 +- .../src/icons/Editor/FormatClearIcon.tsx | 8 +- .../src/icons/Editor/FormatColorFillIcon.tsx | 8 +- .../src/icons/Editor/FormatColorResetIcon.tsx | 8 +- .../src/icons/Editor/FormatColorTextIcon.tsx | 8 +- .../icons/Editor/FormatIndentDecreaseIcon.tsx | 8 +- .../icons/Editor/FormatIndentIncreaseIcon.tsx | 8 +- .../icons/Editor/FormatLineSpacingIcon.tsx | 8 +- .../icons/Editor/FormatListBulletedIcon.tsx | 8 +- .../icons/Editor/FormatListNumberedIcon.tsx | 8 +- .../Editor/FormatListNumberedRtlIcon.tsx | 8 +- .../src/icons/Editor/FormatPaintIcon.tsx | 8 +- .../src/icons/Editor/FormatQuoteIcon.tsx | 8 +- .../src/icons/Editor/FormatShapesIcon.tsx | 8 +- .../icons/src/icons/Editor/FormatSizeIcon.tsx | 8 +- .../icons/Editor/FormatStrikethroughIcon.tsx | 8 +- .../Editor/FormatTextdirectionLToRIcon.tsx | 8 +- .../Editor/FormatTextdirectionRToLIcon.tsx | 8 +- .../src/icons/Editor/FormatUnderlinedIcon.tsx | 8 +- .../icons/src/icons/Editor/FunctionsIcon.tsx | 8 +- .../icons/src/icons/Editor/HighlightIcon.tsx | 8 +- .../src/icons/Editor/InsertChartIcon.tsx | 8 +- .../icons/Editor/InsertChartOutlinedIcon.tsx | 8 +- .../src/icons/Editor/InsertCommentIcon.tsx | 8 +- .../src/icons/Editor/InsertDriveFileIcon.tsx | 8 +- .../src/icons/Editor/InsertEmoticonIcon.tsx | 8 +- .../src/icons/Editor/InsertInvitationIcon.tsx | 8 +- .../icons/src/icons/Editor/InsertLinkIcon.tsx | 8 +- .../src/icons/Editor/InsertPhotoIcon.tsx | 8 +- packages/icons/src/icons/Editor/ItalIcon.tsx | 8 +- .../src/icons/Editor/LinearScaleIcon.tsx | 8 +- .../icons/src/icons/Editor/MergeTypeIcon.tsx | 8 +- .../src/icons/Editor/ModeCommentIcon.tsx | 8 +- packages/icons/src/icons/Editor/ModeIcon.tsx | 8 +- .../src/icons/Editor/MonetizationOnIcon.tsx | 8 +- .../src/icons/Editor/MoneyOffCsredIcon.tsx | 8 +- .../icons/src/icons/Editor/MoneyOffIcon.tsx | 8 +- .../src/icons/Editor/MultilineChartIcon.tsx | 8 +- packages/icons/src/icons/Editor/NotesIcon.tsx | 8 +- .../icons/src/icons/Editor/PieChartIcon.tsx | 8 +- .../src/icons/Editor/PieChartOutlineIcon.tsx | 8 +- .../icons/src/icons/Editor/PublishIcon.tsx | 8 +- .../src/icons/Editor/ScatterPlotIcon.tsx | 8 +- packages/icons/src/icons/Editor/ScoreIcon.tsx | 8 +- .../icons/src/icons/Editor/ShortTextIcon.tsx | 8 +- .../icons/src/icons/Editor/ShowChartIcon.tsx | 8 +- .../icons/src/icons/Editor/SpaceBarIcon.tsx | 8 +- .../src/icons/Editor/StrikethroughSIcon.tsx | 8 +- .../icons/src/icons/Editor/TableChartIcon.tsx | 8 +- .../icons/src/icons/Editor/TextFieldsIcon.tsx | 8 +- packages/icons/src/icons/Editor/TitleIcon.tsx | 8 +- .../icons/Editor/VerticalAlignBottomIcon.tsx | 8 +- .../icons/Editor/VerticalAlignCenterIcon.tsx | 8 +- .../src/icons/Editor/VerticalAlignTopIcon.tsx | 8 +- .../icons/src/icons/Editor/WrapTextIcon.tsx | 8 +- .../icons/src/icons/File/AttachmentIcon.tsx | 8 +- .../icons/src/icons/File/CloudCircleIcon.tsx | 8 +- .../icons/src/icons/File/CloudDoneIcon.tsx | 8 +- .../src/icons/File/CloudDownloadIcon.tsx | 8 +- packages/icons/src/icons/File/CloudIcon.tsx | 8 +- .../icons/src/icons/File/CloudOffIcon.tsx | 8 +- .../icons/src/icons/File/CloudQueueIcon.tsx | 8 +- .../icons/src/icons/File/CloudUploadIcon.tsx | 8 +- .../src/icons/File/CreateNewFolderIcon.tsx | 8 +- .../icons/src/icons/File/DownloadDoneIcon.tsx | 8 +- .../icons/src/icons/File/DownloadIcon.tsx | 8 +- packages/icons/src/icons/File/FolderIcon.tsx | 8 +- .../icons/src/icons/File/FolderOpenIcon.tsx | 8 +- .../icons/src/icons/File/FolderSharedIcon.tsx | 8 +- packages/icons/src/icons/File/NoFileIcon.tsx | 6 +- packages/icons/src/icons/File/PrintIcon.tsx | 8 +- packages/icons/src/icons/File/UploadIcon.tsx | 8 +- .../icons/GSDD/Administratio338LineIcon.tsx | 8 +- .../icons/GSDD/Administration110LineIcon.tsx | 8 +- .../icons/GSDD/Administration113LineIcon.tsx | 8 +- .../icons/GSDD/Administration114LineIcon.tsx | 8 +- .../icons/GSDD/Administration115LineIcon.tsx | 8 +- .../icons/GSDD/Administration116LineIcon.tsx | 8 +- .../icons/GSDD/Administration117LineIcon.tsx | 8 +- .../icons/GSDD/Administration118LineIcon.tsx | 8 +- .../icons/GSDD/Administration119LineIcon.tsx | 8 +- .../icons/GSDD/Administration124LineIcon.tsx | 8 +- .../icons/GSDD/Administration161LineIcon.tsx | 8 +- .../icons/GSDD/Administration167LineIcon.tsx | 8 +- .../icons/GSDD/Administration169LineIcon.tsx | 8 +- .../icons/GSDD/Administration170LineIcon.tsx | 8 +- .../icons/GSDD/Administration171LineIcon.tsx | 8 +- .../icons/GSDD/Administration175LineIcon.tsx | 8 +- .../icons/GSDD/Administration188LineIcon.tsx | 8 +- .../icons/GSDD/Administration189LineIcon.tsx | 8 +- .../icons/GSDD/Administration190LineIcon.tsx | 8 +- .../icons/GSDD/Administration193LineIcon.tsx | 8 +- .../icons/GSDD/Administration195LineIcon.tsx | 8 +- .../icons/GSDD/Administration202LineIcon.tsx | 8 +- .../icons/GSDD/Administration203LineIcon.tsx | 8 +- .../icons/GSDD/Administration204LineIcon.tsx | 8 +- .../icons/GSDD/Administration207LineIcon.tsx | 8 +- .../icons/GSDD/Administration211LineIcon.tsx | 8 +- .../icons/GSDD/Administration212LineIcon.tsx | 8 +- .../icons/GSDD/Administration215LineIcon.tsx | 8 +- .../icons/GSDD/Administration222LineIcon.tsx | 8 +- .../icons/GSDD/Administration224LineIcon.tsx | 8 +- .../icons/GSDD/Administration235LineIcon.tsx | 8 +- .../icons/GSDD/Administration241LineIcon.tsx | 8 +- .../icons/GSDD/Administration254LineIcon.tsx | 8 +- .../icons/GSDD/Administration256LineIcon.tsx | 8 +- .../icons/GSDD/Administration265LineIcon.tsx | 8 +- .../icons/GSDD/Administration266LineIcon.tsx | 8 +- .../icons/GSDD/Administration272LineIcon.tsx | 8 +- .../icons/GSDD/Administration283LineIcon.tsx | 8 +- .../icons/GSDD/Administration285LineIcon.tsx | 8 +- .../icons/GSDD/Administration288LineIcon.tsx | 8 +- .../icons/GSDD/Administration298LineIcon.tsx | 8 +- .../icons/GSDD/Administration299LineIcon.tsx | 8 +- .../icons/GSDD/Administration301LineIcon.tsx | 8 +- .../icons/GSDD/Administration307LineIcon.tsx | 8 +- .../icons/GSDD/Administration308LineIcon.tsx | 8 +- .../icons/GSDD/Administration310LineIcon.tsx | 8 +- .../icons/GSDD/Administration311LineIcon.tsx | 8 +- .../icons/GSDD/Administration312LineIcon.tsx | 8 +- .../icons/GSDD/Administration327LineIcon.tsx | 8 +- .../icons/GSDD/Administration328LineIcon.tsx | 8 +- .../icons/GSDD/Administration329LineIcon.tsx | 8 +- .../icons/GSDD/Administration333LineIcon.tsx | 8 +- .../icons/GSDD/Administration334LineIcon.tsx | 8 +- .../icons/GSDD/Administration344LineIcon.tsx | 8 +- .../icons/GSDD/Administration358LineIcon.tsx | 8 +- .../icons/GSDD/Administration359LineIcon.tsx | 8 +- .../icons/GSDD/Administration380LineIcon.tsx | 8 +- .../icons/GSDD/Administration384LineIcon.tsx | 8 +- .../icons/GSDD/Administration387LineIcon.tsx | 8 +- .../icons/GSDD/Administration388LineIcon.tsx | 8 +- .../icons/GSDD/Administration389LineIcon.tsx | 8 +- .../icons/GSDD/Administration391LineIcon.tsx | 8 +- .../icons/GSDD/Administration395LineIcon.tsx | 8 +- .../icons/GSDD/Administration401LineIcon.tsx | 8 +- .../icons/GSDD/Administration403LineIcon.tsx | 8 +- .../icons/GSDD/Administration404LineIcon.tsx | 8 +- .../icons/GSDD/Administration408LineIcon.tsx | 8 +- .../icons/GSDD/Administration411LineIcon.tsx | 8 +- .../icons/GSDD/Administration59LineIcon.tsx | 8 +- .../src/icons/GSDD/Caution243LineIcon.tsx | 8 +- .../src/icons/GSDD/Caution292LineIcon.tsx | 8 +- .../src/icons/GSDD/Caution293LineIcon.tsx | 8 +- .../src/icons/GSDD/Caution396LineIcon.tsx | 8 +- .../src/icons/GSDD/Caution76LineIcon.tsx | 8 +- .../src/icons/GSDD/Caution77LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary104LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary12LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary13LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary14LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary15LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary168LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary16LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary17LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary181LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary182LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary184LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary186LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary18LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary197LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary198LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary199LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary19LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary200LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary201LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary206LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary20LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary21LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary223LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary22LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary230LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary239LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary23LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary244LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary251LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary25LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary263LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary268LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary26LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary275LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary27LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary284LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary28LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary294LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary295LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary29LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary303LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary304LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary305LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary306LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary30LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary313LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary314LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary315LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary316LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary318LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary319LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary321LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary346LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary347LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary349LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary352LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary353LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary354LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary356LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary357LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary360LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary374LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary375LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary378LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary402LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary409LineIcon.tsx | 8 +- .../src/icons/GSDD/Dietary410LineIcon.tsx | 8 +- .../src/icons/GSDD/Dosing132LineIcon.tsx | 8 +- .../src/icons/GSDD/Dosing133LineIcon.tsx | 8 +- .../src/icons/GSDD/Dosing137LineIcon.tsx | 8 +- .../src/icons/GSDD/Dosing138LineIcon.tsx | 8 +- .../src/icons/GSDD/Dosing363LineIcon.tsx | 8 +- .../src/icons/GSDD/Dosing385LineIcon.tsx | 8 +- .../icons/GSDD/DosingFrequency260LineIcon.tsx | 8 +- .../icons/GSDD/DosingFrequency348LineIcon.tsx | 8 +- .../icons/GSDD/DosingFrequency350LineIcon.tsx | 8 +- .../icons/GSDD/DosingFrequency351LineIcon.tsx | 8 +- .../icons/GSDD/DosingFrequency365LineIcon.tsx | 8 +- .../icons/GSDD/DosingFrequency366LineIcon.tsx | 8 +- .../icons/GSDD/DosingFrequency98LineIcon.tsx | 8 +- .../GSDD/GeneralInformation120LineIcon.tsx | 8 +- .../GSDD/GeneralInformation145LineIcon.tsx | 8 +- .../GSDD/GeneralInformation152LineIcon.tsx | 8 +- .../GSDD/GeneralInformation154LineIcon.tsx | 8 +- .../GSDD/GeneralInformation155LineIcon.tsx | 8 +- .../GSDD/GeneralInformation249LineIcon.tsx | 8 +- .../GSDD/GeneralInformation270LineIcon.tsx | 8 +- .../GSDD/GeneralInformation376LineIcon.tsx | 8 +- .../GSDD/GeneralInformation383LineIcon.tsx | 8 +- .../GSDD/GeneralInformation386LineIcon.tsx | 8 +- .../GSDD/GeneralInformation390LineIcon.tsx | 8 +- .../src/icons/GSDD/Generic216LineIcon.tsx | 8 +- .../src/icons/GSDD/Generic82LineIcon.tsx | 8 +- .../src/icons/GSDD/Generic84LineIcon.tsx | 8 +- .../src/icons/GSDD/Generic85LineIcon.tsx | 8 +- .../src/icons/GSDD/Generic87LineIcon.tsx | 8 +- .../GSDD/ReimbursementPricing129LineIcon.tsx | 8 +- .../GSDD/ReimbursementPricing130LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration10LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration1LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration238LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration242LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration258LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration259LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration2LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration393LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration3LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration4LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration5LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration6LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration7LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration8LineIcon.tsx | 8 +- .../GSDD/RouteofAdministration9LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect100621LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1063196LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1206371LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect13561LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect136974LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1395108LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1413197LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect141476LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1425240LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1426134LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect143537LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1441303LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1477468LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1504215LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1507200LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect15222LineIcon.tsx | 8 +- .../src/icons/GSDD/SideEffect1546LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect156360LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1569295LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect158111LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1590372LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1610318LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect162256LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1665250LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1695178LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1709305LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1711130LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1744272LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1747173LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect175041LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1756229LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1761294LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1771217LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1774356LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1791269LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1853203LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1856220LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect186483LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1866102LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1874129LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1875119LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1878472LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1881219LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1886448LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1894410LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1897425LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect1899212LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect191623LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect2053382LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect2179311LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect2277463LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect2300248LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect2410138LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect243794LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect2526348LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect316208LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect318717LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect318827LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect319647LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect319989LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3204158LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3205164LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3206264LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3212455LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect321955LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect322567LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3226393LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3228287LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3229223LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3230221LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3238404LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3251391LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect3254432LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect493184LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect51998LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect529416LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect600167LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect855389LineIcon.tsx | 8 +- .../src/icons/GSDD/SideEffect8570LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect860218LineIcon.tsx | 8 +- .../icons/GSDD/SideEffect918302LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage126LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage162LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage163LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage166LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage177LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage178LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage213LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage214LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage219LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage220LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage225LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage226LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage262LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage264LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage273LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage276LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage282LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage289LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage296LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage297LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage300LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage309LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage320LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage325LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage331LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage332LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage339LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage340LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage341LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage342LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage343LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage362LineIcon.tsx | 8 +- .../src/icons/GSDD/Storage406LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning110LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning173LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning176LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning179LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning180LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning183LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning185LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning191LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning192LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning194LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning196LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning205LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning208LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning217LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning218LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning227LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning231LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning232LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning233LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning234LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning236LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning240LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning246LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning247LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning248LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning250LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning255LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning257LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning261LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning267LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning286LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning287LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning290LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning291LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning302LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning317LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning322LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning323LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning324LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning326LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning330LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning335LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning336LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning337LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning345LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning355LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning361LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning364LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning367LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning368LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning369LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning36LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning370LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning371LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning372LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning373LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning377LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning379LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning37LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning381LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning382LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning38LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning39LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning400LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning405LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning407LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning40LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning412LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning41LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning42LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning43LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning44LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning45LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning46LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning48LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning51LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning52LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning53LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning54LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning55LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning56LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning57LineIcon.tsx | 8 +- .../src/icons/GSDD/Warning60LineIcon.tsx | 8 +- .../WarningLegalinformation156LineIcon.tsx | 8 +- .../WarningLegalinformation157LineIcon.tsx | 8 +- .../WarningLegalinformation160LineIcon.tsx | 8 +- .../WarningLegalinformation165LineIcon.tsx | 8 +- .../WarningLegalinformation209LineIcon.tsx | 8 +- .../WarningLegalinformation281LineIcon.tsx | 8 +- .../WarningLegalinformation47LineIcon.tsx | 8 +- .../WarningLegalinformation64LineIcon.tsx | 8 +- .../WarningLegalinformation65LineIcon.tsx | 8 +- .../WarningLegalinformation66LineIcon.tsx | 8 +- .../WarningLegalinformation67LineIcon.tsx | 8 +- .../WarningLegalinformation68LineIcon.tsx | 8 +- .../WarningLegalinformation70LineIcon.tsx | 8 +- .../WarningLegalinformation71LineIcon.tsx | 8 +- .../WarningLegalinformation72LineIcon.tsx | 8 +- .../src/icons/Hardware/CastConnectedIcon.tsx | 8 +- .../icons/Hardware/CastForEducationIcon.tsx | 8 +- .../icons/src/icons/Hardware/CastIcon.tsx | 8 +- .../icons/src/icons/Hardware/ComputerIcon.tsx | 8 +- .../src/icons/Hardware/DesktopMacIcon.tsx | 8 +- .../src/icons/Hardware/DesktopWindowsIcon.tsx | 8 +- .../src/icons/Hardware/DeveloperBoardIcon.tsx | 8 +- .../src/icons/Hardware/DeviceHubIcon.tsx | 8 +- .../src/icons/Hardware/DeviceUnknownIcon.tsx | 8 +- .../src/icons/Hardware/DevicesOtherIcon.tsx | 8 +- .../icons/src/icons/Hardware/DockIcon.tsx | 8 +- .../icons/src/icons/Hardware/GamepadIcon.tsx | 8 +- .../icons/src/icons/Hardware/HeadsetIcon.tsx | 8 +- .../src/icons/Hardware/HeadsetMicIcon.tsx | 8 +- .../icons/Hardware/KeyboardArrowDownIcon.tsx | 8 +- .../icons/Hardware/KeyboardArrowLeftIcon.tsx | 8 +- .../icons/Hardware/KeyboardArrowRightIcon.tsx | 8 +- .../icons/Hardware/KeyboardArrowUpIcon.tsx | 8 +- .../icons/Hardware/KeyboardBackspaceIcon.tsx | 8 +- .../icons/Hardware/KeyboardCapslockIcon.tsx | 8 +- .../src/icons/Hardware/KeyboardHideIcon.tsx | 8 +- .../icons/src/icons/Hardware/KeyboardIcon.tsx | 8 +- .../src/icons/Hardware/KeyboardReturnIcon.tsx | 8 +- .../src/icons/Hardware/KeyboardTabIcon.tsx | 8 +- .../src/icons/Hardware/KeyboardVoiceIcon.tsx | 8 +- .../icons/Hardware/LaptopChromebookIcon.tsx | 8 +- .../icons/src/icons/Hardware/LaptopIcon.tsx | 8 +- .../src/icons/Hardware/LaptopMacIcon.tsx | 8 +- .../src/icons/Hardware/LaptopWindowsIcon.tsx | 8 +- .../icons/src/icons/Hardware/MemoryIcon.tsx | 8 +- .../icons/src/icons/Hardware/MouseIcon.tsx | 8 +- .../src/icons/Hardware/PhoneAndroidIcon.tsx | 8 +- .../src/icons/Hardware/PhoneIphoneIcon.tsx | 8 +- .../src/icons/Hardware/PhonelinkIcon.tsx | 8 +- .../src/icons/Hardware/PhonelinkOffIcon.tsx | 8 +- .../src/icons/Hardware/PowerInputIcon.tsx | 8 +- .../icons/src/icons/Hardware/RouterIcon.tsx | 8 +- .../icons/src/icons/Hardware/ScannerIcon.tsx | 8 +- .../icons/src/icons/Hardware/SecurityIcon.tsx | 8 +- .../icons/src/icons/Hardware/SimCardIcon.tsx | 8 +- .../src/icons/Hardware/SmartphoneIcon.tsx | 8 +- .../src/icons/Hardware/SpeakerGroupIcon.tsx | 8 +- .../icons/src/icons/Hardware/SpeakerIcon.tsx | 8 +- .../src/icons/Hardware/TabletAndroidIcon.tsx | 8 +- .../icons/src/icons/Hardware/TabletIcon.tsx | 8 +- .../src/icons/Hardware/TabletMacIcon.tsx | 8 +- .../icons/src/icons/Hardware/ToysIcon.tsx | 8 +- packages/icons/src/icons/Hardware/TvIcon.tsx | 8 +- .../src/icons/Hardware/VideogameAssetIcon.tsx | 8 +- .../icons/src/icons/Hardware/WatchIcon.tsx | 8 +- .../icons/src/icons/Image/AddAPhotoIcon.tsx | 8 +- .../src/icons/Image/AddPhotoAlternateIcon.tsx | 8 +- .../icons/src/icons/Image/AddToPhotosIcon.tsx | 8 +- packages/icons/src/icons/Image/AdjustIcon.tsx | 8 +- .../icons/src/icons/Image/AssistantIcon.tsx | 8 +- .../src/icons/Image/AssistantPhotoIcon.tsx | 8 +- .../icons/src/icons/Image/AudiotrackIcon.tsx | 8 +- .../src/icons/Image/BlurCircularIcon.tsx | 8 +- .../icons/src/icons/Image/BlurLinearIcon.tsx | 8 +- .../icons/src/icons/Image/BlurOffIcon.tsx | 8 +- packages/icons/src/icons/Image/BlurOnIcon.tsx | 8 +- .../icons/src/icons/Image/Brightness1Icon.tsx | 8 +- .../icons/src/icons/Image/Brightness2Icon.tsx | 8 +- .../icons/src/icons/Image/Brightness3Icon.tsx | 8 +- .../icons/src/icons/Image/Brightness4Icon.tsx | 8 +- .../icons/src/icons/Image/Brightness5Icon.tsx | 8 +- .../icons/src/icons/Image/Brightness6Icon.tsx | 8 +- .../icons/src/icons/Image/Brightness7Icon.tsx | 8 +- .../icons/src/icons/Image/BrokenImageIcon.tsx | 8 +- packages/icons/src/icons/Image/BrushIcon.tsx | 8 +- .../icons/src/icons/Image/BurstModeIcon.tsx | 8 +- .../icons/src/icons/Image/CameraAltIcon.tsx | 8 +- .../icons/src/icons/Image/CameraFrontIcon.tsx | 8 +- packages/icons/src/icons/Image/CameraIcon.tsx | 8 +- .../icons/src/icons/Image/CameraRearIcon.tsx | 8 +- .../icons/src/icons/Image/CameraRollIcon.tsx | 8 +- .../src/icons/Image/CenterFocusStrongIcon.tsx | 8 +- .../src/icons/Image/CenterFocusWeakIcon.tsx | 8 +- .../icons/Image/CollectionsBookmarkIcon.tsx | 8 +- .../icons/src/icons/Image/CollectionsIcon.tsx | 8 +- .../icons/src/icons/Image/ColorLensIcon.tsx | 8 +- .../icons/src/icons/Image/ColorizeIcon.tsx | 8 +- .../icons/src/icons/Image/CompareIcon.tsx | 8 +- .../icons/Image/ControlPointDuplicateIcon.tsx | 8 +- .../src/icons/Image/ControlPointIcon.tsx | 8 +- .../icons/src/icons/Image/Crop169Icon.tsx | 8 +- packages/icons/src/icons/Image/Crop32Icon.tsx | 8 +- packages/icons/src/icons/Image/Crop54Icon.tsx | 8 +- packages/icons/src/icons/Image/Crop75Icon.tsx | 8 +- .../icons/src/icons/Image/CropDinIcon.tsx | 8 +- .../icons/src/icons/Image/CropFreeIcon.tsx | 8 +- packages/icons/src/icons/Image/CropIcon.tsx | 8 +- .../src/icons/Image/CropLandscapeIcon.tsx | 8 +- .../src/icons/Image/CropOriginalIcon.tsx | 8 +- .../src/icons/Image/CropPortraitIcon.tsx | 8 +- .../icons/src/icons/Image/CropRotateIcon.tsx | 8 +- .../icons/src/icons/Image/CropSquareIcon.tsx | 8 +- packages/icons/src/icons/Image/DehazeIcon.tsx | 8 +- .../icons/src/icons/Image/DetailsIcon.tsx | 8 +- packages/icons/src/icons/Image/EditIcon.tsx | 8 +- .../icons/src/icons/Image/ExposureIcon.tsx | 8 +- .../src/icons/Image/ExposureNeg1Icon.tsx | 8 +- .../src/icons/Image/ExposureNeg2Icon.tsx | 8 +- .../src/icons/Image/ExposurePlus1Icon.tsx | 8 +- .../src/icons/Image/ExposurePlus2Icon.tsx | 8 +- .../src/icons/Image/ExposureZeroIcon.tsx | 8 +- .../icons/src/icons/Image/Filter1Icon.tsx | 8 +- .../icons/src/icons/Image/Filter2Icon.tsx | 8 +- .../icons/src/icons/Image/Filter3Icon.tsx | 8 +- .../icons/src/icons/Image/Filter4Icon.tsx | 8 +- .../icons/src/icons/Image/Filter5Icon.tsx | 8 +- .../icons/src/icons/Image/Filter6Icon.tsx | 8 +- .../icons/src/icons/Image/Filter7Icon.tsx | 8 +- .../icons/src/icons/Image/Filter8Icon.tsx | 8 +- .../icons/src/icons/Image/Filter9Icon.tsx | 8 +- .../icons/src/icons/Image/Filter9PlusIcon.tsx | 8 +- .../icons/src/icons/Image/FilterBAndWIcon.tsx | 8 +- .../src/icons/Image/FilterCenterFocusIcon.tsx | 8 +- .../icons/src/icons/Image/FilterDramaIcon.tsx | 8 +- .../src/icons/Image/FilterFramesIcon.tsx | 8 +- .../icons/src/icons/Image/FilterHdrIcon.tsx | 8 +- packages/icons/src/icons/Image/FilterIcon.tsx | 8 +- .../icons/src/icons/Image/FilterNoneIcon.tsx | 8 +- .../src/icons/Image/FilterTiltShiftIcon.tsx | 8 +- .../src/icons/Image/FilterVintageIcon.tsx | 8 +- packages/icons/src/icons/Image/FlareIcon.tsx | 8 +- .../icons/src/icons/Image/FlashAutoIcon.tsx | 8 +- .../icons/src/icons/Image/FlashOffIcon.tsx | 8 +- .../icons/src/icons/Image/FlashOnIcon.tsx | 8 +- packages/icons/src/icons/Image/FlipIcon.tsx | 8 +- .../icons/src/icons/Image/GradientIcon.tsx | 8 +- packages/icons/src/icons/Image/GrainIcon.tsx | 8 +- .../icons/src/icons/Image/GridOffIcon.tsx | 8 +- packages/icons/src/icons/Image/GridOnIcon.tsx | 8 +- packages/icons/src/icons/Image/HdrOffIcon.tsx | 8 +- packages/icons/src/icons/Image/HdrOnIcon.tsx | 8 +- .../icons/src/icons/Image/HdrStrongIcon.tsx | 8 +- .../icons/src/icons/Image/HdrWeakIcon.tsx | 8 +- .../icons/src/icons/Image/HealingIcon.tsx | 8 +- .../src/icons/Image/ImageAspectRatioIcon.tsx | 8 +- packages/icons/src/icons/Image/ImageIcon.tsx | 8 +- .../icons/src/icons/Image/ImageSearchIcon.tsx | 8 +- packages/icons/src/icons/Image/IsoIcon.tsx | 8 +- .../icons/src/icons/Image/LandscapeIcon.tsx | 8 +- .../icons/src/icons/Image/LeakAddIcon.tsx | 8 +- .../icons/src/icons/Image/LeakRemoveIcon.tsx | 8 +- packages/icons/src/icons/Image/LensIcon.tsx | 8 +- .../src/icons/Image/LinkedCameraIcon.tsx | 8 +- packages/icons/src/icons/Image/Looks3Icon.tsx | 8 +- packages/icons/src/icons/Image/Looks4Icon.tsx | 8 +- packages/icons/src/icons/Image/Looks5Icon.tsx | 8 +- packages/icons/src/icons/Image/Looks6Icon.tsx | 8 +- packages/icons/src/icons/Image/LooksIcon.tsx | 8 +- .../icons/src/icons/Image/LooksOneIcon.tsx | 8 +- .../icons/src/icons/Image/LooksTwoIcon.tsx | 8 +- packages/icons/src/icons/Image/LoupeIcon.tsx | 8 +- .../src/icons/Image/MonochromePhotosIcon.tsx | 8 +- .../src/icons/Image/MovieCreationIcon.tsx | 8 +- .../icons/src/icons/Image/MovieFilterIcon.tsx | 8 +- .../icons/src/icons/Image/MusicNoteIcon.tsx | 8 +- .../icons/src/icons/Image/MusicOffIcon.tsx | 8 +- packages/icons/src/icons/Image/NatureIcon.tsx | 8 +- .../src/icons/Image/NaturePeopleIcon.tsx | 8 +- .../src/icons/Image/NavigateBeforeIcon.tsx | 8 +- .../src/icons/Image/NavigateNextIcon.tsx | 8 +- .../icons/src/icons/Image/PaletteIcon.tsx | 8 +- .../src/icons/Image/PanoramaFishEyeIcon.tsx | 8 +- .../icons/Image/PanoramaHorizontalIcon.tsx | 8 +- .../icons/src/icons/Image/PanoramaIcon.tsx | 8 +- .../src/icons/Image/PanoramaVerticalIcon.tsx | 8 +- .../src/icons/Image/PanoramaWideAngleIcon.tsx | 8 +- .../icons/src/icons/Image/PhotoAlbumIcon.tsx | 8 +- .../icons/src/icons/Image/PhotoCameraIcon.tsx | 8 +- .../icons/src/icons/Image/PhotoFilterIcon.tsx | 8 +- packages/icons/src/icons/Image/PhotoIcon.tsx | 8 +- .../src/icons/Image/PhotoLibraryIcon.tsx | 8 +- .../icons/Image/PhotoSizeSelectActualIcon.tsx | 8 +- .../icons/Image/PhotoSizeSelectLargeIcon.tsx | 8 +- .../icons/Image/PhotoSizeSelectSmallIcon.tsx | 8 +- .../src/icons/Image/PictureAsPdfIcon.tsx | 8 +- .../icons/src/icons/Image/PortraitIcon.tsx | 8 +- .../src/icons/Image/RemoveRedEyeIcon.tsx | 8 +- .../icons/Image/Rotate90DegreesCcwIcon.tsx | 8 +- .../icons/src/icons/Image/RotateLeftIcon.tsx | 8 +- .../icons/src/icons/Image/RotateRightIcon.tsx | 8 +- .../src/icons/Image/ShutterSpeedIcon.tsx | 8 +- .../icons/src/icons/Image/SlideshowIcon.tsx | 8 +- .../icons/src/icons/Image/StraightenIcon.tsx | 8 +- packages/icons/src/icons/Image/StyleIcon.tsx | 8 +- .../src/icons/Image/SwitchCameraIcon.tsx | 8 +- .../icons/src/icons/Image/SwitchVideoIcon.tsx | 8 +- .../icons/src/icons/Image/TagFacesIcon.tsx | 8 +- .../icons/src/icons/Image/TextureIcon.tsx | 8 +- .../icons/src/icons/Image/TimelapseIcon.tsx | 8 +- .../icons/src/icons/Image/Timer10Icon.tsx | 8 +- packages/icons/src/icons/Image/Timer3Icon.tsx | 8 +- packages/icons/src/icons/Image/TimerIcon.tsx | 8 +- .../icons/src/icons/Image/TimerOffIcon.tsx | 8 +- .../icons/src/icons/Image/TonalityIcon.tsx | 8 +- .../icons/src/icons/Image/TransformIcon.tsx | 8 +- packages/icons/src/icons/Image/TuneIcon.tsx | 8 +- .../icons/src/icons/Image/ViewComfyIcon.tsx | 8 +- .../icons/src/icons/Image/ViewCompactIcon.tsx | 8 +- .../icons/src/icons/Image/VignetteIcon.tsx | 8 +- packages/icons/src/icons/Image/WbAutoIcon.tsx | 8 +- .../icons/src/icons/Image/WbCloudyIcon.tsx | 8 +- .../src/icons/Image/WbIncandescentIcon.tsx | 8 +- .../src/icons/Image/WbIridescentIcon.tsx | 8 +- .../icons/src/icons/Image/WbSunnyIcon.tsx | 8 +- .../icons/src/icons/Maps/AddLocationIcon.tsx | 8 +- packages/icons/src/icons/Maps/AtmIcon.tsx | 8 +- .../icons/src/icons/Maps/BeenhereIcon.tsx | 8 +- .../icons/src/icons/Maps/CategoryIcon.tsx | 8 +- .../src/icons/Maps/CompassCalibrationIcon.tsx | 8 +- .../src/icons/Maps/DepartureBoardIcon.tsx | 8 +- .../src/icons/Maps/DirectionsBikeIcon.tsx | 8 +- .../src/icons/Maps/DirectionsBoatIcon.tsx | 8 +- .../src/icons/Maps/DirectionsBusIcon.tsx | 8 +- .../src/icons/Maps/DirectionsCarIcon.tsx | 8 +- .../icons/src/icons/Maps/DirectionsIcon.tsx | 8 +- .../src/icons/Maps/DirectionsRailwayIcon.tsx | 8 +- .../src/icons/Maps/DirectionsRunIcon.tsx | 8 +- .../src/icons/Maps/DirectionsSubwayIcon.tsx | 8 +- .../src/icons/Maps/DirectionsTransitIcon.tsx | 8 +- .../src/icons/Maps/DirectionsWalkIcon.tsx | 8 +- .../src/icons/Maps/EditAttributesIcon.tsx | 8 +- .../icons/src/icons/Maps/EditLocationIcon.tsx | 8 +- .../icons/src/icons/Maps/EvStationIcon.tsx | 8 +- .../icons/src/icons/Maps/FastfoodIcon.tsx | 8 +- packages/icons/src/icons/Maps/FlightIcon.tsx | 8 +- packages/icons/src/icons/Maps/HotelIcon.tsx | 8 +- .../icons/src/icons/Maps/LayersClearIcon.tsx | 8 +- packages/icons/src/icons/Maps/LayersIcon.tsx | 8 +- .../src/icons/Maps/LocalActivityIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalAirportIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalAtmIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalBarIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalCafeIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalCarWashIcon.tsx | 8 +- .../icons/Maps/LocalConvenienceStoreIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalDiningIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalDrinkIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalFloristIcon.tsx | 8 +- .../src/icons/Maps/LocalGasStationIcon.tsx | 8 +- .../src/icons/Maps/LocalGroceryStoreIcon.tsx | 8 +- .../src/icons/Maps/LocalHospitalIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalHotelIcon.tsx | 8 +- .../icons/Maps/LocalLaundryServiceIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalLibraryIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalMallIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalMoviesIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalOfferIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalParkingIcon.tsx | 8 +- .../src/icons/Maps/LocalPharmacyIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalPhoneIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalPizzaIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalPlayIcon.tsx | 8 +- .../src/icons/Maps/LocalPostOfficeIcon.tsx | 8 +- .../src/icons/Maps/LocalPrintshopIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalSeeIcon.tsx | 8 +- .../src/icons/Maps/LocalShippingIcon.tsx | 8 +- .../icons/src/icons/Maps/LocalTaxiIcon.tsx | 8 +- packages/icons/src/icons/Maps/MapIcon.tsx | 8 +- packages/icons/src/icons/Maps/Maps360Icon.tsx | 8 +- packages/icons/src/icons/Maps/MoneyIcon.tsx | 8 +- .../icons/src/icons/Maps/MyLocationIcon.tsx | 8 +- .../icons/src/icons/Maps/NavigationIcon.tsx | 8 +- packages/icons/src/icons/Maps/NearMeIcon.tsx | 8 +- .../src/icons/Maps/NotListedLocationIcon.tsx | 8 +- .../src/icons/Maps/PersonPinCircleIcon.tsx | 8 +- .../icons/src/icons/Maps/PersonPinIcon.tsx | 8 +- packages/icons/src/icons/Maps/PinDropIcon.tsx | 8 +- packages/icons/src/icons/Maps/PlaceIcon.tsx | 8 +- .../icons/src/icons/Maps/RateReviewIcon.tsx | 8 +- .../icons/src/icons/Maps/RestaurantIcon.tsx | 8 +- .../src/icons/Maps/RestaurantMenuIcon.tsx | 8 +- .../icons/src/icons/Maps/SatelliteIcon.tsx | 8 +- .../src/icons/Maps/StoreMallDirectoryIcon.tsx | 8 +- .../icons/src/icons/Maps/StreetviewIcon.tsx | 8 +- packages/icons/src/icons/Maps/SubwayIcon.tsx | 8 +- packages/icons/src/icons/Maps/TerrainIcon.tsx | 8 +- packages/icons/src/icons/Maps/TrafficIcon.tsx | 8 +- packages/icons/src/icons/Maps/TrainIcon.tsx | 8 +- packages/icons/src/icons/Maps/TramIcon.tsx | 8 +- .../icons/Maps/TransferWithinAStationIcon.tsx | 8 +- .../src/icons/Maps/TransitEnterexitIcon.tsx | 8 +- .../icons/src/icons/Maps/TripOriginIcon.tsx | 8 +- .../icons/src/icons/Maps/ZoomOutMapIcon.tsx | 8 +- .../icons/src/icons/Media/AddToQueueIcon.tsx | 8 +- .../icons/src/icons/Media/AirplayIcon.tsx | 8 +- packages/icons/src/icons/Media/AlbumIcon.tsx | 8 +- .../icons/src/icons/Media/ArtTrackIcon.tsx | 8 +- .../src/icons/Media/BrandingWatermarkIcon.tsx | 8 +- .../src/icons/Media/CallToActionIcon.tsx | 8 +- .../src/icons/Media/ClosedCaptionIcon.tsx | 8 +- .../src/icons/Media/ControlCameraIcon.tsx | 8 +- .../icons/src/icons/Media/EqualizerIcon.tsx | 8 +- .../icons/src/icons/Media/ExplicitIcon.tsx | 8 +- .../icons/src/icons/Media/FastForwardIcon.tsx | 8 +- .../icons/src/icons/Media/FastRewindIcon.tsx | 8 +- .../src/icons/Media/FeaturedPlayListIcon.tsx | 8 +- .../src/icons/Media/FeaturedVideoIcon.tsx | 8 +- .../icons/src/icons/Media/FiberDvrIcon.tsx | 8 +- .../src/icons/Media/FiberManualRecordIcon.tsx | 8 +- .../icons/src/icons/Media/FiberNewIcon.tsx | 8 +- .../icons/src/icons/Media/FiberPinIcon.tsx | 8 +- .../src/icons/Media/FiberSmartRecordIcon.tsx | 8 +- .../icons/src/icons/Media/Forward10Icon.tsx | 8 +- .../icons/src/icons/Media/Forward30Icon.tsx | 8 +- .../icons/src/icons/Media/Forward5Icon.tsx | 8 +- packages/icons/src/icons/Media/GamesIcon.tsx | 8 +- packages/icons/src/icons/Media/HdIcon.tsx | 8 +- .../icons/src/icons/Media/HearingIcon.tsx | 8 +- .../icons/src/icons/Media/HighQualityIcon.tsx | 8 +- .../icons/src/icons/Media/LibraryAddIcon.tsx | 8 +- .../src/icons/Media/LibraryBooksIcon.tsx | 8 +- .../Media/LibraryMusic24pxRoundedIcon.tsx | 8 +- packages/icons/src/icons/Media/LoopIcon.tsx | 8 +- .../icons/src/icons/Media/Media4kIcon.tsx | 8 +- .../icons/src/icons/Media/MediaTimerIcon.tsx | 8 +- packages/icons/src/icons/Media/MicIcon.tsx | 8 +- .../icons/src/icons/Media/MicNoneIcon.tsx | 8 +- packages/icons/src/icons/Media/MicOffIcon.tsx | 8 +- .../src/icons/Media/MissedVideoCallIcon.tsx | 8 +- packages/icons/src/icons/Media/MovieIcon.tsx | 8 +- .../icons/src/icons/Media/MusicVideoIcon.tsx | 8 +- .../icons/src/icons/Media/NewReleasesIcon.tsx | 8 +- .../src/icons/Media/NotInterestedIcon.tsx | 8 +- packages/icons/src/icons/Media/NoteIcon.tsx | 8 +- .../src/icons/Media/PauseCircleFilledIcon.tsx | 8 +- .../icons/Media/PauseCircleOutlineIcon.tsx | 8 +- packages/icons/src/icons/Media/PauseIcon.tsx | 8 +- .../icons/src/icons/Media/PlayArrowIcon.tsx | 8 +- .../src/icons/Media/PlayCircleFilledIcon.tsx | 8 +- .../icons/Media/PlayCircleFilledWhiteIcon.tsx | 8 +- .../src/icons/Media/PlayCircleOutlineIcon.tsx | 8 +- .../src/icons/Media/PlaylistAddCheckIcon.tsx | 8 +- .../icons/src/icons/Media/PlaylistAddIcon.tsx | 8 +- .../src/icons/Media/PlaylistPlayIcon.tsx | 8 +- packages/icons/src/icons/Media/QueueIcon.tsx | 8 +- .../icons/src/icons/Media/QueueMusicIcon.tsx | 8 +- .../src/icons/Media/QueuePlayNextIcon.tsx | 8 +- packages/icons/src/icons/Media/RadioIcon.tsx | 8 +- .../src/icons/Media/RecentActorsIcon.tsx | 8 +- .../src/icons/Media/RemoveFromQueueIcon.tsx | 8 +- packages/icons/src/icons/Media/RepeatIcon.tsx | 8 +- .../icons/src/icons/Media/RepeatOneIcon.tsx | 8 +- .../icons/src/icons/Media/Replay10Icon.tsx | 8 +- .../icons/src/icons/Media/Replay30Icon.tsx | 8 +- .../icons/src/icons/Media/Replay5Icon.tsx | 8 +- packages/icons/src/icons/Media/ReplayIcon.tsx | 8 +- .../icons/src/icons/Media/ShuffleIcon.tsx | 8 +- .../icons/src/icons/Media/SkipNextIcon.tsx | 8 +- .../src/icons/Media/SkipPreviousIcon.tsx | 8 +- .../src/icons/Media/SlowMotionVideoIcon.tsx | 8 +- packages/icons/src/icons/Media/SnoozeIcon.tsx | 8 +- .../icons/src/icons/Media/SortByAlphaIcon.tsx | 8 +- packages/icons/src/icons/Media/StopIcon.tsx | 8 +- .../src/icons/Media/SubscriptionsIcon.tsx | 8 +- .../icons/src/icons/Media/SubtitlesIcon.tsx | 8 +- .../src/icons/Media/SurroundSoundIcon.tsx | 8 +- .../icons/src/icons/Media/VideoCallIcon.tsx | 8 +- .../icons/src/icons/Media/VideoLabelIcon.tsx | 8 +- .../src/icons/Media/VideoLibraryIcon.tsx | 8 +- .../icons/src/icons/Media/VideocamIcon.tsx | 8 +- .../icons/src/icons/Media/VideocamOffIcon.tsx | 8 +- .../icons/src/icons/Media/VolumeDownIcon.tsx | 8 +- .../icons/src/icons/Media/VolumeMuteIcon.tsx | 8 +- .../icons/src/icons/Media/VolumeOffIcon.tsx | 8 +- .../icons/src/icons/Media/VolumeUpIcon.tsx | 8 +- .../icons/src/icons/Media/WebAssetIcon.tsx | 8 +- packages/icons/src/icons/Media/WebIcon.tsx | 8 +- .../icons/src/icons/Navigation/AppsIcon.tsx | 8 +- .../src/icons/Navigation/ArrowBackIcon.tsx | 8 +- .../src/icons/Navigation/ArrowBackIosIcon.tsx | 8 +- .../icons/Navigation/ArrowDownwardIcon.tsx | 8 +- .../Navigation/ArrowDropDownCircleIcon.tsx | 8 +- .../icons/Navigation/ArrowDropDownIcon.tsx | 8 +- .../src/icons/Navigation/ArrowDropUpIcon.tsx | 8 +- .../src/icons/Navigation/ArrowForwardIcon.tsx | 8 +- .../icons/Navigation/ArrowForwardIosIcon.tsx | 8 +- .../src/icons/Navigation/ArrowLeftIcon.tsx | 8 +- .../src/icons/Navigation/ArrowRightIcon.tsx | 8 +- .../src/icons/Navigation/ArrowUpwardIcon.tsx | 8 +- .../icons/src/icons/Navigation/CancelIcon.tsx | 8 +- .../icons/Navigation/CancelOutlinedIcon.tsx | 8 +- .../icons/Navigation/CheckMaterialIcon.tsx | 8 +- .../src/icons/Navigation/ChevronLeftIcon.tsx | 8 +- .../src/icons/Navigation/ChevronRightIcon.tsx | 8 +- .../icons/src/icons/Navigation/CloseIcon.tsx | 8 +- .../src/icons/Navigation/ExpandLessIcon.tsx | 8 +- .../src/icons/Navigation/ExpandMoreIcon.tsx | 8 +- .../src/icons/Navigation/FirstPageIcon.tsx | 8 +- .../icons/Navigation/FullscreenExitIcon.tsx | 8 +- .../src/icons/Navigation/FullscreenIcon.tsx | 8 +- .../src/icons/Navigation/LastPageIcon.tsx | 8 +- .../icons/src/icons/Navigation/MenuIcon.tsx | 8 +- .../src/icons/Navigation/MoreHorizIcon.tsx | 8 +- .../src/icons/Navigation/MoreVertIcon.tsx | 8 +- .../src/icons/Navigation/RefreshIcon.tsx | 8 +- .../Navigation/SubdirectoryArrowLeftIcon.tsx | 8 +- .../Navigation/SubdirectoryArrowRightIcon.tsx | 8 +- .../src/icons/Navigation/UnfoldLessIcon.tsx | 8 +- .../src/icons/Navigation/UnfoldMoreIcon.tsx | 8 +- .../icons/src/icons/Notification/AdbIcon.tsx | 8 +- .../AirlineSeatFlatAngledIcon.tsx | 8 +- .../Notification/AirlineSeatFlatIcon.tsx | 8 +- .../AirlineSeatIndividualSuiteIcon.tsx | 8 +- .../AirlineSeatLegroomExtraIcon.tsx | 8 +- .../AirlineSeatLegroomNormalIcon.tsx | 8 +- .../AirlineSeatLegroomReducedIcon.tsx | 8 +- .../AirlineSeatReclineExtraIcon.tsx | 8 +- .../AirlineSeatReclineNormalIcon.tsx | 8 +- .../icons/Notification/BluetoothAudioIcon.tsx | 8 +- .../Notification/ConfirmationNumberIcon.tsx | 8 +- .../src/icons/Notification/DiscFullIcon.tsx | 8 +- .../icons/Notification/DoDisturbAltIcon.tsx | 8 +- .../src/icons/Notification/DoDisturbIcon.tsx | 8 +- .../icons/Notification/DoDisturbOffIcon.tsx | 8 +- .../icons/Notification/DoDisturbOnIcon.tsx | 8 +- .../src/icons/Notification/DriveEtaIcon.tsx | 8 +- .../Notification/EnhancedEncryptionIcon.tsx | 8 +- .../icons/Notification/EventAvailableIcon.tsx | 8 +- .../src/icons/Notification/EventBusyIcon.tsx | 8 +- .../src/icons/Notification/EventNoteIcon.tsx | 8 +- .../icons/Notification/FolderSpecialIcon.tsx | 8 +- .../src/icons/Notification/LiveTvIcon.tsx | 8 +- .../icons/src/icons/Notification/MmsIcon.tsx | 8 +- .../icons/src/icons/Notification/MoreIcon.tsx | 8 +- .../icons/Notification/NetworkCheckIcon.tsx | 8 +- .../icons/Notification/NetworkLockedIcon.tsx | 8 +- .../NoEncryptionGmailerrorredIcon.tsx | 8 +- .../icons/Notification/NoEncryptionIcon.tsx | 8 +- .../icons/Notification/OndemandVideoIcon.tsx | 8 +- .../icons/Notification/PersonalVideoIcon.tsx | 8 +- .../PhoneBluetoothSpeakerIcon.tsx | 8 +- .../icons/Notification/PhoneCallbackIcon.tsx | 8 +- .../icons/Notification/PhoneForwardedIcon.tsx | 8 +- .../icons/Notification/PhoneInTalkIcon.tsx | 8 +- .../icons/Notification/PhoneLockedIcon.tsx | 8 +- .../icons/Notification/PhoneMissedIcon.tsx | 8 +- .../icons/Notification/PhonePausedIcon.tsx | 8 +- .../src/icons/Notification/PowerIcon.tsx | 8 +- .../src/icons/Notification/PowerOffIcon.tsx | 8 +- .../icons/Notification/PriorityHighIcon.tsx | 8 +- .../icons/Notification/SdCardAlertIcon.tsx | 8 +- .../src/icons/Notification/SdCardIcon.tsx | 8 +- .../src/icons/Notification/SmsFailedIcon.tsx | 8 +- .../icons/src/icons/Notification/SmsIcon.tsx | 8 +- .../icons/Notification/SyncDisabledIcon.tsx | 8 +- .../icons/src/icons/Notification/SyncIcon.tsx | 8 +- .../icons/Notification/SyncProblemIcon.tsx | 8 +- .../icons/Notification/SystemUpdateIcon.tsx | 8 +- .../src/icons/Notification/TapAndPlayIcon.tsx | 8 +- .../icons/Notification/TimeToLeaveIcon.tsx | 8 +- .../src/icons/Notification/TvOffIcon.tsx | 8 +- .../src/icons/Notification/VibrationIcon.tsx | 8 +- .../src/icons/Notification/VoiceChatIcon.tsx | 8 +- .../src/icons/Notification/VpnLockIcon.tsx | 8 +- .../icons/src/icons/Notification/WcIcon.tsx | 8 +- .../icons/src/icons/Notification/WifiIcon.tsx | 8 +- .../src/icons/Notification/WifiOffIcon.tsx | 8 +- .../icons/src/icons/Places/AcUnitIcon.tsx | 8 +- .../src/icons/Places/AirportShuttleIcon.tsx | 8 +- .../src/icons/Places/AllInclusiveIcon.tsx | 8 +- .../src/icons/Places/BeachAccessIcon.tsx | 8 +- .../src/icons/Places/BusinessCenterIcon.tsx | 8 +- .../icons/src/icons/Places/CasinoIcon.tsx | 8 +- .../icons/src/icons/Places/ChildCareIcon.tsx | 8 +- .../src/icons/Places/ChildFriendlyIcon.tsx | 8 +- .../src/icons/Places/FitnessCenterIcon.tsx | 8 +- .../src/icons/Places/FreeBreakfastIcon.tsx | 8 +- .../icons/src/icons/Places/GolfCourseIcon.tsx | 8 +- .../icons/src/icons/Places/HotTubIcon.tsx | 8 +- .../icons/src/icons/Places/KitchenIcon.tsx | 8 +- .../src/icons/Places/MeetingRoomIcon.tsx | 8 +- .../src/icons/Places/NoMeetingRoomIcon.tsx | 8 +- packages/icons/src/icons/Places/PoolIcon.tsx | 8 +- .../src/icons/Places/RoomServiceIcon.tsx | 8 +- .../icons/src/icons/Places/RvHookupIcon.tsx | 8 +- .../icons/src/icons/Places/SmokeFreeIcon.tsx | 8 +- .../src/icons/Places/SmokingRoomsIcon.tsx | 8 +- packages/icons/src/icons/Places/SpaIcon.tsx | 8 +- packages/icons/src/icons/Social/CakeIcon.tsx | 8 +- .../icons/src/icons/Social/DomainIcon.tsx | 8 +- .../icons/src/icons/Social/GroupAddIcon.tsx | 8 +- packages/icons/src/icons/Social/GroupIcon.tsx | 8 +- .../src/icons/Social/LocationCityIcon.tsx | 8 +- .../icons/src/icons/Social/MoodBadIcon.tsx | 8 +- packages/icons/src/icons/Social/MoodIcon.tsx | 8 +- .../icons/Social/NotificationsActiveIcon.tsx | 8 +- .../src/icons/Social/NotificationsIcon.tsx | 8 +- .../icons/Social/NotificationsNoneIcon.tsx | 8 +- .../src/icons/Social/NotificationsOffIcon.tsx | 8 +- .../icons/Social/NotificationsPausedIcon.tsx | 8 +- packages/icons/src/icons/Social/PagesIcon.tsx | 8 +- .../icons/src/icons/Social/PartyModeIcon.tsx | 8 +- .../icons/src/icons/Social/PeopleIcon.tsx | 8 +- .../src/icons/Social/PeopleOutlineIcon.tsx | 8 +- .../icons/src/icons/Social/PersonAddIcon.tsx | 8 +- .../icons/src/icons/Social/PersonIcon.tsx | 8 +- .../src/icons/Social/PersonOutlineIcon.tsx | 8 +- .../icons/src/icons/Social/PlusOneIcon.tsx | 8 +- packages/icons/src/icons/Social/PollIcon.tsx | 8 +- .../icons/src/icons/Social/PublicIcon.tsx | 8 +- .../icons/src/icons/Social/SchoolIcon.tsx | 8 +- .../Social/SentimentDissatisfiedIcon.tsx | 8 +- .../src/icons/Social/SentimentNeutralIcon.tsx | 8 +- .../icons/Social/SentimentSatisfiedIcon.tsx | 8 +- .../Social/SentimentVeryDissatisfiedIcon.tsx | 8 +- .../Social/SentimentVerySatisfiedIcon.tsx | 8 +- packages/icons/src/icons/Social/ShareIcon.tsx | 8 +- .../src/icons/Social/ThumbDownAltIcon.tsx | 8 +- .../icons/src/icons/Social/ThumbUpAltIcon.tsx | 8 +- .../icons/src/icons/Social/WhatshotIcon.tsx | 8 +- .../icons/src/icons/Toggle/CheckBoxIcon.tsx | 8 +- .../icons/Toggle/CheckBoxOutlineBlankIcon.tsx | 8 +- .../src/icons/Toggle/CheckBoxOutlinedIcon.tsx | 8 +- .../Toggle/IndeterminateCheckBoxIcon.tsx | 8 +- .../icons/Toggle/RadioButtonCheckedIcon.tsx | 8 +- .../icons/Toggle/RadioButtonUncheckedIcon.tsx | 8 +- .../icons/src/icons/Toggle/StarBorderIcon.tsx | 8 +- .../icons/Toggle/StarBorderPurple500Icon.tsx | 8 +- .../icons/src/icons/Toggle/StarHalfIcon.tsx | 8 +- packages/icons/src/icons/Toggle/StarIcon.tsx | 8 +- .../src/icons/Toggle/StarOutlineIcon.tsx | 8 +- .../src/icons/Toggle/StarPurple500Icon.tsx | 8 +- .../icons/src/icons/Toggle/ToggleOffIcon.tsx | 8 +- .../icons/src/icons/Toggle/ToggleOnIcon.tsx | 8 +- packages/layout/package.json | 14 +- .../src/components/Header/Header.stories.tsx | 8 +- .../src/components/Header/Header.styled.tsx | 2 +- .../layout/src/components/Header/Header.tsx | 4 +- .../layout/src/components/Header/Nav/Nav.tsx | 6 +- .../Header/NavItem/NavItem.styled.tsx | 4 +- .../__snapshots__/NavItem.test.tsx.snap | 40 +- .../layout/src/components/Header/types.ts | 7 +- .../MedlySidenavHeader/MedlySidenavHeader.tsx | 6 +- .../MedlySidenavHeader.test.tsx.snap | 26 - .../components/SideNav/NavGroup/NavGroup.tsx | 4 +- .../SideNav/NavItem/NavItem.styled.tsx | 24 +- .../components/SideNav/NavItem/NavItem.tsx | 4 +- .../__snapshots__/NavItem.test.tsx.snap | 65 +- .../src/components/SideNav/NavItem/types.ts | 5 +- .../__snapshots__/NavList.test.tsx.snap | 2 - .../components/SideNav/SideNav.stories.tsx | 10 +- .../layout/src/components/SideNav/SideNav.tsx | 6 +- .../SideNav/ToggleSwitch/ToggleSwitch.tsx | 4 +- .../__snapshots__/ToggleSwitch.test.tsx.snap | 264 +- .../__snapshots__/SideNav.test.tsx.snap | 414 +- .../layout/src/components/SideNav/types.ts | 5 +- .../__snapshots__/SidePanel.test.tsx.snap | 4 +- packages/loaders/package.json | 10 +- .../src/LoaderContainer/LoaderContainer.tsx | 4 +- packages/loaders/src/Loaders.stories.tsx | 6 +- packages/loaders/src/loaders/CircleLoader.tsx | 8 +- .../src/loaders/ConcentricCircleLoader.tsx | 8 +- .../src/loaders/DotsBouncingLoader.tsx | 8 +- packages/loaders/src/loaders/DotsLoader.tsx | 8 +- packages/markdown/package.json | 10 +- .../components/MarkdownContent/CodeBlock.tsx | 8 +- .../MarkdownContent/MarkdownContent.tsx | 10 +- packages/utils/package.json | 8 +- .../InjectClassName/InjectClassName.tsx | 4 +- .../src/hooks/useAxios/useAxios.test.tsx | 4 +- packages/utils/src/hooks/useAxios/useAxios.ts | 2 +- .../hooks/useKeyPress/useKeyPress.test.tsx | 4 +- .../useOuterClickNotifier.test.tsx | 4 +- .../hooks/useStorage/useStorage.stories.mdx | 5 +- .../src/hooks/useStorage/useStorage.test.tsx | 8 +- .../__snapshots__/getFontStyle.test.tsx.snap | 12 - .../src/style/getFontStyle/getFontStyle.ts | 3 +- packages/utils/src/style/media/media.ts | 4 +- .../utils/src/types/WithStyle/WithStyle.ts | 4 +- test-utils.tsx | 6 +- types/react.d.ts | 3 + types/{styled-components.d.ts => styled.ts} | 2 +- yarn.lock | 220 +- 1764 files changed, 24314 insertions(+), 36720 deletions(-) create mode 100644 types/react.d.ts rename types/{styled-components.d.ts => styled.ts} (73%) diff --git a/.storybook/main.js b/.storybook/main.js index 23e0b0f8b..2e98a1c8a 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -58,13 +58,6 @@ module.exports = { } } }); - config.module.rules.push({ - test: /\.tsx$/, - include: [packages], - exclude: [/node_modules/, /\.test.tsx?$/, /__snapshots__/, /__tests__/, /dist/, /icons/], - loader: 'stylelint-custom-processor-loader' - }); - const fileLoaderRule = config.module.rules.find(rule => rule.test.test('.svg')); if (fileLoaderRule) fileLoaderRule.exclude = pathToInlineSvg; diff --git a/.vscode/settings.json b/.vscode/settings.json index 96ffba82e..d2bc4a69e 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,9 +2,9 @@ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { - "source.fixAll.eslint": true, - "source.organizeImports": true, - "source.fixAll.stylelint": true + "source.fixAll.eslint": "explicit", + "source.organizeImports": "explicit", + "source.fixAll.stylelint": "explicit" }, "eslint.validate": ["html", "javascript", "javascriptreact", "typescript", "typescriptreact"], "cSpell.words": ["Medly"], diff --git a/README.md b/README.md index b877fd5cd..1c0e66a1a 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ To view a detailed description of the components in storybook click [here](https - 📝 [Forms](#forms) - ℹ [Icons](#icons) - ⧉ [Layout](#layout) - - 🌀 [Loaders](#loaders) + - 🌀 [Loaders](#loaders) - 📄 [Markdown](#markdown) - 🏞 [Theme](#theme) - 🛠 [Utils](#utils) @@ -66,7 +66,7 @@ Replace the `App.tsx` content with the following: import React from 'react'; import { Button } from '@medly-components/core'; -const App: React.FC = () => ; +const App = () => ; export default App; ``` @@ -137,7 +137,7 @@ This project exists thanks to all the people who contribute. ## NPM Scripts -Please find below a list of commands to execute various tasks: +Please find below a list of commands to execute various tasks: - `yarn build` to build components - `yarn commit` to commit with conventional-commit approach diff --git a/docs/Colors/Colors.stories.tsx b/docs/Colors/Colors.stories.tsx index 9052e7c6b..4b773bacf 100644 --- a/docs/Colors/Colors.stories.tsx +++ b/docs/Colors/Colors.stories.tsx @@ -20,7 +20,7 @@ const Grid = styled.div` grid-template-columns: repeat(3, 1fr); `; -const Color: React.FC<{ hex: string }> = styled.div<{ hex: string }>` +const Color: React.FCC<{ hex: string }> = styled.div<{ hex: string }>` height: 40px; background-color: ${props => props.hex}; padding: 0 20px; @@ -30,7 +30,7 @@ const Color: React.FC<{ hex: string }> = styled.div<{ hex: string }>` color: ${props => contrastingColor(props.hex)}; `; -const ColorLine: React.FC<{ shade: number | string; hex: string }> = ({ shade, hex }) => ( +const ColorLine: React.FCC<{ shade: number | string; hex: string }> = ({ shade, hex }) => ( {shade} diff --git a/docs/Typography/Typography.stories.tsx b/docs/Typography/Typography.stories.tsx index 656a80d0a..9b2b0a024 100644 --- a/docs/Typography/Typography.stories.tsx +++ b/docs/Typography/Typography.stories.tsx @@ -11,21 +11,21 @@ export const VerticalAlign = styled.div` } `; -export const FontVariantsThemeInterface: React.FC = () => null; +export const FontVariantsThemeInterface: React.FCC = () => null; FontVariantsThemeInterface.defaultProps = { ...defaultTheme.font.variants }; -export const FontWeightThemeInterface: React.FC = () => null; +export const FontWeightThemeInterface: React.FCC = () => null; FontWeightThemeInterface.defaultProps = { ...defaultTheme.font.weights }; -export const FontThemeInterface: React.FC = () => null; +export const FontThemeInterface: React.FCC = () => null; FontThemeInterface.defaultProps = { ...defaultTheme.font }; -export const FontFaceThemeInterface: React.FC = () => null; +export const FontFaceThemeInterface: React.FCC = () => null; FontFaceThemeInterface.defaultProps = { ...defaultTheme.font.faces[0] }; diff --git a/package.json b/package.json index 9c5f51bee..82b972800 100644 --- a/package.json +++ b/package.json @@ -123,10 +123,9 @@ "@testing-library/dom": "^7.5.6", "@testing-library/react": "12.1.2", "@testing-library/user-event": "^12.0.2", - "@types/react": "^17.0.30", - "@types/react-dom": "^17.0.9", + "@types/react": "^18.3.1", + "@types/react-dom": "^18.3.0", "@types/storybook__addon-info": "5.2.1", - "@types/styled-components": "^5.1.0", "axios": "^0.21.1", "axios-mock-adapter": "^1.19.0", "babel-loader": "^8.1.0", @@ -139,16 +138,16 @@ "fork-ts-checker-webpack-plugin": "^4.1.1", "husky": "^4.2.3", "jest": "26.1.0", - "jest-styled-components": "^7.0.0", + "jest-styled-components": "^7.2.0", "lerna": "^6.1.0", "npm-run-all": "4.1.5", - "react": "^17.0.2", + "react": "^18.3.1", "react-docgen-typescript-loader": "3.6.0", - "react-dom": "^17.0.2", + "react-dom": "^18.3.1", "rimraf": "^3.0.1", "storybook-addon-designs": "^5.2.1", "storybook-addon-jsx": "7.1.14", - "styled-components": "^5.1.0", + "styled-components": "^6.1.9", "stylelint-custom-processor-loader": "^0.6.0", "swr": "^2.1.1", "thread-loader": "^2.1.3", diff --git a/packages/core/package.json b/packages/core/package.json index 6d4ad6f9f..6e05a81b7 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@medly-components/core", - "version": "7.1.0", + "version": "8.0.0", "sideEffects": false, "main": "dist/cjs/index.js", "module": "dist/es/index.js", @@ -24,15 +24,15 @@ "watch": "yarn run build -w" }, "peerDependencies": { - "react": "16.x || 17.x", - "react-dom": "16.x || 17.x", - "styled-components": "^5.1.0" + "react": "18.x", + "react-dom": "18.x", + "styled-components": "^6.1.9" }, "dependencies": { - "@medly-components/icons": "1.13.5", - "@medly-components/loaders": "1.6.19", + "@medly-components/icons": "2.0.0", + "@medly-components/loaders": "2.0.0", "@medly-components/theme": "6.0.0", - "@medly-components/utils": "3.2.2", + "@medly-components/utils": "4.0.0", "date-fns": "^2.16.1", "effector": "^21.8.12", "effector-react": "^21.3.2", diff --git a/packages/core/src/components/Accordion/Accordion.tsx b/packages/core/src/components/Accordion/Accordion.tsx index 577996e75..4b878f5d4 100644 --- a/packages/core/src/components/Accordion/Accordion.tsx +++ b/packages/core/src/components/Accordion/Accordion.tsx @@ -1,13 +1,12 @@ import { WithStyle } from '@medly-components/utils'; -import type { FC } from 'react'; -import { memo, useEffect, useState } from 'react'; +import { FCC, memo, useEffect, useState } from 'react'; import { Section } from './Accordion.styled'; import { AccordionContext } from './AccordionContext'; import Content from './Content'; import Header from './Header'; import { AccordionProps, StaticProps } from './types'; -const Component: FC = memo(({ active, defaultActive, onChange, ...restProps }) => { +const Component: FCC = memo(({ active, defaultActive, onChange, ...restProps }) => { const activeState = useState(false); useEffect(() => { @@ -26,7 +25,7 @@ Component.defaultProps = { }; Component.displayName = 'Accordion'; -export const Accordion: FC & StaticProps & WithStyle = Object.assign(Component, { +export const Accordion: FCC & StaticProps & WithStyle = Object.assign(Component, { Header, Content, Context: AccordionContext, diff --git a/packages/core/src/components/Accordion/Content/Content.tsx b/packages/core/src/components/Accordion/Content/Content.tsx index 354b428b7..eda8a35af 100644 --- a/packages/core/src/components/Accordion/Content/Content.tsx +++ b/packages/core/src/components/Accordion/Content/Content.tsx @@ -1,14 +1,14 @@ import { WithStyle } from '@medly-components/utils'; -import type { FC } from 'react'; +import type { FCC } from 'react'; import { memo, useContext } from 'react'; import { AccordionContext } from '../AccordionContext'; import { ContentProps } from '../types'; import { Wrapper } from './Content.styled'; -const Component: FC = memo(props => { +const Component: FCC = memo(props => { const [isActive] = useContext(AccordionContext); return ; }); Component.displayName = 'Content'; -export const Content: FC & WithStyle = Object.assign(Component, { Style: Wrapper }); +export const Content: FCC & WithStyle = Object.assign(Component, { Style: Wrapper }); diff --git a/packages/core/src/components/Accordion/Header/Header.tsx b/packages/core/src/components/Accordion/Header/Header.tsx index ae226d61b..217aa9243 100644 --- a/packages/core/src/components/Accordion/Header/Header.tsx +++ b/packages/core/src/components/Accordion/Header/Header.tsx @@ -1,12 +1,12 @@ import { ExpandMoreIcon } from '@medly-components/icons'; import { WithStyle } from '@medly-components/utils'; -import type { FC } from 'react'; +import type { FCC } from 'react'; import { memo, useCallback, useContext } from 'react'; import { AccordionContext } from '../AccordionContext'; import { HeaderProps } from '../types'; import { Wrapper } from './Header.styled'; -const Component: FC = memo(({ children, iconColor, ...restProps }) => { +const Component: FCC = memo(({ children, iconColor, ...restProps }) => { const [isActive, setActiveState] = useContext(AccordionContext), handleClick = useCallback(() => setActiveState(val => !val), []); @@ -19,4 +19,4 @@ const Component: FC = memo(({ children, iconColor, ...restProps }) }); Component.displayName = 'Header'; -export const Header: FC & WithStyle = Object.assign(Component, { Style: Wrapper }); +export const Header: FCC & WithStyle = Object.assign(Component, { Style: Wrapper }); diff --git a/packages/core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/packages/core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap index 9a6c53f76..9bbecd020 100644 --- a/packages/core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +++ b/packages/core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap @@ -2,18 +2,12 @@ exports[`Accordion component should render properly 1`] = ` .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; } .c4 { overflow: hidden; - -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out; max-height: 0; opacity: 0; @@ -24,14 +18,12 @@ exports[`Accordion component should render properly 1`] = ` .c3 { overflow: visible; font-size: 2.4rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c3 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -40,12 +32,8 @@ exports[`Accordion component should render properly 1`] = ` cursor: pointer; position: relative; overflow: hidden; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; font-family: inherit; - -webkit-text-decoration: none; text-decoration: none; outline: none; border: 0; @@ -55,7 +43,6 @@ exports[`Accordion component should render properly 1`] = ` border-top-right-radius: 0.8rem; border-bottom-left-radius: 0.8rem; border-bottom-right-radius: 0.8rem; - -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out; } @@ -63,11 +50,7 @@ exports[`Accordion component should render properly 1`] = ` position: absolute; right: 2rem; top: 50%; - -webkit-transform: translateY(-50%) rotate(0deg); - -ms-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); - -webkit-transition: -webkit-transform 200ms ease-out; - -webkit-transition: transform 200ms ease-out; transition: transform 200ms ease-out; } diff --git a/packages/core/src/components/Accordion/types.ts b/packages/core/src/components/Accordion/types.ts index 99bd2376d..69c5b2a60 100644 --- a/packages/core/src/components/Accordion/types.ts +++ b/packages/core/src/components/Accordion/types.ts @@ -1,9 +1,9 @@ import { HTMLProps, WithStyle } from '@medly-components/utils'; -import type { Context, Dispatch, FC, SetStateAction } from 'react'; +import type { Context, Dispatch, FCC, SetStateAction } from 'react'; export type StaticProps = { - Header: FC & WithStyle; - Content: FC & WithStyle; + Header: FCC & WithStyle; + Content: FCC & WithStyle; Context: Context; }; diff --git a/packages/core/src/components/Avatar/Avatar.stories.tsx b/packages/core/src/components/Avatar/Avatar.stories.tsx index a9146d7a8..95a022504 100644 --- a/packages/core/src/components/Avatar/Avatar.stories.tsx +++ b/packages/core/src/components/Avatar/Avatar.stories.tsx @@ -1,11 +1,11 @@ import { AvatarTheme, defaultTheme } from '@medly-components/theme'; +import type { FCC } from 'react'; import styled from 'styled-components'; import { AvatarProps } from './types'; -import type { FC } from 'react'; export const sizes: Required['size'][] = ['S', 'M', 'L']; -export const ThemeInterface: FC = () => null; +export const ThemeInterface: FCC = () => null; ThemeInterface.defaultProps = { ...defaultTheme.avatar }; diff --git a/packages/core/src/components/Avatar/Avatar.styled.tsx b/packages/core/src/components/Avatar/Avatar.styled.tsx index 9903a9d39..c88a6c7b6 100755 --- a/packages/core/src/components/Avatar/Avatar.styled.tsx +++ b/packages/core/src/components/Avatar/Avatar.styled.tsx @@ -58,21 +58,13 @@ const getTextStyle = ({ theme, ...props }: StyledProps & WithThemeProp) => { `; }; -export const AvatarStyled = styled('div').attrs( - ({ - theme: { - avatar: { defaults } - } - }: StyledProps & WithThemeProp) => ({ - defaults - }) -)` +export const AvatarStyled = styled('div')` display: inline-block; text-align: center; min-width: max-content; width: ${getAvatarSize}; height: ${getAvatarSize}; - border-radius: ${({ defaults }) => defaults.borderRadius}; + border-radius: ${({ theme }) => theme.avatar.defaults.borderRadius}; overflow: hidden; cursor: ${({ onClick, disabled }) => (disabled ? 'not-allowed' : onClick ? 'pointer' : 'inherit')}; @@ -82,9 +74,9 @@ export const AvatarStyled = styled('div').attrs( width: ${getAvatarSize}; height: ${getAvatarSize}; object-fit: cover; - border: 0.1rem solid ${({ defaults }) => defaults.borderColor}; + border: 0.1rem solid ${({ theme }) => theme.avatar.defaults.borderColor}; box-sizing: border-box; - border-radius: ${({ defaults }) => defaults.borderRadius}; + border-radius: ${({ theme }) => theme.avatar.defaults.borderRadius}; } ${props => props.onClick && hoverStyle}; diff --git a/packages/core/src/components/Avatar/Avatar.tsx b/packages/core/src/components/Avatar/Avatar.tsx index b400640bf..0c78b6fca 100755 --- a/packages/core/src/components/Avatar/Avatar.tsx +++ b/packages/core/src/components/Avatar/Avatar.tsx @@ -1,11 +1,11 @@ import { isValidStringOrNumber, WithStyle } from '@medly-components/utils'; -import { memo, forwardRef, Children } from 'react'; +import type { FCC } from 'react'; +import { Children, forwardRef, memo } from 'react'; import Text from '../Text'; import { AvatarStyled } from './Avatar.styled'; import { AvatarProps } from './types'; -import type { FC } from 'react'; -const Component: FC = memo( +const Component: FCC = memo( forwardRef((props, ref) => { const isImage = !!Children.toArray(props.children).find( (child: any) => child.type === 'img' || child.props?.originalType === 'img' @@ -26,6 +26,6 @@ const Component: FC = memo( }) ); Component.displayName = 'Avatar'; -export const Avatar: FC & WithStyle = Object.assign(Component, { +export const Avatar: FCC & WithStyle = Object.assign(Component, { Style: AvatarStyled }); diff --git a/packages/core/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap b/packages/core/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap index 33f83e69c..cc09341dc 100644 --- a/packages/core/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap +++ b/packages/core/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap @@ -6,9 +6,6 @@ exports[`Avatar component should render avatar without hover and pressed states color: inherit; font-size: 1.4rem; font-weight: 700; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -19,8 +16,6 @@ exports[`Avatar component should render avatar without hover and pressed states .c0 { display: inline-block; text-align: center; - min-width: -webkit-max-content; - min-width: -moz-max-content; min-width: max-content; width: 4rem; height: 4rem; @@ -29,9 +24,6 @@ exports[`Avatar component should render avatar without hover and pressed states cursor: inherit; color: #1E864E; background: #E8F3ED; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -53,10 +45,21 @@ exports[`Avatar component should render avatar without hover and pressed states
M @@ -68,8 +71,6 @@ exports[`Avatar component should render image avatar properly 1`] = ` .c0 { display: inline-block; text-align: center; - min-width: -webkit-max-content; - min-width: -moz-max-content; min-width: max-content; width: 4.8rem; height: 4.8rem; @@ -78,19 +79,9 @@ exports[`Avatar component should render image avatar properly 1`] = ` cursor: pointer; color: #3872D2; background: #EBF1FA; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } -.c0 .sc-1ntgl3l-0 { - line-height: 4.8rem; - font-size: 2rem; - font-weight: 400; - font-family: Open Sans; -} - .c0 img { width: 4.8rem; height: 4.8rem; @@ -102,21 +93,13 @@ exports[`Avatar component should render image avatar properly 1`] = ` .c0:hover { background: #3872D2; - box-shadow: 0 0.4rem 0.8rem rgba(96,120,144,0.35); -} - -.c0:hover .sc-1ntgl3l-0 { - color: #ffffff; + box-shadow: 0 0.4rem 0.8rem rgba(96, 120, 144, 0.35); } .c0:active { background: #3061B3; } -.c0:active .sc-1ntgl3l-0 { - color: #ffffff; -} -
M @@ -215,9 +201,6 @@ exports[`Avatar component should render with default hover and pressed states 1` color: inherit; font-size: 1.4rem; font-weight: 700; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -228,8 +211,6 @@ exports[`Avatar component should render with default hover and pressed states 1` .c0 { display: inline-block; text-align: center; - min-width: -webkit-max-content; - min-width: -moz-max-content; min-width: max-content; width: 4rem; height: 4rem; @@ -238,9 +219,6 @@ exports[`Avatar component should render with default hover and pressed states 1` cursor: pointer; color: #1E864E; background: #E8F3ED; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -262,7 +240,7 @@ exports[`Avatar component should render with default hover and pressed states 1` .c0:hover { background: #3872D2; - box-shadow: 0 0.4rem 0.8rem rgba(0,90,238,0.35); + box-shadow: 0 0.4rem 0.8rem rgba(0, 90, 238, 0.35); } .c0:hover .c1 { @@ -279,10 +257,15 @@ exports[`Avatar component should render with default hover and pressed states 1`
M @@ -296,9 +279,6 @@ exports[`Avatar component should render with default theme 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 700; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -309,8 +289,6 @@ exports[`Avatar component should render with default theme 1`] = ` .c0 { display: inline-block; text-align: center; - min-width: -webkit-max-content; - min-width: -moz-max-content; min-width: max-content; width: 4rem; height: 4rem; @@ -319,9 +297,6 @@ exports[`Avatar component should render with default theme 1`] = ` cursor: inherit; color: #3872D2; background: #EBF1FA; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -347,6 +322,9 @@ exports[`Avatar component should render with default theme 1`] = ` > M @@ -360,9 +338,6 @@ exports[`Avatar component should render with not-allowed cursor when it is disab color: inherit; font-size: 1.4rem; font-weight: 700; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -373,8 +348,6 @@ exports[`Avatar component should render with not-allowed cursor when it is disab .c0 { display: inline-block; text-align: center; - min-width: -webkit-max-content; - min-width: -moz-max-content; min-width: max-content; width: 4rem; height: 4rem; @@ -383,9 +356,6 @@ exports[`Avatar component should render with not-allowed cursor when it is disab cursor: not-allowed; color: #3872D2; background: #EBF1FA; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } @@ -412,6 +382,9 @@ exports[`Avatar component should render with not-allowed cursor when it is disab > M diff --git a/packages/core/src/components/Box/Box.stories.tsx b/packages/core/src/components/Box/Box.stories.tsx index 574ebfac5..0482a8c81 100644 --- a/packages/core/src/components/Box/Box.stories.tsx +++ b/packages/core/src/components/Box/Box.stories.tsx @@ -1,10 +1,6 @@ -import { defaultTheme } from '@medly-components/theme'; import { BoxProps } from './types'; export const fontVariants: Required['fontVariant'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'body1', 'body2', 'body3']; export const shadows: Required['shadowSize'][] = ['S', 'M', 'L', 'XL']; -export const ThemeInterface: React.FC = () => null; -ThemeInterface.defaultProps = { - ...defaultTheme -}; +export const ThemeInterface: React.FCC = () => null; diff --git a/packages/core/src/components/Box/Box.tsx b/packages/core/src/components/Box/Box.tsx index 6b378bf67..2d9d9314e 100644 --- a/packages/core/src/components/Box/Box.tsx +++ b/packages/core/src/components/Box/Box.tsx @@ -1,13 +1,13 @@ import { ConcentricCircleLoader } from '@medly-components/loaders'; import { isValidStringOrNumber, WithStyle } from '@medly-components/utils'; -import type { FC } from 'react'; +import type { FCC } from 'react'; import { Children, forwardRef, memo } from 'react'; import CenterAlignedLoader from '../CenterAlignedLoader'; import Text from '../Text'; import { BoxStyled } from './Box.styled'; import { BoxProps } from './types'; -const Component: FC = memo( +const Component: FCC = memo( forwardRef((props, ref) => ( {Children.map(props.children, c => { @@ -27,6 +27,6 @@ Component.defaultProps = { fontVariant: 'body2' }; Component.displayName = 'Box'; -export const Box: FC & WithStyle = Object.assign(Component, { +export const Box: FCC & WithStyle = Object.assign(Component, { Style: BoxStyled }); diff --git a/packages/core/src/components/Box/__snapshots__/Box.test.tsx.snap b/packages/core/src/components/Box/__snapshots__/Box.test.tsx.snap index 32d738522..0b82d63f2 100644 --- a/packages/core/src/components/Box/__snapshots__/Box.test.tsx.snap +++ b/packages/core/src/components/Box/__snapshots__/Box.test.tsx.snap @@ -1,14 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Box Component should not render with border if borderColor is not provided 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -18,9 +15,6 @@ exports[`Box Component should not render with border if borderColor is not provi .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -28,27 +22,27 @@ exports[`Box Component should not render with border if borderColor is not provi box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -57,14 +51,11 @@ exports[`Box Component should not render with border if borderColor is not provi `; exports[`Box Component should not render with border if borderWidth is not provided 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -74,9 +65,6 @@ exports[`Box Component should not render with border if borderWidth is not provi .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -84,27 +72,27 @@ exports[`Box Component should not render with border if borderWidth is not provi box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -113,14 +101,11 @@ exports[`Box Component should not render with border if borderWidth is not provi `; exports[`Box Component should not render with given shadowColor if shadow size is not present 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -130,9 +115,6 @@ exports[`Box Component should not render with given shadowColor if shadow size i .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -140,27 +122,27 @@ exports[`Box Component should not render with given shadowColor if shadow size i box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -169,14 +151,11 @@ exports[`Box Component should not render with given shadowColor if shadow size i `; exports[`Box Component should render properly 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -186,9 +165,6 @@ exports[`Box Component should render properly 1`] = ` .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -196,27 +172,26 @@ exports[`Box Component should render properly 1`] = ` box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -225,58 +200,42 @@ exports[`Box Component should render properly 1`] = ` `; exports[`Box Component should render properly when loading 1`] = ` -.c4 { +.c3 { font-size: 48px; } -.c4 * { +.c3 * { fill: black; } -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; display: inline-block; } -.c3 { +.c2 { height: 100%; width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; z-index: 1001; position: relative; } -.c3 > * { - -webkit-animation: hHgZmL 300ms ease-in; +.c2>* { animation: hHgZmL 300ms ease-in; } .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -284,15 +243,7 @@ exports[`Box Component should render properly when loading 1`] = ` box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.c0 > *:not(:last-child) { +.c0>*:not(:last-child) { opacity: 0; display: none; } @@ -303,21 +254,29 @@ exports[`Box Component should render properly when loading 1`] = `
Box
Box @@ -426,14 +379,11 @@ exports[`Box Component should render properly with "L" shadow size 1`] = ` `; exports[`Box Component should render properly with "M" shadow size 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -443,22 +393,11 @@ exports[`Box Component should render properly with "M" shadow size 1`] = ` .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); margin: 0 0; - box-shadow: 0rem 0.4rem 0.6rem rgba(0,0,0,0.2); -} - -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; + box-shadow: 0rem 0.4rem 0.6rem rgba(0, 0, 0, 0.2); } .c0:focus { @@ -467,13 +406,21 @@ exports[`Box Component should render properly with "M" shadow size 1`] = `
Box @@ -482,14 +429,11 @@ exports[`Box Component should render properly with "M" shadow size 1`] = ` `; exports[`Box Component should render properly with "S" shadow size 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -499,22 +443,11 @@ exports[`Box Component should render properly with "S" shadow size 1`] = ` .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); margin: 0 0; - box-shadow: 0rem 0.1rem 0.3rem rgba(0,0,0,0.2); -} - -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; + box-shadow: 0rem 0.1rem 0.3rem rgba(0, 0, 0, 0.2); } .c0:focus { @@ -523,13 +456,21 @@ exports[`Box Component should render properly with "S" shadow size 1`] = `
Box @@ -538,14 +479,11 @@ exports[`Box Component should render properly with "S" shadow size 1`] = ` `; exports[`Box Component should render properly with "XL" shadow size 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -555,22 +493,11 @@ exports[`Box Component should render properly with "XL" shadow size 1`] = ` .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); margin: 0 0; - box-shadow: 0rem 1.2rem 1.2rem rgba(0,0,0,0.2); -} - -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; + box-shadow: 0rem 1.2rem 1.2rem rgba(0, 0, 0, 0.2); } .c0:focus { @@ -579,13 +506,21 @@ exports[`Box Component should render properly with "XL" shadow size 1`] = `
Box @@ -594,74 +529,50 @@ exports[`Box Component should render properly with "XL" shadow size 1`] = ` `; exports[`Box Component should render properly with L size and loading state 1`] = ` -.c4 { +.c3 { font-size: 48px; } -.c4 * { +.c3 * { fill: black; } -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; display: inline-block; } -.c3 { +.c2 { height: 100%; width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; z-index: 1001; position: relative; } -.c3 > * { - -webkit-animation: hHgZmL 300ms ease-in; +.c2>* { animation: hHgZmL 300ms ease-in; } .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); margin: 0 0; - box-shadow: 0rem 0.8rem 0.9rem rgba(0,0,0,0.2); + box-shadow: 0rem 0.8rem 0.9rem rgba(0, 0, 0, 0.2); } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.c0 > *:not(:last-child) { +.c0>*:not(:last-child) { opacity: 0; display: none; } @@ -672,21 +583,30 @@ exports[`Box Component should render properly with L size and loading state 1`]
Box
* { - -webkit-animation: hHgZmL 300ms ease-in; +.c2>* { animation: hHgZmL 300ms ease-in; } .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); margin: 0 0; - box-shadow: 0rem 0.4rem 0.6rem rgba(0,0,0,0.2); + box-shadow: 0rem 0.4rem 0.6rem rgba(0, 0, 0, 0.2); } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.c0 > *:not(:last-child) { +.c0>*:not(:last-child) { opacity: 0; display: none; } @@ -817,21 +713,30 @@ exports[`Box Component should render properly with M size and loading state 1`]
Box
* { - -webkit-animation: hHgZmL 300ms ease-in; +.c2>* { animation: hHgZmL 300ms ease-in; } .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); margin: 0 0; - box-shadow: 0rem 0.1rem 0.3rem rgba(0,0,0,0.2); -} - -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; + box-shadow: 0rem 0.1rem 0.3rem rgba(0, 0, 0, 0.2); } -.c0 > *:not(:last-child) { +.c0>*:not(:last-child) { opacity: 0; display: none; } @@ -962,21 +843,30 @@ exports[`Box Component should render properly with S size and loading state 1`]
Box
* { - -webkit-animation: hHgZmL 300ms ease-in; +.c2>* { animation: hHgZmL 300ms ease-in; } .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); margin: 0 0; - box-shadow: 0rem 1.2rem 1.2rem rgba(0,0,0,0.2); + box-shadow: 0rem 1.2rem 1.2rem rgba(0, 0, 0, 0.2); } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 200ms ease-out; - transition: all 200ms ease-out; -} - -.c0 > *:not(:last-child) { +.c0>*:not(:last-child) { opacity: 0; display: none; } @@ -1107,21 +973,30 @@ exports[`Box Component should render properly with XL size and loading state 1`]
Box
Box @@ -1231,14 +1101,11 @@ exports[`Box Component should render properly with border 1`] = ` `; exports[`Box Component should render properly with given bg and color 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -1248,9 +1115,6 @@ exports[`Box Component should render properly with given bg and color 1`] = ` .c0 { color: white; background-color: black; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -1258,27 +1122,26 @@ exports[`Box Component should render properly with given bg and color 1`] = ` box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -1287,14 +1150,11 @@ exports[`Box Component should render properly with given bg and color 1`] = ` `; exports[`Box Component should render properly with given height and width 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -1306,9 +1166,6 @@ exports[`Box Component should render properly with given height and width 1`] = color: black; height: 100%; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -1316,29 +1173,28 @@ exports[`Box Component should render properly with given height and width 1`] = box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -1347,14 +1203,11 @@ exports[`Box Component should render properly with given height and width 1`] = `; exports[`Box Component should render with given margin 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -1364,9 +1217,6 @@ exports[`Box Component should render with given margin 1`] = ` .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -1374,27 +1224,28 @@ exports[`Box Component should render with given margin 1`] = ` box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -1403,14 +1254,11 @@ exports[`Box Component should render with given margin 1`] = ` `; exports[`Box Component should render with given padding 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -1420,9 +1268,6 @@ exports[`Box Component should render with given padding 1`] = ` .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(2 * 0.25rem); @@ -1430,27 +1275,26 @@ exports[`Box Component should render with given padding 1`] = ` box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -1459,14 +1303,11 @@ exports[`Box Component should render with given padding 1`] = ` `; exports[`Box Component should render with given shadowColor 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -1476,9 +1317,6 @@ exports[`Box Component should render with given shadowColor 1`] = ` .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -1486,27 +1324,28 @@ exports[`Box Component should render with given shadowColor 1`] = ` box-shadow: 0rem 0.4rem 0.6rem tomato; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Box @@ -1515,14 +1354,11 @@ exports[`Box Component should render with given shadowColor 1`] = ` `; exports[`Box Component should wrap children into Text component when rendering string or number 1`] = ` -.c2 { +.c1 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -1532,9 +1368,6 @@ exports[`Box Component should wrap children into Text component when rendering s .c0 { color: black; background-color: white; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; border-radius: calc(2 * 0.25rem); padding: calc(4 * 0.25rem) calc(4 * 0.25rem); @@ -1542,27 +1375,26 @@ exports[`Box Component should wrap children into Text component when rendering s box-shadow: none; } -.c0, -.c0 .c1, -.c0 .sc-1pf3x8a-0, -.c0 .sc-1pf3x8a-0 * { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; -} - .c0:focus { outline: none; }
Some text diff --git a/packages/core/src/components/Breadcrumb/Back/Back.tsx b/packages/core/src/components/Breadcrumb/Back/Back.tsx index 9fc7a94e2..e51dbd35a 100644 --- a/packages/core/src/components/Breadcrumb/Back/Back.tsx +++ b/packages/core/src/components/Breadcrumb/Back/Back.tsx @@ -1,11 +1,11 @@ import { ChevronLeftIcon } from '@medly-components/icons'; import { WithStyle } from '@medly-components/utils'; -import { FC, forwardRef, memo } from 'react'; +import { FCC, forwardRef, memo } from 'react'; import Text from '../../Text'; import { BreadcrumbBackStyled } from './Back.styled'; import { BreadcrumbBackProps } from './types'; -export const Component: FC = memo( +export const Component: FCC = memo( forwardRef((props, ref) => ( diff --git a/packages/core/src/components/Breadcrumb/Breadcrumb.stories.tsx b/packages/core/src/components/Breadcrumb/Breadcrumb.stories.tsx index b8ea0c4be..0d889f4f7 100644 --- a/packages/core/src/components/Breadcrumb/Breadcrumb.stories.tsx +++ b/packages/core/src/components/Breadcrumb/Breadcrumb.stories.tsx @@ -1,7 +1,7 @@ import { BreadcrumbTheme, defaultTheme } from '@medly-components/theme'; -import type { FC } from 'react'; +import type { FCC } from 'react'; -export const ThemeInterface: FC = () => null; +export const ThemeInterface: FCC = () => null; ThemeInterface.defaultProps = { ...defaultTheme.breadcrumb }; diff --git a/packages/core/src/components/Breadcrumb/Breadcrumb.tsx b/packages/core/src/components/Breadcrumb/Breadcrumb.tsx index a9a708cab..157fe49ac 100644 --- a/packages/core/src/components/Breadcrumb/Breadcrumb.tsx +++ b/packages/core/src/components/Breadcrumb/Breadcrumb.tsx @@ -1,14 +1,14 @@ import { ChevronRightIcon } from '@medly-components/icons'; import { WithStyle } from '@medly-components/utils'; -import type { FC } from 'react'; +import type { FCC } from 'react'; import { Children } from 'react'; -import addSeparator from './addSeparator'; import BreadcrumbBack from './Back'; import { BreadcrumbStyled } from './Breadcrumb.styled'; import BreadcrumbItem from './Item'; +import addSeparator from './addSeparator'; import { BreadcrumbProps, BreadcrumbStaticProps } from './types'; -const Component: FC = props => { +const Component: FCC = props => { const { separator, children, ...restProps } = props, links = Children.toArray(children), linksWithSeparator = addSeparator(links, separator); @@ -18,7 +18,7 @@ const Component: FC = props => { Component.displayName = 'Breadcrumb'; Component.defaultProps = { separator:
-
@@ -1643,36 +1416,57 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > S M T W T F S @@ -1683,6 +1477,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 29 @@ -1694,6 +1490,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 30 @@ -1705,6 +1503,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 31 @@ -1716,6 +1516,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 1 @@ -1727,6 +1529,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 2 @@ -1738,6 +1542,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 3 @@ -1749,6 +1555,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 4 @@ -1760,6 +1568,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 5 @@ -1771,6 +1581,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 6 @@ -1782,6 +1594,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 7 @@ -1793,6 +1607,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 8 @@ -1804,6 +1620,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 9 @@ -1815,6 +1633,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 10 @@ -1826,6 +1646,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 11 @@ -1837,6 +1659,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 12 @@ -1848,6 +1672,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 13 @@ -1859,6 +1685,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 14 @@ -1870,6 +1698,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 15 @@ -1881,6 +1711,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 16 @@ -1892,6 +1724,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 17 @@ -1903,6 +1737,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 18 @@ -1914,6 +1750,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 19 @@ -1925,6 +1763,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 20 @@ -1936,6 +1776,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 21 @@ -1947,6 +1789,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 22 @@ -1958,6 +1802,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 23 @@ -1969,6 +1815,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 24 @@ -1980,6 +1828,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 25 @@ -1991,6 +1841,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 26 @@ -2002,6 +1854,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 27 @@ -2013,6 +1867,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 28 @@ -2024,6 +1880,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 29 @@ -2035,6 +1893,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 30 @@ -2046,6 +1906,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 31 @@ -2057,6 +1919,8 @@ exports[`Calendar Component should render properly with with error state 1`] = ` > 1 diff --git a/packages/core/src/components/Card/Card.stories.tsx b/packages/core/src/components/Card/Card.stories.tsx index b19113a25..9ffbc319d 100644 --- a/packages/core/src/components/Card/Card.stories.tsx +++ b/packages/core/src/components/Card/Card.stories.tsx @@ -1,13 +1,13 @@ import { CardTheme, defaultTheme } from '@medly-components/theme'; +import type { FCC } from 'react'; import { CardProps } from './types'; -import type { FC } from 'react'; export const variants: CardProps['variant'][] = ['solid', 'flat']; export const display: CardProps['display'][] = ['block', 'flex']; export const itemsPosition: CardProps['alignItems'][] = ['top', 'bottom', 'left', 'right', 'center']; export const flowDirection: CardProps['flowDirection'][] = ['vertical', 'horizontal']; -export const ThemeInterface: FC = () => null; +export const ThemeInterface: FCC = () => null; ThemeInterface.defaultProps = { ...defaultTheme.card }; diff --git a/packages/core/src/components/Card/Card.styled.tsx b/packages/core/src/components/Card/Card.styled.tsx index eccdc0088..a5e8a099e 100644 --- a/packages/core/src/components/Card/Card.styled.tsx +++ b/packages/core/src/components/Card/Card.styled.tsx @@ -1,4 +1,4 @@ -import { BreakpointsTheme, CardTheme } from '@medly-components/theme'; +import { BreakpointsTheme } from '@medly-components/theme'; import { WithThemeProp } from '@medly-components/utils'; import { rgba } from 'polished'; import styled, { css } from 'styled-components'; @@ -21,21 +21,21 @@ const borderTop = (separatorColor: string) => css` borderLeft = (separatorColor: string) => css` border-left: 1px solid ${separatorColor}; `, - applyBorder = ({ flowDirection, separatorColor }: CardProps & CardTheme & WithThemeProp) => css` + applyBorder = ({ flowDirection, theme }: CardProps & WithThemeProp) => css` > div + div { - ${flowDirection === 'vertical' ? borderTop(separatorColor!) : borderLeft(separatorColor!)} + ${flowDirection === 'vertical' ? borderTop(theme.card.separatorColor!) : borderLeft(theme.card.separatorColor!)} } `; -const solid = ({ backgroundColor, shadowColor, onClick }: CardTheme & CardProps & WithThemeProp) => css` - background-color: ${backgroundColor}; - border-radius: ${({ theme }) => theme.card.borderRadius}; - box-shadow: 0 0.2rem 0.8rem ${rgba(shadowColor, 0.2)}; +const solid = ({ theme, onClick }: CardProps & WithThemeProp) => css` + background-color: ${theme.card.backgroundColor}; + border-radius: ${theme.card.borderRadius}; + box-shadow: 0 0.2rem 0.8rem ${rgba(theme.card.shadowColor, 0.2)}; &:hover { - box-shadow: ${onClick && `0 0.4rem 0.8rem ${rgba(shadowColor, 0.6)}`}; + box-shadow: ${onClick && `0 0.4rem 0.8rem ${rgba(theme.card.shadowColor, 0.6)}`}; } `, - flat = () => css` + flat = css` border-radius: 0; margin: 0; border: none; @@ -55,7 +55,7 @@ const media = ({ theme, breakpoint }: CardProps & { breakpoint: keyof Breakpoint ${media({ theme, breakpoint: 'XL' })} `; -export const Card = styled('div').attrs(({ theme: { card } }) => ({ ...card }))` +export const Card = styled('div')` overflow: auto; box-sizing: border-box; flex: ${({ flex }) => flex}; diff --git a/packages/core/src/components/Card/Card.tsx b/packages/core/src/components/Card/Card.tsx index 0a8d1cbb9..79f2ac60d 100644 --- a/packages/core/src/components/Card/Card.tsx +++ b/packages/core/src/components/Card/Card.tsx @@ -1,10 +1,10 @@ import { WithStyle } from '@medly-components/utils'; -import { memo, forwardRef } from 'react'; +import type { FCC } from 'react'; +import { forwardRef, memo } from 'react'; import * as Styled from './Card.styled'; import { CardProps } from './types'; -import type { FC } from 'react'; -const Component: FC = memo(forwardRef((props, ref) => )); +const Component: FCC = memo(forwardRef((props, ref) => )); Component.defaultProps = { display: 'block', variant: 'solid', @@ -17,4 +17,4 @@ Component.defaultProps = { fullHeight: false }; Component.displayName = 'Card'; -export const Card: FC & WithStyle = Object.assign(Component, { Style: Styled.Card }); +export const Card: FCC & WithStyle = Object.assign(Component, { Style: Styled.Card }); diff --git a/packages/core/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/core/src/components/Card/__snapshots__/Card.test.tsx.snap index bbe6e048a..b54eb8f9c 100644 --- a/packages/core/src/components/Card/__snapshots__/Card.test.tsx.snap +++ b/packages/core/src/components/Card/__snapshots__/Card.test.tsx.snap @@ -6,9 +6,6 @@ exports[`Card component should render correctly with all the default props 1`] = color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -18,25 +15,14 @@ exports[`Card component should render correctly with all the default props 1`] = .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -66,11 +52,17 @@ exports[`Card component should render correctly with all the default props 1`] =
Dummy Text @@ -84,9 +76,6 @@ exports[`Card component should render properly when flow direction is horizontal color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -96,145 +85,90 @@ exports[`Card component should render properly when flow direction is horizontal .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; } -.c0 > div + div { +.c0 >div+div { border-left: 1px solid #98A7B7; } .c1 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } -.c1 > div + div { +.c1 >div+div { border-left: 1px solid #98A7B7; } .c3 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; justify-content: flex-end; } -.c3 > div + div { +.c3 >div+div { border-left: 1px solid #98A7B7; } .c4 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; align-items: flex-start; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; } -.c4 > div + div { +.c4 >div+div { border-left: 1px solid #98A7B7; } .c5 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: flex-end; - -webkit-box-align: flex-end; - -ms-flex-align: flex-end; align-items: flex-end; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; } -.c5 > div + div { +.c5 >div+div { border-left: 1px solid #98A7B7; } @@ -360,55 +294,89 @@ exports[`Card component should render properly when flow direction is horizontal
Dummy Text
Dummy Text
Dummy Text
Dummy Text
Dummy Text @@ -423,9 +391,6 @@ exports[`Card component should render properly when fullWidth and fullHeight is color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -435,27 +400,16 @@ exports[`Card component should render properly when fullWidth and fullHeight is .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: block; width: 100%; height: 100%; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -485,11 +439,17 @@ exports[`Card component should render properly when fullWidth and fullHeight is
Dummy Text @@ -503,9 +463,6 @@ exports[`Card component should render properly when it is clickable 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -515,25 +472,14 @@ exports[`Card component should render properly when it is clickable 1`] = ` .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -572,11 +518,17 @@ exports[`Card component should render properly when it is clickable 1`] = `
Dummy Text @@ -590,9 +542,6 @@ exports[`Card component should render properly when separator is set true flow d color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -602,137 +551,82 @@ exports[`Card component should render properly when separator is set true flow d .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; align-items: flex-start; } -.c0 > div + div { +.c0 >div+div { border-top: 1px solid #98A7B7; } .c1 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0; margin: 0; border: none; box-shadow: none; background-color: transparent; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; align-items: flex-start; } .c3 { overflow: auto; box-sizing: border-box; - -webkit-flex: 6; - -ms-flex: 6; flex: 6; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0; margin: 0; border: none; box-shadow: none; background-color: transparent; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: flex-end; - -webkit-box-align: flex-end; - -ms-flex-align: flex-end; align-items: flex-end; } .c4 { overflow: auto; box-sizing: border-box; - -webkit-flex: 6; - -ms-flex: 6; flex: 6; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0; margin: 0; border: none; box-shadow: none; background-color: transparent; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c5 { overflow: auto; box-sizing: border-box; - -webkit-flex: 6; - -ms-flex: 6; flex: 6; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0; margin: 0; border: none; box-shadow: none; background-color: transparent; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; justify-content: flex-end; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -834,45 +728,73 @@ exports[`Card component should render properly when separator is set true flow d
Marks
Dummy Text
Dummy Text
Dummy Text @@ -887,9 +809,6 @@ exports[`Card component should render properly with "flat" variant 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -899,27 +818,16 @@ exports[`Card component should render properly with "flat" variant 1`] = ` .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0; margin: 0; border: none; box-shadow: none; background-color: transparent; - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -949,11 +857,17 @@ exports[`Card component should render properly with "flat" variant 1`] = `
Dummy Text @@ -967,9 +881,6 @@ exports[`Card component should render properly with "solid" variant 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -979,25 +890,14 @@ exports[`Card component should render properly with "solid" variant 1`] = ` .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -1027,11 +927,17 @@ exports[`Card component should render properly with "solid" variant 1`] = `
Dummy Text @@ -1045,9 +951,6 @@ exports[`Card component should render properly with display "block" 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -1057,25 +960,14 @@ exports[`Card component should render properly with display "block" 1`] = ` .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; display: inline-block; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -1105,11 +997,17 @@ exports[`Card component should render properly with display "block" 1`] = `
Dummy Text @@ -1123,9 +1021,6 @@ exports[`Card component should render properly with display "flex" 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -1135,28 +1030,14 @@ exports[`Card component should render properly with display "flex" 1`] = ` .c0 { overflow: auto; box-sizing: border-box; - -webkit-flex: 1; - -ms-flex: 1; flex: 1; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; background-color: #ffffff; border-radius: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - -webkit-flex-direction: column; - -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } @@ -1186,11 +1067,17 @@ exports[`Card component should render properly with display "flex" 1`] = `
Dummy Text diff --git a/packages/core/src/components/CardTable/Body/Body.tsx b/packages/core/src/components/CardTable/Body/Body.tsx index 8f8b3535a..9b8ba22cc 100644 --- a/packages/core/src/components/CardTable/Body/Body.tsx +++ b/packages/core/src/components/CardTable/Body/Body.tsx @@ -1,12 +1,12 @@ +import type { FCC } from 'react'; import { memo, useCallback, useMemo } from 'react'; import Text from '../../Text'; import Cell from './Cell'; import Row from './Row'; import { NoResult } from './Row/Row.styled'; import { Props } from './types'; -import type { FC } from 'react'; -export const Body: FC = memo(props => { +export const Body: FCC = memo(props => { const { data, columns, onRowClick, rowClickDisableKey, uniqueKeyName, withWhiteBackground } = props; const gridTemplateColumns = useMemo(() => columns.reduce((acc, curr) => acc.concat(`${curr.fraction || 1}fr `), ''), [columns]), diff --git a/packages/core/src/components/CardTable/Body/Cell/Cell.tsx b/packages/core/src/components/CardTable/Body/Cell/Cell.tsx index f2a592762..94a8156b0 100644 --- a/packages/core/src/components/CardTable/Body/Cell/Cell.tsx +++ b/packages/core/src/components/CardTable/Body/Cell/Cell.tsx @@ -1,10 +1,10 @@ -import { useMemo, memo } from 'react'; +import type { FCC } from 'react'; +import { memo, useMemo } from 'react'; import Text from '../../../Text'; import * as Style from './Cell.styled'; import { Props } from './types'; -import type { FC } from 'react'; -export const Cell: FC = memo(props => { +export const Cell: FCC = memo(props => { const { data, rowId, column, isRowClickDisabled, rowData } = props, { component: Component, align, wrapText } = column; diff --git a/packages/core/src/components/CardTable/Body/Cell/__snapshots__/Cell.test.tsx.snap b/packages/core/src/components/CardTable/Body/Cell/__snapshots__/Cell.test.tsx.snap index 45582fd1a..eb287f919 100644 --- a/packages/core/src/components/CardTable/Body/Cell/__snapshots__/Cell.test.tsx.snap +++ b/packages/core/src/components/CardTable/Body/Cell/__snapshots__/Cell.test.tsx.snap @@ -6,9 +6,6 @@ exports[`CardTable Cell should be able to "center" align 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -18,20 +15,9 @@ exports[`CardTable Cell should be able to "center" align 1`] = ` .c0 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; overflow: hidden; } @@ -47,10 +33,13 @@ exports[`CardTable Cell should be able to "center" align 1`] = ` text @@ -68,9 +57,6 @@ exports[`CardTable Cell should be able to "left" align 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -80,20 +66,9 @@ exports[`CardTable Cell should be able to "left" align 1`] = ` .c0 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; } @@ -109,10 +84,13 @@ exports[`CardTable Cell should be able to "left" align 1`] = ` text @@ -130,9 +108,6 @@ exports[`CardTable Cell should be able to "right" align 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -142,20 +117,9 @@ exports[`CardTable Cell should be able to "right" align 1`] = ` .c0 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; justify-content: flex-end; overflow: hidden; } @@ -171,10 +135,13 @@ exports[`CardTable Cell should be able to "right" align 1`] = ` text @@ -192,9 +159,6 @@ exports[`CardTable Cell should render cell with text component with wrap text as color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -204,20 +168,9 @@ exports[`CardTable Cell should render cell with text component with wrap text as .c0 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; } @@ -227,11 +180,16 @@ exports[`CardTable Cell should render cell with text component with wrap text as @@ -246,9 +204,6 @@ exports[`CardTable Cell should render cell with text component with wrap text as color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -258,20 +213,9 @@ exports[`CardTable Cell should render cell with text component with wrap text as .c0 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; } @@ -287,11 +231,16 @@ exports[`CardTable Cell should render cell with text component with wrap text as @@ -306,9 +255,6 @@ exports[`CardTable Cell should render cell with text properly 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -318,20 +264,9 @@ exports[`CardTable Cell should render cell with text properly 1`] = ` .c0 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; } @@ -347,10 +282,13 @@ exports[`CardTable Cell should render cell with text properly 1`] = ` text diff --git a/packages/core/src/components/CardTable/Body/Row/Row.styled.tsx b/packages/core/src/components/CardTable/Body/Row/Row.styled.tsx index 7443c25db..e143f92bd 100644 --- a/packages/core/src/components/CardTable/Body/Row/Row.styled.tsx +++ b/packages/core/src/components/CardTable/Body/Row/Row.styled.tsx @@ -1,10 +1,28 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import { Props } from './types'; -export const Row = styled('tr').attrs(({ withWhiteBackground, theme: { cardTable } }: Props) => ({ - bgTheme: withWhiteBackground ? 'lightBackground' : 'darkBackground', - cardTable -}))` +const getStyle = ({ withWhiteBackground, isRowClickDisabled }: Props) => { + const bgTheme = withWhiteBackground ? 'lightBackground' : 'darkBackground'; + return css` + border: 0.1rem solid ${({ theme }) => theme.cardTable[bgTheme].borderColor}; + box-shadow: ${({ theme }) => theme.cardTable[bgTheme].boxShadow}; + + &:hover { + box-shadow: ${({ theme }) => theme.cardTable[bgTheme].hoverBoxShadow}; + } + + :nth-child(odd) { + background: ${({ theme }) => + !isRowClickDisabled ? theme.cardTable[bgTheme].oddRowBgColor : theme.cardTable.disabledRowBgColor}; + } + :nth-child(even) { + background: ${({ theme }) => + !isRowClickDisabled ? theme.cardTable[bgTheme].evenRowBgColor : theme.cardTable.disabledRowBgColor}; + } + `; +}; + +export const Row = styled('tr')` display: grid; grid-template-columns: ${({ gridTemplateColumns }) => gridTemplateColumns}; cursor: ${({ onClick, isRowClickDisabled }) => (onClick && !isRowClickDisabled ? 'pointer' : 'inherit')}; @@ -13,21 +31,7 @@ export const Row = styled('tr').attrs(({ withWhiteBackground, theme: { cardTable margin-bottom: 0.8rem; background-color: white; transition: box-shadow 100ms ease-out; - border: 0.1rem solid ${({ bgTheme, cardTable }) => cardTable[bgTheme].borderColor}; - box-shadow: ${({ bgTheme, cardTable }) => cardTable[bgTheme].boxShadow}; - - &:hover { - box-shadow: ${({ bgTheme, cardTable }) => cardTable[bgTheme].hoverBoxShadow}; - } - - :nth-child(odd) { - background: ${({ bgTheme, cardTable, isRowClickDisabled }) => - !isRowClickDisabled ? cardTable[bgTheme].oddRowBgColor : cardTable.disabledRowBgColor}; - } - :nth-child(even) { - background: ${({ bgTheme, cardTable, isRowClickDisabled }) => - !isRowClickDisabled ? cardTable[bgTheme].evenRowBgColor : cardTable.disabledRowBgColor}; - } + ${getStyle} `; export const NoResult = styled(Row)` diff --git a/packages/core/src/components/CardTable/Body/Row/__snapshots__/Row.test.tsx.snap b/packages/core/src/components/CardTable/Body/Row/__snapshots__/Row.test.tsx.snap index 7603fdb3e..aa92538d2 100644 --- a/packages/core/src/components/CardTable/Body/Row/__snapshots__/Row.test.tsx.snap +++ b/packages/core/src/components/CardTable/Body/Row/__snapshots__/Row.test.tsx.snap @@ -9,21 +9,20 @@ exports[`CardTable Row should render properly with dark theme 1`] = ` border-radius: 0.8rem; margin-bottom: 0.8rem; background-color: white; - -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; border: 0.1rem solid #ffffff; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); } .c0:hover { - box-shadow: 0 0.4rem 0.8rem rgba(176,188,200,0.6); + box-shadow: 0 0.4rem 0.8rem rgba(176, 188, 200, 0.6); } -.c0:nth-child(odd) { +.c0 :nth-child(odd) { background: #ffffff; } -.c0:nth-child(even) { +.c0 :nth-child(even) { background: #ffffff; } @@ -32,6 +31,7 @@ exports[`CardTable Row should render properly with dark theme 1`] = ` Demo @@ -51,21 +51,20 @@ exports[`CardTable Row should render properly with light theme 1`] = ` border-radius: 0.8rem; margin-bottom: 0.8rem; background-color: white; - -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; border: 0.1rem solid #dfe4e9; box-shadow: none; } .c0:hover { - box-shadow: 0px 0.2rem 0.4rem rgba(176,188,200,0.6); + box-shadow: 0px 0.2rem 0.4rem rgba(176, 188, 200, 0.6); } -.c0:nth-child(odd) { +.c0 :nth-child(odd) { background: #F7F8F9; } -.c0:nth-child(even) { +.c0 :nth-child(even) { background: #ffffff; } @@ -74,6 +73,7 @@ exports[`CardTable Row should render properly with light theme 1`] = ` Demo @@ -93,21 +93,20 @@ exports[`CardTable Row should render with grey background if row is disabled 1`] border-radius: 0.8rem; margin-bottom: 0.8rem; background-color: white; - -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; border: 0.1rem solid #ffffff; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); } .c0:hover { - box-shadow: 0 0.4rem 0.8rem rgba(176,188,200,0.6); + box-shadow: 0 0.4rem 0.8rem rgba(176, 188, 200, 0.6); } -.c0:nth-child(odd) { +.c0 :nth-child(odd) { background: #eff2f4; } -.c0:nth-child(even) { +.c0 :nth-child(even) { background: #eff2f4; } @@ -116,6 +115,7 @@ exports[`CardTable Row should render with grey background if row is disabled 1`] Demo diff --git a/packages/core/src/components/CardTable/Body/Row/types.ts b/packages/core/src/components/CardTable/Body/Row/types.ts index bab53eeed..e4be5dd89 100644 --- a/packages/core/src/components/CardTable/Body/Row/types.ts +++ b/packages/core/src/components/CardTable/Body/Row/types.ts @@ -1,6 +1,4 @@ -import { WithThemeProp } from '@medly-components/utils'; - -export interface Props extends WithThemeProp { +export interface Props { onClick?: () => void; isRowClickDisabled?: boolean; withWhiteBackground?: boolean; diff --git a/packages/core/src/components/CardTable/Body/__snapshots__/Body.test.tsx.snap b/packages/core/src/components/CardTable/Body/__snapshots__/Body.test.tsx.snap index c6efc28f1..6543ccac9 100644 --- a/packages/core/src/components/CardTable/Body/__snapshots__/Body.test.tsx.snap +++ b/packages/core/src/components/CardTable/Body/__snapshots__/Body.test.tsx.snap @@ -6,9 +6,6 @@ exports[`CardTable Body should render card table body properly 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -18,20 +15,9 @@ exports[`CardTable Body should render card table body properly 1`] = ` .c1 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; } @@ -50,21 +36,20 @@ exports[`CardTable Body should render card table body properly 1`] = ` border-radius: 0.8rem; margin-bottom: 0.8rem; background-color: white; - -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; border: 0.1rem solid #ffffff; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); } .c0:hover { - box-shadow: 0 0.4rem 0.8rem rgba(176,188,200,0.6); + box-shadow: 0 0.4rem 0.8rem rgba(176, 188, 200, 0.6); } -.c0:nth-child(odd) { +.c0 :nth-child(odd) { background: #ffffff; } -.c0:nth-child(even) { +.c0 :nth-child(even) { background: #ffffff; } @@ -73,22 +58,29 @@ exports[`CardTable Body should render card table body properly 1`] = ` Oli Bob Metaformin @@ -101,14 +93,11 @@ exports[`CardTable Body should render card table body properly 1`] = ` `; exports[`CardTable Body should render no result row when there is no data 1`] = ` -.c1 { +.c2 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 700; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -123,43 +112,41 @@ exports[`CardTable Body should render no result row when there is no data 1`] = border-radius: 0.8rem; margin-bottom: 0.8rem; background-color: white; - -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; border: 0.1rem solid #ffffff; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 1.5rem 0; } .c0:hover { - box-shadow: 0 0.4rem 0.8rem rgba(176,188,200,0.6); + box-shadow: 0 0.4rem 0.8rem rgba(176, 188, 200, 0.6); } -.c0:nth-child(odd) { +.c0 :nth-child(odd) { background: #ffffff; } -.c0:nth-child(even) { +.c0 :nth-child(even) { background: #ffffff; } +.c1 { + display: flex; + justify-content: center; + align-items: center; + padding: 1.5rem 0; +} +
No Result diff --git a/packages/core/src/components/CardTable/CardTable.tsx b/packages/core/src/components/CardTable/CardTable.tsx index fd6241464..260b1b043 100644 --- a/packages/core/src/components/CardTable/CardTable.tsx +++ b/packages/core/src/components/CardTable/CardTable.tsx @@ -1,11 +1,11 @@ +import type { FCC } from 'react'; import { memo } from 'react'; import Body from './Body'; import * as Styled from './CardTable.styled'; import Head from './Head'; import { CardTableProps } from './types'; -import type { FC } from 'react'; -export const CardTable: FC = memo( +export const CardTable: FCC = memo( ({ withWhiteBackground, defaultSortField, defaultSortOrder, onSort, columns, ...restProps }) => ( diff --git a/packages/core/src/components/CardTable/Head/Head.tsx b/packages/core/src/components/CardTable/Head/Head.tsx index 35eada469..2ad082bc4 100644 --- a/packages/core/src/components/CardTable/Head/Head.tsx +++ b/packages/core/src/components/CardTable/Head/Head.tsx @@ -1,11 +1,11 @@ +import type { FCC } from 'react'; import { memo, useCallback, useMemo, useState } from 'react'; import { SortOrder } from '../types'; import * as Styled from './Head.styled'; import HeadCell from './HeadCell'; import { Props } from './types'; -import type { FC } from 'react'; -export const Head: FC = memo(({ onSort, columns, withWhiteBackground, defaultSortField, defaultSortOrder }) => { +export const Head: FCC = memo(({ onSort, columns, withWhiteBackground, defaultSortField, defaultSortOrder }) => { const [sortField, setSortField] = useState(defaultSortField); const gridTemplateColumns = useMemo(() => columns.reduce((acc, curr) => acc.concat(`${curr.fraction || 1}fr `), ''), [columns]), diff --git a/packages/core/src/components/CardTable/Head/HeadCell/HeadCell.styled.tsx b/packages/core/src/components/CardTable/Head/HeadCell/HeadCell.styled.tsx index 44349baaa..672c6b5bd 100644 --- a/packages/core/src/components/CardTable/Head/HeadCell/HeadCell.styled.tsx +++ b/packages/core/src/components/CardTable/Head/HeadCell/HeadCell.styled.tsx @@ -1,5 +1,5 @@ import { SvgIcon } from '@medly-components/icons'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import Text from '../../../Text'; import { StyledProps } from './types'; @@ -9,61 +9,65 @@ export const HeadCellContent = styled('span')` align-items: center; `; -export const HeadCell = styled('th').attrs(({ withWhiteBackground }: StyledProps) => ({ - bgTheme: withWhiteBackground ? 'lightBackground' : 'darkBackground' -}))` - padding: 0 0.8rem; - margin: 1.4rem 0; - display: flex; - align-items: center; - position: relative; - justify-content: ${({ align }) => (align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center')}; - - &::after { - content: ''; - width: calc(100% - 1.6rem); - margin: 0 0.8rem; - display: block; - position: absolute; - bottom: -1.6rem; - left: 0; - background-color: ${({ theme, bgTheme, isActive }) => (isActive ? theme.cardTable[bgTheme].headerActiveColor : 'transparent')}; - height: 0.2rem; - transition: all 100ms ease-out; - border-radius: 0.2rem 0.2rem 0 0; - } +const getStyle = ({ withWhiteBackground }: StyledProps) => { + const bgTheme = withWhiteBackground ? 'lightBackground' : 'darkBackground'; + return css` + &::after { + content: ''; + width: calc(100% - 1.6rem); + margin: 0 0.8rem; + display: block; + position: absolute; + bottom: -1.6rem; + left: 0; + background-color: ${({ theme, isActive }) => (isActive ? theme.cardTable[bgTheme].headerActiveColor : 'transparent')}; + height: 0.2rem; + transition: all 100ms ease-out; + border-radius: 0.2rem 0.2rem 0 0; + } - ${HeadCellContent} { - &:hover { - cursor: ${({ sortable }) => (sortable ? 'pointer' : 'default')}; - ${Text.Style} { - color: ${({ theme, bgTheme }) => theme.cardTable[bgTheme].headerHoverColor}; - } - ${SvgIcon} { - * { - fill: ${({ theme, bgTheme }) => theme.cardTable[bgTheme].headerHoverColor}; + ${HeadCellContent} { + &:hover { + cursor: ${({ sortable }) => (sortable ? 'pointer' : 'default')}; + ${Text.Style} { + color: ${({ theme }) => theme.cardTable[bgTheme].headerHoverColor}; + } + ${SvgIcon} { + * { + fill: ${({ theme }) => theme.cardTable[bgTheme].headerHoverColor}; + } } } } - } - - ${Text.Style} { - transition: all 100ms ease-out; - user-select: none; - display: inline; - color: ${({ theme, bgTheme, isActive }) => - isActive ? theme.cardTable[bgTheme].headerActiveColor : theme.cardTable[bgTheme].headerColor}; - } - ${SvgIcon} { - transition: all 100ms ease-out; - width: 2.4rem; - cursor: pointer; - padding-left: 0.4rem; - * { - fill: ${({ theme, bgTheme, isActive }) => + ${Text.Style} { + transition: all 100ms ease-out; + user-select: none; + display: inline; + color: ${({ theme, isActive }) => isActive ? theme.cardTable[bgTheme].headerActiveColor : theme.cardTable[bgTheme].headerColor}; } - } + + ${SvgIcon} { + transition: all 100ms ease-out; + width: 2.4rem; + cursor: pointer; + padding-left: 0.4rem; + * { + fill: ${({ theme, isActive }) => + isActive ? theme.cardTable[bgTheme].headerActiveColor : theme.cardTable[bgTheme].headerColor}; + } + } + `; +}; + +export const HeadCell = styled('th')` + padding: 0 0.8rem; + margin: 1.4rem 0; + display: flex; + align-items: center; + position: relative; + justify-content: ${({ align }) => (align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center')}; + ${getStyle} `; HeadCell.defaultProps = { align: 'left' }; diff --git a/packages/core/src/components/CardTable/Head/HeadCell/HeadCell.tsx b/packages/core/src/components/CardTable/Head/HeadCell/HeadCell.tsx index 112cad14d..443d0dc78 100644 --- a/packages/core/src/components/CardTable/Head/HeadCell/HeadCell.tsx +++ b/packages/core/src/components/CardTable/Head/HeadCell/HeadCell.tsx @@ -1,12 +1,12 @@ import { ChevronDownIcon, ChevronUpIcon, DropdownIcon } from '@medly-components/icons'; import { WithStyle } from '@medly-components/utils'; +import type { FCC } from 'react'; import { memo, useCallback, useEffect, useMemo, useState } from 'react'; import Text from '../../../Text'; import * as Styled from './HeadCell.styled'; import { Props } from './types'; -import type { FC } from 'react'; -export const Component: FC = memo(({ defaultSortOrder, sortField, onSortChange, withWhiteBackground, column }) => { +export const Component: FCC = memo(({ defaultSortOrder, sortField, onSortChange, withWhiteBackground, column }) => { const { field, sortable, title, align } = column, [sortState, setSortState] = useState<'none' | 'asc' | 'desc'>(defaultSortOrder!); @@ -48,4 +48,4 @@ Component.defaultProps = { }; Component.displayName = 'HeadCell'; -export const HeadCell: FC & WithStyle = Object.assign(Component, { Style: Styled.HeadCell }); +export const HeadCell: FCC & WithStyle = Object.assign(Component, { Style: Styled.HeadCell }); diff --git a/packages/core/src/components/CardTable/Head/HeadCell/__snapshots__/HeadCell.test.tsx.snap b/packages/core/src/components/CardTable/Head/HeadCell/__snapshots__/HeadCell.test.tsx.snap index af0ffcd8e..7b1f0d61a 100644 --- a/packages/core/src/components/CardTable/Head/HeadCell/__snapshots__/HeadCell.test.tsx.snap +++ b/packages/core/src/components/CardTable/Head/HeadCell/__snapshots__/HeadCell.test.tsx.snap @@ -6,9 +6,6 @@ exports[`Card Table HeadCell should be able to "center" align 1`] = ` color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -17,31 +14,16 @@ exports[`Card Table HeadCell should be able to "center" align 1`] = ` .c2 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c0 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; } @@ -55,7 +37,6 @@ exports[`Card Table HeadCell should be able to "center" align 1`] = ` left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -68,38 +49,19 @@ exports[`Card Table HeadCell should be able to "center" align 1`] = ` color: #5687D9; } -.c0 .c1:hover .sc-1pf3x8a-0 * { - fill: #5687D9; -} - .c0 .c3 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #435465; } -.c0 .sc-1pf3x8a-0 { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; - width: 2.4rem; - cursor: pointer; - padding-left: 0.4rem; -} - -.c0 .sc-1pf3x8a-0 * { - fill: #435465; -} -
Column 1
@@ -124,9 +89,6 @@ exports[`Card Table HeadCell should be able to "left" align 1`] = ` color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -135,31 +97,16 @@ exports[`Card Table HeadCell should be able to "left" align 1`] = ` .c2 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c0 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -173,7 +120,6 @@ exports[`Card Table HeadCell should be able to "left" align 1`] = ` left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -186,38 +132,19 @@ exports[`Card Table HeadCell should be able to "left" align 1`] = ` color: #5687D9; } -.c0 .c1:hover .sc-1pf3x8a-0 * { - fill: #5687D9; -} - .c0 .c3 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #435465; } -.c0 .sc-1pf3x8a-0 { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; - width: 2.4rem; - cursor: pointer; - padding-left: 0.4rem; -} - -.c0 .sc-1pf3x8a-0 * { - fill: #435465; -} -
Column 1
@@ -242,9 +172,6 @@ exports[`Card Table HeadCell should be able to "right" align 1`] = ` color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -253,31 +180,16 @@ exports[`Card Table HeadCell should be able to "right" align 1`] = ` .c2 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c0 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; justify-content: flex-end; } @@ -291,7 +203,6 @@ exports[`Card Table HeadCell should be able to "right" align 1`] = ` left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -304,38 +215,19 @@ exports[`Card Table HeadCell should be able to "right" align 1`] = ` color: #5687D9; } -.c0 .c1:hover .sc-1pf3x8a-0 * { - fill: #5687D9; -} - .c0 .c3 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #435465; } -.c0 .sc-1pf3x8a-0 { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; - width: 2.4rem; - cursor: pointer; - padding-left: 0.4rem; -} - -.c0 .sc-1pf3x8a-0 * { - fill: #435465; -} -
Column 1
@@ -358,14 +253,12 @@ exports[`Card Table HeadCell should call onSortChange with asc order when clicke .c6 { overflow: visible; font-size: 2.4rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c6 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -375,9 +268,6 @@ exports[`Card Table HeadCell should call onSortChange with asc order when clicke color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -386,31 +276,16 @@ exports[`Card Table HeadCell should call onSortChange with asc order when clicke .c2 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c0 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -424,7 +299,6 @@ exports[`Card Table HeadCell should call onSortChange with asc order when clicke left: 0; background-color: #3872D2; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -442,18 +316,13 @@ exports[`Card Table HeadCell should call onSortChange with asc order when clicke } .c0 .c3 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #3872D2; } .c0 .c5 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; width: 2.4rem; cursor: pointer; @@ -469,6 +338,7 @@ exports[`Card Table HeadCell should call onSortChange with asc order when clicke
Demo
@@ -504,14 +377,12 @@ exports[`Card Table HeadCell should call onSortChange with desc order when click .c6 { overflow: visible; font-size: 2.4rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c6 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -521,9 +392,6 @@ exports[`Card Table HeadCell should call onSortChange with desc order when click color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -532,31 +400,16 @@ exports[`Card Table HeadCell should call onSortChange with desc order when click .c2 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c0 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -570,7 +423,6 @@ exports[`Card Table HeadCell should call onSortChange with desc order when click left: 0; background-color: #3872D2; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -588,18 +440,13 @@ exports[`Card Table HeadCell should call onSortChange with desc order when click } .c0 .c3 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #3872D2; } .c0 .c5 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; width: 2.4rem; cursor: pointer; @@ -615,6 +462,7 @@ exports[`Card Table HeadCell should call onSortChange with desc order when click
Demo
@@ -652,9 +503,6 @@ exports[`Card Table HeadCell should render properly with dark background and dro color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -663,31 +511,16 @@ exports[`Card Table HeadCell should render properly with dark background and dro .c2 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c0 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -701,7 +534,6 @@ exports[`Card Table HeadCell should render properly with dark background and dro left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -714,38 +546,19 @@ exports[`Card Table HeadCell should render properly with dark background and dro color: #5687D9; } -.c0 .c1:hover .sc-1pf3x8a-0 * { - fill: #5687D9; -} - .c0 .c3 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #435465; } -.c0 .sc-1pf3x8a-0 { - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; - width: 2.4rem; - cursor: pointer; - padding-left: 0.4rem; -} - -.c0 .sc-1pf3x8a-0 * { - fill: #435465; -} -
Demo
@@ -768,14 +584,12 @@ exports[`Card Table HeadCell should render properly with hover state 1`] = ` .c6 { overflow: visible; font-size: 2rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c6 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -785,9 +599,6 @@ exports[`Card Table HeadCell should render properly with hover state 1`] = ` color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -796,31 +607,16 @@ exports[`Card Table HeadCell should render properly with hover state 1`] = ` .c2 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c0 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -834,7 +630,6 @@ exports[`Card Table HeadCell should render properly with hover state 1`] = ` left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -852,18 +647,13 @@ exports[`Card Table HeadCell should render properly with hover state 1`] = ` } .c0 .c3 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #607890; } .c0 .c5 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; width: 2.4rem; cursor: pointer; @@ -879,6 +669,7 @@ exports[`Card Table HeadCell should render properly with hover state 1`] = `
Demo
@@ -914,14 +708,12 @@ exports[`Card Table HeadCell should render properly with light background and dr .c6 { overflow: visible; font-size: 2rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c6 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -931,9 +723,6 @@ exports[`Card Table HeadCell should render properly with light background and dr color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -942,31 +731,16 @@ exports[`Card Table HeadCell should render properly with light background and dr .c2 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c0 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -980,7 +754,6 @@ exports[`Card Table HeadCell should render properly with light background and dr left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -998,18 +771,13 @@ exports[`Card Table HeadCell should render properly with light background and dr } .c0 .c3 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #607890; } .c0 .c5 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; width: 2.4rem; cursor: pointer; @@ -1025,6 +793,7 @@ exports[`Card Table HeadCell should render properly with light background and dr
Demo
diff --git a/packages/core/src/components/CardTable/Head/__snapshots__/Head.test.tsx.snap b/packages/core/src/components/CardTable/Head/__snapshots__/Head.test.tsx.snap index 19877326a..1449db6f1 100644 --- a/packages/core/src/components/CardTable/Head/__snapshots__/Head.test.tsx.snap +++ b/packages/core/src/components/CardTable/Head/__snapshots__/Head.test.tsx.snap @@ -10,14 +10,12 @@ exports[`Card Table Head should render properly with dark background 1`] = ` .c7 { overflow: visible; font-size: 2rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c7 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -27,9 +25,6 @@ exports[`Card Table Head should render properly with dark background 1`] = ` color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -38,31 +33,16 @@ exports[`Card Table Head should render properly with dark background 1`] = ` .c3 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c1 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -76,7 +56,6 @@ exports[`Card Table Head should render properly with dark background 1`] = ` left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -94,18 +73,13 @@ exports[`Card Table Head should render properly with dark background 1`] = ` } .c1 .c4 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #435465; } .c1 .c6 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; width: 2.4rem; cursor: pointer; @@ -121,8 +95,10 @@ exports[`Card Table Head should render properly with dark background 1`] = `
Patient Info
@@ -149,6 +128,7 @@ exports[`Card Table Head should render properly with dark background 1`] = `
RxInfo
@@ -190,14 +173,12 @@ exports[`Card Table Head should render properly with light background 1`] = ` .c7 { overflow: visible; font-size: 2rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c7 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -207,9 +188,6 @@ exports[`Card Table Head should render properly with light background 1`] = ` color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -218,31 +196,16 @@ exports[`Card Table Head should render properly with light background 1`] = ` .c3 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c1 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -256,7 +219,6 @@ exports[`Card Table Head should render properly with light background 1`] = ` left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -274,18 +236,13 @@ exports[`Card Table Head should render properly with light background 1`] = ` } .c1 .c4 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #607890; } .c1 .c6 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; width: 2.4rem; cursor: pointer; @@ -301,8 +258,10 @@ exports[`Card Table Head should render properly with light background 1`] = `
Patient Info
@@ -329,6 +291,7 @@ exports[`Card Table Head should render properly with light background 1`] = `
RxInfo
diff --git a/packages/core/src/components/CardTable/__snapshots__/CardTable.test.tsx.snap b/packages/core/src/components/CardTable/__snapshots__/CardTable.test.tsx.snap index 9e7bf072c..8f93341f5 100644 --- a/packages/core/src/components/CardTable/__snapshots__/CardTable.test.tsx.snap +++ b/packages/core/src/components/CardTable/__snapshots__/CardTable.test.tsx.snap @@ -6,9 +6,6 @@ exports[`CardTable should render properly with grey background 1`] = ` color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -20,9 +17,6 @@ exports[`CardTable should render properly with grey background 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -32,20 +26,9 @@ exports[`CardTable should render properly with grey background 1`] = ` .c10 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; } @@ -64,21 +47,20 @@ exports[`CardTable should render properly with grey background 1`] = ` border-radius: 0.8rem; margin-bottom: 0.8rem; background-color: white; - -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; border: 0.1rem solid #ffffff; box-shadow: 0 0.2rem 0.8rem rgba(176,188,200,0.2); } .c9:hover { - box-shadow: 0 0.4rem 0.8rem rgba(176,188,200,0.6); + box-shadow: 0 0.4rem 0.8rem rgba(176, 188, 200, 0.6); } -.c9:nth-child(odd) { +.c9 :nth-child(odd) { background: #ffffff; } -.c9:nth-child(even) { +.c9 :nth-child(even) { background: #ffffff; } @@ -95,45 +77,28 @@ exports[`CardTable should render properly with grey background 1`] = ` .c8 { overflow: visible; font-size: 2rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c8 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } .c4 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c2 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -147,7 +112,6 @@ exports[`CardTable should render properly with grey background 1`] = ` left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -165,18 +129,13 @@ exports[`CardTable should render properly with grey background 1`] = ` } .c2 .c5 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #435465; } .c2 .c7 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; width: 2.4rem; cursor: pointer; @@ -194,8 +153,10 @@ exports[`CardTable should render properly with grey background 1`] = `
Patient Info
@@ -222,6 +186,7 @@ exports[`CardTable should render properly with grey background 1`] = `
RxInfo
@@ -252,22 +220,29 @@ exports[`CardTable should render properly with grey background 1`] = `
Oli Bob Metaformin @@ -285,9 +260,6 @@ exports[`CardTable should render properly with white background 1`] = ` color: inherit; font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: initial; @@ -299,9 +271,6 @@ exports[`CardTable should render properly with white background 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -311,20 +280,9 @@ exports[`CardTable should render properly with white background 1`] = ` .c10 { padding: 0; padding: 1.5rem 2.4rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; overflow: hidden; } @@ -343,21 +301,20 @@ exports[`CardTable should render properly with white background 1`] = ` border-radius: 0.8rem; margin-bottom: 0.8rem; background-color: white; - -webkit-transition: box-shadow 100ms ease-out; transition: box-shadow 100ms ease-out; border: 0.1rem solid #dfe4e9; box-shadow: none; } .c9:hover { - box-shadow: 0px 0.2rem 0.4rem rgba(176,188,200,0.6); + box-shadow: 0px 0.2rem 0.4rem rgba(176, 188, 200, 0.6); } -.c9:nth-child(odd) { +.c9 :nth-child(odd) { background: #F7F8F9; } -.c9:nth-child(even) { +.c9 :nth-child(even) { background: #ffffff; } @@ -374,45 +331,28 @@ exports[`CardTable should render properly with white background 1`] = ` .c8 { overflow: visible; font-size: 2rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c8 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } .c4 { padding: 1rem 1.6rem; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c2 { padding: 0 0.8rem; margin: 1.4rem 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; position: relative; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -426,7 +366,6 @@ exports[`CardTable should render properly with white background 1`] = ` left: 0; background-color: transparent; height: 0.2rem; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; border-radius: 0.2rem 0.2rem 0 0; } @@ -444,18 +383,13 @@ exports[`CardTable should render properly with white background 1`] = ` } .c2 .c5 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; display: inline; color: #607890; } .c2 .c7 { - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; width: 2.4rem; cursor: pointer; @@ -473,8 +407,10 @@ exports[`CardTable should render properly with white background 1`] = `
Patient Info
@@ -501,6 +440,7 @@ exports[`CardTable should render properly with white background 1`] = `
RxInfo
@@ -531,22 +474,29 @@ exports[`CardTable should render properly with white background 1`] = `
Oli Bob Metaformin diff --git a/packages/core/src/components/CardTable/docs/CardTable.stories.tsx b/packages/core/src/components/CardTable/docs/CardTable.stories.tsx index 3c67db5a1..6b3f4447f 100644 --- a/packages/core/src/components/CardTable/docs/CardTable.stories.tsx +++ b/packages/core/src/components/CardTable/docs/CardTable.stories.tsx @@ -1,18 +1,18 @@ import { CardTableTheme, defaultTheme } from '@medly-components/theme'; +import type { FCC } from 'react'; import { useCallback, useState } from 'react'; import { CardTable } from '../CardTable'; import { ColumnConfig, SortOrder } from '../types'; +import { DarkBackground } from './GlobalStyle.styled'; import columns from './columns'; import data from './data'; import { filterData } from './filterData'; -import { DarkBackground } from './GlobalStyle.styled'; -import type { FC } from 'react'; -export const Theme: FC = () => null; +export const Theme: FCC = () => null; Theme.defaultProps = { ...defaultTheme.cardTable }; -export const ColumnConfigInterface: FC = () => null; +export const ColumnConfigInterface: FCC = () => null; ColumnConfigInterface.defaultProps = { fraction: 1, align: 'left' diff --git a/packages/core/src/components/CenterAlignedLoader/CenterAlignedLoader.tsx b/packages/core/src/components/CenterAlignedLoader/CenterAlignedLoader.tsx index 156ea92ef..a50d29b21 100644 --- a/packages/core/src/components/CenterAlignedLoader/CenterAlignedLoader.tsx +++ b/packages/core/src/components/CenterAlignedLoader/CenterAlignedLoader.tsx @@ -1,12 +1,12 @@ import { WithStyle } from '@medly-components/utils'; -import type { FC } from 'react'; +import type { FCC } from 'react'; import { memo, useMemo } from 'react'; import Text from '../Text'; import { CenterAligned, LoadingBox } from './CenterAlignedLoader.styled'; import Loader from './CircleLoader.svg'; import { CenterAlignedLoaderProps } from './types'; -const Component: FC = memo(({ loader, withLoadingBox, loadingMessage, ...restProps }) => { +const Component: FCC = memo(({ loader, withLoadingBox, loadingMessage, ...restProps }) => { const children = useMemo( () => withLoadingBox ? ( @@ -33,4 +33,4 @@ Component.defaultProps = { withOverlay: false, position: 'relative' }; -export const CenterAlignedLoader: FC & WithStyle = Object.assign(Component, { Style: CenterAligned }); +export const CenterAlignedLoader: FCC & WithStyle = Object.assign(Component, { Style: CenterAligned }); diff --git a/packages/core/src/components/Checkbox/Checkbox.stories.tsx b/packages/core/src/components/Checkbox/Checkbox.stories.tsx index aecd05a3f..7bc567309 100644 --- a/packages/core/src/components/Checkbox/Checkbox.stories.tsx +++ b/packages/core/src/components/Checkbox/Checkbox.stories.tsx @@ -1,5 +1,5 @@ import { CheckboxTheme, defaultTheme } from '@medly-components/theme'; -import type { FC } from 'react'; +import type { FCC } from 'react'; import { useState } from 'react'; import Button from '../Button'; import { Checkbox } from './Checkbox'; @@ -8,12 +8,12 @@ import { CheckboxProps } from './types'; export const labelPositions: Required['labelPosition'][] = ['left', 'right', 'top', 'bottom']; export const sizes: Required['size'][] = ['XS', 'S', 'M', 'L', 'XL']; -export const ThemeInterface: FC = () => null; +export const ThemeInterface: FCC = () => null; ThemeInterface.defaultProps = { ...defaultTheme.checkbox }; -export const FormWithCheckbox: FC = props => { +export const FormWithCheckbox: FCC = props => { const [checked, setChecked] = useState(), onChangeHandler = (e: React.ChangeEvent) => setChecked(e.target.checked), handleSubmit = (e: React.FormEvent) => e.preventDefault(); @@ -26,6 +26,3 @@ export const FormWithCheckbox: FC = props => { ); }; -FormWithCheckbox.defaultProps = { - label: 'By clicking Submit, I agree lorem ipsum' -}; diff --git a/packages/core/src/components/Checkbox/Checkbox.styled.tsx b/packages/core/src/components/Checkbox/Checkbox.styled.tsx index 92b46ff80..12f356ca9 100644 --- a/packages/core/src/components/Checkbox/Checkbox.styled.tsx +++ b/packages/core/src/components/Checkbox/Checkbox.styled.tsx @@ -1,6 +1,6 @@ import { SvgIcon } from '@medly-components/icons'; -import { CheckboxSizes, CheckboxTheme } from '@medly-components/theme'; -import { centerAligned, WithThemeProp } from '@medly-components/utils'; +import { CheckboxSizes } from '@medly-components/theme'; +import { WithThemeProp, centerAligned } from '@medly-components/utils'; import { rgba } from 'polished'; import styled, { css } from 'styled-components'; import { getSelectorLabelPositionStyle } from '../Selectors'; @@ -10,40 +10,42 @@ import { CheckboxProps } from './types'; const getCheckboxSize = ({ theme, size }: { size?: CheckboxSizes } & WithThemeProp) => theme.checkbox.sizes[size || theme.checkbox.defaultSize]; -const activeStyle = ({ iconColor, hasError, disabled, bgColor }: CheckboxProps & CheckboxTheme) => { +const activeStyle = ({ hasError, disabled, theme }: CheckboxProps & WithThemeProp) => { const checkboxState = disabled ? 'disabled' : hasError ? 'error' : 'active'; return css` - border-color: ${bgColor[checkboxState]}; - background-color: ${bgColor[checkboxState]}; + border-color: ${theme.checkbox.bgColor[checkboxState]}; + background-color: ${theme.checkbox.bgColor[checkboxState]}; ${SvgIcon} { transform: scale(1); * { - fill: ${iconColor[checkboxState]}; + fill: ${theme.checkbox.iconColor[checkboxState]}; } } `; }; -const nonActiveStyle = ({ borderColor, hasError, disabled }: CheckboxProps & CheckboxTheme) => { +const nonActiveStyle = ({ theme, hasError, disabled }: CheckboxProps & WithThemeProp) => { const checkboxState = disabled ? 'disabled' : hasError ? 'error' : 'default'; return css` background-color: transparent; - border-color: ${borderColor[checkboxState]}; + border-color: ${theme.checkbox.borderColor[checkboxState]}; `; }; const getEventStyle = (event: 'hovered' | 'pressed' | 'focused') => - ({ isActive, hasError, borderColor, theme, bgColor }: CheckboxTheme & CheckboxProps & { isActive?: boolean } & WithThemeProp) => { + ({ isActive, hasError, theme }: CheckboxProps & { isActive?: boolean } & WithThemeProp) => { const state = hasError ? 'error' : 'active'; const borderColorEventValue = event === 'pressed' ? 'pressed' : state; const { blurRadius, spreadRadius } = theme.checkbox.boxShadow; return css` - box-shadow: 0 0 ${blurRadius} ${spreadRadius} ${rgba(borderColor[state], event === 'pressed' ? 0.5 : 0.35)}; - border-color: ${event !== 'focused' && isActive ? bgColor[event][state] : borderColor[borderColorEventValue]}; - background-color: ${isActive && event !== 'focused' && bgColor[event][state]}; + box-shadow: 0 0 ${blurRadius} ${spreadRadius} ${rgba(theme.checkbox.borderColor[state], event === 'pressed' ? 0.5 : 0.35)}; + border-color: ${event !== 'focused' && isActive + ? theme.checkbox.bgColor[event][state] + : theme.checkbox.borderColor[borderColorEventValue]}; + background-color: ${isActive && event !== 'focused' && theme.checkbox.bgColor[event][state]}; `; }; @@ -68,7 +70,7 @@ export const StyledCheckbox = styled.div` } `; -export const HiddenCheckbox = styled.input.attrs(({ theme }) => ({ type: 'checkbox', ...theme.checkbox }))` +export const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })` opacity: 0; margin: 0; top: 0; @@ -93,7 +95,8 @@ export const HiddenCheckbox = styled.input.attrs(({ theme }) => ({ type: 'checkb } &:not(:checked) ~ ${StyledCheckbox} { - border-color: ${({ hasError, borderColor, indeterminate }) => !indeterminate && borderColor[hasError ? 'error' : 'active']}; + border-color: ${({ hasError, theme, indeterminate }) => + !indeterminate && theme.checkbox.borderColor[hasError ? 'error' : 'active']}; } } } @@ -115,9 +118,7 @@ export const ErrorText = styled(Text)<{ disabled?: boolean }>` margin-bottom: 0.5rem; `; -export const CheckboxWithLabelWrapper = styled('label').attrs(({ theme }) => ({ ...theme.checkbox }))< - CheckboxProps & { isActive?: boolean; isHovered?: boolean } ->` +export const CheckboxWithLabelWrapper = styled('label')` display: ${({ fullWidth }) => (fullWidth ? 'flex' : 'inline-flex')}; cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')}; * { diff --git a/packages/core/src/components/Checkbox/Checkbox.tsx b/packages/core/src/components/Checkbox/Checkbox.tsx index efef6d12c..c4e912d46 100644 --- a/packages/core/src/components/Checkbox/Checkbox.tsx +++ b/packages/core/src/components/Checkbox/Checkbox.tsx @@ -1,11 +1,11 @@ import { CheckIcon, MinimizeIcon } from '@medly-components/icons'; -import { isValidStringOrNumber, useCombinedRefs, useKeyPress, WithStyle } from '@medly-components/utils'; -import { ChangeEvent, FC, FocusEvent, forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { WithStyle, isValidStringOrNumber, useCombinedRefs, useKeyPress } from '@medly-components/utils'; +import { ChangeEvent, FCC, FocusEvent, forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { SelectorLabel } from '../Selectors'; import * as Styled from './Checkbox.styled'; import { CheckboxProps } from './types'; -const Component: FC = memo( +const Component: FCC = memo( forwardRef((props, ref) => { const { id, @@ -27,7 +27,10 @@ const Component: FC = memo( const [builtInErrorMessage, setErrorMessage] = useState(''), isSelectionKeyPressed = useKeyPress(' '), - inputId = useMemo(() => id || label, [id, label]), + inputId = useMemo(() => { + const _id = id || label; + return typeof _id === 'string' ? _id : ''; + }, [id, label]), inputRef = useCombinedRefs(ref, useRef(null)), isActive = useMemo( () => inputProps.checked || inputProps.defaultChecked || indeterminate, @@ -119,4 +122,4 @@ const Component: FC = memo( Component.displayName = 'Checkbox'; Component.defaultProps = { size: 'S', label: '', labelPosition: 'right' }; -export const Checkbox: FC & WithStyle = Object.assign(Component, { Style: Styled.CheckboxWithLabelWrapper }); +export const Checkbox: FCC & WithStyle = Object.assign(Component, { Style: Styled.CheckboxWithLabelWrapper }); diff --git a/packages/core/src/components/Checkbox/__snapshots__/checkbox.test.tsx.snap b/packages/core/src/components/Checkbox/__snapshots__/checkbox.test.tsx.snap index 7c9f17f8a..195caa015 100644 --- a/packages/core/src/components/Checkbox/__snapshots__/checkbox.test.tsx.snap +++ b/packages/core/src/components/Checkbox/__snapshots__/checkbox.test.tsx.snap @@ -4,14 +4,12 @@ exports[`Checkbox component should render correctly with bottom labelPosition 1` .c8 { overflow: visible; font-size: 2.4rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c8 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -21,9 +19,6 @@ exports[`Checkbox component should render correctly with bottom labelPosition 1` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -31,9 +26,6 @@ exports[`Checkbox component should render correctly with bottom labelPosition 1` } .c2 { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; cursor: inherit; color: inherit; @@ -46,29 +38,16 @@ exports[`Checkbox component should render correctly with bottom labelPosition 1` width: 100%; height: 100%; border-radius: 22.2%; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; } .c6 .c7 { pointer-events: none; z-index: 1; - -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; - -webkit-transform: scale(0); - -ms-transform: scale(0); transform: scale(0); width: 100%; height: 100%; @@ -86,39 +65,35 @@ exports[`Checkbox component should render correctly with bottom labelPosition 1` position: absolute; } -.c4:checked ~ .c5 { +.c4:checked~.c5 { border-color: #3872D2; background-color: #3872D2; } -.c4:checked ~ .c5 .c7 { - -webkit-transform: scale(1); - -ms-transform: scale(1); +.c4:checked~.c5 .c7 { transform: scale(1); } -.c4:checked ~ .c5 .c7 * { +.c4:checked~.c5 .c7 * { fill: #ffffff; } -.c4:not(:checked) ~ .c5 { +.c4:not(:checked)~.c5 { background-color: transparent; border-color: #13181D; } -.c4:not(:disabled):focus ~ .c5 { +.c4:not(:disabled):focus~.c5 { box-shadow: 0 0 0.8rem 0 rgba(56,114,210,0.35); border-color: #3872D2; } -.c4:not(:disabled):focus:not(:checked) ~ .c5 { +.c4:not(:disabled):focus:not(:checked)~.c5 { border-color: #3872D2; } .c3 { margin: 0.3rem; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; flex-shrink: 0; width: 1.8rem; height: 1.8rem; @@ -126,18 +101,10 @@ exports[`Checkbox component should render correctly with bottom labelPosition 1` } .c0 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; cursor: pointer; padding: 0.8rem; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; justify-content: center; - -webkit-flex-direction: column-reverse; - -ms-flex-direction: column-reverse; flex-direction: column-reverse; } @@ -156,16 +123,18 @@ exports[`Checkbox component should render correctly with bottom labelPosition 1` }
-
- Dummy @@ -358,9 +296,6 @@ exports[`Cell should render text properly 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -370,20 +305,11 @@ exports[`Cell should render text properly 1`] = ` .c0 { width: 100%; height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; overflow: hidden; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; opacity: 1; padding: 1.2rem 1.6rem; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -396,9 +322,12 @@ exports[`Cell should render text properly 1`] = `
Dummy @@ -412,9 +341,6 @@ exports[`Cell should render tooltip properly 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -424,20 +350,11 @@ exports[`Cell should render tooltip properly 1`] = ` .c0 { width: 100%; height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; overflow: hidden; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; opacity: 1; padding: 1.2rem 1.6rem; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -450,9 +367,13 @@ exports[`Cell should render tooltip properly 1`] = `
hello diff --git a/packages/core/src/components/Table/Body/GroupedRow/ContentRow/ContentRow.tsx b/packages/core/src/components/Table/Body/GroupedRow/ContentRow/ContentRow.tsx index 581a9b008..1b487fb70 100644 --- a/packages/core/src/components/Table/Body/GroupedRow/ContentRow/ContentRow.tsx +++ b/packages/core/src/components/Table/Body/GroupedRow/ContentRow/ContentRow.tsx @@ -1,11 +1,11 @@ +import type { FCC } from 'react'; import { memo, useCallback, useContext } from 'react'; import { TableComponentsCommonPropsContext } from '../../../context'; import Row from '../../Row'; import { BlankCell, ContentRowStyled, DataCell } from './ContentRow.styled'; import { ContentRowProps } from './types'; -import type { FC } from 'react'; -export const ContentRow: FC = memo(props => { +export const ContentRow: FCC = memo(props => { const { data, ...restProps } = props, { rowIdentifier, size } = useContext(TableComponentsCommonPropsContext); diff --git a/packages/core/src/components/Table/Body/GroupedRow/GroupedRow.tsx b/packages/core/src/components/Table/Body/GroupedRow/GroupedRow.tsx index 46b641f69..3c8bb596c 100644 --- a/packages/core/src/components/Table/Body/GroupedRow/GroupedRow.tsx +++ b/packages/core/src/components/Table/Body/GroupedRow/GroupedRow.tsx @@ -1,4 +1,5 @@ import { useUpdateEffect } from '@medly-components/utils'; +import type { FCC } from 'react'; import { memo, useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { loadingBodyData } from '../../constants'; import { TableComponentsCommonPropsContext } from '../../context'; @@ -7,9 +8,8 @@ import useRowSelector from '../../useRowSelector'; import ContentRow from './ContentRow'; import TitleRow from './TitleRow'; import { GroupedRowProps } from './types'; -import type { FC } from 'react'; -export const GroupedRow: FC = memo(props => { +export const GroupedRow: FCC = memo(props => { const tableProps = useContext(TableComponentsCommonPropsContext), { columns, diff --git a/packages/core/src/components/Table/Body/GroupedRow/TitleRow/TitleRow.tsx b/packages/core/src/components/Table/Body/GroupedRow/TitleRow/TitleRow.tsx index 0750ef306..05c26f81d 100644 --- a/packages/core/src/components/Table/Body/GroupedRow/TitleRow/TitleRow.tsx +++ b/packages/core/src/components/Table/Body/GroupedRow/TitleRow/TitleRow.tsx @@ -1,4 +1,5 @@ import { ExpandMoreIcon } from '@medly-components/icons'; +import type { FCC } from 'react'; import { memo, useContext, useEffect, useRef, useState } from 'react'; import Text from '../../../../Text'; import { TableComponentsCommonPropsContext } from '../../../context'; @@ -7,9 +8,8 @@ import RowActionsCell from '../../Cell/RowActionsCell'; import { LoadingDiv } from '../../Cell/Styled'; import { CountChip, ExpansionCell, Row, SecondaryContent, TitleCell } from './TitleRow.styled'; import { TitleRowProps } from './types'; -import type { FC } from 'react'; -export const TitleRow: FC = memo(props => { +export const TitleRow: FCC = memo(props => { const [tableWidth, setTableWidth] = useState(), { data, isRowExpanded, onClick, onRowSelection, isRowIndeterminate, ...restProps } = props, { diff --git a/packages/core/src/components/Table/Body/Row/Row.styled.tsx b/packages/core/src/components/Table/Body/Row/Row.styled.tsx index 3166f00c7..97c29d55a 100644 --- a/packages/core/src/components/Table/Body/Row/Row.styled.tsx +++ b/packages/core/src/components/Table/Body/Row/Row.styled.tsx @@ -132,7 +132,7 @@ const normalStyle = css` ${({ withRowSeparators }) => withRowSeparators && rowSeparatorStyle} `; -export const Row = styled('tr').attrs(({ gridTemplateColumns }: GridTemplateProps) => ({ +export const Row = styled('tr').attrs(({ gridTemplateColumns }: GridTemplateProps) => ({ style: { gridTemplateColumns } diff --git a/packages/core/src/components/Table/Body/Row/Row.tsx b/packages/core/src/components/Table/Body/Row/Row.tsx index 6ff00ca0c..46428a30c 100644 --- a/packages/core/src/components/Table/Body/Row/Row.tsx +++ b/packages/core/src/components/Table/Body/Row/Row.tsx @@ -1,7 +1,7 @@ -import type { FC, KeyboardEvent } from 'react'; +import type { FCC, KeyboardEvent } from 'react'; import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { TableComponentsCommonPropsContext } from '../../context'; import { GroupCell } from '../../GroupCell'; +import { TableComponentsCommonPropsContext } from '../../context'; import { getGridTemplateColumns, getNestedValue } from '../../helpers'; import { TableColumnConfig } from '../../types'; import Cell from '../Cell'; @@ -11,7 +11,7 @@ import RowHoverActionsCell from '../Cell/RowHoverActionsCell'; import * as Styled from './Row.styled'; import { RowProps } from './types'; -export const Row: FC = memo(props => { +export const Row: FCC = memo(props => { const [isRowHovered, setIsRowHovered] = useState(false), { id, diff --git a/packages/core/src/components/Table/Body/Row/__snapshots__/Row.test.tsx.snap b/packages/core/src/components/Table/Body/Row/__snapshots__/Row.test.tsx.snap index 97683c4b8..fd334ede3 100644 --- a/packages/core/src/components/Table/Body/Row/__snapshots__/Row.test.tsx.snap +++ b/packages/core/src/components/Table/Body/Row/__snapshots__/Row.test.tsx.snap @@ -1,32 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Row should render NoResult properly 1`] = ` -.c1 { - text-align: center; - padding: 0.8rem 1.6rem; - width: 200px; -} - .c0 { display: grid; position: relative; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; outline: none; cursor: inherit; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } .c0.c0:hover { @@ -34,23 +15,35 @@ exports[`Row should render NoResult properly 1`] = ` } .c0:nth-child(odd), -.c0:nth-child(odd) > * { +.c0:nth-child(odd)>* { background-color: #F7F8F9; color: #13181D; } .c0:nth-child(even), -.c0:nth-child(even) > * { +.c0:nth-child(even)>* { background-color: #ffffff; color: #13181D; } +.c2 { + text-align: center; + padding: 0.8rem 1.6rem; + width: 200px; +} + +.c1 { + justify-content: center; + align-items: center; +} +
Dummy @@ -60,21 +53,10 @@ exports[`Row should render NoResult properly 1`] = ` `; exports[`Row should render NoResult with Card design also 1`] = ` -.c1 { - text-align: center; - padding: 0.8rem 1.6rem; - width: 200px; -} - .c0 { display: grid; position: relative; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; outline: none; cursor: inherit; @@ -83,38 +65,29 @@ exports[`Row should render NoResult with Card design also 1`] = ` margin-left: 0.8rem; margin-right: 0.8rem; box-shadow: 0 0.2rem 0.8rem rgba(96,120,144,0.2); - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; } .c0, -.c0 > * { +.c0>* { background-color: #ffffff; color: #13181D; } -.c0.c0.c0 > *:first-child, -.c0.c0.c0 > *:first-child::before { - -webkit-transition: border-radius 200ms ease-in; +.c0.c0.c0>*:first-child, +.c0.c0.c0>*:first-child::before { transition: border-radius 200ms ease-in; border-radius: 0.8rem 0 0 0.8rem; } -.c0.c0.c0 > *:first-child::before { +.c0.c0.c0>*:first-child::before { width: 0.8rem; } -.c0.c0.c0 > *:last-child { +.c0.c0.c0>*:last-child { border-radius: 0 0.8rem 0.8rem 0; } -.c0.c0.c0 > *:nth-last-child(2)::before { +.c0.c0.c0>*:nth-last-child(2)::before { width: 0.8rem; border-radius: 0 0 0 0.8rem; } @@ -127,12 +100,24 @@ exports[`Row should render NoResult with Card design also 1`] = ` margin-bottom: 0.8rem; } +.c2 { + text-align: center; + padding: 0.8rem 1.6rem; + width: 200px; +} + +.c1 { + justify-content: center; + align-items: center; +} +
Dummy @@ -145,12 +130,7 @@ exports[`Row should render row properly 1`] = ` .c0 { display: grid; position: relative; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; outline: none; cursor: inherit; @@ -161,13 +141,13 @@ exports[`Row should render row properly 1`] = ` } .c0:nth-child(odd), -.c0:nth-child(odd) > * { +.c0:nth-child(odd)>* { background-color: #F7F8F9; color: #13181D; } .c0:nth-child(even), -.c0:nth-child(even) > * { +.c0:nth-child(even)>* { background-color: #ffffff; color: #13181D; } diff --git a/packages/core/src/components/Table/Body/__snapshots__/Body.test.tsx.snap b/packages/core/src/components/Table/Body/__snapshots__/Body.test.tsx.snap index 007ffcd44..9f4ebceec 100644 --- a/packages/core/src/components/Table/Body/__snapshots__/Body.test.tsx.snap +++ b/packages/core/src/components/Table/Body/__snapshots__/Body.test.tsx.snap @@ -3,8 +3,6 @@ exports[`Row should render tbody properly with default props 1`] = ` .c0 { display: block; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; } @@ -13,9 +11,6 @@ exports[`Row should render tbody properly with default props 1`] = ` color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -34,20 +29,11 @@ exports[`Row should render tbody properly with default props 1`] = ` .c2 { width: 100%; height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; overflow: hidden; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; opacity: 1; padding: 0.8rem 1.6rem; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } @@ -60,20 +46,11 @@ exports[`Row should render tbody properly with default props 1`] = ` .c6 { width: 100%; height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; overflow: hidden; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; opacity: 1; padding: 0.8rem 1.6rem; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; justify-content: flex-end; } @@ -86,12 +63,7 @@ exports[`Row should render tbody properly with default props 1`] = ` .c1 { display: grid; position: relative; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; outline: none; cursor: inherit; @@ -102,13 +74,13 @@ exports[`Row should render tbody properly with default props 1`] = ` } .c1:nth-child(odd), -.c1:nth-child(odd) > * { +.c1:nth-child(odd)>* { background-color: #F7F8F9; color: #13181D; } .c1:nth-child(even), -.c1:nth-child(even) > * { +.c1:nth-child(even)>* { background-color: #ffffff; color: #13181D; } @@ -116,12 +88,7 @@ exports[`Row should render tbody properly with default props 1`] = ` .c7 { display: grid; position: relative; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; outline: none; cursor: inherit; @@ -132,13 +99,13 @@ exports[`Row should render tbody properly with default props 1`] = ` } .c7:nth-child(odd), -.c7:nth-child(odd) > * { +.c7:nth-child(odd)>* { background-color: #D7E3F6; color: #13181D; } .c7:nth-child(even), -.c7:nth-child(even) > * { +.c7:nth-child(even)>* { background-color: #D7E3F6; color: #13181D; } @@ -149,14 +116,19 @@ exports[`Row should render tbody properly with default props 1`] = ` >
Albus Percival Wulfric Brian Dumbledore @@ -164,23 +136,34 @@ exports[`Row should render tbody properly with default props 1`] = `
6
4 @@ -188,10 +171,15 @@ exports[`Row should render tbody properly with default props 1`] = `
12 @@ -199,19 +187,28 @@ exports[`Row should render tbody properly with default props 1`] = ` Yes 5 @@ -220,14 +217,19 @@ exports[`Row should render tbody properly with default props 1`] = `
Mary May @@ -235,23 +237,34 @@ exports[`Row should render tbody properly with default props 1`] = `
4
7 @@ -259,10 +272,15 @@ exports[`Row should render tbody properly with default props 1`] = `
1 @@ -270,19 +288,28 @@ exports[`Row should render tbody properly with default props 1`] = ` Yes 4 @@ -291,14 +318,19 @@ exports[`Row should render tbody properly with default props 1`] = `
Christine Lobowski @@ -306,23 +338,34 @@ exports[`Row should render tbody properly with default props 1`] = `
4
7 @@ -330,10 +373,15 @@ exports[`Row should render tbody properly with default props 1`] = `
42 @@ -341,19 +389,28 @@ exports[`Row should render tbody properly with default props 1`] = ` Yes 4 @@ -362,14 +419,19 @@ exports[`Row should render tbody properly with default props 1`] = `
Brendon Philips @@ -377,23 +439,34 @@ exports[`Row should render tbody properly with default props 1`] = `
10
2 @@ -401,10 +474,15 @@ exports[`Row should render tbody properly with default props 1`] = `
125 @@ -412,19 +490,28 @@ exports[`Row should render tbody properly with default props 1`] = ` Yes 4.5 @@ -433,14 +520,19 @@ exports[`Row should render tbody properly with default props 1`] = `
Margret Marmajuke @@ -448,23 +540,34 @@ exports[`Row should render tbody properly with default props 1`] = `
7
5 @@ -472,10 +575,15 @@ exports[`Row should render tbody properly with default props 1`] = `
16 @@ -483,19 +591,28 @@ exports[`Row should render tbody properly with default props 1`] = ` Yes 4 @@ -504,14 +621,19 @@ exports[`Row should render tbody properly with default props 1`] = `
Van Ng @@ -519,23 +641,34 @@ exports[`Row should render tbody properly with default props 1`] = `
9
2 @@ -543,10 +676,15 @@ exports[`Row should render tbody properly with default props 1`] = `
37 @@ -554,19 +692,28 @@ exports[`Row should render tbody properly with default props 1`] = ` No 4 @@ -575,14 +722,19 @@ exports[`Row should render tbody properly with default props 1`] = `
Duc Ng @@ -590,23 +742,34 @@ exports[`Row should render tbody properly with default props 1`] = `
10
3 @@ -614,10 +777,15 @@ exports[`Row should render tbody properly with default props 1`] = `
37 @@ -625,19 +793,28 @@ exports[`Row should render tbody properly with default props 1`] = ` No 4 diff --git a/packages/core/src/components/Table/ColumnConfiguration/ColumnConfiguration.tsx b/packages/core/src/components/Table/ColumnConfiguration/ColumnConfiguration.tsx index 81be49445..d810c2b69 100644 --- a/packages/core/src/components/Table/ColumnConfiguration/ColumnConfiguration.tsx +++ b/packages/core/src/components/Table/ColumnConfiguration/ColumnConfiguration.tsx @@ -1,12 +1,12 @@ +import type { FCC } from 'react'; +import { memo } from 'react'; import Checkbox from '../../Checkbox'; import CheckboxGroup from '../../CheckboxGroup'; import { TableColumnConfig } from '../types'; import { createOptions, createValues, updateColumns, updateConfig } from './helpers'; import { ColumnConfigurationProps } from './types'; -import type { FC } from 'react'; -import { memo } from 'react'; -const ColumnConfiguration: FC = memo(({ columns, onChange }) => { +const ColumnConfiguration: FCC = memo(({ columns, onChange }) => { const handleCheckboxClick = (fieldName: string) => () => onChange(updateConfig(columns, fieldName)), handleCheckboxGroupClick = (fieldName: string) => (fields: string[]) => { const newColumns = [...columns], diff --git a/packages/core/src/components/Table/Foot/Foot.tsx b/packages/core/src/components/Table/Foot/Foot.tsx index 65d351b8e..2d49d15be 100644 --- a/packages/core/src/components/Table/Foot/Foot.tsx +++ b/packages/core/src/components/Table/Foot/Foot.tsx @@ -1,11 +1,11 @@ -import type { FC } from 'react'; +import type { FCC } from 'react'; import { memo, useCallback, useContext, useMemo } from 'react'; import Text from '../../Text'; import { TableComponentsCommonPropsContext, TableStateContext } from '../context'; import { FootPagination, FootRow, TFoot } from './Foot.styled'; import { TableFootProps } from './types'; -export const Foot: FC = memo(props => { +export const Foot: FCC = memo(props => { const { tableSize } = props; const [{ activePage = 1 }, setTableState] = useContext(TableStateContext), { onPageChange, totalItems = 0, itemsPerPage = 20, showRowWithCardStyle, size } = useContext(TableComponentsCommonPropsContext), diff --git a/packages/core/src/components/Table/Foot/__snapshots__/Foot.test.tsx.snap b/packages/core/src/components/Table/Foot/__snapshots__/Foot.test.tsx.snap index 8d846ab4f..63a5cb416 100644 --- a/packages/core/src/components/Table/Foot/__snapshots__/Foot.test.tsx.snap +++ b/packages/core/src/components/Table/Foot/__snapshots__/Foot.test.tsx.snap @@ -1,45 +1,37 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Table Foot should render correctly with L size 1`] = ` -.c8 { +.c9 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; display: inline-block; } -.c9 { +.c10 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 700; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; display: inline-block; } -.c6 { +.c7 { overflow: visible; font-size: 2.4rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } -.c6 * { +.c7 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } @@ -47,13 +39,8 @@ exports[`Table Foot should render correctly with L size 1`] = ` .c2 { padding: 0; margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; list-style: none; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; } @@ -69,7 +56,7 @@ exports[`Table Foot should render correctly with L size 1`] = ` margin-left: 0.8rem; } -.c3 > li { +.c3>li { margin: 0; } @@ -79,18 +66,13 @@ exports[`Table Foot should render correctly with L size 1`] = ` width: 3.2rem; display: block; border-radius: 50%; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; border: none; padding: 0; text-align: center; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; color: #435465; background: #ffffff; - background: #ffffff; } .c4:hover { @@ -105,49 +87,46 @@ exports[`Table Foot should render correctly with L size 1`] = ` cursor: not-allowed; } -.c4 > .c5, -.c4 .c5 { +.c5 { + background: #ffffff; +} + +.c5>.c6, +.c5 .c6 { padding: 0.4rem; } -.c4 .c5 * { +.c5 .c6 * { fill: #435465; } -.c4:disabled { +.c5:disabled { background: #ffffff; } -.c4:disabled .c5 * { +.c5:disabled .c6 * { fill: #C7D0D8; } -.c4:not(:disabled):hover { +.c5:not(:disabled):hover { background: #F7F8F9; } -.c4:not(:disabled):hover .c5 * { +.c5:not(:disabled):hover .c6 * { fill: #303C48; } -.c4:not(:disabled):active { +.c5:not(:disabled):active { background: #eff2f4; } -.c4:not(:disabled):active .c5 * { +.c5:not(:disabled):active .c6 * { fill: #13181D; } .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - position: -webkit-sticky; position: sticky; left: 0; bottom: 0; @@ -159,20 +138,9 @@ exports[`Table Foot should render correctly with L size 1`] = ` .c1 { width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; justify-content: space-between; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; padding: 0 1.6rem 0 0.8rem; } @@ -181,11 +149,8 @@ exports[`Table Foot should render correctly with L size 1`] = ` padding: 0; } -.c1 td > .c7 { +.c1 td>.c8 { font-size: 1.2rem; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; } @@ -201,15 +166,17 @@ exports[`Table Foot should render correctly with L size 1`] = `
@@ -129,14 +135,12 @@ exports[`Minimap component should align slider controller with proper left offse exports[`Minimap component should not align slider controller when user performs mousedown on slider controller and performs mousemove on window 1`] = ` .c0 { - position: -webkit-sticky; position: sticky; display: inline; z-index: 5; left: calc(100% - 19rem); bottom: 9.5rem; opacity: .4; - -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } @@ -166,12 +170,7 @@ exports[`Minimap component should not align slider controller when user performs .c3 { height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; width: 110px; } @@ -182,7 +181,7 @@ exports[`Minimap component should not align slider controller when user performs background: #dfe4e9; } -.c5 + .c4 { +.c4+.c4 { margin-left: 0.234rem; } @@ -196,11 +195,11 @@ exports[`Minimap component should not align slider controller when user performs border: 2px solid #3872D2; } -.c6:hover { +.c6 :hover { border: 2px solid #3872D2; } -.c6:active { +.c6 :active { border: 2px solid #3872D2; } @@ -211,40 +210,53 @@ exports[`Minimap component should not align slider controller when user performs
@@ -256,14 +268,12 @@ exports[`Minimap component should not align slider controller when user performs exports[`Minimap component should position minimap at the right hand side bottom of the table on window resize 1`] = ` .c0 { - position: -webkit-sticky; position: sticky; display: inline; z-index: 5; left: calc(100% - 19rem); bottom: 9.5rem; opacity: .4; - -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } @@ -293,12 +303,7 @@ exports[`Minimap component should position minimap at the right hand side bottom .c3 { height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; width: 110px; } @@ -309,7 +314,7 @@ exports[`Minimap component should position minimap at the right hand side bottom background: #dfe4e9; } -.c5 + .c4 { +.c4+.c4 { margin-left: 0.234rem; } @@ -323,11 +328,11 @@ exports[`Minimap component should position minimap at the right hand side bottom border: 2px solid #3872D2; } -.c6:hover { +.c6 :hover { border: 2px solid #3872D2; } -.c6:active { +.c6 :active { border: 2px solid #3872D2; } @@ -338,40 +343,53 @@ exports[`Minimap component should position minimap at the right hand side bottom
@@ -382,14 +400,12 @@ exports[`Minimap component should position minimap at the right hand side bottom exports[`Minimap component should position minimap at the right hand side bottom of the table on window scroll 1`] = ` .c0 { - position: -webkit-sticky; position: sticky; display: inline; z-index: 5; left: calc(100% - 19rem); bottom: 9.5rem; opacity: .4; - -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } @@ -419,12 +435,7 @@ exports[`Minimap component should position minimap at the right hand side bottom .c3 { height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; width: 110px; } @@ -435,7 +446,7 @@ exports[`Minimap component should position minimap at the right hand side bottom background: #dfe4e9; } -.c5 + .c4 { +.c4+.c4 { margin-left: 0.234rem; } @@ -449,11 +460,11 @@ exports[`Minimap component should position minimap at the right hand side bottom border: 2px solid #3872D2; } -.c6:hover { +.c6 :hover { border: 2px solid #3872D2; } -.c6:active { +.c6 :active { border: 2px solid #3872D2; } @@ -464,40 +475,53 @@ exports[`Minimap component should position minimap at the right hand side bottom
@@ -508,14 +532,12 @@ exports[`Minimap component should position minimap at the right hand side bottom exports[`Minimap component should position slider controller at the correct position when dragged inside slider content 1`] = ` .c0 { - position: -webkit-sticky; position: sticky; display: inline; z-index: 5; left: calc(100% - 19rem); bottom: 9.5rem; opacity: .4; - -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } @@ -545,12 +567,7 @@ exports[`Minimap component should position slider controller at the correct posi .c3 { height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; width: 110px; } @@ -561,7 +578,7 @@ exports[`Minimap component should position slider controller at the correct posi background: #dfe4e9; } -.c5 + .c4 { +.c4+.c4 { margin-left: 0.234rem; } @@ -575,11 +592,11 @@ exports[`Minimap component should position slider controller at the correct posi border: 2px solid #3872D2; } -.c6:hover { +.c6 :hover { border: 2px solid #3872D2; } -.c6:active { +.c6 :active { border: 2px solid #3872D2; } @@ -590,40 +607,53 @@ exports[`Minimap component should position slider controller at the correct posi
@@ -635,14 +665,12 @@ exports[`Minimap component should position slider controller at the correct posi exports[`Minimap component should position slider controller at the extreme end of the slider content when dragged out of it 1`] = ` .c0 { - position: -webkit-sticky; position: sticky; display: inline; z-index: 5; left: calc(100% - 19rem); bottom: 9.5rem; opacity: .4; - -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } @@ -672,12 +700,7 @@ exports[`Minimap component should position slider controller at the extreme end .c3 { height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; width: 110px; } @@ -688,7 +711,7 @@ exports[`Minimap component should position slider controller at the extreme end background: #dfe4e9; } -.c5 + .c4 { +.c4+.c4 { margin-left: 0.234rem; } @@ -702,11 +725,11 @@ exports[`Minimap component should position slider controller at the extreme end border: 2px solid #3872D2; } -.c6:hover { +.c6 :hover { border: 2px solid #3872D2; } -.c6:active { +.c6 :active { border: 2px solid #3872D2; } @@ -717,40 +740,53 @@ exports[`Minimap component should position slider controller at the extreme end
@@ -762,14 +798,12 @@ exports[`Minimap component should position slider controller at the extreme end exports[`Minimap component should position slider controller when performed drag operation on it 1`] = ` .c0 { - position: -webkit-sticky; position: sticky; display: inline; z-index: 5; left: calc(100% - 19rem); bottom: 9.5rem; opacity: .4; - -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } @@ -799,12 +833,7 @@ exports[`Minimap component should position slider controller when performed drag .c3 { height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; width: 110px; } @@ -815,7 +844,7 @@ exports[`Minimap component should position slider controller when performed drag background: #dfe4e9; } -.c5 + .c4 { +.c4+.c4 { margin-left: 0.234rem; } @@ -829,11 +858,11 @@ exports[`Minimap component should position slider controller when performed drag border: 2px solid #3872D2; } -.c6:hover { +.c6 :hover { border: 2px solid #3872D2; } -.c6:active { +.c6 :active { border: 2px solid #3872D2; } @@ -844,40 +873,53 @@ exports[`Minimap component should position slider controller when performed drag
@@ -889,14 +931,12 @@ exports[`Minimap component should position slider controller when performed drag exports[`Minimap component should render properly 1`] = ` .c0 { - position: -webkit-sticky; position: sticky; display: inline; z-index: 5; left: calc(100% - 19rem); bottom: 9.5rem; opacity: .4; - -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } @@ -926,12 +966,7 @@ exports[`Minimap component should render properly 1`] = ` .c3 { height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; width: 110px; } @@ -942,7 +977,7 @@ exports[`Minimap component should render properly 1`] = ` background: #dfe4e9; } -.c5 + .c4 { +.c4+.c4 { margin-left: 0.234rem; } @@ -956,11 +991,11 @@ exports[`Minimap component should render properly 1`] = ` border: 2px solid #3872D2; } -.c6:hover { +.c6 :hover { border: 2px solid #3872D2; } -.c6:active { +.c6 :active { border: 2px solid #3872D2; } @@ -971,40 +1006,53 @@ exports[`Minimap component should render properly 1`] = `
@@ -1015,14 +1063,12 @@ exports[`Minimap component should render properly 1`] = ` exports[`Minimap component should stop slider controller positioning when we move cursor out of the window 1`] = ` .c0 { - position: -webkit-sticky; position: sticky; display: inline; z-index: 5; left: calc(100% - 19rem); bottom: 9.5rem; opacity: .4; - -webkit-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } @@ -1052,12 +1098,7 @@ exports[`Minimap component should stop slider controller positioning when we mov .c3 { height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; width: 110px; } @@ -1068,7 +1109,7 @@ exports[`Minimap component should stop slider controller positioning when we mov background: #dfe4e9; } -.c5 + .c4 { +.c4+.c4 { margin-left: 0.234rem; } @@ -1082,11 +1123,11 @@ exports[`Minimap component should stop slider controller positioning when we mov border: 2px solid #3872D2; } -.c6:hover { +.c6 :hover { border: 2px solid #3872D2; } -.c6:active { +.c6 :active { border: 2px solid #3872D2; } @@ -1097,40 +1138,53 @@ exports[`Minimap component should stop slider controller positioning when we mov
diff --git a/packages/core/src/components/Table/Table.tsx b/packages/core/src/components/Table/Table.tsx index c35830d54..3dba4bf0e 100644 --- a/packages/core/src/components/Table/Table.tsx +++ b/packages/core/src/components/Table/Table.tsx @@ -1,5 +1,5 @@ import { useCombinedRefs, useUpdateEffect, WithStyle } from '@medly-components/utils'; -import type { FC } from 'react'; +import type { FCC } from 'react'; import { forwardRef, memo, useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react'; import ActionBar from './ActionBar'; import Body from './Body'; @@ -16,7 +16,7 @@ import useGroupedRowSelector from './useGroupedRowSelector'; import useRowSelector from './useRowSelector'; import { useScrollState } from './useScrollState'; -export const Component: FC = memo( +export const Component: FCC = memo( forwardRef((props, ref) => { const { data, @@ -188,7 +188,7 @@ Component.defaultProps = { }; Component.displayName = 'Table'; -export const Table: FC & WithStyle & StaticProps = Object.assign(Component, { +export const Table: FCC & WithStyle & StaticProps = Object.assign(Component, { Style: TableStyled, ColumnConfiguration }); diff --git a/packages/core/src/components/Table/__snapshots__/Table.test.tsx.snap b/packages/core/src/components/Table/__snapshots__/Table.test.tsx.snap index eb1938d89..2cbca1cde 100644 --- a/packages/core/src/components/Table/__snapshots__/Table.test.tsx.snap +++ b/packages/core/src/components/Table/__snapshots__/Table.test.tsx.snap @@ -6,9 +6,6 @@ exports[`Table component pagination should call onPageChange prop on click on an color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -16,55 +13,54 @@ exports[`Table component pagination should call onPageChange prop on click on an display: inline-block; } -.c17 { +.c12 { + margin: 0; + color: inherit; + font-size: 1.2rem; + font-weight: 700; + letter-spacing: 0.12rem; + line-height: 2.0rem; + text-align: initial; + text-transform: uppercase; +} + +.c18 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; display: inline-block; } -.c27 { +.c29 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: center; display: inline-block; } -.c30 { +.c32 { margin: 0; color: inherit; font-size: 1.2rem; font-weight: 600; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; text-align: center; } -.c31 { +.c33 { margin: 0; color: inherit; font-size: 1.4rem; font-weight: 700; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; text-align: initial; @@ -74,45 +70,36 @@ exports[`Table component pagination should call onPageChange prop on click on an .c9 { overflow: visible; font-size: 2rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } .c9 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } -.c25 { +.c27 { overflow: visible; font-size: 2.4rem; - -webkit-transition: all 100ms linear; transition: all 100ms linear; cursor: inherit; } -.c25 * { +.c27 * { fill-opacity: 1; - -webkit-transition: all 100ms linear; transition: all 100ms linear; fill: #607890; } -.c29 { +.c31 { position: relative; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; display: inline-flex; } -.c14 { +.c15 { display: block; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; } @@ -122,9 +109,6 @@ exports[`Table component pagination should call onPageChange prop on click on an opacity: 0; font-size: 1.4rem; font-weight: 400; - -webkit-letter-spacing: 0rem; - -moz-letter-spacing: 0rem; - -ms-letter-spacing: 0rem; letter-spacing: 0rem; line-height: 2.2rem; font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif; @@ -188,12 +172,10 @@ exports[`Table component pagination should call onPageChange prop on click on an width: 1px; right: 0; top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); transform: translateY(-50%); } -.c18 { +.c19 { display: grid; position: relative; opacity: 1; @@ -202,16 +184,7 @@ exports[`Table component pagination should call onPageChange prop on click on an padding: 0; } -.c12 { - margin: 0; - font-size: 1.2rem; - font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; - letter-spacing: 0.12rem; - line-height: 2.0rem; - text-transform: uppercase; +.c13 { position: relative; text-align: center; padding: 0.9rem 1.6rem 1rem; @@ -222,7 +195,7 @@ exports[`Table component pagination should call onPageChange prop on click on an color: #435465; } -.c12::after { +.c13::after { content: ''; position: absolute; pointer-events: none; @@ -231,310 +204,210 @@ exports[`Table component pagination should call onPageChange prop on click on an width: calc(100% - 3.2rem); left: 50%; bottom: 0; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); transform: translateX(-50%); } -.c16 { +.c17 { width: 100%; height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; overflow: hidden; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; opacity: 1; padding: 1.2rem 1.6rem; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; } -.c16 .c6 { +.c17 .c6 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } -.c19 { +.c20 { width: 100%; height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; overflow: hidden; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; opacity: 1; padding: 1.2rem 1.6rem; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; justify-content: flex-end; } -.c19 .c6 { +.c20 .c6 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } -.c15 { +.c16 { display: grid; position: relative; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; outline: none; cursor: inherit; } -.c15.c15:hover { +.c16.c16:hover { z-index: 2; } -.c15:nth-child(odd), -.c15:nth-child(odd) > * { +.c16:nth-child(odd), +.c16:nth-child(odd)>* { background-color: #F7F8F9; color: #13181D; } -.c15:nth-child(even), -.c15:nth-child(even) > * { +.c16:nth-child(even), +.c16:nth-child(even)>* { background-color: #ffffff; color: #13181D; } -.c15:not(:last-child) { +.c16:not(:last-child) { border-bottom: 0.1rem solid #C7D0D8; } -.c22 { +.c23 { padding: 0; margin: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; list-style: none; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; } -.c22 li { +.c23 li { margin: 0 0.4rem; } -.c22 li:last-child { +.c23 li:last-child { margin-right: 0.8rem; } -.c22 li:first-child { +.c23 li:first-child { margin-left: 0.8rem; } -.c23 > li { +.c24>li { margin: 0; } -.c26 { +.c25 { margin: 0.4rem; height: 3.2rem; width: 3.2rem; display: block; border-radius: 50%; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; border: none; padding: 0; text-align: center; - -webkit-transition: all 100ms ease-out; transition: all 100ms ease-out; color: #435465; background: #ffffff; - color: #3872D2; - background: #EBF1FA; - border-radius: 50%; } -.c26:hover { +.c25:hover { cursor: pointer; } -.c26:focus { +.c25:focus { outline: none; } -.c26:disabled { +.c25:disabled { cursor: not-allowed; } -.c26:active { +.c28 { + color: #3872D2; + background: #EBF1FA; + border-radius: 50%; +} + +.c28:active { font-weight: 700; color: #13181D; background: #eff2f4; } -.c26 .c6 { +.c28 .c6 { font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: 700; } -.c28 { - margin: 0.4rem; - height: 3.2rem; - width: 3.2rem; - display: block; - border-radius: 50%; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: none; - padding: 0; - text-align: center; - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; - color: #435465; - background: #ffffff; +.c30 { color: #435465; background: #ffffff; border-radius: 50%; } -.c28:hover { - cursor: pointer; -} - -.c28:focus { - outline: none; -} - -.c28:disabled { - cursor: not-allowed; -} - -.c28:hover { +.c30:hover { color: #303C48; background: #F7F8F9; } -.c28:active { +.c30:active { font-weight: 700; color: #13181D; background: #eff2f4; } -.c28 .c6 { +.c30 .c6 { font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif; font-weight: 600; } -.c24 { - margin: 0.4rem; - height: 3.2rem; - width: 3.2rem; - display: block; - border-radius: 50%; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - border: none; - padding: 0; - text-align: center; - -webkit-transition: all 100ms ease-out; - transition: all 100ms ease-out; - color: #435465; - background: #ffffff; +.c26 { background: #ffffff; } -.c24:hover { - cursor: pointer; -} - -.c24:focus { - outline: none; -} - -.c24:disabled { - cursor: not-allowed; -} - -.c24 > .c8, -.c24 .c8 { +.c26>.c8, +.c26 .c8 { padding: 0.4rem; } -.c24 .c8 * { +.c26 .c8 * { fill: #435465; } -.c24:disabled { +.c26:disabled { background: #ffffff; } -.c24:disabled .c8 * { +.c26:disabled .c8 * { fill: #C7D0D8; } -.c24:not(:disabled):hover { +.c26:not(:disabled):hover { background: #F7F8F9; } -.c24:not(:disabled):hover .c8 * { +.c26:not(:disabled):hover .c8 * { fill: #303C48; } -.c24:not(:disabled):active { +.c26:not(:disabled):active { background: #eff2f4; } -.c24:not(:disabled):active .c8 * { +.c26:not(:disabled):active .c8 * { fill: #13181D; } -.c20 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; +.c21 { display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - position: -webkit-sticky; position: sticky; left: 0; bottom: 0; @@ -544,65 +417,39 @@ exports[`Table component pagination should call onPageChange prop on click on an border-top: 0.1rem solid #C7D0D8; } -.c21 { +.c22 { width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; justify-content: space-between; - -webkit-flex-direction: row; - -ms-flex-direction: row; flex-direction: row; padding: 0 1.6rem 0 0.8rem; } -.c21 td { +.c22 td { padding: 0; } -.c21 td > .c6 { +.c22 td>.c6 { font-size: 1.2rem; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; } .c2 { display: block; - position: -webkit-sticky; position: sticky; top: 0; z-index: 3; - min-width: -webkit-fit-content; - min-width: -moz-fit-content; min-width: fit-content; } .c4 { width: 100%; height: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; overflow: hidden; - -webkit-align-items: flex-end; - -webkit-box-align: flex-end; - -ms-flex-align: flex-end; align-items: flex-end; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; opacity: 1; position: relative; @@ -612,9 +459,6 @@ exports[`Table component pagination should call onPageChange prop on click on an .c4 .c6 { font-size: 1.2rem; font-weight: 700; - -webkit-letter-spacing: 0.12rem; - -moz-letter-spacing: 0.12rem; - -ms-letter-spacing: 0.12rem; letter-spacing: 0.12rem; line-height: 2.0rem; font-family: Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif; @@ -629,15 +473,9 @@ exports[`Table component pagination should call onPageChange prop on click on an width: 1px; right: 0; top: 50%; - -webkit-transform: translateY(-50%); - -ms-transform: translateY(-50%); transform: translateY(-50%); } -.c4 .sc-aaeo7e-4 { - padding: 0; -} - .c10 { margin: 0; padding: 0; @@ -651,19 +489,10 @@ exports[`Table component pagination should call onPageChange prop on click on an .c5 { border: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; min-height: 2rem; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; justify-content: flex-start; padding: 0.9rem 0.8rem; outline: unset; @@ -710,26 +539,15 @@ exports[`Table component pagination should call onPageChange prop on click on an .c5 .c8 { margin-left: 0.4rem; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; flex-shrink: 0; } -.c13 { +.c14 { border: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; display: flex; width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; align-items: center; min-height: 2rem; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; justify-content: flex-end; padding: 0.9rem 0.8rem; outline: unset; @@ -740,33 +558,33 @@ exports[`Table component pagination should call onPageChange prop on click on an color: #435465; } -.c13 .c8 * { +.c14 .c8 * { fill: #435465; } -.c13.c13.c13 { +.c14.c14.c14 { box-sizing: content-box; } -.c13:hover { +.c14:hover { background-color: #F7F8F9; color: #303C48; } -.c13:hover .c8 * { +.c14:hover .c8 * { fill: #303C48; } -.c13:active { +.c14:active { background-color: #eff2f4; color: #13181D; } -.c13:active .c8 * { +.c14:active .c8 * { fill: #13181D; } -.c13 .c6 { +.c14 .c6 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -774,26 +592,18 @@ exports[`Table component pagination should call onPageChange prop on click on an line-height: 1; } -.c13 .c8 { +.c14 .c8 { margin-left: 0.4rem; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; flex-shrink: 0; } .c3 { display: grid; - -webkit-align-items: end; - -webkit-box-align: end; - -ms-flex-align: end; align-items: end; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } -.c3 > * { +.c3>* { background-color: #ffffff; border-bottom: 1px solid #C7D0D8; } @@ -805,24 +615,36 @@ exports[`Table component pagination should call onPageChange prop on click on an 4
- Marks - +
Albus Percival Wulfric Brian Dumbledore
6
4 @@ -1045,30 +913,44 @@ exports[`Table component pagination should call onPageChange prop on click on an
12 Yes 5 @@ -1076,39 +958,55 @@ exports[`Table component pagination should call onPageChange prop on click on an
Mary May
4
7 @@ -1116,30 +1014,44 @@ exports[`Table component pagination should call onPageChange prop on click on an
1 Yes 4 @@ -1147,39 +1059,55 @@ exports[`Table component pagination should call onPageChange prop on click on an
Christine Lobowski
4
7 @@ -1187,30 +1115,44 @@ exports[`Table component pagination should call onPageChange prop on click on an
42 Yes 4 @@ -1218,39 +1160,55 @@ exports[`Table component pagination should call onPageChange prop on click on an
Brendon Philips
10
2 @@ -1258,30 +1216,44 @@ exports[`Table component pagination should call onPageChange prop on click on an
125 Yes 4.5 @@ -1289,39 +1261,55 @@ exports[`Table component pagination should call onPageChange prop on click on an
Margret Marmajuke
7
5 @@ -1329,30 +1317,44 @@ exports[`Table component pagination should call onPageChange prop on click on an
16 Yes 4 @@ -1360,39 +1362,55 @@ exports[`Table component pagination should call onPageChange prop on click on an
Van Ng
9
2 @@ -1400,30 +1418,44 @@ exports[`Table component pagination should call onPageChange prop on click on an
37 No 4 @@ -1431,39 +1463,55 @@ exports[`Table component pagination should call onPageChange prop on click on an
Duc Ng
10
3 @@ -1471,30 +1519,44 @@ exports[`Table component pagination should call onPageChange prop on click on an
37 No 4 @@ -1503,24 +1565,27 @@ exports[`Table component pagination should call onPageChange prop on click on an