ChadRehmKineticData

{ this.state.open ?
  (
    <CoreFormModal
      form="color-select"
      kapp="services"
      dismissed={this.closeForm}
      completed={this.closeForm}
    />
  ) : <button className="btn btn-default" onClick={this.openForm}>
        Open Form

ChadRehmKineticData

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export class ServiceCardBottom extends Component {  // class that extends component
  constructor(props) {
    super(props);

    this.state = { // initialize state
      visable: false,
    };

ChadRehmKineticData

<%@page pageEncoding="UTF-8" contentType="text/html" trimDirectiveWhitespaces="true"%>
<%@include file="../bundle/initialization.jspf" %>

<bundle:layout page="${bundle.path}/layouts/layout.jsp">
    <!-- Sets imports js and css specific to the setup pages. -->
    <bundle:variable name="head">
        <bundle:stylepack>
            <bundle:style src="${bundle.location}/setup/setup.css"/>
        </bundle:stylepack>
        <bundle:scriptpack>

ChadRehmKineticData

import React, { Component } from 'react';
import classNames from 'classnames';
import Autocomplete from 'react-autocomplete';
	
const handleChange = () => event => {
	this.setState({ indexLookup: event.target.value });
	if(this.props.onChange === 'function') {
		this.props.onChange(event.target.value);
	}
}

ChadRehmKineticData

import React from 'react';
import { KappLink as Link, Icon } from 'common';

export const CategoryCard = props => (
  <Link
    to={props.path}
    className="card c-card"
    style={{
      backgroundColor: props.category.backgroundColor
        ? props.category.backgroundColor

ChadRehmKineticData

export const Category = object => ({
  name: object.name,
  slug: object.slug,
  sortOrder: parseInt(
    Utils.getAttributeValue(object, constants.ATTRIBUTE_ORDER, 1000),
    10,
  ),
  icon: Utils.getAttributeValue(
    object,

ChadRehmKineticData

import React from 'react';
import { KappLink as Link, Icon } from 'common';

export const ServiceCard = ({ path, form }) => (
  <Link to={path} className="card s-card">
    <div className="card-title">
      <h1>
        <Icon image={form.icon} background="blueSlate" />
        {form.name}
      </h1>

ChadRehmKineticData

export const Form = object => ({
  name: object.name,
  slug: object.slug,
  description: object.description,
  icon: Utils.getAttributeValue(
    object,
    constants.ATTRIBUTE_ICON,
    constants.DEFAULT_FORM_ICON,
  ),
  categories:

ChadRehmKineticData

import React from 'react';
import { KappLink as Link, Icon } from 'common';

export const ServiceCard = ({ path, form }) => (
  <Link to={path} className="card s-card">
    <div className="card-title">
      <h1>
        <Icon image={form.icon} background="blueSlate" />
        {form.name}
      </h1>

ChadRehmKineticData

import React from 'react';
import { CoreForm } from 'react-kinetic-core';
import {
  KappLink as Link,
  ErrorNotFound,
  ErrorUnauthorized,
  ErrorUnexpected,
  PageTitle,
} from 'common';
import { SERVICES_KAPP as kappSlug } from '../../constants';