ratbeard

.rainbow-text {                                                                                                                                                                           
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: -webkit-gradient(linear,  left top,  left bottom, 
        color-stop(0.00, red), 
        color-stop(16%, orange),
        color-stop(32%, yellow),
        color-stop(48%, green),
        color-stop(60%, blue),
        color-stop(76%, indigo),

ratbeard

/* 

Concern 1: CUSTOM STYLES

Custom theme styles are given to us as json.
Object has one level of nesting, mostly grouped by the component w/ some higher level blocks like 'global'.

We are not allowing free reign custom styles, but highly targeted element+property styles.

We should have global 'theme color' properties so you don't need to specify the same color in 10 places.

ratbeard

//a
        <SectionsEditor
          assetState={assetState}
          dispatchToAssetState={dispatchToAssetState}
          key={index}
          section={section}
          sectionIndex={index}
          canAddSection={canAddSection}
          canMoveSection={canMoveSection}
          canRemoveSection={canRemoveSection}

ratbeard

<key>com.apple.developer.associated-domains</key>
	<array>
		<string>applinks:launchpad.xxx.us</string>
		<string>applinks:launchpad.xxx.us</string>
		<string>applinks:launchpad.xxx.com</string>
	</array>

ratbeard

{
  "logoUrl": "https://s3.amazonaws.com/playbook-us/public/images/scrimmage-logo-dark.svg",
  "background": "purple linear-gradient(125deg, #194795, #0C2652)",
  "textColor": "#232323",
  "actionColor": "#0073FF",
  "buttonBackground": "#0073FF",
  "buttonColor": "#ffffff"
}

ratbeard

type Falsey = undefined | null | 0 | false | '';

/** Returns a new array with falsey values removed */
export function compact<T>(array: (T | Falsey)[]): T[] {
  // .ts is not smart enough about filter()
  return array.filter(item => !!item) as T[];
}

ratbeard

// https://stackoverflow.com/questions/46641380/exhaustive-map-over-a-union-of-typed-objects
// https://www.typescriptlang.org/docs/handbook/advanced-types.html

export function getInteractiveSection2({ question }: {
  question: Question;
}) {
  switch(question.type) {
    case 'multiple-choice':
      return <ChoicesSection {...buildItChoice({ question })} />;
    case 'fill-in-the-blank':

ratbeard

/*
griz asks:

something I didn't get
question isn't in the object passed in, and the order of the args doesn't match
seems like that'd be a type error?
*/


export function MatchingQuestion({ onSelectChoice, onBreakMatch, questionState }: {

ratbeard

import { typeSwitch } from './typeSwitch';
interface Circle {
  type: 'circle';
  radius: number;
}
interface Square {
  type: 'square';
  width: number;
}
type Shape = Circle | Square;

ratbeard

// X)
it('JUST works', () => {
  let result = appendQueryParams('rat.com', { a: 1, b: 'cool' })
  expect(result).toEqual('rat.com?a=1&b=cool')
])

// Y)
it('JUST works', () => { 
  expect(
    appendQueryParams('rat.com', { a: 1, b: 'cool' })