playbook_ui 14.3.2.pre.alpha.pbntr523enablekitsforradiofix3809 → 14.3.2.pre.alpha.play1472newicons3773

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.jsx

@@ -1,86 +0,0 @@
-import React from 'react'
-
-import MultipleUsersStacked from '../_multiple_users_stacked'
-
-const MultipleUsersStackedBubble = (props) => {
-  return (
-    <div>
-      <MultipleUsersStacked
-          users={[
-        {
-          name: 'Patrick Welch',
-          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-        },
-      ]}
-          variant="bubble"
-          {...props}
-      />
-      <br />
-      <br />
-      <MultipleUsersStacked
-          users={[
-        {
-          name: 'Patrick Welch',
-          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-        },
-        {
-          name: 'Lucille Sanchez',
-          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-        },
-      ]}
-          variant="bubble"
-          {...props}
-      />
-      <br />
-      <br />
-      <MultipleUsersStacked
-          users={[
-        {
-          name: 'Patrick Welch',
-          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-        },
-        {
-          name: 'Lucille Sanchez',
-          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-        },
-        {
-          name: 'Beverly Reyes',
-          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
-        },
-      ]}
-          variant="bubble"
-          {...props}
-      />
-      <br />
-      <br />
-      <MultipleUsersStacked
-          users={[
-        {
-          name: 'Patrick Welch',
-          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-        },
-        {
-          name: 'Lucille Sanchez',
-          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-        },
-        {
-          name: 'Beverly Reyes',
-          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
-        },
-        {
-          name: 'Keith Craig',
-          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
-        },
-        {
-          name: 'Alicia Cooper',
-          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
-        },
-      ]}
-          variant="bubble"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default MultipleUsersStackedBubble

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb

@@ -1,48 +0,0 @@
-<%
-  options = [
-    { label: "Orange", value: "Orange" },
-    { label: "Red", value: "Red" },
-    { label: "Green", value: "Green" },
-    { label: "Blue", value: "Blue" },
-  ]
-%>
-
-<%= pb_rails("radio", props: {
-  custom_children: true,
-  label: "Select",
-  name: "Group1",
-  value: "Select",
-}) do %>
-  <%= pb_rails("select", props: {
-    min_width: "xs",
-    options: options,
-  }) %>
-<% end %>
-
-<%= pb_rails("radio", props: {
-  custom_children: true,
-  label: "Typeahead",
-  name: "Group1",
-  value: "Typeahead",
-}) do %>
-  <%= pb_rails("typeahead", props: {
-      id: "typeahead-radio",
-      is_multi: false,
-      min_width: "xs",
-      options: options,
-      placeholder: "Select...",
-    })
-  %>
-<% end %>
-
-<%= pb_rails("radio", props: {
-  custom_children: true,
-  label: "Typography",
-  name: "Group1",
-  value: "Typography",
-}) do %>
-  <%= pb_rails("title", props: {
-      text: "Custom Typography",
-    })
-  %>
-<% end %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import Radio from '../_radio'
-import Select from '../../pb_select/_select'
-import Typeahead from '../../pb_typeahead/_typeahead'
-import Title from '../../pb_title/_title'
-
-const RadioChildren = (props) => {
-
-
-  const options = [
-    { label: 'Orange', value: 'Orange' },
-    { label: 'Red', value: 'Red' },
-    { label: 'Green', value: 'Green' },
-    { label: 'Blue', value: 'Blue' },
-  ]
-
-  return (
-    <div>
-      <Radio
-          customChildren
-          label="Select"
-          name="Group1"
-          tabIndex={0}
-          value="Select"
-          {...props}
-      >
-        <Select 
-            minWidth="xs"
-            options={options}
-        />
-      </Radio>
-      <Radio
-          customChildren
-          label="Typeahead"
-          name="Group1"
-          tabIndex={0}
-          value="Typeahead"
-          {...props}
-      >
-        <Typeahead 
-            minWidth="xs"
-            options={options}
-        />
-      </Radio>
-      <br />
-      <Radio
-          customChildren
-          defaultChecked={false}
-          label="Typography"
-          name="Group1"
-          value="Typography"
-          {...props}
-      >
-        <Title text="Custom Typography" />
-      </Radio>
-    </div>
-  )
-}
-export default RadioChildren

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md

@@ -1 +0,0 @@
-Use the `custom_children` prop to enable the use of kits instead of text labels.

data/app/pb_kits/playbook/pb_radio/index.js

@@ -1,17 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element"
-
-const RADIO_SELECTOR = "[data-pb-radio-children]"
-const RADIO_WRAPPER_SELECTOR = "[data-pb-radio-children-wrapper]"
-
-export default class PbRadio extends PbEnhancedElement {
-  static get selector() {
-    return RADIO_SELECTOR
-  }
-
-  connect() {
-    const radioWrapperElement = this.element.parentElement.querySelector(RADIO_WRAPPER_SELECTOR)
-    radioWrapperElement.addEventListener("click", () => {
-      this.element.querySelector("input[type='radio']").click()
-    })
-  }
-}

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb

@@ -1,31 +0,0 @@
-<%
-  options = [
-    { label: 'Windows', value: '#FFA500' },
-    { label: 'Siding', value: '#FF0000' },
-    { label: 'Doors', value: '#00FF00' },
-    { label: 'Roofs', value: '#0000FF' },
-  ]
-%>
-
-<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
-
-<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
-
-<!-- This section is an example of the available JavaScript event hooks -->
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
-    console.log('Option selected')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
-    console.log('Option removed')
-    console.dir(event.detail)
-  })
-  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
-    console.log('All options cleared')
-  })
-
-  document.querySelector('#clear-pills').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
-  })
-<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Typeahead } from 'playbook-ui'
-
-const options = [
-  { label: 'Windows', value: '#FFA500' },
-  { label: 'Siding', value: '#FF0000' },
-  { label: 'Doors', value: '#00FF00' },
-  { label: 'Roofs', value: '#0000FF' },
-]
-
-const TypeaheadWithPills = (props) => {
-  return (
-    <>
-      <Typeahead
-          isMulti
-          label="Colors"
-          options={options}
-          pillColor="neutral"
-          placeholder=""
-          {...props}
-      />
-    </>
-  )
-}
-
-export default TypeaheadWithPills

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_rails.md

@@ -1 +0,0 @@
-Change the form pill color by passing the optional `pill_color` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color_react.md

@@ -1 +0,0 @@
-Change the form pill color by passing the optional `pillColor` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.