diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 4d29575..0000000 --- a/.gitignore +++ /dev/null @@ -1,23 +0,0 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - -# dependencies -/node_modules -/.pnp -.pnp.js - -# testing -/coverage - -# production -/build - -# misc -.DS_Store -.env.local -.env.development.local -.env.test.local -.env.production.local - -npm-debug.log* -yarn-debug.log* -yarn-error.log* diff --git a/README.md b/README.md deleted file mode 100644 index 9b74ece..0000000 --- a/README.md +++ /dev/null @@ -1,523 +0,0 @@ - - - - -# LAB | React Bulma Components - - - -## Introduction - - - -Do you know [Bulma](https://bulma.io/), a very nice alternative to Bootstrap as a CSS framework? We are going to create a simple website with Bulma and React! - - - -## Setup - - - -- Fork this repo - -- Clone this repo - -- Open the LAB and start: - - - -```bash - -$ cd lab-bulma-components - -$ npm install - -$ npm start - -``` - - - -## Submission - - - -- Upon completion, run the following commands: - - - -```bash - -git add . - -git commit -m "done" - -git push origin master - -``` - - - -- Create a Pull Request so we can check your work. - - - -## Getting Started - - - -Clean the `App.js` component so that it has the following structure: - - - -```jsx - -// src/App.js - -import "./App.css"; - - - -function App() { - -return
; - -} - -export default App; - -``` - - - -### Bulma installation - - - -To get Bulma, install the npm package: - - - -``` - -$ npm install bulma - -``` - - - -You will have to import Bulma CSS in the root component App.js. You can do it with the following line: - - - -```javascript - -import "bulma/css/bulma.css"; - -``` - - - -## Instructions - - - -### Iteration 1 | `Navbar` component - - - -To kick-off, create a new folder `src/components/` and inside it create two files: - - - -- `src/components/Navbar.js` and - -- `src/components/Navbar.css`. - - - -
- - - -This component should display a link to "Home", "Login" and "Signup" like in the following example: - - - -![](https://i.imgur.com/dMaNMeM.png) - - - -To help you, you can use the code from the [Bulma Transparent Navbar](https://bulma.io/documentation/components/navbar/#transparent-navbar). - - - -In the end, import the component and render it in the src/App.js. - - - -
- - - -### Iteration 2 | `FormField` component - - - -Following the previous example, inside the folder `src/components/` create two new files: - - - -- `src/components/FormField.js` and - - - -- `src/components/FormField.css`. - - - -Your task is to create a new component `FormField`. We want the component to be reusable and allow us to create custom inputs. The component should be customizable through props. You should set the **label**, **type**, and **placeholder** of the input based on the props. - - - -
- - - -Once ready, we will use the component in the following way: - - - -```jsx - -// JSX version - - - - - - - -``` - - - -The above component instances should render the following content in the DOM: - - - -```html - - - -
- -
- -
-
- - - -
- -
- -
-
- -``` - - - -Which should be visually displayed in the following way: - - - -![](https://i.imgur.com/8sKyKxI.png) - - - -The tag `label` and the input attributes `type` and `placeholder` should be set with the values coming from the props. After you've finished creating the component, import it and render it in App.js. - - - -If you get stuck, feel free to check the hint provided below. - - - -
- - - -Hint - - - -```jsx - -function FormField(props) { - -return ( -
- - {/* some other code goes here */} -
-); - -} - -``` - - - -
- - - -
- - - -### Iteration 3 | Signup Form Component - - - -In the `src/components/` folder, create a new component `SignupForm.js` that contains: - - - -- A `Navbar` - - - -- A `
` with - - - -- A `FormField` for name - - - -- A `FormField` for email - - - -- A `FormField` for password - - - -- A button for submitting the form - - - -When you finish creating the `SignupForm` component, render it in `App.js`. - - - -
- - - -### Iteration 4 | `CoolButton` Component - - - -Go ahead and create a new component `CoolButton.js` in the `src/components/` folder. - - - -The goal of this iteration is to create a component called `CoolButton`. The component will render a ` - - -``` - - - -Which should be visually displayed in the following way: - - - -![CoolButton content - Example](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/lab-bulma-buttons-1.png) - - - -If the `isSuccess` prop was passed you need to _convert_ it into a className for the button. You can check Bulma's documentation for the list of _button_ class names: https://bulma.io/documentation/elements/button. - - - -Props without the value like `isSuccess`, are known as **props that default to true**. You can check more about it [here](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true). - - - -Do you need a hint on how to access the value passed between the component's opening and the closing tag? Take a look at [React - props.children](https://reactjs.org/docs/glossary.html#propschildren). - - - -When finished, update your `Navbar` component to use the `CoolButton` component for the "Login" and "Signup" buttons. - - - -
- - - -### Iteration 5 | Bonus - - - -Update the `CoolButton` component so that it can be styled dynamically through props. - - - -You should convert the component's props into Bulma class names and set them as the button's `className`. - - - -Use the following object of values which maps props names to Bulma class names. - - - -```js - -{ - -// prop name: bulma class name - - isCentered: 'is-centered', - isActive: 'is-active', - isBlack: 'is-black', - isDanger: 'is-danger', - isDark: 'is-dark', - isFocused: 'is-focused', - isGrouped: 'is-grouped', - isHovered: 'is-hovered', - isInfo: 'is-info', - isInverted: 'is-inverted', - isLarge: 'is-large', - isLight: 'is-light', - isLink: 'is-link', - isLoading: 'is-loading', - isMedium: 'is-medium', - isOutlined: 'is-outlined', - isPrimary: 'is-primary', - isRight: 'is-right', - isRounded: 'is-rounded', - isSelected: 'is-selected', - isSmall: 'is-small', - isStatic: 'is-static', - isSuccess: 'is-success', - isText: 'is-text', - isWarning: 'is-warning', - isWhite: 'is-white' -} - -``` - - - -When finished, the component will be used like this: - - - -```jsx - -// JSX version - -Button 1 - -Button 2 - -``` - - - -The above should render the following content in the DOM: - - - -```html - - - - - - - -``` - - - -Which should be visually displayed in the following way: - - - -![Dynamic CoolButton - Example](https://education-team-2020.s3.eu-west-1.amazonaws.com/web-dev/labs/lab-bulma-buttons-2.png) - - - -
- - - -### Iteration 6 | Bonus - - - -As a bonus task, create a `Message` component. You can find the documentation on Bulma's website: https://bulma.io/documentation/components/message/. - - - -The component will be used like this: - - - -```jsx - -// JSX version - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit.{" "} - Pellentesque risus mi. - - -``` - - - -Expected result: - - - -![](https://i.imgur.com/qmD2Nkb.png) - - - -Happy coding! :heart: diff --git a/package.json b/package.json index cc266c4..d568c9c 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,8 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bulma": "^1.0.2", + "classnames": "^2.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", diff --git a/src/App.js b/src/App.js index 3784575..a5a4013 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,27 @@ import logo from './logo.svg'; import './App.css'; +import React from 'react'; +import Navbar from './components/Navbar'; +import FormField from './components/FormField'; +import CoolButton from './components/CoolButton'; +import Message from './components/Message'; function App() { return (
+
logo

Edit src/App.js and save to reload.

+ + + Button 1 + Button 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi. + { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/CoolButton.js b/src/components/CoolButton.js new file mode 100644 index 0000000..93951a7 --- /dev/null +++ b/src/components/CoolButton.js @@ -0,0 +1,17 @@ +import React from 'react'; +import classNames from 'classnames'; + +function CoolButton({ children, isPrimary, isSuccess, isDanger, isLight, isRounded, isSmall }) { + const classes = classNames('button', { + 'is-primary': isPrimary, + 'is-success': isSuccess, + 'is-danger': isDanger, + 'is-light': isLight, + 'is-rounded': isRounded, + 'is-small': isSmall, + }); + + return ; +} + +export default CoolButton; \ No newline at end of file diff --git a/src/components/FormField.js b/src/components/FormField.js new file mode 100644 index 0000000..b34ac68 --- /dev/null +++ b/src/components/FormField.js @@ -0,0 +1,14 @@ +import React from 'react'; + +function FormField({ label, type, placeholder }) { + return ( +
+ +
+ +
+
+ ); +} + +export default FormField; \ No newline at end of file diff --git a/src/components/Message.js b/src/components/Message.js new file mode 100644 index 0000000..0c66e92 --- /dev/null +++ b/src/components/Message.js @@ -0,0 +1,19 @@ +import React from 'react'; + +function Message({ isInfo, title, children }) { + const className = isInfo ? 'message is-info' : 'message'; + + return ( +
+
+

{title}

+ +
+
+ {children} +
+
+ ); +} + +export default Message; \ No newline at end of file diff --git a/src/components/Navbar.js b/src/components/Navbar.js new file mode 100644 index 0000000..a1706a2 --- /dev/null +++ b/src/components/Navbar.js @@ -0,0 +1,32 @@ +import React from 'react'; +import CoolButton from './CoolButton'; + +function Navbar() { + return ( + + ); +} + +export default Navbar; \ No newline at end of file diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';