playbook_ui 14.13.0.pre.alpha.play1834depupdatesass6024 → 14.13.0.pre.rc.0

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.html.erb

@@ -1,99 +0,0 @@
-<% containers = [
-  "To Do",
-  "In Progress",
-  "Done"
-] %>
-
-<% items_data = [
-  {
-    id: "11",
-    container: "To Do",
-    title: "Task 1",
-    description: "Bug fixes",
-    assignee_name: "Terry Miles",
-    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-  },
-  {
-    id: "12",
-    container: "To Do",
-    title: "Task 2",
-    description: "Documentation",
-    assignee_name: "Sophia Miles",
-    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-  },
-  {
-    id: "13",
-    container: "In Progress",
-    title: "Task 3",
-    description: "Add a variant",
-    assignee_name: "Alice Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-  },
-  {
-    id: "14",
-    container: "To Do",
-    title: "Task 4",
-    description: "Add jest tests",
-    assignee_name: "Mike James",
-    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-  },
-  {
-    id: "15",
-    container: "Done",
-    title: "Task 5",
-    description: "Alpha testing",
-    assignee_name: "James Guy",
-    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-  },
-  {
-    id: "16",
-    container: "In Progress",
-    title: "Task 6",
-    description: "Release",
-    assignee_name: "Sally Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
-  },
-] %>
-
-<%= pb_rails("draggable", props: { initial_items: items_data }) do %>
-  <%= pb_rails("flex", props: { justify_content: "center" }) do %>
-    <% containers.each do |container| %>
-      <%= pb_rails("draggable/draggable_container", props: {
-          container: container,
-          width: "xs",
-          padding: "sm",
-          data: { container: container }
-      }) do %>
-        <%= pb_rails("caption", props: { text_align: "center" }) do %><%= container %><% end %>
-        <%= pb_rails("flex", props: {align_items: "stretch", orientation: "column"}) do %>
-          <% items_data.select { |item| item[:container] == container }.each do |item| %>
-            <%= pb_rails("draggable/draggable_item", props: {
-                container: container,
-                drag_id: item[:id]
-            }) do %>
-              <%= pb_rails("card", props: { margin_bottom: "sm", padding: "sm"}) do %>
-                <%= pb_rails("flex", props: { justify: "between" }) do %>
-                  <%= pb_rails("flex/flex_item") do %>
-                    <%= pb_rails("flex") do %>
-                      <%= pb_rails("avatar", props: {
-                          image_url: item[:assignee_img],
-                          name: item[:assignee_name],
-                          size: "xxs"
-                      }) %>
-                      <%= pb_rails("title", props: {
-                          padding_left: "xs",
-                          size: 4,
-                          text: item[:title]
-                      }) %>
-                    <% end %>
-                  <% end %>
-                <% end %>
-                <%= pb_rails("body", props: { padding_top: "xs", text: item[:description] }) %>
-              <% end %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md

@@ -1 +0,0 @@
-The Draggable kit can also be used to achieve more complex, multiple container functionality as shown here. This complex usage requires the full subcomponent structure.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.html.erb

@@ -1,61 +0,0 @@
-<% initial_items = [
-  {
-    id: "1",
-    title: "Task 1",
-    assignee_name: "Terry Miles",
-    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-  },
-  {
-    id: "2",
-    title: "Task 2",
-    assignee_name: "Sophia Miles",
-    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-  },
-  {
-    id: "3",
-    title: "Task 3",
-    assignee_name: "Alice Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-  },
-  {
-    id: "4",
-    title: "Task 4",
-    assignee_name: "Mike James",
-    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-  },
-  {
-    id: "5",
-    title: "Task 5",
-    assignee_name: "James Guy",
-    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-  }
-] %>
-
-
-
-<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
-  <%= pb_rails("table", props: { size: "sm", responsive:"none" }) do %>
-    <%= pb_rails("table/table_head") do %>
-      <%= pb_rails("table/table_row") do %>
-        <%= pb_rails("table/table_header", props: { text: "id"}) %>
-        <%= pb_rails("table/table_header", props: { text: "name"}) %>
-        <%= pb_rails("table/table_header", props: { text: "task number"}) %>
-      <% end %>
-    <% end %>
-
-    <%= pb_rails("draggable/draggable_container", props: {tag:"tbody"}) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id], tag:"tr"}) do %>
-          <%= pb_rails("table/table_cell", props: { text: item[:id]}) %>
-          <%= pb_rails("table/table_cell") do %>
-            <%= pb_rails("flex", props:{align:"center"}) do %>
-              <%= pb_rails("avatar", props: {size: "xs", image_url: item[:assignee_img]}) %>
-              <%= pb_rails("body", props: {text: item[:assignee_name], padding_left:"sm"}) %>
-            <% end %>
-          <% end %>
-          <%= pb_rails("table/table_cell", props: { text: item[:title]}) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table.md

