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,15 @@
|
|
|
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
|
+
altText?: string;
|
|
8
|
+
title?: string;
|
|
9
|
+
link?: string;
|
|
10
|
+
rounded?: boolean;
|
|
11
|
+
openInNewTab?: boolean;
|
|
12
|
+
buttonProps?: buttonProps;
|
|
13
|
+
}
|
|
14
|
+
declare const ImageLink: ({ id, className, image, altText, title, link, rounded, openInNewTab, buttonProps }: Props) => JSX.Element;
|
|
15
|
+
export default ImageLink;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Button from '../Button';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
const ImageLink = ({ id, className, image, altText, title, link, rounded, openInNewTab, buttonProps }) => {
|
|
5
|
+
const classList = classNames(className, 'cursor-pointer lg:mx-3 md:mx-1 mx-1 lg:mb-5 md:mb-2 mb-2 hover:opacity-50 overflow-hidden text-center');
|
|
6
|
+
const roundedClass = classNames({
|
|
7
|
+
'rounded-full': rounded
|
|
8
|
+
});
|
|
9
|
+
return (React.createElement("a", Object.assign({ id: id, href: link }, (openInNewTab !== false && { target: 'blank' })),
|
|
10
|
+
React.createElement("div", { className: roundedClass + ' ' + classList + ' relative overflow-hidden' },
|
|
11
|
+
React.createElement("img", { src: image, alt: altText, className: 'object-cover w-full h-full' }),
|
|
12
|
+
title !== undefined &&
|
|
13
|
+
React.createElement("h1", { className: 'absolute bg-black text-white py-2 mt-4 top-0 inset-x-0 text-center' }, title),
|
|
14
|
+
(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.children) !== undefined &&
|
|
15
|
+
React.createElement(Button, { className: 'absolute mx-8 mb-4 bottom-0 inset-x-0 text-center' }, buttonProps.children))));
|
|
16
|
+
};
|
|
17
|
+
export default ImageLink;
|
|
18
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/ImageLink/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAgC,MAAM,oBAAoB,CAAA;AACjE,OAAO,UAAU,MAAM,YAAY,CAAA;AAanC,MAAM,SAAS,GAAG,CAAC,EACjB,EAAE,EACF,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,WAAW,EACL,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,uGAAuG,CAAC,CAAA;IAEhJ,MAAM,YAAY,GAAG,UAAU,CAAC;QAC9B,cAAc,EAAE,OAAO;KACxB,CAAC,CAAA;IAEF,OAAO,CACL,yCACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,IACN,CAAC,YAAY,KAAK,KAAK,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC;QAEnD,6BAAK,SAAS,EAAE,YAAY,GAAG,GAAG,GAAG,SAAS,GAAG,2BAA2B;YAC1E,6BACE,GAAG,EAAE,KAAK,EACV,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,4BAA4B,GACtC;YACD,KAAK,KAAK,SAAS;gBAClB,4BACE,SAAS,EAAC,oEAAoE,IAE7E,KAAK,CACH;YACN,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,QAAQ,MAAK,SAAS;gBAClC,oBAAC,MAAM,IACL,SAAS,EAAC,mDAAmD,IAE5D,WAAW,CAAC,QAAQ,CACd,CACP,CACJ,CACL,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import ImageLinkList, { Props as imageLinkListProps } from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof ImageLinkList>;
|
|
5
|
+
export declare const _ImageLinkList: ComponentStory<({ id, className, items }: imageLinkListProps) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { idAndClassName } from '../../utils/controls';
|
|
3
|
+
import ImageLinkList from './index';
|
|
4
|
+
const getLinks = () => {
|
|
5
|
+
return new Array(16).fill(null).map(() => {
|
|
6
|
+
return {
|
|
7
|
+
image: 'https://picsum.photos/400/400',
|
|
8
|
+
title: 'Hi',
|
|
9
|
+
buttonProps: {
|
|
10
|
+
children: React.createElement("p", null, "button")
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
});
|
|
14
|
+
};
|
|
15
|
+
const componentMeta = {
|
|
16
|
+
title: 'Trepur Components/Other/Organisms/Image Link List',
|
|
17
|
+
component: ImageLinkList,
|
|
18
|
+
parameters: {},
|
|
19
|
+
argTypes: Object.assign({}, idAndClassName),
|
|
20
|
+
args: {
|
|
21
|
+
items: getLinks()
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
const Template = (args) => React.createElement(ImageLinkList, Object.assign({}, args));
|
|
25
|
+
export const _ImageLinkList = Template.bind({});
|
|
26
|
+
export default componentMeta;
|
|
27
|
+
//# sourceMappingURL=ImageLinkList.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ImageLinkList.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/ImageLinkList/ImageLinkList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,aAA8C,MAAM,SAAS,CAAA;AAGpE,MAAM,QAAQ,GAAG,GAAQ,EAAE;IACzB,OAAO,IAAI,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;QACvC,OAAO;YACL,KAAK,EAAE,+BAA+B;YACtC,KAAK,EAAE,IAAI;YACX,WAAW,EAAE;gBACX,QAAQ,EAAE,wCAAa;aACxB;SACF,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,aAAa,GAAwC;IACzD,KAAK,EAAE,mDAAmD;IAC1D,SAAS,EAAE,aAAa;IACxB,UAAU,EAAE,EAAE;IACd,QAAQ,oBACH,cAAc,CAClB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ,EAAE;KAClB;CACF,CAAA;AAED,MAAM,QAAQ,GAAyC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,aAAa,oBAAK,IAAI,EAAI,CAAA;AAE5F,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE/C,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Props as imageLinkProps } from '../ImageLink/index';
|
|
3
|
+
export interface Props {
|
|
4
|
+
id?: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
items?: Array<imageLinkProps>;
|
|
7
|
+
}
|
|
8
|
+
declare const ImageLinkList: ({ id, className, items }: Props) => JSX.Element;
|
|
9
|
+
export default ImageLinkList;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import ImageLink from '../ImageLink/index';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
const ImageLinkList = ({ id, className, items }) => {
|
|
5
|
+
const classList = classNames(className, 'grid md:grid-cols-4 sm:grid-cols-2');
|
|
6
|
+
return (React.createElement("div", { id: id, className: classList }, items === null || items === void 0 ? void 0 : items.map((item, i) => {
|
|
7
|
+
return (React.createElement(ImageLink, { key: `image_link_${i + 0}`, altText: 'image', image: item.image, title: item.title }));
|
|
8
|
+
})));
|
|
9
|
+
};
|
|
10
|
+
export default ImageLinkList;
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/ImageLinkList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,SAAsC,MAAM,oBAAoB,CAAA;AACvE,OAAO,UAAU,MAAM,YAAY,CAAA;AAOnC,MAAM,aAAa,GAAG,CAAC,EACrB,EAAE,EACF,SAAS,EACT,KAAK,EACC,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,oCAAoC,CAAC,CAAA;IAE7E,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,IAC9B,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAS,EAAE,EAAE;QAC9B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,cAAc,CAAC,GAAG,CAAC,EAAE,EAC1B,OAAO,EAAC,OAAO,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import InformationIcon from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof InformationIcon>;
|
|
5
|
+
export declare const _InformationIcon: ComponentStory<({ id, className, text, number, bordered, rounded, withAnimation, iconProps, theme }: import("./index").Props) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import InformationIcon from './index';
|
|
3
|
+
import { idAndClassName } from '../../utils/controls';
|
|
4
|
+
const componentMeta = {
|
|
5
|
+
title: 'Trepur Components/Rupert Bennett/Atoms/Information Icon',
|
|
6
|
+
component: InformationIcon,
|
|
7
|
+
argTypes: Object.assign(Object.assign({}, idAndClassName), { text: {
|
|
8
|
+
type: { name: 'string', required: false },
|
|
9
|
+
description: 'The text to display on the component',
|
|
10
|
+
table: {
|
|
11
|
+
type: { summary: 'string' }
|
|
12
|
+
}
|
|
13
|
+
}, number: {
|
|
14
|
+
type: { name: 'number', required: false },
|
|
15
|
+
description: 'The number to display on the component',
|
|
16
|
+
table: {
|
|
17
|
+
type: { summary: 'number' }
|
|
18
|
+
}
|
|
19
|
+
}, bordered: {
|
|
20
|
+
type: { name: 'boolean', required: false },
|
|
21
|
+
description: 'Applies a border to the component',
|
|
22
|
+
table: {
|
|
23
|
+
type: { summary: 'boolean' }
|
|
24
|
+
},
|
|
25
|
+
defaultValue: 'false'
|
|
26
|
+
}, rounded: {
|
|
27
|
+
type: { name: 'boolean', required: false },
|
|
28
|
+
description: 'Enabled rounded corners on the component',
|
|
29
|
+
table: {
|
|
30
|
+
type: { summary: 'boolean' }
|
|
31
|
+
},
|
|
32
|
+
defaultValue: 'false'
|
|
33
|
+
}, withAnimation: {
|
|
34
|
+
type: { name: 'boolean', required: false },
|
|
35
|
+
description: 'Enabled the counter animation on the component',
|
|
36
|
+
table: {
|
|
37
|
+
type: { summary: 'boolean' }
|
|
38
|
+
},
|
|
39
|
+
defaultValue: 'false'
|
|
40
|
+
}, iconProps: {
|
|
41
|
+
type: { name: 'string', required: false },
|
|
42
|
+
description: 'The props to pass to the icon to display on the component',
|
|
43
|
+
table: {
|
|
44
|
+
type: { summary: 'string' }
|
|
45
|
+
}
|
|
46
|
+
}, theme: {
|
|
47
|
+
type: { name: 'string', required: false },
|
|
48
|
+
options: ['dark', 'light'],
|
|
49
|
+
description: 'The variant of component to render',
|
|
50
|
+
table: { type: { summary: 'light' }, defaultValue: { summary: 'light' } },
|
|
51
|
+
defaultValue: 'light',
|
|
52
|
+
control: { type: 'radio' }
|
|
53
|
+
} }),
|
|
54
|
+
args: {
|
|
55
|
+
text: 'Projects Completed',
|
|
56
|
+
number: 21,
|
|
57
|
+
bordered: true,
|
|
58
|
+
rounded: true,
|
|
59
|
+
withAnimation: true,
|
|
60
|
+
theme: 'dark',
|
|
61
|
+
iconProps: {
|
|
62
|
+
type: 'heart',
|
|
63
|
+
size: 2,
|
|
64
|
+
className: 'mr-4 mb-8',
|
|
65
|
+
colour: 'white',
|
|
66
|
+
bgColour: 'primary'
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const Template = (args) => React.createElement(InformationIcon, Object.assign({}, args));
|
|
71
|
+
export const _InformationIcon = Template.bind({});
|
|
72
|
+
export default componentMeta;
|
|
73
|
+
//# sourceMappingURL=InformationIcon.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"InformationIcon.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIcon/InformationIcon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,eAAe,MAAM,SAAS,CAAA;AAErC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAEhD,MAAM,aAAa,GAA0C;IAC3D,KAAK,EAAE,yDAAyD;IAChE,SAAS,EAAE,eAAe;IAC1B,QAAQ,kCACH,cAAc,KACjB,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,sCAAsC;YACnD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,MAAM,EAAE;YACN,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF,EACD,QAAQ,EAAE;YACR,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,mCAAmC;YAChD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;YACD,YAAY,EAAE,OAAO;SACtB,EACD,OAAO,EAAE;YACP,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;YACD,YAAY,EAAE,OAAO;SACtB,EACD,aAAa,EAAE;YACb,IAAI,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE;YAC1C,WAAW,EAAE,gDAAgD;YAC7D,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aAC7B;YACD,YAAY,EAAE,OAAO;SACtB,EACD,SAAS,EAAE;YACT,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE;YACzC,WAAW,EAAE,2DAA2D;YACxE,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;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,oCAAoC;YACjD,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE;YACzE,YAAY,EAAE,OAAO;YACrB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B,GACF;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,oBAAoB;QAC1B,MAAM,EAAE,EAAE;QACV,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAI;QACb,aAAa,EAAE,IAAI;QACnB,KAAK,EAAE,MAAM;QACb,SAAS,EAAE;YACT,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,CAAC;YACP,SAAS,EAAE,WAAW;YACtB,MAAM,EAAE,OAAO;YACf,QAAQ,EAAE,SAAS;SACpB;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAA2C,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,eAAe,oBAAK,IAAI,EAAI,CAAA;AAEhG,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { Props as iconProps } from '../Icon';
|
|
3
|
+
export interface Props {
|
|
4
|
+
id: string;
|
|
5
|
+
className?: string;
|
|
6
|
+
text?: string;
|
|
7
|
+
number: number;
|
|
8
|
+
bordered?: boolean;
|
|
9
|
+
rounded?: boolean;
|
|
10
|
+
withAnimation?: boolean;
|
|
11
|
+
iconProps?: iconProps;
|
|
12
|
+
theme?: 'dark' | 'light';
|
|
13
|
+
}
|
|
14
|
+
declare const InformationIcon: ({ id, className, text, number, bordered, rounded, withAnimation, iconProps, theme }: Props) => JSX.Element;
|
|
15
|
+
export default InformationIcon;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
import Icon from '../Icon';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
const InformationIcon = ({ id, className, text, number, bordered = false, rounded = false, withAnimation = false, iconProps, theme = 'light' }) => {
|
|
5
|
+
const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary';
|
|
6
|
+
const loaded = useRef(false);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
const element = document.getElementById(`${id}_number`);
|
|
9
|
+
const observer = new IntersectionObserver((entries, observer) => {
|
|
10
|
+
entries.forEach(entry => {
|
|
11
|
+
if (entry.intersectionRatio >= 0.1 && !loaded.current) {
|
|
12
|
+
loaded.current = true;
|
|
13
|
+
counterAnimation(document.getElementById(`${id}_number`), 0, number, 3000);
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
}, { threshold: 1 });
|
|
17
|
+
(element != null) && withAnimation && observer.observe(element);
|
|
18
|
+
}, []);
|
|
19
|
+
const wrapperClasses = 'h-96 flex items-center text-center ease-out duration-300';
|
|
20
|
+
const classList = classNames({
|
|
21
|
+
border: bordered,
|
|
22
|
+
'rounded-2xl': rounded
|
|
23
|
+
}, className, colours, 'flex flex-col justify-center w-full h-full items-center ease-out duration-300 text-md lg:text-md hover:text-lg');
|
|
24
|
+
const counterAnimation = (obj, start, end, duration) => {
|
|
25
|
+
let startTimestamp;
|
|
26
|
+
const step = (timestamp) => {
|
|
27
|
+
startTimestamp = timestamp;
|
|
28
|
+
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
|
|
29
|
+
obj.innerHTML = Math.floor(progress * (end - start) + start);
|
|
30
|
+
if (progress < 1) {
|
|
31
|
+
window.requestAnimationFrame(step);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
window.requestAnimationFrame(step);
|
|
35
|
+
};
|
|
36
|
+
return (React.createElement("div", { id: id, className: wrapperClasses },
|
|
37
|
+
React.createElement("div", { className: classList },
|
|
38
|
+
(iconProps != null) &&
|
|
39
|
+
React.createElement(Icon, Object.assign({}, iconProps)),
|
|
40
|
+
number !== undefined &&
|
|
41
|
+
React.createElement("p", null, number),
|
|
42
|
+
React.createElement("p", null, text))));
|
|
43
|
+
};
|
|
44
|
+
export default InformationIcon;
|
|
45
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/InformationIcon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,IAA4B,MAAM,kBAAkB,CAAA;AAC3D,OAAO,UAAU,MAAM,YAAY,CAAA;AAcnC,MAAM,eAAe,GAAG,CAAC,EACvB,EAAE,EACF,SAAS,EACT,IAAI,EACJ,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,KAAK,EACrB,SAAS,EACT,KAAK,GAAG,OAAO,EACT,EAAe,EAAE;IACvB,MAAM,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,2CAA2C,CAAA;IAC1H,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,SAAS,CAAC,CAAA;QACvD,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YAC9D,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;gBACtB,IAAI,KAAK,CAAC,iBAAiB,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;oBACrD,MAAM,CAAC,OAAO,GAAG,IAAI,CAAA;oBACrB,gBAAgB,CACd,QAAQ,CAAC,cAAc,CAAC,GAAG,EAAE,SAAS,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,CAAA;iBAC5D;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CACnB;QAAA,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,aAAa,IAAI,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;IAClE,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,cAAc,GAAG,0DAA0D,CAAA;IAEjF,MAAM,SAAS,GAAG,UAAU,CAAC;QAC3B,MAAM,EAAE,QAAQ;QAChB,aAAa,EAAE,OAAO;KACvB,EACD,SAAS,EACT,OAAO,EACP,gHAAgH,CAAC,CAAA;IAEjH,MAAM,gBAAgB,GAAG,CAAC,GAAQ,EAAE,KAAa,EAAE,GAAW,EAAE,QAAgB,EAAQ,EAAE;QACxF,IAAI,cAAsB,CAAA;QAC1B,MAAM,IAAI,GAAG,CAAC,SAAiB,EAAQ,EAAE;YACvC,cAAc,GAAG,SAAS,CAAA;YAC1B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,cAAc,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAA;YACrE,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,CAAA;YAC5D,IAAI,QAAQ,GAAG,CAAC,EAAE;gBAChB,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;aACnC;QACH,CAAC,CAAA;QACD,MAAM,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAA;IACpC,CAAC,CAAA;IAED,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,cAAc;QAEzB,6BAAK,SAAS,EAAE,SAAS;YACtB,CAAC,SAAS,IAAI,IAAI,CAAC;gBAClB,oBAAC,IAAI,oBAAK,SAAS,EAAI;YACxB,MAAM,KAAK,SAAS;gBACnB,+BAAI,MAAM,CAAK;YACjB,+BAAI,IAAI,CAAK,CACT,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import Input from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof Input>;
|
|
5
|
+
export declare const _Input: ComponentStory<({ id, className, labelClasses, inputClasses, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, autoFocus, label, type, name, placeholder, bold, onChange, onBlur, onFocus, hasValidation, errors, value, theme }: import("./index").Props) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Input from './index';
|
|
3
|
+
const componentMeta = {
|
|
4
|
+
title: 'Trepur Components/Rupert Bennett/Atoms/Input',
|
|
5
|
+
component: Input,
|
|
6
|
+
parameters: {},
|
|
7
|
+
argTypes: {
|
|
8
|
+
id: {
|
|
9
|
+
description: 'Defines the id of the component',
|
|
10
|
+
table: {
|
|
11
|
+
category: '',
|
|
12
|
+
type: { summary: 'string' },
|
|
13
|
+
defaultValue: { summary: 'undefined' }
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
className: {
|
|
17
|
+
description: 'Defines any additional classes for the components',
|
|
18
|
+
table: {
|
|
19
|
+
category: '',
|
|
20
|
+
type: { summary: 'string' },
|
|
21
|
+
defaultValue: { summary: 'undefined' }
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
label: {
|
|
25
|
+
description: '',
|
|
26
|
+
control: 'text',
|
|
27
|
+
table: {
|
|
28
|
+
category: ''
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
placeholder: {
|
|
32
|
+
description: '',
|
|
33
|
+
control: 'text',
|
|
34
|
+
table: {
|
|
35
|
+
category: ''
|
|
36
|
+
}
|
|
37
|
+
},
|
|
38
|
+
bold: {
|
|
39
|
+
description: '',
|
|
40
|
+
control: 'boolean',
|
|
41
|
+
table: {
|
|
42
|
+
category: ''
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
required: {
|
|
46
|
+
description: '',
|
|
47
|
+
control: 'boolean',
|
|
48
|
+
table: {
|
|
49
|
+
category: ''
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
hasValidation: {
|
|
53
|
+
description: '',
|
|
54
|
+
control: 'boolean',
|
|
55
|
+
table: {
|
|
56
|
+
category: ''
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
errors: {
|
|
60
|
+
description: '',
|
|
61
|
+
control: 'array',
|
|
62
|
+
table: {
|
|
63
|
+
category: ''
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
value: {
|
|
67
|
+
description: 'The default value of the input',
|
|
68
|
+
control: 'text',
|
|
69
|
+
table: {
|
|
70
|
+
category: ''
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
theme: {
|
|
74
|
+
type: { name: 'string', required: false },
|
|
75
|
+
options: ['dark', 'light'],
|
|
76
|
+
description: 'The variant of button to render',
|
|
77
|
+
table: { type: { summary: 'dark' }, defaultValue: { summary: 'dark' } },
|
|
78
|
+
defaultValue: 'dark',
|
|
79
|
+
control: { type: 'radio' }
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
args: {
|
|
83
|
+
label: 'This is a label',
|
|
84
|
+
placeholder: 'This is a placeholder',
|
|
85
|
+
errors: [
|
|
86
|
+
'This is an error',
|
|
87
|
+
'This is another error',
|
|
88
|
+
'This is a third error'
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
const Template = (args) => React.createElement(Input, Object.assign({}, args));
|
|
93
|
+
export const _Input = Template.bind({});
|
|
94
|
+
export default componentMeta;
|
|
95
|
+
//# sourceMappingURL=Input.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,SAAS,CAAA;AAG3B,MAAM,aAAa,GAAgC;IACjD,KAAK,EAAE,8CAA8C;IACrD,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,EAAE;IACd,QAAQ,EAAE;QACR,EAAE,EAAE;YACF,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,mDAAmD;YAChE,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;gBACZ,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,WAAW,EAAE;aACvC;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,WAAW,EAAE;YACX,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,aAAa,EAAE;YACb,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,EAAE;YACf,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,gCAAgC;YAC7C,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,EAAE;aACb;SACF;QACD,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,EAAE,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE;YACvE,YAAY,EAAE,MAAM;YACpB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,uBAAuB;QACpC,MAAM,EAAE;YACN,kBAAkB;YAClB,uBAAuB;YACvB,uBAAuB;SACxB;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAAiC,CAAC,IAAI,EAAE,EAAE,CAAC,oBAAC,KAAK,oBAAK,IAAI,EAAI,CAAA;AAE5E,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEvC,eAAe,aAAa,CAAA"}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface Props {
|
|
3
|
+
id?: string;
|
|
4
|
+
className?: string;
|
|
5
|
+
labelClasses?: string;
|
|
6
|
+
inputClasses?: string;
|
|
7
|
+
autoComplete?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
formId?: string;
|
|
10
|
+
height?: string;
|
|
11
|
+
maxLength?: number;
|
|
12
|
+
minLength?: number;
|
|
13
|
+
pattern?: string;
|
|
14
|
+
required?: boolean;
|
|
15
|
+
readOnly?: boolean;
|
|
16
|
+
label?: string;
|
|
17
|
+
type?: string;
|
|
18
|
+
name?: string;
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
hasValidation?: boolean;
|
|
21
|
+
bold?: boolean;
|
|
22
|
+
autoFocus?: boolean;
|
|
23
|
+
onChange?: (e: any) => void;
|
|
24
|
+
onBlur?: () => void;
|
|
25
|
+
onFocus?: () => void;
|
|
26
|
+
errors?: string[];
|
|
27
|
+
value?: string;
|
|
28
|
+
theme?: 'dark' | 'light';
|
|
29
|
+
}
|
|
30
|
+
declare const Input: ({ id, className, labelClasses, inputClasses, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, autoFocus, label, type, name, placeholder, bold, onChange, onBlur, onFocus, hasValidation, errors, value, theme }: Props) => JSX.Element;
|
|
31
|
+
export default Input;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const Input = ({ id, className, labelClasses, inputClasses, autoComplete, disabled, formId, height, maxLength, minLength, pattern, required, readOnly, autoFocus, label, type, name, placeholder, bold, onChange, onBlur, onFocus, hasValidation, errors, value, theme }) => {
|
|
4
|
+
const colours = theme === 'dark' ? 'placeholder-white bg-primary text-white' : 'placeholder-primary bg-white text-primary';
|
|
5
|
+
const classList = classNames(className, colours, 'flex flex-col');
|
|
6
|
+
const labelClassList = classNames({
|
|
7
|
+
'font-bold': bold
|
|
8
|
+
}, labelClasses, 'w-auto pb-2');
|
|
9
|
+
const inputClassList = classNames({}, inputClasses, colours, 'border px-2 py-2 mb-2 rounded-md');
|
|
10
|
+
const newId = id !== undefined ? `-${id}` : '';
|
|
11
|
+
return (React.createElement("div", { id: id, className: classList },
|
|
12
|
+
label !== undefined &&
|
|
13
|
+
React.createElement("label", { id: `label${newId}`, className: labelClassList, htmlFor: `input${newId}` },
|
|
14
|
+
React.createElement("p", null,
|
|
15
|
+
label,
|
|
16
|
+
required === true &&
|
|
17
|
+
React.createElement("span", { className: 'text-red' }, "*"))),
|
|
18
|
+
React.createElement("input", { id: `input${newId}`, className: inputClassList, autoComplete: autoComplete, disabled: disabled, form: formId, height: height, maxLength: maxLength, minLength: minLength, pattern: pattern, required: required, readOnly: readOnly, type: type, name: name, value: value, placeholder: placeholder, onChange: onChange, onBlur: onBlur, onFocus: onFocus }),
|
|
19
|
+
hasValidation === true &&
|
|
20
|
+
React.createElement("div", { id: `errors${newId}` }, errors === null || errors === void 0 ? void 0 : errors.map((error, i) => {
|
|
21
|
+
return (React.createElement("p", { key: `error_msg_${i + 0}`, className: 'text-red text-sm' }, error));
|
|
22
|
+
}))));
|
|
23
|
+
};
|
|
24
|
+
export default Input;
|
|
25
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AA+BnC,MAAM,KAAK,GAAG,CAAC,EACb,EAAE,EACF,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,MAAM,EACN,SAAS,EACT,SAAS,EACT,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,aAAa,EACb,MAAM,EACN,KAAK,EACL,KAAK,EACC,EAAe,EAAE;IACvB,MAAM,OAAO,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,2CAA2C,CAAA;IAC1H,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,EAAE,OAAO,EAAE,eAAe,CAAC,CAAA;IAEjE,MAAM,cAAc,GAAG,UAAU,CAAC;QAChC,WAAW,EAAE,IAAI;KAClB,EAAE,YAAY,EAAE,aAAa,CAAC,CAAA;IAE/B,MAAM,cAAc,GAAG,UAAU,CAAC,EACjC,EAAE,YAAY,EAAE,OAAO,EAAE,kCAAkC,CAAC,CAAA;IAE7D,MAAM,KAAK,GAAG,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9C,OAAO,CACL,6BACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS;QAEnB,KAAK,KAAK,SAAS;YAClB,+BACE,EAAE,EAAE,QAAQ,KAAK,EAAE,EACnB,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,QAAQ,KAAK,EAAE;gBAExB;oBACG,KAAK;oBACL,QAAQ,KAAK,IAAI;wBAChB,8BAAM,SAAS,EAAC,UAAU,QAAS,CACnC,CACE;QACV,+BACE,EAAE,EAAE,QAAQ,KAAK,EAAE,EACnB,SAAS,EAAE,cAAc,EACzB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,GAChB;QACD,aAAa,KAAK,IAAI;YACrB,6BAAK,EAAE,EAAE,SAAS,KAAK,EAAE,IACtB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;gBACxB,OAAO,CACL,2BACE,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,EACzB,SAAS,EAAC,kBAAkB,IAE3B,KAAK,CACJ,CACL,CAAA;YACH,CAAC,CAAC,CACE,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import Jumbotron from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof Jumbotron>;
|
|
5
|
+
export declare const _Jumbotron: ComponentStory<({ id, className, image, altText }: import("./index").Props) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { idAndClassName } from '../../utils/controls';
|
|
3
|
+
import Jumbotron from './index';
|
|
4
|
+
const componentMeta = {
|
|
5
|
+
title: 'Trepur Components/Rupert Bennett/Organisms/Jumbotron',
|
|
6
|
+
component: Jumbotron,
|
|
7
|
+
parameters: {},
|
|
8
|
+
argTypes: Object.assign({}, idAndClassName),
|
|
9
|
+
args: {
|
|
10
|
+
image: 'https://picsum.photos/1500/400'
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
const Template = (args) => React.createElement(Jumbotron, Object.assign({}, args));
|
|
14
|
+
export const _Jumbotron = Template.bind({});
|
|
15
|
+
export default componentMeta;
|
|
16
|
+
//# sourceMappingURL=Jumbotron.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Jumbotron.stories.js","sourceRoot":"","sources":["../../../../../src/lib/components/Jumbotron/Jumbotron.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAChD,OAAO,SAAS,MAAM,SAAS,CAAA;AAG/B,MAAM,aAAa,GAAoC;IACrD,KAAK,EAAE,sDAAsD;IAC7D,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,EAAE;IACd,QAAQ,oBACH,cAAc,CAClB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,gCAAgC;KACxC;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,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
const Jumbotron = ({ id, className, image, altText }) => {
|
|
4
|
+
const classList = classNames(className);
|
|
5
|
+
return (React.createElement("div", { id: id, className: classList },
|
|
6
|
+
React.createElement("img", { className: 'w-full object-cover', src: image, alt: altText })));
|
|
7
|
+
};
|
|
8
|
+
export default Jumbotron;
|
|
9
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/lib/components/Jumbotron/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,UAAU,MAAM,YAAY,CAAA;AAQnC,MAAM,SAAS,GAAG,CAAC,EACjB,EAAE,EACF,SAAS,EACT,KAAK,EACL,OAAO,EACD,EAAe,EAAE;IACvB,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,CAAC,CAAA;IAEvC,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS;QAC/B,6BAAK,SAAS,EAAC,qBAAqB,EAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,GAAI,CAC7D,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import Nav from './index';
|
|
3
|
+
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
4
|
+
declare const componentMeta: ComponentMeta<typeof Nav>;
|
|
5
|
+
export declare const _Nav: ComponentStory<({ id, className, navLinks, asSideBar, dropdownNavHeight, logo, logoDarkTheme, mobileLogo, mobileLogoDarkTheme, logoLink, fixedTop, mobileClasses, getNavStatus, theme, text, textLink }: import("./index").Props) => JSX.Element>;
|
|
6
|
+
export default componentMeta;
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Nav from './index';
|
|
3
|
+
import { idAndClassName } from '../../utils/controls';
|
|
4
|
+
import logoDarkTheme from '@assets/images/primary-logo-bold.png';
|
|
5
|
+
import logoImage from '@assets/images/secondary-logo-bold.png';
|
|
6
|
+
const navLinks = [
|
|
7
|
+
{ title: 'Home', href: '/', isActive: true },
|
|
8
|
+
{ title: 'Resume', href: '/', isActive: false },
|
|
9
|
+
{ title: 'Contact Me', href: '/', isActive: false }
|
|
10
|
+
];
|
|
11
|
+
const componentMeta = {
|
|
12
|
+
title: 'Trepur Components/Rupert Bennett/Organisms/Nav',
|
|
13
|
+
component: Nav,
|
|
14
|
+
parameters: {
|
|
15
|
+
backgrounds: {
|
|
16
|
+
default: 'grey',
|
|
17
|
+
values: [
|
|
18
|
+
{
|
|
19
|
+
name: 'grey',
|
|
20
|
+
value: '#f3f3f3'
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
argTypes: Object.assign(Object.assign({}, idAndClassName), { navLinks: {
|
|
26
|
+
description: 'An array of nav links to display in the component',
|
|
27
|
+
table: {
|
|
28
|
+
type: { summary: 'array' }
|
|
29
|
+
}
|
|
30
|
+
}, asSideBar: {
|
|
31
|
+
type: { name: 'boolean', required: false },
|
|
32
|
+
description: 'Sets the expanding mechanism to work as a side bar on mobile',
|
|
33
|
+
table: {
|
|
34
|
+
type: { summary: 'boolean' }
|
|
35
|
+
}
|
|
36
|
+
}, dropdownNavHeight: {
|
|
37
|
+
type: { name: 'string', required: false },
|
|
38
|
+
description: 'The distance in which the dropdown should come on mobile',
|
|
39
|
+
table: {
|
|
40
|
+
type: { summary: 'string' }
|
|
41
|
+
}
|
|
42
|
+
}, logo: {
|
|
43
|
+
type: { name: 'string', required: false },
|
|
44
|
+
description: 'The logo to display on the component',
|
|
45
|
+
table: {
|
|
46
|
+
type: { summary: 'string' }
|
|
47
|
+
}
|
|
48
|
+
}, logoDarkTheme: {
|
|
49
|
+
type: { name: 'string', required: false },
|
|
50
|
+
description: 'An optional dark them logo for dark mode',
|
|
51
|
+
table: {
|
|
52
|
+
type: { summary: 'string' }
|
|
53
|
+
}
|
|
54
|
+
}, mobileLogo: {
|
|
55
|
+
type: { name: 'string', required: false },
|
|
56
|
+
description: 'An optional mobile logo for mobile devices',
|
|
57
|
+
table: {
|
|
58
|
+
type: { summary: 'string' }
|
|
59
|
+
}
|
|
60
|
+
}, mobileLogoDarkTheme: {
|
|
61
|
+
type: { name: 'string', required: false },
|
|
62
|
+
description: 'An optional dark them mobile logo for mobile dark mode',
|
|
63
|
+
table: {
|
|
64
|
+
type: { summary: 'string' }
|
|
65
|
+
}
|
|
66
|
+
}, logoLink: {
|
|
67
|
+
type: { name: 'string', required: false },
|
|
68
|
+
description: 'The link to navigate to when clicking on the logo',
|
|
69
|
+
table: {
|
|
70
|
+
type: { summary: 'string' }
|
|
71
|
+
}
|
|
72
|
+
}, mobileClasses: {
|
|
73
|
+
type: { name: 'string', required: false },
|
|
74
|
+
description: '',
|
|
75
|
+
table: {
|
|
76
|
+
type: { summary: 'string' }
|
|
77
|
+
}
|
|
78
|
+
}, fixedTop: {
|
|
79
|
+
type: { name: 'boolean', required: false },
|
|
80
|
+
description: 'Sets the header to fix at the top when true',
|
|
81
|
+
table: {
|
|
82
|
+
type: { summary: 'boolean' }
|
|
83
|
+
}
|
|
84
|
+
}, getNavStatus: {
|
|
85
|
+
type: { name: 'boolean', required: false },
|
|
86
|
+
description: 'Returns the status of the header, opened or closed in mobile',
|
|
87
|
+
table: {
|
|
88
|
+
type: { summary: 'function' }
|
|
89
|
+
}
|
|
90
|
+
}, theme: {
|
|
91
|
+
type: { name: 'string', required: false },
|
|
92
|
+
options: ['dark', 'light'],
|
|
93
|
+
description: 'The them to render the component in',
|
|
94
|
+
table: {
|
|
95
|
+
type: { summary: 'dark' },
|
|
96
|
+
defaultValue: { summary: 'dark' }
|
|
97
|
+
},
|
|
98
|
+
defaultValue: 'dark',
|
|
99
|
+
control: { type: 'radio' }
|
|
100
|
+
}, text: {
|
|
101
|
+
type: { name: 'string', required: false },
|
|
102
|
+
description: 'Text to display on the component',
|
|
103
|
+
table: {
|
|
104
|
+
type: { summary: 'string' }
|
|
105
|
+
}
|
|
106
|
+
}, textLink: {
|
|
107
|
+
type: { name: 'string', required: false },
|
|
108
|
+
description: 'A link to navigate to when clicking on the text in the component',
|
|
109
|
+
control: 'string',
|
|
110
|
+
table: {
|
|
111
|
+
category: ''
|
|
112
|
+
}
|
|
113
|
+
} }),
|
|
114
|
+
args: {
|
|
115
|
+
logoLink: '/',
|
|
116
|
+
navLinks,
|
|
117
|
+
asSideBar: true,
|
|
118
|
+
dropdownNavHeight: '80',
|
|
119
|
+
logo: logoImage,
|
|
120
|
+
logoDarkTheme,
|
|
121
|
+
mobileLogo: logoImage,
|
|
122
|
+
mobileLogoDarkTheme: logoDarkTheme,
|
|
123
|
+
fixedTop: true,
|
|
124
|
+
theme: 'dark',
|
|
125
|
+
text: 'rupertbennett.com',
|
|
126
|
+
getNavStatus: (status) => {
|
|
127
|
+
console.log(status ? 'open' : 'closed');
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
const Template = (args) => React.createElement(Nav, Object.assign({}, args));
|
|
132
|
+
export const _Nav = Template.bind({});
|
|
133
|
+
export default componentMeta;
|
|
134
|
+
//# sourceMappingURL=Nav.stories.js.map
|