diff --git a/01/Task01.js b/01/Task01.js index c12ef98b..1524b893 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -1,20 +1,29 @@ import React from 'react'; +import { ThemeProvider } from 'styled-components'; import Alert from './../src/components/Alert'; import { Row, Col, Alert as RBAlert } from 'react-bootstrap'; +import themeSettings from '../src/components/styled/theme'; + const Task01 = () => { - return ( - - - Uwaga! Styled Components nadchodzi! - - - Uwaga! Styled Components nadchodzi! - - - ) -} + return ( + + + + Uwaga! Styled Components nadchodzi! + + + + + + Uwaga! Styled Components nadchodzi! + + + + + ); +}; export default Task01; diff --git a/02/Task02.js b/02/Task02.js index 0894136e..303d7d82 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -1,20 +1,28 @@ import React from 'react'; +import { ThemeProvider } from 'styled-components'; import Button from './../src/components/Button'; import { Row, Col, Button as RBButton } from 'react-bootstrap'; +import buttonSettings from '../src/components/Button/theme'; const Task02 = () => { - return ( - - - Button! - - - Button! - - -) -} + return ( + + + + Button! + + + + + + + + + ); +}; export default Task02; diff --git a/03/Task03.js b/03/Task03.js index 6c884d18..f50b2957 100644 --- a/03/Task03.js +++ b/03/Task03.js @@ -1,25 +1,28 @@ import React from 'react'; +import Breadcrumb from '../src/components/Breadcrumb'; import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap'; 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..3660ba5f 100644 --- a/04/Task04.js +++ b/04/Task04.js @@ -1,29 +1,64 @@ 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 ( - - - - -

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! - - - ) -} + 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; diff --git a/05/Task05.js b/05/Task05.js index 6cebfeda..424f1f53 100644 --- a/05/Task05.js +++ b/05/Task05.js @@ -1,29 +1,43 @@ import React from 'react'; +import Card from '../src/components/Card/Card'; +import { ThemeProvider } from 'styled-components'; +import Button from '../src/components/Button/Button'; +import buttonSettings from '../src/components/Button/theme'; 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/components/Alert/Alert.js b/src/components/Alert/Alert.js index 1b5f521c..a93f8e65 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -2,10 +2,8 @@ import React from 'react'; import { StyledAlert } from './Alert.styled'; -const Alert = props => { - return ( - {props.children} - ); -} +const Alert = ({ variant, children }) => { + return {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..5a79753f 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,7 +1,27 @@ import styled from 'styled-components'; +const defaultTheme = { + color: '#000', + bg: '#f8f9fa', + border: '#dcdcdc', +}; + const StyledAlert = styled.div` - display: block; -` + display: block; + border-radius: 4px; + color: var(--color-alfa); + padding: 12px 16px; + + ${({ theme, variant }) => { + const themeVariant = theme?.[variant]; + const final = themeVariant || defaultTheme; + + return ` + --color-alfa: ${final.color}; + background-color: ${final.bg}; + border: 1px solid ${final.border}; + `; + }} +`; export { StyledAlert }; \ 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..cd0c1011 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.js @@ -0,0 +1,17 @@ +import React from 'react'; +import BreadcrumbItem from './BreadcrumbItem'; +import { BreadcrumbNav, BreadcrumbList } from './Breadcrumb.styled'; + +const Breadcrumb = ({children}) => { + return ( + + + {children} + + + ) +} + +export default Object.assign(Breadcrumb, { + Item: BreadcrumbItem, +}); \ No newline at end of file diff --git a/src/components/Breadcrumb/Breadcrumb.styled.js b/src/components/Breadcrumb/Breadcrumb.styled.js new file mode 100644 index 00000000..d5f024a6 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.styled.js @@ -0,0 +1,35 @@ +import styled from "styled-components"; + +const BreadcrumbNav = styled.nav` + font-size: 16px; + line-height: 1.5; + color: #212529; + text-align: left; +` +const BreadcrumbList = styled.ol` + display: flex; + list-style: none; + padding: 12px 16px; + margin-bottom: 16px; + background-color: #e9ecef; + border-radius: 4px; +` +const BreadcrumbListItem = styled.li` + & + &::before { + content: "/"; + padding: 0 8px; + color: #6c757d; + } + + a { + text-decoration: none; + color: #007bff; + background-color: transparent; + } + + &.active { + color: #6c757d; + } +` + +export {BreadcrumbNav, BreadcrumbList, BreadcrumbListItem} \ No newline at end of file diff --git a/src/components/Breadcrumb/BreadcrumbItem.js b/src/components/Breadcrumb/BreadcrumbItem.js new file mode 100644 index 00000000..5cf37fca --- /dev/null +++ b/src/components/Breadcrumb/BreadcrumbItem.js @@ -0,0 +1,20 @@ +import React from 'react'; +import { BreadcrumbListItem } from './Breadcrumb.styled'; + +const BreadcrumbItem = ({active = false, children, href}) => { + if(active){ + return ( + + {children} + + ) + } + + return ( + + {children} + + ) +} + +export default BreadcrumbItem; \ No newline at end of file diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js new file mode 100644 index 00000000..3d08c7aa --- /dev/null +++ b/src/components/Breadcrumb/index.js @@ -0,0 +1,3 @@ +import Breadcrumb from "./Breadcrumb"; + +export default Breadcrumb; \ No newline at end of file diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index e69de29b..1844a3f3 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -0,0 +1,13 @@ +import React from 'react'; + +import { StyledButton } from './Button.styled'; + +const Button = ({ variant, size, active, disabled, children, $padding, $fontSize }) => { + return ( + + {children} + + ); +}; + +export default Button; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index e69de29b..558f8dc8 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,81 @@ +import styled from 'styled-components'; + +const defaultColor = { + color: '#000', + bg: '#f8f9fa', + border: '#dcdcdc', +}; + +const defaultSize = { + fontSize: '14px', + padding: '5px 10px', + borderRadius: '5px', +}; + +const defaultActive = { + bg: '#e2e6ea', + border: '#dae0e5', + boxShadow: 'none', + outlineColor: 'transparent', + outlineStyle: 'none', + outlineWidth: '0px', +}; + +const defaultDisabled = { + opacity: 0.65, +}; + +const getActiveStyles = ({ theme, variant, disabled }) => { + if (disabled) return ''; + const activeTheme = theme?.color?.[variant]?.active || defaultActive; + + return ` + background-color: ${activeTheme.bg}; + border: 1px solid ${activeTheme.border}; + box-shadow: ${activeTheme.boxShadow}; + outline-color: ${activeTheme.outlineColor}; + outline-style: ${activeTheme.outlineStyle}; + outline-width: ${activeTheme.outlineWidth}; + `; +}; + +const StyledButton = styled.button` + ${({ theme, variant, size, $padding, $fontSize }) => { + const variantTheme = theme?.color?.[variant] || defaultColor; + const sizeTheme = theme?.size?.[size] || defaultSize; + + return ` + color: ${variantTheme.color}; + background-color: ${variantTheme.bg}; + border: 1px solid ${variantTheme.border}; + font-size: ${$fontSize || sizeTheme.fontSize}; + padding: ${$padding || sizeTheme.padding}; + border-radius: ${sizeTheme.borderRadius}; + `; + }} + + ${({ theme, variant, active, disabled }) => { + if (!active) return ''; + return getActiveStyles({ theme, variant, disabled }); + }} + + &:active, + &:focus { + ${({ theme, variant, disabled }) => { + if (disabled) return ''; + return getActiveStyles({ theme, variant, disabled }); + }} + } + + &:disabled { + ${({ theme, variant }) => { + const disabledTheme = theme?.color?.[variant]?.disabled || defaultDisabled; + + return ` + opacity: ${disabledTheme.opacity}; + `; + }} + } +`; + +export { StyledButton }; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index e69de29b..800fab8b 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/Button/theme.js b/src/components/Button/theme.js new file mode 100644 index 00000000..de65a9f8 --- /dev/null +++ b/src/components/Button/theme.js @@ -0,0 +1,52 @@ +const buttonSettings = { + color: { + primary: { + color: '#fff', + bg: '#007bff', + border: '#007bff', + + active: { + bg: '#0062cc', + border: '#005cbf', + boxShadow: '0 0 0 3.2px rgba(38, 143, 255, .5)', + outlineColor: 'rgb(255, 255, 255)', + outlineStyle: 'none', + outlineWidth: '0px', + }, + disabled: { + opacity: 0.65, + } + }, + secondary: { + color: '#fff', + bg: '#5a6268', + border: '#5a6268', + + active: { + bg: '#545b62', + border: '#4e555b', + boxShadow: '0 0 0 3.2px rgba(130, 138, 145, 0.5)', + outlineColor: 'rgb(255, 255, 255)', + outlineStyle: 'none', + outlineWidth: '0px', + }, + disabled: { + opacity: 0.65, + } + }, + }, + size: { + lg: { + fontSize: '20px', + padding: '8px 16px', + borderRadius: '4.8px' + }, + sm: { + fontSize: '14px', + padding: '4px 8px', + borderRadius: '3.2px' + } + } +}; + +export default buttonSettings; \ No newline at end of file diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js new file mode 100644 index 00000000..d6e5367d --- /dev/null +++ b/src/components/Card/Card.js @@ -0,0 +1,20 @@ +import React from "react"; +import CardImg from "./CardImg"; +import CardTitle from "./CardTitle"; +import CardBody from "./CardBody"; +import CardText from "./CardText"; +import { CardDiv } from "./Card.styled"; + +const Card = ({width, children}) => { + return ( + {children} + ) +} + +export default Object.assign(Card, { + Img: CardImg, + Title: CardTitle, + Body: CardBody, + Text: CardText, +}); + diff --git a/src/components/Card/Card.styled.js b/src/components/Card/Card.styled.js new file mode 100644 index 00000000..356f1e12 --- /dev/null +++ b/src/components/Card/Card.styled.js @@ -0,0 +1,36 @@ +import styled from "styled-components"; + +const CardDiv = styled.div` + position: relative; + display: flex; + flex-direction: column; + min-width: 0; + width: ${({ $width }) => $width || 'auto'}; + word-wrap: break-word; + background-color: #fff; + background-clip: border-box; + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 4px; +` + +const CardImgItem = styled.img` + vertical-align: middle; + border-style: none; + border-top-left-radius: 3px; + border-top-right-radius: 3px; +` +const CardBodyDiv = styled.div` + flex: 1 1 auto; + min-height: 1px; + padding: 20px; +` +const CardTitleHeading = styled.h5` + margin-bottom: 12px; + font-size: 20px; +` +const CardTextParagraph = styled.p` + margin-top: 0; + margin-bottom: 16px; +` + +export {CardDiv, CardImgItem, CardBodyDiv, CardTitleHeading, CardTextParagraph} \ No newline at end of file diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js new file mode 100644 index 00000000..550b4bbd --- /dev/null +++ b/src/components/Card/CardBody.js @@ -0,0 +1,8 @@ +import React from "react"; +import {CardBodyDiv} from './Card.styled' + +const CardBody = ({children}) => { + return {children} +} + +export default CardBody; \ No newline at end of file diff --git a/src/components/Card/CardImg.js b/src/components/Card/CardImg.js new file mode 100644 index 00000000..df64827b --- /dev/null +++ b/src/components/Card/CardImg.js @@ -0,0 +1,8 @@ +import React from "react"; +import {CardImgItem} from './Card.styled' + +const CardImg = ({src}) => { + return +} + +export default CardImg; \ No newline at end of file diff --git a/src/components/Card/CardText.js b/src/components/Card/CardText.js new file mode 100644 index 00000000..58bf96ef --- /dev/null +++ b/src/components/Card/CardText.js @@ -0,0 +1,8 @@ +import React from "react"; +import {CardTextParagraph} from './Card.styled' + +const CardText = ({children}) => { + return {children} +} + +export default CardText; \ No newline at end of file diff --git a/src/components/Card/CardTitle.js b/src/components/Card/CardTitle.js new file mode 100644 index 00000000..977e3e85 --- /dev/null +++ b/src/components/Card/CardTitle.js @@ -0,0 +1,8 @@ +import React from "react"; +import {CardTitleHeading} from './Card.styled' + +const CardTitle = ({children}) => { + return {children} +} + +export default CardTitle; \ No newline at end of file diff --git a/src/components/Tabs/Tab.js b/src/components/Tabs/Tab.js new file mode 100644 index 00000000..67e60db2 --- /dev/null +++ b/src/components/Tabs/Tab.js @@ -0,0 +1,5 @@ +import React from "react"; + +const Tab = ({children}) =>
{children}
; + +export default Tab; \ No newline at end of file diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js new file mode 100644 index 00000000..0e8835f8 --- /dev/null +++ b/src/components/Tabs/Tabs.js @@ -0,0 +1,34 @@ +import React, {useState} from "react"; +import {TabsNav, TabsList, TabItem, TabButton} from './Tabs.styled' + +const Tabs = ({defaultActiveKey, children}) => { + const [activeKey, setActiveKey] = useState(defaultActiveKey); + + return ( + <> + + + {React.Children.map(children, child => ( + + !child.props.disabled && setActiveKey(child.props.eventKey)} + > + {child.props.title} + + + ))} + + + +
+ {React.Children.map(children, child => ( + child.props.eventKey === activeKey ? child.props.children : null + ))} +
+ + ) +} + +export default Tabs; \ No newline at end of file diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js new file mode 100644 index 00000000..876b1c38 --- /dev/null +++ b/src/components/Tabs/Tabs.styled.js @@ -0,0 +1,53 @@ +import styled from "styled-components"; + +const TabsNav = styled.nav` + border-bottom: 1px solid #dee2e6; +`; + +const TabsList = styled.ul` + display: flex; + margin: 0; + padding: 0; + list-style: none; +` + +const TabItem = styled.li` + margin-bottom: -1px; +` + +const TabButton = styled.button` + border: 1px solid transparent; + border-radius: 4px 4px 0 0; + padding: 8px 16px; + cursor: pointer; + color: #007bff; + font-size: 16px; + background-color: transparent; + transition: border-color 0.3s; + + &:hover { + border-color: #e9ecef #e9ecef #dee2e6; + } + + &.active, + &.active:hover { + color: #495057; + background-color: #fff; + border-color: #dee2e6 #dee2e6 #fff; + } + + &:disabled, + &.disabled:hover { + color: #6c757d; + background-color: transparent; + border-color: transparent; + cursor: default; + pointer-events: none; + } + + &:focus { + outline: 0.2px solid #dee2e6; + } +` + +export {TabsNav, TabsList, TabItem, TabButton} \ No newline at end of file diff --git a/src/components/styled/theme.js b/src/components/styled/theme.js new file mode 100644 index 00000000..88270bf9 --- /dev/null +++ b/src/components/styled/theme.js @@ -0,0 +1,14 @@ +const themeSettings = { + primary: { + color: '#004085', + bg: '#cce5ff', + border: '#b8daff', + }, + secondary: { + color: '#383d41', + bg: '#e2e3e5', + border: '#d6d8db', + } +}; + +export default themeSettings; \ No newline at end of file