openedx / openedx/frontend-app-authoring
Sync Modal Cards
Open
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 17
- Forks
- 218
- Avg merge
- 9d 20h
- Merged PRs (30d)
- 20
Description
Designs
Spec
- Cards have an a title and an icon based on block type. For blocks with title changes, the displayed name is the local component name
- Cards have different states based on which changes have been published at the library
- For newly added: Success 500 color, plus icon
- For deleted: Danger 500 color, trash icon
- For modified blocks (itself or lower level blocks): Warning 700, sync icon
- For no syncable change (including title or text overrides): Light 700, no icon.
- Cards have a description based on changes:
| Change Type | Before | After |
|---|---|---|
| Added | This {block type} will be added in new version | This {block type} was added |
| Deleted | This {block type} will be removed in the new version | This {block type} was removed |
| Modified | This {block type} will be modified | This {block type} was modified |
| Title change | Original Library Name: {Subsection 4} | Subsection will remain renamed |
- The entire card is clickable
- Cards have a right facing chevron >
In Scope
- Card designs for before and after diff side
- Clickability
Out of Scope
Modals are defined in the parent ticket
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Designs image and the Spec, focusing on the before and after diff sides rather than the parent modal ticket. Implement cards with the specified icons, colors, descriptions, chevrons, and clickability, then verify each added, deleted, modified, title-change, and no-syncable-change state against the design.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100