playbook_ui 14.10.0.pre.alpha.play16825301 → 14.10.0.pre.rc.0

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md

@@ -1 +0,0 @@
-The `link` prop accepts a string that is used as an href value and causes the button to act as a link. The default behavior of a link is to open in the current window. You can optionally alter the link behavior by adding the `newWindow` prop (boolean), which will open the link in a new window, or by calling the `target` prop, which accepts `_self`, `_blank`, `_parent`, `_top`, `child`, or any string, allowing you to specify any link target.

data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss

@@ -1,57 +0,0 @@
-@mixin error-state-flex-start-selectors {
-  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit),
-  &:has(.pb_text_input_kit):has(.pb_date_picker_kit.error),
-  &:has(.pb_text_input_kit):has(.pb_select_kit_wrapper.error),
-  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error) {
-    align-items: flex-start;
-  }
-}
-
-@mixin error-state-center-selectors {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input),
-  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has([class^=pb_button_kit]) {
-    align-items: center;
-  }
-}
-
-@mixin error-state-flex-end-selectors {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper.error):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
-    align-items: flex-end;
-  }
-}
-
-@mixin error-state-right-side-select-kit {
-  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
-  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
-    align-items: flex-start;
-
-    .pb_select_kit_wrapper {
-      padding-top: $space_md;
-      margin-top: 2px;
-
-      .pb_select_kit_caret {
-        padding-top: $space_md;
-      }
-    }
-
-    .pb_select_kit_wrapper.error {
-      padding-top: $space_md;
-      margin-top: 2px;
-
-      .pb_select_kit_caret {
-        padding-top: $space_xl;
-      }
-    }
-  }
-}
-
-@mixin error-state-left-side-select-kit {
-  &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
-    align-items: flex-start;
-
-    .pb_text_input_kit.error {
-      padding-top: $space_md;
-      margin-top: 2px;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.html.erb

@@ -1,32 +0,0 @@
-<%= pb_rails "body", props: {
-  classname: "pb_home_address_street_address",
-  size: 4,
-  text: object.address_house_style,
-  dark: object.dark
-} %>
-<%= pb_rails "body", props: {
-  classname: "pb_home_address_street_address",
-  size: 4,
-  text: object.address_house_style2,
-  dark: object.dark
-} %>
-<%= pb_rails "body", props: {
-  color: "light",
-  text: object.city_state_zip,
-  dark: object.dark
-} %>
-
-<% if object.home_id %>
-  <%= pb_rails("hashtag", props: {
-    text: "#{object.home_id}",
-    url: object.home_url || "#",
-    type: "home",
-    dark: object.dark,
-    classname: "home-hashtag",
-    new_window: object.new_window,
-    target: object.target_option}) %>
-<% end %>
-
-<%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %>
-  <small><%= object.territory %></small>
-<% end %>

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.rb

@@ -1,29 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbHomeAddressStreet
-    class NoneEmphasis < Playbook::KitBase
-      prop :address_house_style
-      prop :address_house_style2
-      prop :city_state_zip
-      prop :home_id, type: Playbook::Props::Number
-      prop :home_url
-      prop :new_window, type: Playbook::Props::Boolean,
-                        default: false
-      prop :target
-      prop :territory
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
-      def target_option
-        if target && home_url
-          target
-        elsif new_window
-          "_blank"
-        else
-          "_self"
-        end
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("section_separator", props: { text: "Default Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary", text: "Primary Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary", line_style: "dashed", text: "Primary Dashed Separator" }) %>
-<%= pb_rails("section_separator", props: { color: "primary" }) do %>
-  <%= pb_rails("flex", props: { padding: "xs" }) do %>
-    <%= pb_rails("icon", props: { color: "primary", icon: "arrow-down" }) %>
-    <%= pb_rails("detail", props: { text: "Children", size: "sm", color: "link" }) %>
-  <% end %>
-<% end %>
-

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -1,42 +0,0 @@
-import React from "react"
-import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
-
-const children = (
-  <Flex padding="xs">
-    <Icon color="primary"
-        icon="arrow-down"
-    />
-    <Detail
-        color="link"
-        size="sm"
-        text="Children"
-    />
-  </Flex>
-)
-
-const SectionSeparatorColor = (props) => {
-  return (
-    <div>
-      <SectionSeparator text="Default Separator"
-          {...props}
-      />
-      <SectionSeparator color="primary"
-          text="Primary Separator"
-          {...props}
-      />
-      <SectionSeparator
-          color="primary"
-          lineStyle="dashed"
-          text="Primary Dashed Separator"
-          {...props}
-      />
-       <SectionSeparator color="primary"
-           {...props}
-       >
-        {children}
-      </SectionSeparator>
-    </div>
-  )
-}
-
-export default SectionSeparatorColor

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.md

@@ -1,3 +0,0 @@
-Pass "primary" to the `color` prop to change any section separator color.
-
-**NOTE:** Passing `children` overrides any content provided via the `text` prop. The `color` prop does not affect the `text` prop's color, and the color of `children` is determined by the children's individual props. For greater control over text color customization, consider using a separator with `children`.

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

@@ -1,3 +0,0 @@
-The Skeleton Loading kit can be used an intermediate loading state to give users a visual indication that content is loading. 
-
-**Please Note**: this kit is not meant to be integrated interally within other Playbook kits as a loading prop; rather, it can be used to create a composite of the section/kit/page with loading intermediataries, as demonstrated in the the "example component" doc examples.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.html.erb

@@ -1,9 +0,0 @@
-<%= pb_rails("flex", props: { justify: "evenly" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "xl", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "lg", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "xs", height: "50px", width: "100px"}) %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "none", height: "50px", width: "100px"}) %>
-<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius_rails.md