@@ -1 +0,0 @@
-The draggable kit can also be used in conjunction with the table kit to create draggable table rows. To do this, make use of the `tag` prop on the draggable_container to set it to 'tbody' and the same prop on the draggable_item to set that to 'tr'. This will create the functionality seen here. 

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -1,58 +0,0 @@
-<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
-<%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  auto_close: 3000,
-  classname: "toast-to-hide",
-  id: "toast-auto-close",
-  text: "I will disappear in 3 seconds.",
-  status: "tip",
-  vertical: "top",
-  horizontal: "center"
-}) %>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  auto_close: 10000,
-  closeable: true,
-  id: "toast-auto-close-closeable",
-  text: "I will disappear in 10 seconds.",
-  status: "tip",
-  vertical: "top",
-  horizontal: "center"
-}) %>
-
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-  // Initialize toast elements and buttons
-  const toasts = {
-    '#toast-auto-close': document.querySelector("#toast-auto-close"),
-    '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
-  }
-  
-  const buttons = {
-    '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
-    '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
-  }
-
-  // Store original toasts and remove them from DOM
-  const originalToasts = {}
-  Object.entries(toasts).forEach(([id, toast]) => {
-    if (toast) {
-      originalToasts[id] = toast.cloneNode(true)
-      toast.remove()
-    }
-  })
-
-  // Set up button click handlers
-  Object.keys(buttons).forEach((toastId) => {
-    const button = buttons[toastId]
-    if (button) {
-      button.onclick = () => {
-        const newToast = originalToasts[toastId].cloneNode(true)
-        newToast.style.display = "flex"
-        document.body.appendChild(newToast)
-      }
-    }
-  })
-})
-</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md

@@ -1,3 +0,0 @@
-Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
-
-The script tag in this code snippet is for demonstration purposes only. It clones the toasts in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("home_address_street", props: {
-  address: "70 pRoSpEcT ave",
-  address_cont: "Apt M18",
-  city: "West Chester",
-  home_id: 8250263,
-  home_url: "https://powerhrg.com/",
-  preserve_case: true,
-  state: "pa",
-  zipcode: "19382",
-  territory: "PHL",
-}) %>

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import HomeAddressStreet from '../_home_address_street'
-
-const HomeAddressStreetFormatting = (props) => {
-  return (
-    <HomeAddressStreet
-        address="70 pRoSpEcT ave"
-        addressCont="Apt M18"
-        city="West Chester"
-        homeId="8250263"
-        homeUrl="https://powerhrg.com/"
-        preserveCase
-        state="pa"
-        territory="PHL"
-        zipcode="19382"
-        {...props}
-    />
-  )
-}
-
-export default HomeAddressStreetFormatting

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md

@@ -1 +0,0 @@
-The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserve_case: true`, the street address will be rendered exactly as entered, without automatic title capitalization.

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md

@@ -1 +0,0 @@
-The `state` prop will always capitalize the state name, even if the data entered is in lowercase. For example, when `state="pa"` is passed, it will be rendered as "PA". When you pass `preserveCase`, the street address will be rendered exactly as entered, without automatic title capitalization.

data/app/pb_kits/playbook/pb_link/docs/_link_target.html.erb

@@ -1,15 +0,0 @@
-<div>
-  <%= pb_rails("link", props: {
-    href: "http://google.com",
-    target: "blank",
-    text: "Open In New Window"
-  }) %>
-</div>
-
-<div>
-  <%= pb_rails("link", props: {
-    href: "https://playbook.powerapp.cloud/",
-    target: "child",
-    text: "Open In Child Tab",
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { Link } from 'playbook-ui'
-
-const LinkTarget = (props) => (
-  <div>
-    <div>
-      <Link
-          aria={{ label: 'Link to Google in new window' }}
-          href="https://google.com"
-          tabIndex={0}
-          target='blank'
-          text="Open In New Window"
-          {...props}
-      />
-    </div>
-    <div>
-      <Link
-          aria={{ label: 'Link to Playbook in a child tab' }}
-          href="https://playbook.powerapp.cloud/"
-          tabIndex={0}
-          target='child'
-          text="Open In Child Tab"
-          {...props}
-      />
-    </div>
-  </div>
-)
-
-export default LinkTarget

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb

@@ -1,42 +0,0 @@
-<div class="pb--doc-demo-row">
-  <div>
-    <%= 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",
-      bold: false
-      }) %>
-  </div>
-  <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",
-      bold: false
-      }) %>
-  </div>
-  <div>
-    <%= pb_rails("user", props: {
-      name: "Anna Black",
-      orientation: "horizontal",
-      align: "left",
-      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-      bold: false
-      }) %>
-
-     <br>
-
-     <%= pb_rails("user", props: {
-       name: "Anna Black",
-       orientation: "horizontal",
-       align: "left",
-       avatar: true,
-       bold: false
-     }) %>
-  </div>
-</div>

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { User } from 'playbook-ui'
-
-const UserLightWeight = (props) => {
-  return (
-    <div className="pb--doc-demo-row">
-
-      <div>
-        <User
-            align="center"
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            bold={false}
-            name="Anna Black"
-            orientation="vertical"
-            size="lg"
-            title="Remodeling Consultant"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <User
-            align="left"
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            bold={false}
-            name="Anna Black"
-            orientation="horizontal"
-            title="Remodeling Consultant"
-            {...props}
-        />
-      </div>
-
-      <div>
-        <User
-            align="left"
-            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
-            bold={false}
-            name="Anna Black"
-            orientation="horizontal"
-            {...props}
-        />
-
-        <br />
-
-        <User
-            align="left"
-            avatar
-            bold={false}
-            name="Anna Black"
-            orientation="horizontal"
-            {...props}
-        />
-      </div>
-
-    </div>
-  )
-}
-
-export default UserLightWeight

data/app/pb_kits/playbook/pb_user/docs/_user_light_weight.md

@@ -1,2 +0,0 @@
-##### Prop
-Name will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`. Name will then use `font-weight: 300`.