🎨 [Application design] Layout of a bot overview

[jrosseel]

Bot Overview Component

When a user logs in, they are sent to the bot builder homepage. Here they can view all the bots they are building and go to their builder.

---

Quick links: Summary | Description | Template | Example | Resources

---

Summary

As a user, I wish to view my bots in a user friendly and nicely structured way even if I have many.

Description

Right now, the bot overview looks as follows:

In this screen I can (1) view all active bots, (2) navigate to the bot-builder of one of my bots and (3) create a new bot (and navigate straight to the bot-builder). T

This covers the functionality of this screen, yet could be a bit nicer looking and more user friendly.
We therefore prepared the following design:

Your assignment, make it look like that picture :) Ignore the search bar for now as that is in another issue (TODO Link).

Technical Analysis

The feature we're editing is located in libs/features/convs-mgr/home. Currently the functionality is split across the home page and the story-list-item component.

For this feature, you'll have to :

1. Extend the "Story" interface model to include a description and image field
2. Implement the design by extending and modifying the components in the feature package (ref _libs/features/convs-mgr/home_)
2.1. When doing so, you'll need to create some new child-components of story-list-item
2.2. You will also want to create a new component story-list and move the state layer touchpoint their (= the import of StoriesStore). Remove that import from the home component.
3. Use reusable css variables

Acceptance Criteria

1. When rendered the component is pixel perfect compared to the image
2. The component is well structured following the Technical Analysis

Resources:

• Mockups: [Here goes a URL to or the name of the mockup(s) in XD];

[meshack34]

I will work on this issue

[trevin-livele]

I am working on this