alanbsmith

Style Prop Comparison

Example 1

// These types are brief and correct, but lose autocomplete support because of the string union :/ 
export type ColorProps = {
  /** sets background color with design system or generic value */
  bgColor?: DesignSystemColor | string;
 /** sets color with design system or generic value */

alanbsmith

[
  "almond",
  "caramel",
  "blackberry",
  "brown sugar",
  "candied orange",
  "chocolate",
  "clean",
  "cocoa",
  "dried cherry",

alanbsmith

[
  {
    "country": "Burundi",
    "region": "Africa",
    "subRegions": ["Buyenzi", "Bweru"]
  },
  {
    "country": "Ethiopia",
    "region": "",
    "subRegions": ["Harrar", "Jimma", "Limu", "Sidamo", "Yirgacheffe"]

alanbsmith

[
  {
    "firstName": "Alan",
    "lastName": "Smith"
  }
]

alanbsmith

Canvas Kit v5 Workshop Session 1

Using Layout and Typography Components

Table of Contents

• Canvas Kit v5 Workshop Session 1
  • Table of Contents
  • Objectives
• Outline

alanbsmith

Learn HTML & CSS with Canvas

Block 1 Outline

Table Of Contents

• Learn HTML & CSS with Canvas
  • Table Of Contents
  • Block 2 | Sass Basics & Using Canvas CSS
    • Exercise 1 | Using Sass Variables

alanbsmith

Learn HTML & CSS with Canvas

Block 2 Outline

Table Of Contents

• Learn HTML & CSS with Canvas
  • Table Of Contents
  • Block 1 | HTML & CSS Basics
    • Initial Setup

alanbsmith

Design Systems Resources | A Primer

Design Systems

• [Design Systems][1] by Alla Kholmatova - the canonical design systems book, in my opinion
• [Expressive Design Systems][2] by Yesenia Perez-Cruz - a great follow-up to Kholmatova's book
• [Atomic Design][3] by Brad Frost - written before we were using the term 'design system' for web interfaces, but many popular ideas extend from these ideas

Systems Thinking

alanbsmith

function sign(name, fontSize = 96) {
  // assumes the id of the canvas element is 'canvas'
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d');
  ctx.font = `italic ${fontSize}px Snell Roundhand`;
  const signatureWidth = ctx.measureText(name).width;
  const x = canvas.width/2 - signatureWidth/2;
  const y = canvas.height/2 + fontSize/2;
  ctx.fillStyle = ctx.strokeStyle;
  ctx.fillText(name, x, y);

alanbsmith

import { collapseOnEsc } from '../utils/hooks';
import { useSideNav } from './hooks';

const CollapsibleSideNav = () => {
  const { isNavOpen, toggleNav, a11yTargetProps, a11yHeadingProps} = useSideNav();
  // collapse the nav when the ESC key is pressed
  collapseOnEsc();

  return (
    <SidenavContainer variant={isNavOpen ? 'expanded' : 'collapsed'}>