@@ -1 +0,0 @@
-The `border_radius` prop accepts all of our [BorderRadius](https://playbook.powerapp.cloud/visual_guidelines/border_radius) tokens, with `sm` as default.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("card", props: { border_none: true }) do %>
-    <%= pb_rails("skeleton_loading") %>
-<% end %>
-
-<%= pb_rails("card", props: { background: "light", border_none: true }) do %>
-    <%= pb_rails("skeleton_loading", props: { color: "white" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.html.erb

@@ -1,119 +0,0 @@
-<%= pb_rails("button", props: { id: "toggle-filter-button", margin_bottom: "md", text: "Show Filter", variant: "secondary" }) %>
-
-<div id="skeleton-loading-filter-content">
-  <%= pb_rails("card", props: { margin_bottom: "lg" }) do %>
-    <%= pb_rails("flex", props: { align_items: "center", justify: "between", orientation: "row" }) do %>
-      <%= pb_rails("flex", props: { align_items: "center", justify: "start", orientation: "row" }) do %>
-        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "40px", margin_right: "sm", width: "40px" }) %>
-        <%= pb_rails("skeleton_loading", props: { height: "16px", margin_right: "md", width: "80px" }) %>
-      <% end %>
-      <%= pb_rails("flex", props: { align_items: "center", justify: "end", orientation: "row" }) do %>
-        <%= pb_rails("skeleton_loading", props: { height: "18px", width: "120px" }) %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("skeleton_loading", props: { height: "127px", width: "100%" }) %>
-</div>
-
-<div id="filter-content" style="display: none;">
-  <%= pb_rails("filter", props: {
-    margin_bottom: "xl",
-    min_width: "360px",
-    id: "2",
-    filters: [
-      { name: "name", value: "John Wick" }
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    results: 546,
-    template: "single"
-  }) do %>
-    <% example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ] %>
-
-    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-      <%= form.text_field :example_text_field, props: { label: true } %>
-      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-      <%= form.actions do |action| %>
-        <%= action.submit props: {
-          text: "Apply",
-          data: {
-            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-        },}%>
-        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("filter", props: {
-    min_width: "360px",
-    id: "1",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-  }) do %>
-    <% example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away...", value: 5)
-    ] %>
-    <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-      <%= form.text_field :example_text_field, props: { label: true } %>
-      <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
-
-      <%= form.actions do |action| %>
-        <%= action.submit props: {
-          text: "Apply",
-          data: {
-            disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-        },}%>
-        <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-      <% end %>
-    <% end %>
-  <% end %>
-</div>
-
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    const toggleButton = document.getElementById('toggle-filter-button')
-    const skeletonFilterContentDiv = document.getElementById('skeleton-loading-filter-content')
-    const filterContentDiv = document.getElementById('filter-content')
-    const secondFilterContentDiv = document.getElementById('second-filter-content')
-
-    let isLoading = true
-
-    toggleButton.addEventListener('click', function() {
-      isLoading = !isLoading
-
-      if (isLoading) {
-        skeletonFilterContentDiv.style.display = 'block'
-        filterContentDiv.style.display = 'none'
-        toggleButton.textContent = 'Show Filter'
-      } else {
-        skeletonFilterContentDiv.style.display = 'none'
-        filterContentDiv.style.display = 'block'
-        toggleButton.textContent = 'Show Skeleton Loading'
-      }
-    })
-  })
-</script>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -1,174 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
-
-const SortingChangeCallback = (sortOptions) => {
-  alert(JSON.stringify(sortOptions[0]))
-}
-
-const SkeletonLoadingFilter = (props) => {
-  const [isLoading, setIsLoading] = useState(true)
-  const toggleLoading = () => setIsLoading((prev) => !prev)
-
-  const options = [
-    { value: 'USA' },
-    { value: 'Canada' },
-    { value: 'Brazil' },
-    { value: 'Philippines' },
-    { value: 'A galaxy far far away, like really far away...' },
-  ]
-
-  return (
-    <div>
-      <Button 
-          marginBottom="md" 
-          onClick={toggleLoading} 
-          variant="secondary"
-      >
-          {isLoading ? "Show Filter" : "Show Skeleton Loading"}
-      </Button>
-      <div>
-        {isLoading ? (
-          <Card 
-              marginBottom="lg" 
-              {...props}
-          >
-              <Flex 
-                  alignItems="center" 
-                  justify="between"
-                  orientation="row"
-              >
-                  <Flex 
-                      alignItems="center" 
-                      justify="start"
-                      orientation="row"
-                  >
-                      <SkeletonLoading
-                          borderRadius="rounded"
-                          height="40px"
-                          marginRight="sm"
-                          width="40px"
-                          {...props}
-                      />
-                      <SkeletonLoading 
-                          height="16px" 
-                          marginRight="md"
-                          width="80px"
-                          {...props}
-                      />
-                  </Flex>
-                  <Flex 
-                      alignItems="center" 
-                      justify="end"
-                      orientation="row"
-                  >
-                      <SkeletonLoading 
-                          height="18px" 
-                          width="120px"
-                          {...props}
-                      />
-                  </Flex>
-              </Flex>
-          </Card>
-        ) : (
-          <Filter
-              filters={{ 'Full Name': 'John Wick' }}
-              marginBottom="lg" 
-              minWidth="375px"
-              results={546}
-              sortOptions={{
-                popularity: 'Popularity',
-                // eslint-disable-next-line
-                manager_title: 'Manager\'s Title',
-                // eslint-disable-next-line
-                manager_name: 'Manager\'s Name',
-              }}
-              sortValue={[{ name: 'popularity', dir: 'desc' }]}
-          >
-            {({ closePopover }) => (
-              <form>
-                <TextInput 
-                    label="Example Text Field" 
-                    placeholder="Enter Text"
-                />
-                <Select
-                    blankSelection="Select One..."
-                    label="Example Collection Select"
-                    name="Collection Select"
-                    options={options}
-                />
-                <Flex spacing="between">
-                    <Button 
-                        onClick={closePopover} 
-                        text="Filter"
-                    />
-                    <Button 
-                        text="Defaults" 
-                        variant="secondary"
-                    />
-                </Flex>
-              </form>
-            )}
-          </Filter>
-        )}
-      </div>
-      <div>
-        {isLoading ? (
-          <SkeletonLoading 
-              height="127px" 
-              marginBottom="lg"
-              width="100%"
-              {...props}
-          />
-        ) : (
-          <Filter
-              double
-              filters={{
-                'Full Name': 'John Wick',
-                'City': 'San Francisco',
-              }}
-              marginBottom="xl"
-              minWidth="375px"
-              onSortChange={SortingChangeCallback}
-              results={1}
-              sortOptions={{
-                popularity: 'Popularity',
-                // eslint-disable-next-line
-                manager_title: 'Manager\'s Title',
-                // eslint-disable-next-line
-                manager_name: 'Manager\'s Name',
-              }}
-              sortValue={[{ name: 'popularity', dir: 'desc' }]}
-          >
-            {({ closePopover }) => (
-              <form>
-                <TextInput 
-                    label="Full Name" 
-                    placeholder="Enter name"
-                />
-                <Select
-                    blankSelection="Select One..."
-                    label="Territory"
-                    maxWidth="sm"
-                    name="location"
-                    options={options}
-                />
-                <Flex spacing="between">
-                    <Button 
-                        onClick={closePopover}
-                        text="Filter" 
-                    />
-                    <Button 
-                        text="Defaults"
-                        variant="secondary"
-                    />
-                </Flex>
-              </form>
-            )}
-          </Filter>
-        )}
-      </div>      
-    </div>
-  )
-}
-
-export default SkeletonLoadingFilter;

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.html.erb

