playbook_ui 7.0.0.pre.alpha10 → 7.0.0.pre.alpha15

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_dark.jsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import SelectableCard from '../_selectable_card.jsx'
-
-class SelectableCardDark extends React.Component {
-  state = {
-    selectedWithIconDark: true,
-    selectedWithoutIconDark: true,
-    unselectedDark: false,
-  }
-
-  handleSelect = (event) => {
-    this.setState({
-      [event.target.id]: event.target.checked,
-    })
-  }
-
-  render() {
-    return (
-      <div className="pb--doc-demo-row">
-
-        <SelectableCard
-            checked={this.state.selectedWithIconDark}
-            dark
-            icon
-            inputId="selectedWithIconDark"
-            name="selectedWithIconDark"
-            onChange={this.handleSelect}
-            value="selectedWithIconDark"
-        >
-          {'Selected, with icon'}
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.selectedWithoutIconDark}
-            dark
-            icon={false}
-            inputId="selectedWithoutIconDark"
-            name="selectedWithoutIconDark"
-            onChange={this.handleSelect}
-            value="selectedWithoutIconDark"
-        >
-          {'Selected, without icon'}
-        </SelectableCard>
-
-        <SelectableCard
-            checked={this.state.unselectedDark}
-            dark
-            inputId="unselectedDark"
-            name="unselectedDark"
-            onChange={this.handleSelect}
-            value="unselectedDark"
-        >
-          {'Unselected'}
-        </SelectableCard>
-
-        <SelectableCard
-            dark
-            disabled
-            inputId="disabled_dark"
-            name="disabled_dark"
-            onChange={this.handleSelect}
-            value="disabled_dark"
-        >
-          {'Unselected'}
-        </SelectableCard>
-
-      </div>
-    )
-  }
-}
-
-export default SelectableCardDark

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.html.erb

@@ -1,30 +0,0 @@
-<div class="pb--doc-demo-row">
-
-  <%= pb_rails("selectable_card_icon", props: {
-    icon: "volume", 
-    title_text: "Sound", 
-    body_text: "Silent Mode",
-    input_id: 10,
-    checked: true,
-    card_icon: true,
-    dark: true
-  }) %>
-
-  <%= pb_rails("selectable_card_icon", props: {
-    icon: "location", 
-    title_text: "Location", 
-    body_text: "Allow ",
-    input_id: 12,
-    dark: true
-  }) %>
-  
-  <%= pb_rails("selectable_card_icon", props: {
-    icon: "wifi", 
-    title_text: "WiFi", 
-    body_text: "Disabled",
-    input_id: 13,
-    disabled: true,
-    dark: true
-  }) %>
-
-</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_dark.jsx

@@ -1,40 +0,0 @@
-import React, { useState } from 'react'
-import { SelectableCardIcon } from '../../'
-
-const SelectableCardIconDark = () => {
-  const [selected, setSelected] = useState(true)
-  const [unselected, setUnselected] = useState(false)
-
-  return (
-    <div className="pb--doc-demo-row">
-      <SelectableCardIcon
-          bodyText="Silent Mode"
-          checked={selected}
-          dark
-          icon="volume"
-          inputId={10}
-          onChange={() => setSelected(!selected)}
-          titleText="Sound"
-      />
-      <SelectableCardIcon
-          bodyText="Allow location data"
-          checked={unselected}
-          dark
-          icon="location"
-          inputId={11}
-          onChange={() => setUnselected(!unselected)}
-          titleText="Location"
-      />
-      <SelectableCardIcon
-          bodyText="Disabled"
-          dark
-          disabled
-          icon="wifi"
-          inputId={12}
-          titleText="WiFi"
-      />
-    </div>
-  )
-}
-
-export default SelectableCardIconDark

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.html.erb

@@ -1,26 +0,0 @@
-<div class="pb--doc-demo-row">
-
-  <%= pb_rails("selectable_icon", props: {
-    icon: "file-word",
-    dark: true,
-    input_id: 7,
-    checked: true,
-    text: "Doc"
-  }) %>
-
-  <%= pb_rails("selectable_icon", props: {
-    icon: "file-pdf",
-    dark: true,
-    input_id: 8,
-    text: "PDF"
-  }) %>
-
-  <%= pb_rails("selectable_icon", props: {
-    icon: "file-image",
-    dark: true,
-    input_id: 9,
-    disabled: true,
-    text: "PNG"
-  }) %>
-
-</div>

data/app/pb_kits/playbook/pb_selectable_icon/docs/_selectable_icon_dark.jsx

