fix(client/ui): lab demo button (#56334)

2026-05-28 18:26:54 +00:00 · 2024-10-02 09:08:49 -05:00
parent f1bb0402bc
commit 0c3dc1d81b
50 changed files with 75 additions and 57 deletions
@@ -397,6 +397,7 @@
    "running-tests": "// running tests",
    "tests-completed": "// tests completed",
    "console-output": "// console output",
+    "example-app": "Build an app that is functionally similar to <0>this example project</0>. Try not to copy the example project, give it your own personal style.",
    "syntax-error": "Your code raised an error before any tests could run. Please fix it and try again.",
    "indentation-error": "Your code has an indentation error. You may need to add <code>pass</code> on a new line to form a valid block of code.",
    "sign-in-save": "Sign in to save your progress",
@@ -18,3 +18,14 @@
  height: auto;
  overflow-y: none;
 }
+
+.example-app-link {
+  text-decoration: underline;
+}
+
+.example-app-link:hover,
+.example-app-link:active,
+.example-app-link:focus {
+  text-decoration: none;
+  background-color: var(--tertiary-background);
+}
@@ -1,15 +1,13 @@
 import React, { useEffect, ReactElement, ReactNode } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { useTranslation } from 'react-i18next';
-import { Button } from '@freecodecamp/ui';
+import { Trans } from 'react-i18next';

 import { Test } from '../../../redux/prop-types';
 import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import { initializeMathJax } from '../../../utils/math-jax';
 import { challengeTestsSelector } from '../redux/selectors';
 import { openModal } from '../redux/actions';
-import { Spacer } from '../../../components/helpers';
 import TestSuite from './test-suite';

 import './side-panel.css';
