JakeLaCombe

h1. Welcome to Code for America KC Chapter!

Thank you for joining us! We have several projects going on here, and are looking for all the help we can get!

Most of the projects we are developing here are Web Applications, meaning they are writting in HTML, CSS, and JavaScript. To get started with these tools, look at the following guides.

JakeLaCombe

{
   "List":{
      "--terra-list-divider-border":"1px solid #dedfe0",
      "--terra-list-chevron-color":"#bcbfc0",
      "--terra-list-item-selected-background-color":"#ebf6fd",
      "--terra-list-item-selected-divider-color":"#0092e0",
      "--terra-list-item-hover-background-color":"#ebf6fd",
      "--terra-list-item-selected-hover-background-color":"#d4ecfb"
   },
   "Alert":{

JakeLaCombe

{
      "--terra-list-divider-border":"1px solid #dedfe0",
      "--terra-list-chevron-color":"#bcbfc0",
      "--terra-list-item-selected-background-color":"#ebf6fd",
      "--terra-list-item-selected-divider-color":"#0092e0",
      "--terra-list-item-hover-background-color":"#ebf6fd",
      "--terra-list-item-selected-hover-background-color":"#d4ecfb",
      "--terra-alert-icon-font-size":"1.286em",
      "--terra-alert-custom-text-color":"#1c1f21",
      "--terra-alert-alert-background-color":"#fed1d1",

JakeLaCombe

Example Validations

// rules.js
import * as ErrorMessages from './errorMessages.js';

export const required = (text) => {
  if (text) {
    return null;
  } else {
    return ErrorMessages.isRequired;

JakeLaCombe

Validators

const validator = {
  username: {
    rules: [
      {
        test: /^[a-z0-9_]+$/,
        message: 'Username must contain only alphabets-numeric lowercase characters',
      },

JakeLaCombe

Validators

import validator from 'validator';
const required = (value) => {
  if (!value.toString().trim().length) {
    // We can return string or jsx as the 'error' prop for the validated Component
    return 'require';
  }
};

JakeLaCombe

# Example Adapter

```jsx
const TextFieldAdapter = ({ input, meta, placeholder, required, ...rest }) => (
  <Field
    {...rest}
    error={meta.submitError}
    isInvalid={meta.submitFailed}
    required={required}
  >

JakeLaCombe

Input Field Props Table

(For this tech design, the same principles would apply for a TextareaField and SelectField component)

Summary

Terra input field essentially wraps a terra-form-input inside of a terra-form-field component. It would contain first class parameters that map up to all the props for a field, and pass them into a field component. In addition, InputField would contain a prop inputAttrs that passes those props to the input element.

React Props

• error - Error message for when the input is invalid.

JakeLaCombe

/* eslint-disable class-methods-use-this */

import React from 'react';
import { Form, Field, FormSpy } from 'react-final-form';
import InputField from 'terra-form-input/lib/InputField';
import Checkbox from 'terra-form-checkbox';
import CheckboxField from 'terra-form-checkbox/lib/CheckboxField';
import TerraField from 'terra-form-field';
import Radio from 'terra-form-radio';
import RadioField from 'terra-form-radio/lib/RadioField';

JakeLaCombe

interface State {
  zoomState: 'zoomstart' | 'zoomend'
}

const VisualizationContext: State = {
  zoomState: 'zoomend'
}

const Visualization = (zoomState) => {