Not finished

01/Task01.js

@@ -1,16 +1,31 @@
 import React from 'react';
-
+import { ThemeProvider } from 'styled-components';
 import Alert from './../src/components/Alert';
 import { Row, Col, Alert as RBAlert } from 'react-bootstrap';
 
 const Task01 = () => {
+    const themeSettings = {
+        primary: {
+            color: '#004085',
+            backgroundColor: '#CCE5FF',
+            border: '1px solid #B8DAFF',
+        },
+        secondary: {
+            color: '#383D41',
+            backgroundColor: '#E2E3E5',
+            border: '1px solid #D6D8DB',
+        }
+
+    }
     return (
         <Row>
             <Col>
                 <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

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

03/Task03.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Breadcrumb from '../src/components/Breadcrumb/Breadcrumb';
 
 import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap';
 
@@ -15,7 +16,11 @@ 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,8 @@
 import React from 'react';
+import Tabs from '../src/components/Tabs/Tabs';
+import Tab from '../src/components/Tabs/Tab';
 
-import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap';
+import { Row, Col, Tabs as RBTabs, Tab as RBTab } from 'react-bootstrap';
 
 const Task04 = () => {
     return (
@@ -19,7 +21,7 @@ const Task04 = () => {
                 </RBTabs>
             </Col>
             <Col>
-                Tabs!
+                <Tabs />
             </Col>
         </Row>
     )

05/Task05.js

@@ -1,5 +1,11 @@
 import React from 'react';
 
+import Card from '../src/components/Card/Card';
+import Button from './../src/components/Button';
+
+import { ThemeProvider } from 'styled-components';
+import themeSettings from '../src/components/Button/theme';
+
 import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap';
 
 const Task05 = () => {
@@ -19,7 +25,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">Go somewhere</Button>
+                        </ThemeProvider>
+                    </Card.Body>
+                </Card>
             </Col>
         </Row>
     )

src/components/Alert/Alert.js

@@ -3,9 +3,7 @@ import React from 'react';
 import { StyledAlert } from './Alert.styled';
 
 const Alert = props => {
-    return (
-        <StyledAlert>{props.children}</StyledAlert>
-    );
+    return <StyledAlert variant={props.variant}>{props.children}</StyledAlert>
 }
 
 export default Alert;

src/components/Alert/Alert.styled.js

@@ -1,7 +1,13 @@
 import styled from 'styled-components';
 
-const StyledAlert = styled.div`
+const DefaultStyledAlert = styled.div`
     display: block;
+    margin-bottom: 16px;
+    padding: 12px 20px;
+    border-radius: 4px;
 `
+const StyledAlert = styled(DefaultStyledAlert)(
+    ({ variant, theme }) => theme[variant]
+)
 
 export { StyledAlert };

src/components/App.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
+import ResetStyle from './ResetStyle';
 
 import Task01 from './../../01/Task01';
 import Task02 from './../../02/Task02';
@@ -11,6 +12,7 @@ import Task05 from './../../05/Task05';
 const App = () => {
     return (
         <>
+            <ResetStyle />
             <Container fluid>
                 <Row>
                     <Col>
@@ -19,11 +21,11 @@ const App = () => {
                         <h2>Komponenty Twoje</h2>
                     </Col>
                 </Row>
-                <Task01/>
-                <Task02/>
-                <Task03/>
-                <Task04/>
-                <Task05/>
+                <Task01 />
+                <Task02 />
+                <Task03 />
+                <Task04 />
+                <Task05 />
             </Container>
         </>
     )

src/components/Breadcrumb/Breadcrumb.js

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

src/components/Breadcrumb/Breadcrumb.styled.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+const StyledBreadcrumb = styled.ol`
+    display: flex;
+    padding: 12px 16px;
+    list-style: none;
+    background-color: #E9ECEF;
+    border-radius: 0.25rem
+`
+
+export default StyledBreadcrumb

src/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { StyledBreadcrumbItem } from "./BreadcrumbItem.styled";
+import styled from "styled-components";
+
+const StyledBreadcrumbElement = styled.li`
+    & + &::before {
+        content: '/';
+        padding: 8px
+    }
+    ${props=> props.active && {color:'#6c757d'}}
+`
+
+const BreadcrumbItem = ({ href, active, children }) => {
+    return (
+        <StyledBreadcrumbElement active={active}>
+            {href ? <StyledBreadcrumbItem href={href} active={active}>{children}</StyledBreadcrumbItem> : children}
+        </StyledBreadcrumbElement>
+    )
+}
+
+export { BreadcrumbItem }

src/components/Breadcrumb/BreadcrumbItem.styled.js

@@ -0,0 +1,12 @@
+import styled, { css } from "styled-components";
+
+const StyledBreadcrumbItem = styled.a.attrs(({ href }) => ({
+    href: `${href}`
+}))`
+    color: #007bff;
+    &:hover {
+        color: #0056b3; 
+    }
+`
+
+export { StyledBreadcrumbItem }

src/components/Button/Button.js

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

src/components/Button/Button.styled.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+const DefaultStyledButton = styled.button`
+    background-color: #ffffff;
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: none;
+    &:focus {
+         outline: none
+    };
+     &:active {
+        ${props => props.theme.active}
+    };
+    &:disabled {
+        ${({ disabled, theme }) => disabled === true && theme.disabled}
+    }
+    `
+
+const StyledButton = styled(DefaultStyledButton)`
+    ${({ variant, theme }) => theme[variant]};
+    ${({ size, theme }) => size === 'lg' && theme.large};`
+
+export { 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,23 @@
+const themeSettings = {
+    primary: {
+        color: '#fff',
+        backgroundColor: '#007bff',
+    },
+    secondary: {
+        color: '#FFFFFF',
+        backgroundColor: '#6C757D',
+    },
+    large: {
+        padding: '8px 16px',
+        fontSize: '20px'
+    },
+    disabled: {
+        backgroundColor: '#59A9FF'
+    },
+    active: {
+        backgroundColor: '#0069D9',
+        boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)'
+    }
+}
+
+export default themeSettings

src/components/Card/Card.js

@@ -0,0 +1,14 @@
+import React from "react"
+import { StyledCard } from "./Card.styled"
+import { CardImg, CardBody, CardTitle, CardText } from "../Card"
+
+const Card = (props) => {
+    return <StyledCard style={props.style}>{props.children}</StyledCard>
+}
+
+export default Object.assign(Card, {
+    Img: CardImg,
+    Body: CardBody,
+    Title: CardTitle,
+    Text: CardText,
+})

src/components/Card/Card.styled.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+const StyledCard = styled.div`
+    width: ${props => props.style.width};
+    position: relative;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    min-width: 0;
+    word-wrap: break-word;
+    background-color: #fff;
+    background-clip: border-box;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 0.25rem;
+`
+
+const StyledCardImg = styled.img`
+    flex-shrink: 0;
+    width: 100%;
+    vertical-align: middle;
+    border-style: none;
+    border-top-left-radius: calc(0.25rem - 1px);
+    border-top-right-radius: calc(0.25rem - 1px);
+`
+
+const StyledCardBody = styled.div`
+    flex: 1 1 auto;
+    min-height: 1px;
+    padding: 1.25rem;
+`
+
+const StyledCardTitle = styled.div`
+    margin-bottom: 0.75rem;
+    font-size: 1.25rem;
+    font-weight: 500;
+    line-height: 1.2;
+`
+
+const StyledCardText = styled.p`
+    margin-top: 0;
+    margin-bottom: 1rem;
+`
+
+export { StyledCard, StyledCardImg, StyledCardBody, StyledCardTitle, StyledCardText }

src/components/Card/CardBody.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { StyledCardBody } from "./Card.styled";
+
+const CardBody = (props) => {
+    return <StyledCardBody>{props.children}</StyledCardBody>
+}
+
+export default CardBody