playbook_ui_docs 14.12.0.pre.alpha.play1849cssbargraph5901 → 14.12.0.pre.alpha.play1862buttondisabledlinkbug5714

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.12.0.pre.alpha.play1849cssbargraph5901
+  version: 14.12.0.pre.alpha.play1862buttondisabledlinkbug5714
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-04 00:00:00.000000000 Z
+date: 2025-01-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -195,8 +195,6 @@ files:
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx
-- app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx
 - app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md
@@ -438,9 +436,7 @@ files:
 - app/pb_kits/playbook/pb_contact/docs/_description.md
 - app/pb_kits/playbook/pb_contact/docs/example.yml
 - app/pb_kits/playbook/pb_contact/docs/index.js
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.md
 - app/pb_kits/playbook/pb_copy_button/docs/example.yml
@@ -815,10 +811,8 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/example.yml
 - app/pb_kits/playbook/pb_filter/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.jsx
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_react.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children.md
@@ -978,10 +972,6 @@ files:
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.jsx
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.md
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis_swift.md
-- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.html.erb
-- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting.jsx
-- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_rails.md
-- app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_formatting_react.md
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx
 - app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md
@@ -1178,8 +1168,6 @@ files:
 - app/pb_kits/playbook/pb_link/docs/_link_icon.jsx
 - app/pb_kits/playbook/pb_link/docs/_link_tag.html.erb
 - app/pb_kits/playbook/pb_link/docs/_link_tag.jsx
-- app/pb_kits/playbook/pb_link/docs/_link_target.html.erb
-- app/pb_kits/playbook/pb_link/docs/_link_target.jsx
 - app/pb_kits/playbook/pb_link/docs/_link_underline.html.erb
 - app/pb_kits/playbook/pb_link/docs/_link_underline.jsx
 - app/pb_kits/playbook/pb_link/docs/example.yml
@@ -2120,9 +2108,6 @@ files:
 - app/pb_kits/playbook/pb_user/docs/_user_default.html.erb
 - app/pb_kits/playbook/pb_user/docs/_user_default.jsx
 - app/pb_kits/playbook/pb_user/docs/_user_horizontal_swift.md
-- app/pb_kits/playbook/pb_user/docs/_user_light_weight.html.erb
-- app/pb_kits/playbook/pb_user/docs/_user_light_weight.jsx
-- app/pb_kits/playbook/pb_user/docs/_user_light_weight.md
 - app/pb_kits/playbook/pb_user/docs/_user_presence_indicator_swift.md
 - app/pb_kits/playbook/pb_user/docs/_user_props_table.md
 - app/pb_kits/playbook/pb_user/docs/_user_size.html.erb

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.jsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import Highcharts from "highcharts";
-import HighchartsReact from "highcharts-react-official";
-
-import "../BarGraphStyles.scss";
-// Your path might look more like this
-//import "playbook-ui/dist/pb_bar_graph/BarGraphStyles.scss";
-
-const columnChartData = [
-  {
-    name: "Installation",
-    data: [1475, 200, 3000, 654, 656],
-  },
-  {
-    name: "Manufacturing",
-    data: [4434, 524, 2320, 440, 500],
-  },
-  {
-    name: "Sales & Distribution",
-    data: [3387, 743, 1344, 434, 440],
-  },
-  {
-    name: "Project Development",
-    data: [3227, 878, 999, 780, 1000],
-  },
-  {
-    name: "Other",
-    data: [1111, 677, 3245, 500, 200],
-  },
-];
-
-const columnOptions = {
-  chart: {
-    type: "column",
-  },
-  series: columnChartData,
-  title: {
-    text: "Solar Employment Growth by Sector, 2010-2016",
-  },
-  subtitle: {
-    text: "Source: thesolarfoundation.com",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    min: 0,
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  legend: { enabled: false },
-  credits: { enabled: false },
-};
-
-const BarGraphPbStyles = () => (
-  <div>
-    <HighchartsReact highcharts={Highcharts}
-        options={columnOptions}
-    />
-  </div>
-)
-
-export default BarGraphPbStyles

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the bargraph kit to apply the styles to your Highcharts Bargraph. Just import the BarGraphStyles.scss to your component and the sytles will apply automaticlly.  

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -1,2 +0,0 @@
-<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
-<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -1,5 +0,0 @@
-<%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
-<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
-<%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
-<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
-<%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste 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`.