@@ -52,7 +50,6 @@ export function SidePanel({
  tests,
  openModal
 }: SidePanelProps): JSX.Element {
-  const { t } = useTranslation();
  useEffect(() => {
    const mathJaxChallenge =
      superBlock === SuperBlocks.RosettaCode ||
@@ -69,12 +66,21 @@ export function SidePanel({
    >
      {challengeTitle}
      {hasDemo && (
-        <>
-          <Button size='small' onClick={() => openModal('projectPreview')}>
-            {t('buttons.show-demo')}
-          </Button>
-          <Spacer size='xSmall' />
-        </>
+        <p>
+          <Trans i18nKey='learn.example-app'>
+            <span
+              className='example-app-link'
+              onClick={() => openModal('projectPreview')}
+              role='button'
+              tabIndex={0}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  openModal('projectPreview');
+                }
+              }}
+            ></span>
+          </Trans>
+        </p>
      )}
      {challengeDescription}
      {toolPanel}
@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ demoType: onClick
 # --description--


-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 For this lab, all the HTML and CSS has been provided to you. You will use JavaScript to complete the Bookmark Manager app so that it can store a collection of bookmarks in the local storage and read data from it.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -7,7 +7,7 @@ dashedName: build-a-cash-register

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -11,7 +11,7 @@ In this lab, you will mask the username part of an email address with asterisks.

 For example, if the email address was `myEmail@email.com`, then the masked email address will be `m*******l@email.com`.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 In this lab you will utilize the semantic HTML elements to create the structure of a web page. You'll add content and images to make it look like a real event hub.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ dashedName: build-a-factorial-calculator

 A factorial is the product of an integer and all the integers below it. For example, the factorial of `5` is `5 * 4 * 3 * 2 * 1 = 120`. In this lab, you will create a factorial calculator that takes a number from the user and calculates the factorial of that number.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 In this lab you will use JavaScript click events to toggle the appearance of a favorite icon. When the heart icon is clicked, the appearance of the heart changes from empty to filled, and vice versa.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **Do not copy this demo project**.
+Fulfill the user stories below and get all the tests to pass to complete the lab. **Do not copy this demo project**.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 In this lab, you will build a set of football team cards. The user should be able to use the dropdown menu and filter between the different players based on their positions.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ dashedName: build-a-fortune-teller

 In this lab, you will define five fortunes and randomly select one of them to display the fortune to the user.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -7,7 +7,7 @@ dashedName: build-a-gradebook-app

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 In this lab, you will use HTML to create the structure of a house. Then, you will use CSS positioning to arrange the elements of your house like windows and doors.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ dashedName: build-an-inventory-management-program

 In this lab, you will build an inventory management program that will allow you to add, update, find and remove products from the inventory. You will use an array of objects to represent your inventory, where each object will have name and quantity as the keys.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -7,7 +7,7 @@ dashedName: lab-javascript-trivia-bot

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ dashedName: build-a-leap-year-calculator

 A leap year is a year that is divisible by `4`, except for years that are divisible by `100` and not divisible by `400`. For example, `2000` is a leap year, but `1900` is not. Also, a leap year has an extra day in February, which is the 29th day of the month.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 A lightbox displays a larger version of an image when clicked and shadows the rest of the page. This project will create a lightbox gallery that displays full-size images when a thumbnail is clicked. For each image, two versions are provided: a thumbnail and a full-size image. The full-size image is the same as the thumbnail, but without the `-thumbnail` suffix.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ dashedName: build-a-linked-list-class

 In this lab, you'll build a linked list, which is a linear collection of data elements, called <dfn>nodes</dfn>, where each node points to the next node in the linked list. Each node in a linked list contains two key pieces of information: the element itself, and a reference to the next node.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 In this lab, you will create a simple animation of the Moon's orbit around the Earth using HTML and CSS. The Earth will be at the center of the system, and the Moon will orbit around it.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ dashedName: lab-nth-fibonacci-number-generator

 In this lab you will use a dynamic programming approach to compute and return the `n`-th number from the Fibonacci sequence, in which each number is the sum of the two preceding numbers.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -12,7 +12,7 @@ A <dfn>palindrome</dfn> is a word or phrase that can be read the same way forwar

 **Note:** You'll need to remove **all non-alphanumeric characters** (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 In this lab, you'll build an app that will search for Pokémon by name or ID and display the results to the user. To retrieve the Pokémon data and images, you'll use freeCodeCamp's <a href="https://pokeapi-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">PokéAPI Proxy</a>.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -7,7 +7,7 @@ dashedName: lab-pyramid-generator

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -15,7 +15,7 @@ It can be implemented as follows:
 - Partition the input array into three subarrays containing elements greater than, lesser than, and equal to the pivot value.
 - Recursively call `quicksort` to sort the subarrays.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -7,7 +7,7 @@ dashedName: lab-quiz-game

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 Camperbot is learning JavaScript and has tried to build their own Random Background Color Changer. However, they have made a few mistakes along the way.   

-**Objective:** Fulfill the user stories below and get all the tests to pass so the lab is functioning properly.
+Fulfill the user stories below and get all the tests to pass so the lab is functioning properly.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 In this lab, you will build a real-time character counter by using JavaScript. The character counter will display the number of characters entered in a `textarea` element. The counter will update in real-time as the user types in the `textarea`.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **Do not copy this demo project**.
+Fulfill the user stories below and get all the tests to pass to complete the lab. **Do not copy this demo project**.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 For this lab, you start with the CSS and HTML already written for you. You will use JavaScript to enable the regex sandbox to test a regular expression against a string and highlight the results.
 
-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -26,7 +26,7 @@ Roman numerals are based on seven symbols and can be written using various combi
 | IV             | 4               |
 | I              | 1               |

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ dashedName: build-a-sentence-maker

 In this lab, you will create two different stories using a sentence template. You will use variables to store different parts of the story and then output the stories to the console.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ dashedName: build-a-stack-class

 A stack is a data structure that stores an ordered collection of elements. It follows the *Last-In-First-Out* principle, where the last element inserted is removed first.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -10,7 +10,7 @@ demoType: onClick

 In this lab, you will practice the different styles that can be applied to links when they are hovered over, focused, clicked, and visited.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ dashedName: build-a-technical-documentation-page

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -22,7 +22,7 @@ In the US, phone numbers can be formatted in many ways. Here are some examples o

 Note that the area code is required. Also, if the country code is provided, you must confirm that the country code is `1`.

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ demoType: onClick

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -8,7 +8,7 @@ dashedName: build-a-tribute-page

 # --description--

-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**

@@ -9,7 +9,7 @@ demoType: onClick
 # --description--


-**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. 
+Fulfill the user stories below and get all the tests to pass to complete the lab.

 **User Stories:**