diff --git a/01/Task01.js b/01/Task01.js index c12ef98b..ac59b15d 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -1,20 +1,32 @@ import React from 'react'; +import { ThemeProvider } from 'styled-components'; import Alert from './../src/components/Alert'; +import { themeSettings } from '../src/components/Alert/Alert.styled'; import { Row, Col, Alert as RBAlert } from 'react-bootstrap'; const Task01 = () => { - return ( - - - Uwaga! Styled Components nadchodzi! - - - Uwaga! Styled Components nadchodzi! - - - ) -} - + return ( + + + + Uwaga! Styled Components nadchodzi! + + + Uwaga! Styled Components nadchodzi! + + + + + + Uwaga! Styled Components nadchodzi! + + + Uwaga! Styled defaultTheme Components nadchodzi! + + + ); +}; export default Task01; + diff --git a/02/Task02.js b/02/Task02.js index 0894136e..61fabf4b 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -1,20 +1,38 @@ import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { theme } from './../src/components/Button/Button.styled'; + import Button from './../src/components/Button'; import { Row, Col, Button as RBButton } from 'react-bootstrap'; const Task02 = () => { - return ( - - - Button! - - - Button! - - -) -} + return ( + + + + Button! + + + Button! + + + Button! + + Button! + + + + + + + + + + + ); +}; export default Task02; - diff --git a/03/Task03.js b/03/Task03.js index 6c884d18..50e8c3fa 100644 --- a/03/Task03.js +++ b/03/Task03.js @@ -1,25 +1,28 @@ import React from 'react'; - import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap'; +import Breadcrumb from '../src/components/Breadcrumb'; +import BreadcrumbItem from '../src/components/Breadcrumb/Bredcrumb.Item'; + const Task03 = () => { - return ( - - - - Home - - Library - - Data - - - - Breadcrumb! - - -) -} + return ( + + + + Home + Library + Data + + + + + Home + Library + Data + + + + ); +}; export default Task03; - diff --git a/04/Task04.js b/04/Task04.js index 8a8e5b21..c432743d 100644 --- a/04/Task04.js +++ b/04/Task04.js @@ -1,29 +1,62 @@ import React from 'react'; -import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap'; +import Tabs from '../src/components/Tab/Tabs'; +import Tab from '../src/components/Tab/Tab'; +import { Row, Col, Tabs as RBTabs, Tab as RBTab } from 'react-bootstrap'; const Task04 = () => { - return ( - - - - -

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;

- - -

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.

- - -

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.

- - - - - Tabs! - - - ) -} - -export default Task04; + return ( + + + + +

+ 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;{' '} +

+ + +

+ 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. +

+ + +

+ 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. +

+ + + + + + +

+ 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 +

+ + +

+ 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. +

+ + +

+ 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. +

+ + + + + ); +}; +export default Task04; \ No newline at end of file diff --git a/05/Task05.js b/05/Task05.js index 6cebfeda..f85a03be 100644 --- a/05/Task05.js +++ b/05/Task05.js @@ -1,29 +1,45 @@ import React from 'react'; +import { ThemeProvider } from 'styled-components'; +import { theme } from './../src/components/Button/Button.styled'; + +import Button from './../src/components/Button'; + +import { Card, CardBody, CardImg, CardText, CardTitle } from '../src/components/Card'; import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap'; const Task05 = () => { - return ( - - - - - - Card Title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - Go somewhere - - - - - Card! - - - ) -} + return ( + + + + + + Card Title + + Some quick example text to build on the card title and make up the bulk of the card's content. + + Go somewhere + + + + + + + + Card Title + + Some quick example text to build on the card title and make up the bulk of the card's content. + + + + + + + + + ); +}; export default Task05; diff --git a/src/app.js b/src/app.js index 0380e4ee..2e2d4539 100644 --- a/src/app.js +++ b/src/app.js @@ -3,6 +3,7 @@ import React from 'react'; import { createRoot } from 'react-dom/client'; import App from './components/App'; +import Task01 from '../01/Task01'; const root = createRoot(document.querySelector('#root')); diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 1b5f521c..e3f32c5e 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -3,9 +3,7 @@ import React from 'react'; import { StyledAlert } from './Alert.styled'; const Alert = props => { - return ( - {props.children} - ); -} + return {props.children}; +}; export default Alert; \ No newline at end of file diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index 117843d9..87c6a272 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,7 +1,30 @@ import styled from 'styled-components'; const StyledAlert = styled.div` - display: block; -` + padding: 12px 20px; + border-radius: 4px; + margin: 0 0 16px; + border: 1px solid transparent; + color: ${props => props.theme.color}; + background-color: ${props => props.theme.backgroundColor}; +`; -export { StyledAlert }; \ No newline at end of file +StyledAlert.defaultProps = { + theme: { + color: 'black', + backgroundColor: 'aquamarine', + }, +}; + +const themeSettings = { + primary: { + color: '#004085', + backgroundColor: '#CCE5FF', + }, + secondary: { + color: '#383D41', + backgroundColor: '#E2E3E5', + }, +}; + +export { StyledAlert, themeSettings }; \ No newline at end of file diff --git a/src/components/Breadcrumb/Breadcrumb.js b/src/components/Breadcrumb/Breadcrumb.js new file mode 100644 index 00000000..0e619e48 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { StyledBreadCrumb, StyledNav } from './Breadcrumb.styled'; + +const Breadcrumb = props => { + return ( + + {props.children} + + ); +}; + +export default Breadcrumb; diff --git a/src/components/Breadcrumb/Breadcrumb.styled.js b/src/components/Breadcrumb/Breadcrumb.styled.js new file mode 100644 index 00000000..934c3f10 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.styled.js @@ -0,0 +1,29 @@ +import styled from 'styled-components'; + +const StyledNav = styled.nav``; + +const StyledBreadCrumb = styled.ul` + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + padding: 0.75rem 1rem; + margin-bottom: 1rem; + list-style: none; + background-color: #e9ecef; + border-radius: 0.25rem; +`; + +const StyledItem = styled.li` + color: #6c757d; + &:not(:last-child):after { + content: '/'; + display: inline-block; + padding-left: 0.5rem; + padding-right: 0.5rem; + } +`; + +const StyledLink = styled.a` + color: ${props => (props.active ? '#6c757d' : '#007bff')}; +`; +export { StyledNav, StyledBreadCrumb, StyledItem, StyledLink }; diff --git a/src/components/Breadcrumb/Bredcrumb.Item.js b/src/components/Breadcrumb/Bredcrumb.Item.js new file mode 100644 index 00000000..c925576a --- /dev/null +++ b/src/components/Breadcrumb/Bredcrumb.Item.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { StyledLink, StyledItem } from './Breadcrumb.styled'; + +const BreadcrumbItem = props => { + return ( + + + {props.children} + + + ); +}; + +export default BreadcrumbItem; diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js new file mode 100644 index 00000000..800aafa7 --- /dev/null +++ b/src/components/Breadcrumb/index.js @@ -0,0 +1,4 @@ +import cusBreadcrumb from './Breadcrumb'; + + +export default cusBreadcrumb; \ No newline at end of file diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index e69de29b..b7e4183b 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -0,0 +1,22 @@ +// button.js +import React from 'react'; + +import { StyledButton } from './Button.styled'; + +const Button = props => { + + + return ( + + {props.children} + + ); +}; + +export default Button; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index e69de29b..2e0f305a 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,80 @@ +//buton.styled.js +import styled from 'styled-components'; + +const StyledButton = styled.button` + border-radius: 5px; + color: ${props => props.theme[props.variant].color}; + background-color: ${props => props.theme[props.variant].background}; + border: 1px solid ${props => props.theme[props.variant].mainBorderColor}; + + /* DEFAULT SIZE */ + padding: 6px 12px; + font-size: 16px; + /* SM */ + padding: ${props => (props.size === 'sm' ? size.sm : null)}; + font-size: ${props => (props.size === 'sm' ? '14px' : null)}; + /* LG */ + padding: ${props => (props.size === 'lg' ? size.lg : null)}; + font-size: ${props => (props.size === 'lg' ? '20px' : null)}; + + &.active { + background-color: ${props => props.theme[props.variant].activeBackground}; + &:hover { + background-color: ${props => props.theme[props.variant].activeBackground}; + } + } + + &:hover { + background-color: ${props => props.theme[props.variant].hoverColor}; + } + + &:focus { + outline: 3px solid ${props => props.theme[props.variant].focusOutlineColor}; + } + + :disabled { + background-color: ${props => props.theme[props.variant].disabled}; + cursor: pointer; + } +`; + +StyledButton.defaultProps = { + variant: { + color: '#000', + background: '#fff', + activeBackground: 'grey', + mainBorderColor: '#000', + hoverColor: '#808080', + focusOutlineColor: 'black', + disabled: 'grey', + }, +}; + +const theme = { + primary: { + color: '#ffff', + background: '#007BFF', + activeBackground: '#0062cc', + mainBorderColor: 'transparent', + hoverColor: '#0069d9', + focusOutlineColor: '#92C7FF', + disabled: '#59A9FF', + }, + secondary: { + color: '#ffff', + background: '#6C757D', + activeBackground: '#545B62', + mainBorderColor: 'transparent', + hoverColor: '#5A6268', + focusOutlineColor: '#C0C4C8', + disabled: '#9FA5AA', + }, +}; + + +const size = { + lg: '8px 16px', + sm: '4px 8px', +}; + +export { StyledButton, theme }; \ No newline at end of file diff --git a/src/components/Button/index.js b/src/components/Button/index.js index e69de29b..a80a61cb 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -0,0 +1,4 @@ +import Button from './Button'; + + +export default Button; \ No newline at end of file diff --git a/src/components/Card/Card.Body.js b/src/components/Card/Card.Body.js new file mode 100644 index 00000000..1a3705dd --- /dev/null +++ b/src/components/Card/Card.Body.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import { StyledCardBodyDiv } from './Card.styled'; +const CardBody = props => { + return {props.children}; +}; +export default CardBody; diff --git a/src/components/Card/Card.Img.js b/src/components/Card/Card.Img.js new file mode 100644 index 00000000..0cd85498 --- /dev/null +++ b/src/components/Card/Card.Img.js @@ -0,0 +1,8 @@ +import React from 'react'; +import { StyledCardImg } from './Card.styled'; + +const CardImg = props => { + return {props.children}; +}; + +export default CardImg; diff --git a/src/components/Card/Card.Text.js b/src/components/Card/Card.Text.js new file mode 100644 index 00000000..b02a6376 --- /dev/null +++ b/src/components/Card/Card.Text.js @@ -0,0 +1,7 @@ +import React from 'react'; + +import { StyledParagraph } from './Card.styled'; +const CardText = props => { + return {props.children}; +}; +export default CardText; diff --git a/src/components/Card/Card.Title.js b/src/components/Card/Card.Title.js new file mode 100644 index 00000000..957be5c8 --- /dev/null +++ b/src/components/Card/Card.Title.js @@ -0,0 +1,8 @@ +import React from 'react'; +import { StyledTitleH5 } from './Card.styled'; + +const CardTitle = props => { + return {props.children}; +}; + +export default CardTitle; diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js new file mode 100644 index 00000000..cd826f08 --- /dev/null +++ b/src/components/Card/Card.js @@ -0,0 +1,8 @@ +import React from 'react'; +import { StyledCardDiv } from './Card.styled'; + +const Card = props => { + return {props.children}; +}; + +export default Card; diff --git a/src/components/Card/Card.styled.js b/src/components/Card/Card.styled.js new file mode 100644 index 00000000..226e9f39 --- /dev/null +++ b/src/components/Card/Card.styled.js @@ -0,0 +1,30 @@ +import styled from 'styled-components'; + +const StyledCardDiv = styled.div` + 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, 0.125); + border-radius: 0.25rem; +`; + +const StyledCardBodyDiv = styled.div` + flex: 1 1 auto; + min-height: 1px; + padding: 1.25rem; +`; +const StyledTitleH5 = styled.h5``; +const StyledParagraph = styled.p``; + +const StyledCardImg = styled.img` + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); +`; + +export { StyledCardDiv, StyledCardImg, StyledCardBodyDiv, StyledTitleH5, StyledParagraph }; diff --git a/src/components/Card/index.js b/src/components/Card/index.js new file mode 100644 index 00000000..9d1a5cf5 --- /dev/null +++ b/src/components/Card/index.js @@ -0,0 +1,7 @@ +import Card from './Card'; +import CardBody from './Card.Body'; +import CardImg from './Card.Img'; +import CardText from './Card.Text'; +import CardTitle from './Card.Title'; + +export { Card, CardBody, CardImg, CardText, CardTitle }; diff --git a/src/components/Tab/Tab.js b/src/components/Tab/Tab.js new file mode 100644 index 00000000..f0101db7 --- /dev/null +++ b/src/components/Tab/Tab.js @@ -0,0 +1,22 @@ +import React, { useContext } from 'react'; +import { StyledNavLink } from './Tab.styled'; +import { MyContext } from './Tabs'; + +const Tab = props => { + + const { title, eventKey, disabled } = props; + const { key, change } = useContext(MyContext); + + const handleChange = eventKey => { + if (disabled !== true) { + change(eventKey); + } + }; + return ( + handleChange(eventKey)} active={key === eventKey ? true : false}> + {title} + + ); +}; + +export default Tab; diff --git a/src/components/Tab/Tab.styled.js b/src/components/Tab/Tab.styled.js new file mode 100644 index 00000000..7cda0caa --- /dev/null +++ b/src/components/Tab/Tab.styled.js @@ -0,0 +1,63 @@ +import styled from 'styled-components'; + +const StyledNav = styled.nav.attrs(props => ({ + onClick: props.onSelect, +}))` + border-bottom: 1px solid #dee2e6; + display: flex; +`; + +const StyledNavLink = styled.a.attrs(props => ({ + href: '#', + active: props.active, + disabled: props.disabled, +}))` + display: block; + + padding: 0.5rem 1rem; + margin-bottom: -1px; + border: 1px solid transparent; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + ${props => + props.active + ? { + color: '#495057', + backgroundColor: '#fff', + borderColor: '#dee2e6 #dee2e6 #fff', + } + : { borderColor: 'transparent' }} + ${props => + props.disabled + ? { + color: '#6c757d', + } + : null} + &:hover { + text-decoration: none; + color: indigo; + ${props => + props.active == false + ? { + backgroundColor: '#fff', + borderColor: '#dee2e6', + } + : { + color: 'inherit', + }} + ${props => + props.disabled + ? { + color: '#6c757d', + cursor: 'default', + borderColor: '#fff #fff #dee2e6 #fff', + } + : null} + } +`; + +const StyledDiv = styled.div``; + +const StyledParagraph = styled.p``; + +export { StyledNav, StyledNavLink, StyledDiv, StyledParagraph }; diff --git a/src/components/Tab/Tabs.js b/src/components/Tab/Tabs.js new file mode 100644 index 00000000..067f20f7 --- /dev/null +++ b/src/components/Tab/Tabs.js @@ -0,0 +1,28 @@ +import React, { useState, createContext } from 'react'; +import { StyledDiv, StyledNav, StyledParagraph } from './Tab.styled'; + +export const MyContext = createContext(); + +const Tabs = props => { + const [key, setKey] = useState(props.defaultActiveKey); + + //szukam robie tablice z jednym elementem takim samym atrybutem jak kliniety link w nawigacji + const Tab = props.children.find(element => element.props.eventKey === key); + // pozniej wchodze w tego taba i uzywam childern zeby wejsc do paragrafu, pozniej znowu przez childern do zawrtosci paragrafu + const Paragraph = Tab.props.children.props.children; + + return ( + <> + + + {props.children} + + + {Paragraph} + + + + ); +}; + +export default Tabs;