altinn-studio icon indicating copy to clipboard operation
altinn-studio copied to clipboard

Create a new Studio Component named RecommendedNextAction

Open framitdavid opened this issue 10 months ago • 4 comments

Create a reusable component that implements the functionality to render some component(s), click on a skip-button which should emit callback when it's clicked, to make the parent component able to close the "RecommendedNextAction" component. The buttons inside it should have input-props from above that makes disabeling and text-editing possible.

### Acceptance criteria
- [ ] When the component is added to Studio Components
- [ ] When the component is implemented as designed
- [ ] When the component has unit-tests
- [ ] When the component has documentation in Studio Component about why and which use-cases it should be used.

framitdavid avatar Apr 08 '24 06:04 framitdavid

I created a small design to illustrate what we mean by "next recommended action." I hope the sketches manage to convey the point, but @Annikenkbrathen will need to create the actual sketch of how it should look in Studio's production.

image

image

framitdavid avatar Apr 08 '24 07:04 framitdavid

Design suggestions! Figma link

  • We make a mini-modal inside the pane. (I used cards from DS). Use the same background as used in modals, but only in front of the settings panel.

  • I think this will draw enough attention for the user to see that they should do something in the settings panel. I dont think we nees to have the alert inside the mdoal 😊 Otherwise, the design is similar to your suggestion @framitdavid 



  • The save button should only show when there is valid text typed in the input field.

  • The text should be discussed with @Ildest

Skjermbilde 2024-04-26 kl  12 41 30 Skjermbilde 2024-04-26 kl  12 40 56 Skjermbilde 2024-04-26 kl  12 41 07

Annikenkbrathen avatar Apr 26 '24 10:04 Annikenkbrathen

Just a few revisions to the text above @framitdavid og @Annikenkbrathen :

Gi oppgaven et navn Du finner lettere igjen oppgaven på Lage-siden, hvis du gir den et eget navn. Hvis du velger Hopp over, får oppgaven en tilfeldig navn. Du kan endre navnet senere.

Sounds OK?

Ildest avatar Apr 29 '24 09:04 Ildest

Design suggestion link to figma

Image

Image

Annikenkbrathen avatar May 06 '24 08:05 Annikenkbrathen