[Bug-1503] Componente Jumbotron actualizado con clases de Bosstrap 5.2

AnggieAlava · AnggieAlava · commit 2e5e1132b434 · 2024-02-20T04:18:12.000Z
diff --git a/exercises/03.4-jumbotron/README.es.md b/exercises/03.4-jumbotron/README.es.md
@@ -1,34 +1,36 @@
-# `03.4` Jumbotron
+# `03.4` Hero Component
 
 Usando todo lo que has aprendido...
 
 ## 📝 Instrucciones:
 
-1. Construye un componente `Jumbotron` que reciba las siguientes propiedades:
+1. Construye un componente `HeroSection` que reciba las siguientes propiedades:
 
 ```jsx
-<Jumbotron
-    title="Welcome to react"
-    description="React is the most popular rendering library in the world"
-    buttonLabel="Go to the official website"
-    buttonURL="https://reactjs.org/"
+<HeroSection
+  title="Welcome to React!"
+  description="React is the most popular rendering library in the world"
+  buttonLabel="Go to the official website"
+  buttonURL="https://reactjs.org/"
 />
 ```
 
 ## 💻 Resultado Esperado:
-  
-![Jumbotron](../../.learn/assets/03.4-1.png?raw=true)
+
+![HeroSection](../../.learn/assets/03.4-1.png?raw=true)
 
 ## 💡 Pistas:
 
-+ Recuerda usar los prop-types para validar las propiedades de tu componente.
+- Recuerda usar los prop-types para validar las propiedades de tu componente.
 
-+ Tu componente debería generar un HTML similar a este:
+- Tu componente debería generar un HTML similar a este:
 
 ```html
-<div class="jumbotron m-5">
-  <h1 class="display-4">Welcome to react</h1>
+<div class="bg-light p-5 m-5">
+  <h1 class="display-4">Welcome to React!</h1>
   <p class="lead">React is the most popular rendering library in the world</p>
-  <a class="btn btn-primary btn-lg" href="https://reactjs.org/" role="button">Go to the official website</a>
+  <a class="btn btn-primary btn-lg" href="https://reactjs.org/" role="button"
+    >Go to the official website</a
+  >
 </div>
 ```
diff --git a/exercises/03.4-jumbotron/README.md b/exercises/03.4-jumbotron/README.md
@@ -1,38 +1,40 @@
 ---
-tutorial: "https://www.youtube.com/watch?v=zv6HPveyz6g"
+tutorial: 'https://www.youtube.com/watch?v=zv6HPveyz6g'
 ---
 
-# `03.4` Jumbotron
+# `03.4` Hero Component
 
-Using everything you have learned so far... 
+Using everything you have learned so far...
 
 ## 📝 Instructions:
 
-1. Build a `Jumbotron` component that receives the following properties:
+1. Build a `HeroSection` component that receives the following properties:
 
 ```jsx
-<Jumbotron
-    title="Welcome to react"
-    description="React is the most popular rendering library in the world"
-    buttonLabel="Go to the official website"
-    buttonURL="https://reactjs.org/"
+<HeroSection
+  title="Welcome to React!"
+  description="React is the most popular rendering library in the world"
+  buttonLabel="Go to the official website"
+  buttonURL="https://reactjs.org/"
 />
 ```
 
 ## 💻 Expected result:
-  
-![Jumbotron](../../.learn/assets/03.4-1.png?raw=true)
+
+![HeroSection](../../.learn/assets/03.4-1.png?raw=true)
 
 ## 💡 Hints:
 
-+ Remember to use prop-types to validate your component properties.
+- Remember to use prop-types to validate your component properties.
 
-+ Your HTML's component should be something like this:
+- Your HTML's component should be something like this:
 
 ```html
-<div class="jumbotron m-5">
-  <h1 class="display-4">Welcome to react</h1>
+<div class="bg-light p-5 m-5">
+  <h1 class="display-4">Welcome to React!</h1>
   <p class="lead">React is the most popular rendering library in the world</p>
-  <a class="btn btn-primary btn-lg" href="https://reactjs.org/" role="button">Go to the official website</a>
+  <a class="btn btn-primary btn-lg" href="https://reactjs.org/" role="button"
+    >Go to the official website</a
+  >
 </div>
 ```
diff --git a/exercises/03.4-jumbotron/app.jsx b/exercises/03.4-jumbotron/app.jsx
@@ -2,19 +2,30 @@ import React from "react";
 import ReactDOM from "react-dom";
 import PropTypes from "prop-types";
 
