diff --git a/doc/introduction/themes.md b/doc/introduction/themes.md index 5097aaaf..ef64f01d 100644 --- a/doc/introduction/themes.md +++ b/doc/introduction/themes.md @@ -7,8 +7,6 @@ All config values are defined in [`provider.tsx`](https://github.com/EscolaLMS/C ```js import ThemeTester from "../../src/styleguide/ThemeTester"; import ColorBox from "../../src/styleguide/ColorBox/ColorBox"; -import ImageModal from "../../src/styleguide/ImageModal"; -import img1 from "../../src/styleguide/ColorBox/ColorBox.png";
@@ -16,7 +14,5 @@ import img1 from "../../src/styleguide/ColorBox/ColorBox.png"; secondary
- - ; ``` diff --git a/src/components/atoms/AsideMenu/AsideMenu.md b/src/components/atoms/AsideMenu/AsideMenu.md index 30eafe6e..b6579fa0 100644 --- a/src/components/atoms/AsideMenu/AsideMenu.md +++ b/src/components/atoms/AsideMenu/AsideMenu.md @@ -1,6 +1,6 @@ ```js import { useState } from "react"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import img1 from "./AsideMenu.png"; import { Text } from "../../.."; import data from "./mock.json"; @@ -29,6 +29,5 @@ const [selected, setSelected] = useState( ))} - ; ``` diff --git a/src/components/atoms/Avatar/Avatar.md b/src/components/atoms/Avatar/Avatar.md index b8206d03..b0bd2e23 100644 --- a/src/components/atoms/Avatar/Avatar.md +++ b/src/components/atoms/Avatar/Avatar.md @@ -1,8 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Avatar.png"; -import img2 from "./AvatarExample.png"; import ThemeTester from "../../../styleguide/ThemeTester"; @@ -13,7 +10,5 @@ import ThemeTester from "../../../styleguide/ThemeTester"; - - ; ``` diff --git a/src/components/atoms/Badge/Badge.md b/src/components/atoms/Badge/Badge.md index a6525975..02d9a5bf 100644 --- a/src/components/atoms/Badge/Badge.md +++ b/src/components/atoms/Badge/Badge.md @@ -1,6 +1,5 @@ ```js -import img1 from "./Badge.png"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; @@ -9,6 +8,5 @@ import { ImageModal, ThemeTester } from "../../../styleguide"; Crazy Exclusive - ; ``` diff --git a/src/components/atoms/BreadCrumbs/BreadCrumbs.md b/src/components/atoms/BreadCrumbs/BreadCrumbs.md index 6a57834c..4716483f 100644 --- a/src/components/atoms/BreadCrumbs/BreadCrumbs.md +++ b/src/components/atoms/BreadCrumbs/BreadCrumbs.md @@ -1,5 +1,5 @@ ```jsx -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { Link } from "../../../"; diff --git a/src/components/atoms/Button/Button.md b/src/components/atoms/Button/Button.md index 0044408b..8d646058 100644 --- a/src/components/atoms/Button/Button.md +++ b/src/components/atoms/Button/Button.md @@ -3,8 +3,6 @@ React component example: ### Default themes ```js -import img1 from "./Button.png"; -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; import { useTranslation } from "react-i18next"; @@ -64,7 +62,5 @@ const Icon = () => { - - ; ``` diff --git a/src/components/atoms/Card/Card.md b/src/components/atoms/Card/Card.md index 35f8168e..6dfbefed 100644 --- a/src/components/atoms/Card/Card.md +++ b/src/components/atoms/Card/Card.md @@ -6,8 +6,6 @@ import { IconTitle } from "../IconTitle/IconTitle"; import { Button } from "../Button/Button"; import { useState } from "react"; import { CourseCard } from "../../molecules/CourseCard/CourseCard"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Card.png"; @@ -66,6 +64,5 @@ import img1 from "./Card.png"; /> - ; ``` diff --git a/src/components/atoms/CourseProgress/CourseProgress.md b/src/components/atoms/CourseProgress/CourseProgress.md index 37ff8f25..930fdcf2 100644 --- a/src/components/atoms/CourseProgress/CourseProgress.md +++ b/src/components/atoms/CourseProgress/CourseProgress.md @@ -1,8 +1,6 @@ ```js import { useState } from "react"; import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./CourseProgress.png"; import ThemeTester from "../../../styleguide/ThemeTester"; import Button from "../Button/Button"; @@ -35,6 +33,5 @@ const Icon1 = () => ( Click to generate random progress - ; ``` diff --git a/src/components/atoms/Download/Download.md b/src/components/atoms/Download/Download.md index 4a674a37..80d905a2 100644 --- a/src/components/atoms/Download/Download.md +++ b/src/components/atoms/Download/Download.md @@ -6,8 +6,6 @@ import Download from "./Download"; import themes from "../../../theme"; import Title from "../../atoms/Typography/Title"; import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Download.png"; @@ -21,7 +19,5 @@ import img1 from "./Download.png"; fileName={Styled Long file name with extension.pdf} /> - - ; ``` diff --git a/src/components/atoms/IconText/IconText.md b/src/components/atoms/IconText/IconText.md index 68a3a751..6ad37aa4 100644 --- a/src/components/atoms/IconText/IconText.md +++ b/src/components/atoms/IconText/IconText.md @@ -1,7 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./IconText.png"; import ThemeTester from "../../../styleguide/ThemeTester"; const Icon1 = () => ( @@ -15,7 +13,5 @@ const Icon1 = () => ( } text={"My example text"} /> } text={"My example text"} /> - - ; ``` diff --git a/src/components/atoms/IconTitle/IconTitle.md b/src/components/atoms/IconTitle/IconTitle.md index 44bc6722..e4fdf820 100644 --- a/src/components/atoms/IconTitle/IconTitle.md +++ b/src/components/atoms/IconTitle/IconTitle.md @@ -1,7 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./IconTitle.png"; import ThemeTester from "../../../styleguide/ThemeTester"; const Icon1 = () => ( @@ -37,7 +35,5 @@ const Icon1 = () => ( icon={} /> - - ; ``` diff --git a/src/components/atoms/Input/Input.md b/src/components/atoms/Input/Input.md index 9d3cf986..86f74226 100644 --- a/src/components/atoms/Input/Input.md +++ b/src/components/atoms/Input/Input.md @@ -1,8 +1,6 @@ ```js import { useState } from "react"; import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Input.png"; import ThemeTester from "../../../styleguide/ThemeTester"; const [text, setText] = useState("lorem ipsum"); @@ -84,6 +82,5 @@ const [texts, setTexts] = useState({ /> - ; ``` diff --git a/src/components/atoms/Interval/Interval.md b/src/components/atoms/Interval/Interval.md index 494470b7..8dec1621 100644 --- a/src/components/atoms/Interval/Interval.md +++ b/src/components/atoms/Interval/Interval.md @@ -1,6 +1,5 @@ ```js import img1 from "./Interval.png"; -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; @@ -12,6 +11,5 @@ import ThemeTester from "../../../styleguide/ThemeTester"; - ; ``` diff --git a/src/components/atoms/Link/Link.md b/src/components/atoms/Link/Link.md index 06619bb2..3bc4b691 100644 --- a/src/components/atoms/Link/Link.md +++ b/src/components/atoms/Link/Link.md @@ -1,7 +1,5 @@ ```js import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Link.png"; <> @@ -15,6 +13,5 @@ import img1 from "./Link.png"; Onet - ; ``` diff --git a/src/components/atoms/Logo/Logo.md b/src/components/atoms/Logo/Logo.md index fe01d913..4c24761e 100644 --- a/src/components/atoms/Logo/Logo.md +++ b/src/components/atoms/Logo/Logo.md @@ -1,7 +1,4 @@ ```js -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Logo.png"; -import img2 from "./Logo-2.png"; import logo1 from "./logo-placeholder.png"; import logo2 from "./logo-placeholder2.png"; import Text from "../Typography/Text"; @@ -24,6 +21,5 @@ import ThemeTester from "../../../styleguide/ThemeTester"; - ; ``` diff --git a/src/components/atoms/Modal/Modal.md b/src/components/atoms/Modal/Modal.md index 7167fa48..00f02260 100644 --- a/src/components/atoms/Modal/Modal.md +++ b/src/components/atoms/Modal/Modal.md @@ -1,7 +1,6 @@ ```js import { useState } from "react"; -import { ImageModal, ThemeTester } from "../../../styleguide"; -import img1 from "./Modal.png"; +import { ThemeTester } from "../../../styleguide"; import { Button, Title, Text } from "../../.."; const ModalWrapper = () => { @@ -40,7 +39,5 @@ const ModalWrapper = () => { - - ; ``` diff --git a/src/components/atoms/Note/Note.md b/src/components/atoms/Note/Note.md index 4ef04e5f..effa20bb 100644 --- a/src/components/atoms/Note/Note.md +++ b/src/components/atoms/Note/Note.md @@ -1,6 +1,4 @@ ```js -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./note.png"; import ThemeTester from "../../../styleguide/ThemeTester"; @@ -15,6 +13,5 @@ import ThemeTester from "../../../styleguide/ThemeTester"; color={"#09c3bc"} /> - ; ``` diff --git a/src/components/atoms/NoteAction/NoteAction.md b/src/components/atoms/NoteAction/NoteAction.md index 0427eb2b..0fe30748 100644 --- a/src/components/atoms/NoteAction/NoteAction.md +++ b/src/components/atoms/NoteAction/NoteAction.md @@ -1,5 +1,5 @@ ```js -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { Link, Title, Text } from "../../../"; const DownloadIcon = () => ( dummy label} defaultChecked /> - - ; ``` diff --git a/src/components/atoms/Option/Radio.md b/src/components/atoms/Option/Radio.md index 02bd7f48..598ba985 100644 --- a/src/components/atoms/Option/Radio.md +++ b/src/components/atoms/Option/Radio.md @@ -1,8 +1,6 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import Text from "../Typography/Text"; -import img1 from "./Option.png"; import ThemeTester from "../../../styleguide/ThemeTester"; import { getUniqueId } from "../../../utils/utils"; @@ -33,7 +31,5 @@ import { getUniqueId } from "../../../utils/utils"; /> dummy label} /> - - ; ``` diff --git a/src/components/atoms/PricingCard/PricingCard.md b/src/components/atoms/PricingCard/PricingCard.md index 8c862020..2d4b6b59 100644 --- a/src/components/atoms/PricingCard/PricingCard.md +++ b/src/components/atoms/PricingCard/PricingCard.md @@ -1,7 +1,7 @@ ```js import { useState } from "react"; import { Row, Col } from "react-grid-system"; -import { ThemeTester, ImageModal } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { IconText, Button, CourseProgress, Link, Text } from "../../.."; import { Title } from "../../atoms/Typography/Title"; import { MarkdownRenderer } from "../../molecules/MarkdownRenderer/MarkdownRenderer"; @@ -300,7 +300,5 @@ const props = { - - ; ``` diff --git a/src/components/atoms/ProgressBar/ProgressBar.md b/src/components/atoms/ProgressBar/ProgressBar.md index 0e526a77..62432a6c 100644 --- a/src/components/atoms/ProgressBar/ProgressBar.md +++ b/src/components/atoms/ProgressBar/ProgressBar.md @@ -1,8 +1,6 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; import { useState } from "react"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./ProgressBar.png"; import ThemeTester from "../../../styleguide/ThemeTester"; import Button from "../Button/Button"; @@ -41,6 +39,5 @@ const setRandomProgresses = () => { Click to generate random progress - ; ``` diff --git a/src/components/atoms/Rating/Rating.md b/src/components/atoms/Rating/Rating.md index 662931c8..a73a6306 100644 --- a/src/components/atoms/Rating/Rating.md +++ b/src/components/atoms/Rating/Rating.md @@ -1,6 +1,5 @@ ```js import img1 from "./Rating.png"; -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; @@ -13,6 +12,5 @@ import ThemeTester from "../../../styleguide/ThemeTester"; - ; ``` diff --git a/src/components/atoms/Tabs/Tabs.md b/src/components/atoms/Tabs/Tabs.md index e26b8efa..0363f2f9 100644 --- a/src/components/atoms/Tabs/Tabs.md +++ b/src/components/atoms/Tabs/Tabs.md @@ -1,8 +1,6 @@ ```js import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; import { Text } from "../../../"; -import img1 from "./Tabs.png"; const props = { tabs: [ @@ -44,6 +42,5 @@ const props = { - ; ``` diff --git a/src/components/atoms/Tag/Tag.md b/src/components/atoms/Tag/Tag.md index 933b7cfc..4054d759 100644 --- a/src/components/atoms/Tag/Tag.md +++ b/src/components/atoms/Tag/Tag.md @@ -1,6 +1,5 @@ ```js -import { ThemeTester, ImageModal } from "../../../styleguide"; -import img1 from "./Tags.png"; +import { ThemeTester } from "../../../styleguide"; <> @@ -9,6 +8,5 @@ import img1 from "./Tags.png"; nowość console.log("click")}>Clickable tag - ; ``` diff --git a/src/components/atoms/TextArea/TextArea.md b/src/components/atoms/TextArea/TextArea.md index bc67ef0f..dd906252 100644 --- a/src/components/atoms/TextArea/TextArea.md +++ b/src/components/atoms/TextArea/TextArea.md @@ -1,7 +1,5 @@ ```js import { useState } from "react"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./TextArea.png"; import ThemeTester from "../../../styleguide/ThemeTester"; const [text, setText] = useState("lorem ipsum"); @@ -77,6 +75,5 @@ const [texts, setTexts] = useState({ } /> - ; ``` diff --git a/src/components/atoms/Typography/Text.md b/src/components/atoms/Typography/Text.md index a9eb8b95..b501791a 100644 --- a/src/components/atoms/Typography/Text.md +++ b/src/components/atoms/Typography/Text.md @@ -5,8 +5,6 @@ React component example: ```js import themes from "../../../theme"; import { DefaultTheme, ThemeProvider } from "styled-components"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Title.png"; import Title from "./Title"; import ThemeTester from "../../../styleguide/ThemeTester"; @@ -38,7 +36,5 @@ import ThemeTester from "../../../styleguide/ThemeTester"; dlatego potrzebny będzie fokus na konkretny target. - - ; ``` diff --git a/src/components/atoms/Typography/Title.md b/src/components/atoms/Typography/Title.md index d519c24b..85e77229 100644 --- a/src/components/atoms/Typography/Title.md +++ b/src/components/atoms/Typography/Title.md @@ -1,8 +1,6 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; -import img1 from "./Title.png"; @@ -19,6 +17,5 @@ import img1 from "./Title.png"; This is title h4. Lorem ipsum This is title h5. Lorem ipsum - ; ``` diff --git a/src/components/molecules/Banner/Banner.md b/src/components/molecules/Banner/Banner.md index fb882fb0..76bde70c 100644 --- a/src/components/molecules/Banner/Banner.md +++ b/src/components/molecules/Banner/Banner.md @@ -1,5 +1,4 @@ ```js -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; import img1 from "./Banner.png"; import img2 from "./BannerIllustration.png"; @@ -96,6 +95,5 @@ const props = { /> - ; ``` diff --git a/src/components/molecules/CartCard/CartCard.md b/src/components/molecules/CartCard/CartCard.md index 1265d25c..104f5761 100644 --- a/src/components/molecules/CartCard/CartCard.md +++ b/src/components/molecules/CartCard/CartCard.md @@ -1,6 +1,5 @@ ```js import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; import { Text } from "../../atoms/Typography/Text"; import { MarkdownRenderer } from "../../molecules/MarkdownRenderer/MarkdownRenderer"; import img1 from "./CartCard.png"; @@ -133,6 +132,5 @@ const cartCardContainerStyle = { /> - ; ``` diff --git a/src/components/molecules/Categories/Categories.md b/src/components/molecules/Categories/Categories.md index bc1c14f9..7101b696 100644 --- a/src/components/molecules/Categories/Categories.md +++ b/src/components/molecules/Categories/Categories.md @@ -1,11 +1,9 @@ ```js -import { ThemeTester, ImageModal } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { useState } from "react"; import { Text, Dropdown } from "../../../"; import { Row, Col } from "react-grid-system"; -import img1 from "./Categories.png"; -import img2 from "./Categories-2.png"; import json from "./mock.json"; const [selected, setSelected] = useState([4, 5]); @@ -47,6 +45,5 @@ const [selected, setSelected] = useState([4, 5]); /> - ; ``` diff --git a/src/components/molecules/CategoryCard/CategoryCard.md b/src/components/molecules/CategoryCard/CategoryCard.md index 794a9c92..864adc8c 100644 --- a/src/components/molecules/CategoryCard/CategoryCard.md +++ b/src/components/molecules/CategoryCard/CategoryCard.md @@ -1,10 +1,8 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import IconText from "../../../components/atoms/IconText/IconText"; import { Row, Col } from "react-grid-system"; import ThemeTester from "../../../styleguide/ThemeTester"; -import img1 from "./CategoryCard.png"; const IconTag = () => { return ( @@ -52,7 +50,7 @@ const IconBook = () => { const props = { icon: , - title: "Marketing 
i sprzedaż", + title: "Marketing i sprzedaż", subtitle: } text="Marketing i sprzedaż" />, buttonText: "Zobacz więcej", variant: "gradient", @@ -113,7 +111,5 @@ const props = { - - ; ``` diff --git a/src/components/molecules/Certificate/Certificate.md b/src/components/molecules/Certificate/Certificate.md index 47ea8bb2..9c2ef8cd 100644 --- a/src/components/molecules/Certificate/Certificate.md +++ b/src/components/molecules/Certificate/Certificate.md @@ -1,6 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; import img1 from "./Certificate.png"; import img2 from "./CertificateExample.png"; @@ -50,6 +49,5 @@ const props = { /> - ; ``` diff --git a/src/components/molecules/CheckoutCard/CheckoutCard.md b/src/components/molecules/CheckoutCard/CheckoutCard.md index 065b105a..a5163b9e 100644 --- a/src/components/molecules/CheckoutCard/CheckoutCard.md +++ b/src/components/molecules/CheckoutCard/CheckoutCard.md @@ -1,6 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; import IconText from "../../../components/atoms/IconText/IconText"; import img1 from "./CheckoutCard.png"; @@ -112,6 +111,5 @@ const props = { /> - ; ``` diff --git a/src/components/molecules/CourseCard/CourseCard.md b/src/components/molecules/CourseCard/CourseCard.md index ec6e958f..b29a1a3d 100644 --- a/src/components/molecules/CourseCard/CourseCard.md +++ b/src/components/molecules/CourseCard/CourseCard.md @@ -1,6 +1,6 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import { ThemeTester, ImageModal } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { Title } from "../../atoms/Typography/Title"; import img1 from "./CourseCard.png"; import img2 from "./CourseCard-2.png"; @@ -255,6 +255,5 @@ const Icon1 = () => ( - ; ``` diff --git a/src/components/molecules/CourseTopNav/CourseTopNav.md b/src/components/molecules/CourseTopNav/CourseTopNav.md index c7214cd8..2a93b009 100644 --- a/src/components/molecules/CourseTopNav/CourseTopNav.md +++ b/src/components/molecules/CourseTopNav/CourseTopNav.md @@ -1,6 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import img1 from "./CourseTopNav.png"; import ThemeTester from "../../../styleguide/ThemeTester"; @@ -82,6 +81,5 @@ const onBookmarkClick = () => console.log("onBookmarkClick"); /> - ; ``` diff --git a/src/components/molecules/Description/Description.md b/src/components/molecules/Description/Description.md index bd46b793..95438275 100644 --- a/src/components/molecules/Description/Description.md +++ b/src/components/molecules/Description/Description.md @@ -1,15 +1,12 @@ ```js -import {GlobalThemeProvider} from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; +import { GlobalThemeProvider } from "../../../theme/provider"; import ThemeTester from "../../../styleguide/ThemeTester"; -import img1 from "./Description.png"; - - Finanse - Finanse - Finanse - - + + Finanse + Finanse + Finanse + ; ``` diff --git a/src/components/molecules/Downloads/Downloads.md b/src/components/molecules/Downloads/Downloads.md index 0dc55692..216ad047 100644 --- a/src/components/molecules/Downloads/Downloads.md +++ b/src/components/molecules/Downloads/Downloads.md @@ -5,9 +5,7 @@ import { ThemeProvider } from "styled-components"; import themes from "../../../theme"; import Title from "../../atoms/Typography/Title"; import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; import Download from "../../atoms/Download/Download"; -import img1 from "./Downloads.png"; @@ -15,32 +13,30 @@ import img1 from "./Downloads.png"; title={"Downloads"} subtitle={"Subtitle"} downloads={[ - { - href: "https://www.google.com", - }, - { - fileName: "File name", - href: "https://www.google.com", - }, - { - fileName: "File name", - href: "https://www.google.com", - }, - { - href: "https://www.google.com", - }, - { - fileName: "File name", - href: "https://www.google.com", - }, - { - fileName: "File name", - href: "https://www.google.com", - } + { + href: "https://www.google.com", + }, + { + fileName: "File name", + href: "https://www.google.com", + }, + { + fileName: "File name", + href: "https://www.google.com", + }, + { + href: "https://www.google.com", + }, + { + fileName: "File name", + href: "https://www.google.com", + }, + { + fileName: "File name", + href: "https://www.google.com", + }, ]} /> - - ; ``` diff --git a/src/components/molecules/Dropdown/Dropdown.md b/src/components/molecules/Dropdown/Dropdown.md index 7acf43e2..7f8ebc34 100644 --- a/src/components/molecules/Dropdown/Dropdown.md +++ b/src/components/molecules/Dropdown/Dropdown.md @@ -1,8 +1,5 @@ ```js import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Dropdown1.png"; -import img2 from "./Dropdown2.png"; - ; ``` diff --git a/src/components/molecules/ImageBubble/ImageBubble.md b/src/components/molecules/ImageBubble/ImageBubble.md index 91d80696..9d512333 100644 --- a/src/components/molecules/ImageBubble/ImageBubble.md +++ b/src/components/molecules/ImageBubble/ImageBubble.md @@ -1,5 +1,5 @@ ```js -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { Badge, CourseCard } from "../../../"; import img2 from "./../CourseCard/CourseCard-2.png"; @@ -53,7 +53,5 @@ import img1 from "./ImageBubble.png"; - - ; ``` diff --git a/src/components/molecules/LabelListItem/LabelListItem.md b/src/components/molecules/LabelListItem/LabelListItem.md index 0702fd0f..49f991bb 100644 --- a/src/components/molecules/LabelListItem/LabelListItem.md +++ b/src/components/molecules/LabelListItem/LabelListItem.md @@ -1,7 +1,5 @@ ```js import { Row, Col } from "react-grid-system"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./LabelListItem.png"; import ThemeTester from "../../../styleguide/ThemeTester"; const Icon1 = () => ( @@ -134,6 +132,5 @@ const Icon3 = () => ( - ; ``` diff --git a/src/components/molecules/Navigation/Navigation.md b/src/components/molecules/Navigation/Navigation.md index 12d153a5..7e744e60 100644 --- a/src/components/molecules/Navigation/Navigation.md +++ b/src/components/molecules/Navigation/Navigation.md @@ -1,6 +1,6 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import img1 from "./Navigation.png"; import logoImage from "./logo-placeholder.png"; import { useState } from "react"; @@ -112,6 +112,5 @@ const menuItems = [ } /> - ; ``` diff --git a/src/components/molecules/Notes/Notes.md b/src/components/molecules/Notes/Notes.md index 36af5f28..a6048fb1 100644 --- a/src/components/molecules/Notes/Notes.md +++ b/src/components/molecules/Notes/Notes.md @@ -1,6 +1,5 @@ ```js import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; import img1 from "./Notes.png"; import { Title } from "../../atoms/Typography/Title"; const noteGroups = [ @@ -54,6 +53,5 @@ const noteGroups = [ /> - ; ``` diff --git a/src/components/molecules/Notification/Notification.md b/src/components/molecules/Notification/Notification.md index d5aab100..9cf19bce 100644 --- a/src/components/molecules/Notification/Notification.md +++ b/src/components/molecules/Notification/Notification.md @@ -1,6 +1,5 @@ ```js import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; import img from "./Notification.png"; import Notification from "./Notification"; @@ -19,6 +18,5 @@ import Notification from "./Notification"; maxLengthDesc={60} /> - ; ``` diff --git a/src/components/molecules/Notifications/Notifications.md b/src/components/molecules/Notifications/Notifications.md index a3663c36..9908ce5d 100644 --- a/src/components/molecules/Notifications/Notifications.md +++ b/src/components/molecules/Notifications/Notifications.md @@ -1,7 +1,5 @@ ```js import ThemeTester from "../../../styleguide/ThemeTester"; -import ImageModal from "../../../styleguide/ImageModal"; -import img1 from "./Notifications.png"; import Notifications from "./Notifications"; @@ -53,7 +51,6 @@ import Notifications from "./Notifications"; showAllLink="/" /> - ; ``` diff --git a/src/components/molecules/Orders/Orders.md b/src/components/molecules/Orders/Orders.md index 59b4632e..e951cb0f 100644 --- a/src/components/molecules/Orders/Orders.md +++ b/src/components/molecules/Orders/Orders.md @@ -1,7 +1,7 @@ TODO: style me ```jsx -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { Button } from "../../../"; const data = [ diff --git a/src/components/molecules/QuizCta/QuizCta.md b/src/components/molecules/QuizCta/QuizCta.md index 1d2c16c4..4665e47e 100644 --- a/src/components/molecules/QuizCta/QuizCta.md +++ b/src/components/molecules/QuizCta/QuizCta.md @@ -1,8 +1,6 @@ ```js -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; import Text from "../../atoms/Typography/Text"; -import img1 from "./QuizCta.png"; const props = { title: "Szybki Quiz", @@ -46,6 +44,5 @@ const props = { /> - ; ``` diff --git a/src/components/molecules/Rate/Rate.md b/src/components/molecules/Rate/Rate.md index c583457d..80b8a0c6 100644 --- a/src/components/molecules/Rate/Rate.md +++ b/src/components/molecules/Rate/Rate.md @@ -1,11 +1,7 @@ ```js -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; -import img1 from "./rate1.png"; -import img2 from "./rate2.png"; console.log("Rate: ", rate)} /> - ; ``` diff --git a/src/components/molecules/Ratings/Ratings.md b/src/components/molecules/Ratings/Ratings.md index d4c12322..03622911 100644 --- a/src/components/molecules/Ratings/Ratings.md +++ b/src/components/molecules/Ratings/Ratings.md @@ -1,7 +1,5 @@ ```js -import img1 from "./Ratings.png"; -import img2 from "./Ratings-2.png"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import mockApi from "./mock.json"; import { Title } from "../../atoms/Typography/Title"; @@ -27,6 +25,5 @@ const ratingsProps = { - ; ``` diff --git a/src/components/molecules/Search/Search.md b/src/components/molecules/Search/Search.md index 52e0091c..ac08ca97 100644 --- a/src/components/molecules/Search/Search.md +++ b/src/components/molecules/Search/Search.md @@ -1,5 +1,5 @@ ```js -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { useState } from "react"; import img1 from "./Search.png"; @@ -36,6 +36,5 @@ const onChange = (value) => {
basketball
- ; ``` diff --git a/src/components/molecules/Steps/Steps.md b/src/components/molecules/Steps/Steps.md index 4a8980a2..817be712 100644 --- a/src/components/molecules/Steps/Steps.md +++ b/src/components/molecules/Steps/Steps.md @@ -1,8 +1,6 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import ThemeTester from "../../../styleguide/ThemeTester"; -import img1 from "./Steps.png"; @@ -28,7 +26,5 @@ import img1 from "./Steps.png"; checked={2} /> - - ; ``` diff --git a/src/components/molecules/Tags/Tags.md b/src/components/molecules/Tags/Tags.md index 72655317..389b0037 100644 --- a/src/components/molecules/Tags/Tags.md +++ b/src/components/molecules/Tags/Tags.md @@ -1,12 +1,12 @@ ```js -import { ThemeTester, ImageModal } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { useState } from "react"; import { Text, Dropdown } from "../../../"; import { Row, Col } from "react-grid-system"; import json from "./mock.json"; -const [selected, setSelected] = useState(['Animacja', 'Finances']); +const [selected, setSelected] = useState(["Animacja", "Finances"]); diff --git a/src/components/molecules/Tutor/Tutor.md b/src/components/molecules/Tutor/Tutor.md index 7cf27363..f9469035 100644 --- a/src/components/molecules/Tutor/Tutor.md +++ b/src/components/molecules/Tutor/Tutor.md @@ -1,6 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import img1 from "./Tutor.png"; import ThemeTester from "../../../styleguide/ThemeTester"; import avatar from "./TutorExampleAvatar.png"; @@ -46,6 +45,5 @@ import { Title } from "../../atoms/Typography/Title"; mobile /> - ; ``` diff --git a/src/components/organisms/CourseAgenda/CourseAgenda.md b/src/components/organisms/CourseAgenda/CourseAgenda.md index d31634fa..136362f5 100644 --- a/src/components/organisms/CourseAgenda/CourseAgenda.md +++ b/src/components/organisms/CourseAgenda/CourseAgenda.md @@ -1,7 +1,7 @@ ```js import img1 from "./CourseAgenda.png"; import { useState, useCallback, useEffect } from "react"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { Button } from "../../../"; import data from "./mock.json"; import "../../../styleguide/i18n.ts"; @@ -111,6 +111,5 @@ useEffect(() => { /> - ; ``` diff --git a/src/components/organisms/CourseProgram/CourseProgram.md b/src/components/organisms/CourseProgram/CourseProgram.md index d1d16227..3238f9fb 100644 --- a/src/components/organisms/CourseProgram/CourseProgram.md +++ b/src/components/organisms/CourseProgram/CourseProgram.md @@ -1,6 +1,6 @@ ```js import { useState } from "react"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { Button } from "../../../"; import data from "./mock.json"; import "../../../styleguide/i18n.ts"; diff --git a/src/components/organisms/LoginForm/LoginForm.md b/src/components/organisms/LoginForm/LoginForm.md index 548d4901..40ca4685 100644 --- a/src/components/organisms/LoginForm/LoginForm.md +++ b/src/components/organisms/LoginForm/LoginForm.md @@ -1,6 +1,6 @@ ```js import img1 from "./LoginForm.png"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; import { Text } from "../../../"; @@ -20,7 +20,5 @@ import { Text } from "../../../"; - - ; ``` diff --git a/src/components/organisms/MyProfileForm/MyProfileForm.md b/src/components/organisms/MyProfileForm/MyProfileForm.md index 9e6e9f14..399cd36c 100644 --- a/src/components/organisms/MyProfileForm/MyProfileForm.md +++ b/src/components/organisms/MyProfileForm/MyProfileForm.md @@ -1,6 +1,6 @@ ```js import img1 from "./MyProfile.png"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; import { Text } from "../../../"; import Authbtn from "../../../utils/components/authbtn"; @@ -25,7 +25,5 @@ import Authbtn from "../../../utils/components/authbtn"; - - ; ``` diff --git a/src/components/organisms/NoteEditor/NoteEditor.md b/src/components/organisms/NoteEditor/NoteEditor.md index e7a42a88..11574ff5 100644 --- a/src/components/organisms/NoteEditor/NoteEditor.md +++ b/src/components/organisms/NoteEditor/NoteEditor.md @@ -1,5 +1,4 @@ ```js -import ImageModal from "../../../styleguide/ImageModal"; import img1 from "./NoteEditor.png"; import ThemeTester from "../../../styleguide/ThemeTester"; @@ -10,6 +9,5 @@ import ThemeTester from "../../../styleguide/ThemeTester"; onError={() => console.log("Error")} /> - ; ``` diff --git a/src/components/organisms/RegisterForm/RegisterForm.md b/src/components/organisms/RegisterForm/RegisterForm.md index 612142e1..f5f8f1d3 100644 --- a/src/components/organisms/RegisterForm/RegisterForm.md +++ b/src/components/organisms/RegisterForm/RegisterForm.md @@ -1,6 +1,6 @@ ```js import img1 from "./LoginForm.png"; -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; import { Text } from "../../../"; @@ -31,7 +31,5 @@ const fieldLabels = { - - ; ``` diff --git a/src/components/organisms/ResetPasswordForm/ResetPasswordForm.md b/src/components/organisms/ResetPasswordForm/ResetPasswordForm.md index ffe09611..2687f73f 100644 --- a/src/components/organisms/ResetPasswordForm/ResetPasswordForm.md +++ b/src/components/organisms/ResetPasswordForm/ResetPasswordForm.md @@ -1,7 +1,6 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; import { ThemeTester } from "../../../styleguide"; -import ImageModal from "../../../styleguide/ImageModal"; import img1 from "./LoginForm.png"; import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; @@ -25,6 +24,5 @@ import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; /> - ; ``` diff --git a/src/components/organisms/SearchCourses/SearchCourses.md b/src/components/organisms/SearchCourses/SearchCourses.md index 054dc002..1eb1c35c 100644 --- a/src/components/organisms/SearchCourses/SearchCourses.md +++ b/src/components/organisms/SearchCourses/SearchCourses.md @@ -1,5 +1,5 @@ ```jsx -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; diff --git a/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md b/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md index cc1c3463..27beb524 100644 --- a/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md +++ b/src/components/players/AudioVideoPlayer/AudioVideoPlayer.md @@ -1,5 +1,5 @@ ```js -import { ImageModal, ThemeTester } from "../../../styleguide"; +import { ThemeTester } from "../../../styleguide"; import img1 from "./VideoPlayer.png"; import { Title, Text, Badge, Link } from "../../../"; import img2 from "./VideoPlayerPoster.png"; @@ -85,7 +85,5 @@ import img2 from "./VideoPlayerPoster.png"; - - ; ``` diff --git a/src/components/players/H5Player/H5Player.md b/src/components/players/H5Player/H5Player.md index a2e307a0..28b1dfdb 100644 --- a/src/components/players/H5Player/H5Player.md +++ b/src/components/players/H5Player/H5Player.md @@ -1,7 +1,6 @@ ```js import { useState, useEffect } from "react"; import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; import { getH5p } from "@escolalms/sdk/lib/services/h5p"; diff --git a/src/components/players/ImagePlayer/ImagePlayer.md b/src/components/players/ImagePlayer/ImagePlayer.md index cef80b27..1adfd44f 100644 --- a/src/components/players/ImagePlayer/ImagePlayer.md +++ b/src/components/players/ImagePlayer/ImagePlayer.md @@ -1,5 +1,4 @@ ```js -import ImageModal from "../../../styleguide/ImageModal"; import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; import ThemeTester from "../../../styleguide/ThemeTester"; diff --git a/src/components/players/PdfPlayer/PdfPlayer.md b/src/components/players/PdfPlayer/PdfPlayer.md index 34143c20..d611f9a0 100644 --- a/src/components/players/PdfPlayer/PdfPlayer.md +++ b/src/components/players/PdfPlayer/PdfPlayer.md @@ -1,6 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context"; import ThemeTester from "../../../styleguide/ThemeTester"; import Authbtn from "../../../utils/components/authbtn"; diff --git a/src/styleguide/ColorBox/ColorBox.md b/src/styleguide/ColorBox/ColorBox.md index daa9b8c3..a7314315 100644 --- a/src/styleguide/ColorBox/ColorBox.md +++ b/src/styleguide/ColorBox/ColorBox.md @@ -6,7 +6,6 @@ import ThemeTester from "../../../styleguide/ThemeTester"; import themes from "../../../theme"; import { DefaultTheme, ThemeProvider } from "styled-components"; import img1 from "./ColorBox.png"; -import ImageModal from "../../../styleguide/ImageModal"; import Title from "../Typography/Title"; @@ -17,7 +16,5 @@ import Title from "../Typography/Title"; secondary - - ; ``` diff --git a/src/styleguide/ContrastBox/ContrastBox.md b/src/styleguide/ContrastBox/ContrastBox.md index 48a7842a..c6015a7e 100644 --- a/src/styleguide/ContrastBox/ContrastBox.md +++ b/src/styleguide/ContrastBox/ContrastBox.md @@ -1,6 +1,5 @@ ```js import { GlobalThemeProvider } from "../../../theme/provider"; -import ImageModal from "../../../styleguide/ImageModal"; diff --git a/src/styleguide/ImageModal.tsx b/src/styleguide/ImageModal.tsx deleted file mode 100644 index 71242369..00000000 --- a/src/styleguide/ImageModal.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useState } from "react"; - -import Button from "../components/atoms/Button/Button"; -import { GlobalThemeProvider } from "../theme/provider"; - -export const ImageModal: React.FC<{ - children?: React.ReactNode; - images: string[]; -}> = ({ children, images }) => { - const [isOpen, setIsOpen] = useState(false); - - return ( -
- - - - {isOpen && ( -
setIsOpen((prev) => !prev)} - onKeyDown={(e) => e.key === "Enter" && setIsOpen((prev) => !prev)} - > - {images.map((img) => ( -
- Preview -
- ))} -
- )} - {children} -
- ); -}; - -export default ImageModal; diff --git a/src/styleguide/index.tsx b/src/styleguide/index.tsx index 63035671..43d1a429 100644 --- a/src/styleguide/index.tsx +++ b/src/styleguide/index.tsx @@ -1,7 +1,6 @@ export { default as ColorBox } from "./ColorBox/ColorBox"; export { default as ContrastBox } from "./ContrastBox/ContrastBox"; export { default as i18n } from "./i18n"; -export { default as ImageModal } from "./ImageModal"; export { default as Logo } from "./Logo"; export { default as ThemeCustomizer } from "./ThemeCustomizer"; export { default as ThemeTester } from "./ThemeTester";