@@ -1,15 +0,0 @@
-<%= pb_rails("skeleton_loading", props: { height: "100px", width: "50%" }) %>
-
-<%= pb_rails("skeleton_loading", props: { gap: "md", height: "20px", margin_y: "md", stack: 3, width: "50px" }) %>
-
-<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "50%", width: "300px" }) %>
-<% end %>
-
-<%= pb_rails("card", props: { height: "200px", margin_bottom: "md", padding: "none", width: "100%" }) do %>
-    <%= pb_rails("skeleton_loading", props: { border_radius: "md", gap: "xl", height: "30%", stack: 2, width: "70%" }) %>
-<% end %>
-
-<%= pb_rails("skeleton_loading", props: { height: "150px", margin_y: "md", width: "150px" }) %>
-
-<%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "150px", width: "150px" }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width_rails.md

@@ -1,3 +0,0 @@
-The `height` and `width` props accept pixel and percentage values. If using a percentage for `height`, the parent container must have a set height.
-
-Set the `height` and `width` props to the same value to make a square. A `rounded` border_radius will make a square a circle. If using percentages to make a square, your parent container must also be a square.

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("skeleton_loading", props: { stack: 5 }) %>
-
-<%= pb_rails("skeleton_loading", props: { gap: "md", padding_top: "xl", stack: 3 }) %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.html.erb

