pixel-react 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.prettierrc.js +13 -0
- package/.storybook/main.ts +26 -0
- package/.storybook/preview.ts +26 -0
- package/.yarn/install-state.gz +0 -0
- package/.yarnrc.yml +1 -0
- package/README.md +25 -0
- package/dist/tsconfig.tsbuildinfo +1 -0
- package/index.scss +0 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.d.ts +3 -0
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +6 -0
- package/lib/StyleGuide/ColorPalette/colorPaletteList.d.ts +3 -0
- package/lib/StyleGuide/ColorPalette/index.d.ts +1 -0
- package/lib/StyleGuide/ColorPalette/types.d.ts +15 -0
- package/lib/StyleGuide/Typography/Typography.d.ts +3 -0
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +6 -0
- package/lib/StyleGuide/Typography/TypographyList.d.ts +5 -0
- package/lib/StyleGuide/Typography/types.d.ts +8 -0
- package/lib/assets/utils/functionUtils.d.ts +1 -0
- package/lib/components/Accordion/Accordion.d.ts +8 -0
- package/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/lib/components/Accordion/index.d.ts +1 -0
- package/lib/components/Accordion/types.d.ts +27 -0
- package/lib/components/AddResourceButton/AddButton.d.ts +4 -0
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +8 -0
- package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +6 -0
- package/lib/components/AddResourceButton/index.d.ts +1 -0
- package/lib/components/AddResourceButton/type.d.ts +65 -0
- package/lib/components/Button/Button.d.ts +5 -0
- package/lib/components/Button/Button.stories.d.ts +12 -0
- package/lib/components/Button/index.d.ts +1 -0
- package/lib/components/Button/types.d.ts +61 -0
- package/lib/components/Charts/DonutChart/DonutChart.d.ts +5 -0
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +6 -0
- package/lib/components/Charts/DonutChart/index.d.ts +1 -0
- package/lib/components/Charts/DonutChart/type.d.ts +13 -0
- package/lib/components/Charts/RadialChart/RadialChart.d.ts +5 -0
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +6 -0
- package/lib/components/Charts/RadialChart/index.d.ts +1 -0
- package/lib/components/Charts/RadialChart/types.d.ts +25 -0
- package/lib/components/Checkbox/Checkbox.d.ts +6 -0
- package/lib/components/Checkbox/Checkbox.stories.d.ts +8 -0
- package/lib/components/Checkbox/index.d.ts +1 -0
- package/lib/components/Checkbox/types.d.ts +30 -0
- package/lib/components/Chip/Chip.d.ts +4 -0
- package/lib/components/Chip/Chip.stories.d.ts +14 -0
- package/lib/components/Chip/index.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +18 -0
- package/lib/components/Drawer/Drawer.d.ts +4 -0
- package/lib/components/Drawer/Drawer.stories.d.ts +7 -0
- package/lib/components/Drawer/Types.d.ts +85 -0
- package/lib/components/Drawer/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.d.ts +5 -0
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +7 -0
- package/lib/components/ExpandableMenu/index.d.ts +1 -0
- package/lib/components/ExpandableMenu/types.d.ts +34 -0
- package/lib/components/FileDropzone/Dropzone.d.ts +5 -0
- package/lib/components/FileDropzone/FileDropzone.d.ts +4 -0
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +8 -0
- package/lib/components/FileDropzone/FilePreview.d.ts +4 -0
- package/lib/components/FileDropzone/index.d.ts +1 -0
- package/lib/components/FileDropzone/types.d.ts +103 -0
- package/lib/components/Form/Form.d.ts +16 -0
- package/lib/components/Form/Form.stories.d.ts +6 -0
- package/lib/components/Form/index.d.ts +1 -0
- package/lib/components/Form/types.d.ts +1 -0
- package/lib/components/GridLayout/GridLayout.d.ts +6 -0
- package/lib/components/GridLayout/GridLayout.stories.d.ts +8 -0
- package/lib/components/GridLayout/index.d.ts +2 -0
- package/lib/components/GridLayout/types.d.ts +57 -0
- package/lib/components/HighlightText/HighlightText.d.ts +4 -0
- package/lib/components/HighlightText/HighlightText.stories.d.ts +6 -0
- package/lib/components/HighlightText/index.d.ts +1 -0
- package/lib/components/HighlightText/types.d.ts +4 -0
- package/lib/components/Icon/Icon.d.ts +4 -0
- package/lib/components/Icon/Icon.stories.d.ts +7 -0
- package/lib/components/Icon/iconList.d.ts +2 -0
- package/lib/components/Icon/index.d.ts +1 -0
- package/lib/components/Icon/types.d.ts +10 -0
- package/lib/components/Input/Input.d.ts +4 -0
- package/lib/components/Input/Input.stories.d.ts +9 -0
- package/lib/components/Input/index.d.ts +1 -0
- package/lib/components/Input/types.d.ts +74 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +4 -0
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +8 -0
- package/lib/components/InputWithDropdown/index.d.ts +1 -0
- package/lib/components/InputWithDropdown/types.d.ts +88 -0
- package/lib/components/LazyLoad/LazyLoad.d.ts +2 -0
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +6 -0
- package/lib/components/LazyLoad/LazyLoading.d.ts +2 -0
- package/lib/components/LazyLoad/index.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +4 -0
- package/lib/components/MenuOption/MenuOption.stories.d.ts +15 -0
- package/lib/components/MenuOption/index.d.ts +1 -0
- package/lib/components/MenuOption/types.d.ts +134 -0
- package/lib/components/MiniModal/MiniModal.d.ts +4 -0
- package/lib/components/MiniModal/MiniModal.stories.d.ts +9 -0
- package/lib/components/MiniModal/index.d.ts +1 -0
- package/lib/components/MiniModal/types.d.ts +89 -0
- package/lib/components/MultiSelect/Dropdown.d.ts +4 -0
- package/lib/components/MultiSelect/MultiSelect.d.ts +4 -0
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +9 -0
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +18 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +15 -0
- package/lib/components/MultiSelect/index.d.ts +1 -0
- package/lib/components/RadioButton/RadioButton.d.ts +4 -0
- package/lib/components/RadioButton/RadioButton.stories.d.ts +10 -0
- package/lib/components/RadioButton/index.d.ts +1 -0
- package/lib/components/RadioButton/radioButtonTypes.d.ts +35 -0
- package/lib/components/RadioGroup/RadioGroup.d.ts +4 -0
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +8 -0
- package/lib/components/RadioGroup/index.d.ts +1 -0
- package/lib/components/RadioGroup/radioGroupTypes.d.ts +47 -0
- package/lib/components/Search/Search.d.ts +4 -0
- package/lib/components/Search/Search.stories.d.ts +6 -0
- package/lib/components/Search/index.d.ts +1 -0
- package/lib/components/Search/types.d.ts +15 -0
- package/lib/components/Select/Select.d.ts +4 -0
- package/lib/components/Select/Select.stories.d.ts +13 -0
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +4 -0
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +15 -0
- package/lib/components/Select/index.d.ts +1 -0
- package/lib/components/Select/types.d.ts +68 -0
- package/lib/components/Table/Table.d.ts +4 -0
- package/lib/components/Table/Table.stories.d.ts +11 -0
- package/lib/components/Table/Types.d.ts +98 -0
- package/lib/components/Table/index.d.ts +1 -0
- package/lib/components/TableTree/TableTree.d.ts +21 -0
- package/lib/components/TableTree/TableTree.stories.d.ts +7 -0
- package/lib/components/TableTree/data.d.ts +313 -0
- package/lib/components/TableTree/index.d.ts +1 -0
- package/lib/components/Tabs/Tabs.d.ts +5 -0
- package/lib/components/Tabs/Tabs.stories.d.ts +8 -0
- package/lib/components/Tabs/index.d.ts +1 -0
- package/lib/components/Tabs/types.d.ts +40 -0
- package/lib/components/TextArea/Textarea.d.ts +4 -0
- package/lib/components/TextArea/Textarea.stories.d.ts +9 -0
- package/lib/components/TextArea/Types.d.ts +78 -0
- package/lib/components/TextArea/index.d.ts +1 -0
- package/lib/components/ThemeProvider/ThemeProvider.d.ts +7 -0
- package/lib/components/ThemeProvider/index.d.ts +1 -0
- package/lib/components/ThemeProvider/types.d.ts +11 -0
- package/lib/components/Toast/Toast.d.ts +5 -0
- package/lib/components/Toast/Toast.stories.d.ts +6 -0
- package/lib/components/Toast/index.d.ts +1 -0
- package/lib/components/Toast/types.d.ts +20 -0
- package/lib/components/Toggle/Toggle.d.ts +5 -0
- package/lib/components/Toggle/Toggle.stories.d.ts +12 -0
- package/lib/components/Toggle/index.d.ts +1 -0
- package/lib/components/Toggle/types.d.ts +50 -0
- package/lib/components/Tooltip/Tooltip.d.ts +5 -0
- package/lib/components/Tooltip/Tooltip.stories.d.ts +15 -0
- package/lib/components/Tooltip/index.d.ts +1 -0
- package/lib/components/Tooltip/types.d.ts +37 -0
- package/lib/components/Typography/Typography.d.ts +5 -0
- package/lib/components/Typography/Typography.stories.d.ts +10 -0
- package/lib/components/Typography/index.d.ts +1 -0
- package/lib/components/Typography/types.d.ts +47 -0
- package/lib/hooks/keyboardevents/useEscKeyEvent.d.ts +2 -0
- package/lib/hooks/useClickOutside.d.ts +2 -0
- package/lib/hooks/useFileDropzone.d.ts +3 -0
- package/lib/hooks/usePortalPosition.d.ts +9 -0
- package/lib/hooks/useTheme.d.ts +3 -0
- package/lib/index.css +404 -0
- package/lib/index.d.ts +1286 -0
- package/lib/index.esm.css +404 -0
- package/lib/index.esm.js +9317 -0
- package/lib/index.esm.js.map +1 -0
- package/lib/index.js +9376 -0
- package/lib/index.js.map +1 -0
- package/lib/tsconfig.tsbuildinfo +1 -0
- package/lib/utils/TableCell/TableCell.d.ts +1 -0
- package/lib/utils/checkEmpty/checkEmpty.d.ts +3 -0
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +6 -0
- package/lib/utils/ffID/ffID.stories.d.ts +6 -0
- package/lib/utils/ffID/ffid.d.ts +2 -0
- package/lib/utils/getExtension/getExtension.d.ts +4 -0
- package/lib/utils/getExtension/getExtension.stories.d.ts +6 -0
- package/lib/utils/truncateText/truncateText.d.ts +1 -0
- package/lib/utils/truncateText/truncateText.stories.d.ts +6 -0
- package/package.json +62 -0
- package/rollup.config.mjs +57 -0
- package/src/StyleGuide/ColorPalette/ColorPalette.scss +58 -0
- package/src/StyleGuide/ColorPalette/ColorPalette.stories.tsx +16 -0
- package/src/StyleGuide/ColorPalette/ColorPalette.tsx +61 -0
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +97 -0
- package/src/StyleGuide/ColorPalette/index.ts +1 -0
- package/src/StyleGuide/ColorPalette/types.ts +17 -0
- package/src/StyleGuide/Typography/Typography.scss +100 -0
- package/src/StyleGuide/Typography/Typography.stories.tsx +16 -0
- package/src/StyleGuide/Typography/Typography.tsx +60 -0
- package/src/StyleGuide/Typography/TypographyList.ts +3 -0
- package/src/StyleGuide/Typography/types.ts +9 -0
- package/src/assets/Themes/BaseTheme.scss +130 -0
- package/src/assets/Themes/DarkTheme.scss +131 -0
- package/src/assets/Themes/Theme.scss +200 -0
- package/src/assets/icons/Arrow.svg +5 -0
- package/src/assets/icons/accordion_header_icon.svg +10 -0
- package/src/assets/icons/arrow_down.svg +3 -0
- package/src/assets/icons/arrow_right.svg +5 -0
- package/src/assets/icons/arrow_up.svg +3 -0
- package/src/assets/icons/arrows_down_icon.svg +3 -0
- package/src/assets/icons/arrows_right_icon.svg +10 -0
- package/src/assets/icons/arrows_top_icon.svg +3 -0
- package/src/assets/icons/check_mark.svg +3 -0
- package/src/assets/icons/close_pill.svg +3 -0
- package/src/assets/icons/delete.svg +17 -0
- package/src/assets/icons/dropzone_icon.svg +18 -0
- package/src/assets/icons/error.svg +17 -0
- package/src/assets/icons/file.svg +12 -0
- package/src/assets/icons/info.svg +17 -0
- package/src/assets/icons/logo.svg +18 -0
- package/src/assets/icons/manage_apps.svg +3 -0
- package/src/assets/icons/moon_stars.svg +10 -0
- package/src/assets/icons/more.svg +11 -0
- package/src/assets/icons/plus_icon.svg +11 -0
- package/src/assets/icons/remove.svg +12 -0
- package/src/assets/icons/replace.svg +12 -0
- package/src/assets/icons/search.svg +3 -0
- package/src/assets/icons/success.svg +13 -0
- package/src/assets/icons/sun_icon.svg +10 -0
- package/src/assets/icons/tick_icon.svg +5 -0
- package/src/assets/icons/toast_close.svg +3 -0
- package/src/assets/icons/warning.svg +17 -0
- package/src/assets/icons/wrong_mark.svg +3 -0
- package/src/assets/styles/_colors.scss +145 -0
- package/src/assets/styles/_fonts.scss +68 -0
- package/src/assets/styles/_mixins.scss +20 -0
- package/src/assets/utils/functionUtils.ts +5 -0
- package/src/components/Accordion/Accordion.scss +45 -0
- package/src/components/Accordion/Accordion.stories.tsx +31 -0
- package/src/components/Accordion/Accordion.tsx +62 -0
- package/src/components/Accordion/index.ts +1 -0
- package/src/components/Accordion/types.ts +28 -0
- package/src/components/AddResourceButton/AddButton.scss +36 -0
- package/src/components/AddResourceButton/AddButton.stories.tsx +126 -0
- package/src/components/AddResourceButton/AddButton.tsx +121 -0
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +160 -0
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +38 -0
- package/src/components/AddResourceButton/index.ts +1 -0
- package/src/components/AddResourceButton/type.ts +60 -0
- package/src/components/Button/Button.scss +148 -0
- package/src/components/Button/Button.stories.tsx +74 -0
- package/src/components/Button/Button.tsx +66 -0
- package/src/components/Button/index.ts +1 -0
- package/src/components/Button/types.ts +65 -0
- package/src/components/Charts/DonutChart/DonutChart.scss +76 -0
- package/src/components/Charts/DonutChart/DonutChart.stories.tsx +30 -0
- package/src/components/Charts/DonutChart/DonutChart.tsx +241 -0
- package/src/components/Charts/DonutChart/index.ts +1 -0
- package/src/components/Charts/DonutChart/type.ts +23 -0
- package/src/components/Charts/RadialChart/RadialChart.scss +12 -0
- package/src/components/Charts/RadialChart/RadialChart.stories.tsx +36 -0
- package/src/components/Charts/RadialChart/RadialChart.tsx +174 -0
- package/src/components/Charts/RadialChart/index.ts +1 -0
- package/src/components/Charts/RadialChart/types.ts +32 -0
- package/src/components/Checkbox/Checkbox.scss +89 -0
- package/src/components/Checkbox/Checkbox.stories.tsx +47 -0
- package/src/components/Checkbox/Checkbox.tsx +61 -0
- package/src/components/Checkbox/index.ts +1 -0
- package/src/components/Checkbox/types.ts +30 -0
- package/src/components/Chip/Chip.scss +70 -0
- package/src/components/Chip/Chip.stories.tsx +88 -0
- package/src/components/Chip/Chip.tsx +35 -0
- package/src/components/Chip/index.ts +1 -0
- package/src/components/Chip/types.ts +19 -0
- package/src/components/Drawer/Drawer.scss +121 -0
- package/src/components/Drawer/Drawer.stories.tsx +88 -0
- package/src/components/Drawer/Drawer.tsx +179 -0
- package/src/components/Drawer/Types.ts +88 -0
- package/src/components/Drawer/index.ts +1 -0
- package/src/components/ExpandableMenu/ExpandableMenu.scss +110 -0
- package/src/components/ExpandableMenu/ExpandableMenu.stories.tsx +67 -0
- package/src/components/ExpandableMenu/ExpandableMenu.tsx +101 -0
- package/src/components/ExpandableMenu/index.ts +1 -0
- package/src/components/ExpandableMenu/types.ts +34 -0
- package/src/components/FileDropzone/Dropzone.tsx +55 -0
- package/src/components/FileDropzone/FileDropzone.scss +134 -0
- package/src/components/FileDropzone/FileDropzone.stories.tsx +83 -0
- package/src/components/FileDropzone/FileDropzone.tsx +98 -0
- package/src/components/FileDropzone/FilePreview.tsx +75 -0
- package/src/components/FileDropzone/index.ts +1 -0
- package/src/components/FileDropzone/types.ts +113 -0
- package/src/components/Form/Form.scss +98 -0
- package/src/components/Form/Form.stories.tsx +177 -0
- package/src/components/Form/Form.tsx +57 -0
- package/src/components/Form/index.ts +1 -0
- package/src/components/Form/types.ts +1 -0
- package/src/components/Form/validation.json +29 -0
- package/src/components/GridLayout/GridLayout.scss +71 -0
- package/src/components/GridLayout/GridLayout.stories.tsx +128 -0
- package/src/components/GridLayout/GridLayout.tsx +30 -0
- package/src/components/GridLayout/GridLayoutStory.scss +25 -0
- package/src/components/GridLayout/index.ts +1 -0
- package/src/components/GridLayout/types.ts +64 -0
- package/src/components/HighlightText/HighlightText.scss +3 -0
- package/src/components/HighlightText/HighlightText.stories.tsx +22 -0
- package/src/components/HighlightText/HighlightText.tsx +33 -0
- package/src/components/HighlightText/index.ts +1 -0
- package/src/components/HighlightText/types.ts +4 -0
- package/src/components/Icon/Icon.stories.tsx +37 -0
- package/src/components/Icon/Icon.tsx +43 -0
- package/src/components/Icon/Icons.scss +34 -0
- package/src/components/Icon/iconList.ts +62 -0
- package/src/components/Icon/index.ts +1 -0
- package/src/components/Icon/types.ts +10 -0
- package/src/components/Input/Input.scss +150 -0
- package/src/components/Input/Input.stories.tsx +96 -0
- package/src/components/Input/Input.tsx +93 -0
- package/src/components/Input/index.ts +1 -0
- package/src/components/Input/types.ts +77 -0
- package/src/components/InputWithDropdown/InputWithDropdown.scss +185 -0
- package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +114 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +85 -0
- package/src/components/InputWithDropdown/index.ts +1 -0
- package/src/components/InputWithDropdown/types.ts +110 -0
- package/src/components/LazyLoad/LazyLoad.d.ts +3 -0
- package/src/components/LazyLoad/LazyLoad.stories.tsx +33 -0
- package/src/components/LazyLoad/LazyLoad.ts +2 -0
- package/src/components/LazyLoad/LazyLoading.tsx +19 -0
- package/src/components/LazyLoad/index.ts +1 -0
- package/src/components/MenuOption/MenuOption.scss +69 -0
- package/src/components/MenuOption/MenuOption.stories.tsx +259 -0
- package/src/components/MenuOption/MenuOption.tsx +126 -0
- package/src/components/MenuOption/index.ts +1 -0
- package/src/components/MenuOption/types.ts +161 -0
- package/src/components/MiniModal/MiniModal.scss +139 -0
- package/src/components/MiniModal/MiniModal.stories.tsx +475 -0
- package/src/components/MiniModal/MiniModal.tsx +218 -0
- package/src/components/MiniModal/index.ts +1 -0
- package/src/components/MiniModal/types.ts +88 -0
- package/src/components/MultiSelect/Dropdown.scss +66 -0
- package/src/components/MultiSelect/Dropdown.tsx +77 -0
- package/src/components/MultiSelect/MultiSelect.scss +190 -0
- package/src/components/MultiSelect/MultiSelect.stories.tsx +85 -0
- package/src/components/MultiSelect/MultiSelect.tsx +260 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +19 -0
- package/src/components/MultiSelect/dropdownTypes.ts +15 -0
- package/src/components/MultiSelect/index.ts +1 -0
- package/src/components/RadioButton/RadioButton.scss +99 -0
- package/src/components/RadioButton/RadioButton.stories.tsx +43 -0
- package/src/components/RadioButton/RadioButton.tsx +32 -0
- package/src/components/RadioButton/index.ts +1 -0
- package/src/components/RadioButton/radioButtonTypes.tsx +40 -0
- package/src/components/RadioGroup/RadioGroup.scss +5 -0
- package/src/components/RadioGroup/RadioGroup.stories.tsx +81 -0
- package/src/components/RadioGroup/RadioGroup.tsx +30 -0
- package/src/components/RadioGroup/index.ts +1 -0
- package/src/components/RadioGroup/radioGroupTypes.tsx +54 -0
- package/src/components/Search/Search.scss +87 -0
- package/src/components/Search/Search.stories.tsx +26 -0
- package/src/components/Search/Search.tsx +103 -0
- package/src/components/Search/index.ts +1 -0
- package/src/components/Search/types.ts +15 -0
- package/src/components/Select/Select.scss +247 -0
- package/src/components/Select/Select.stories.tsx +156 -0
- package/src/components/Select/Select.tsx +368 -0
- package/src/components/Select/components/Dropdown/Dropdown.scss +70 -0
- package/src/components/Select/components/Dropdown/Dropdown.tsx +89 -0
- package/src/components/Select/components/Dropdown/dropdownTypes.ts +19 -0
- package/src/components/Select/index.ts +1 -0
- package/src/components/Select/types.ts +122 -0
- package/src/components/Table/Table.scss +101 -0
- package/src/components/Table/Table.stories.tsx +345 -0
- package/src/components/Table/Table.tsx +128 -0
- package/src/components/Table/Types.ts +100 -0
- package/src/components/Table/index.ts +1 -0
- package/src/components/TableTree/TableTree.scss +142 -0
- package/src/components/TableTree/TableTree.stories.tsx +121 -0
- package/src/components/TableTree/TableTree.tsx +216 -0
- package/src/components/TableTree/TableTreeStories.scss +22 -0
- package/src/components/TableTree/data.ts +573 -0
- package/src/components/TableTree/index.ts +1 -0
- package/src/components/Tabs/Tabs.scss +76 -0
- package/src/components/Tabs/Tabs.stories.tsx +104 -0
- package/src/components/Tabs/Tabs.tsx +64 -0
- package/src/components/Tabs/index.ts +1 -0
- package/src/components/Tabs/types.ts +38 -0
- package/src/components/TextArea/Textarea.scss +145 -0
- package/src/components/TextArea/Textarea.stories.tsx +92 -0
- package/src/components/TextArea/Textarea.tsx +84 -0
- package/src/components/TextArea/Types.ts +82 -0
- package/src/components/TextArea/index.tsx +1 -0
- package/src/components/ThemeProvider/ThemeProvider.tsx +24 -0
- package/src/components/ThemeProvider/index.ts +1 -0
- package/src/components/ThemeProvider/types.ts +14 -0
- package/src/components/Toast/Toast.scss +121 -0
- package/src/components/Toast/Toast.stories.tsx +180 -0
- package/src/components/Toast/Toast.tsx +116 -0
- package/src/components/Toast/index.ts +1 -0
- package/src/components/Toast/types.ts +27 -0
- package/src/components/Toggle/Toggle.scss +132 -0
- package/src/components/Toggle/Toggle.stories.tsx +132 -0
- package/src/components/Toggle/Toggle.tsx +96 -0
- package/src/components/Toggle/index.ts +1 -0
- package/src/components/Toggle/types.ts +43 -0
- package/src/components/Tooltip/Tooltip.scss +27 -0
- package/src/components/Tooltip/Tooltip.stories.tsx +97 -0
- package/src/components/Tooltip/Tooltip.tsx +194 -0
- package/src/components/Tooltip/index.ts +1 -0
- package/src/components/Tooltip/types.ts +60 -0
- package/src/components/Typography/Typography.scss +49 -0
- package/src/components/Typography/Typography.stories.tsx +57 -0
- package/src/components/Typography/Typography.tsx +39 -0
- package/src/components/Typography/index.ts +1 -0
- package/src/components/Typography/types.ts +56 -0
- package/src/fonts/Montserrat/Montserrat-Medium.ttf +0 -0
- package/src/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
- package/src/fonts/Montserrat/Montserrat-SemiBold.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Black.ttf +0 -0
- package/src/fonts/Poppins/Poppins-BlackItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Bold.ttf +0 -0
- package/src/fonts/Poppins/Poppins-BoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraBold.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraBoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraLight.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ExtraLightItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Italic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Light.ttf +0 -0
- package/src/fonts/Poppins/Poppins-LightItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Medium.ttf +0 -0
- package/src/fonts/Poppins/Poppins-MediumItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Regular.ttf +0 -0
- package/src/fonts/Poppins/Poppins-SemiBold.ttf +0 -0
- package/src/fonts/Poppins/Poppins-SemiBoldItalic.ttf +0 -0
- package/src/fonts/Poppins/Poppins-Thin.ttf +0 -0
- package/src/fonts/Poppins/Poppins-ThinItalic.ttf +0 -0
- package/src/hooks/keyboardevents/useEscKeyEvent.tsx +31 -0
- package/src/hooks/useClickOutside.tsx +30 -0
- package/src/hooks/useFileDropzone.tsx +273 -0
- package/src/hooks/usePortalPosition.tsx +53 -0
- package/src/hooks/useTheme.tsx +13 -0
- package/src/index.ts +91 -0
- package/src/utils/TableCell/TableCell.ts +16 -0
- package/src/utils/checkEmpty/checkEmpty.stories.tsx +34 -0
- package/src/utils/checkEmpty/checkEmpty.ts +10 -0
- package/src/utils/ffID/ffID.stories.tsx +35 -0
- package/src/utils/ffID/ffid.ts +9 -0
- package/src/utils/getExtension/getExtension.stories.tsx +23 -0
- package/src/utils/getExtension/getExtension.ts +28 -0
- package/src/utils/truncateText/truncateText.stories.tsx +37 -0
- package/src/utils/truncateText/truncateText.ts +4 -0
- package/tsconfig.json +55 -0
- package/ui-library.zip +0 -0
- package/vite.config.js +30 -0
@@ -0,0 +1 @@
|
|
1
|
+
{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.2"}
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const prepareData: (dataObj: any, columnObj: any) => any;
|
@@ -0,0 +1 @@
|
|
1
|
+
export declare const truncateText: (text: string, maxLength: number) => string;
|
package/package.json
ADDED
@@ -0,0 +1,62 @@
|
|
1
|
+
{
|
2
|
+
"name": "pixel-react",
|
3
|
+
"description": "Great for pixel-perfect, design-focused components in React",
|
4
|
+
"version": "1.0.0",
|
5
|
+
"main": "lib/index.js",
|
6
|
+
"module": "lib/index.esm.js",
|
7
|
+
"types": "lib/index.d.ts",
|
8
|
+
"author": {
|
9
|
+
"name": "Padmakant Baloji"
|
10
|
+
},
|
11
|
+
"license": "MIT",
|
12
|
+
"devDependencies": {
|
13
|
+
"@chromatic-com/storybook": "^2.0.2",
|
14
|
+
"@rollup/plugin-commonjs": "^25.0.7",
|
15
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
16
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
17
|
+
"@storybook/addon-docs": "^8.3.4",
|
18
|
+
"@storybook/addon-essentials": "^8.3.4",
|
19
|
+
"@storybook/addon-interactions": "^8.3.4",
|
20
|
+
"@storybook/addon-links": "^8.3.4",
|
21
|
+
"@storybook/addon-onboarding": "^8.3.4",
|
22
|
+
"@storybook/blocks": "^8.3.4",
|
23
|
+
"@storybook/react": "^8.3.4",
|
24
|
+
"@storybook/react-vite": "^8.3.4",
|
25
|
+
"@storybook/test": "^8.3.4",
|
26
|
+
"@types/react": "^18.2.57",
|
27
|
+
"@types/react-dom": "^18.2.21",
|
28
|
+
"chromatic": "^11.4.0",
|
29
|
+
"postcss": "^8.4.35",
|
30
|
+
"react": "^18.2.0",
|
31
|
+
"react-dom": "^18.2.0",
|
32
|
+
"rollup": "^4.12.0",
|
33
|
+
"rollup-plugin-dts": "^6.1.0",
|
34
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
35
|
+
"rollup-plugin-postcss": "^4.0.2",
|
36
|
+
"sass": "^1.79.4",
|
37
|
+
"storybook": "^8.3.4",
|
38
|
+
"storybook-addon-theme-provider": "^0.2.2",
|
39
|
+
"typescript": "^5.3.3",
|
40
|
+
"vite": "^5.1.3"
|
41
|
+
},
|
42
|
+
"peerDependencies": {
|
43
|
+
"react": "^18.2.0",
|
44
|
+
"react-dom": "^18.2.0"
|
45
|
+
},
|
46
|
+
"scripts": {
|
47
|
+
"storybook": "tsc -b && storybook dev -p 6006",
|
48
|
+
"build-storybook": "storybook build",
|
49
|
+
"build": "tsc -b && rollup -c",
|
50
|
+
"chromatic": "chromatic --exit-zero-on-changes"
|
51
|
+
},
|
52
|
+
"dependencies": {
|
53
|
+
"@babel/plugin-transform-react-jsx": "^7.24.7",
|
54
|
+
"@types/react-window": "^1.8.8",
|
55
|
+
"@vitejs/plugin-react": "^4.3.0",
|
56
|
+
"classnames": "^2.5.1",
|
57
|
+
"react-hook-form": "^7.53.0",
|
58
|
+
"react-window": "^1.8.10",
|
59
|
+
"scss": "^0.2.4",
|
60
|
+
"vite-plugin-svgr": "^4.2.0"
|
61
|
+
}
|
62
|
+
}
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
|
2
|
+
import resolve from '@rollup/plugin-node-resolve';
|
3
|
+
import commonjs from '@rollup/plugin-commonjs';
|
4
|
+
import typescript from '@rollup/plugin-typescript';
|
5
|
+
import postcss from 'rollup-plugin-postcss';
|
6
|
+
import dts from 'rollup-plugin-dts';
|
7
|
+
import react from '@vitejs/plugin-react';
|
8
|
+
import svgrPlugin from 'vite-plugin-svgr';
|
9
|
+
import { createRequire } from 'node:module';
|
10
|
+
|
11
|
+
// This is required to read package.json file when
|
12
|
+
// using Native ES modules in Node.js
|
13
|
+
const requireFile = createRequire(import.meta.url);
|
14
|
+
const packageJson = requireFile('./package.json');
|
15
|
+
|
16
|
+
export default [
|
17
|
+
{
|
18
|
+
input: 'src/index.ts',
|
19
|
+
output: [
|
20
|
+
{
|
21
|
+
file: packageJson.main, // CJS output
|
22
|
+
format: 'cjs',
|
23
|
+
sourcemap: true,
|
24
|
+
inlineDynamicImports: true,
|
25
|
+
},
|
26
|
+
{
|
27
|
+
file: packageJson.module, // ESM output
|
28
|
+
format: 'esm',
|
29
|
+
sourcemap: true,
|
30
|
+
inlineDynamicImports: true,
|
31
|
+
},
|
32
|
+
],
|
33
|
+
plugins: [
|
34
|
+
peerDepsExternal(),
|
35
|
+
resolve(),
|
36
|
+
commonjs(),
|
37
|
+
typescript(), // Ensure tsconfig.json targets ESM
|
38
|
+
postcss({
|
39
|
+
extensions: ['.scss'],
|
40
|
+
}),
|
41
|
+
react(),
|
42
|
+
svgrPlugin({
|
43
|
+
svgrOptions: {
|
44
|
+
icon: true,
|
45
|
+
},
|
46
|
+
}),
|
47
|
+
],
|
48
|
+
},
|
49
|
+
{
|
50
|
+
input: 'lib/index.d.ts',
|
51
|
+
output: [
|
52
|
+
{ file: 'lib/index.d.ts', format: 'es', inlineDynamicImports: true },
|
53
|
+
],
|
54
|
+
plugins: [dts()],
|
55
|
+
external: [/\.scss$/],
|
56
|
+
},
|
57
|
+
];
|
@@ -0,0 +1,58 @@
|
|
1
|
+
@import '../../assets/styles/colors';
|
2
|
+
@import '../../assets/styles/fonts';
|
3
|
+
|
4
|
+
.ff-style-guide {
|
5
|
+
border-radius: 12px;
|
6
|
+
|
7
|
+
.style-guide-header {
|
8
|
+
background-color: $brand-color;
|
9
|
+
height: 100px;
|
10
|
+
padding: 40px;
|
11
|
+
border-top-left-radius: 12px;
|
12
|
+
border-top-right-radius: 12px;
|
13
|
+
color: $tooltip-text-color;
|
14
|
+
|
15
|
+
& div {
|
16
|
+
@extend .font-size-32;
|
17
|
+
font-weight: 600;
|
18
|
+
}
|
19
|
+
& span {
|
20
|
+
@extend .fontLg;
|
21
|
+
font-weight: 400;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
|
25
|
+
.style-guide-content {
|
26
|
+
padding: 20px;
|
27
|
+
display: grid;
|
28
|
+
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
29
|
+
grid-gap: 40px;
|
30
|
+
|
31
|
+
.color-card {
|
32
|
+
display: flex;
|
33
|
+
flex-direction: column;
|
34
|
+
padding: 10px;
|
35
|
+
|
36
|
+
.color-box {
|
37
|
+
height: 82px;
|
38
|
+
width: 210px;
|
39
|
+
border-radius: 12px;
|
40
|
+
margin-bottom: 10px;
|
41
|
+
}
|
42
|
+
|
43
|
+
.color-name {
|
44
|
+
@extend .fontMd;
|
45
|
+
font-weight: 500;
|
46
|
+
margin-bottom: 5px;
|
47
|
+
text-transform: capitalize;
|
48
|
+
word-wrap: break-word;
|
49
|
+
}
|
50
|
+
|
51
|
+
.color-code {
|
52
|
+
@extend .fontSm;
|
53
|
+
font-weight: 400;
|
54
|
+
color: $text-color;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
58
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import StyleGuide from './ColorPalette';
|
3
|
+
|
4
|
+
const meta: Meta<typeof StyleGuide> = {
|
5
|
+
title: 'StyleGuide/Colors',
|
6
|
+
component: StyleGuide,
|
7
|
+
tags: ['autodocs'],
|
8
|
+
};
|
9
|
+
|
10
|
+
type Story = StoryObj<typeof StyleGuide>;
|
11
|
+
|
12
|
+
export const ColorList: Story = {
|
13
|
+
args: {},
|
14
|
+
};
|
15
|
+
|
16
|
+
export default meta;
|
@@ -0,0 +1,61 @@
|
|
1
|
+
import { ColorBoxProps } from './types';
|
2
|
+
import ColorPalette from './colorPaletteList';
|
3
|
+
import './ColorPalette.scss';
|
4
|
+
|
5
|
+
// Component to render each color card
|
6
|
+
const ColorBox = ({
|
7
|
+
name,
|
8
|
+
colorCode,
|
9
|
+
opacity,
|
10
|
+
dropShadow,
|
11
|
+
border,
|
12
|
+
}: ColorBoxProps) => {
|
13
|
+
const opacityPercentage = opacity ? `${Math.round(opacity * 100)}%` : '';
|
14
|
+
|
15
|
+
const boxStyle = {
|
16
|
+
background: colorCode,
|
17
|
+
opacity: opacity,
|
18
|
+
filter: dropShadow ? dropShadow : '',
|
19
|
+
border: `1px solid ${border}`,
|
20
|
+
};
|
21
|
+
|
22
|
+
return (
|
23
|
+
<div className="color-card">
|
24
|
+
<span className="color-name">{name}</span>
|
25
|
+
<div className="color-box" style={boxStyle} />
|
26
|
+
<span className="color-code">
|
27
|
+
{colorCode} {opacityPercentage && `opacity ${opacityPercentage}`} <br />
|
28
|
+
{border && `Border -${border}`}
|
29
|
+
</span>
|
30
|
+
</div>
|
31
|
+
);
|
32
|
+
};
|
33
|
+
|
34
|
+
// Main Colors component
|
35
|
+
const Colors = () => {
|
36
|
+
return (
|
37
|
+
<div className="ff-style-guide">
|
38
|
+
<div className="style-guide-header">
|
39
|
+
<div>Colors</div>
|
40
|
+
<span>
|
41
|
+
Application of the color palette brings a unified and recognisable
|
42
|
+
consistency to MX's array of digital products and interface.
|
43
|
+
</span>
|
44
|
+
</div>
|
45
|
+
<div className="style-guide-content">
|
46
|
+
{ColorPalette.map((color) => (
|
47
|
+
<ColorBox
|
48
|
+
key={color.name}
|
49
|
+
name={color.name}
|
50
|
+
colorCode={color.colorCode}
|
51
|
+
opacity={color?.opacity}
|
52
|
+
dropShadow={color?.dropShadow}
|
53
|
+
border={color?.border}
|
54
|
+
/>
|
55
|
+
))}
|
56
|
+
</div>
|
57
|
+
</div>
|
58
|
+
);
|
59
|
+
};
|
60
|
+
|
61
|
+
export default Colors;
|
@@ -0,0 +1,97 @@
|
|
1
|
+
import { ColorPaletteType } from './types';
|
2
|
+
|
3
|
+
const ColorPalette: ColorPaletteType = [
|
4
|
+
{ name: 'Brand Color', colorCode: '#71347b' },
|
5
|
+
{ name: 'Text Color', colorCode: '#1e161f' },
|
6
|
+
{ name: 'Description Text', colorCode: '#7a7a7a' },
|
7
|
+
{ name: 'Clickable Text Color', colorCode: '#71347b' },
|
8
|
+
{ name: 'Icons Default Color', colorCode: '#71347b' },
|
9
|
+
{ name: 'Border Color', colorCode: '#f0e7f4' },
|
10
|
+
{ name: 'Disable Color', colorCode: '#71347b', opacity: 0.5 },
|
11
|
+
{ name: 'Hover Color', colorCode: '#f7ebff' },
|
12
|
+
{ name: 'Pop-up Background Blur', colorCode: '#14041c', opacity: 0.1 },
|
13
|
+
{ name: 'Drawer Footer Background', colorCode: '#ffffff', border: '#f0e7f4' },
|
14
|
+
{ name: 'Slider Table Color', colorCode: '#efe1f9', opacity: 1 },
|
15
|
+
{ name: 'Text bg Highlight', colorCode: '#f5fb00' },
|
16
|
+
|
17
|
+
{ name: 'Tooltip Bg Color', colorCode: '#1e161f' },
|
18
|
+
{ name: 'Tooltip Text Color(default)', colorCode: '#ffffff' },
|
19
|
+
{
|
20
|
+
name: 'Toggle Strip Color(default)',
|
21
|
+
colorCode: '#cfd1e2',
|
22
|
+
dropShadow: 'drop-shadow(0 0 2px #00000025)',
|
23
|
+
},
|
24
|
+
{ name: 'Tooltip Text Color(Active)', colorCode: '#ffffff' },
|
25
|
+
{
|
26
|
+
name: 'Toggle Strip Color(Active)',
|
27
|
+
colorCode: '#71347b',
|
28
|
+
dropShadow: 'drop-shadow(0 0 2px #00000025)',
|
29
|
+
}, // todo drop shadow
|
30
|
+
{
|
31
|
+
name: 'Primary Button Color',
|
32
|
+
colorCode:
|
33
|
+
'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(70, 22, 77, 1) 100%)',
|
34
|
+
},
|
35
|
+
{
|
36
|
+
name: 'Primary Button Hover',
|
37
|
+
colorCode:
|
38
|
+
'linear-gradient(90deg, rgba(141, 59, 154, 1) 100%, rgba(120, 31, 134, 1) 100%)',
|
39
|
+
},
|
40
|
+
{
|
41
|
+
name: 'Primary Button Disable',
|
42
|
+
colorCode:
|
43
|
+
'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(113, 52, 123, 1) 100%)',
|
44
|
+
opacity: 0.5,
|
45
|
+
},
|
46
|
+
{ name: 'Primary Button Text Color', colorCode: '#ffffff' },
|
47
|
+
{
|
48
|
+
name: 'Secondary Button (default)',
|
49
|
+
colorCode: 'rgba(113, 52, 123, 1)',
|
50
|
+
},
|
51
|
+
{
|
52
|
+
name: 'Secondary Button (Hover)',
|
53
|
+
colorCode:
|
54
|
+
'linear-gradient(90deg, rgba(113, 52, 123, 0.05) 100%, rgba(70, 22, 77, 0.05) 100%)',
|
55
|
+
},
|
56
|
+
{
|
57
|
+
name: 'Secondary Button (Disabled)',
|
58
|
+
colorCode: 'rgba(113, 52, 123, 1)',
|
59
|
+
opacity: 0.5,
|
60
|
+
},
|
61
|
+
{
|
62
|
+
name: 'Tertiary Button (default)',
|
63
|
+
colorCode:
|
64
|
+
'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
|
65
|
+
},
|
66
|
+
{
|
67
|
+
name: 'Tertiary Button (Hover)',
|
68
|
+
colorCode:
|
69
|
+
'linear-gradient(90deg, rgba(70, 22, 77, 0.1) 100%, rgba(113, 52, 123, 0.1) 100%)',
|
70
|
+
},
|
71
|
+
{
|
72
|
+
name: 'Tertiary Button (Disabled)',
|
73
|
+
colorCode:
|
74
|
+
'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
|
75
|
+
opacity: 0.5,
|
76
|
+
},
|
77
|
+
{
|
78
|
+
name: 'Primary Button Color',
|
79
|
+
colorCode:
|
80
|
+
'linear-gradient(90deg, rgba(228, 37, 37, 1) 100%, rgba(201, 0, 0, 1) 100%)',
|
81
|
+
},
|
82
|
+
{
|
83
|
+
name: 'Primary Button Hover',
|
84
|
+
colorCode:
|
85
|
+
'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
|
86
|
+
},
|
87
|
+
{
|
88
|
+
name: 'Primary Button Disabled',
|
89
|
+
colorCode:
|
90
|
+
'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
|
91
|
+
opacity: 0.5,
|
92
|
+
},
|
93
|
+
{ name: 'Primary Button Text Color', colorCode: '#ffffff' },
|
94
|
+
{ name: 'Overlay Background', colorCode: '#1e161f', opacity: 0.1 },
|
95
|
+
];
|
96
|
+
|
97
|
+
export default ColorPalette;
|
@@ -0,0 +1 @@
|
|
1
|
+
export { default } from './ColorPalette';
|
@@ -0,0 +1,17 @@
|
|
1
|
+
export interface ColorBoxProps {
|
2
|
+
name: string;
|
3
|
+
colorCode: string;
|
4
|
+
opacity?: number;
|
5
|
+
dropShadow?: string;
|
6
|
+
border?: string;
|
7
|
+
}
|
8
|
+
|
9
|
+
export interface Color {
|
10
|
+
name: string;
|
11
|
+
colorCode: string;
|
12
|
+
opacity?: number;
|
13
|
+
dropShadow?: string;
|
14
|
+
border?: string;
|
15
|
+
}
|
16
|
+
|
17
|
+
export type ColorPaletteType = Color[];
|
@@ -0,0 +1,100 @@
|
|
1
|
+
@import '../../assets/styles/colors';
|
2
|
+
@import '../../assets/styles/fonts';
|
3
|
+
|
4
|
+
.typography-container {
|
5
|
+
.typography-header {
|
6
|
+
& div {
|
7
|
+
@extend .font2Xl;
|
8
|
+
font-weight: 600;
|
9
|
+
}
|
10
|
+
& span {
|
11
|
+
@extend .fontSm;
|
12
|
+
font-weight: 400;
|
13
|
+
color: $tooltip-bg-color; // need to change color #7A7A7A
|
14
|
+
}
|
15
|
+
}
|
16
|
+
}
|
17
|
+
.font-display {
|
18
|
+
display: flex;
|
19
|
+
flex-direction: column;
|
20
|
+
gap: 20px;
|
21
|
+
}
|
22
|
+
|
23
|
+
.font-row {
|
24
|
+
display: flex;
|
25
|
+
justify-content: space-between;
|
26
|
+
padding: 20px;
|
27
|
+
}
|
28
|
+
|
29
|
+
.font-left {
|
30
|
+
width: 60%;
|
31
|
+
display: flex;
|
32
|
+
flex-direction: column;
|
33
|
+
border-right: 1px solid $border-color;
|
34
|
+
padding: 10px;
|
35
|
+
gap: 10px;
|
36
|
+
|
37
|
+
.font-name {
|
38
|
+
@extend .fontLg;
|
39
|
+
font-weight: 600;
|
40
|
+
}
|
41
|
+
|
42
|
+
.font-sample {
|
43
|
+
@extend .font-size-80;
|
44
|
+
font-weight: 700;
|
45
|
+
}
|
46
|
+
|
47
|
+
.font-characters {
|
48
|
+
@extend .font2Xl;
|
49
|
+
font-weight: 400;
|
50
|
+
line-height: 36px;
|
51
|
+
letter-spacing: 0.16em;
|
52
|
+
white-space: pre;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
.font-right {
|
57
|
+
width: 40%;
|
58
|
+
display: flex;
|
59
|
+
flex-direction: column;
|
60
|
+
justify-content: center;
|
61
|
+
padding: 20px;
|
62
|
+
gap: 20px;
|
63
|
+
|
64
|
+
.font-right-section {
|
65
|
+
display: flex;
|
66
|
+
align-items: center;
|
67
|
+
|
68
|
+
.font-sample-large {
|
69
|
+
font-size: 40px;
|
70
|
+
margin-right: 10px;
|
71
|
+
}
|
72
|
+
|
73
|
+
// Apply specific font weight different sections
|
74
|
+
&.bold {
|
75
|
+
@extend .font2Xl;
|
76
|
+
font-weight: 700;
|
77
|
+
}
|
78
|
+
&.semi-bold {
|
79
|
+
@extend .font2Xl;
|
80
|
+
font-weight: 600;
|
81
|
+
}
|
82
|
+
&.regular {
|
83
|
+
@extend .font2Xl;
|
84
|
+
font-weight: 400;
|
85
|
+
}
|
86
|
+
|
87
|
+
.font-info {
|
88
|
+
display: flex;
|
89
|
+
flex-direction: column;
|
90
|
+
align-items: flex-start;
|
91
|
+
|
92
|
+
// Specific styling for the font-size part
|
93
|
+
.font-size {
|
94
|
+
@extend .fontLg;
|
95
|
+
font-weight: 400;
|
96
|
+
color: $tooltip-bg-color;
|
97
|
+
}
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
2
|
+
import Typography from './Typography';
|
3
|
+
|
4
|
+
const meta: Meta<typeof Typography> = {
|
5
|
+
title: 'StyleGuide/Typography',
|
6
|
+
component: Typography,
|
7
|
+
tags: ['autodocs'],
|
8
|
+
};
|
9
|
+
|
10
|
+
type Story = StoryObj<typeof Typography>;
|
11
|
+
|
12
|
+
export const AllFonts: Story = {
|
13
|
+
args: {},
|
14
|
+
};
|
15
|
+
|
16
|
+
export default meta;
|
@@ -0,0 +1,60 @@
|
|
1
|
+
import './Typography.scss';
|
2
|
+
|
3
|
+
const Typography = () => {
|
4
|
+
return (
|
5
|
+
<div className="typography-container">
|
6
|
+
<div className="typography-header">
|
7
|
+
<div>_Typography</div>
|
8
|
+
<span>
|
9
|
+
Our design system leverages a purposeful set of typography styles.
|
10
|
+
We'he stress-tested this typographic scale across dozens of projects
|
11
|
+
to make sure it's robust enough to use across (almost) any project,
|
12
|
+
while remaining as accessible as possible for everyone.
|
13
|
+
</span>
|
14
|
+
</div>
|
15
|
+
<div className="font-display">
|
16
|
+
<div className="font-row">
|
17
|
+
<div className="font-left">
|
18
|
+
<div className="font-name">Poppins</div>
|
19
|
+
<div className="font-sample">Aa</div>
|
20
|
+
<div className="font-characters">
|
21
|
+
ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
22
|
+
<br />
|
23
|
+
abcdefghijklmnopqrstuvwxyz
|
24
|
+
<br />
|
25
|
+
0123456789
|
26
|
+
<br />
|
27
|
+
!@#$%^&*()
|
28
|
+
</div>
|
29
|
+
</div>
|
30
|
+
|
31
|
+
<div className="font-right">
|
32
|
+
<div className="font-right-section bold">
|
33
|
+
<div className="font-sample-large">Aa</div>
|
34
|
+
<div className="font-info">
|
35
|
+
<span>Bold</span>
|
36
|
+
<div className="font-size">font size: 12px = 0.75rem</div>
|
37
|
+
</div>
|
38
|
+
</div>
|
39
|
+
<div className="font-right-section semi-bold">
|
40
|
+
<div className="font-sample-large">Aa</div>
|
41
|
+
<div className="font-info">
|
42
|
+
<span>SemiBold</span>
|
43
|
+
<div className="font-size">font size: 12px = 0.75rem</div>
|
44
|
+
</div>
|
45
|
+
</div>
|
46
|
+
<div className="font-right-section regular">
|
47
|
+
<div className="font-sample-large">Aa</div>
|
48
|
+
<div className="font-info">
|
49
|
+
<span>Regular</span>
|
50
|
+
<div className="font-size">font size: 12px = 0.75rem</div>
|
51
|
+
</div>
|
52
|
+
</div>
|
53
|
+
</div>
|
54
|
+
</div>
|
55
|
+
</div>
|
56
|
+
</div>
|
57
|
+
);
|
58
|
+
};
|
59
|
+
|
60
|
+
export default Typography;
|