-const Jumbotron = props => {
+const HeroSection = (props) => {
 	// Here you have to return expected html using the properties being passed to the component
+	return (
+		<div className="bg-light p-5 m-5">
+			<h1 className="display-4">{props.title}</h1>
+			<p className="lead">{props.description}</p>
+			<a className="btn btn-primary btn-lg" href={props.buttonURL} role="button">
+				{props.buttonLabel}
+			</a>
+		</div>
+	);
 };
 
-Jumbotron.propTypes = {
+HeroSection.propTypes = {
 	// PropTypes here
 	title: PropTypes.string,
-
+	description: PropTypes.string,
+	buttonLabel: PropTypes.string,
+	buttonURL: PropTypes.string,
 };
 
 ReactDOM.render(
-	<Jumbotron
-		title="Welcome to react"
+	<HeroSection
+		title="Welcome to React!"
 		description="React is the most popular rendering library in the world"
 		buttonLabel="Go to the official website"
 		buttonURL="https://reactjs.org/"
diff --git a/exercises/03.4-jumbotron/solution.hide.jsx b/exercises/03.4-jumbotron/solution.hide.jsx
@@ -1,35 +1,38 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import PropTypes from "prop-types";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 
-const Jumbotron = (props) => {
-	// Here you have to return expected html using the properties being passed to the component
-	return (
-		<div className="jumbotron m-5">
-			<h1 className="display-4">{props.title}</h1>
-			<p className="lead">{props.description}</p>
-			<a className="btn btn-primary btn-lg" href={props.buttonURL} role="button">
-				{props.buttonLabel}
-			</a>
-		</div>
-	);
+const HeroSection = (props) => {
+  // Here you have to return expected html using the properties being passed to the component
+  return (
+    <div className="bg-light p-5 m-5">
+      <h1 className="display-4">{props.title}</h1>
+      <p className="lead">{props.description}</p>
+      <a
+        className="btn btn-primary btn-lg"
+        href={props.buttonURL}
+        role="button">
+        {props.buttonLabel}
+      </a>
+    </div>
+  );
 };
 
-Jumbotron.propTypes = {
-	// PropTypes here
-	title: PropTypes.string,
-	description: PropTypes.string,
-	buttonLabel: PropTypes.string,
-	buttonURL: PropTypes.string
+HeroSection.propTypes = {
+  // PropTypes here
+  title: PropTypes.string,
+  description: PropTypes.string,
+  buttonLabel: PropTypes.string,
+  buttonURL: PropTypes.string,
 };
 
 ReactDOM.render(
-	<Jumbotron
-		title="Welcome to react"
-		description="React is the most popular rendering library in the world"
-		buttonLabel="Go to the official website"
-		buttonURL="https://reactjs.org/"
-	/>,
+  <HeroSection
+    title="Welcome to React!"
+    description="React is the most popular rendering library in the world"
+    buttonLabel="Go to the official website"
+    buttonURL="https://reactjs.org/"
+  />,
 
-	document.querySelector("#myDiv")
+  document.querySelector('#myDiv')
 );
diff --git a/exercises/03.4-jumbotron/tests.js b/exercises/03.4-jumbotron/tests.js
@@ -1,46 +1,46 @@
-import ReactDOM from "react-dom";
-import { WhatToRender } from "./app.jsx";
-import jsxToString from "jsx-to-string";
-import renderer from "react-test-renderer";
+import ReactDOM from 'react-dom';
+import { WhatToRender } from './app.jsx';
+import jsxToString from 'jsx-to-string';
+import renderer from 'react-test-renderer';
 
-jest.mock("react-dom", () => ({ render: jest.fn() }));
+jest.mock('react-dom', () => ({ render: jest.fn() }));
 
-test("ReactDOM needs to be called once", () => {
+test('ReactDOM needs to be called once', () => {
   expect(ReactDOM.render.mock.calls.length).toBe(1);
 });
 
-test("Component title has to be passed properly", () => {
+test('Component title has to be passed properly', () => {
   const component = ReactDOM.render.mock.calls[0][0];
-  expect(component.props.title).toBe("Welcome to react");
+  expect(component.props.title).toBe('Welcome to React!');
 });
 
-test("Component description has to be passed properly", () => {
+test('Component description has to be passed properly', () => {
   const component = ReactDOM.render.mock.calls[0][0];
   expect(component.props.description).toBe(
-    "React is the most popular rendering library in the world"
+    'React is the most popular rendering library in the world'
   );
 });
 
-test("Component buttonLabel has to be passed properly", () => {
+test('Component buttonLabel has to be passed properly', () => {
   const component = ReactDOM.render.mock.calls[0][0];
-  expect(component.props.buttonLabel).toBe("Go to the official website");
+  expect(component.props.buttonLabel).toBe('Go to the official website');
 });
 
-test("Component buttonURL has to be passed properly", () => {
+test('Component buttonURL has to be passed properly', () => {
   const component = ReactDOM.render.mock.calls[0][0];
-  expect(component.props.buttonURL).toBe("https://reactjs.org/");
+  expect(component.props.buttonURL).toBe('https://reactjs.org/');
 });
 
-test("The component should return the exact HTML", () => {
+test('The component should return the exact HTML', () => {
   const tree = renderer.create(ReactDOM.render.mock.calls[0][0]).toJSON();
   expect(tree).toMatchInlineSnapshot(`
 <div
-  className="jumbotron m-5"
+  className="bg-light p-5 m-5"
 >
   <h1
     className="display-4"
   >
-    Welcome to react
+    Welcome to React!
   </h1>
   <p
     className="lead"
