Modify preview-card styles #88
Conversation
jomcarvajal
requested review from
bethshook and
jivey
and removed request for
a team
src/components/Exercise.stories.tsx
Outdated
| @@ -103,7 +104,7 @@ const exerciseWithQuestionStatesProps = (): ExerciseWithQuestionStatesProps => { | |||
| is_answer_order_important: false, | |||
| answers: [{ | |||
| id: '1', | |||
| correctness: undefined, | |||
| correctness: '1.0', | |||
There was a problem hiding this comment.
Does this break any of the other stories? Seems alright, I just can't remember why it was undefined originally
There was a problem hiding this comment.
This marks a question as correct, I can keep it as undefined and create a new variable just for new stories
src/components/Exercise/styles.ts
Outdated
|
|
||
| .question-info { | ||
| font-weight: bold; | ||
| font-size: 1.6rem; |
There was a problem hiding this comment.
Does this match Figma? I think Figma might be slightly smaller. Also I'm not sure when that other PR will get merged, so maybe we do include the fix you made last week for the broken separator :D
There was a problem hiding this comment.
You're right, it should be 1.2rem
|
|
||
| beforeEach(() => { | ||
| exercise = { | ||
| uid: '1@1', |
There was a problem hiding this comment.
I think these are indented 4 but we use 2 in this repo (and most of the repos)
| /** | ||
| * An Exercise version with less interaction with card and grants an Overlay with Include/Remove component | ||
| */ | ||
| export const ExercisePreview = ( |
There was a problem hiding this comment.
I'd prefer this to take selected and onSelectionChange props, that keeps it flexible on the consuming side
| @@ -160,7 +160,7 @@ export const mixins = { | |||
| .answer-letter-wrapper::before { | |||
| color: ${invertBubble ? '#fff' : color}; | |||
| border-color: ${color}; | |||
| ${invertBubble ? `background-color: ${color};` : null} | |||
| ${invertBubble ? `background-color: ${color} !important;` : null} | |||
There was a problem hiding this comment.
When a card is selected, all background should change color(including letter wrappers). But when a letter is marked as correct, I forced to overrides the "correct theme"
There was a problem hiding this comment.
Ah I see now, I didn't realize we set an explicit background on those
@jivey bubbles mean "answer-letters" ? |
|
@jomcarvajal Yeah I think the |
* card styles * Overlay option added in exercise component and new component IncludeRemoveQuestion created (#86) * overlay option added in exercise component and new component includeremovequestion created * resolve comments * update snapshots * move overlay logic into Card component * remove focus on card when overlay is up and add autoFocus for first interactive element on overlay * Add export for IncludRemoveQuestion (#87) add export of IncludRemoveQuestion * Modify preview-card styles (#88) * modify preview card styles * change color of card when is included * resolve comments - fix style issues * change props in storybook of Exercise * Add prop method for details button * Refactor props of ExercisePreview * export ExercisePreview * remove focus first for screenreaders, style tweaks * Remove aria attributes in order to read card body content (#90) * remove aria attributes in order to read card body content * conditional aria attributes for cardbody * previewMode in storybook * missing previewMode prop * fix some type issues * disable eslint rule for ts-ignore just for this case * Core 675 refactor exercise preview (#92) * remove includeRemove logic from preview exercise card * print stories deleted by mistake * test description fixed * added new story for preview exercise, hide all feedback propertly * revert print delete * remove questionState prop, added feedback inside answers for stories purposes * is_completed added into ExercisePreview component * update snapshots * New prop showCorrectAnswer (#93) * new prop showCorrectAnswer * fix exercise stories * ExercisePreview now shows question detailed (#94) * ExercisePreview now shows question detailed * Restore print * hide footer with new condition * Restore print * fix indentation in ExerciseQuestion * set answer_id as empty * set new margin for preview card * update snaps * resolve test duplicity --------- Co-authored-by: jomcarvajal <[email protected]> Co-authored-by: jomcarvajal <[email protected]>
New ExercisePreview component added (show_all_feedback: false )
New style for selected cards
