@peoplecues/commons v0.1.18

Overall Architecture

PART I - Design Tokens

Private npm modules managed with Bit

Theme, token-level mixins and the following tokens

• Typography
• Spacing
• Color
• Grid
• Elevation
• Mobile (breakpoints)
• Icons
• Misc
  • Borders
  • Border radius
  • Box shadows

PART II - Common components library

Private npm modules managed with Bit

Atomic/molecular components that are commonly used across 10x universe.

PART III - Component development environments

Product specific component development environments

• A storybook app for common components
• A storybook app for 10xGoals
• A storybook app for 10xPeople

Component Library - List of components

Alert/Toast

[Handover Link]

Variants / Stories

• with-action
• with-action-close
• errored

Props

• button OBJECT - {text, link}
• showCloseButton BOOLEAN
• type ENUM - primary, negative

Actions

TODO

Avatar

[Handover Link]

Variants / Stories

• with-badge
• without-badge
• with-image
• without-image

for all of the above:

• XL
• L
• M
• S

Props

• image STRING
• size ENUM - XL, L, M, S
• badgeText STRING

Actions

TODO

Extra utilities

• string-based color generator for no-image variants

Index (10xGoals)

[Handover Link]

Variants / Stories

• basic
• primary
• secondary
• positive-action
• negative-action

Internal states (for each of the above)

• default
• active
• hover
• focus
• disabled

Props

• children STRING
• type ENUM - basic, primary, secondary, positive, negative

Actions

TODO

Text Index (10x Goals Only)

(needs a better name)

[Handover Link]

Variants / Stories

• text-only
• icon-only
• text-and-icon w/ icon left
• text-and-icon w/ icon right

Internal states (for each of the above)

• default
• active
• hover
• focus
• disabled

Props

• children STRING
• icon STRING - icon name
• iconPosition ENUM - left, right

Actions

TODO

Buttons (10xPeople)

[Handover Link]

Survey Answer Index

Variants / Stories

• large
• small

Internal states (for each of the above)

• default
• hover

Props

• children STRING
• image STRING - image url
• imagePosition ENUM - left, right
• size ENUM - large, small

Actions

TODO

Buttons

Variants / Stories

• large
• small
• primary
• secondary
• with-icon w/ icon on the left
• with-icon w/ icon on the right
• without-icon

Internal states (for each of the above)

• default
• hover

Props

• children STRING
• icon STRING - icon name
• iconPosition ENUM - left, right
• size ENUM - large, small
• type ENUM - primary, secondary

Actions

TODO

Text Buttons

Variants / Stories

• large
• small
• icon-only
• text-only

Internal states (for each of the above)

• default
• hover

Props

• children STRING
• icon STRING - icon name
• size ENUM - large, small

Actions

TODO

Index Dropdown (10xGoals)

[Handover Link]

Variants / Stories

• default
• with-filter

Internal states (for each of the above)

• default
• active
• hover
• focus
• disabled

Props

• children
• filterText NUMBER

Actions

TODO

Labels (only card labels, status labels and helper text)

[Card Labels] [Status Labels] [Helper text]

Variants / Stories

• quarter
• company-objective
• non-aligned
• on-track
• off-track
• achieved
• dropped
• not-started
• needs-work
• helper-text-alert
• helper-text-info

Props

• type ENUM - TODO
• children
• icon STRING - icon name
• iconPosition ENUM - left, right
• size ENUM - large, small

Actions

TODO

Quarter Dropdown

TODO

Team Dropdown

TODO

Owner Dropdown

TODO

Progress & Status

[Handover Link]

Variants / Stories

• empty-bar-only
• progress-bar-only
• on-track
• off-track
• achieved
• dropped
• not-started
• needs-work

Internal states (for each of the above)

• default
• hover
• disabled

Props

• type ENUM - on-track, off-track, not-started, achieved, dropped, needs-work
• progress NUMBER
• state ENUM - disabled, active

Actions

TODO

Input Fields

[Handover Link]

Basic Inputs

Variants / Stories

• default
• filled
• errored

Internal states (for each of the above)

• default
• hover
• focus
• disabled

Props

• state ENUM - disabled, active
• label STRING

Actions

TODO

TextArea

Variants / Stories

• default
• errored

Internal states (for each of the above)

• default
• hover
• focus
• disabled

Props

• state ENUM - disabled, active
• fieldName STRING

Actions

TODO

Accordion/Expandable

TODO

Grid Layout

TODO

Title Bar

[Handover Link]

Variants / Stories

• default
• with-search

Internal states (for each of the above)

Props

• tableTitle STRING
• showSearchBar BOOLEAN

Actions

TODO

Table

(TODO - needs to be made more generic)

[Handover Link]

Table header

Variants / Stories

• default

Internal states (for each of the above)

Props

• columns ARRAY

Actions

TODO

Table row - people

Variants / Stories

• default

Internal states (for each of the above)

• default
• inactive (TODO: clarify what grey means)
• hover

Props

• name STRING
• avatar STRING - image url
• email STRING
• role STRING
• actions ARRAY

Actions

TODO

Table row - pending

Variants / Stories

• default

Internal states (for each of the above)

• default
• inactive (TODO: clarify what grey means)
• hover

Props

• email STRING
• role STRING
• last-invited DATE
• actions ARRAY

Actions

TODO

Loader

Variants / Stories

• default

Internal states (for each of the above)

Props

Image

Variants / Stories

• default

Internal states (for each of the above)

• loading

Props

• url STRING - image url

Actions

TODO

Background Image

Variants / Stories

• default

Internal states (for each of the above)

• loading

Props

• url STRING - image url

Actions

TODO

Icon

Variants / Stories

• default

Internal states (for each of the above)

Props

• icon-name STRING

Actions

TODO

Tag

Variants / Stories

• default
• with-close-button

Internal states (for each of the above)

Props

• children
• showCloseButton BOOLEAN

Actions

TODO

Questions

• Add tasks for writing design tokens
• Add actions to the sheet after looking at code
• Add refactor-complexity remarks after looking at code
• Questions to ask Vikalp/Mani
  • Index and internal states
  • Icon buttons on people vs. icon button on goals
  • How to responsive (typography, spacing) - breakpoints vs fluid
    • Try breakpoints first, fluid isn’t ideal (Mani)
  • What is button mobile (save-and-proceed) on 10x people buttons list
  • Where do labels go on textareas, checkboxes, radios?
  • Buttons across 10x need to be refactored on figma (suggested props - size, icon, bordered, icon, icon-position)
• Clarifications needed on the component sheet
  • What is accordion/expandable precisely?
  • What is Heading?