@@ -1,63 +0,0 @@
-<%= pb_rails("button", props: { id: "toggle-user-button", margin_bottom: "md", text: "Show User", variant: "secondary" }) %>
-
-<div id="skeleton-loading-user-content">
-    <%= pb_rails("flex", props: { align_items: "center" }) do %>
-        <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "38px", padding_right: "sm", width: "38px"}) %>
-        <%= pb_rails("skeleton_loading", props: { gap: "xxs", height: "18px", stack: 2, width: "161px"}) %>
-    <% end %>
-    <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
-        <%= pb_rails("flex", props: { align_items: "center", flex_direction: "column" }) do %>
-            <%= pb_rails("skeleton_loading", props: { border_radius: "rounded", height: "100px", padding_bottom: "xs", width: "100px"}) %>
-            <%= pb_rails("skeleton_loading", props: { height: "32px", padding_bottom: "xxs", width: "144px"}) %>
-            <%= pb_rails("skeleton_loading", props: { height: "21px", width: "164px"}) %>
-        <% end %>
-    <% end %>
-</div>
-
-<div id="user-content" style="display: none;">
-    <div>
-        <%= pb_rails("user", props: {
-            name: "Anna Black",
-            title: "Remodeling Consultant",
-            orientation: "horizontal",
-            align: "left",
-            avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-        }) %>
-    </div>
-    <div>
-        <%= pb_rails("flex", props: { align_items: "start", padding_top: "md" }) do %>
-            <%= pb_rails("user", props: {
-                name: "Anna Black",
-                title: "Remodeling Consultant",
-                orientation: "vertical",
-                align: "center",
-                size: "lg",
-                avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
-            }) %>
-        <% end %>
-    </div>
-</div>
-
-<script>
-  document.addEventListener("DOMContentLoaded", function() {
-    const toggleButton = document.getElementById('toggle-user-button')
-    const skeletonUserContentDiv = document.getElementById('skeleton-loading-user-content')
-    const userContentDiv = document.getElementById('user-content')
-
-    let isLoading = true
-
-    toggleButton.addEventListener('click', function() {
-      isLoading = !isLoading
-
-      if (isLoading) {
-        skeletonUserContentDiv.style.display = 'block'
-        userContentDiv.style.display = 'none'
-        toggleButton.textContent = 'Show User'
-      } else {
-        skeletonUserContentDiv.style.display = 'none'
-        userContentDiv.style.display = 'block'
-        toggleButton.textContent = 'Show Skeleton Loading'
-      }
-    })
-  })
-</script>