image preview remove

doc/introduction/themes.md

@@ -7,16 +7,12 @@ 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";
 <React.Fragment>
   <ThemeTester>
     <div style={{ display: "flex" }}>
       <ColorBox mode="primary">primary</ColorBox>
       <ColorBox mode="secondary">secondary</ColorBox>
     </div>
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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(
       ))}
     </nav>
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
 
 <React.Fragment>
@@ -13,7 +10,5 @@ import ThemeTester from "../../../styleguide/ThemeTester";
     <Avatar src={img2} alt={"custom alt"} size={"small"} />
     <Avatar src={img2} alt={"custom alt"} size={"extraSmall"} />
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
 
 <React.Fragment>
   <ThemeTester>
@@ -9,6 +8,5 @@ import { ImageModal, ThemeTester } from "../../../styleguide";
     <Badge>Crazy </Badge>
     <Badge>Exclusive </Badge>
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

src/components/atoms/BreadCrumbs/BreadCrumbs.md

@@ -1,5 +1,5 @@
 ```jsx
-import { ImageModal, ThemeTester } from "../../../styleguide";
+import { ThemeTester } from "../../../styleguide";
 
 import { Link } from "../../../";
 

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 = () => {
       <Icon />
     </Button>
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
 
 <React.Fragment>
   <ThemeTester flexDirection="column">
@@ -66,6 +64,5 @@ import img1 from "./Card.png";
       />
     </div>
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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
     </Button>
   </GlobalThemeProvider>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
 
 <React.Fragment>
   <ThemeTester childrenListStyle={{ display: "block" }}>
@@ -21,7 +19,5 @@ import img1 from "./Download.png";
       fileName={<strong>Styled Long file name with extension.pdf</strong>}
     />
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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 = () => (
     <IconText icon={<Icon1 />} text={"My example text"} />
     <IconText icon={<Icon1 />} text={"My example text"} />
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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={<Icon1 />}
     />
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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({
       />
     </div>
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
 
 <React.Fragment>
@@ -12,6 +11,5 @@ import ThemeTester from "../../../styleguide/ThemeTester";
     <Interval current={5} max={100} />
     <Interval current={0} max={100} />
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
 
 <>
   <ThemeTester>
@@ -15,6 +13,5 @@ import img1 from "./Link.png";
       Onet
     </Link>
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </>;
 ```

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";
       </div>
     </div>
   </ThemeTester>
-  <ImageModal images={[img1, img2]} />
 </React.Fragment>;
 ```

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 = () => {
   <ThemeTester>
     <ModalWrapper />
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
 
 <React.Fragment>
@@ -15,6 +13,5 @@ import ThemeTester from "../../../styleguide/ThemeTester";
       color={"#09c3bc"}
     />
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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 = () => (
   <svg

src/components/atoms/Option/Checkbox.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";
     />
     <Checkbox name="c7" label={<strong>dummy label</strong>} defaultChecked />
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
     />
     <Radio name="r5" defaultChecked label={<strong>dummy label</strong>} />
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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 = {
       </PricingCard>
     </div>
   </ThemeTester>
-
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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
     </Button>
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </GlobalThemeProvider>;
 ```

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";
 
 <React.Fragment>
@@ -13,6 +12,5 @@ import ThemeTester from "../../../styleguide/ThemeTester";
     <Rating ratingValue={1} />
     <Rating ratingValue={0} />
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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 = {
       <Tabs tabs={props.tabs} />
     </div>
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```

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";
 
 <>
   <ThemeTester>
@@ -9,6 +8,5 @@ import img1 from "./Tags.png";
     <Tag>nowość</Tag>
     <Tag onClick={() => console.log("click")}>Clickable tag</Tag>
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </>;
 ```

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({
       }
     />
   </ThemeTester>
-  <ImageModal images={[img1]} />
 </React.Fragment>;
 ```