GarthDB

Component: accordion

Icon	Line links	Required
spectrum-css-icon-Chevron100	#16 #27 #36 #45	Yes

Component: actionbar

Icon	Line links	Required

GarthDB

Arguments: 
  /Users/garthdb/.asdf/installs/nodejs/14.19.3/bin/node /Users/garthdb/.yarn/bin/yarn.js --frozen-lockfile

PATH: 
  /Users/garthdb/.asdf/plugins/nodejs/shims:/Users/garthdb/.asdf/installs/nodejs/14.19.3/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/Users/garthdb/.yarn/bin:/Users/garthdb/.config/yarn/global/node_modules/.bin:/Users/garthdb/.asdf/shims:/usr/local/Cellar/asdf/0.10.2/libexec/bin:./bin:/usr/local/bin:/usr/local/sbin:/Users/garthdb/.dotfiles/bin:/Users/garthdb/.rbenv/shims:/usr/local/git/bin:/Applications/Postgres93.app/Contents/MacOS/bin:/Users/garthdb/Code/go/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/Users/garthdb/.rvm/bin:/Users/garthdb/.rvm/bin

Yarn version: 
  1.22.19

Node version: 

GarthDB

~/Spectrum/spectrum-css vrt-reference 6m 42s
❯ npm run backstop:docker:test

> [email protected] backstop:docker:test /Users/garthdb/Spectrum/spectrum-css
> backstop test --docker --config=backstop_data/backstop_test.js --env=local

BackstopJS v5.0.4
Loading config:  /Users/garthdb/Spectrum/spectrum-css/backstop_data/backstop_test.js 

COMMAND | Executing core for "test"

GarthDB

const path = require('path');
const fs = require('fs');
const yaml = require('js-yaml');

const order = [
  'id',
  'name',
  'dnaStatus',
  'status',
  'ignoreDNA',

GarthDB

# Run  npm install --dev [email protected]  to resolve 3 vulnerabilities
SEMVER WARNING: Recommended action is a potentially breaking change
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ minimatch                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ mocha [dev]                                                  │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ mocha > glob > minimatch                                     │

GarthDB

import test from 'ava';

class Basic {
  constructor(str) {
    this.str = str;
  }
}

test('should match object and typed object', t => {
  const basic = new Basic('tada');

GarthDB

import React from 'react';
import Filler from 'filler';

const cssClassName = Filler.className('topcoat-button');

export default class Button extends React.Component {
  render() {
    return <button className={cssClassName}>Button</button>;
  }
}

GarthDB

all:
  - regex: "((?:\w|-)*)":\s?\S*\n?
    replace: "$1 "
    description: list of npm dependencies from package json into npm install command

GarthDB

.filters {
  background: #2c3e50;
  height: 80px;
  box-sizing: border-box;
  color: #ecf0f1;
  box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
  padding: 32px 35px 0;
  width: calc(100% + 20px);
  font-weight: 700;
  border: 0;

GarthDB

.filters

When styling an app it is best if we start with semantic, uncluttered markup.

This isn't just an idealistic approach, it has real tangible benefits:

• The code is descriptive which makes it easier to maintain
• It also makes it easier to predict how browser or user stylesheets might interact
• Often times it makes it easier to style
• If for some reason the stylesheet fails to load, things still make sense