@@ -1,43 +0,0 @@
-import React, { useState } from 'react'
-import { SelectableIcon } from '../../'
-
-const SelectableIconDark = () => {
-  const [ checkSelected, toggleSelected ] = useState(true)
-  const [ checkUnselected, toggleUnselected ] = useState(false)
-  const [ checkDisabled, toggleDisabled ] = useState(false)
-
-  return (
-
-    <div className="pb--doc-demo-row">
-      <SelectableIcon
-          checked={checkSelected}
-          dark
-          icon="file-word"
-          inputId={16}
-          onChange={() => toggleSelected(!checkSelected)}
-          text="Doc"
-      />
-
-      <SelectableIcon
-          checked={checkUnselected}
-          dark
-          icon="file-pdf"
-          inputId={17}
-          onChange={() => toggleUnselected(!checkUnselected)}
-          text="PDF"
-      />
-
-      <SelectableIcon
-          checked={checkDisabled}
-          dark
-          disabled
-          icon="file-image"
-          inputId={18}
-          onChange={() => toggleDisabled(!checkDisabled)}
-          text="PNG"
-      />
-    </div>
-  )
-}
-
-export default SelectableIconDark

data/app/pb_kits/playbook/pb_table/docs/_table_container_dark.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "md", container: false, dark: true }) do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-  </tbody>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_container_dark.jsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import { Table } from '../../'
-
-const TableContainerDark = () => {
-  return (
-    <Table
-        container={false}
-        dark
-        size="md"
-    >
-      <thead>
-        <tr>
-          <th>{'Column 1'}</th>
-          <th>{'Column 2'}</th>
-          <th>{'Column 3'}</th>
-          <th>{'Column 4'}</th>
-          <th>{'Column 5'}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-      </tbody>
-    </Table>
-  )
-}
-
-export default TableContainerDark

data/app/pb_kits/playbook/pb_table/docs/_table_dark.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "md", dark: true }) do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-    </tr>
-  </tbody>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_dark.jsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { Table } from '../../'
-
-const TableDark = () => {
-  return (
-    <Table
-        dark
-        size="md"
-    >
-      <thead>
-        <tr>
-          <th>{'Column 1'}</th>
-          <th>{'Column 2'}</th>
-          <th>{'Column 3'}</th>
-          <th>{'Column 4'}</th>
-          <th>{'Column 5'}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-        <tr>
-          <td>{'Value 1'}</td>
-          <td>{'Value 2'}</td>
-          <td>{'Value 3'}</td>
-          <td>{'Value 4'}</td>
-          <td>{'Value 5'}</td>
-        </tr>
-      </tbody>
-    </Table>
-  )
-}
-
-export default TableDark

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("text_input", props: { label: "First Name", placeholder: "Enter first name", value: "Timothy Wenhold", dark: true }) %>
-<%= pb_rails("text_input", props: { label: "Last Name", placeholder: "Enter last name", dark: true }) %>
-<%= pb_rails("text_input", props: { label: "Phone Number", type: "phone", placeholder: "Enter phone number", dark: true }) %>
-<%= pb_rails("text_input", props: { label: "Email Address", type: "email", placeholder: "Enter email address", dark: true }) %>
-<%= pb_rails("text_input", props: { label: "Zip Code", type: "number", placeholder: "Enter zip code", dark: true }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_dark.jsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import {
-  Caption,
-  TextInput,
-  Title,
-} from '../../'
-
-class TextInputDark extends React.Component {
-    state = {
-      firstName: '',
-    }
-
-    render() {
-      const handleOnChange = ({ target }) => this.setState({ firstName: target.value })
-
-      const {
-        firstName,
-      } = this.state
-
-      return (
-        <div>
-          <TextInput
-              dark
-              label="First Name"
-              placeholder="Enter first name"
-              value="Timothy Wenhold"
-          />
-          <TextInput
-              dark
-              label="Last Name"
-              placeholder="Enter last name"
-          />
-          <TextInput
-              dark
-              label="Phone Number"
-              placeholder="Enter phone number"
-              type="phone"
-          />
-          <TextInput
-              dark
-              label="Email Address"
-              placeholder="Enter email address"
-              type="email"
-          />
-          <TextInput
-              dark
-              label="Zip Code"
-              placeholder="Enter zip code"
-              type="number"
-          />
-
-          <br />
-          <br />
-
-          <Title dark>{'Event Handler Props'}</Title>
-
-          <br />
-          <Caption>{'onChange'}</Caption>
-
-          <br />
-
-          <TextInput
-              dark
-              label="First Name"
-              onChange={handleOnChange}
-              placeholder="Enter first name"
-              value={firstName}
-          />
-
-          <If condition={firstName !== ''}>
-            {`First name is: ${firstName}`}
-          </If>
-        </div>
-      )
-    }
-}
-
-export default TextInputDark