playbook_ui 14.4.0.pre.alpha.stephenagreerpatch13910 → 14.4.0.pre.rc.0

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,50 +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",
-  margin_bottom: "sm",
-  name: "Group1",
-  value: "Select",
-}) do %>
-  <%= pb_rails("select", props: {
-    min_width: "xs",
-    options: options,
-  }) %>
-<% end %>
-
-<%= pb_rails("radio", props: {
-  custom_children: true,
-  label: "Typeahead",
-  margin_bottom: "sm",
-  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.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.

data/app/pb_kits/playbook/utilities/icons/angle-down.svg

@@ -1,3 +0,0 @@
-<svg width="30" height="24" viewBox="0 0 30 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M6.54314 7.6905C6.9916 7.26047 7.70376 7.27541 8.13379 7.72387L15 14.8844L21.8662 7.72387C22.2962 7.27541 23.0084 7.26047 23.4568 7.6905C23.9053 8.12053 23.9202 8.83268 23.4902 9.28114L16.0827 17.0062C15.4922 17.6219 14.5078 17.6219 13.9173 17.0062L6.50977 9.28114C6.07975 8.83268 6.09469 8.12053 6.54314 7.6905Z" fill="black"/>
-</svg>

data/app/pb_kits/playbook/utilities/icons/envelope.svg

@@ -1,3 +0,0 @@
-<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.62488 6.28574C5.62488 6.07863 5.79277 5.91074 5.99988 5.91074H23.9999C24.207 5.91074 24.3749 6.07863 24.3749 6.28574V7.92165L14.9999 13.9502L5.62488 7.92163V6.28574ZM3.37488 8.5181C3.37472 8.52916 3.37472 8.54021 3.37488 8.55126V18.2857C3.37488 19.7355 4.55013 20.9107 5.99988 20.9107H23.9999C25.4496 20.9107 26.6249 19.7355 26.6249 18.2857V8.55315C26.6251 8.54084 26.6251 8.52853 26.6249 8.51621V6.28574C26.6249 4.83599 25.4496 3.66074 23.9999 3.66074H5.99988C4.55013 3.66074 3.37488 4.83599 3.37488 6.28574V8.5181ZM24.3749 10.5967V18.2857C24.3749 18.4928 24.207 18.6607 23.9999 18.6607H5.99988C5.79277 18.6607 5.62488 18.4928 5.62488 18.2857V10.5967L14.1886 16.1036C14.6828 16.4214 15.317 16.4214 15.8112 16.1036L24.3749 10.5967Z" fill="black"/>
-</svg>