From 004ed59d1bb8509c9ff27bdb454a644284023102 Mon Sep 17 00:00:00 2001 From: Jaro Date: Wed, 18 Sep 2024 14:13:32 +0200 Subject: [PATCH 01/16] Finished ex1 --- 01/Task01.js | 2 +- src/components/Alert/Alert.js | 2 +- src/components/Alert/Alert.styled.js | 10 ++++-- src/components/App.js | 49 ++++++++++++++++++++-------- 4 files changed, 45 insertions(+), 18 deletions(-) diff --git a/01/Task01.js b/01/Task01.js index c12ef98b..f4b86f92 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -10,7 +10,7 @@ const Task01 = () => { Uwaga! Styled Components nadchodzi! - Uwaga! Styled Components nadchodzi! + Uwaga! Styled Components nadchodzi! ) diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 1b5f521c..db32d72f 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -4,7 +4,7 @@ import { StyledAlert } from './Alert.styled'; const Alert = props => { return ( - {props.children} + {props.children} ); } diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index 117843d9..d862dedc 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,7 +1,13 @@ import styled from 'styled-components'; -const StyledAlert = styled.div` - display: block; +const DefaultStyledAlert = styled.div` + position: relative; + padding: 0.75rem 1.25rem; + margin-bottom: 1rem; + border: 1px solid transparent; + border-radius: 0.25rem ` +const StyledAlert = styled(DefaultStyledAlert)(({theme, variant}) => theme.alert[variant]) + export { StyledAlert }; \ No newline at end of file diff --git a/src/components/App.js b/src/components/App.js index 5b5322a5..b2b5e7b6 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,5 +1,6 @@ import React from 'react'; import { Container, Row, Col } from 'react-bootstrap'; +import { ThemeProvider, css } from 'styled-components' import Task01 from './../../01/Task01'; import Task02 from './../../02/Task02'; @@ -8,23 +9,43 @@ import Task04 from './../../04/Task04'; import Task05 from './../../05/Task05'; + +const theme = { + alert: { + primary: css` + color: #004085; + background-color: #cce5ff; + border-color: #b8daff; + `, + secondary: css` + color: #383d41; + background-color: #e2e3e5; + border-color: #d6d8db; + ` + + } +} + + const App = () => { return ( <> - - - -

Komponenty React Boostrap

- -

Komponenty Twoje

- - - - - - - - + + + + +

Komponenty React Boostrap

+ +

Komponenty Twoje

