@mohamed-karawia/library 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.github/workflows/chromatic.yml +26 -0
- package/.storybook/main.js +21 -0
- package/.storybook/middleware.js +28 -0
- package/.storybook/preview.js +9 -0
- package/CHANGELOG.md +66 -0
- package/LICENSE +21 -0
- package/README.md +23 -0
- package/README.old.md +3 -0
- package/build-storybook.log +2704 -0
- package/dist/index.js +311 -0
- package/dist/stories/API/API.js +48 -0
- package/dist/stories/API/API.stories.js +24 -0
- package/dist/stories/Agora/Call/Call.js +316 -0
- package/dist/stories/Agora/Chat/Chat.js +107 -0
- package/dist/stories/Agora/Chat/Chat.stories.js +24 -0
- package/dist/stories/Agora/Chat/Components/ChatItem/ChatItem.js +34 -0
- package/dist/stories/Agora/Chat/Components/ChatRoom/ChatRoom.js +199 -0
- package/dist/stories/Agora/Controls/Controls.js +80 -0
- package/dist/stories/Agora/Preview/PreviewCamera.js +247 -0
- package/dist/stories/Agora/Preview/ShareScreen.js +119 -0
- package/dist/stories/Agora/Room/Room.js +114 -0
- package/dist/stories/Agora/Room/Room.stories.js +24 -0
- package/dist/stories/Buttons/Buttons/Buttons.js +59 -0
- package/dist/stories/Buttons/Buttons/Buttons.stories.js +39 -0
- package/dist/stories/Buttons/ReactModal/ReactModal.js +94 -0
- package/dist/stories/Buttons/ReactModal/ReactModal.stories.js +30 -0
- package/dist/stories/Buttons/ReactModal/ReactModalDemo.js +17 -0
- package/dist/stories/Chat/Chat.js +76 -0
- package/dist/stories/Chat/Chat.stories.js +76 -0
- package/dist/stories/Common Inputs/CheckboxGroup/CheckboxGroup.js +59 -0
- package/dist/stories/Common Inputs/CheckboxGroup/CheckboxGroup.stories.js +58 -0
- package/dist/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.js +93 -0
- package/dist/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.stories.js +56 -0
- package/dist/stories/Common Inputs/CustomDropzone/CustomDropZone.js +88 -0
- package/dist/stories/Common Inputs/CustomDropzone/CustomDropzone.stories.js +47 -0
- package/dist/stories/Common Inputs/CustomSelect/CustomSelect.js +92 -0
- package/dist/stories/Common Inputs/CustomSelect/CustomSelect.stories.js +61 -0
- package/dist/stories/Common Inputs/CustomTextarea/CustomTextarea.js +65 -0
- package/dist/stories/Common Inputs/CustomTextarea/CustomTextarea.stories.js +48 -0
- package/dist/stories/Common Inputs/DatePicker/DatePicker.js +104 -0
- package/dist/stories/Common Inputs/DatePicker/DatePicker.stories.js +60 -0
- package/dist/stories/Common Inputs/DatePicker/SingleDatePicker.js +97 -0
- package/dist/stories/Common Inputs/DropZone.js +148 -0
- package/dist/stories/Common Inputs/EditorComponent/EditorComponent.js +84 -0
- package/dist/stories/Common Inputs/EditorComponent/EditorComponent.stories.js +62 -0
- package/dist/stories/Common Inputs/EditorComponent/constants.js +41 -0
- package/dist/stories/Common Inputs/Formik/InputField/InputField.js +35 -0
- package/dist/stories/Common Inputs/Formik/InputField/InputField.stories.js +43 -0
- package/dist/stories/Common Inputs/Formik/RadioField/RadioField.js +54 -0
- package/dist/stories/Common Inputs/Formik/RadioField/RadioField.stories.js +60 -0
- package/dist/stories/Common Inputs/RadioInput/RadioInput.js +115 -0
- package/dist/stories/Common Inputs/RadioInput/RadioInput.stories.js +50 -0
- package/dist/stories/Common Inputs/RichTextInput/Components/Emoji/Emoji.js +31 -0
- package/dist/stories/Common Inputs/RichTextInput/Components/Gif/Gif.js +88 -0
- package/dist/stories/Common Inputs/RichTextInput/RichTextInput.js +278 -0
- package/dist/stories/Common Inputs/RichTextInput/RichTextInput.stories.js +51 -0
- package/dist/stories/Common Inputs/TextField/TextField.js +65 -0
- package/dist/stories/Common Inputs/TextField/TextField.stories.js +48 -0
- package/dist/stories/Containers/BaseMaterial.js +65 -0
- package/dist/stories/Containers/BaseMaterial.stories.js +24 -0
- package/dist/stories/Containers/WidgetExample/WidgetBody.js +17 -0
- package/dist/stories/Containers/WidgetExample/WidgetBody.stories.js +24 -0
- package/dist/stories/Containers/WidgetExample/WidgetExample.js +23 -0
- package/dist/stories/Containers/WidgetExample/WidgetExample.stories.js +24 -0
- package/dist/stories/Containers/WidgetExample/WidgetHead.js +17 -0
- package/dist/stories/Containers/WidgetExample/WidgetHead.stories.js +24 -0
- package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.js +83 -0
- package/dist/stories/Enrollment/Admin/CreateForm/CreateForm.stories.js +22 -0
- package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.js +81 -0
- package/dist/stories/Enrollment/Admin/DetailedForm/DetailedForm.stories.js +42 -0
- package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.js +46 -0
- package/dist/stories/Enrollment/Admin/ViewForms/ViewForms.stories.js +65 -0
- package/dist/stories/Enrollment/Guest/FillForm/FillForm.js +64 -0
- package/dist/stories/Enrollment/Guest/FillForm/FillForm.stories.js +48 -0
- package/dist/stories/Events/CreateEvent/CreateEvent.js +110 -0
- package/dist/stories/Events/CreateEvent/CreateEvent.stories.js +30 -0
- package/dist/stories/Events/Event/Event.js +94 -0
- package/dist/stories/Events/Event/Event.stories.js +33 -0
- package/dist/stories/Events/EventsList/EventsList.js +135 -0
- package/dist/stories/Events/EventsList/EventsList.stories.js +44 -0
- package/dist/stories/Forms/AddPhoto/AddPhoto.js +101 -0
- package/dist/stories/Forms/AddPhoto/AddPhoto.stories.js +47 -0
- package/dist/stories/Forms/AddSong/AddSong.js +98 -0
- package/dist/stories/Forms/AddSong/AddSong.stories.js +37 -0
- package/dist/stories/Forms/AddVideo/AddVideo.js +103 -0
- package/dist/stories/Forms/AddVideo/AddVideo.stories.js +33 -0
- package/dist/stories/Forms/Create-Profile/CreateProfile.js +229 -0
- package/dist/stories/Forms/Create-Profile/CreateProfile.stories.js +49 -0
- package/dist/stories/Forms/Create-Profile/subcomponents/LogoUploader.js +54 -0
- package/dist/stories/Forms/Create-Profile/subcomponents/LogoUploader.stories.js +42 -0
- package/dist/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.js +49 -0
- package/dist/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.stories.js +41 -0
- package/dist/stories/Forms/Create-Profile/subcomponents/ResetBtn.js +41 -0
- package/dist/stories/Forms/Create-Profile/subcomponents/ResetBtn.stories.js +32 -0
- package/dist/stories/Forms/CreateAlbum/CreateAlbum.js +95 -0
- package/dist/stories/Forms/CreateAlbum/CreateAlbum.stories.js +47 -0
- package/dist/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.js +84 -0
- package/dist/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.stories.js +58 -0
- package/dist/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.js +100 -0
- package/dist/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.stories.js +47 -0
- package/dist/stories/Forms/CreateProfile/CreateProfile.js +383 -0
- package/dist/stories/Forms/CreateProfile/CreateProfile.stories.js +24 -0
- package/dist/stories/Forms/CreateProfile-3/CreateProfile.js +324 -0
- package/dist/stories/Forms/CreateProfile-3/CreateProfile.stories.js +24 -0
- package/dist/stories/Forms/CreateUser/CreateUser.js +27 -0
- package/dist/stories/Forms/CreateUser/CreateUser.stories.js +26 -0
- package/dist/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.js +84 -0
- package/dist/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.stories.js +37 -0
- package/dist/stories/Forms/Form/Form.js +35 -0
- package/dist/stories/Forms/Form/Form.stories.js +24 -0
- package/dist/stories/Forms/NewProfile/NewProfile.js +450 -0
- package/dist/stories/Forms/NewProfile/NewProfile.stories.js +24 -0
- package/dist/stories/Layout/Body/Body.js +30 -0
- package/dist/stories/Layout/Body/Body.stories.js +30 -0
- package/dist/stories/Layout/Center/Center.js +26 -0
- package/dist/stories/Layout/Center/Center.stories.js +24 -0
- package/dist/stories/Layout/Head/Head.js +24 -0
- package/dist/stories/Layout/Head/Head.stories.js +24 -0
- package/dist/stories/Layout/Left/Left.js +28 -0
- package/dist/stories/Layout/Left/Left.stories.js +24 -0
- package/dist/stories/Layout/Right/Right.js +27 -0
- package/dist/stories/Layout/Right/Right.stories.js +24 -0
- package/dist/stories/Library/CreateFolder/CreateFolder.js +87 -0
- package/dist/stories/Library/CreateFolder/CreateFolder.stories.js +45 -0
- package/dist/stories/Library/Folders/Folders.js +126 -0
- package/dist/stories/Library/Folders/Folders.stories.js +55 -0
- package/dist/stories/Library/Notes/Notes.js +135 -0
- package/dist/stories/Library/Notes/Notes.stories.js +42 -0
- package/dist/stories/Library/ViewNote/ViewNote.js +30 -0
- package/dist/stories/Library/ViewNote/ViewNote.stories.js +24 -0
- package/dist/stories/Misc/Thumbnail/Thumbnail.js +118 -0
- package/dist/stories/Music Album/ViewAlbum/ViewAlbum.js +131 -0
- package/dist/stories/Music Album/ViewAlbum/ViewAlbum.stories.js +115 -0
- package/dist/stories/Music Album/ViewAlbums/ViewAlbums.js +149 -0
- package/dist/stories/Music Album/ViewAlbums/ViewAlbums.stories.js +107 -0
- package/dist/stories/Navbar/Navbar.js +346 -0
- package/dist/stories/Navbar/Navbar.stories.js +41 -0
- package/dist/stories/Pages/Blank/Blank.js +36 -0
- package/dist/stories/Pages/Blank/Blank.stories.js +24 -0
- package/dist/stories/Pages/Centered/Centered.js +34 -0
- package/dist/stories/Pages/Centered/Centered.stories.js +24 -0
- package/dist/stories/Pages/Chat/Chat.js +86 -0
- package/dist/stories/Pages/Chat/Chat.stories.js +74 -0
- package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.js +96 -0
- package/dist/stories/Pages/Enrollment/DetailedForm/DetailedForm.stories.js +22 -0
- package/dist/stories/Pages/Enrollment/FillForm/FillForm.js +102 -0
- package/dist/stories/Pages/Enrollment/FillForm/FillForm.stories.js +22 -0
- package/dist/stories/Pages/Enrollment/Forms/Forms.js +125 -0
- package/dist/stories/Pages/Enrollment/Forms/Forms.stories.js +22 -0
- package/dist/stories/Pages/Events/Event/Event.js +89 -0
- package/dist/stories/Pages/Events/Event/Event.stories.js +22 -0
- package/dist/stories/Pages/Events/Events/Events.js +125 -0
- package/dist/stories/Pages/Events/Events/Events.stories.js +22 -0
- package/dist/stories/Pages/Library/Folders/Library.js +136 -0
- package/dist/stories/Pages/Library/Folders/Library.stories.js +22 -0
- package/dist/stories/Pages/Library/Notes/Notes.js +123 -0
- package/dist/stories/Pages/Library/Notes/Notes.stories.js +22 -0
- package/dist/stories/Pages/Music/MusicAlbum/Music.js +211 -0
- package/dist/stories/Pages/Music/MusicAlbum/Music.stories.js +22 -0
- package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.js +155 -0
- package/dist/stories/Pages/Music/MusicAlbums/MusicAlbums.stories.js +22 -0
- package/dist/stories/Pages/Photos/Album/Album.js +164 -0
- package/dist/stories/Pages/Photos/Album/Album.stories.js +22 -0
- package/dist/stories/Pages/Photos/Albums/Albums.js +151 -0
- package/dist/stories/Pages/Photos/Albums/Albums.stories.js +22 -0
- package/dist/stories/Pages/Video/DetailedVideo/DetailedVideo.js +112 -0
- package/dist/stories/Pages/Video/DetailedVideo/DetailedVideo.stories.js +22 -0
- package/dist/stories/Pages/Video/VideoAlbum/Video.js +216 -0
- package/dist/stories/Pages/Video/VideoAlbum/Video.stories.js +22 -0
- package/dist/stories/Pages/ViewWorld/ViewWorld.js +244 -0
- package/dist/stories/Pages/ViewWorld/ViewWorld.stories.js +264 -0
- package/dist/stories/Pages/ViewWorld/constatnts.js +172 -0
- package/dist/stories/Photo Album/DetailedPhoto/DetailedPhoto.js +24 -0
- package/dist/stories/Photo Album/DetailedPhoto/DetailedPhoto.stories.js +32 -0
- package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.js +236 -0
- package/dist/stories/Photo Album/ViewAlbum/ViewAlbum.stories.js +115 -0
- package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.js +156 -0
- package/dist/stories/Photo Album/ViewAlbums/ViewAlbums.stories.js +102 -0
- package/dist/stories/Reusable Components/Cards/Card-style-1/CardStyle1.js +67 -0
- package/dist/stories/Reusable Components/Cards/Card-style-1/CardStyle1.stories.js +35 -0
- package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.js +81 -0
- package/dist/stories/Reusable Components/Cards/Card-style-10/CardStyle10.stories.js +37 -0
- package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.js +67 -0
- package/dist/stories/Reusable Components/Cards/Card-style-11/CardStyle11.stories.js +40 -0
- package/dist/stories/Reusable Components/Cards/Card-style-2/CardStyle2.js +67 -0
- package/dist/stories/Reusable Components/Cards/Card-style-2/CardStyle2.stories.js +37 -0
- package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.js +65 -0
- package/dist/stories/Reusable Components/Cards/Card-style-3/CardStyle3.stories.js +34 -0
- package/dist/stories/Reusable Components/Cards/Card-style-4/CardStyle4.js +66 -0
- package/dist/stories/Reusable Components/Cards/Card-style-4/CardStyle4.stories.js +39 -0
- package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.js +93 -0
- package/dist/stories/Reusable Components/Cards/Card-style-6/CardStyle6.stories.js +27 -0
- package/dist/stories/Reusable Components/Cards/Card-style-7/CardStyle7.js +88 -0
- package/dist/stories/Reusable Components/Cards/Card-style-7/CardStyle7.stories.js +37 -0
- package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.js +86 -0
- package/dist/stories/Reusable Components/Cards/Card-style-8/CardStyle8.stories.js +44 -0
- package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.js +67 -0
- package/dist/stories/Reusable Components/Cards/Card-style-9/CardStyle9.stories.js +27 -0
- package/dist/stories/Reusable Components/Cards/Card.js +102 -0
- package/dist/stories/Reusable Components/Cards/Card.stories.js +132 -0
- package/dist/stories/Reusable Components/Cards/globalCardStyles.js +70 -0
- package/dist/stories/Reusable Components/Controls/Controls.js +128 -0
- package/dist/stories/Reusable Components/Controls/Controls.stories.js +49 -0
- package/dist/stories/Reusable Components/Gallery/Gallery.js +120 -0
- package/dist/stories/Reusable Components/Gallery/Gallery.stories.js +56 -0
- package/dist/stories/Reusable Components/Lists/Cards/ListCard-1.js +1 -0
- package/dist/stories/Reusable Components/Lists/Cards/ListCard-1.stories.js +1 -0
- package/dist/stories/Reusable Components/Lists/List.js +1 -0
- package/dist/stories/Reusable Components/Lists/List.stories.js +1 -0
- package/dist/stories/Reusable Components/Mention/Mention.js +72 -0
- package/dist/stories/Reusable Components/Mention/Mention.stories.js +66 -0
- package/dist/stories/Reusable Components/ReactModal/ReactModal.js +83 -0
- package/dist/stories/Reusable Components/ReusableForm/ReusableForm.js +100 -0
- package/dist/stories/Reusable Components/ReusableForm/ReusableForm.stories.js +207 -0
- package/dist/stories/Reusable Components/ReusableHeader/ReusableHeader.js +64 -0
- package/dist/stories/Reusable Components/ReusableHeader/ReusableHeader.stories.js +35 -0
- package/dist/stories/Reusable Components/ReusableList/ReusableList.js +92 -0
- package/dist/stories/Reusable Components/ReusableList/ReusableList.stories.js +84 -0
- package/dist/stories/Reusable Components/SearchCard/SearchCard.js +81 -0
- package/dist/stories/Reusable Components/SearchCard/SearchCard.stories.js +24 -0
- package/dist/stories/Reusable Components/SpaceContainer/SpaceContainer.js +48 -0
- package/dist/stories/Reusable Components/SpaceContainer/SpaceContainer.stories.js +80 -0
- package/dist/stories/Reusable Components/Spinner/Spinner.js +28 -0
- package/dist/stories/Reusable Components/Spinner/Spinner.stories.js +22 -0
- package/dist/stories/Reusable Components/WidgetContainer/WidgetContainer.js +51 -0
- package/dist/stories/Reusable Components/WidgetContainer/WidgetContainer.stories.js +80 -0
- package/dist/stories/Reusable Components/commonStyles.js +54 -0
- package/dist/stories/Reusable Components/fakeData.js +112 -0
- package/dist/stories/Spaces/WelcomeSpace/WelcomeSpace.js +74 -0
- package/dist/stories/Spaces/WelcomeSpace/WelcomeSpace.stories.js +24 -0
- package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.js +151 -0
- package/dist/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.stories.js +101 -0
- package/dist/stories/VideoAlbum/Comments/Comments.js +58 -0
- package/dist/stories/VideoAlbum/Comments/Comments.stories.js +45 -0
- package/dist/stories/VideoAlbum/VideoPlayer/VideoPlayer.js +235 -0
- package/dist/stories/VideoAlbum/VideoPlayer/VideoPlayer.stories.js +149 -0
- package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.js +110 -0
- package/dist/stories/VideoAlbum/VideoSpace/VideoSpace.stories.js +49 -0
- package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.js +150 -0
- package/dist/stories/VideoAlbum/ViewAlbum/ViewAlbum.stories.js +113 -0
- package/dist/stories/Widgets/LogoWidget/LogoWidget.js +32 -0
- package/dist/stories/Widgets/LogoWidget/LogoWidget.stories.js +26 -0
- package/dist/stories/Widgets/MusicPlayer/MusicPlayer.js +49 -0
- package/dist/stories/Widgets/MusicPlayer/MusicPlayer.stories.js +44 -0
- package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.js +93 -0
- package/dist/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.stories.js +52 -0
- package/dist/stories/Widgets/SpacesList/SpacesList.js +28 -0
- package/dist/stories/Widgets/SpacesList/SpacesList.stories.js +52 -0
- package/dist/stories/Widgets/SpacesList/SpacesListItem.js +50 -0
- package/dist/stories/Widgets/SpacesList/SpacesListItem.stories.js +24 -0
- package/dist/stories/helpers/util.js +178 -0
- package/package.json +131 -0
- package/public/favicon.ico +0 -0
- package/public/index.html +43 -0
- package/public/logo192.png +0 -0
- package/public/logo512.png +0 -0
- package/public/manifest.json +25 -0
- package/public/robots.txt +3 -0
- package/src/assets/add-svgrepo-com.svg +36 -0
- package/src/assets/basket-svgrepo-com.svg +42 -0
- package/src/assets/bell-svgrepo-com.svg +44 -0
- package/src/assets/compass-svgrepo-com.svg +54 -0
- package/src/assets/home-svgrepo-com.svg +42 -0
- package/src/assets/medal-svgrepo-com.svg +53 -0
- package/src/assets/search-svgrepo-com.svg +42 -0
- package/src/assets/settings-svgrepo-com.svg +47 -0
- package/src/index.js +95 -0
- package/src/stories/API/API.jsx +47 -0
- package/src/stories/API/API.stories.js +10 -0
- package/src/stories/Agora/Call/Call.jsx +213 -0
- package/src/stories/Agora/Chat/Chat.jsx +130 -0
- package/src/stories/Agora/Chat/Chat.stories.jsx +10 -0
- package/src/stories/Agora/Chat/Components/ChatItem/ChatItem.jsx +38 -0
- package/src/stories/Agora/Chat/Components/ChatRoom/ChatRoom.jsx +167 -0
- package/src/stories/Agora/Controls/Controls.jsx +56 -0
- package/src/stories/Agora/Preview/PreviewCamera.jsx +259 -0
- package/src/stories/Agora/Preview/ShareScreen.jsx +58 -0
- package/src/stories/Agora/Room/Room.jsx +85 -0
- package/src/stories/Agora/Room/Room.stories.jsx +10 -0
- package/src/stories/Buttons/Buttons/Buttons.jsx +57 -0
- package/src/stories/Buttons/Buttons/Buttons.stories.jsx +24 -0
- package/src/stories/Buttons/ReactModal/ReactModal.jsx +81 -0
- package/src/stories/Buttons/ReactModal/ReactModal.stories.jsx +18 -0
- package/src/stories/Buttons/ReactModal/ReactModalDemo.jsx +12 -0
- package/src/stories/Chat/Chat.jsx +74 -0
- package/src/stories/Chat/Chat.stories.jsx +59 -0
- package/src/stories/Common Inputs/CheckboxGroup/CheckboxGroup.jsx +70 -0
- package/src/stories/Common Inputs/CheckboxGroup/CheckboxGroup.stories.jsx +32 -0
- package/src/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.jsx +98 -0
- package/src/stories/Common Inputs/CustomAutoComplete/CustomAutoComplete.stories.jsx +35 -0
- package/src/stories/Common Inputs/CustomDropzone/CustomDropZone.jsx +115 -0
- package/src/stories/Common Inputs/CustomDropzone/CustomDropzone.stories.jsx +26 -0
- package/src/stories/Common Inputs/CustomSelect/CustomSelect.jsx +89 -0
- package/src/stories/Common Inputs/CustomSelect/CustomSelect.stories.jsx +36 -0
- package/src/stories/Common Inputs/CustomTextarea/CustomTextarea.jsx +66 -0
- package/src/stories/Common Inputs/CustomTextarea/CustomTextarea.stories.jsx +31 -0
- package/src/stories/Common Inputs/DatePicker/DatePicker.jsx +105 -0
- package/src/stories/Common Inputs/DatePicker/DatePicker.stories.jsx +47 -0
- package/src/stories/Common Inputs/DatePicker/SingleDatePicker.jsx +91 -0
- package/src/stories/Common Inputs/DropZone.jsx +79 -0
- package/src/stories/Common Inputs/EditorComponent/EditorComponent.jsx +54 -0
- package/src/stories/Common Inputs/EditorComponent/EditorComponent.stories.jsx +60 -0
- package/src/stories/Common Inputs/EditorComponent/constants.js +26 -0
- package/src/stories/Common Inputs/Formik/InputField/InputField.jsx +24 -0
- package/src/stories/Common Inputs/Formik/InputField/InputField.stories.jsx +27 -0
- package/src/stories/Common Inputs/Formik/RadioField/RadioField.jsx +55 -0
- package/src/stories/Common Inputs/Formik/RadioField/RadioField.stories.jsx +41 -0
- package/src/stories/Common Inputs/RadioInput/RadioInput.jsx +108 -0
- package/src/stories/Common Inputs/RadioInput/RadioInput.stories.js +30 -0
- package/src/stories/Common Inputs/RichTextInput/Components/Emoji/Emoji.jsx +16 -0
- package/src/stories/Common Inputs/RichTextInput/Components/Gif/Gif.jsx +64 -0
- package/src/stories/Common Inputs/RichTextInput/RichTextInput.jsx +331 -0
- package/src/stories/Common Inputs/RichTextInput/RichTextInput.stories.js +45 -0
- package/src/stories/Common Inputs/TextField/TextField.jsx +66 -0
- package/src/stories/Common Inputs/TextField/TextField.stories.jsx +31 -0
- package/src/stories/Containers/BaseMaterial.jsx +58 -0
- package/src/stories/Containers/BaseMaterial.stories.js +10 -0
- package/src/stories/Containers/WidgetExample/WidgetBody.jsx +9 -0
- package/src/stories/Containers/WidgetExample/WidgetBody.stories.js +10 -0
- package/src/stories/Containers/WidgetExample/WidgetExample.jsx +19 -0
- package/src/stories/Containers/WidgetExample/WidgetExample.stories.js +10 -0
- package/src/stories/Containers/WidgetExample/WidgetHead.jsx +9 -0
- package/src/stories/Containers/WidgetExample/WidgetHead.stories.js +10 -0
- package/src/stories/Enrollment/Admin/CreateForm/CreateForm.jsx +62 -0
- package/src/stories/Enrollment/Admin/CreateForm/CreateForm.stories.jsx +8 -0
- package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.jsx +98 -0
- package/src/stories/Enrollment/Admin/DetailedForm/DetailedForm.stories.jsx +36 -0
- package/src/stories/Enrollment/Admin/ViewForms/ViewForms.jsx +40 -0
- package/src/stories/Enrollment/Admin/ViewForms/ViewForms.stories.jsx +66 -0
- package/src/stories/Enrollment/Guest/FillForm/FillForm.jsx +61 -0
- package/src/stories/Enrollment/Guest/FillForm/FillForm.stories.jsx +27 -0
- package/src/stories/Events/CreateEvent/CreateEvent.jsx +96 -0
- package/src/stories/Events/CreateEvent/CreateEvent.stories.jsx +19 -0
- package/src/stories/Events/Event/Event.jsx +113 -0
- package/src/stories/Events/Event/Event.stories.jsx +21 -0
- package/src/stories/Events/EventsList/EventsList.jsx +117 -0
- package/src/stories/Events/EventsList/EventsList.stories.jsx +25 -0
- package/src/stories/Forms/AddPhoto/AddPhoto.jsx +85 -0
- package/src/stories/Forms/AddPhoto/AddPhoto.stories.jsx +37 -0
- package/src/stories/Forms/AddSong/AddSong.jsx +86 -0
- package/src/stories/Forms/AddSong/AddSong.stories.jsx +26 -0
- package/src/stories/Forms/AddVideo/AddVideo.jsx +78 -0
- package/src/stories/Forms/AddVideo/AddVideo.stories.jsx +20 -0
- package/src/stories/Forms/Create-Profile/CreateProfile.jsx +278 -0
- package/src/stories/Forms/Create-Profile/CreateProfile.stories.jsx +36 -0
- package/src/stories/Forms/Create-Profile/subcomponents/LogoUploader.jsx +63 -0
- package/src/stories/Forms/Create-Profile/subcomponents/LogoUploader.stories.jsx +27 -0
- package/src/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.jsx +58 -0
- package/src/stories/Forms/Create-Profile/subcomponents/ProfilePhoto.stories.jsx +26 -0
- package/src/stories/Forms/Create-Profile/subcomponents/ResetBtn.jsx +21 -0
- package/src/stories/Forms/Create-Profile/subcomponents/ResetBtn.stories.jsx +18 -0
- package/src/stories/Forms/CreateAlbum/CreateAlbum.jsx +82 -0
- package/src/stories/Forms/CreateAlbum/CreateAlbum.stories.jsx +37 -0
- package/src/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.jsx +63 -0
- package/src/stories/Forms/CreateAnnouncementForm/CreateAnnouncementForm.stories.jsx +44 -0
- package/src/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.jsx +87 -0
- package/src/stories/Forms/CreateMusicAlbum/CreateMusicAlbum.stories.jsx +38 -0
- package/src/stories/Forms/CreateProfile/CreateProfile.jsx +556 -0
- package/src/stories/Forms/CreateProfile/CreateProfile.stories.js +10 -0
- package/src/stories/Forms/CreateProfile-3/CreateProfile.jsx +488 -0
- package/src/stories/Forms/CreateProfile-3/CreateProfile.stories.js +10 -0
- package/src/stories/Forms/CreateUser/CreateUser.jsx +13 -0
- package/src/stories/Forms/CreateUser/CreateUser.stories.js +10 -0
- package/src/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.jsx +78 -0
- package/src/stories/Forms/CreateVideoAlbum/CreateVideoAlbum.stories.jsx +23 -0
- package/src/stories/Forms/Form/Form.jsx +34 -0
- package/src/stories/Forms/Form/Form.stories.js +10 -0
- package/src/stories/Forms/NewProfile/NewProfile.jsx +464 -0
- package/src/stories/Forms/NewProfile/NewProfile.stories.jsx +10 -0
- package/src/stories/Forms/NewProfile/presets.json +9 -0
- package/src/stories/Layout/Body/Body.jsx +24 -0
- package/src/stories/Layout/Body/Body.stories.js +26 -0
- package/src/stories/Layout/Center/Center.jsx +16 -0
- package/src/stories/Layout/Center/Center.stories.js +14 -0
- package/src/stories/Layout/Head/Head.jsx +15 -0
- package/src/stories/Layout/Head/Head.stories.js +10 -0
- package/src/stories/Layout/Left/Left.jsx +21 -0
- package/src/stories/Layout/Left/Left.stories.js +14 -0
- package/src/stories/Layout/Right/Right.jsx +17 -0
- package/src/stories/Layout/Right/Right.stories.js +14 -0
- package/src/stories/Library/CreateFolder/CreateFolder.jsx +78 -0
- package/src/stories/Library/CreateFolder/CreateFolder.stories.jsx +32 -0
- package/src/stories/Library/Folders/Folders.jsx +117 -0
- package/src/stories/Library/Folders/Folders.stories.jsx +34 -0
- package/src/stories/Library/Notes/Notes.jsx +117 -0
- package/src/stories/Library/Notes/Notes.stories.jsx +24 -0
- package/src/stories/Library/ViewNote/ViewNote.jsx +25 -0
- package/src/stories/Library/ViewNote/ViewNote.stories.jsx +16 -0
- package/src/stories/Misc/Thumbnail/Thumbnail.jsx +79 -0
- package/src/stories/Music Album/ViewAlbum/ViewAlbum.jsx +111 -0
- package/src/stories/Music Album/ViewAlbum/ViewAlbum.stories.jsx +60 -0
- package/src/stories/Music Album/ViewAlbums/ViewAlbums.jsx +134 -0
- package/src/stories/Music Album/ViewAlbums/ViewAlbums.stories.jsx +57 -0
- package/src/stories/Navbar/Navbar.jsx +350 -0
- package/src/stories/Navbar/Navbar.stories.js +25 -0
- package/src/stories/Pages/Blank/Blank.jsx +32 -0
- package/src/stories/Pages/Blank/Blank.stories.js +10 -0
- package/src/stories/Pages/Centered/Centered.jsx +31 -0
- package/src/stories/Pages/Centered/Centered.stories.js +14 -0
- package/src/stories/Pages/Chat/Chat.jsx +82 -0
- package/src/stories/Pages/Chat/Chat.stories.jsx +53 -0
- package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.jsx +102 -0
- package/src/stories/Pages/Enrollment/DetailedForm/DetailedForm.stories.jsx +8 -0
- package/src/stories/Pages/Enrollment/FillForm/FillForm.jsx +96 -0
- package/src/stories/Pages/Enrollment/FillForm/FillForm.stories.jsx +8 -0
- package/src/stories/Pages/Enrollment/Forms/Forms.jsx +129 -0
- package/src/stories/Pages/Enrollment/Forms/Forms.stories.jsx +8 -0
- package/src/stories/Pages/Events/Event/Event.jsx +88 -0
- package/src/stories/Pages/Events/Event/Event.stories.jsx +8 -0
- package/src/stories/Pages/Events/Events/Events.jsx +110 -0
- package/src/stories/Pages/Events/Events/Events.stories.jsx +8 -0
- package/src/stories/Pages/Library/Folders/Library.jsx +118 -0
- package/src/stories/Pages/Library/Folders/Library.stories.jsx +8 -0
- package/src/stories/Pages/Library/Notes/Notes.jsx +109 -0
- package/src/stories/Pages/Library/Notes/Notes.stories.jsx +8 -0
- package/src/stories/Pages/Music/MusicAlbum/Music.jsx +159 -0
- package/src/stories/Pages/Music/MusicAlbum/Music.stories.jsx +8 -0
- package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.jsx +138 -0
- package/src/stories/Pages/Music/MusicAlbums/MusicAlbums.stories.jsx +8 -0
- package/src/stories/Pages/Photos/Album/Album.jsx +120 -0
- package/src/stories/Pages/Photos/Album/Album.stories.jsx +8 -0
- package/src/stories/Pages/Photos/Albums/Albums.jsx +144 -0
- package/src/stories/Pages/Photos/Albums/Albums.stories.jsx +8 -0
- package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.jsx +91 -0
- package/src/stories/Pages/Video/DetailedVideo/DetailedVideo.stories.jsx +8 -0
- package/src/stories/Pages/Video/VideoAlbum/Video.jsx +166 -0
- package/src/stories/Pages/Video/VideoAlbum/Video.stories.jsx +8 -0
- package/src/stories/Pages/ViewWorld/ViewWorld.jsx +193 -0
- package/src/stories/Pages/ViewWorld/ViewWorld.stories.js +270 -0
- package/src/stories/Pages/ViewWorld/constatnts.js +158 -0
- package/src/stories/Pages/ViewWorld/styles.json +18 -0
- package/src/stories/Photo Album/DetailedPhoto/DetailedPhoto.jsx +17 -0
- package/src/stories/Photo Album/DetailedPhoto/DetailedPhoto.stories.jsx +20 -0
- package/src/stories/Photo Album/ViewAlbum/ViewAlbum.jsx +250 -0
- package/src/stories/Photo Album/ViewAlbum/ViewAlbum.stories.jsx +60 -0
- package/src/stories/Photo Album/ViewAlbums/ViewAlbums.jsx +146 -0
- package/src/stories/Photo Album/ViewAlbums/ViewAlbums.stories.jsx +59 -0
- package/src/stories/Reusable Components/Cards/Card-style-1/CardStyle1.jsx +74 -0
- package/src/stories/Reusable Components/Cards/Card-style-1/CardStyle1.stories.jsx +22 -0
- package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.jsx +94 -0
- package/src/stories/Reusable Components/Cards/Card-style-10/CardStyle10.stories.jsx +21 -0
- package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.jsx +79 -0
- package/src/stories/Reusable Components/Cards/Card-style-11/CardStyle11.stories.jsx +21 -0
- package/src/stories/Reusable Components/Cards/Card-style-2/CardStyle2.jsx +75 -0
- package/src/stories/Reusable Components/Cards/Card-style-2/CardStyle2.stories.jsx +24 -0
- package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.jsx +61 -0
- package/src/stories/Reusable Components/Cards/Card-style-3/CardStyle3.stories.jsx +22 -0
- package/src/stories/Reusable Components/Cards/Card-style-4/CardStyle4.jsx +67 -0
- package/src/stories/Reusable Components/Cards/Card-style-4/CardStyle4.stories.jsx +25 -0
- package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.jsx +117 -0
- package/src/stories/Reusable Components/Cards/Card-style-6/CardStyle6.stories.jsx +9 -0
- package/src/stories/Reusable Components/Cards/Card-style-7/CardStyle7.jsx +126 -0
- package/src/stories/Reusable Components/Cards/Card-style-7/CardStyle7.stories.jsx +23 -0
- package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.jsx +113 -0
- package/src/stories/Reusable Components/Cards/Card-style-8/CardStyle8.stories.jsx +29 -0
- package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.jsx +86 -0
- package/src/stories/Reusable Components/Cards/Card-style-9/CardStyle9.stories.jsx +14 -0
- package/src/stories/Reusable Components/Cards/Card.jsx +119 -0
- package/src/stories/Reusable Components/Cards/Card.stories.jsx +118 -0
- package/src/stories/Reusable Components/Cards/globalCardStyles.js +54 -0
- package/src/stories/Reusable Components/Controls/Controls.jsx +137 -0
- package/src/stories/Reusable Components/Controls/Controls.stories.jsx +24 -0
- package/src/stories/Reusable Components/Gallery/Gallery.jsx +110 -0
- package/src/stories/Reusable Components/Gallery/Gallery.stories.jsx +43 -0
- package/src/stories/Reusable Components/Lists/Cards/ListCard-1.jsx +0 -0
- package/src/stories/Reusable Components/Lists/Cards/ListCard-1.stories.js +0 -0
- package/src/stories/Reusable Components/Lists/List.jsx +0 -0
- package/src/stories/Reusable Components/Lists/List.stories.js +0 -0
- package/src/stories/Reusable Components/Mention/Mention.jsx +69 -0
- package/src/stories/Reusable Components/Mention/Mention.stories.jsx +55 -0
- package/src/stories/Reusable Components/ReactModal/ReactModal.jsx +76 -0
- package/src/stories/Reusable Components/ReusableForm/ReusableForm.jsx +121 -0
- package/src/stories/Reusable Components/ReusableForm/ReusableForm.stories.jsx +167 -0
- package/src/stories/Reusable Components/ReusableHeader/ReusableHeader.jsx +76 -0
- package/src/stories/Reusable Components/ReusableHeader/ReusableHeader.stories.jsx +22 -0
- package/src/stories/Reusable Components/ReusableList/ReusableList.jsx +103 -0
- package/src/stories/Reusable Components/ReusableList/ReusableList.stories.jsx +70 -0
- package/src/stories/Reusable Components/SearchCard/SearchCard.jsx +89 -0
- package/src/stories/Reusable Components/SearchCard/SearchCard.stories.js +10 -0
- package/src/stories/Reusable Components/SpaceContainer/SpaceContainer.jsx +48 -0
- package/src/stories/Reusable Components/SpaceContainer/SpaceContainer.stories.jsx +78 -0
- package/src/stories/Reusable Components/Spinner/Spinner.jsx +82 -0
- package/src/stories/Reusable Components/Spinner/Spinner.stories.jsx +8 -0
- package/src/stories/Reusable Components/WidgetContainer/WidgetContainer.jsx +59 -0
- package/src/stories/Reusable Components/WidgetContainer/WidgetContainer.stories.jsx +61 -0
- package/src/stories/Reusable Components/commonStyles.js +47 -0
- package/src/stories/Reusable Components/fakeData.js +95 -0
- package/src/stories/Spaces/WelcomeSpace/WelcomeSpace.jsx +102 -0
- package/src/stories/Spaces/WelcomeSpace/WelcomeSpace.stories.js +10 -0
- package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.jsx +130 -0
- package/src/stories/VideoAlbum/AlbumsGallery/AlbumsGallery.stories.jsx +59 -0
- package/src/stories/VideoAlbum/Comments/Comments.jsx +58 -0
- package/src/stories/VideoAlbum/Comments/Comments.stories.jsx +18 -0
- package/src/stories/VideoAlbum/VideoPlayer/VideoPlayer.jsx +214 -0
- package/src/stories/VideoAlbum/VideoPlayer/VideoPlayer.stories.jsx +82 -0
- package/src/stories/VideoAlbum/VideoSpace/VideoSpace.jsx +101 -0
- package/src/stories/VideoAlbum/VideoSpace/VideoSpace.stories.jsx +23 -0
- package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.jsx +131 -0
- package/src/stories/VideoAlbum/ViewAlbum/ViewAlbum.stories.jsx +57 -0
- package/src/stories/Widgets/LogoWidget/LogoWidget.jsx +21 -0
- package/src/stories/Widgets/LogoWidget/LogoWidget.stories.js +12 -0
- package/src/stories/Widgets/MusicPlayer/MusicPlayer.jsx +64 -0
- package/src/stories/Widgets/MusicPlayer/MusicPlayer.stories.jsx +23 -0
- package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.jsx +107 -0
- package/src/stories/Widgets/MusicPlayerWidget/MusicPlayerWidget.stories.jsx +33 -0
- package/src/stories/Widgets/SpacesList/SpacesList.jsx +16 -0
- package/src/stories/Widgets/SpacesList/SpacesList.stories.jsx +27 -0
- package/src/stories/Widgets/SpacesList/SpacesListItem.jsx +75 -0
- package/src/stories/Widgets/SpacesList/SpacesListItem.stories.jsx +10 -0
- package/src/stories/assets/camera.svg +1 -0
- package/src/stories/assets/code-brackets.svg +1 -0
- package/src/stories/assets/colors.svg +1 -0
- package/src/stories/assets/comments.svg +1 -0
- package/src/stories/assets/direction.svg +1 -0
- package/src/stories/assets/flow.svg +1 -0
- package/src/stories/assets/images/album1.jpg +0 -0
- package/src/stories/assets/images/album2.jpg +0 -0
- package/src/stories/assets/images/album3.jpg +0 -0
- package/src/stories/assets/images/album4.jpg +0 -0
- package/src/stories/assets/images/album5.jpg +0 -0
- package/src/stories/assets/images/album6.jpg +0 -0
- package/src/stories/assets/images/art.jpg +0 -0
- package/src/stories/assets/images/dance.jpg +0 -0
- package/src/stories/assets/images/football.jpg +0 -0
- package/src/stories/assets/images/music.jpg +0 -0
- package/src/stories/assets/images/music1.jpg +0 -0
- package/src/stories/assets/images/music2.jpg +0 -0
- package/src/stories/assets/images/music3.jpg +0 -0
- package/src/stories/assets/images/music4.jpg +0 -0
- package/src/stories/assets/images/music5.jpg +0 -0
- package/src/stories/assets/images/music6.jpg +0 -0
- package/src/stories/assets/images/reset.png +0 -0
- package/src/stories/assets/images/robotics.jpg +0 -0
- package/src/stories/assets/images/tennis.jpg +0 -0
- package/src/stories/assets/plugin.svg +1 -0
- package/src/stories/assets/repo.svg +1 -0
- package/src/stories/assets/reset.svg +1 -0
- package/src/stories/assets/stackalt.svg +1 -0
- package/src/stories/helpers/util.js +66 -0
@@ -0,0 +1,113 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
|
3
|
+
import styled from 'styled-components';
|
4
|
+
import PropTypes from "prop-types";
|
5
|
+
import Controls from '../../Controls/Controls';
|
6
|
+
|
7
|
+
import {
|
8
|
+
MainCard,
|
9
|
+
globalContent,
|
10
|
+
Title, Description,
|
11
|
+
Img
|
12
|
+
} from '../globalCardStyles';
|
13
|
+
|
14
|
+
const CardStyle8 = ({ username, date, text, img, media, ...props }) => {
|
15
|
+
const [showIcons, setShowIcons] = useState(false)
|
16
|
+
|
17
|
+
const iconCliked = (action) => {
|
18
|
+
console.log(action);
|
19
|
+
}
|
20
|
+
|
21
|
+
return (
|
22
|
+
<Card
|
23
|
+
onMouseEnter={e => setShowIcons(true)}
|
24
|
+
onMouseLeave={e => setShowIcons(false)}
|
25
|
+
{...props}>
|
26
|
+
<ImgWrapper {...props}>
|
27
|
+
<Img src={img} />
|
28
|
+
</ImgWrapper>
|
29
|
+
<Content {...props}>
|
30
|
+
<Header>
|
31
|
+
<Title {...props}>{username}</Title>
|
32
|
+
<Date>{date}</Date>
|
33
|
+
</Header>
|
34
|
+
<Description {...props}>{text}</Description>
|
35
|
+
{media && <Media>
|
36
|
+
{media}
|
37
|
+
</Media>}
|
38
|
+
</Content>
|
39
|
+
{props.cardControls
|
40
|
+
&&
|
41
|
+
<Controls
|
42
|
+
controls={props.cardControls}
|
43
|
+
show={showIcons}
|
44
|
+
onIconClicked={iconCliked}
|
45
|
+
{...props.controlsStyles} />}
|
46
|
+
</Card>
|
47
|
+
)
|
48
|
+
}
|
49
|
+
|
50
|
+
const Card = styled(MainCard)`
|
51
|
+
column-gap: 30px;
|
52
|
+
align-items: flex-start;
|
53
|
+
`
|
54
|
+
const ImgWrapper = styled.div`
|
55
|
+
min-width: ${props => props.imgSize || 60}px;
|
56
|
+
min-height: ${props => props.imgSize || 60}px;
|
57
|
+
width: 60px;
|
58
|
+
height: 60px;
|
59
|
+
border-radius: 100%;
|
60
|
+
`
|
61
|
+
|
62
|
+
const Content = styled(globalContent)`
|
63
|
+
height: 100%;
|
64
|
+
justify-content: space-between;
|
65
|
+
gap: 10px;
|
66
|
+
`
|
67
|
+
|
68
|
+
const Header = styled.div`
|
69
|
+
display: flex;
|
70
|
+
align-items: center;
|
71
|
+
gap: 20px;
|
72
|
+
`
|
73
|
+
|
74
|
+
const Date = styled.p`
|
75
|
+
font-size: 14px;
|
76
|
+
color: gray;
|
77
|
+
`
|
78
|
+
|
79
|
+
const Media = styled.div`
|
80
|
+
max-width: 300px;
|
81
|
+
|
82
|
+
*{
|
83
|
+
width: 100%;
|
84
|
+
}
|
85
|
+
`
|
86
|
+
|
87
|
+
|
88
|
+
CardStyle8.defaultProps = {
|
89
|
+
cardTitleFontSize: 15,
|
90
|
+
cardPadding: 5
|
91
|
+
}
|
92
|
+
|
93
|
+
CardStyle8.propTypes = {
|
94
|
+
username: PropTypes.string,
|
95
|
+
text: PropTypes.string,
|
96
|
+
img: PropTypes.string,
|
97
|
+
date: PropTypes.string,
|
98
|
+
cardBackgroundColor: PropTypes.string,
|
99
|
+
onHoverBackgroundColor: PropTypes.string,
|
100
|
+
cardRadius: PropTypes.number,
|
101
|
+
cardTitleFontSize: PropTypes.number,
|
102
|
+
cardTitleFontWeight: PropTypes.number,
|
103
|
+
cardTitleColor: PropTypes.string,
|
104
|
+
cardImageRadius: PropTypes.string,
|
105
|
+
cardDescriptionFontSize: PropTypes.number,
|
106
|
+
cardDescriptionColor: PropTypes.string,
|
107
|
+
cardPadding: PropTypes.number,
|
108
|
+
imgSize: PropTypes.number,
|
109
|
+
cardBorderSize: PropTypes.number,
|
110
|
+
cardBorderColor: PropTypes.string
|
111
|
+
};
|
112
|
+
|
113
|
+
export default CardStyle8
|
@@ -0,0 +1,29 @@
|
|
1
|
+
import CardStyle8 from './CardStyle8';
|
2
|
+
|
3
|
+
import { controls } from '../../fakeData'
|
4
|
+
|
5
|
+
export default {
|
6
|
+
title: 'Reusable Components/Cards/Card style 8',
|
7
|
+
component: CardStyle8
|
8
|
+
}
|
9
|
+
|
10
|
+
export const Card = args => (
|
11
|
+
<CardStyle8
|
12
|
+
img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
|
13
|
+
username="Card Style 8"
|
14
|
+
date="15/12/2021"
|
15
|
+
text="Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test Card style 8 description test "
|
16
|
+
cardControls={controls}
|
17
|
+
media={(<img src="https://arabhardware.net/wp-content/uploads/2020/03/valorant-2020-4k-0f-scaled.jpg"/>)}
|
18
|
+
controlsStyles={{
|
19
|
+
iconColor: 'black',
|
20
|
+
showOnHover: true,
|
21
|
+
position: 'absolute',
|
22
|
+
iconBackground: '#414141',
|
23
|
+
iconSize: 18,
|
24
|
+
iconColor: 'white',
|
25
|
+
dropdownBackground: '#414141',
|
26
|
+
dropdownFontColor: 'white'
|
27
|
+
}}
|
28
|
+
{...args}
|
29
|
+
/>)
|
@@ -0,0 +1,86 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
|
3
|
+
import styled from 'styled-components';
|
4
|
+
import PropTypes from "prop-types";
|
5
|
+
|
6
|
+
import {
|
7
|
+
MainCard,
|
8
|
+
globalContent,
|
9
|
+
Title,
|
10
|
+
Img
|
11
|
+
} from '../globalCardStyles';
|
12
|
+
|
13
|
+
const CardStyle9 = ({ username, answered, img, status, ...props }) => {
|
14
|
+
console.log(props)
|
15
|
+
|
16
|
+
const onAccept = () => {
|
17
|
+
alert(props.index)
|
18
|
+
}
|
19
|
+
|
20
|
+
return (
|
21
|
+
<Card {...props}>
|
22
|
+
<ImgWrapper {...props}>
|
23
|
+
<Img src={img} />
|
24
|
+
</ImgWrapper>
|
25
|
+
<Content {...props}>
|
26
|
+
<Title {...props}>{username}</Title>
|
27
|
+
<Answered>Questions Answered: {answered}</Answered>
|
28
|
+
<Buttons>
|
29
|
+
<Accept onClick={onAccept}>Accept</Accept>
|
30
|
+
<Decline >Decline</Decline>
|
31
|
+
{status === 'pending' && <Review>In Review</Review>}
|
32
|
+
</Buttons>
|
33
|
+
</Content>
|
34
|
+
</Card>
|
35
|
+
)
|
36
|
+
}
|
37
|
+
|
38
|
+
const Card = styled(MainCard)`
|
39
|
+
align-items: center;
|
40
|
+
gap: 20px;
|
41
|
+
padding: 10px;
|
42
|
+
`
|
43
|
+
const ImgWrapper = styled.div`
|
44
|
+
min-width: ${props => props.imgSize || 60}px;
|
45
|
+
min-height: ${props => props.imgSize || 60}px;
|
46
|
+
width: 60px;
|
47
|
+
height: 60px;
|
48
|
+
border-radius: 100%;
|
49
|
+
`
|
50
|
+
|
51
|
+
const Content = styled(globalContent)`
|
52
|
+
height: 100%;
|
53
|
+
flex-direction: row;
|
54
|
+
align-items: center;
|
55
|
+
justify-content: space-between;
|
56
|
+
`
|
57
|
+
|
58
|
+
const Answered = styled.h5`
|
59
|
+
font-weight: 300;
|
60
|
+
`
|
61
|
+
|
62
|
+
const Buttons = styled.div`
|
63
|
+
display: flex;
|
64
|
+
gap: 10px;
|
65
|
+
`
|
66
|
+
|
67
|
+
const Button = styled.button`
|
68
|
+
padding: 7px 20px;
|
69
|
+
border: none;
|
70
|
+
color: white;
|
71
|
+
cursor: pointer;
|
72
|
+
`
|
73
|
+
|
74
|
+
const Accept = styled(Button)`
|
75
|
+
background-color: #69d869;
|
76
|
+
`
|
77
|
+
|
78
|
+
const Decline = styled(Button)`
|
79
|
+
background-color: #e24848;
|
80
|
+
`
|
81
|
+
|
82
|
+
const Review = styled(Button)`
|
83
|
+
background-color: #18b8e9;
|
84
|
+
`
|
85
|
+
|
86
|
+
export default CardStyle9;
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import CardStyle9 from "./CardStyle9";
|
2
|
+
|
3
|
+
export default {
|
4
|
+
title: 'Reusable Components/Cards/Card style 9',
|
5
|
+
component: CardStyle9
|
6
|
+
}
|
7
|
+
|
8
|
+
export const Card = args =>
|
9
|
+
<CardStyle9
|
10
|
+
img='https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png'
|
11
|
+
username="User Name"
|
12
|
+
answered={'3/4'}
|
13
|
+
status="pending"
|
14
|
+
{...args} />
|
@@ -0,0 +1,119 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
|
3
|
+
import styled from 'styled-components';
|
4
|
+
import PropTypes from "prop-types";
|
5
|
+
import Controls from '../Controls/Controls';
|
6
|
+
|
7
|
+
const Card = ({ title, description, ...props }) => {
|
8
|
+
const [showIcons, setShowIcons] = useState(false)
|
9
|
+
console.log(props)
|
10
|
+
return (
|
11
|
+
<MainCard
|
12
|
+
onMouseEnter={e => setShowIcons(true)}
|
13
|
+
onMouseLeave={e => setShowIcons(false)}
|
14
|
+
{...props}>
|
15
|
+
{
|
16
|
+
props.img &&
|
17
|
+
<ImgWrapper {...props}>
|
18
|
+
<Img src={props.img} />
|
19
|
+
</ImgWrapper>
|
20
|
+
}
|
21
|
+
<Content {...props}>
|
22
|
+
<Title {...props}>{title}</Title>
|
23
|
+
<Discription {...props}>{description}</Discription>
|
24
|
+
</Content>
|
25
|
+
{props.cardControls
|
26
|
+
&&
|
27
|
+
<Controls
|
28
|
+
controls={props.cardControls}
|
29
|
+
show={showIcons}
|
30
|
+
{...props.controlsStyles} />}
|
31
|
+
</MainCard>
|
32
|
+
)
|
33
|
+
}
|
34
|
+
|
35
|
+
const MainCard = styled.div`
|
36
|
+
* {
|
37
|
+
margin: 0;
|
38
|
+
padding: 0;
|
39
|
+
}
|
40
|
+
font-family: sans-serif;
|
41
|
+
display: flex;
|
42
|
+
background-color: ${props => props.cardBackgroundColor || 'white'};
|
43
|
+
border-radius: ${props => props.cardRadius}px;
|
44
|
+
border: ${props => props.cardBorderSize + 'px solid ' + props.cardBorderColor};
|
45
|
+
flex-direction: ${props => props.cardDirection};
|
46
|
+
align-items: center;
|
47
|
+
column-gap: 30px;
|
48
|
+
padding: ${props => props.cardPadding + 'px' || 0} !important;
|
49
|
+
/* position: relative; */
|
50
|
+
&:hover {
|
51
|
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
52
|
+
-webkit-filter: ${props => props.darkOnHover ? 'brightness(60%)' : 'brightness(100%)'};
|
53
|
+
transition: all .2s ease;
|
54
|
+
background-color: ${props => props.onHoverBackgroundColor};
|
55
|
+
}
|
56
|
+
|
57
|
+
`
|
58
|
+
|
59
|
+
const ImgWrapper = styled.div`
|
60
|
+
width: ${props => props.imgSize || 100}px;
|
61
|
+
height: ${props => props.imgSize || 100}px;
|
62
|
+
border-radius: ${props => props.cardImageRadius + 'px' || '100%'};
|
63
|
+
`
|
64
|
+
const Img = styled.img`
|
65
|
+
width: 100%;
|
66
|
+
height: 100%;
|
67
|
+
object-position: center;
|
68
|
+
object-fit: cover;
|
69
|
+
border-radius: inherit;
|
70
|
+
`
|
71
|
+
|
72
|
+
const Content = styled.div`
|
73
|
+
display: flex;
|
74
|
+
flex-direction: column;
|
75
|
+
align-items: ${props => props.cardDirection === 'column' ? 'center' : 'flex-start'};
|
76
|
+
justify-content: space-space-between;
|
77
|
+
|
78
|
+
`
|
79
|
+
|
80
|
+
const Title = styled.h3`
|
81
|
+
text-transform: capitalize;
|
82
|
+
color: ${props => props.cardTitleColor || 'black'};
|
83
|
+
font-size: ${props => props.cardTitleFontSize}px;
|
84
|
+
font-weight: ${props => props.cardTitleFontWeight || 300};
|
85
|
+
`
|
86
|
+
|
87
|
+
const Discription = styled.h5`
|
88
|
+
color: ${props => props.cardDescriptionColor || 'black'};
|
89
|
+
font-size: ${props => props.cardDescriptionFontSize}px;
|
90
|
+
text-align: center;
|
91
|
+
font-weight: 500;
|
92
|
+
`
|
93
|
+
|
94
|
+
|
95
|
+
Card.defaultProps = {}
|
96
|
+
|
97
|
+
Card.propTypes = {
|
98
|
+
title: PropTypes.string,
|
99
|
+
description: PropTypes.string,
|
100
|
+
img: PropTypes.string,
|
101
|
+
cardBackgroundColor: PropTypes.string,
|
102
|
+
onHoverBackgroundColor: PropTypes.string,
|
103
|
+
cardRadius: PropTypes.number,
|
104
|
+
cardTitleFontSize: PropTypes.number,
|
105
|
+
cardTitleFontWeight: PropTypes.number,
|
106
|
+
cardTitleColor: PropTypes.string,
|
107
|
+
cardImageRadius: PropTypes.string,
|
108
|
+
cardDescriptionFontSize: PropTypes.number,
|
109
|
+
cardDescriptionColor: PropTypes.string,
|
110
|
+
cardDirection: PropTypes.string,
|
111
|
+
cardPadding: PropTypes.number,
|
112
|
+
imgSize: PropTypes.number,
|
113
|
+
cardBorderSize: PropTypes.number,
|
114
|
+
cardBorderColor: PropTypes.string
|
115
|
+
};
|
116
|
+
|
117
|
+
export default Card
|
118
|
+
|
119
|
+
|
@@ -0,0 +1,118 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import Card from './Card';
|
3
|
+
|
4
|
+
export default {
|
5
|
+
title: 'Reusable Components/Cards/Regular Card',
|
6
|
+
component: Card,
|
7
|
+
};
|
8
|
+
|
9
|
+
const Template = (args) => <Card {...args} />;
|
10
|
+
|
11
|
+
export const CardWithImage = Template.bind({});
|
12
|
+
CardWithImage.args = {
|
13
|
+
title: 'Card with image',
|
14
|
+
description: 'Lorem ipsum dolor sit amet consectetur.',
|
15
|
+
img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
|
16
|
+
cardBackgroundColor: '#f1d6d6',
|
17
|
+
cardRadius: '20',
|
18
|
+
cardTitleFontSize: '',
|
19
|
+
cardTitleColor: '',
|
20
|
+
cardImageRadius: '100',
|
21
|
+
cardDescriptionFontSize: '',
|
22
|
+
cardDescriptionColor: '',
|
23
|
+
cardDirection: '',
|
24
|
+
cardPadding: '10',
|
25
|
+
imgSize: '90',
|
26
|
+
cardBorderSize: '',
|
27
|
+
cardBorderColor: '',
|
28
|
+
controlsStyles: {
|
29
|
+
showOnHover: true,
|
30
|
+
iconBackground: "#272727",
|
31
|
+
dropdownBackground: "#272727",
|
32
|
+
dropdownFontColor: "white",
|
33
|
+
dropdownItemHoverColor: "#414141",
|
34
|
+
iconBackgroundHover: "#414141"
|
35
|
+
}
|
36
|
+
};
|
37
|
+
|
38
|
+
export const CardWithImageColumn = Template.bind({});
|
39
|
+
CardWithImageColumn.args = {
|
40
|
+
title: 'Card with image column',
|
41
|
+
description: 'Lorem ipsum dolor sit amet consectetur.',
|
42
|
+
img: 'https://www.kindpng.com/picc/m/163-1636340_user-avatar-icon-avatar-transparent-user-icon-png.png',
|
43
|
+
cardBackgroundColor: '#f1d6d6',
|
44
|
+
cardRadius: '20',
|
45
|
+
cardTitleFontSize: '',
|
46
|
+
cardTitleColor: '',
|
47
|
+
cardImageRadius: '100',
|
48
|
+
cardDescriptionFontSize: '',
|
49
|
+
cardDescriptionColor: '',
|
50
|
+
cardDirection: 'column',
|
51
|
+
cardPadding: '10',
|
52
|
+
imgSize: '90',
|
53
|
+
cardBorderSize: '',
|
54
|
+
cardBorderColor: '',
|
55
|
+
controlsStyles: {
|
56
|
+
showOnHover: true,
|
57
|
+
iconBackground: "#272727",
|
58
|
+
dropdownBackground: "#272727",
|
59
|
+
dropdownFontColor: "white",
|
60
|
+
dropdownItemHoverColor: "#414141",
|
61
|
+
iconBackgroundHover: "#414141"
|
62
|
+
}
|
63
|
+
};
|
64
|
+
|
65
|
+
export const CardWithoutImage = Template.bind({});
|
66
|
+
CardWithoutImage.args = {
|
67
|
+
title: 'Card with image',
|
68
|
+
description: 'Lorem ipsum dolor sit amet consectetur.',
|
69
|
+
img: '',
|
70
|
+
cardBackgroundColor: '#f1d6d6',
|
71
|
+
cardRadius: '20',
|
72
|
+
cardTitleFontSize: '',
|
73
|
+
cardTitleColor: '',
|
74
|
+
cardImageRadius: '100',
|
75
|
+
cardDescriptionFontSize: '',
|
76
|
+
cardDescriptionColor: '',
|
77
|
+
cardDirection: '',
|
78
|
+
cardPadding: '10',
|
79
|
+
imgSize: '90',
|
80
|
+
cardBorderSize: '',
|
81
|
+
cardBorderColor: '',
|
82
|
+
controlsStyles: {
|
83
|
+
showOnHover: true,
|
84
|
+
iconBackground: "#272727",
|
85
|
+
dropdownBackground: "#272727",
|
86
|
+
dropdownFontColor: "white",
|
87
|
+
dropdownItemHoverColor: "#414141",
|
88
|
+
iconBackgroundHover: "#414141"
|
89
|
+
}
|
90
|
+
};
|
91
|
+
|
92
|
+
export const CardWithoutImageColumn = Template.bind({});
|
93
|
+
CardWithoutImageColumn.args = {
|
94
|
+
title: 'Card with image column',
|
95
|
+
description: 'Lorem ipsum dolor sit amet consectetur.',
|
96
|
+
img: '',
|
97
|
+
cardBackgroundColor: '#f1d6d6',
|
98
|
+
onHoverBackgroundColor: '',
|
99
|
+
cardRadius: '20',
|
100
|
+
cardTitleFontSize: '',
|
101
|
+
cardTitleColor: '',
|
102
|
+
cardImageRadius: '100',
|
103
|
+
cardDescriptionFontSize: '',
|
104
|
+
cardDescriptionColor: '',
|
105
|
+
cardDirection: 'column',
|
106
|
+
cardPadding: '10',
|
107
|
+
imgSize: '90',
|
108
|
+
cardBorderSize: '',
|
109
|
+
cardBorderColor: '',
|
110
|
+
controlsStyles: {
|
111
|
+
showOnHover: true,
|
112
|
+
iconBackground: "#272727",
|
113
|
+
dropdownBackground: "#272727",
|
114
|
+
dropdownFontColor: "white",
|
115
|
+
dropdownItemHoverColor: "#414141",
|
116
|
+
iconBackgroundHover: "#414141"
|
117
|
+
}
|
118
|
+
};
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import styled from 'styled-components';
|
2
|
+
|
3
|
+
export const MainCard = styled.div`
|
4
|
+
* {
|
5
|
+
margin: 0;
|
6
|
+
padding: 0;
|
7
|
+
}
|
8
|
+
font-family: sans-serif;
|
9
|
+
display: flex;
|
10
|
+
background-color: ${props => props.cardBackgroundColor || 'white'};
|
11
|
+
border-radius: ${props => props.cardRadius}px;
|
12
|
+
border: ${props => props.cardBorderSize + 'px solid ' + props.cardBorderColor};
|
13
|
+
align-items: center;
|
14
|
+
padding: ${props => props.cardPadding + 'px' || 0} !important;
|
15
|
+
order: ${props => props.priority};
|
16
|
+
&:hover {
|
17
|
+
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
18
|
+
-webkit-filter: ${props => props.darkOnHover ? 'brightness(60%)' : 'brightness(100%)'};
|
19
|
+
transition: all .2s ease;
|
20
|
+
background-color: ${props => props.onHoverBackgroundColor};
|
21
|
+
}
|
22
|
+
`
|
23
|
+
export const globalContent = styled.div`
|
24
|
+
display: flex;
|
25
|
+
flex-direction: column;
|
26
|
+
flex-grow: 1;
|
27
|
+
gap: ${props => props.contentGap}px;
|
28
|
+
`
|
29
|
+
|
30
|
+
export const Title = styled.h3`
|
31
|
+
text-transform: capitalize;
|
32
|
+
color: ${props => props.cardTitleColor || 'black'};
|
33
|
+
font-size: ${props => props.cardTitleFontSize}px;
|
34
|
+
font-weight: ${props => props.cardTitleFontWeight || 300};
|
35
|
+
`
|
36
|
+
|
37
|
+
export const Description = styled.h5`
|
38
|
+
color: ${props => props.cardDescriptionColor || 'black'};
|
39
|
+
font-size: ${props => props.cardDescriptionFontSize}px;
|
40
|
+
font-weight: 500;
|
41
|
+
`
|
42
|
+
|
43
|
+
export const ImgWrapper = styled.div`
|
44
|
+
width: ${props => props.imgSize || 100}px;
|
45
|
+
height: ${props => props.imgSize || 100}px;
|
46
|
+
border-radius: ${props => props.cardImageRadius + 'px' || '100%'};
|
47
|
+
`
|
48
|
+
export const Img = styled.img`
|
49
|
+
width: 100%;
|
50
|
+
height: 100%;
|
51
|
+
object-position: center;
|
52
|
+
object-fit: cover;
|
53
|
+
border-radius: inherit;
|
54
|
+
`
|
@@ -0,0 +1,137 @@
|
|
1
|
+
import React, { useState } from 'react';
|
2
|
+
import PropTypes from 'prop-types';
|
3
|
+
import styled from 'styled-components';
|
4
|
+
// Icons
|
5
|
+
import { IoIosMore } from "react-icons/io";
|
6
|
+
|
7
|
+
const Controls = ({ controls, maxIcons = 2, ...props }) => {
|
8
|
+
const [showMore, setShowMore] = useState(false)
|
9
|
+
|
10
|
+
const showIcons = (props.showOnHover && props.show) || !props.showOnHover;
|
11
|
+
const showMoreIcon = showIcons && controls.length > maxIcons;
|
12
|
+
|
13
|
+
const clicked = (action) => {
|
14
|
+
props.onIconClicked(action)
|
15
|
+
}
|
16
|
+
|
17
|
+
let dropdownMenu;
|
18
|
+
if (showMore) {
|
19
|
+
dropdownMenu = (
|
20
|
+
<IconsDropDown {...props}>
|
21
|
+
{controls.slice(maxIcons, controls.length).map((control, index) => (
|
22
|
+
<DropdownItem key={index} {...props} onClick={(e) => clicked(control.action)}>
|
23
|
+
{control.icon}
|
24
|
+
<IconName>{control.name}</IconName>
|
25
|
+
</DropdownItem>
|
26
|
+
))
|
27
|
+
}
|
28
|
+
</IconsDropDown>
|
29
|
+
)
|
30
|
+
}
|
31
|
+
return (
|
32
|
+
<ListIcons {...props}>
|
33
|
+
{
|
34
|
+
showIcons && controls.slice(0, maxIcons).map((control, index) => (
|
35
|
+
<IconContainer key={index} {...props} onClick={() => clicked(control.action)}>
|
36
|
+
{control.icon}
|
37
|
+
</IconContainer>
|
38
|
+
))
|
39
|
+
}
|
40
|
+
{
|
41
|
+
showMoreIcon &&
|
42
|
+
(<IconContainer onClick={() => setShowMore(!showMore)} onMouseLeave={e => setShowMore(false)} {...props}>
|
43
|
+
<IoIosMore />
|
44
|
+
{dropdownMenu}
|
45
|
+
</IconContainer>)
|
46
|
+
}
|
47
|
+
|
48
|
+
</ListIcons>
|
49
|
+
)
|
50
|
+
}
|
51
|
+
|
52
|
+
const ListIcons = styled.div`
|
53
|
+
display: flex;
|
54
|
+
gap: ${props => props.iconsGap}px;
|
55
|
+
position: ${props => props.position ? 'absolute' : 'static'};
|
56
|
+
left: ${props => props.position === 'center' ? '50%' : '90%'};
|
57
|
+
top: ${props => props.position === 'center' ? '50%' : '0'};
|
58
|
+
bottom: ${props => props.position === 'center' ? 'unset' : '90%'};
|
59
|
+
transform: ${props => props.position === 'center' ? 'translate(-50%, -50%)' : 'translate(0, 0)'};
|
60
|
+
|
61
|
+
& * {
|
62
|
+
padding: 0;
|
63
|
+
margin: 0;
|
64
|
+
}
|
65
|
+
|
66
|
+
& svg{
|
67
|
+
fill: ${props => props.iconColor || 'white'};
|
68
|
+
width: ${props => props.iconSize}px;
|
69
|
+
height: ${props => props.iconSize}px;
|
70
|
+
}
|
71
|
+
`
|
72
|
+
|
73
|
+
const IconContainer = styled.div`
|
74
|
+
background-color: ${props => props.iconBackground};
|
75
|
+
border-radius: ${props => props.iconBorderRadius}px;
|
76
|
+
cursor: pointer;
|
77
|
+
position: relative;
|
78
|
+
padding: ${props => props.containerPadding}px;
|
79
|
+
|
80
|
+
&:hover {
|
81
|
+
background-color: ${props => props.iconBackgroundHover}
|
82
|
+
}
|
83
|
+
|
84
|
+
`
|
85
|
+
|
86
|
+
const IconsDropDown = styled.div`
|
87
|
+
position: absolute;
|
88
|
+
right: 0;
|
89
|
+
top: 100%;
|
90
|
+
background-color: ${props => props.dropdownBackground};
|
91
|
+
min-width: 150px;
|
92
|
+
color: ${props => props.dropdownFontColor};
|
93
|
+
`
|
94
|
+
|
95
|
+
const DropdownItem = styled.div`
|
96
|
+
display: flex;
|
97
|
+
align-items: center;
|
98
|
+
gap: 10px;
|
99
|
+
padding: 10px 3px !important;
|
100
|
+
|
101
|
+
&:hover{
|
102
|
+
background-color: ${props => props.dropdownItemHoverColor};
|
103
|
+
color: white;
|
104
|
+
|
105
|
+
svg{
|
106
|
+
fill: ${props => props.iconHoverColor};
|
107
|
+
}
|
108
|
+
}
|
109
|
+
`
|
110
|
+
|
111
|
+
const IconName = styled.p`
|
112
|
+
text-transform: capitalize;
|
113
|
+
font-size: ${props => props.dropdownFontSize}px;
|
114
|
+
`
|
115
|
+
|
116
|
+
Controls.defaultProps = {}
|
117
|
+
|
118
|
+
Controls.propTypes = {
|
119
|
+
controls: PropTypes.array.isRequired,
|
120
|
+
maxIcons: PropTypes.number,
|
121
|
+
showOnHover: PropTypes.bool,
|
122
|
+
iconSize: PropTypes.number,
|
123
|
+
iconColor: PropTypes.string,
|
124
|
+
iconBackground: PropTypes.string,
|
125
|
+
iconBackgroundHover: PropTypes.string,
|
126
|
+
iconColorOnHover: PropTypes.string,
|
127
|
+
iconsGap: PropTypes.number,
|
128
|
+
iconBorderRadius: PropTypes.number,
|
129
|
+
dropdownBackground: PropTypes.string,
|
130
|
+
dropdownFontColor: PropTypes.string,
|
131
|
+
dropdownFontSize: PropTypes.number,
|
132
|
+
dropdownItemHoverColor: PropTypes.string,
|
133
|
+
position: PropTypes.string,
|
134
|
+
containerPadding: PropTypes.number
|
135
|
+
};
|
136
|
+
|
137
|
+
export default Controls
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import Controls from './Controls';
|
3
|
+
|
4
|
+
import { AiOutlineUserAdd, AiOutlineDelete } from "react-icons/ai";
|
5
|
+
import { IoIosAirplane, IoIosAlarm } from "react-icons/io";
|
6
|
+
|
7
|
+
const controls = [
|
8
|
+
{ icon: (<AiOutlineUserAdd />), action: 'add', name: 'Add member' },
|
9
|
+
{ icon: (<AiOutlineDelete />), action: 'remove', name: 'Add member' },
|
10
|
+
{ icon: (<IoIosAirplane />), action: 'add', name: 'Some Icon' },
|
11
|
+
{ icon: (<IoIosAlarm />), action: 'remove', name: 'Another Icons' },
|
12
|
+
]
|
13
|
+
|
14
|
+
export default {
|
15
|
+
title: 'reusable Components/Controls',
|
16
|
+
component: Controls
|
17
|
+
}
|
18
|
+
|
19
|
+
const Template = (args) => <Controls {...args} />;
|
20
|
+
|
21
|
+
export const fixedControls = Template.bind({});
|
22
|
+
fixedControls.args = {
|
23
|
+
controls,
|
24
|
+
};
|