trepur_components 0.4.8 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/lib/components/Accordion/Accordion.stories.d.ts +6 -0
- package/dist/src/lib/components/Accordion/Accordion.stories.js +80 -0
- package/dist/src/lib/components/Accordion/Accordion.stories.js.map +1 -0
- package/dist/src/lib/components/Accordion/index.d.ts +8 -0
- package/dist/src/lib/components/Accordion/index.js +9 -0
- package/dist/src/lib/components/Accordion/index.js.map +1 -0
- package/dist/src/lib/components/AlertBar/AlertBar.stories.d.ts +6 -0
- package/dist/src/lib/components/AlertBar/AlertBar.stories.js +91 -0
- package/dist/src/lib/components/AlertBar/AlertBar.stories.js.map +1 -0
- package/dist/src/lib/components/AlertBar/index.d.ts +16 -0
- package/dist/src/lib/components/AlertBar/index.js +64 -0
- package/dist/src/lib/components/AlertBar/index.js.map +1 -0
- package/dist/src/lib/components/Breadcrumbs/Breadcrumbs.stories.d.ts +6 -0
- package/dist/src/lib/components/Breadcrumbs/Breadcrumbs.stories.js +56 -0
- package/dist/src/lib/components/Breadcrumbs/Breadcrumbs.stories.js.map +1 -0
- package/dist/src/lib/components/Breadcrumbs/index.d.ts +11 -0
- package/dist/src/lib/components/Breadcrumbs/index.js +20 -0
- package/dist/src/lib/components/Breadcrumbs/index.js.map +1 -0
- package/dist/src/lib/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.d.ts +6 -0
- package/dist/src/lib/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js +45 -0
- package/dist/src/lib/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.js.map +1 -0
- package/dist/src/lib/components/BreadcrumbsBordered/index.d.ts +9 -0
- package/dist/src/lib/components/BreadcrumbsBordered/index.js +18 -0
- package/dist/src/lib/components/BreadcrumbsBordered/index.js.map +1 -0
- package/dist/src/lib/components/BreadcrumbsItem/BreadcrumbsItem.stories.d.ts +6 -0
- package/dist/src/lib/components/BreadcrumbsItem/BreadcrumbsItem.stories.js +50 -0
- package/dist/src/lib/components/BreadcrumbsItem/BreadcrumbsItem.stories.js.map +1 -0
- package/dist/src/lib/components/BreadcrumbsItem/index.d.ts +12 -0
- package/dist/src/lib/components/BreadcrumbsItem/index.js +57 -0
- package/dist/src/lib/components/BreadcrumbsItem/index.js.map +1 -0
- package/dist/src/lib/components/Button/button.stories.d.ts +6 -0
- package/dist/src/lib/components/Button/button.stories.js +132 -0
- package/dist/src/lib/components/Button/button.stories.js.map +1 -0
- package/dist/src/lib/components/Button/index.d.ts +17 -0
- package/dist/src/lib/components/Button/index.js +32 -0
- package/dist/src/lib/components/Button/index.js.map +1 -0
- package/dist/src/lib/components/Card/Card.stories.d.ts +8 -0
- package/dist/src/lib/components/Card/Card.stories.js +124 -0
- package/dist/src/lib/components/Card/Card.stories.js.map +1 -0
- package/dist/src/lib/components/Card/index.d.ts +31 -0
- package/dist/src/lib/components/Card/index.js +66 -0
- package/dist/src/lib/components/Card/index.js.map +1 -0
- package/dist/src/lib/components/CardWithTopImage/CardWithTopImage.stories.d.ts +6 -0
- package/dist/src/lib/components/CardWithTopImage/CardWithTopImage.stories.js +40 -0
- package/dist/src/lib/components/CardWithTopImage/CardWithTopImage.stories.js.map +1 -0
- package/dist/src/lib/components/CardWithTopImage/index.d.ts +10 -0
- package/dist/src/lib/components/CardWithTopImage/index.js +15 -0
- package/dist/src/lib/components/CardWithTopImage/index.js.map +1 -0
- package/dist/src/lib/components/Carousel/Carousel.stories.d.ts +6 -0
- package/dist/src/lib/components/Carousel/Carousel.stories.js +297 -0
- package/dist/src/lib/components/Carousel/Carousel.stories.js.map +1 -0
- package/dist/src/lib/components/Carousel/index.d.ts +59 -0
- package/dist/src/lib/components/Carousel/index.js +122 -0
- package/dist/src/lib/components/Carousel/index.js.map +1 -0
- package/dist/src/lib/components/ChevronCard/ChevronCard.stories.d.ts +6 -0
- package/dist/src/lib/components/ChevronCard/ChevronCard.stories.js +14 -0
- package/dist/src/lib/components/ChevronCard/ChevronCard.stories.js.map +1 -0
- package/dist/src/lib/components/ChevronCard/index.d.ts +7 -0
- package/dist/src/lib/components/ChevronCard/index.js +20 -0
- package/dist/src/lib/components/ChevronCard/index.js.map +1 -0
- package/dist/src/lib/components/Collapsible/Collapsible.stories.d.ts +6 -0
- package/dist/src/lib/components/Collapsible/Collapsible.stories.js +66 -0
- package/dist/src/lib/components/Collapsible/Collapsible.stories.js.map +1 -0
- package/dist/src/lib/components/Collapsible/index.d.ts +16 -0
- package/dist/src/lib/components/Collapsible/index.js +67 -0
- package/dist/src/lib/components/Collapsible/index.js.map +1 -0
- package/dist/src/lib/components/Column/Column.stories.d.ts +6 -0
- package/dist/src/lib/components/Column/Column.stories.js +64 -0
- package/dist/src/lib/components/Column/Column.stories.js.map +1 -0
- package/dist/src/lib/components/Column/index.d.ts +12 -0
- package/dist/src/lib/components/Column/index.js +83 -0
- package/dist/src/lib/components/Column/index.js.map +1 -0
- package/dist/src/lib/components/Container/Container.stories.d.ts +6 -0
- package/dist/src/lib/components/Container/Container.stories.js +30 -0
- package/dist/src/lib/components/Container/Container.stories.js.map +1 -0
- package/dist/src/lib/components/Container/index.d.ts +9 -0
- package/dist/src/lib/components/Container/index.js +8 -0
- package/dist/src/lib/components/Container/index.js.map +1 -0
- package/dist/src/lib/components/FooterBar/footerBar.stories.d.ts +6 -0
- package/dist/src/lib/components/FooterBar/footerBar.stories.js +48 -0
- package/dist/src/lib/components/FooterBar/footerBar.stories.js.map +1 -0
- package/dist/src/lib/components/FooterBar/index.d.ts +11 -0
- package/dist/src/lib/components/FooterBar/index.js +15 -0
- package/dist/src/lib/components/FooterBar/index.js.map +1 -0
- package/dist/src/lib/components/Form/Form.stories.d.ts +6 -0
- package/dist/src/lib/components/Form/Form.stories.js +82 -0
- package/dist/src/lib/components/Form/Form.stories.js.map +1 -0
- package/dist/src/lib/components/Form/index.d.ts +16 -0
- package/dist/src/lib/components/Form/index.js +19 -0
- package/dist/src/lib/components/Form/index.js.map +1 -0
- package/dist/src/lib/components/FyreCard/FyreCard.stories.d.ts +6 -0
- package/dist/src/lib/components/FyreCard/FyreCard.stories.js +22 -0
- package/dist/src/lib/components/FyreCard/FyreCard.stories.js.map +1 -0
- package/dist/src/lib/components/FyreCard/index.d.ts +13 -0
- package/dist/src/lib/components/FyreCard/index.js +17 -0
- package/dist/src/lib/components/FyreCard/index.js.map +1 -0
- package/dist/src/lib/components/Greeting/Greeting.stories.d.ts +6 -0
- package/dist/src/lib/components/Greeting/Greeting.stories.js +33 -0
- package/dist/src/lib/components/Greeting/Greeting.stories.js.map +1 -0
- package/dist/src/lib/components/Greeting/index.d.ts +10 -0
- package/dist/src/lib/components/Greeting/index.js +23 -0
- package/dist/src/lib/components/Greeting/index.js.map +1 -0
- package/dist/src/lib/components/HamburgerIcon/HamburgerIcon.stories.d.ts +6 -0
- package/dist/src/lib/components/HamburgerIcon/HamburgerIcon.stories.js +46 -0
- package/dist/src/lib/components/HamburgerIcon/HamburgerIcon.stories.js.map +1 -0
- package/dist/src/lib/components/HamburgerIcon/index.d.ts +7 -0
- package/dist/src/lib/components/HamburgerIcon/index.js +26 -0
- package/dist/src/lib/components/HamburgerIcon/index.js.map +1 -0
- package/dist/src/lib/components/Icon/Icon.stories.d.ts +6 -0
- package/dist/src/lib/components/Icon/Icon.stories.js +87 -0
- package/dist/src/lib/components/Icon/Icon.stories.js.map +1 -0
- package/dist/src/lib/components/Icon/index.d.ts +19 -0
- package/dist/src/lib/components/Icon/index.js +56 -0
- package/dist/src/lib/components/Icon/index.js.map +1 -0
- package/dist/src/lib/components/Image/Image.stories.d.ts +6 -0
- package/dist/src/lib/components/Image/Image.stories.js +73 -0
- package/dist/src/lib/components/Image/Image.stories.js.map +1 -0
- package/dist/src/lib/components/Image/index.d.ts +16 -0
- package/dist/src/lib/components/Image/index.js +54 -0
- package/dist/src/lib/components/Image/index.js.map +1 -0
- package/dist/src/lib/components/ImageLink/ImageLink.stories.d.ts +9 -0
- package/dist/src/lib/components/ImageLink/ImageLink.stories.js +50 -0
- package/dist/src/lib/components/ImageLink/ImageLink.stories.js.map +1 -0
- package/dist/src/lib/components/ImageLink/index.d.ts +15 -0
- package/dist/src/lib/components/ImageLink/index.js +18 -0
- package/dist/src/lib/components/ImageLink/index.js.map +1 -0
- package/dist/src/lib/components/ImageLinkList/ImageLinkList.stories.d.ts +6 -0
- package/dist/src/lib/components/ImageLinkList/ImageLinkList.stories.js +27 -0
- package/dist/src/lib/components/ImageLinkList/ImageLinkList.stories.js.map +1 -0
- package/dist/src/lib/components/ImageLinkList/index.d.ts +9 -0
- package/dist/src/lib/components/ImageLinkList/index.js +11 -0
- package/dist/src/lib/components/ImageLinkList/index.js.map +1 -0
- package/dist/src/lib/components/InformationIcon/InformationIcon.stories.d.ts +6 -0
- package/dist/src/lib/components/InformationIcon/InformationIcon.stories.js +73 -0
- package/dist/src/lib/components/InformationIcon/InformationIcon.stories.js.map +1 -0
- package/dist/src/lib/components/InformationIcon/index.d.ts +15 -0
- package/dist/src/lib/components/InformationIcon/index.js +45 -0
- package/dist/src/lib/components/InformationIcon/index.js.map +1 -0
- package/dist/src/lib/components/Input/Input.stories.d.ts +6 -0
- package/dist/src/lib/components/Input/Input.stories.js +95 -0
- package/dist/src/lib/components/Input/Input.stories.js.map +1 -0
- package/dist/src/lib/components/Input/index.d.ts +31 -0
- package/dist/src/lib/components/Input/index.js +25 -0
- package/dist/src/lib/components/Input/index.js.map +1 -0
- package/dist/src/lib/components/Jumbotron/Jumbotron.stories.d.ts +6 -0
- package/dist/src/lib/components/Jumbotron/Jumbotron.stories.js +16 -0
- package/dist/src/lib/components/Jumbotron/Jumbotron.stories.js.map +1 -0
- package/dist/src/lib/components/Jumbotron/index.d.ts +9 -0
- package/dist/src/lib/components/Jumbotron/index.js +9 -0
- package/dist/src/lib/components/Jumbotron/index.js.map +1 -0
- package/dist/src/lib/components/Nav/Nav.stories.d.ts +6 -0
- package/dist/src/lib/components/Nav/Nav.stories.js +134 -0
- package/dist/src/lib/components/Nav/Nav.stories.js.map +1 -0
- package/dist/src/lib/components/Nav/index.d.ts +22 -0
- package/dist/src/lib/components/Nav/index.js +65 -0
- package/dist/src/lib/components/Nav/index.js.map +1 -0
- package/dist/src/lib/components/NavItem/NavItem.stories.d.ts +6 -0
- package/dist/src/lib/components/NavItem/NavItem.stories.js +75 -0
- package/dist/src/lib/components/NavItem/NavItem.stories.js.map +1 -0
- package/dist/src/lib/components/NavItem/index.d.ts +15 -0
- package/dist/src/lib/components/NavItem/index.js +24 -0
- package/dist/src/lib/components/NavItem/index.js.map +1 -0
- package/dist/src/lib/components/NewsCard/NewsCard.stories.d.ts +6 -0
- package/dist/src/lib/components/NewsCard/NewsCard.stories.js +60 -0
- package/dist/src/lib/components/NewsCard/NewsCard.stories.js.map +1 -0
- package/dist/src/lib/components/NewsCard/index.d.ts +14 -0
- package/dist/src/lib/components/NewsCard/index.js +20 -0
- package/dist/src/lib/components/NewsCard/index.js.map +1 -0
- package/dist/src/lib/components/Profile/Profile.stories.d.ts +6 -0
- package/dist/src/lib/components/Profile/Profile.stories.js +41 -0
- package/dist/src/lib/components/Profile/Profile.stories.js.map +1 -0
- package/dist/src/lib/components/Profile/index.d.ts +18 -0
- package/dist/src/lib/components/Profile/index.js +36 -0
- package/dist/src/lib/components/Profile/index.js.map +1 -0
- package/dist/src/lib/components/Row/Row.stories.d.ts +6 -0
- package/dist/src/lib/components/Row/Row.stories.js +37 -0
- package/dist/src/lib/components/Row/Row.stories.js.map +1 -0
- package/dist/src/lib/components/Row/index.d.ts +8 -0
- package/dist/src/lib/components/Row/index.js +8 -0
- package/dist/src/lib/components/Row/index.js.map +1 -0
- package/dist/src/lib/components/Search/Search.stories.d.ts +6 -0
- package/dist/src/lib/components/Search/Search.stories.js +48 -0
- package/dist/src/lib/components/Search/Search.stories.js.map +1 -0
- package/dist/src/lib/components/Search/index.d.ts +13 -0
- package/dist/src/lib/components/Search/index.js +23 -0
- package/dist/src/lib/components/Search/index.js.map +1 -0
- package/dist/src/lib/components/SocialBlock/SocialBlock.stories.d.ts +6 -0
- package/dist/src/lib/components/SocialBlock/SocialBlock.stories.js +58 -0
- package/dist/src/lib/components/SocialBlock/SocialBlock.stories.js.map +1 -0
- package/dist/src/lib/components/SocialBlock/index.d.ts +21 -0
- package/dist/src/lib/components/SocialBlock/index.js +65 -0
- package/dist/src/lib/components/SocialBlock/index.js.map +1 -0
- package/dist/src/lib/components/StarRating/StarRating.stories.d.ts +6 -0
- package/dist/src/lib/components/StarRating/StarRating.stories.js +17 -0
- package/dist/src/lib/components/StarRating/StarRating.stories.js.map +1 -0
- package/dist/src/lib/components/StarRating/index.d.ts +9 -0
- package/dist/src/lib/components/StarRating/index.js +27 -0
- package/dist/src/lib/components/StarRating/index.js.map +1 -0
- package/dist/src/lib/components/Testimonial/Testimonial.stories.d.ts +6 -0
- package/dist/src/lib/components/Testimonial/Testimonial.stories.js +95 -0
- package/dist/src/lib/components/Testimonial/Testimonial.stories.js.map +1 -0
- package/dist/src/lib/components/Testimonial/index.d.ts +17 -0
- package/dist/src/lib/components/Testimonial/index.js +27 -0
- package/dist/src/lib/components/Testimonial/index.js.map +1 -0
- package/dist/src/lib/components/TextAndTitle/TextAndTitle.stories.d.ts +6 -0
- package/dist/src/lib/components/TextAndTitle/TextAndTitle.stories.js +63 -0
- package/dist/src/lib/components/TextAndTitle/TextAndTitle.stories.js.map +1 -0
- package/dist/src/lib/components/TextAndTitle/index.d.ts +26 -0
- package/dist/src/lib/components/TextAndTitle/index.js +104 -0
- package/dist/src/lib/components/TextAndTitle/index.js.map +1 -0
- package/dist/src/lib/components/TextArea/TextArea.stories.d.ts +6 -0
- package/dist/src/lib/components/TextArea/TextArea.stories.js +63 -0
- package/dist/src/lib/components/TextArea/TextArea.stories.js.map +1 -0
- package/dist/src/lib/components/TextArea/index.d.ts +27 -0
- package/dist/src/lib/components/TextArea/index.js +19 -0
- package/dist/src/lib/components/TextArea/index.js.map +1 -0
- package/dist/src/lib/components/Timeline/Timeline.stories.d.ts +6 -0
- package/dist/src/lib/components/Timeline/Timeline.stories.js +87 -0
- package/dist/src/lib/components/Timeline/Timeline.stories.js.map +1 -0
- package/dist/src/lib/components/Timeline/index.d.ts +14 -0
- package/dist/src/lib/components/Timeline/index.js +208 -0
- package/dist/src/lib/components/Timeline/index.js.map +1 -0
- package/dist/src/lib/components/Tubestops/Tubestops.stories.d.ts +6 -0
- package/dist/src/lib/components/Tubestops/Tubestops.stories.js +62 -0
- package/dist/src/lib/components/Tubestops/Tubestops.stories.js.map +1 -0
- package/dist/src/lib/components/Tubestops/index.d.ts +13 -0
- package/dist/src/lib/components/Tubestops/index.js +44 -0
- package/dist/src/lib/components/Tubestops/index.js.map +1 -0
- package/dist/src/lib/components/UserIcon/UserIcon.stories.d.ts +6 -0
- package/dist/src/lib/components/UserIcon/UserIcon.stories.js +63 -0
- package/dist/src/lib/components/UserIcon/UserIcon.stories.js.map +1 -0
- package/dist/src/lib/components/UserIcon/index.d.ts +11 -0
- package/dist/src/lib/components/UserIcon/index.js +16 -0
- package/dist/src/lib/components/UserIcon/index.js.map +1 -0
- package/dist/src/lib/components/Video/Video.stories.d.ts +6 -0
- package/dist/src/lib/components/Video/Video.stories.js +17 -0
- package/dist/src/lib/components/Video/Video.stories.js.map +1 -0
- package/dist/src/lib/components/Video/index.d.ts +17 -0
- package/dist/src/lib/components/Video/index.js +9 -0
- package/dist/src/lib/components/Video/index.js.map +1 -0
- package/dist/src/lib/index.d.ts +39 -0
- package/dist/src/lib/index.js +43 -0
- package/dist/src/lib/index.js.map +1 -0
- package/dist/src/lib/typography/Fonts.stories.d.ts +6 -0
- package/dist/src/lib/typography/Fonts.stories.js +12 -0
- package/dist/src/lib/typography/Fonts.stories.js.map +1 -0
- package/dist/src/lib/typography/index.d.ts +6 -0
- package/dist/src/lib/typography/index.js +23 -0
- package/dist/src/lib/typography/index.js.map +1 -0
- package/dist/src/lib/utils/controls.d.ts +35 -0
- package/dist/src/lib/utils/controls.js +21 -0
- package/dist/src/lib/utils/controls.js.map +1 -0
- package/dist/src/lib/utils/theme.d.ts +3 -0
- package/dist/src/lib/utils/theme.js +28 -0
- package/dist/src/lib/utils/theme.js.map +1 -0
- package/dist/tailwind.config.d.ts +65 -0
- package/dist/tailwind.config.js +81 -0
- package/dist/tailwind.config.js.map +1 -0
- package/package.json +19 -5
- package/dist/components/Accordion/index.js +0 -37
- package/dist/components/AlertBar/index.js +0 -129
- package/dist/components/Breadcrumbs/index.js +0 -66
- package/dist/components/BreadcrumbsBordered/index.js +0 -66
- package/dist/components/BreadcrumbsItem/index.js +0 -160
- package/dist/components/Button/index.js +0 -141
- package/dist/components/Card/index.js +0 -151
- package/dist/components/CardWithTopImage/index.js +0 -64
- package/dist/components/Carousel/index.css +0 -4
- package/dist/components/Carousel/index.css.map +0 -1
- package/dist/components/Carousel/index.js +0 -185
- package/dist/components/ChevronCard/index.js +0 -65
- package/dist/components/Collapsible/index.js +0 -158
- package/dist/components/Column/index.js +0 -137
- package/dist/components/Container/index.js +0 -55
- package/dist/components/FooterBar/index.js +0 -60
- package/dist/components/Form/index.js +0 -78
- package/dist/components/FyreCard/index.js +0 -54
- package/dist/components/Greeting/index.js +0 -69
- package/dist/components/Icon/index.js +0 -91
- package/dist/components/Image/index.js +0 -142
- package/dist/components/ImageLink/index.js +0 -61
- package/dist/components/ImageLinkList/index.js +0 -45
- package/dist/components/InformationIcon/index.js +0 -120
- package/dist/components/Input/index.js +0 -112
- package/dist/components/Jumbotron/index.js +0 -39
- package/dist/components/Nav/index.js +0 -302
- package/dist/components/NavItem/index.js +0 -129
- package/dist/components/NewsCard/index.js +0 -62
- package/dist/components/Profile/index.js +0 -86
- package/dist/components/Row/index.js +0 -55
- package/dist/components/Search/index.js +0 -60
- package/dist/components/SocialBlock/index.js +0 -184
- package/dist/components/StarRating/index.js +0 -110
- package/dist/components/Testimonial/index.js +0 -70
- package/dist/components/TextAndTitle/index.js +0 -283
- package/dist/components/TextArea/index.js +0 -97
- package/dist/components/Timeline/index.css +0 -133
- package/dist/components/Timeline/index.css.map +0 -1
- package/dist/components/Timeline/index.js +0 -254
- package/dist/components/Tubestops/index.css +0 -92
- package/dist/components/Tubestops/index.css.map +0 -1
- package/dist/components/Tubestops/index.js +0 -95
- package/dist/components/UserIcon/index.js +0 -50
- package/dist/components/Users/rupertb/Documents/apps/trepur_components/src/lib/styles/base.css +0 -1831
- package/dist/components/Users/rupertb/Documents/apps/trepur_components/src/lib/styles/base.css.map +0 -1
- package/dist/components/Video/index.js +0 -67
- package/dist/fonts/Sora/OFL.txt +0 -93
- package/dist/fonts/Sora/README.txt +0 -70
- package/dist/fonts/Sora/Sora-VariableFont_wght.ttf +0 -0
- package/dist/fonts/Sora/static/Sora-Bold.ttf +0 -0
- package/dist/fonts/Sora/static/Sora-ExtraBold.ttf +0 -0
- package/dist/fonts/Sora/static/Sora-ExtraLight.ttf +0 -0
- package/dist/fonts/Sora/static/Sora-Light.ttf +0 -0
- package/dist/fonts/Sora/static/Sora-Medium.ttf +0 -0
- package/dist/fonts/Sora/static/Sora-Regular.ttf +0 -0
- package/dist/fonts/Sora/static/Sora-SemiBold.ttf +0 -0
- package/dist/fonts/Sora/static/Sora-Thin.ttf +0 -0
- package/dist/index.js +0 -311
- package/dist/styles/base.css +0 -73
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Props as iconProps } from '../Icon';
|
|
3
|
+
export interface Props {
|
|
4
|
+
id?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
title?: string;
|
|
7
|
+
subtitle?: string;
|
|
8
|
+
boldTitle?: boolean;
|
|
9
|
+
borderTop?: boolean;
|
|
10
|
+
borderBottom?: boolean;
|
|
11
|
+
showBottomLine?: boolean;
|
|
12
|
+
iconProps?: iconProps;
|
|
13
|
+
children?: string | JSX.Element;
|
|
14
|
+
}
|
|
15
|
+
declare const Collapsible: ({ id, className, title, subtitle, boldTitle, borderTop, borderBottom, showBottomLine, iconProps, children }: Props) => JSX.Element;
|
|
16
|
+
export default Collapsible;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import Icon from '../Icon';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
const Collapsible = ({ id, className, title, subtitle, boldTitle, borderTop, borderBottom, showBottomLine, iconProps, children }) => {
|
|
5
|
+
const [expanded, setExpanded] = useState(false);
|
|
6
|
+
useEffect(() => {
|
|
7
|
+
const coll = document.getElementsByClassName('collapsible');
|
|
8
|
+
let i;
|
|
9
|
+
for (i = 0; i < coll.length; i++) {
|
|
10
|
+
coll[i].addEventListener('click', function (err) {
|
|
11
|
+
const content = this.nextElementSibling;
|
|
12
|
+
const scrollHeight = content.scrollHeight.toString();
|
|
13
|
+
if (content.style.maxHeight === '0px') {
|
|
14
|
+
content.style.maxHeight = `${scrollHeight}px`;
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
content.style.maxHeight = '0px';
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
const headingClassList = classNames({
|
|
23
|
+
'border-b': borderBottom,
|
|
24
|
+
'border-t': borderTop
|
|
25
|
+
}, 'w-auto flex text-center collapsible');
|
|
26
|
+
const classList = classNames(className, 'bg-primary text-white hover:bg-white hover:text-primary transition-opactiy duration-300');
|
|
27
|
+
const padding = classNames({
|
|
28
|
+
'pt-7': title !== undefined && subtitle !== undefined,
|
|
29
|
+
'pt-4': title !== undefined && subtitle === undefined
|
|
30
|
+
});
|
|
31
|
+
const textSubstitutePadding = classNames({
|
|
32
|
+
'pb-4': title === undefined && subtitle === undefined
|
|
33
|
+
});
|
|
34
|
+
const contentWrapperClassList = classNames({
|
|
35
|
+
'max-h-max my-2': expanded,
|
|
36
|
+
'max-h-0': !expanded
|
|
37
|
+
}, 'w-auto overflow-hidden px-4 bg-white text-primary');
|
|
38
|
+
const childrenClassList = classNames(padding, 'w-full pr-8 text-right');
|
|
39
|
+
const expandItem = (e) => {
|
|
40
|
+
const content = e.currentTarget.nextElementSibling;
|
|
41
|
+
const scrollHeight = content.scrollHeight.toString();
|
|
42
|
+
if (!expanded) {
|
|
43
|
+
content.style.maxHeight = `${scrollHeight}px`;
|
|
44
|
+
}
|
|
45
|
+
else {
|
|
46
|
+
content.style.maxHeight = '0px';
|
|
47
|
+
}
|
|
48
|
+
setExpanded(!expanded);
|
|
49
|
+
};
|
|
50
|
+
return (React.createElement("div", { id: id, className: classList },
|
|
51
|
+
React.createElement("div", { onClick: e => expandItem(e), className: headingClassList },
|
|
52
|
+
(iconProps !== undefined) &&
|
|
53
|
+
React.createElement("div", { className: `pl-4 text-left ${padding} ${textSubstitutePadding}` },
|
|
54
|
+
React.createElement(Icon, Object.assign({}, iconProps))),
|
|
55
|
+
(title !== undefined || subtitle !== undefined) &&
|
|
56
|
+
React.createElement("div", { className: 'w-full pl-4 py-4 text-left' },
|
|
57
|
+
title !== undefined && React.createElement("h4", null, title),
|
|
58
|
+
subtitle !== undefined && React.createElement("h5", null,
|
|
59
|
+
React.createElement("small", null, subtitle))),
|
|
60
|
+
children !== undefined &&
|
|
61
|
+
React.createElement("div", { className: childrenClassList },
|
|
62
|
+
React.createElement(Icon, { type: expanded ? 'chevron-up' : 'chevron-down', colour: 'white', bgColour: 'primary' }))),
|
|
63
|
+
children !== undefined &&
|
|
64
|
+
React.createElement("div", { className: contentWrapperClassList, style: { transition: 'max-height 0.2s ease-out' } }, children)));
|
|
65
|
+
};
|
|
66
|
+
export default Collapsible;
|
|
67
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Collapsible/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Column from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof Column>;
|
|
5
|
+
export declare const _Column: ComponentStory<React.FC<import("./index").Props>>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Column from './index';
|
|
3
|
+
import { idAndClassName } from '../../utils/controls';
|
|
4
|
+
import CardWithTopImage from '../CardWithTopImage';
|
|
5
|
+
import logo from '@assets/images/primary-logo.png';
|
|
6
|
+
const cardChild = (React.createElement(CardWithTopImage, { id: 'cardwithtopimage', imageProps: {
|
|
7
|
+
image: logo,
|
|
8
|
+
roundedFull: true
|
|
9
|
+
} },
|
|
10
|
+
React.createElement("p", null, "This is some text"),
|
|
11
|
+
React.createElement("p", null, "This is some more text"),
|
|
12
|
+
React.createElement("p", null, "This is a bit more text"),
|
|
13
|
+
React.createElement("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem odit ad sed, quam recusandae voluptatem provident eveniet beatae omnis vero minus unde facilis. Quia commodi quas odit iusto ut enim!")));
|
|
14
|
+
const componentMeta = {
|
|
15
|
+
title: 'Trepur Components/Rupert Bennett/Atoms/Column',
|
|
16
|
+
component: Column,
|
|
17
|
+
parameters: {},
|
|
18
|
+
argTypes: Object.assign(Object.assign({}, idAndClassName), { sm: {
|
|
19
|
+
type: { name: 'number', required: false },
|
|
20
|
+
description: 'The number of sections out of 12 that the component should span on sm screens',
|
|
21
|
+
table: {
|
|
22
|
+
type: { summary: 'number' }
|
|
23
|
+
}
|
|
24
|
+
}, md: {
|
|
25
|
+
type: { name: 'number', required: false },
|
|
26
|
+
description: 'The number of sections out of 12 that the component should span on md screens',
|
|
27
|
+
table: {
|
|
28
|
+
type: { summary: 'number' }
|
|
29
|
+
}
|
|
30
|
+
}, lg: {
|
|
31
|
+
type: { name: 'number', required: false },
|
|
32
|
+
description: 'The number of sections out of 12 that the component should span on lg screens',
|
|
33
|
+
table: {
|
|
34
|
+
type: { summary: 'number' }
|
|
35
|
+
}
|
|
36
|
+
}, xl: {
|
|
37
|
+
type: { name: 'number', required: false },
|
|
38
|
+
description: 'The number of sections out of 12 that the component should span on xl screens',
|
|
39
|
+
table: {
|
|
40
|
+
type: { summary: 'number' }
|
|
41
|
+
}
|
|
42
|
+
}, children: {
|
|
43
|
+
type: { name: 'other', value: 'string | React.ReactNode' },
|
|
44
|
+
description: 'The child elements to show in the component',
|
|
45
|
+
table: {
|
|
46
|
+
type: {
|
|
47
|
+
summary: 'Array'
|
|
48
|
+
},
|
|
49
|
+
defaultValue: { summary: 'undefined' }
|
|
50
|
+
}
|
|
51
|
+
} }),
|
|
52
|
+
args: {
|
|
53
|
+
sm: 12,
|
|
54
|
+
md: 8,
|
|
55
|
+
lg: 4,
|
|
56
|
+
xl: 2,
|
|
57
|
+
className: 'bg-facebook md:bg-twitter lg-whatsapp xl:bg-linkedin border',
|
|
58
|
+
children: cardChild
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
const Template = (args) => React.createElement(Column, Object.assign({}, args));
|
|
62
|
+
export const _Column = Template.bind({});
|
|
63
|
+
export default componentMeta;
|
|
64
|
+
//# sourceMappingURL=Column.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Column.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Column/Column.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,gBAAgB,MAAM,8BAA8B,CAAA;AAC3D,OAAO,IAAI,MAAM,iCAAiC,CAAA;AAGlD,MAAM,SAAS,GAAG,CAChB,oBAAC,gBAAgB,IACf,EAAE,EAAC,kBAAkB,EACrB,UAAU,EAAE;QACV,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,IAAI;KAClB;IAED,mDAAwB;IACxB,wDAA6B;IAC7B,yDAA8B;IAC9B,wOAA6M,CAC5L,CACpB,CAAA;AAED,MAAM,aAAa,GAAiC;IAClD,KAAK,EAAE,+CAA+C;IACtD,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE,EAAE;IACd,QAAQ,kCACH,cAAc,KACjB,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,+EAA+E;YAC5F,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,+EAA+E;YAC5F,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,+EAA+E;YAC5F,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,EAAE,EAAE;YACF,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,+EAA+E;YAC5F,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,0BAA0B,EAAE;YAC1D,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,GACF;IACD,IAAI,EAAE;QACJ,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,CAAC;QACL,EAAE,EAAE,CAAC;QACL,SAAS,EAAE,6DAA6D;QACxE,QAAQ,EAAE,SAAS;KACpB;CACF,CAAA;AAED,MAAM,QAAQ,GAAkC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,MAAM,oBAAK,IAAI,EAAI,CAAA;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const Column = ({ id, className, sm = 1, md = 1, lg = 1, xl = 1, children }) => {
|
|
4
|
+
const widthOptions = [
|
|
5
|
+
{ 1: 'w-1/12' },
|
|
6
|
+
{ 2: 'w-2/12' },
|
|
7
|
+
{ 3: 'w-3/12' },
|
|
8
|
+
{ 4: 'w-4/12' },
|
|
9
|
+
{ 5: 'w-5/12' },
|
|
10
|
+
{ 6: 'w-6/12' },
|
|
11
|
+
{ 7: 'w-7/12' },
|
|
12
|
+
{ 8: 'w-8/12' },
|
|
13
|
+
{ 9: 'w-9/12' },
|
|
14
|
+
{ 10: 'w-10/12' },
|
|
15
|
+
{ 11: 'w-11/12' },
|
|
16
|
+
{ 12: 'w-full' }
|
|
17
|
+
];
|
|
18
|
+
const mdWidthOptions = [
|
|
19
|
+
{ 1: 'md:w-1/12' },
|
|
20
|
+
{ 2: 'md:w-2/12' },
|
|
21
|
+
{ 3: 'md:w-3/12' },
|
|
22
|
+
{ 4: 'md:w-4/12' },
|
|
23
|
+
{ 5: 'md:w-5/12' },
|
|
24
|
+
{ 6: 'md:w-6/12' },
|
|
25
|
+
{ 7: 'md:w-7/12' },
|
|
26
|
+
{ 8: 'md:w-8/12' },
|
|
27
|
+
{ 9: 'md:w-9/12' },
|
|
28
|
+
{ 10: 'md:w-10/12' },
|
|
29
|
+
{ 11: 'md:w-11/12' },
|
|
30
|
+
{ 12: 'md:w-full' }
|
|
31
|
+
];
|
|
32
|
+
const lgWidthOptions = [
|
|
33
|
+
{ 1: 'lg:w-1/12' },
|
|
34
|
+
{ 2: 'lg:w-2/12' },
|
|
35
|
+
{ 3: 'lg:w-3/12' },
|
|
36
|
+
{ 4: 'lg:w-4/12' },
|
|
37
|
+
{ 5: 'lg:w-5/12' },
|
|
38
|
+
{ 6: 'lg:w-6/12' },
|
|
39
|
+
{ 7: 'lg:w-7/12' },
|
|
40
|
+
{ 8: 'lg:w-8/12' },
|
|
41
|
+
{ 9: 'lg:w-9/12' },
|
|
42
|
+
{ 10: 'lg:w-10/12' },
|
|
43
|
+
{ 11: 'lg:w-11/12' },
|
|
44
|
+
{ 12: 'lg:w-full' }
|
|
45
|
+
];
|
|
46
|
+
const xlWidthOptions = [
|
|
47
|
+
{ 1: 'xl:w-1/12' },
|
|
48
|
+
{ 2: 'xl:w-2/12' },
|
|
49
|
+
{ 3: 'xl:w-3/12' },
|
|
50
|
+
{ 4: 'xl:w-4/12' },
|
|
51
|
+
{ 5: 'xl:w-5/12' },
|
|
52
|
+
{ 6: 'xl:w-6/12' },
|
|
53
|
+
{ 7: 'xl:w-7/12' },
|
|
54
|
+
{ 8: 'xl:w-8/12' },
|
|
55
|
+
{ 9: 'xl:w-9/12' },
|
|
56
|
+
{ 10: 'xl:w-10/12' },
|
|
57
|
+
{ 11: 'xl:w-11/12' },
|
|
58
|
+
{ 12: 'xl:w-full' }
|
|
59
|
+
];
|
|
60
|
+
const calculateWidth = (screen, size) => {
|
|
61
|
+
switch (screen) {
|
|
62
|
+
case 'sm':
|
|
63
|
+
return Object.values(widthOptions[size - 1]).toString();
|
|
64
|
+
case 'md':
|
|
65
|
+
return Object.values(mdWidthOptions[size - 1]).toString();
|
|
66
|
+
case 'lg':
|
|
67
|
+
return Object.values(lgWidthOptions[size - 1]).toString();
|
|
68
|
+
case 'xl':
|
|
69
|
+
return Object.values(xlWidthOptions[size - 1]).toString();
|
|
70
|
+
default:
|
|
71
|
+
return Object.values(widthOptions[size - 1]).toString();
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
const classList = classNames({
|
|
75
|
+
[calculateWidth('sm', sm)]: sm,
|
|
76
|
+
[calculateWidth('md', md)]: md,
|
|
77
|
+
[calculateWidth('lg', lg)]: lg,
|
|
78
|
+
[calculateWidth('xl', xl)]: xl
|
|
79
|
+
}, className, 'h-full');
|
|
80
|
+
return (React.createElement("div", { id: id, className: classList }, children));
|
|
81
|
+
};
|
|
82
|
+
export default Column;
|
|
83
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Column/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import Container from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof Container>;
|
|
5
|
+
export declare const _Container: ComponentStory<({ id, className, maxWidth, children }: import("./index").Props) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Container from './index';
|
|
3
|
+
import { idAndClassName } from '../../utils/controls';
|
|
4
|
+
const componentMeta = {
|
|
5
|
+
title: 'Trepur Components/Rupert Bennett/Atoms/Container',
|
|
6
|
+
component: Container,
|
|
7
|
+
argTypes: Object.assign(Object.assign({}, idAndClassName), { maxWidth: {
|
|
8
|
+
type: { name: 'number', required: false },
|
|
9
|
+
description: 'The number of pixles for the component to span',
|
|
10
|
+
control: { type: 'number', min: 1, step: 1 },
|
|
11
|
+
defaultValue: '1200'
|
|
12
|
+
}, children: {
|
|
13
|
+
type: { name: 'other', value: 'string | React.ReactNode' },
|
|
14
|
+
description: 'The child elements to show in the component',
|
|
15
|
+
table: {
|
|
16
|
+
type: {
|
|
17
|
+
summary: 'Array'
|
|
18
|
+
},
|
|
19
|
+
defaultValue: { summary: 'undefined' }
|
|
20
|
+
}
|
|
21
|
+
} }),
|
|
22
|
+
args: {
|
|
23
|
+
className: 'border',
|
|
24
|
+
children: React.createElement("p", null, "This is a centered container with a max width")
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
const Template = (args) => React.createElement(Container, Object.assign({}, args));
|
|
28
|
+
export const _Container = Template.bind({});
|
|
29
|
+
export default componentMeta;
|
|
30
|
+
//# sourceMappingURL=Container.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Container.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Container/Container.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGhD,MAAM,aAAa,GAAoC;IACrD,KAAK,EAAE,kDAAkD;IACzD,SAAS,EAAE,SAAS;IACpB,QAAQ,kCACH,cAAc,KACjB,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,gDAAgD;YAC7D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;YAC5C,YAAY,EAAE,MAAM;SACrB,EACD,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,0BAA0B,EAAE;YAC1D,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,GACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,+EAAoD;KAC/D;CACF,CAAA;AAED,MAAM,QAAQ,GAAqC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,IAAI,EAAI,CAAA;AAEpF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const Container = ({ id, className, maxWidth = 1200, children }) => {
|
|
4
|
+
const classList = classNames(className, 'mx-auto');
|
|
5
|
+
return (React.createElement("div", { id: id, className: classList, style: { maxWidth: `${maxWidth}px` } }, children));
|
|
6
|
+
};
|
|
7
|
+
export default Container;
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Container/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AASnC,MAAM,SAAS,GAAG,CAAC,EACjB,EAAE,EACF,SAAS,EACT,QAAQ,GAAG,IAAI,EACf,QAAQ,EACF,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;IAElD,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,QAAQ,IAAI,EAAE,IAEnC,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import FooterBar from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof FooterBar>;
|
|
5
|
+
export declare const _FooterBar: ComponentStory<({ id, className, text, buttonProps, theme }: import("./index").Props) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import FooterBar from './index';
|
|
3
|
+
import { idAndClassName } from '../../utils/controls';
|
|
4
|
+
import { action } from '@storybook/addon-actions';
|
|
5
|
+
const componentMeta = {
|
|
6
|
+
title: 'Trepur Components/Rupert Bennett/Organisms/Footer Bar',
|
|
7
|
+
component: FooterBar,
|
|
8
|
+
parameters: {},
|
|
9
|
+
argTypes: Object.assign(Object.assign({}, idAndClassName), { text: {
|
|
10
|
+
type: { name: 'string', required: false },
|
|
11
|
+
description: 'The text to show on the component',
|
|
12
|
+
table: {
|
|
13
|
+
type: { summary: 'default' }
|
|
14
|
+
},
|
|
15
|
+
defaultValue: { summary: 'undefined' }
|
|
16
|
+
}, buttonProps: {
|
|
17
|
+
type: { name: 'other', value: 'object' },
|
|
18
|
+
description: 'The props to pass to the button to display on the component',
|
|
19
|
+
table: {
|
|
20
|
+
type: {
|
|
21
|
+
summary: 'object'
|
|
22
|
+
},
|
|
23
|
+
defaultValue: { summary: 'undefined' }
|
|
24
|
+
}
|
|
25
|
+
}, theme: {
|
|
26
|
+
type: { name: 'string', required: false },
|
|
27
|
+
options: ['dark', 'light'],
|
|
28
|
+
description: 'The variant of button to render',
|
|
29
|
+
table: {
|
|
30
|
+
type: { summary: 'light' },
|
|
31
|
+
defaultValue: { summary: 'light' }
|
|
32
|
+
},
|
|
33
|
+
defaultValue: 'light',
|
|
34
|
+
control: { type: 'radio' }
|
|
35
|
+
} }),
|
|
36
|
+
args: {
|
|
37
|
+
text: 'RupertBennett.com Copyright 2022 All rights reserved',
|
|
38
|
+
theme: 'dark',
|
|
39
|
+
buttonProps: {
|
|
40
|
+
children: 'Admin Panel',
|
|
41
|
+
onClick: action('button clicked')
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
const Template = (args) => React.createElement(FooterBar, Object.assign({}, args));
|
|
46
|
+
export const _FooterBar = Template.bind({});
|
|
47
|
+
export default componentMeta;
|
|
48
|
+
//# sourceMappingURL=footerBar.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"footerBar.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/FooterBar/footerBar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAS,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AAEjD,MAAM,aAAa,GAAoC;IACrD,KAAK,EAAE,uDAAuD;IAC9D,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;IACd,QAAQ,kCACH,cAAc,KACjB,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,mCAAmC;YAChD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;YACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;SACvC,EACD,WAAW,EAAE;YACX,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE;YACxC,WAAW,EAAE,6DAA6D;YAC1E,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,EACD,KAAK,EAAE;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;gBAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;aACnC;YACD,YAAY,EAAE,OAAO;YACrB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B,GACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,sDAAsD;QAC5D,KAAK,EAAE,MAAM;QACb,WAAW,EAAE;YACX,QAAQ,EAAE,aAAa;YACvB,OAAO,EAAE,MAAM,CAAC,gBAAgB,CAAC;SAClC;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAAqC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,IAAI,EAAI,CAAA;AAEpF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Props as buttonProps } from '../Button';
|
|
3
|
+
export interface Props {
|
|
4
|
+
id?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
buttonProps?: buttonProps;
|
|
7
|
+
text?: string;
|
|
8
|
+
theme?: 'light' | 'dark';
|
|
9
|
+
}
|
|
10
|
+
declare const Nav: ({ id, className, text, buttonProps, theme }: Props) => JSX.Element;
|
|
11
|
+
export default Nav;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import Button from '../Button';
|
|
4
|
+
const Nav = ({ id, className, text, buttonProps, theme }) => {
|
|
5
|
+
const colours = theme === 'dark' ? 'bg-primary text-white' : 'bg-white text-primary';
|
|
6
|
+
const classList = classNames(className, colours, 'block md:flex flex-wrap justify-between items-center h-auto');
|
|
7
|
+
const textClasses = 'text-center pt-8 pb-4 md:pb-0 md:my-8 md:pt-0 md:pl-16';
|
|
8
|
+
const buttonClasses = 'text-center pb-8 pt-4 md:pb-0 md:pt-0 md:pr-16';
|
|
9
|
+
return (React.createElement("div", { id: id, className: classList },
|
|
10
|
+
React.createElement("div", { className: textClasses }, text),
|
|
11
|
+
React.createElement("div", { className: buttonClasses },
|
|
12
|
+
React.createElement(Button, { variant: theme === 'dark' ? 'primary' : 'secondary', rounded: true, href: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.href, onClick: buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.onClick }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.children))));
|
|
13
|
+
};
|
|
14
|
+
export default Nav;
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/FooterBar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AACnC,OAAO,MAAgC,MAAM,oBAAoB,CAAA;AAUjE,MAAM,GAAG,GAAG,CAAC,EACX,EAAE,EACF,SAAS,EACT,IAAI,EACJ,WAAW,EACX,KAAK,EACC,EAAe,EAAE;IACvB,MAAM,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,uBAAuB,CAAA;IACpF,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,6DAA6D,CAAC,CAAA;IAC/G,MAAM,WAAW,GAAG,wDAAwD,CAAA;IAC5E,MAAM,aAAa,GAAG,gDAAgD,CAAA;IAEtE,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS;QAC/B,6BAAK,SAAS,EAAE,WAAW,IACxB,IAAI,CACD;QACN,6BAAK,SAAS,EAAE,aAAa;YAC3B,oBAAC,MAAM,IACL,OAAO,EAAE,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EACnD,OAAO,QACP,IAAI,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,IAAI,EACvB,OAAO,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,OAAO,IAE5B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,CACf,CACL,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,GAAG,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import Form from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof Form>;
|
|
5
|
+
export declare const _Form: ComponentStory<({ id, className, title, titleClasses, onSubmit, ref, components }: import("./index").Props) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { idAndClassName } from '../../utils/controls';
|
|
3
|
+
import Form from './index';
|
|
4
|
+
const componentMeta = {
|
|
5
|
+
title: 'Trepur Components/Rupert Bennett/Organisms/Form',
|
|
6
|
+
component: Form,
|
|
7
|
+
parameters: {},
|
|
8
|
+
argTypes: Object.assign(Object.assign({}, idAndClassName), { title: {
|
|
9
|
+
type: { name: 'string', required: false },
|
|
10
|
+
description: 'The title to display on the component',
|
|
11
|
+
table: {
|
|
12
|
+
type: { summary: 'string' },
|
|
13
|
+
defaultValue: { summary: 'undefined' }
|
|
14
|
+
}
|
|
15
|
+
}, titleClasses: {
|
|
16
|
+
type: { name: 'string', required: false },
|
|
17
|
+
description: 'The class names to pass to the title of the component',
|
|
18
|
+
table: {
|
|
19
|
+
type: { summary: 'string' },
|
|
20
|
+
defaultValue: { summary: 'undefined' }
|
|
21
|
+
}
|
|
22
|
+
}, onSubmit: {
|
|
23
|
+
type: { name: 'function', required: false },
|
|
24
|
+
description: 'The action to perform when submitting the component',
|
|
25
|
+
action: 'onClick',
|
|
26
|
+
table: {
|
|
27
|
+
type: {
|
|
28
|
+
summary: 'function'
|
|
29
|
+
},
|
|
30
|
+
defaultValue: { summary: 'undefined' }
|
|
31
|
+
}
|
|
32
|
+
}, ref: {
|
|
33
|
+
type: { name: 'other', value: 'RefObject<TouchableOpacity>' },
|
|
34
|
+
description: 'An ref for highlighting the current element',
|
|
35
|
+
table: {
|
|
36
|
+
type: {
|
|
37
|
+
summary: 'object'
|
|
38
|
+
},
|
|
39
|
+
defaultValue: { summary: 'undefined' }
|
|
40
|
+
}
|
|
41
|
+
}, components: {
|
|
42
|
+
description: 'An array of component objects to pass to the component',
|
|
43
|
+
control: 'array',
|
|
44
|
+
table: {
|
|
45
|
+
type: {
|
|
46
|
+
summary: 'array'
|
|
47
|
+
},
|
|
48
|
+
defaultValue: { summary: 'undefined' }
|
|
49
|
+
}
|
|
50
|
+
} }),
|
|
51
|
+
args: {
|
|
52
|
+
title: 'This is a title',
|
|
53
|
+
components: [
|
|
54
|
+
{
|
|
55
|
+
htmlType: 'Input',
|
|
56
|
+
label: 'This is a label',
|
|
57
|
+
placeholder: 'This is a placeholder',
|
|
58
|
+
children: 'Submit'
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
htmlType: 'Input',
|
|
62
|
+
label: 'This is a label',
|
|
63
|
+
placeholder: 'This is a placeholder',
|
|
64
|
+
children: 'Submit'
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
htmlType: 'Input',
|
|
68
|
+
label: 'This is a label',
|
|
69
|
+
placeholder: 'This is a placeholder',
|
|
70
|
+
children: 'Submit'
|
|
71
|
+
},
|
|
72
|
+
{
|
|
73
|
+
htmlType: 'Button',
|
|
74
|
+
children: 'Submit'
|
|
75
|
+
}
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const Template = (args) => React.createElement(Form, Object.assign({}, args));
|
|
80
|
+
export const _Form = Template.bind({});
|
|
81
|
+
export default componentMeta;
|
|
82
|
+
//# sourceMappingURL=Form.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Form/Form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,IAAI,MAAM,SAAS,CAAA;AAG1B,MAAM,aAAa,GAA+B;IAChD,KAAK,EAAE,iDAAiD;IACxD,SAAS,EAAE,IAAI;IACf,UAAU,EAAE,EAAE;IACd,QAAQ,kCACH,cAAc,KACjB,KAAK,EAAE;YACL,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,uCAAuC;YACpD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,EACD,YAAY,EAAE;YACZ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,EACD,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC3C,WAAW,EAAE,qDAAqD;YAClE,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,UAAU;iBACpB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,EACD,GAAG,EAAE;YACH,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,6BAA6B,EAAE;YAC7D,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,EACD,UAAU,EAAE;YACV,WAAW,EAAE,wDAAwD;YACrE,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;gBACD,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF,GACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,UAAU,EAAE;YACV;gBACE,QAAQ,EAAE,OAAO;gBACjB,KAAK,EAAE,iBAAiB;gBACxB,WAAW,EAAE,uBAAuB;gBACpC,QAAQ,EAAE,QAAQ;aACnB;YACD;gBACE,QAAQ,EAAE,OAAO;gBACjB,KAAK,EAAE,iBAAiB;gBACxB,WAAW,EAAE,uBAAuB;gBACpC,QAAQ,EAAE,QAAQ;aACnB;YACD;gBACE,QAAQ,EAAE,OAAO;gBACjB,KAAK,EAAE,iBAAiB;gBACxB,WAAW,EAAE,uBAAuB;gBACpC,QAAQ,EAAE,QAAQ;aACnB;YACD;gBACE,QAAQ,EAAE,QAAQ;gBAClB,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAAgC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,IAAI,oBAAK,IAAI,EAAI,CAAA;AAE1E,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Props as buttonProps } from '../Button';
|
|
3
|
+
import { Props as inputProps } from '../Input';
|
|
4
|
+
export interface Props {
|
|
5
|
+
id?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
title?: string;
|
|
8
|
+
titleClasses?: string;
|
|
9
|
+
onSubmit?: () => void;
|
|
10
|
+
ref?: string;
|
|
11
|
+
components?: Array<inputProps & buttonProps & {
|
|
12
|
+
htmlType: string;
|
|
13
|
+
}>;
|
|
14
|
+
}
|
|
15
|
+
declare const Form: ({ id, className, title, titleClasses, onSubmit, ref, components }: Props) => JSX.Element;
|
|
16
|
+
export default Form;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Button from '../Button';
|
|
3
|
+
import Input from '../Input';
|
|
4
|
+
const Form = ({ id, className, title, titleClasses, onSubmit, ref, components }) => {
|
|
5
|
+
return (React.createElement(React.Fragment, null,
|
|
6
|
+
React.createElement("h1", { className: titleClasses }, title),
|
|
7
|
+
React.createElement("form", { id: id, ref: ref, className: className, onSubmit: onSubmit }, components === null || components === void 0 ? void 0 : components.map((component, i) => {
|
|
8
|
+
if ((component === null || component === void 0 ? void 0 : component.htmlType) === 'Input') {
|
|
9
|
+
return (React.createElement(Input, { key: `input_${i + 0}`, className: component === null || component === void 0 ? void 0 : component.className, label: component === null || component === void 0 ? void 0 : component.label, placeholder: component === null || component === void 0 ? void 0 : component.placeholder, type: component === null || component === void 0 ? void 0 : component.type, name: component === null || component === void 0 ? void 0 : component.name }));
|
|
10
|
+
}
|
|
11
|
+
else if (component.htmlType === 'Button') {
|
|
12
|
+
return (React.createElement(Button, { key: `button_${i + 0}`, type: component === null || component === void 0 ? void 0 : component.type, onClick: component === null || component === void 0 ? void 0 : component.onClick, className: component === null || component === void 0 ? void 0 : component.className }, component === null || component === void 0 ? void 0 : component.children));
|
|
13
|
+
}
|
|
14
|
+
else
|
|
15
|
+
return React.createElement(React.Fragment, null);
|
|
16
|
+
}))));
|
|
17
|
+
};
|
|
18
|
+
export default Form;
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Form/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAgC,MAAM,oBAAoB,CAAA;AACjE,OAAO,KAA8B,MAAM,mBAAmB,CAAA;AAY9D,MAAM,IAAI,GAAG,CAAC,EACZ,EAAE,EACF,SAAS,EACT,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,GAAG,EACH,UAAU,EACJ,EAAe,EAAE;IACvB,OAAO,CACL;QACE,4BAAI,SAAS,EAAE,YAAY,IAAG,KAAK,CAAM;QACzC,8BAAM,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,IAC7D,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,GAAG,CAAC,CAAC,SAAS,EAAE,CAAC,EAAE,EAAE;YAChC,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,MAAK,OAAO,EAAE;gBACnC,OAAO,CACL,oBAAC,KAAK,IACJ,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,EACrB,SAAS,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,EAC/B,KAAK,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EACvB,WAAW,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,WAAW,EACnC,IAAI,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,EACrB,IAAI,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,GACrB,CACH,CAAA;aACF;iBAAM,IAAI,SAAS,CAAC,QAAQ,KAAK,QAAQ,EAAE;gBAC1C,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,UAAU,CAAC,GAAG,CAAC,EAAE,EACtB,IAAI,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,EACrB,OAAO,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,EAC3B,SAAS,EAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,IAE9B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,CACb,CACV,CAAA;aACF;;gBAAM,OAAO,yCAAK,CAAA;QACrB,CAAC,CAAC,CACG,CACN,CACJ,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import FyreCard from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof FyreCard>;
|
|
5
|
+
export declare const _FyreCard: ComponentStory<({ id, className, image, imageClass, altText, bordered, buttonProps }: import("./index").Props) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import FyreCard from './index';
|
|
3
|
+
import { idAndClassName } from '../../utils/controls';
|
|
4
|
+
const componentMeta = {
|
|
5
|
+
title: 'Trepur Components/Other/Organisms/Fyre Card',
|
|
6
|
+
component: FyreCard,
|
|
7
|
+
parameters: {},
|
|
8
|
+
argTypes: Object.assign(Object.assign({}, idAndClassName), { image: {
|
|
9
|
+
description: '',
|
|
10
|
+
control: 'text',
|
|
11
|
+
table: {
|
|
12
|
+
category: ''
|
|
13
|
+
}
|
|
14
|
+
} }),
|
|
15
|
+
args: {
|
|
16
|
+
image: 'https://picsum.photos/500/300'
|
|
17
|
+
}
|
|
18
|
+
};
|
|
19
|
+
const Template = (args) => React.createElement(FyreCard, Object.assign({}, args));
|
|
20
|
+
export const _FyreCard = Template.bind({});
|
|
21
|
+
export default componentMeta;
|
|
22
|
+
//# sourceMappingURL=FyreCard.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FyreCard.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/FyreCard/FyreCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,QAAQ,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAGhD,MAAM,aAAa,GAAmC;IACpD,KAAK,EAAE,6CAA6C;IACpD,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,EAAE;IACd,QAAQ,kCACH,cAAc,KACjB,KAAK,EAAE;YACL,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF,GACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,+BAA+B;KACvC;CACF,CAAA;AAED,MAAM,QAAQ,GAAoC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,IAAI,EAAI,CAAA;AAElF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Props as buttonProps } from '../Button';
|
|
3
|
+
export interface Props {
|
|
4
|
+
id?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
image?: string;
|
|
7
|
+
imageClass?: string;
|
|
8
|
+
altText?: string;
|
|
9
|
+
bordered?: string;
|
|
10
|
+
buttonProps?: buttonProps;
|
|
11
|
+
}
|
|
12
|
+
declare const FyreCard: ({ id, className, image, imageClass, altText, bordered, buttonProps }: Props) => JSX.Element;
|
|
13
|
+
export default FyreCard;
|