+ + + + + + + + + ) } From 21a849fc9b3d4bbf535e5098741ed05df31fe9c7 Mon Sep 17 00:00:00 2001 From: Jarek Stelmach Date: Wed, 18 Sep 2024 18:03:51 +0200 Subject: [PATCH 02/16] removed brackets in App.js --- src/components/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/App.js b/src/components/App.js index b2b5e7b6..3c9965be 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -30,7 +30,7 @@ const theme = { const App = () => { return ( <> - + From d2b74b2c442069dccdbc18dcd5243cd99529116c Mon Sep 17 00:00:00 2001 From: Jarek Stelmach Date: Wed, 18 Sep 2024 18:32:19 +0200 Subject: [PATCH 03/16] First part of ex 2 in progress --- 02/Task02.js | 2 +- src/components/Button/Button.js | 11 +++++++++++ src/components/Button/Button.styled.js | 7 +++++++ src/components/Button/index.js | 4 ++++ 4 files changed, 23 insertions(+), 1 deletion(-) diff --git a/02/Task02.js b/02/Task02.js index 0894136e..174b6d87 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -10,7 +10,7 @@ const Task02 = () => { Button! - Button! + ) diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index e69de29b..fd51787e 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { StyledButton } from './Button.styled'; + +const Button = props => { + return ( + {props.children} + ); +} + +export default Button; \ No newline at end of file diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index e69de29b..7c71b68d 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const StyledButton = styled.button` + border: 1px solid black +` + +export { StyledButton }; \ 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 From eaa24b9a3076c6096643965bb3f5793d0cee81f1 Mon Sep 17 00:00:00 2001 From: Jaro Date: Thu, 19 Sep 2024 13:00:18 +0200 Subject: [PATCH 04/16] Almost finished ex2 --- 02/Task02.js | 2 +- src/components/App.js | 29 ++++++++++++++++++++++++++ src/components/Button/Button.js | 4 ++-- src/components/Button/Button.styled.js | 25 ++++++++++++++++++++-- 4 files changed, 55 insertions(+), 5 deletions(-) diff --git a/02/Task02.js b/02/Task02.js index 174b6d87..f9772901 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -10,7 +10,7 @@ const Task02 = () => { Button! - + ) diff --git a/src/components/App.js b/src/components/App.js index 3c9965be..68531e97 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -23,6 +23,35 @@ const theme = { border-color: #d6d8db; ` + }, + Button: { + variant: { + primary: css` + color: #fff; + background-color: #007bff; + border-color: #007bff; + `, + secondary: css` + color: #fff; + background-color: #6c757d; + border-color: #6c757d; + + ` + }, + size: { + lg: css` + padding: 0.5rem 1rem; + font-size: 1.25rem; + line-height: 1.5rem; + border-radius: 0.3rem; + `, + sm: css` + padding: 0.25rem 0.5rem; + font-size: 0.875rem; + line-height: 1.5rem; + border-radius: 0.2rem; + ` + } } } diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index fd51787e..f82051c6 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -2,9 +2,9 @@ import React from 'react'; import { StyledButton } from './Button.styled'; -const Button = props => { +const Button = ({variant, size = 'lg', children}) => { return ( - {props.children} + {children} ); } diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index 7c71b68d..5a11d976 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -1,7 +1,28 @@ import styled from 'styled-components'; -const StyledButton = styled.button` - border: 1px solid black +const DefaultStyledButton = styled.button` + display: inline-block; + font-weight: 400; + color: #212529; + text-aling: center; + vertical-align: middle; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: transparent; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem, + line-height: 1.5; + border-radius: 0.25rem; ` +const VariantStyledButton = styled(DefaultStyledButton)(({theme, variant}) => theme.button.variant[variant]) + +const SizedStyledButton = styled(VariantStyledButton)(({theme, size}) => theme.button.size[size]) + +const StyledButton = SizedStyledButton + export { StyledButton }; \ No newline at end of file From bda65c1fa963b71325e6d8fe4f06cfa982615b79 Mon Sep 17 00:00:00 2001 From: Jaro Date: Thu, 19 Sep 2024 13:16:31 +0200 Subject: [PATCH 05/16] Added hovers to buttons --- 02/Task02.js | 4 ++-- src/components/App.js | 12 ++++++++++++ src/components/Button/Button.styled.js | 5 +++++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/02/Task02.js b/02/Task02.js index f9772901..893048a9 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -7,10 +7,10 @@ const Task02 = () => { return ( - Button! + Button! - + ) diff --git a/src/components/App.js b/src/components/App.js index 68531e97..b95628d7 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -16,11 +16,23 @@ const theme = { color: #004085; background-color: #cce5ff; border-color: #b8daff; + + &:hover { + color: #fff; + background-color: #0069d9; + border-color: #0062cc; + } `, secondary: css` color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; + + &:hover { + color: #fff; + background-color: #5a6268; + border-color: #545b62; + } ` }, diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index 5a11d976..a38bfc98 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -17,6 +17,11 @@ const DefaultStyledButton = styled.button` font-size: 1rem, line-height: 1.5; border-radius: 0.25rem; + + &:hover { + color: #212529; + text-decoration: none; + } ` const VariantStyledButton = styled(DefaultStyledButton)(({theme, variant}) => theme.button.variant[variant]) From a2547f2827a391895f23dd97f30b69aa0b08b9b2 Mon Sep 17 00:00:00 2001 From: Jaro Date: Thu, 19 Sep 2024 14:25:15 +0200 Subject: [PATCH 06/16] Current files updated --- src/components/App.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index b95628d7..0ecba6d7 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -8,8 +8,6 @@ import Task03 from './../../03/Task03'; import Task04 from './../../04/Task04'; import Task05 from './../../05/Task05'; - - const theme = { alert: { primary: css` From 761be7aad5cd5ec7a62e3d194b014a06d16b2d30 Mon Sep 17 00:00:00 2001 From: Jaro Date: Thu, 19 Sep 2024 15:12:16 +0200 Subject: [PATCH 07/16] Added changes for ex 3 --- 03/Task03.js | 47 +++++++++++-------- src/components/App.js | 3 ++ src/components/Breadrumb/Breadcrumb.js | 11 +++++ src/components/Breadrumb/Breadcrumb.styled.js | 17 +++++++ src/components/Breadrumb/index.js | 8 ++++ src/components/styled/Global.js | 11 +++++ 6 files changed, 77 insertions(+), 20 deletions(-) create mode 100644 src/components/Breadrumb/Breadcrumb.js create mode 100644 src/components/Breadrumb/Breadcrumb.styled.js create mode 100644 src/components/Breadrumb/index.js create mode 100644 src/components/styled/Global.js diff --git a/03/Task03.js b/03/Task03.js index 6c884d18..d8f7f2d6 100644 --- a/03/Task03.js +++ b/03/Task03.js @@ -1,25 +1,32 @@ -import React from 'react'; +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/Breadrumb"; const Task03 = () => { - return ( - - - - Home - - Library - - Data - - - - Breadcrumb! - - -) -} + return ( + + + + Home + + Library + + Data + + + + + Home + + Library + + Data + + + + ); +}; export default Task03; - diff --git a/src/components/App.js b/src/components/App.js index 0ecba6d7..676aadc5 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -8,6 +8,8 @@ import Task03 from './../../03/Task03'; import Task04 from './../../04/Task04'; import Task05 from './../../05/Task05'; +import StyledGlobal from './styled/Global' + const theme = { alert: { primary: css` @@ -70,6 +72,7 @@ const App = () => { return ( <> + diff --git a/src/components/Breadrumb/Breadcrumb.js b/src/components/Breadrumb/Breadcrumb.js new file mode 100644 index 00000000..491828d4 --- /dev/null +++ b/src/components/Breadrumb/Breadcrumb.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { StyledBreadcrumb } from './Breadcrumb.styled'; + +const Breadcrumb = props => { + return ( + {props.children} + ); +} + +export default Breadcrumb; \ No newline at end of file diff --git a/src/components/Breadrumb/Breadcrumb.styled.js b/src/components/Breadrumb/Breadcrumb.styled.js new file mode 100644 index 00000000..716d7e1d --- /dev/null +++ b/src/components/Breadrumb/Breadcrumb.styled.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +const DefaultStyledBreadCrumb = styled.ol` + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 0.75rem 1rem; + margin-bottom: 1rem; + list-style: none; + background-color: #e9ecef; + border-radius: 0.25rem; +` + + + +export default DefaultStyledBreadCrumb; \ No newline at end of file diff --git a/src/components/Breadrumb/index.js b/src/components/Breadrumb/index.js new file mode 100644 index 00000000..703d8d31 --- /dev/null +++ b/src/components/Breadrumb/index.js @@ -0,0 +1,8 @@ +import React from 'react' +import BreadCrumb from './Breadcrumb' + + + +export default Object.assign(BreadCrumb, { + Item: () =>
  • Item
    • +}); \ No newline at end of file diff --git a/src/components/styled/Global.js b/src/components/styled/Global.js new file mode 100644 index 00000000..8d54d4e3 --- /dev/null +++ b/src/components/styled/Global.js @@ -0,0 +1,11 @@ +import { createGlobalStyle } from 'styled-components' + +const StyledGlobal = createGlobalStyle` + a { + color: #007bff; + test-decoration: none; + background-color: transparent; + } +` + +export default StyledGlobal \ No newline at end of file From 872d018ab274f55f649aba5f9a953ccf8f54882e Mon Sep 17 00:00:00 2001 From: Jaro Date: Fri, 20 Sep 2024 13:41:24 +0200 Subject: [PATCH 08/16] Added more files to breadcrumb folder --- src/components/Breadrumb/Breadcrumb.js | 2 +- src/components/Breadrumb/BreadcrumbItem.js | 11 +++++++++++ src/components/Breadrumb/BreadcrumbItem.styled.js | 9 +++++++++ src/components/Breadrumb/index.js | 3 ++- 4 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/components/Breadrumb/BreadcrumbItem.js create mode 100644 src/components/Breadrumb/BreadcrumbItem.styled.js diff --git a/src/components/Breadrumb/Breadcrumb.js b/src/components/Breadrumb/Breadcrumb.js index 491828d4..bab9ff2d 100644 --- a/src/components/Breadrumb/Breadcrumb.js +++ b/src/components/Breadrumb/Breadcrumb.js @@ -1,6 +1,6 @@ import React from 'react'; -import { StyledBreadcrumb } from './Breadcrumb.styled'; +import StyledBreadcrumb from './Breadcrumb.styled'; const Breadcrumb = props => { return ( diff --git a/src/components/Breadrumb/BreadcrumbItem.js b/src/components/Breadrumb/BreadcrumbItem.js new file mode 100644 index 00000000..ff5ce826 --- /dev/null +++ b/src/components/Breadrumb/BreadcrumbItem.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import StyledBreadcrumbItem from './BreadcrumbItem.styled'; + +const BreadcrumbItem = props => { + return ( + {props.children} + ); +} + +export default BreadcrumbItem; \ No newline at end of file diff --git a/src/components/Breadrumb/BreadcrumbItem.styled.js b/src/components/Breadrumb/BreadcrumbItem.styled.js new file mode 100644 index 00000000..efffdb9c --- /dev/null +++ b/src/components/Breadrumb/BreadcrumbItem.styled.js @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +const DefaultStyledBreadCrumbItem = styled.li` + border: 1px solid red; +` + + + +export default DefaultStyledBreadCrumbItem; \ No newline at end of file diff --git a/src/components/Breadrumb/index.js b/src/components/Breadrumb/index.js index 703d8d31..7b403cf7 100644 --- a/src/components/Breadrumb/index.js +++ b/src/components/Breadrumb/index.js @@ -1,8 +1,9 @@ import React from 'react' import BreadCrumb from './Breadcrumb' +import BreadcrumbItem from './BreadcrumbItem' export default Object.assign(BreadCrumb, { - Item: () =>
  • Item
    • + Item: BreadcrumbItem }); \ No newline at end of file From 2cd31a70f2b44c84d69706d4687055790abcc4f2 Mon Sep 17 00:00:00 2001 From: Jaro Date: Fri, 20 Sep 2024 13:55:46 +0200 Subject: [PATCH 09/16] Changes in Breadcrumbs --- src/components/Breadrumb/BreadcrumbItem.js | 4 +++- src/components/Breadrumb/BreadcrumbItem.styled.js | 12 +++++++++--- 2 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/Breadrumb/BreadcrumbItem.js b/src/components/Breadrumb/BreadcrumbItem.js index ff5ce826..db751c20 100644 --- a/src/components/Breadrumb/BreadcrumbItem.js +++ b/src/components/Breadrumb/BreadcrumbItem.js @@ -4,7 +4,9 @@ import StyledBreadcrumbItem from './BreadcrumbItem.styled'; const BreadcrumbItem = props => { return ( - {props.children} + + {props.href ? {props.children} : props.children } + ); } diff --git a/src/components/Breadrumb/BreadcrumbItem.styled.js b/src/components/Breadrumb/BreadcrumbItem.styled.js index efffdb9c..d15e7cb0 100644 --- a/src/components/Breadrumb/BreadcrumbItem.styled.js +++ b/src/components/Breadrumb/BreadcrumbItem.styled.js @@ -1,9 +1,15 @@ import styled from 'styled-components'; const DefaultStyledBreadCrumbItem = styled.li` - border: 1px solid red; + & + & { + padding-left: 0.5rem; + } + & + &::before { + display: inline-block; + padding-right: 0.5rem; + color: #6c757d; + content: "/"; + } ` - - export default DefaultStyledBreadCrumbItem; \ No newline at end of file From 7fdb61a90c8c61c678ddac24b127dca5fba1e3d5 Mon Sep 17 00:00:00 2001 From: Jaro Date: Fri, 20 Sep 2024 14:10:23 +0200 Subject: [PATCH 10/16] Added changes in Breadcrmbs files --- src/components/Breadrumb/Breadcrumb.js | 4 ++-- src/components/Breadrumb/BreadcrumbItem.js | 2 +- src/components/Breadrumb/BreadcrumbItem.styled.js | 1 + 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/Breadrumb/Breadcrumb.js b/src/components/Breadrumb/Breadcrumb.js index bab9ff2d..21efbe85 100644 --- a/src/components/Breadrumb/Breadcrumb.js +++ b/src/components/Breadrumb/Breadcrumb.js @@ -2,9 +2,9 @@ import React from 'react'; import StyledBreadcrumb from './Breadcrumb.styled'; -const Breadcrumb = props => { +const Breadcrumb = ({variant, children}) => { return ( - {props.children} + {children} ); } diff --git a/src/components/Breadrumb/BreadcrumbItem.js b/src/components/Breadrumb/BreadcrumbItem.js index db751c20..fae1857e 100644 --- a/src/components/Breadrumb/BreadcrumbItem.js +++ b/src/components/Breadrumb/BreadcrumbItem.js @@ -4,7 +4,7 @@ import StyledBreadcrumbItem from './BreadcrumbItem.styled'; const BreadcrumbItem = props => { return ( - + {props.href ? {props.children} : props.children } ); diff --git a/src/components/Breadrumb/BreadcrumbItem.styled.js b/src/components/Breadrumb/BreadcrumbItem.styled.js index d15e7cb0..6c6189bd 100644 --- a/src/components/Breadrumb/BreadcrumbItem.styled.js +++ b/src/components/Breadrumb/BreadcrumbItem.styled.js @@ -1,6 +1,7 @@ import styled from 'styled-components'; const DefaultStyledBreadCrumbItem = styled.li` + color: ${({active}) => active ? '#6c757d' : 'red'}; & + & { padding-left: 0.5rem; } From 680cfdd2883fa1cae9887ff1256b44c8abb27df1 Mon Sep 17 00:00:00 2001 From: Jaro Date: Fri, 20 Sep 2024 14:32:56 +0200 Subject: [PATCH 11/16] Added Tabs folder and files --- 04/Task04.js | 14 +++++++++++++- src/components/Tabs/Tab.js | 11 +++++++++++ src/components/Tabs/Tab.styled.js | 9 +++++++++ src/components/Tabs/Tabs.js | 11 +++++++++++ src/components/Tabs/Tabs.styled.js | 9 +++++++++ src/components/Tabs/index.js | 6 ++++++ 6 files changed, 59 insertions(+), 1 deletion(-) create mode 100644 src/components/Tabs/Tab.js create mode 100644 src/components/Tabs/Tab.styled.js create mode 100644 src/components/Tabs/Tabs.js create mode 100644 src/components/Tabs/Tabs.styled.js create mode 100644 src/components/Tabs/index.js diff --git a/04/Task04.js b/04/Task04.js index 8a8e5b21..f6ecd4d5 100644 --- a/04/Task04.js +++ b/04/Task04.js @@ -2,6 +2,8 @@ import React from 'react'; import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap'; +import { Tabs, Tab } from './../src/components/Tabs' + const Task04 = () => { return ( @@ -19,7 +21,17 @@ const Task04 = () => { - Tabs! + + +

    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.

    +     +     ) diff --git a/src/components/Tabs/Tab.js b/src/components/Tabs/Tab.js new file mode 100644 index 00000000..27656aa7 --- /dev/null +++ b/src/components/Tabs/Tab.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { StyledTab } from './Tab.styled'; + +const Tab = props => { + return ( + {props.children} + ); +} + +export default Tab; \ No newline at end of file diff --git a/src/components/Tabs/Tab.styled.js b/src/components/Tabs/Tab.styled.js new file mode 100644 index 00000000..48646eaa --- /dev/null +++ b/src/components/Tabs/Tab.styled.js @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +const DefaultStyledTab = styled.div` + border: 1px solid red +` + +const StyledTab = DefaultStyledTab + +export { StyledTab }; \ 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..9e0774fc --- /dev/null +++ b/src/components/Tabs/Tabs.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { StyledTabs } from './Tabs.styled'; + +const Tabs = props => { + return ( + {props.children} + ); +} + +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..47ffdafb --- /dev/null +++ b/src/components/Tabs/Tabs.styled.js @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +const DefaultStyledTabs = styled.div` + border: 1px solid red +` + +const StyledTabs = DefaultStyledTabs + +export { StyledTabs }; \ No newline at end of file diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js new file mode 100644 index 00000000..f5bf3acc --- /dev/null +++ b/src/components/Tabs/index.js @@ -0,0 +1,6 @@ +import React from 'react' + +export const Tabs = () =>
      +export const Tab = () =>
    • Item
      • + + \ No newline at end of file From 4c8f331d62de1509600a2fbbabaaddf47d7d2c9c Mon Sep 17 00:00:00 2001 From: Jaro Date: Fri, 20 Sep 2024 15:20:03 +0200 Subject: [PATCH 12/16] progress in ex 4 --- src/components/Tabs/Tab.styled.js | 2 +- src/components/Tabs/Tabs.js | 32 ++++++++++++++++++++++-------- src/components/Tabs/Tabs.styled.js | 31 +++++++++++++++++++++++------ src/components/Tabs/index.js | 7 ++++--- 4 files changed, 54 insertions(+), 18 deletions(-) diff --git a/src/components/Tabs/Tab.styled.js b/src/components/Tabs/Tab.styled.js index 48646eaa..60a51875 100644 --- a/src/components/Tabs/Tab.styled.js +++ b/src/components/Tabs/Tab.styled.js @@ -1,7 +1,7 @@ import styled from 'styled-components'; const DefaultStyledTab = styled.div` - border: 1px solid red + ` const StyledTab = DefaultStyledTab diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js index 9e0774fc..b96a3ca8 100644 --- a/src/components/Tabs/Tabs.js +++ b/src/components/Tabs/Tabs.js @@ -1,11 +1,27 @@ -import React from 'react'; +import React, {useState} from "react"; -import { StyledTabs } from './Tabs.styled'; +import { StyledTabs } from "./Tabs.styled"; -const Tabs = props => { - return ( - {props.children} - ); -} +const Tabs = ({ children, defaultActiveKey }) => { -export default Tabs; \ No newline at end of file + const [state, setState ] = useState(defaultActiveKey) + + function handleClick (key) { + setState(key) + } + + return ( + <> + + {React.Children.map(children, (child) => ( + handleClick(child.props.eventKey)}>{child.props.title} + ))} + + {React.Children.map(children, (child) =>
      {Child}
      )} + + + + ); +}; + +export default Tabs; diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js index 47ffdafb..67edc0a2 100644 --- a/src/components/Tabs/Tabs.styled.js +++ b/src/components/Tabs/Tabs.styled.js @@ -1,9 +1,28 @@ -import styled from 'styled-components'; +import styled from "styled-components"; -const DefaultStyledTabs = styled.div` - border: 1px solid red -` +const StyledTabs = styled.nav` + color: #007bff; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding-left: 0; + margin-bottom: 0; + list-style: none; + border-bottom: 1px solid #dee2e6; + + a { + 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; + } +`; -const StyledTabs = DefaultStyledTabs +const StyledTabsChild = styled.div` + display: block; +` -export { StyledTabs }; \ No newline at end of file +export { StyledTabs }; diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js index f5bf3acc..d671e2b5 100644 --- a/src/components/Tabs/index.js +++ b/src/components/Tabs/index.js @@ -1,6 +1,7 @@ -import React from 'react' +import Tabs from './Tabs' +import Tab from './Tab -export const Tabs = () =>
        -export const Tab = () =>
      • Item
        • + +export { Tabs, Tab } \ No newline at end of file From 79ef3302a7b659913ab7b9dc2683ab708956a6da Mon Sep 17 00:00:00 2001 From: Jarek Stelmach Date: Sat, 21 Sep 2024 23:52:39 +0200 Subject: [PATCH 13/16] added changes to Tabs files --- src/components/App.js | 2 +- src/components/Button/Button.styled.js | 2 +- src/components/Tabs/Tabs.js | 10 ++++----- src/components/Tabs/Tabs.styled.js | 29 ++++++++++++++------------ src/components/Tabs/index.js | 2 +- 5 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index 676aadc5..3831f1a8 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -36,7 +36,7 @@ const theme = { ` }, - Button: { + button: { variant: { primary: css` color: #fff; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index a38bfc98..d1373fa6 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -4,7 +4,7 @@ const DefaultStyledButton = styled.button` display: inline-block; font-weight: 400; color: #212529; - text-aling: center; + text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js index b96a3ca8..ea17672e 100644 --- a/src/components/Tabs/Tabs.js +++ b/src/components/Tabs/Tabs.js @@ -1,6 +1,6 @@ -import React, {useState} from "react"; +import React, {Children, useState} from "react"; -import { StyledTabs } from "./Tabs.styled"; +import { StyledTabs, StyledTabsChild, StyledTabsLink } from "./Tabs.styled"; const Tabs = ({ children, defaultActiveKey }) => { @@ -13,11 +13,11 @@ const Tabs = ({ children, defaultActiveKey }) => { return ( <> - {React.Children.map(children, (child) => ( - handleClick(child.props.eventKey)}>{child.props.title} + {Children.map(children, (child) => ( + handleClick(child.props.eventKey)}>{child.props.title} ))} - {React.Children.map(children, (child) =>
        {Child}
        )} + {Children.map(children, (child) => {child})} diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js index 67edc0a2..f5df6c41 100644 --- a/src/components/Tabs/Tabs.styled.js +++ b/src/components/Tabs/Tabs.styled.js @@ -1,7 +1,7 @@ -import styled from "styled-components"; +import styled, {css} from "styled-components"; const StyledTabs = styled.nav` - color: #007bff; + color: #007bff; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; @@ -10,19 +10,22 @@ const StyledTabs = styled.nav` margin-bottom: 0; list-style: none; border-bottom: 1px solid #dee2e6; +` + +const DefaultStyledTabsLink = styled.a` + 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; +` - a { - 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; - } -`; +const StyledTabsLink = styled(DefaultStyledTabsLink)(props => props.active && css` + `) const StyledTabsChild = styled.div` - display: block; + display: ${props => (props.active ? "block" : "none")}; ` -export { StyledTabs }; +export { StyledTabs, StyledTabsChild, StyledTabsLink } diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js index d671e2b5..7c33798b 100644 --- a/src/components/Tabs/index.js +++ b/src/components/Tabs/index.js @@ -1,5 +1,5 @@ import Tabs from './Tabs' -import Tab from './Tab +import Tab from './Tab' export { Tabs, Tab } From 6a0856c203340dc502280d544ecd7f35cf24a734 Mon Sep 17 00:00:00 2001 From: Jarek Stelmach Date: Sun, 22 Sep 2024 22:56:03 +0200 Subject: [PATCH 14/16] Finished ex4 --- src/components/Tabs/Tabs.js | 2 +- src/components/Tabs/Tabs.styled.js | 32 ++++++++++++++++++++++++++++-- 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js index ea17672e..dd4693bd 100644 --- a/src/components/Tabs/Tabs.js +++ b/src/components/Tabs/Tabs.js @@ -14,7 +14,7 @@ const Tabs = ({ children, defaultActiveKey }) => { <> {Children.map(children, (child) => ( - handleClick(child.props.eventKey)}>{child.props.title} + !child.props.disabled && handleClick(child.props.eventKey)} disabled={child.props.disabled}>{child.props.title} ))} {Children.map(children, (child) => {child})} diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js index f5df6c41..65bb09ed 100644 --- a/src/components/Tabs/Tabs.styled.js +++ b/src/components/Tabs/Tabs.styled.js @@ -19,10 +19,38 @@ const DefaultStyledTabsLink = styled.a` border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; + + &:hover { + border-color: #e9ecef #e9ecef #dee2e6; + cursor: pointer; + } ` -const StyledTabsLink = styled(DefaultStyledTabsLink)(props => props.active && css` - `) +const StyledTabsLinkDisabled = styled(DefaultStyledTabsLink)( + props => + props.disabled && + css` + &&, + &&:hover { + color: #6c757d; + background-color: transparent; + border-color: transparent; + } + ` +) + +const StyledTabsLink = styled(StyledTabsLinkDisabled)( + props => + props.active && + css` + &&, + &&:hover { + color: #495057; + background-color: #fff; + border-color: #dee2e6 #dee2e6 #fff; + } + ` +) const StyledTabsChild = styled.div` display: ${props => (props.active ? "block" : "none")}; From e4e762fdbaf7e2ee98f6fc77ccfd4f9a69a1e657 Mon Sep 17 00:00:00 2001 From: Jaro Date: Mon, 23 Sep 2024 15:24:01 +0200 Subject: [PATCH 15/16] Almost finished ex5 --- 05/Task05.js | 15 ++++++++++++++- src/components/Card/Card.js | 11 +++++++++++ src/components/Card/Card.styled.js | 19 +++++++++++++++++++ src/components/Card/CardBody.js | 17 +++++++++++++++++ src/components/Card/CardImg.js | 20 ++++++++++++++++++++ src/components/Card/CardText.js | 15 +++++++++++++++ src/components/Card/CardTitle.js | 17 +++++++++++++++++ src/components/Card/index.js | 14 ++++++++++++++ 8 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 src/components/Card/Card.js create mode 100644 src/components/Card/Card.styled.js create mode 100644 src/components/Card/CardBody.js create mode 100644 src/components/Card/CardImg.js create mode 100644 src/components/Card/CardText.js create mode 100644 src/components/Card/CardTitle.js create mode 100644 src/components/Card/index.js diff --git a/05/Task05.js b/05/Task05.js index 6cebfeda..19e9d619 100644 --- a/05/Task05.js +++ b/05/Task05.js @@ -2,6 +2,9 @@ import React from 'react'; import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap'; +import Button from './../src/components/Button' +import Card from './../src/components/Card' + const Task05 = () => { return ( @@ -19,7 +22,17 @@ const Task05 = () => { - Card! + + + + Card Title + + Some quick example text to build on the card title and make up the bulk of + the card's content. + + + + ) diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js new file mode 100644 index 00000000..7979b818 --- /dev/null +++ b/src/components/Card/Card.js @@ -0,0 +1,11 @@ +import React from 'react'; + +import { StyledCard } from './Card.styled'; + +const Card = ({ children, style }) => { + return ( + {children} + ); +} + +export default Card; \ No newline at end of file diff --git a/src/components/Card/Card.styled.js b/src/components/Card/Card.styled.js new file mode 100644 index 00000000..39086d49 --- /dev/null +++ b/src/components/Card/Card.styled.js @@ -0,0 +1,19 @@ +import styled from 'styled-components'; + +const StyledCard = 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,.125) + border-radius: 0.25rem +` + + + +export { StyledCard }; \ 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..cb77b1e9 --- /dev/null +++ b/src/components/Card/CardBody.js @@ -0,0 +1,17 @@ +import React from 'react'; +import styled from 'styled-components'; + +const StyledCardBody = styled.div` + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-height: 1px; + padding: 1.25rem; +` + +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..286c4a31 --- /dev/null +++ b/src/components/Card/CardImg.js @@ -0,0 +1,20 @@ +import React from 'react'; +import styled from 'styled-components'; + +const StyledCardImg = styled.img` + flex-shrink: 0; + width: 100%; + border-top-left-radius: calc(0.25rem - 1px); + border-top-right-radius: calc(0.25rem - 1px); + vertical-align: middle; + border-style: none; + +` + +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..7d49e402 --- /dev/null +++ b/src/components/Card/CardText.js @@ -0,0 +1,15 @@ +import React from 'react'; +import styled from 'styled-components'; + +const StyledCardText = styled.div` + margin-top: 0; + margin-bottom: 1rem; +` + +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..6f0b21ad --- /dev/null +++ b/src/components/Card/CardTitle.js @@ -0,0 +1,17 @@ +import React from 'react'; +import styled from 'styled-components'; + +const StyledCardTitle = styled.div` + margin-bottom: 0.75rem; + font-size: 1.25rem; + font-weight: 500; + line-height: 1.2; +` + +const CardTitle = ({ Children }) => { + return ( + {Children} + ); +} + +export default CardTitle; \ No newline at end of file diff --git a/src/components/Card/index.js b/src/components/Card/index.js new file mode 100644 index 00000000..55920ca2 --- /dev/null +++ b/src/components/Card/index.js @@ -0,0 +1,14 @@ +import React from 'react' + +import Card from './Card' +import CardImg from './CardImg' +import CardBody from './CardBody' +import CardTitle from './CardTitle' +import CardText from './CardText' + +export default Object.assign(Card, { + "Img": CardImg, + 'Body': CardBody, + 'Title': CardTitle, + 'Text': CardText, +}) \ No newline at end of file From 80f2e482a91308a434daf9437f47318854267274 Mon Sep 17 00:00:00 2001 From: Jarek Stelmach Date: Wed, 25 Sep 2024 18:18:16 +0200 Subject: [PATCH 16/16] Finished ex5 --- src/components/Card/CardBody.js | 4 ++-- src/components/Card/CardImg.js | 2 +- src/components/Card/CardText.js | 4 ++-- src/components/Card/CardTitle.js | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js index cb77b1e9..7ddf0f8c 100644 --- a/src/components/Card/CardBody.js +++ b/src/components/Card/CardBody.js @@ -8,9 +8,9 @@ const StyledCardBody = styled.div` padding: 1.25rem; ` -const CardBody = ({ Children }) => { +const CardBody = ({ children }) => { return ( - {Children} + {children} ); } diff --git a/src/components/Card/CardImg.js b/src/components/Card/CardImg.js index 286c4a31..1c8857b6 100644 --- a/src/components/Card/CardImg.js +++ b/src/components/Card/CardImg.js @@ -13,7 +13,7 @@ const StyledCardImg = styled.img` const CardImg = ({ src }) => { return ( - + ); } diff --git a/src/components/Card/CardText.js b/src/components/Card/CardText.js index 7d49e402..fd072273 100644 --- a/src/components/Card/CardText.js +++ b/src/components/Card/CardText.js @@ -6,9 +6,9 @@ const StyledCardText = styled.div` margin-bottom: 1rem; ` -const CardText = ({ Children }) => { +const CardText = ({ children }) => { return ( - {Children} + {children} ); } diff --git a/src/components/Card/CardTitle.js b/src/components/Card/CardTitle.js index 6f0b21ad..64422b71 100644 --- a/src/components/Card/CardTitle.js +++ b/src/components/Card/CardTitle.js @@ -8,9 +8,9 @@ const StyledCardTitle = styled.div` line-height: 1.2; ` -const CardTitle = ({ Children }) => { +const CardTitle = ({ children }) => { return ( - {Children} + {children} ); }