Cupcake content: components

jeffchew commented 5 years ago

Wonil-Suh1 created the following on Aug 05:

Introduction

This story is part of the first phase work (research) towards the cupcake website.

The problem

As a designer / developer, I need to understand how do design and build with components.

Expected outcomes

[ ] A list of pages, each with description, references if applicable

Original issue: https://github.ibm.com/webstandards/digital-design/issues/1363

jeffchew commented 5 years ago

On Aug 08, chsanche commented: Update: Met with Olivia and agreed on the task steps today. Olivia will move forward with the task as soon as she is done with the current sprint priority.

Work document can be viewed here.

jeffchew commented 5 years ago

On Aug 22, chsanche commented: @Olivia-Flory Please add the list and additional information around the page content detail exploration you have in the Box document as discussed this morning. Feel free to let me know if you would like to take another look together whenever you are ready.

jeffchew commented 5 years ago

On Aug 22, Olivia-Flory commented: I've done a bit of research around other design systems and the Carbon content within the component pages to get a sense of:

what we need to cover
what other systems cover
what Carbon has and where the components are unique

The components vary between content and

I've put together an outline of what I think could be good from a wedding cake perspective and gone through to pull out the essentials for the cupcake website.

Wedding cake content ideas

Cupcake content

italic indicates nice to have if we can get to it

Overview / General guidance

Description of components
use case and action

Variations

Interactive example
code snippet
use case for each variation (ie why primary vs secondary button)

Content & format guidelines

heading
labels
format
(dropdown) options
default values
helper text
placeholder text
error / success / validation states
accessibility best practices
length
order
text
header
body
footer
title
message
dismissal
icons

Specs

Color

class
property
token

Typography

class
size
weight
token / type style

Structure

class
property
px/rem
spacing token

Visual example

(note this will take a lot of production work)
spacers
padding
sizing

Recommended

things that are not built into component but recommended

Dev documentation

SCSS

mixins
modifiers
Files

Javascript

public methods
options
events
getting component classes

Should we include a link to edit the page like Carbon has?

jeffchew commented 5 years ago

On Aug 22, chsanche commented: @Olivia-Flory What you shared is great for the page content design. We will need it when we are ready to dive into the page content design phase.

For now, can you confirm the items listed below is what you are expecting to have for the Cupcake website "Components" section?

[ ] Overview
[ ] Component status
[ ] Accordion
[x] Button
[ ] Chat (CMaSS / UMX)
[x] Checkbox
[ ] Code snippet
[ ] Content switcher
[ ] Data table
[ ] Date picker
[x] Dropdown
[ ] File uploader
[ ] Form
[x] Footer
[ ] Inline loading
[ ] Left navigation
[x] Link
[x] List
[ ] Loading
[x] Locale selector
[x] Masthead
[x] Modal
[ ] Notification
[ ] Number input
[ ] Overflow menu
[x] Pagination
[ ] Progress indicator
[x] Radio button
[x] Search
[ ] Select
[ ] Slider
[ ] Structured list
[x] Tabs
[x] Tag
[x] Text input
[ ] Toggle
[ ] Tooltip

jeffchew commented 5 years ago

On Aug 22, chsanche commented: Nice. Now. Viewing the listed below, can you set priority for website page development based on your understanding of the adopter needs?

Please set priority from 1 to 16 (since we have a total of 16 component pages here), if you can. If you do not have enough information to prioritize them at this moment, it is ok, please let me know.

1 = The first page we MUST have for the Cupcake website "Components" section because, without it, our adopters absolutely can not complete their day to day tasks.

16 = Our adopters needed but it has less impact on what they need to have to complete their day to day tasks.

Pattern	Prority (based on Olivia)
Overview	16
Button	3
Checkbox	6
Dropdown	14
Footer	2
Link	4
List	13
Locale selector	15
Masthead	1
Modal	12
Pagination	8
Radio button	7
Search	5
Tabs	9
Tag	11
Text input	10

jeffchew commented 5 years ago

On Aug 22, linda-carotenuto commented: Not sure why a priority is needed from design, maybe that column could be readiness

jeffchew commented 5 years ago

On Aug 22, chsanche commented: ^^^ Awesome. Thanks @Olivia-Flory!

jeffchew commented 5 years ago

On Aug 22, chsanche commented: @linda-carotenuto I am looking at priority set up from the stream leads and adopters so we know how to refine the sitemap for the Cupcake website and break the content list into batches for development down the road. Let me know if my comments make sense.

jeffchew commented 5 years ago

On Aug 29, Wonil-Suh1 commented: @chsanche thank you. Can we add some descriptions on the overview page, what kind of content we may need there? Just simple bullet points. Others are clear and good.

Do you know where Leadspace and Footer are captured?

jeffchew commented 5 years ago

On Aug 29, chsanche commented: @Wonil-Suh1 We will be working on the page detail when we get to the content crafting along with a format for content display across the website.

The footer is listed above and the Leadspace is included in the Pattern content list task issue https://github.com/carbon-design-system/ibm-dotcom-library/issues/308.

jeffchew commented 5 years ago

On Aug 29, Olivia-Flory commented: @Wonil-Suh1 I have heard from the DGC designers that having an Overview page like Carbon's would be helpful to see all the components at a high level. I think this will be especially helpful when we start adding components that are outside of the core Carbon components.

What a component is
cards listing each component alphabetically

carbon-design-system / carbon-for-ibm-dotcom