diff --git a/src/app/content/practiceQuestions/components/Answer/Answer.css b/src/app/content/practiceQuestions/components/Answer/Answer.css new file mode 100644 index 0000000000..5a32ce7278 --- /dev/null +++ b/src/app/content/practiceQuestions/components/Answer/Answer.css @@ -0,0 +1,150 @@ +/** + * Answer Component Styles + * Migrated from styled-components to plain CSS + */ + +/* AnswerWrapper */ +.answer-wrapper { + overflow: visible; +} + +/* AnswerBlock (label) */ +.answer-block { + padding: 1rem 2.4rem; + display: flex; + align-items: center; + cursor: pointer; +} + +.answer-block:focus { + outline: none; +} + +.answer-block--disabled { + cursor: not-allowed; +} + +/* Focus styles for keyboard navigation */ +input:focus + .answer-block, +.answer-wrapper:focus .answer-block { + outline: auto; /* Firefox and other browsers */ + outline: -webkit-focus-ring-color auto 1px; /* WebKit browsers */ +} + +input:not(:focus-visible):focus + .answer-block { + outline: none; +} + +/* Mobile responsive padding */ +@media screen and (max-width: 75em) { + .answer-block { + padding: 0.5rem 2.4rem; + } +} + +/* AnswerIndicator */ +.answer-indicator { + min-width: 4rem; + min-height: 4rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + border: 1.5px solid; +} + +/* AnswerAlignment */ +.answer-alignment { + display: flex; + align-items: center; + min-height: 4rem; + flex: 1; +} + +/* AnswerContent */ +.answer-content { + margin-left: 1.6rem; + overflow: initial; +} + +/* AnswerExcerpt */ +.answer-excerpt { + color: var(--color-text-default); + font-size: 1.6rem; + line-height: 2.5rem; + width: 100%; + padding: 0; + overflow: auto; +} + +.answer-excerpt * { + overflow: initial; +} + +/* AnswerResult */ +.answer-result { + font-size: 1.6rem; + line-height: 2.5rem; + color: var(--answer-result-color); +} + +/* Theme: Unselected - uses root-level CSS variables for static colors */ +.answer-block--unselected { + background-color: var(--color-neutral-base); +} + +.answer-block--unselected .answer-indicator { + color: var(--color-text-label); + background-color: var(--color-neutral-base); + border-color: var(--color-primary-gray-medium); +} + +/* Theme: Selected */ +.answer-block--selected { + background-color: var(--answer-bg-selected); +} + +.answer-block--selected .answer-indicator { + color: var(--answer-indicator-fg-selected); + background-color: var(--answer-indicator-bg-selected); + border-color: var(--answer-border-selected); +} + +/* Theme: Correct */ +.answer-block--correct { + background-color: var(--answer-bg-correct); +} + +.answer-block--correct .answer-indicator { + color: var(--answer-indicator-fg-correct); + background-color: var(--answer-indicator-bg-correct); + border-color: var(--answer-border-correct); +} + +/* Theme: Incorrect */ +.answer-block--incorrect { + background-color: var(--answer-bg-incorrect); +} + +.answer-block--incorrect .answer-indicator { + color: var(--answer-indicator-fg-incorrect); + background-color: var(--answer-indicator-bg-incorrect); + border-color: var(--answer-border-incorrect); +} + +/* Hover states - placed after base states to maintain proper specificity */ +.answer-block--unselected:hover .answer-indicator { + border-color: var(--answer-border-hover-unselected); +} + +.answer-block--selected:hover .answer-indicator { + border-color: var(--answer-border-hover-selected); +} + +.answer-block--correct:hover .answer-indicator { + border-color: var(--answer-border-hover-correct); +} + +.answer-block--incorrect:hover .answer-indicator { + border-color: var(--answer-border-hover-incorrect); +} diff --git a/src/app/content/practiceQuestions/components/Answer/index.tsx b/src/app/content/practiceQuestions/components/Answer/index.tsx index c9421fe743..b00460fc9e 100644 --- a/src/app/content/practiceQuestions/components/Answer/index.tsx +++ b/src/app/content/practiceQuestions/components/Answer/index.tsx @@ -1,18 +1,13 @@ import { HTMLElement } from '@openstax/types/lib.dom'; +import classNames from 'classnames'; import React from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; +import { linkColor, linkHover } from '../../../../components/Typography/Links.constants'; +import theme, { hiddenButAccessibleClass } from '../../../../theme'; import { LinkedArchiveTreeSection } from '../../../types'; import { PracticeAnswer, PracticeQuestion } from '../../types'; -import { - AnswerAlignment, - AnswerBlock, - AnswerContent, - AnswerExcerpt, - AnswerIndicator, - answerInputClass, - AnswerWrapper, - StyledAnswerResult, -} from './styled'; +import './Answer.css'; +import { assertDefined } from '../../../../utils'; interface AnswerResultProps { showCorrect: boolean; @@ -21,6 +16,46 @@ interface AnswerResultProps { isCorrect: boolean; } +// Answer theme definitions (matching styled.tsx) +// Note: unselected theme uses root-level CSS variables for most styles, +// but hover border needs to be bound from linkHover constant +const answerThemes = { + correct: { + background: theme.color.neutral.base, + border: '#148a00', + borderHovered: '#148a00', + fontColor: theme.color.neutral.base, + fontColorActive: '#148a00', + indicatorBackground: '#148a00', + }, + incorrect: { + background: theme.color.neutral.base, + border: theme.color.primary.red.base, + borderHovered: theme.color.primary.red.base, + fontColor: theme.color.neutral.base, + fontColorActive: theme.color.primary.red.base, + indicatorBackground: theme.color.primary.red.base, + }, + selected: { + background: '#e3f8fb', + border: linkHover, // linkColor has insufficient contrast with background + borderHovered: linkHover, + fontColor: theme.color.neutral.base, + fontColorActive: theme.color.secondary.lightBlue.base, + indicatorBackground: linkColor, + }, + unselected: { + // Most styles use root-level CSS variables directly + // Only hover border needs dynamic binding from linkHover constant + borderHovered: linkHover, + background: undefined, + border: undefined, + fontColor: undefined, + fontColorActive: undefined, + indicatorBackground: undefined, + }, +}; + const AnswerResult = ({ showCorrect, isSelected, isSubmitted, isCorrect }: AnswerResultProps) => { const resultMsgKey = isCorrect ? 'i18n:practice-questions:popup:correct' @@ -33,11 +68,18 @@ const AnswerResult = ({ showCorrect, isSelected, isSubmitted, isCorrect }: Answe return null; } - return + const resultTheme = isCorrect ? answerThemes.correct : answerThemes.incorrect; + + return
{(msg) => msg} - ; +
; }; interface AnswerProps { @@ -70,7 +112,38 @@ const Answer = ({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [showCorrect, isCorrect]); - return + // Determine which theme to apply based on answer state + const getAnswerTheme = () => { + if ((showCorrect && isCorrect) || (isSubmitted && isSelected)) { + return isCorrect ? answerThemes.correct : answerThemes.incorrect; + } else { + return isSelected ? answerThemes.selected : answerThemes.unselected; + } + }; + + const answerTheme = getAnswerTheme(); + const themeKey = (showCorrect && isCorrect) || (isSubmitted && isSelected) + ? (isCorrect ? 'correct' : 'incorrect') + : (isSelected ? 'selected' : 'unselected'); + const {formatMessage} = useIntl(); + + // Bind CSS variables for dynamic theme values + // For unselected state, most styles use root-level CSS variables, + // but we still need to bind the hover border color from linkHover constant + const cssVariables: Record = {}; + + if (answerTheme.background) cssVariables[`--answer-bg-${themeKey}`] = answerTheme.background; + if (answerTheme.fontColor) cssVariables[`--answer-indicator-fg-${themeKey}`] = answerTheme.fontColor; + if (answerTheme.indicatorBackground) { + cssVariables[`--answer-indicator-bg-${themeKey}`] = answerTheme.indicatorBackground; + } + if (answerTheme.border) cssVariables[`--answer-border-${themeKey}`] = answerTheme.border; + // Note: borderHovered is always defined for all themes (correct, incorrect, selected, unselected) + assertDefined(answerTheme.borderHovered, 'Need to add defined check for borderHovered'); + // If that changes, add the defined check as above + cssVariables[`--answer-border-hover-${themeKey}`] = answerTheme.borderHovered; + + return
- - {choiceIndicator} - - - + >{choiceIndicator} +
+
+ - - - - ; +
+
+ +
; }; export default Answer; diff --git a/src/app/content/practiceQuestions/components/Answer/styled.tsx b/src/app/content/practiceQuestions/components/Answer/styled.tsx deleted file mode 100644 index 4e3d374eea..0000000000 --- a/src/app/content/practiceQuestions/components/Answer/styled.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import flow from 'lodash/fp/flow'; -import styled, { css } from 'styled-components/macro'; -import { linkColor, linkHover, textRegularStyle } from '../../../../components/Typography'; -import theme, { hiddenButAccessibleClass } from '../../../../theme'; -import ContentExcerpt from '../../../components/ContentExcerpt'; - -export const AnswerExcerpt = styled.span` - ${textRegularStyle} - width: 100%; - padding: 0; - overflow: auto; - - * { - overflow: initial; - } -`; - -export const AnswerAlignment = styled.div` - display: flex; - align-items: center; - min-height: 4rem; - flex: 1; -`; - -export const AnswerContent = styled.div` - margin-left: 1.6rem; - overflow: initial; -`; - -export const AnswerIndicator = styled.span` - min-width: 4rem; - min-height: 4rem; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - - input { - position: absolute; - opacity: 0; - height: 0; - width: 0; - } -`; - -const answerThemes = { - correct: { - background: theme.color.neutral.base, - border: '#148a00', - borderHovered: '#148a00', - fontColor: theme.color.neutral.base, - fontColorActive: '#148a00', - indicatorBackground: '#148a00', - }, - incorrect: { - background: theme.color.neutral.base, - border: theme.color.primary.red.base, - borderHovered: theme.color.primary.red.base, - fontColor: theme.color.neutral.base, - fontColorActive: theme.color.primary.red.base, - indicatorBackground: theme.color.primary.red.base, - }, - selected: { - background: '#E3F8FB', - border: linkHover, // linkColor has insufficient contrast with background - borderHovered: linkHover, - fontColor: theme.color.neutral.base, - fontColorActive: theme.color.secondary.lightBlue.base, - indicatorBackground: linkColor, - }, - unselected: { - background: theme.color.neutral.base, - border: theme.color.primary.gray.medium, - borderHovered: linkHover, - fontColor: theme.color.text.label, - fontColorActive: '#C6C6C6', - indicatorBackground: theme.color.neutral.base, - }, -}; - -interface AnswerBlockProps { - showCorrect: boolean; - isCorrect: boolean; - isSubmitted: boolean; - isSelected: boolean; -} - -const getAnswerTheme = (props: AnswerBlockProps) => { - if ( - (props.showCorrect && props.isCorrect) || (props.isSubmitted && props.isSelected) - ) { - return props.isCorrect ? answerThemes.correct : answerThemes.incorrect; - } else { - return props.isSelected ? answerThemes.selected : answerThemes.unselected; - } -}; - -const getAnswerThemeCss = (answerTheme: typeof answerThemes[keyof typeof answerThemes]) => css` - background-color: ${answerTheme.background}; - - ${AnswerIndicator} { - color: ${answerTheme.fontColor}; - background-color: ${answerTheme.indicatorBackground}; - border: 1.5px solid ${answerTheme.border}; - } - - &:hover { - ${AnswerIndicator} { - border-color: ${answerTheme.borderHovered}; - } - } -`; - -export const AnswerWrapper = styled.div` - overflow: visible; -`; - -// AnswerInput migrated to plain CSS - using standard hidden-but-accessible utility -export { hiddenButAccessibleClass as answerInputClass }; - -export const AnswerBlock = styled.label` - padding: 1rem 2.4rem; - display: flex; - align-items: center; - cursor: ${(props: AnswerBlockProps) => props.isSubmitted ? 'not-allowed' : 'pointer'}; - - :focus { - outline: none; - } - - ${flow(getAnswerTheme, getAnswerThemeCss)} - ${theme.breakpoints.mobile(css` - padding: 0.5rem 2.4rem; - - ${ContentExcerpt} { - padding: 0; - } - `)} - - ${AnswerWrapper}:focus &, - input:focus + & { - outline: auto; - outline: -webkit-focus-ring-color auto 1px; - } - - input:not(:focus-visible):focus + & { - outline: none; - } -`; - -export const StyledAnswerResult = styled.div` - ${textRegularStyle} - color: ${({isCorrect}: {isCorrect: boolean}) => answerThemes[isCorrect ? 'correct' : 'incorrect'].fontColorActive}; -`; diff --git a/src/app/content/practiceQuestions/components/EmptyScreen.css b/src/app/content/practiceQuestions/components/EmptyScreen.css new file mode 100644 index 0000000000..3249858dd6 --- /dev/null +++ b/src/app/content/practiceQuestions/components/EmptyScreen.css @@ -0,0 +1,18 @@ +.empty-screen { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + margin: 2rem auto; + flex: 1; + text-align: center; + color: var(--color-text-default); + font-size: 1.6rem; + line-height: 2.5rem; +} + +.empty-screen-text { + margin-bottom: -1rem; + max-width: 38rem; + overflow: initial; +} diff --git a/src/app/content/practiceQuestions/components/EmptyScreen.tsx b/src/app/content/practiceQuestions/components/EmptyScreen.tsx index 8f24fd61c2..bee271f63c 100644 --- a/src/app/content/practiceQuestions/components/EmptyScreen.tsx +++ b/src/app/content/practiceQuestions/components/EmptyScreen.tsx @@ -1,50 +1,36 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { useDispatch } from 'react-redux'; -import styled from 'styled-components/macro'; -import { textRegularStyle } from '../../../components/Typography'; import { LinkedArchiveTreeSection } from '../../types'; import { setSelectedSection } from '../actions'; import NextSectionMessage from './NextSectionMessage'; - -const StyledEmptyScreen = styled.div` - display: flex; - flex-direction: column; - align-items: center; - width: 100%; - margin: 2rem auto; - flex: 1; - text-align: center; - ${textRegularStyle} -`; - -const StyledText = styled.span` - margin-bottom: -1rem; - max-width: 38rem; - overflow: initial; -`; +import './EmptyScreen.css'; interface EmptyScreenProps { nextSection: LinkedArchiveTreeSection; } -export const EmptyScreenStatus = () => - - - -; +export const EmptyScreenStatus = () => ( +
+ + + +
+); const EmptyScreen = ({ nextSection }: EmptyScreenProps) => { const dispatch = useDispatch(); - return - dispatch(setSelectedSection(nextSection))} - analyticsLabel='Continue (Empty Screen)' - /> - ; + return ( +
+ dispatch(setSelectedSection(nextSection))} + analyticsLabel='Continue (Empty Screen)' + /> +
+ ); }; export default EmptyScreen; diff --git a/src/app/content/practiceQuestions/components/Filters.css b/src/app/content/practiceQuestions/components/Filters.css new file mode 100644 index 0000000000..5ae6a31a4c --- /dev/null +++ b/src/app/content/practiceQuestions/components/Filters.css @@ -0,0 +1,4 @@ +/* Increased specificity to override styled-components padding */ +.practice-questions-chapter-filters.practice-questions-chapter-filters { + padding: 0; +} diff --git a/src/app/content/practiceQuestions/components/Filters.tsx b/src/app/content/practiceQuestions/components/Filters.tsx index 8ef5429bfb..8869f39b5b 100644 --- a/src/app/content/practiceQuestions/components/Filters.tsx +++ b/src/app/content/practiceQuestions/components/Filters.tsx @@ -1,16 +1,12 @@ import React from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import styled from 'styled-components/macro'; import ChapterFilter from '../../components/popUp/ChapterFilter'; import Filters, { FilterDropdown, FiltersTopBar } from '../../components/popUp/Filters'; import { FiltersChange } from '../../components/popUp/types'; import { LinkedArchiveTreeSection } from '../../types'; import { setSelectedSection } from '../actions'; import * as selectors from '../selectors'; - -const StyledChapterFilters = styled(ChapterFilter)` - padding: 0; -`; +import './Filters.css'; export default () => { const [open, setOpen] = React.useState(false); @@ -41,7 +37,8 @@ export default () => { setOpen={(isOpen: boolean) => setOpen(isOpen)} controlsId='practice-filter-chapter' > - - - - -; +export const FinalScreenStatus = () => ( +
+ + + +
+); const FinalScreen = ({ nextSection }: FinalScreenProps) => { const dispatch = useDispatch(); @@ -47,14 +25,17 @@ const FinalScreen = ({ nextSection }: FinalScreenProps) => { return null; } - return - + dispatch(setSelectedSection(nextSection))} analyticsLabel='Continue (Final Screen)' /> - ; + + ); }; export default FinalScreen; diff --git a/src/app/content/practiceQuestions/components/IntroScreen.css b/src/app/content/practiceQuestions/components/IntroScreen.css new file mode 100644 index 0000000000..6b39ad905b --- /dev/null +++ b/src/app/content/practiceQuestions/components/IntroScreen.css @@ -0,0 +1,14 @@ +.intro-screen-wrapper { + text-align: center; +} + +.intro-screen-wrapper .intro-screen-button { + display: block; + margin: 2rem auto; +} + +.intro-screen-message { + font-size: 1.6rem; + line-height: 2.5rem; + margin: 4rem 0; +} diff --git a/src/app/content/practiceQuestions/components/IntroScreen.tsx b/src/app/content/practiceQuestions/components/IntroScreen.tsx index cc232798c1..5058085a74 100644 --- a/src/app/content/practiceQuestions/components/IntroScreen.tsx +++ b/src/app/content/practiceQuestions/components/IntroScreen.tsx @@ -1,40 +1,23 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; -import styled from 'styled-components/macro'; -import ButtonBase from '../../../components/Button'; -import { textRegularSize } from '../../../components/Typography'; +import Button from '../../../components/Button'; import { nextQuestion } from '../actions'; import * as pqSelectors from '../selectors'; - -// Wrap Button with styled() to make it compatible with component selectors -const Button = styled(ButtonBase)``; - -const IntroScreenWrapper = styled.div` - text-align: center; - - ${Button} { - display: block; - margin: 2rem auto; - } -`; - -const IntroScreenMessage = styled.span` - ${textRegularSize} - margin: 4rem 0; -`; +import './IntroScreen.css'; const IntroScreen = () => { const questionsCount = useSelector(pqSelectors.questionsCount); const dispatch = useDispatch(); - return - + return
+ {(msg) => msg} - + - ; +
; }; export default IntroScreen; diff --git a/src/app/content/practiceQuestions/components/NextSectionMessage.css b/src/app/content/practiceQuestions/components/NextSectionMessage.css new file mode 100644 index 0000000000..34821fc001 --- /dev/null +++ b/src/app/content/practiceQuestions/components/NextSectionMessage.css @@ -0,0 +1,22 @@ +.next-section-message { + max-width: 38rem; + overflow: initial; +} + +.next-section-message .next-section-button { + margin: 4rem auto; +} + +.next-section-message-content { + color: var(--color-text-default); + font-size: 1.6rem; + line-height: 2.5rem; +} + +.next-section-message-text { + display: inline; +} + +.next-section-title { + font-weight: 700; +} diff --git a/src/app/content/practiceQuestions/components/NextSectionMessage.tsx b/src/app/content/practiceQuestions/components/NextSectionMessage.tsx index fdb3dac4bc..e09d9a391d 100644 --- a/src/app/content/practiceQuestions/components/NextSectionMessage.tsx +++ b/src/app/content/practiceQuestions/components/NextSectionMessage.tsx @@ -1,33 +1,9 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; -import styled from 'styled-components/macro'; -import ButtonBase from '../../../components/Button'; -import { textRegularStyle } from '../../../components/Typography'; +import Button from '../../../components/Button'; import { LinkedArchiveTreeSection } from '../../types'; - -// Wrap Button with styled() to make it compatible with component selectors -const Button = styled(ButtonBase)``; - -const StyledNextSectionMessage = styled.div` - max-width: 38rem; - overflow: initial; - - ${Button} { - margin: 4rem auto; - } -`; - -const StyledMessage = styled.div` - ${textRegularStyle} -`; - -export const StyledMessageText = styled.span` - display: inline; -`; - -const StyledSectionTitle = styled.span` - font-weight: 700; -`; +import classNames from 'classnames'; +import './NextSectionMessage.css'; interface NextSectionMessageProps { nextSection: LinkedArchiveTreeSection; @@ -40,16 +16,17 @@ interface NextSectionMessageProps { const NextSectionMessage = ({ nextSection, messageKey, onClick, analyticsLabel, className, }: NextSectionMessageProps) => ( - - - +
+
+ {(msg) => msg} - - - + + +
- +
); export default NextSectionMessage; diff --git a/src/app/content/practiceQuestions/components/ProgressBar/ProgressBarItem.css b/src/app/content/practiceQuestions/components/ProgressBar/ProgressBarItem.css new file mode 100644 index 0000000000..4fdcf71caa --- /dev/null +++ b/src/app/content/practiceQuestions/components/ProgressBar/ProgressBarItem.css @@ -0,0 +1,56 @@ +.progress-bar-item { + display: flex; + align-items: center; + margin-bottom: 1rem; +} + +.progress-bar-item::after { + content: ""; + display: block; + height: 0.1rem; + width: 5.6rem; + background-color: var(--color-primary-gray-base); +} + +.progress-bar-item--active::after, +.progress-bar-item--disabled::after { + background-color: var(--color-neutral-page-background); +} + +.progress-bar-item:last-child::after { + content: none; +} + +/* max-width: 75em (1200px) */ +@media screen and (max-width: 75em) { + .progress-bar-item::after { + width: 3.3rem; + } +} + +/* stylelint-disable selector-class-pattern */ +.progress-bar-item__circle { + display: flex; + justify-content: center; + align-items: center; + width: 2.4rem; + height: 2.4rem; + border-radius: 50%; + background-color: var(--color-primary-gray-base); + border: 1px solid var(--color-primary-gray-base); + color: var(--color-neutral-base); + margin: 0 0.4rem; + font-weight: bold; +} + +.progress-bar-item__circle--active { + color: var(--color-primary-gray-base); + background-color: var(--color-neutral-base); +} + +.progress-bar-item__circle--disabled { + color: var(--color-text-label); + background-color: var(--color-neutral-page-background); + border-color: var(--color-neutral-page-background); +} +/* stylelint-enable selector-class-pattern */ diff --git a/src/app/content/practiceQuestions/components/ProgressBar/ProgressBarItem.tsx b/src/app/content/practiceQuestions/components/ProgressBar/ProgressBarItem.tsx index 4963016463..f689f72e88 100644 --- a/src/app/content/practiceQuestions/components/ProgressBar/ProgressBarItem.tsx +++ b/src/app/content/practiceQuestions/components/ProgressBar/ProgressBarItem.tsx @@ -1,62 +1,6 @@ import React from 'react'; -import styled, { css } from 'styled-components/macro'; -import theme from '../../../../theme'; - -const StyledItemWrapper = styled.li` - display: flex; - align-items: center; - margin-bottom: 1rem; - - &::after { - content: ""; - display: block; - height: 0.1rem; - width: 5.6rem; - background-color: ${theme.color.primary.gray.base}; - ${(props: { withLightLine: boolean }) => { - if (props.withLightLine) { - return 'background-color: #F1F1F1;'; - } - }} - } - - &:last-child { - &::after { - content: none; - } - } - - ${theme.breakpoints.mobile(css` - &::after { - width: 3.3rem; - } - `)} -`; - -const StyledItem = styled.span` - display: flex; - justify-content: center; - align-items: center; - width: 2.4rem; - height: 2.4rem; - border-radius: 50%; - background-color: ${theme.color.primary.gray.base}; - border: 1px solid ${theme.color.primary.gray.base}; - color: ${theme.color.neutral.base}; - margin: 0 0.4rem; - font-weight: bold; -`; - -const StyledActiveItem = styled(StyledItem)` - color: ${theme.color.primary.gray.base}; - background-color: ${theme.color.neutral.base}; -`; - -const StyledDisabledItem = styled(StyledItem)` - color: #6e6e6e; - background-color: #f1f1f1; - border-color: #f1f1f1; -`; +import classNames from 'classnames'; +import './ProgressBarItem.css'; interface ProgressBarItemProps { value: number; @@ -64,16 +8,25 @@ interface ProgressBarItemProps { isDisabled: boolean; } -const ProgressBarItem = ({ value, isActive, isDisabled }: ProgressBarItemProps) => ( - - { - isActive - ? {value} - : isDisabled - ? {value} - : {value} - } - -); +const ProgressBarItem = ({ value, isActive, isDisabled }: ProgressBarItemProps) => { + return ( +
  • + + {value} + +
    • + ); +}; export default ProgressBarItem; diff --git a/src/app/content/practiceQuestions/components/ProgressBar/__snapshots__/index.spec.tsx.snap b/src/app/content/practiceQuestions/components/ProgressBar/__snapshots__/index.spec.tsx.snap index 5d8e6675e3..37348b7202 100644 --- a/src/app/content/practiceQuestions/components/ProgressBar/__snapshots__/index.spec.tsx.snap +++ b/src/app/content/practiceQuestions/components/ProgressBar/__snapshots__/index.spec.tsx.snap @@ -1,191 +1,34 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ProgressBar displays properly 1`] = ` -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin-bottom: 1rem; -} - -.c1::after { - content: ""; - display: block; - height: 0.1rem; - width: 5.6rem; - background-color: #5e6062; -} - -.c1:last-child::after { - content: none; -} - -.c3 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin-bottom: 1rem; -} - -.c3::after { - content: ""; - display: block; - height: 0.1rem; - width: 5.6rem; - background-color: #5e6062; - background-color: #F1F1F1; -} - -.c3:last-child::after { - content: none; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 2.4rem; - height: 2.4rem; - border-radius: 50%; - background-color: #5e6062; - border: 1px solid #5e6062; - color: #fff; - margin: 0 0.4rem; - font-weight: bold; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 2.4rem; - height: 2.4rem; - border-radius: 50%; - background-color: #5e6062; - border: 1px solid #5e6062; - color: #fff; - margin: 0 0.4rem; - font-weight: bold; - color: #5e6062; - background-color: #fff; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 2.4rem; - height: 2.4rem; - border-radius: 50%; - background-color: #5e6062; - border: 1px solid #5e6062; - color: #fff; - margin: 0 0.4rem; - font-weight: bold; - color: #6e6e6e; - background-color: #f1f1f1; - border-color: #f1f1f1; -} - -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin: 3.2rem; - padding: 0; -} - -@media screen and (max-width:75em) { - .c1::after { - width: 3.3rem; - } -} - -@media screen and (max-width:75em) { - .c3::after { - width: 3.3rem; - } -} - -@media screen and (max-width:75em) { - .c0 { - margin: 1rem; - } -} -