From 59c274997ef90c4855eb327c64bde7928d376463 Mon Sep 17 00:00:00 2001 From: Marcin Date: Thu, 12 Oct 2023 12:20:56 +0200 Subject: [PATCH 01/14] init 01 --- 01/Task01.js | 43 +++++++++++++++++++++------- src/app.js | 1 + src/components/Alert/Alert.js | 7 ++--- src/components/Alert/Alert.styled.js | 8 ++++-- 4 files changed, 42 insertions(+), 17 deletions(-) diff --git a/01/Task01.js b/01/Task01.js index c12ef98b..f495b57d 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -1,20 +1,41 @@ 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 themeSettings = { + color: 'green', + backgroundColor: 'tomato', +}; + const Task01 = () => { - return ( - - - Uwaga! Styled Components nadchodzi! - - - Uwaga! Styled Components nadchodzi! - - - ) -} + return ( + + + + Uwaga! Styled Components nadchodzi! + + + Uwaga! Styled Components nadchodzi! + + + + + {/* to ma wygladac w ten sposob? czyli props.variant musi dobierac style z propsa ktory przekazuje - czyli gdzies pod spodem musze napisac tyle "typow" ile kolorow chce miec w wariantach? */} + {/* */} + {/* */} + + Uwaga! Styled Components nadchodzi! + + + + Uwaga! Styled Components nadchodzi! + + + + ); +}; export default Task01; 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..5fb5e478 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -3,9 +3,8 @@ 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..a2093073 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,7 +1,11 @@ import styled from 'styled-components'; const StyledAlert = styled.div` - display: block; -` + display: block; + color: ${props => props.theme.color}; + padding:15px; + border-radius: 6px; + background-color: ${props => props.theme.backgroundColor}; +`; export { StyledAlert }; \ No newline at end of file From c23c26a7afdb80032508fdf557ef615e78533fda Mon Sep 17 00:00:00 2001 From: Marcin Date: Thu, 12 Oct 2023 12:42:02 +0200 Subject: [PATCH 02/14] 01 --- 01/Task01.js | 25 +++++++++++++++---------- src/components/Alert/Alert.js | 2 +- src/components/Alert/Alert.styled.js | 3 --- 3 files changed, 16 insertions(+), 14 deletions(-) diff --git a/01/Task01.js b/01/Task01.js index f495b57d..1352acde 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -5,8 +5,14 @@ import Alert from './../src/components/Alert'; import { Row, Col, Alert as RBAlert } from 'react-bootstrap'; const themeSettings = { - color: 'green', - backgroundColor: 'tomato', + primary: { + color: 'blue', + backgroundColor: 'aquamarine', + }, + secondary: { + color: 'green', + backgroundColor: 'lightgreen', + }, }; const Task01 = () => { @@ -21,21 +27,20 @@ const Task01 = () => { - - {/* to ma wygladac w ten sposob? czyli props.variant musi dobierac style z propsa ktory przekazuje - czyli gdzies pod spodem musze napisac tyle "typow" ile kolorow chce miec w wariantach? */} - {/* */} - {/* */} + + + Uwaga! Styled Components nadchodzi! + + + Uwaga! Styled Components nadchodzi! - - Uwaga! Styled Components nadchodzi! - ); }; - export default Task01; + diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 5fb5e478..55346c18 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -3,7 +3,7 @@ import React from 'react'; import { StyledAlert } from './Alert.styled'; const Alert = props => { - + console.log(props); return {props.children}; }; diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index a2093073..9d996b38 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,10 +1,7 @@ import styled from 'styled-components'; const StyledAlert = styled.div` - display: block; color: ${props => props.theme.color}; - padding:15px; - border-radius: 6px; background-color: ${props => props.theme.backgroundColor}; `; From 5fe7f2d9bb464a05310ebcf6a3aa038ffceff8dd Mon Sep 17 00:00:00 2001 From: Marcin Date: Thu, 12 Oct 2023 13:13:05 +0200 Subject: [PATCH 03/14] new colors kit --- 01/Task01.js | 8 ++++---- src/components/Alert/Alert.styled.js | 3 +++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/01/Task01.js b/01/Task01.js index 1352acde..684047c0 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -6,12 +6,12 @@ import { Row, Col, Alert as RBAlert } from 'react-bootstrap'; const themeSettings = { primary: { - color: 'blue', - backgroundColor: 'aquamarine', + color: '#004085', + backgroundColor: '#CCE5FF', }, secondary: { - color: 'green', - backgroundColor: 'lightgreen', + color: '#383D41', + backgroundColor: '#E2E3E5', }, }; diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index 9d996b38..849bb7a9 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,6 +1,9 @@ import styled from 'styled-components'; const StyledAlert = styled.div` + padding: 15px; + border-radius: 6px; + margin-bottom: 10px; color: ${props => props.theme.color}; background-color: ${props => props.theme.backgroundColor}; `; From 50b186afbe264069b9b68d34d447dea4247324ee Mon Sep 17 00:00:00 2001 From: Marcin Date: Thu, 12 Oct 2023 14:18:36 +0200 Subject: [PATCH 04/14] theme not working --- 02/Task02.js | 75 ++++++++++++++++++++++---- src/components/Alert/Alert.js | 1 - src/components/Button/Button.js | 10 ++++ src/components/Button/Button.styled.js | 11 ++++ 4 files changed, 85 insertions(+), 12 deletions(-) diff --git a/02/Task02.js b/02/Task02.js index 0894136e..11d36f11 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -1,20 +1,73 @@ import React from 'react'; +import styled from 'styled-components'; + +import { ThemeProvider } from 'react-bootstrap'; import Button from './../src/components/Button'; import { Row, Col, Button as RBButton } from 'react-bootstrap'; + + +const CustomButton = styled.button` + font-size: 1em; + margin: 1em; + padding: 0.25em 1em; + border-radius: 3px; + color: ${props => props.theme.main}; + border: 2px solid ${props => props.theme.main}; + background-color: ${props => props.theme.backgroundColor}; +`; + +CustomButton.defaultProps = { + theme: { + main: 'red', + backgroundColor: 'black', + }, +}; + +const theme = { + main: 'blue', + backgroundColor: 'blue', +}; + const Task02 = () => { - return ( - - - Button! - - - Button! - - -) -} + return ( + + + + Button! + + + Button! + + + Button! + + + Button! + + + Button! + + + Button! + + + Button! + + + Button! + + + + + DEFAULT + + THEMED + + + ); +}; export default Task02; diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 55346c18..3d79f7b4 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -3,7 +3,6 @@ import React from 'react'; import { StyledAlert } from './Alert.styled'; const Alert = props => { - console.log(props); return {props.children}; }; diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index e69de29b..4f53134e 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -0,0 +1,10 @@ +import React from 'react'; + +import { StyledButton } from './Alert.styled'; + +const Button = props => { + console.log(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..08b71085 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +const StyledButton = styled.div` + padding: 15px; + border-radius: 6px; + margin-bottom: 10px; + color: ${props => props.theme.color}; + background-color: ${props => props.theme.backgroundColor}; +`; + +export { StyledButton }; From bf8be0203682741eae894bc7cb89bfeeaef21e9d Mon Sep 17 00:00:00 2001 From: Marcin Date: Thu, 12 Oct 2023 14:37:59 +0200 Subject: [PATCH 05/14] theme not working --- 02/Task02.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/02/Task02.js b/02/Task02.js index 11d36f11..b95c1f15 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -61,9 +61,9 @@ const Task02 = () => { - DEFAULT + THEMED - THEMED + DeFAULT ); From ab2c47f9140baf1ad3e218eb57dc6189910e2142 Mon Sep 17 00:00:00 2001 From: Marcin Date: Thu, 12 Oct 2023 21:34:59 +0200 Subject: [PATCH 06/14] hover, active, disabled not working --- 01/Task01.js | 22 +++------- 02/Task02.js | 60 +++++++++++++------------- src/components/Alert/Alert.js | 2 +- src/components/Alert/Alert.styled.js | 27 ++++++++++-- src/components/Button/Button.js | 12 ++++-- src/components/Button/Button.styled.js | 60 +++++++++++++++++++++++--- src/components/Button/index.js | 4 ++ 7 files changed, 126 insertions(+), 61 deletions(-) diff --git a/01/Task01.js b/01/Task01.js index 684047c0..ba3d871e 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -2,19 +2,9 @@ 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 themeSettings = { - primary: { - color: '#004085', - backgroundColor: '#CCE5FF', - }, - secondary: { - color: '#383D41', - backgroundColor: '#E2E3E5', - }, -}; - const Task01 = () => { return ( @@ -27,16 +17,16 @@ const Task01 = () => { - - + + Uwaga! Styled Components nadchodzi! - - - + Uwaga! Styled Components nadchodzi! + {/* czemu alert bez styli wewnatrz ThemePRovidera nie ma tych defaultowych styli?? */} + {/* default styles */} ); diff --git a/02/Task02.js b/02/Task02.js index b95c1f15..2e0ede81 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -1,35 +1,11 @@ import React from 'react'; -import styled from 'styled-components'; -import { ThemeProvider } from 'react-bootstrap'; +import { ThemeProvider } from 'styled-components'; +import { variant } from './../src/components/Button/Button.styled'; import Button from './../src/components/Button'; import { Row, Col, Button as RBButton } from 'react-bootstrap'; - - -const CustomButton = styled.button` - font-size: 1em; - margin: 1em; - padding: 0.25em 1em; - border-radius: 3px; - color: ${props => props.theme.main}; - border: 2px solid ${props => props.theme.main}; - background-color: ${props => props.theme.backgroundColor}; -`; - -CustomButton.defaultProps = { - theme: { - main: 'red', - backgroundColor: 'black', - }, -}; - -const theme = { - main: 'blue', - backgroundColor: 'blue', -}; - const Task02 = () => { return ( @@ -60,14 +36,38 @@ const Task02 = () => { - - THEMED + + + + + + + + + + + + - DeFAULT ); }; export default Task02; - diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 3d79f7b4..e3f32c5e 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -3,7 +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 849bb7a9..87c6a272 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,11 +1,30 @@ import styled from 'styled-components'; const StyledAlert = styled.div` - padding: 15px; - border-radius: 6px; - margin-bottom: 10px; + 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/Button/Button.js b/src/components/Button/Button.js index 4f53134e..2d7d70bf 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -1,10 +1,14 @@ +// button.js import React from 'react'; -import { StyledButton } from './Alert.styled'; +import { StyledButton } from './Button.styled'; const Button = props => { - console.log(props); - return {props.children}; + return ( + + {props.children} + + ); }; -export default Button; \ No newline at end of file +export default Button; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index 08b71085..dcd78c7f 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -1,11 +1,59 @@ +//buton.styled.js import styled from 'styled-components'; -const StyledButton = styled.div` - padding: 15px; - border-radius: 6px; - margin-bottom: 10px; - color: ${props => props.theme.color}; +const StyledButton = styled.button` + display: inline-block; + border-radius: 5px; + color: #ffff; + border: 2px solid transparent; background-color: ${props => props.theme.backgroundColor}; + padding: ${props => (props.size === 'lg' ? size.lg : size.sm)}; + font-size: ${props => (props.size === 'lg' ? '20px' : '14px')}; + + &:hover { + background-color: blue; + } + + &:active, + &[aria-pressed='true'] { + background-color: ${props => props.theme.activeBgc}; + } + + &:focus { + outline: 3px solid ${props => props.theme.borderColor}; + } + + button:disabled, + button[disabled] { + border: 1px solid black; + background-color: red; + color: blue; + } `; -export { StyledButton }; +StyledButton.defaultProps = { + theme: { + backgroundColor: 'black', + borderColor: 'transparent', + activeBgc: 'transparent', + }, +}; + +const variant = { + primary: { + backgroundColor: '#007BFF', + borderColor: '#6EA8FE', + activeBgc: '#0062CC', + }, + secondary: { + backgroundColor: '#6C757D', + borderColor: '#DEE2E6', + activeBgc: '#545B62', + }, +}; +const size = { + lg: '8px 16px', + sm: '4px 8px', +}; + +export { StyledButton, variant }; 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 d6f87624c53b854296c7ceb5d54b24f5e8d15e2b Mon Sep 17 00:00:00 2001 From: Marcin Date: Fri, 13 Oct 2023 15:16:12 +0200 Subject: [PATCH 07/14] 02 --- 02/Task02.js | 56 +++++-------------- src/components/Button/Button.js | 9 +++- src/components/Button/Button.styled.js | 74 ++++++++++++++++---------- 3 files changed, 68 insertions(+), 71 deletions(-) diff --git a/02/Task02.js b/02/Task02.js index 2e0ede81..9d32945b 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -10,61 +10,31 @@ const Task02 = () => { return ( - - Button! - Button! - - Button! - - - Button! - - - Button! - - - Button! - - + Button! - + Button! + Button! - - - - - - - - - - - - + + + + + + {/* */} ); diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 2d7d70bf..63414a32 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -4,8 +4,15 @@ import React from 'react'; import { StyledButton } from './Button.styled'; const Button = props => { + + return ( - + {props.children} ); diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index dcd78c7f..42e9a61e 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -2,58 +2,78 @@ import styled from 'styled-components'; const StyledButton = styled.button` - display: inline-block; border-radius: 5px; - color: #ffff; - border: 2px solid transparent; - background-color: ${props => props.theme.backgroundColor}; - padding: ${props => (props.size === 'lg' ? size.lg : size.sm)}; - font-size: ${props => (props.size === 'lg' ? '20px' : '14px')}; + color: ${props => props.theme.color}; + background-color: ${props => props.theme.background}; + border: 1px solid ${props => props.theme.mainBorderColor}; - &:hover { - background-color: blue; + /* 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.activeBackground}; + &:hover { + background-color: ${props => props.theme.activeBackground}; + } } - &:active, - &[aria-pressed='true'] { - background-color: ${props => props.theme.activeBgc}; + &:hover { + background-color: ${props => props.theme.hoverColor}; } &:focus { - outline: 3px solid ${props => props.theme.borderColor}; + outline: 3px solid ${props => props.theme.focusOutlineColor}; } - button:disabled, - button[disabled] { - border: 1px solid black; - background-color: red; - color: blue; + :disabled { + background-color: ${props => props.theme.disabled}; + cursor: pointer; } `; StyledButton.defaultProps = { theme: { - backgroundColor: 'black', - borderColor: 'transparent', - activeBgc: 'transparent', + color: '#000', + background: '#fff', + activeBackground: 'grey', + mainBorderColor: '#000', + hoverColor: '#808080', + focusOutlineColor: 'black', + disabled: 'grey', }, }; const variant = { primary: { - backgroundColor: '#007BFF', - borderColor: '#6EA8FE', - activeBgc: '#0062CC', + color: '#ffff', + background: '#007BFF', + activeBackground: '#0062cc', + mainBorderColor: 'transparent', + hoverColor: '#0069d9', + focusOutlineColor: '#92C7FF', + disabled: '#59A9FF', }, secondary: { - backgroundColor: '#6C757D', - borderColor: '#DEE2E6', - activeBgc: '#545B62', + color: '#ffff', + background: '#6C757D', + activeBackground: '#545B62', + mainBorderColor: 'transparent', + hoverColor: '#5A6268', + focusOutlineColor: '#92C7FF', + disabled: '#9FA5AA', }, }; + const size = { lg: '8px 16px', sm: '4px 8px', }; -export { StyledButton, variant }; +export { StyledButton, variant }; \ No newline at end of file From 31e6018c60bf152dd12a3cb9f30e2ed52bffee37 Mon Sep 17 00:00:00 2001 From: Marcin Date: Fri, 13 Oct 2023 15:20:47 +0200 Subject: [PATCH 08/14] outline style fixed --- src/components/Button/Button.styled.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index 42e9a61e..7e765333 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -66,7 +66,7 @@ const variant = { activeBackground: '#545B62', mainBorderColor: 'transparent', hoverColor: '#5A6268', - focusOutlineColor: '#92C7FF', + focusOutlineColor: '#C0C4C8', disabled: '#9FA5AA', }, }; From b02ccff37454d04ca3787056d7a706d5e8637af1 Mon Sep 17 00:00:00 2001 From: Marcin Date: Sun, 15 Oct 2023 12:41:56 +0200 Subject: [PATCH 09/14] 02 with provider --- 02/Task02.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/02/Task02.js b/02/Task02.js index 9d32945b..61fabf4b 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -1,7 +1,7 @@ import React from 'react'; import { ThemeProvider } from 'styled-components'; -import { variant } from './../src/components/Button/Button.styled'; +import { theme } from './../src/components/Button/Button.styled'; import Button from './../src/components/Button'; import { Row, Col, Button as RBButton } from 'react-bootstrap'; @@ -22,19 +22,14 @@ const Task02 = () => { Button! - {/* w buttonach nie mozna stylami przesylac, bo nadpisza inline stylami i w tedy active i inne pseudoklasy musialby byc stytlowaNE za pomoca important, wiec zostaje takie rozwiazanie, button musi zostac owrapowany themeProviderem, i w themeProvider sie podaje wariant zamiast w atrybucie przycisku... */} - {/* ale za to Button ma swoje customowe style jesli jest poza themeProviderem... */} - - - - + + + - - - - {/* */} ); From 4976531824f5db1283c5142c01add995c736ddb4 Mon Sep 17 00:00:00 2001 From: Marcin Date: Sun, 15 Oct 2023 16:26:01 +0200 Subject: [PATCH 10/14] 03 --- 03/Task03.js | 41 ++++++++++--------- src/components/Breadcrumb/Breadcrumb.js | 12 ++++++ .../Breadcrumb/Breadcrumb.styled.js | 27 ++++++++++++ src/components/Breadcrumb/Bredcrumb.Item.js | 14 +++++++ src/components/Breadcrumb/index.js | 4 ++ src/components/Button/Button.js | 1 + src/components/Button/Button.styled.js | 23 ++++++----- 7 files changed, 92 insertions(+), 30 deletions(-) create mode 100644 src/components/Breadcrumb/Breadcrumb.js create mode 100644 src/components/Breadcrumb/Breadcrumb.styled.js create mode 100644 src/components/Breadcrumb/Bredcrumb.Item.js create mode 100644 src/components/Breadcrumb/index.js 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/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..0d858ac8 --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.styled.js @@ -0,0 +1,27 @@ +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 63414a32..b7e4183b 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -8,6 +8,7 @@ const Button = props => { return ( props.theme.color}; - background-color: ${props => props.theme.background}; - border: 1px solid ${props => props.theme.mainBorderColor}; + 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; @@ -18,28 +18,28 @@ const StyledButton = styled.button` font-size: ${props => (props.size === 'lg' ? '20px' : null)}; &.active { - background-color: ${props => props.theme.activeBackground}; + background-color: ${props => props.theme[props.variant].activeBackground}; &:hover { - background-color: ${props => props.theme.activeBackground}; + background-color: ${props => props.theme[props.variant].activeBackground}; } } &:hover { - background-color: ${props => props.theme.hoverColor}; + background-color: ${props => props.theme[props.variant].hoverColor}; } &:focus { - outline: 3px solid ${props => props.theme.focusOutlineColor}; + outline: 3px solid ${props => props.theme[props.variant].focusOutlineColor}; } :disabled { - background-color: ${props => props.theme.disabled}; + background-color: ${props => props.theme[props.variant].disabled}; cursor: pointer; } `; StyledButton.defaultProps = { - theme: { + variant: { color: '#000', background: '#fff', activeBackground: 'grey', @@ -50,7 +50,7 @@ StyledButton.defaultProps = { }, }; -const variant = { +const theme = { primary: { color: '#ffff', background: '#007BFF', @@ -71,9 +71,10 @@ const variant = { }, }; + const size = { lg: '8px 16px', sm: '4px 8px', }; -export { StyledButton, variant }; \ No newline at end of file +export { StyledButton, theme }; \ No newline at end of file From 3e11cba0f572a1b1b0f5cf167bc450918e534f94 Mon Sep 17 00:00:00 2001 From: Marcin Date: Tue, 17 Oct 2023 16:45:57 +0200 Subject: [PATCH 11/14] 01 --- 01/Task01.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/01/Task01.js b/01/Task01.js index ba3d871e..ac59b15d 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -12,21 +12,17 @@ const Task01 = () => { Uwaga! Styled Components nadchodzi! - + Uwaga! Styled Components nadchodzi! - - Uwaga! Styled Components nadchodzi! - - + Uwaga! Styled Components nadchodzi! - {/* czemu alert bez styli wewnatrz ThemePRovidera nie ma tych defaultowych styli?? */} - {/* default styles */} + Uwaga! Styled defaultTheme Components nadchodzi! ); From b86ce00800b1c938bc964aa3b3be06af1317c136 Mon Sep 17 00:00:00 2001 From: Marcin Date: Tue, 17 Oct 2023 16:46:16 +0200 Subject: [PATCH 12/14] 04 --- 04/Task04.js | 81 ++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 57 insertions(+), 24 deletions(-) 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 From aec99f9fdd4b46b3ee39f84621bd41013da44336 Mon Sep 17 00:00:00 2001 From: Marcin Date: Tue, 17 Oct 2023 16:46:29 +0200 Subject: [PATCH 13/14] 05 --- 05/Task05.js | 58 +++++++++++++++++++++++++++++++++------------------- 1 file changed, 37 insertions(+), 21 deletions(-) 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; From 842dd54193361134a498b358a1a584f001b4add6 Mon Sep 17 00:00:00 2001 From: Marcin Date: Tue, 17 Oct 2023 16:47:00 +0200 Subject: [PATCH 14/14] components done --- .../Breadcrumb/Breadcrumb.styled.js | 2 + src/components/Card/Card.Body.js | 7 +++ src/components/Card/Card.Img.js | 8 +++ src/components/Card/Card.Text.js | 7 +++ src/components/Card/Card.Title.js | 8 +++ src/components/Card/Card.js | 8 +++ src/components/Card/Card.styled.js | 30 +++++++++ src/components/Card/index.js | 7 +++ src/components/Tab/Tab.js | 22 +++++++ src/components/Tab/Tab.styled.js | 63 +++++++++++++++++++ src/components/Tab/Tabs.js | 28 +++++++++ 11 files changed, 190 insertions(+) create mode 100644 src/components/Card/Card.Body.js create mode 100644 src/components/Card/Card.Img.js create mode 100644 src/components/Card/Card.Text.js create mode 100644 src/components/Card/Card.Title.js create mode 100644 src/components/Card/Card.js create mode 100644 src/components/Card/Card.styled.js create mode 100644 src/components/Card/index.js create mode 100644 src/components/Tab/Tab.js create mode 100644 src/components/Tab/Tab.styled.js create mode 100644 src/components/Tab/Tabs.js diff --git a/src/components/Breadcrumb/Breadcrumb.styled.js b/src/components/Breadcrumb/Breadcrumb.styled.js index 0d858ac8..934c3f10 100644 --- a/src/components/Breadcrumb/Breadcrumb.styled.js +++ b/src/components/Breadcrumb/Breadcrumb.styled.js @@ -1,6 +1,7 @@ import styled from 'styled-components'; const StyledNav = styled.nav``; + const StyledBreadCrumb = styled.ul` display: flex; justify-content: flex-start; @@ -11,6 +12,7 @@ const StyledBreadCrumb = styled.ul` background-color: #e9ecef; border-radius: 0.25rem; `; + const StyledItem = styled.li` color: #6c757d; &:not(:last-child):after { 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;