Carbon automated validation

[photodow]

We can use this tool to validate how well it follows Carbon and IDL.

checking all browser breakpoints? (sm, md, lg, xlg, max)

Some ideas to go into this report...

• [ ] IBM Design Language
  • [ ] Color
    • [ ] Carbon tokens (if css properties on) (pass) — Carbon theme token values only fallback — Can we contextualize the tokens?
    • [ ] IDL theme values as alternative (warning — with documentation)
    • [ ] No in Carbon or IDL (error — with documentation)
  • [ ] Spacing — Margin (layout first, spacing second) — padding (spacing first, layout second)
    • [ ] first spacing check (pass)
    • [ ] second spacing check (pass, possible warning — with documentation)
    • [ ] mini unit value (warning — with documentation)
    • [ ] doesn't match (error — with documentation)
  • [ ] Typography
    • If expressive theme enabled (check expressive tokens first)
    • by default (check productive tokens first)
    • if found (pass)
    • if not found (error — with documentation)
    • possible opportunity for contextual checks?

possible future rulesets

• [ ] Ratio
  • specific list of items we know have to have a correct aspect ratio? (image, cards, videos, ect...)
  • changes on browser resizes?
• [ ] Icons
  • check against Carbon icons
  • if found (pass)
  • if not found (error — with documentation)
• [ ] Photography
  • background images as well
  • [ ] check against watson visual recognition
  • [ ] check ratios
• [ ] Grid

• [ ] Code
  • [ ] Version usage
  • [ ] Overriding or additional code (need to check feasibility)
  • [ ] Component count & usage - Look at component list - total components in all - total unique components - Minimum count to be a carbon page? (e.g. 3)
  • [ ] Stale status - Has the page been updated within a time frame (e.g. 6 months since last update)
  • [ ] 3rd party code usage - specific and known checks (e.g. jquery, bootstrap, material) - anything not carbon? (e.g. anything from a seperate URL, or the main build if possible)
• [ ] Library specific validation
  • [ ] Carbon for IBM.com #12

Rule results Pass — points added Warning — no points deducted — provide documentation Error — points deducted — provide documentation

What exactly makes a page Carbon compliant? If we add a percentage to a page, what percentage passes, what percentage fails? (85 >= pass, 50 >= warning, else = fail)

Possible algorithms

1. ($max – $min)($correctCount * 1 / $ruleCount) // min/max // never can get 100%, and yet never can get below 25%/ / Leaning towards this one
2. $correctCount * 100 / $ruleCount // basic percentage based
3. 100 - ($incorrectCount * $value) // start with 100% and take a value away for each one, stop at zero // not great for only a couple rules or scaling

Weight results where some might be worth 2 times or more than normal in/Correct $resultsValue=1, Warning $resultsValue=.5 $ruleCount += $rules[i].ruleWeight * 1 || 1 $correctCount += $rules[i].ruleWeight * $resultValue || $resultValue $incorrectCount += $rules[i].ruleWeight * $resultValue || $resultValue

Delayed in favor of beacon for ibm dot com