:hammer_and_wrench: [TASK] : UI kit enhancements

[mike-mcnulty]

As an admin user, I need to be able to create a new event, so that I can crowdsource ideas to achieve a meaningful outcome with my community.

I need to be able to define key details about my event, so that users understand what my event is all about, why they should participate, and any terms & conditions.

GIVEN an admin user WHEN click “create new event” THEN launch campaign builder AND open editor for setup details

GIVEN a user inside campaign editor WHEN expand the "SETUP" section THEN show Title, Description, Fund Rules & Requirements

Form Elements Found: (Added by NK)

• [x] Custom View / Edit / Cancel / Save responsive container
• [x] Field required indication (label - in instruction field (Material 3)
• [x] Item list | add | edit | delete | save
• [x] Custom upload featured image / show image
• [x] Add parameter code to field (for reference and building a Catalyst Voices Parameter sheet)
• [x] Parameter code B4-B12 (Rewards & Compensation is Out of Scope)
• [x] Date Picker | Set Start Date | Set End Date
• [x] Time Picker | Set Start Time hh:mm | Set End Time hh:mm
• [x] Tabs | Set tabs (Json)
• [x] Custom edit tab list | drag, add, edit, delete.
• [x] Sync new parameter doc, after team review: Yet another parameter list
• [x] Required field setup per segment

UI Kit Request/Upgrades @BojanKocijan : Small fixes:

• [x] Dropdown illustrated next to design.
• [x] What are the proper background colors? for Light/Dark. (level)
• [x] text-field | string | single-line | Instruction bottom left | character max bottom right | Example: title (char 60)
• [ ] text-field | string | multi-line | Instruction bottom left | character max bottom right | Example: description (char 140)
• [ ] Split Support Texts below form fields - Labels (left) / Character Limit Label (right)
• [ ] Navigation drawer 3-dot hover gives visual error.

Discuss with Dev:


• [ ] Input with different sizes for in table usage.
• [ ] Create dense version of input
 for in table usage.
• [ ] Create dense version of chip for in table usage.
• [ ] Create dense version of dropdown
 for in table usage.
• [ ] Create dense version of avatar for in table usage.

M3 Remarks:

• Great for consuming content interfaces (the intent of google)
• Not great for interactive edit/add/config interfaces. (opportunity)

Catalyst UI Kit Grooming:

• [ ] Text-field disabled state has strange/deformed stroke.
• [ ] Text-field disabled state label is not greyed out.
• [ ] Text-field dark theme has no outline?
• [ ] Text-field hover has no visual difference?

Component requests:

• [x] Time select
• [ ] Multi-line text field
• [x] Table
• [ ] Item list | type ordered
• [ ] Item list | type unordered
• [ ] Sliders (Set value, Set value range)
• [ ] Avatar Chip
• [ ] Color selector (8)
• [ ] WYSIWYG ? (Modern like Arc browser)

Refinement Tasks

• [ ] Remove "Allow dReps" question
• [ ] Add new field to insert up to 3 supporting links (eg gitbook rules, fund launch blog post) for further reading

AC:

• Fund Setup includes all relevant questions and ability to input responses
• Prototype draft completed
• Review prototype with stakeholders from admin team to ensure process viability
• Review prototype with engineering team to ensure feasibility
• Prototype ready for user testing

FUTURE TASK: Campaign Card Listers - Brand / Event / Description / Budget

FIGMA: https://www.figma.com/file/QmvkPdTKrx0nJUTXayYIqv/Catalyst--F11-Hi-Fidelity?type=design&mode=design&t=fRIuepJJ3wZGJW9q-0

[mike-mcnulty]

FYI @coire1

[mike-mcnulty]

TODO: final evaluation of parameters, make sure everything is covered, align on required fields & data validations; finalize a document source of truth that pulls it all together

TODO: split out UI kit updates into separate ticket, close out this ticket once above

[nielskijf]

@mike-mcnulty Move open check box items to UI Kit ticket.