playbook_ui 7.4.0.pre.alpha4 → 7.4.0.pre.alpha5

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx

@@ -1,90 +0,0 @@
-/* @flow */
-import React, { Node } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import { Checkbox, ListItem, Radio } from '..'
-
-type SelectableListItemProps = {
-  aria?: object,
-  children: array<Node> | Node,
-  checked?: boolean,
-  className?: string,
-  data?: object,
-  defaultChecked?: boolean,
-  id?: string,
-  label?: string,
-  text?: string,
-  name?: string,
-  value?: string,
-  variant?: string,
-  onChange: (boolean)=>void,
-}
-
-const SelectableListItem = ({
-  aria = {},
-  checked = false,
-  children,
-  className,
-  data = {},
-  defaultChecked,
-  id,
-  label,
-  text = '',
-  name = '',
-  value = '',
-  variant,
-  onChange = () => {},
-  ...props
-}: SelectableListItemProps) => {
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_selectable_list_item_kit'),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <ListItem {...props}>
-      <div
-          {...ariaProps}
-          {...dataProps}
-          className={classes}
-      >
-        <Choose>
-          <When condition={variant == 'checkbox'}>
-            <Checkbox
-                checked={checked}
-                id={id}
-                name={name}
-                onChange={onChange}
-                // eslint suppressor, text is needed to display on screen
-                text={label || (text && false)}
-                type="checkbox"
-                value={value}
-                {...props}
-            />
-            {children}
-          </When>
-          <When condition={variant == 'radio'}>
-            <Radio
-                defaultChecked={defaultChecked}
-                id={id}
-                label={label}
-                name={name}
-                onChange={onChange}
-                type="radio"
-                value={value}
-                {...props}
-            />
-            {children}
-          </When>
-          <Otherwise>{children}</Otherwise>
-        </Choose>
-      </div>
-    </ListItem>
-  )
-}
-
-export default SelectableListItem

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb

@@ -1,11 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-      <%= pb_rails("list") do %>
-        <% object.items.each do |item| %>
-          <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
-        <% end %>
-      <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx

@@ -1,47 +0,0 @@
-/* @flow */
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import { List } from  '..'
-import SelectableListItem from './_item.jsx'
-
-type SelectableListProps = {
-  aria?: object,
-  children?: Node,
-  className?: string,
-  data?: object,
-  id?: string,
-  variant?: 'checkbox' | 'radio',
-}
-
-const SelectableList = (props: SelectableListProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    data = {},
-    id,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
-  const dataProps = buildDataProps(data)
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <List {...props}>
-        {children}
-      </List>
-    </div>
-  )
-}
-
-SelectableList.Item = SelectableListItem
-
-export default SelectableList

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -1,17 +0,0 @@
-@import "../tokens/colors";
-@import "../tokens/spacing";
-
-[class^=pb_selectable_list]{
-  margin-bottom: 0px;
-  [class^=pb_item_kit] {
-    &:hover {
-      background-color: $bg_light;
-    }
-  }
-  [class^=pb_radio_kit] {
-    margin-left: $space_xs;
-  }
-  [class^=pb_checkbox_kit] {
-    margin-left: $space_xs;
-  }
-}

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb

@@ -1,18 +0,0 @@
-<%= content_tag(:li,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-    <% puts object.variant %>
-  <% if object.variant == "radio"%>
-    <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
-    <% end %>
-  <% else %>
-    <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
-    <% if object.children.present? %>
-      <%= capture(&object.children) %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_selectable_list/docs/_description.md

@@ -1,3 +0,0 @@
-Selectable List Kit can take variants checkbox and radio. Regardless of which variant type, each selectable list item needs a `value`, `name`, and `id` (these props are `<input>` attributes).
-
-The Selectable List Item`id` prop will provide the `for` attribute to `<label>` in the kit, so no additional attributes are needed for the association between `<label>` and `<input>`.

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb

@@ -1,44 +0,0 @@
-<%= pb_rails("selectable_list",
-        props: {
-          variant: "checkbox",
-          items: [
-            { text: "Monday",
-              input_options: {
-                value: "1",
-                name: "checkbox-name-1",
-                id: "checkbox-id-1",
-              }
-            },
-            { text: "Tuesday",
-              checked: true,
-              input_options: {
-                value: "2",
-                name: "checkbox-name-2",
-                id: "checkbox-id-2",
-              }
-            },
-            { text: "Wednesday",
-              input_options: {
-                value: "3",
-                name: "checkbox-name-3",
-                id: "checkbox-id-3",
-              }
-            },
-            { text: "Thursday",
-              input_options: {
-                value: "4",
-                name: "checkbox-name-4",
-                id: "checkbox-id-4",
-              }
-            },
-            { text: "Friday",
-              input_options: {
-                value: "5",
-                name: "checkbox-name-5",
-                id: "checkbox-id-5",
-              }
-            }
-          ]
-        }
-    )
-%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { SelectableList } from '../..'
-
-const SelectableListDefault = () => {
-  return (
-    <div>
-      <SelectableList variant="checkbox">
-        <SelectableList.Item
-            id="checkbox-id-1"
-            label="Monday"
-            name="checkbox-name-1"
-            value="1"
-        />
-        <SelectableList.Item
-            checked
-            id="checkbox-id-2"
-            label="Tuesday"
-            name="checkbox-name-2"
-            value="2"
-        />
-        <SelectableList.Item
-            id="checkbox-id-3"
-            label="Wednesday"
-            name="checkbox-name-3"
-            value="3"
-        />
-        <SelectableList.Item
-            id="checkbox-id-4"
-            label="Thursday"
-            name="checkbox-name-4"
-            value="4"
-        />
-        <SelectableList.Item
-            id="checkbox-id-5"
-            label="Friday"
-            name="checkbox-name-5"
-            value="5"
-        />
-      </SelectableList>
-    </div>
-  )
-}
-
-export default SelectableListDefault

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb

@@ -1,44 +0,0 @@
-<%= pb_rails("selectable_list",
-        props: {
-          variant: "radio",
-          items: [
-            { text: "Monday",
-              input_options: {
-                value: "1",
-                name: "radio-name",
-                id: "radio-id-1",
-              }
-            },
-            { text: "Tuesday",
-              checked: true,
-              input_options: {
-                value: "2",
-                name: "radio-name",
-                id: "radio-id-2",
-              }
-            },
-            { text: "Wednesday",
-              input_options: {
-                value: "3",
-                name: "radio-name",
-                id: "radio-id-3",
-              }
-            },
-            { text: "Thursday",
-              input_options: {
-                value: "4",
-                name: "radio-name",
-                id: "radio-id-4",
-              }
-            },
-            { text: "Friday",
-              input_options: {
-                value: "5",
-                name: "radio-name",
-                id: "radio-id-5",
-              }
-            }
-          ]
-        }
-    )
-%>

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { SelectableList } from '../..'
-
-const SelectableListDefault = () => {
-  return (
-    <div>
-      <SelectableList variant="radio">
-        <SelectableList.Item
-            id="radio-id-1"
-            label="Monday"
-            name="radio"
-            value="1"
-        />
-        <SelectableList.Item
-            defaultChecked
-            id="radio-id-2"
-            label="Tuesday"
-            name="radio"
-            value="2"
-        />
-        <SelectableList.Item
-            id="radio-id-3"
-            label="Wednesday"
-            name="radio"
-            value="3"
-        />
-        <SelectableList.Item
-            id="radio-id-4"
-            label="Thursday"
-            name="radio"
-            value="4"
-        />
-        <SelectableList.Item
-            id="radio-id-5"
-            label="Friday"
-            name="radio"
-            value="5"
-        />
-      </SelectableList>
-    </div>
-  )
-}
-
-export default SelectableListDefault

data/app/pb_kits/playbook/pb_selectable_list/docs/example.yml

@@ -1,12 +0,0 @@
-examples:
-
-  rails:
-  - selectable_list_checkbox: Selectable List Checkbox
-  - selectable_list_radio: Selectable List Radio
-
-
-  react:
-  - selectable_list_checkbox: Selectable List Checkbox
-  - selectable_list_radio: Selectable List Radio
-
-

data/app/pb_kits/playbook/pb_selectable_list/docs/index.js

@@ -1,2 +0,0 @@
-export { default as SelectableListCheckbox } from './_selectable_list_checkbox.jsx'
-export { default as SelectableListRadio } from './_selectable_list_radio.jsx'

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb

@@ -1,24 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbSelectableList
-    class SelectableList
-      include Playbook::Props
-
-      partial "pb_selectable_list/selectable_list"
-
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[radio checkbox],
-                     default: "radio"
-
-      prop :text, type: Playbook::Props::String
-
-      prop :items, type: Playbook::Props::Array,
-                   default: []
-
-      def classname
-        generate_classname("pb_selectable_list_kit")
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbSelectableList
-    class SelectableListItem
-      include Playbook::Props
-
-      prop :tabindex
-
-      prop :checked, type: Playbook::Props::Boolean,
-                     default: false
-      prop :name, type: Playbook::Props::String
-      prop :text, type: Playbook::Props::String
-      prop :value, type: Playbook::Props::String
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[radio checkbox],
-                     default: "radio"
-      prop :input_options, type: Playbook::Props::Hash,
-                           default: {}
-
-      partial "pb_selectable_list/selectable_list_item"
-
-      def classname
-        generate_classname("pb_selectable_list_item_kit")
-      end
-    end
-  end
-end