micahgodbolt

interface IMenu {
  stuff?: any;
  items: string[];
}

interface IButton {
...
  menuProps?: IMenu
}

micahgodbolt

class Content extends React.Component {
  constructor() {
   super(); 
  }
  
  render() {
    return (
      <Fabric className='foo'>
        <DefaultButton
          onClick= {() => alert('hello')}

micahgodbolt

import React, { Component } from 'react';
import './App.css';
import { TextField, PrimaryButton, Checkbox, ProgressIndicator} from "office-ui-fabric-react";

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      todo: null

micahgodbolt

The apt-get version of node is incredibly old, and installing a new copy is a bit of a runaround.

So here's how you can use NVM to quickly get a fresh copy of Node on your new Bash on Windows install

$ touch ~/.bashrc
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
// restart bash
$ nvm install --lts

micahgodbolt

Nested Yaml

props:
  BUTTON:
    BACKGROUND:
      value: blue
    COLOR:
      value: white 
    HOVER:
      BACKGROUND:

micahgodbolt

Theo lets you preprocess your JSON data before sending it through to its normal processes. This preprocess allows you to use a nested props structure, which is then converted to standard flat props.

props:
  BUTTON:
    BACKGROUND:
      value: blue
    COLOR:
      value: white 
 HOVER:

micahgodbolt

  <div class="hero" style="background-image:url({{ background_image OR "http://placehold.it/1000x400" }})">
    <h1 class="hero__title">{{ title OR "We Are Awesome" }}</h1>
   {% block body %}
   {% endblock %}
   {% block footer %}
        <a class="hero__cta button button--primary" href="{{ cta_href OR "/some/awesome-link.html" }}>{{ cta_text OR "Find Out Why!" }}</a>
   {% endblock %}
  </div>

micahgodbolt

.ms-Button.ms-Button--primary {
  background-color: $ms-colorBackgroundButtonPrimary;
   color: $ms-colorTextButtonPrimary;

  &:hover {
    background-color: $ms-colorBackgroundButtonPrimaryHover;
  }
}

micahgodbolt

describe("Promo Band pattern", function() {
	before(function() {
		browser.url("/tests/promo_band");
		return browser;
	});

	it("should look like baseline", function() {
		return browser
			.compareScreen("promo_band", {
			  	name: "pattern",

micahgodbolt

{% embed 'band.twig' with
  {
    "global": _context,
    "body": {
      "layout": "gallery5"
    },
    "meta": meta,
  } only
%}