CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-28 21:00:56 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix(UI): replace button with icons in challenge lower jaw (#48014)

Browse Source 
* fix: replace button with icons in challenge lower jaw

* fix: update icon buttons to add data-cy, align right, and cleaner conditional display

* fix: update cypress test with correct selector, update conditional button syntax

* fix: add reset and help icon components, move lowerjaw.css to editor.css

* feat: adjust icon buttons order

Co-authored-by: ahmad abdolsaheb <ahmad.abdolsaheb@gmail.com>
This commit is contained in:
Mehdi Bouaziz 2022-10-20 14:08:56 +02:00 committed by GitHub
parent f22e4002c3
commit 818568376d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 96 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/src/assets/icons/help.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
function Help(
props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
return (
<>
<svg
fill='currentColor'
xmlns='http://www.w3.org/2000/svg'
height='24'
width='24'
aria-hidden='true'
{...props}
>
<path d='M11.95 18q.525 0 .888-.363.362-.362.362-.887t-.362-.887q-.363-.363-.888-.363t-.888.363q-.362.362-.362.887t.362.887q.363.363.888.363Zm-.9-3.85h1.85q0-.825.188-1.3.187-.475 1.062-1.3.65-.65 1.025-1.238.375-.587.375-1.412 0-1.4-1.025-2.15T12.1 6q-1.425 0-2.312.75-.888.75-1.238 1.8l1.65.65q.125-.45.563-.975Q11.2 7.7 12.1 7.7q.8 0 1.2.437.4.438.4.963 0 .5-.3.937-.3.438-.75.813-1.1.975-1.35 1.475-.25.5-.25 1.825ZM12 22q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z' />
</svg>
</>
);
}
Help.displayName = 'Help';
export default Help;

24
client/src/assets/icons/reset.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
function Reset(
props: JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>
): JSX.Element {
return (
<>
<svg
fill='currentColor'
xmlns='http://www.w3.org/2000/svg'
height='24'
width='24'
aria-hidden='true'
{...props}
>
<path d='M12 20q-3.35 0-5.675-2.325Q4 15.35 4 12q0-3.35 2.325-5.675Q8.65 4 12 4q1.725 0 3.3.713 1.575.712 2.7 2.037V4h2v7h-7V9h4.2q-.8-1.4-2.187-2.2Q13.625 6 12 6 9.5 6 7.75 7.75T6 12q0 2.5 1.75 4.25T12 18q1.925 0 3.475-1.1T17.65 14h2.1q-.7 2.65-2.85 4.325Q14.75 20 12 20Z' />
</svg>
</>
);
}
Reset.displayName = 'Reset';
export default Reset;

18
client/src/templates/Challenges/classic/editor.css
View File

@ -170,3 +170,21 @@ textarea.inputarea {
opacity: 1;
}
}
.lower-jaw-icon-bar {
overflow: hidden;
display: flex;
flex-direction: row;
}
.lower-jaw-icon-bar > button {
line-height: 0;
margin-right: 10px;
}
.lower-jaw-icon-bar > button:focus {
outline: 2px solid var(--blue-mid);
}
.lower-jaw-icon-bar > button:last-child {
margin-right: 0;
}

50
client/src/templates/Challenges/classic/lower-jaw.tsx
View File

@ -5,6 +5,9 @@ import { Button } from '@freecodecamp/react-bootstrap';
import Fail from '../../../assets/icons/fail';
import LightBulb from '../../../assets/icons/lightbulb';
import GreenPass from '../../../assets/icons/green-pass';
import Help from '../../../assets/icons/help';
import Reset from '../../../assets/icons/reset';
import { MAX_MOBILE_WIDTH } from '../../../../../config/misc';
import { apiLocation } from '../../../../../config/env.json';
@ -181,32 +184,35 @@ const LowerJaw = ({
testsLength &&
(currentAttempts >= testsLength || currentAttempts >= 3);
if (isAttemptsLargerThanTest && !challengeIsCompleted) {
return (
<div>
<hr />
return (
<div>
<hr />
<div className='lower-jaw-icon-bar'>
<button
className='btn-block btn fade-in'
id='help-button'
onClick={openHelpModal}
className='btn fade-in'
title={t('buttons.reset-code')}
aria-label={t('buttons.reset-code')}
data-cy='reset-code-button'
onClick={openResetModal}
>
{t('buttons.ask-for-help')}
</button>
<button className='btn-block btn fade-in' onClick={openResetModal}>
{t('learn.editor-tabs.restart-step')}
<Reset />
</button>
{isAttemptsLargerThanTest && !challengeIsCompleted ? (
<button
className='btn fade-in'
id='get-help-button'
title={t('buttons.get-help')}
aria-label={t('buttons.get-help')}
data-cy='get-help-button'
onClick={openHelpModal}
>
<Help />
</button>
) : null}
</div>
);
} else {
return (
<div>
<hr />
<button className='btn-block btn fade-in' onClick={openResetModal}>
{t('learn.editor-tabs.restart-step')}
</button>
</div>
);
}
</div>
);
};
const showDesktopButton = window.innerWidth > MAX_MOBILE_WIDTH;

3
cypress/e2e/default/learn/challenges/multifile.js
View File

@ -6,6 +6,7 @@ const selectors = {
monacoTabs: '.monaco-editor-tabs',
signInButton: '#action-buttons-container a[href$="/signin"]',
submitButton: '[data-cy=submit-button]',
resetCodeButton: '[data-cy=reset-code-button]',
instructionContainer: '.action-row-container'
};
@ -34,7 +35,7 @@ describe('Challenge with multifile editor', () => {
cy.contains('Check Your Code').click();
cy.get('[data-cy=failing-test-feedback]').should('be.visible');
cy.contains('Restart Step').click();
cy.get(selectors.resetCodeButton).click();
cy.get('[data-cy=reset-modal-confirm').click();
cy.get('[data-cy=failing-test-feedback]').should('not.exist');