Task 1-5

01/Task01.js

@@ -2,6 +2,8 @@ import React from 'react';
 
 import Alert from './../src/components/Alert';
 import { Row, Col, Alert as RBAlert } from 'react-bootstrap';
+import { ThemeProvider } from 'styled-components';
+import themeSettings from '../src/components/Alert/theme'
 
 const Task01 = () => {
     return (
@@ -10,7 +12,9 @@ const Task01 = () => {
                 <RBAlert variant="primary">Uwaga! <em>Styled Components</em> nadchodzi!</RBAlert>
             </Col>
             <Col>
-                <Alert>Uwaga! <em>Styled Components</em> nadchodzi!</Alert>
+                <ThemeProvider theme={themeSettings}>
+                    <Alert variant="primary">Uwaga! <em>Styled Components</em> nadchodzi!</Alert>
+                </ThemeProvider>
             </Col>
         </Row>
     )

02/Task02.js

@@ -1,7 +1,8 @@
 import React from 'react';
-
 import Button from './../src/components/Button';
 import { Row, Col, Button as RBButton } from 'react-bootstrap';
+import themeSettings from '../src/components/Button/theme'
+import { ThemeProvider } from 'styled-components';
 
 const Task02 = () => {
     return (
@@ -10,7 +11,9 @@ const Task02 = () => {
                 <RBButton variant="primary" size="lg">Button!</RBButton>
             </Col>
             <Col>
-                Button!
+                <ThemeProvider theme={themeSettings}>
+                    <Button variant="primary" > Button!</Button>
+                </ThemeProvider>
             </Col>
         </Row>
 )

03/Task03.js

@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap';
+import { Row, Col, Breadcrumb as RBBreadcrumb} from 'react-bootstrap';
+import Breadcrumb from '../src/components/Breadcrumbs/Breadcrumb';
+
 
 const Task03 = () => {
     return (
@@ -15,7 +17,13 @@ const Task03 = () => {
                 </RBBreadcrumb>
             </Col>
             <Col>
-                Breadcrumb!
+                <Breadcrumb>
+                    <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+                    <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/">
+                     Library
+                    </Breadcrumb.Item>
+                     <Breadcrumb.Item active>Data</Breadcrumb.Item>
+                </Breadcrumb>
             </Col>
         </Row>
 )

04/Task04.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap';
+import { Tab, Tabs } from "../src/components/Tabs/index"
 
 const Task04 = () => {
     return (
@@ -19,7 +20,17 @@ const Task04 = () => {
                 </RBTabs>
             </Col>
             <Col>
-                Tabs!
+                <Tabs initTab="profile">
+                    <Tab eventKey="home" name="Home">
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
+                    </Tab>
+                    <Tab eventKey="profile" name="Profile">
+                        <p>Donec dignissim ultricies felis, eu dictum eros congue in. In gravida lobortis libero nec tempus. Cras rutrum nisl ut leo volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, tincidunt eu lacus.</p>
+                    </Tab>
+                    <Tab eventKey="contact" name="Contact" disabled>
+                        <p>Vivamus metus nulla, fermentum eget placerat vitae, mollis interdum elit. Pellentesque arcu augue, vulputate ut porttitor ut, suscipit non orci. Integer justo odio, suscipit eget tortor nec, molestie lobortis eros. Nullam commodo elit sit amet lacus blandit aliquet. Mauris at nibh eget nisl pulvinar dignissim.</p>
+                    </Tab>
+                </Tabs>
             </Col>
         </Row>
     )

05/Task05.js

@@ -1,6 +1,10 @@
 import React from 'react';
 
 import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap';
+import Card from '../src/components/Card/index';
+import themeSettings from '../src/components/Button/theme'
+import { ThemeProvider } from 'styled-components';
+import Button from './../src/components/Button';
 
 const Task05 = () => {
     return (
@@ -19,7 +23,19 @@ const Task05 = () => {
                 </RBCard>
             </Col>
             <Col>
-                Card!
+                <Card style={{ width: '18rem' }}>
+                    <Card.Img variant="top" src="https://picsum.photos/100/80" />
+                    <Card.Body>
+                        <Card.Title>Card Title</Card.Title>
+                        <Card.Text>
+                            Some quick example text to build on the card title and make up the bulk of
+                            the card's content.
+                        </Card.Text>
+                        <ThemeProvider theme={themeSettings}>
+                            <Button variant="primary"> Button!</Button>
+                        </ThemeProvider>
+                    </Card.Body>
+                </Card>
             </Col>
         </Row>
     )

src/components/Alert/Alert.js

@@ -4,7 +4,7 @@ import { StyledAlert } from './Alert.styled';
 
 const Alert = props => {
     return (
-        <StyledAlert>{props.children}</StyledAlert>
+        <StyledAlert variant={props.variant}>{props.children}</StyledAlert>
     );
 }
 

src/components/Alert/Alert.styled.js

@@ -1,7 +1,26 @@
-import styled from 'styled-components';
+import { propTypes } from 'react-bootstrap/esm/Image';
+import styled, { css } from 'styled-components';
+
 
 const StyledAlert = styled.div`
-    display: block;
+    border: 1px solid #000;
+    border-radius: 5px;
+    background-color: #fff;
+    color: #000;
+    padding: 0.8rem 1.2rem;
+    width: calc(100% - 20px);
+    margin: 12px 10px;
+    font-size: 16px;
+    ${ ({variant, theme}) => {
+        const {backgroundColor, color, borderColor} = theme[variant] || {};
+
+        return css`
+            background-color: ${backgroundColor};
+            color: ${color};
+            border-color: ${borderColor};
+        `;
+        }
+    };
 `
 
 export { StyledAlert };

src/components/Alert/theme.js

@@ -0,0 +1,12 @@
+export default {
+    primary: {
+        backgroundColor: '#031633',
+        color: '#6EA8FE',
+        borderColor: '#084298'
+    },
+    secondary: {
+        backgroundColor: '#161719',
+        color: '#A7ACB1',
+        borderColor: '#41464B'
+    }
+}

src/components/Breadcrumbs/Breadcrumb.js

@@ -0,0 +1,9 @@
+import React from "react";
+import BreadcrumbStyled from "./BreadcrumbStyled";
+import BreadcrumbItem from "./BreadcrumbItem";
+
+const Breadcrumb = ({ children }) => {
+  return <BreadcrumbStyled>{children}</BreadcrumbStyled>;
+};
+
+export default Object.assign(Breadcrumb, { Item: BreadcrumbItem });

src/components/Breadcrumbs/BreadcrumbItem.js

@@ -0,0 +1,16 @@
+import React from "react";
+import BreadcrumbItemStyled from "./BreadCrumbItemStyled";
+import BreadcrumbItemContainer from "./BreadcrumbItemContainer";
+
+const BreadcrumbItem = ({ href, children, active = true }) => {
+  return (
+    <BreadcrumbItemContainer>
+        <BreadcrumbItemStyled isActive={active} href={href}>
+            {children}
+        </BreadcrumbItemStyled>
+    </BreadcrumbItemContainer>
+
+  );
+};
+
+export default BreadcrumbItem;

src/components/Breadcrumbs/BreadcrumbItemContainer.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+
+const BreadcrumbItemContainer = styled.div`
+  display: inline-block;
+  margin-right: 0.5rem;
+  position: relative;
+
+  &:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: -0.5rem; 
+    transform: translateY(-45%) rotate(20deg);
+    width: 1px;
+    height: 0.9em;
+    background-color: black; 
+  }
+`;
+
+
+export default BreadcrumbItemContainer;

src/components/Breadcrumbs/BreadcrumbItemStyled.js

@@ -0,0 +1,11 @@
+import styled, {css} from "styled-components";
+
+const BreadcrumbItemStyled = styled.a.attrs(({href}) => ({
+    href: href,
+}))`
+    padding: 0.5rem;
+    margin-left: 0.3rem;
+    display: inline-flex;
+`
+
+export default BreadcrumbItemStyled;

src/components/Breadcrumbs/BreadcrumbStyled.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+const BreadcrumbStyled = styled.div`
+  border-radius: 5px;
+  background-color: #e9ecef;
+  padding: 0.4rem 1.2rem;
+  width: calc(100% - 20px);
+  margin: 12px 10px;
+  font-size: 16px;
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+`;
+
+export default BreadcrumbStyled;

src/components/Breadcrumbs/index.js

@@ -0,0 +1,3 @@
+import Breadcrumb from "./Breadcrumb";
+
+export default Breadcrumb;

src/components/Button/Button.js

@@ -0,0 +1,10 @@
+import React from "react";
+import StyledButton from './Button.styled'
+
+const Button = props => {
+    return (
+        <StyledButton variant={props.variant} size={props.size} isDisabled={props.disabled} isActive={props.active}>{props.children}</StyledButton>
+    )
+}
+
+export default Button   

src/components/Button/Button.styled.js

@@ -0,0 +1,40 @@
+import styled, {css} from "styled-components";
+
+const StyledButton = styled.button`
+    font-size: 20px;
+    border-radius: 5px;
+    border: none;
+    background-color: #fff;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    transition: 0.5s;
+    ${ ({variant, theme,isDisabled,isActive}) => {
+        const {backgroundColor,hoverBackgroundColor} = theme.variants[variant] || {};
+
+
+        if (isDisabled) {
+            return css`
+                background-color: gray; 
+                cursor: not-allowed;    
+                pointer-events:none;
+            `;
+        }
+
+        if (isActive) {
+            return css`
+                background-color: ${hoverBackgroundColor};
+                pointer-events:none;
+            `
+        }
+
+        return css `
+            background-color: ${backgroundColor};
+            &:hover {
+                background-color: ${hoverBackgroundColor}
+            }
+        `;
+        } 
+    };
+`
+
+export default StyledButton

src/components/Button/index.js

@@ -0,0 +1,3 @@
+import Button from './Button'
+
+export default Button;

src/components/Button/theme.js

@@ -0,0 +1,17 @@
+export default {
+    variants: {
+        primary: {
+            backgroundColor:  '#0098d9',
+            hoverBackgroundColor: '#0069D9'
+        },
+        secondary: {
+            backgroundColor: '#848b91',
+            hoverBackgroundColor: '#5C636A'
+        }
+    },
+    sizes: {
+        small: {fontSize: '10px'},
+        large: {fontSize: '20px'}
+    },
+
+}

src/components/Card/Body.js

@@ -0,0 +1,13 @@
+import React from "react";
+import StyledBody from "./StyledElements/StyledBody";
+
+const Body = ({children}) => {
+    return (
+        <StyledBody>
+
+        {children}
+        </StyledBody>
+    )
+}
+
+export default Body;

src/components/Card/Card.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import Body from "./Body"
+import Title from "./Title"
+import Text from "./Text"
+import Img from "./Img"
+
+import StyledCard from "./StyledElements/StyledCard";
+
+const Card = ({style, children}) => {
+    return (
+        <StyledCard style={style}>{children}</StyledCard>
+    )
+}
+
+export default Object.assign(Card, {
+    Img: Img,
+    Body: Body,
+    Title: Title,
+    Text: Text,
+});

src/components/Card/Img.js

@@ -0,0 +1,10 @@
+import React from "react";
+import StyledImg from "./StyledElements/StyledImg";
+
+const Img = ({variant, src}) => {
+    return (
+        <StyledImg variant={variant} src={src}></StyledImg>
+    )
+}
+
+export default Img;

src/components/Card/StyledElements/StyledBody.js

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const StyledBody = styled.section`
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem 1rem;
+`
+
+export default StyledBody