playbook_ui_docs 14.13.0.pre.rc.6 → 14.13.0.pre.rc.7

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6779ed94ba3c4c709776ccfc734a8dd9bc577054f2470f1d8fd462bc11e989cb
-  data.tar.gz: 425067fcf4814285d4c2cd863e27ad9da5bd2df1f33f493c7f95fc9ad9162ecc
+  metadata.gz: 251642bca20cb1f8e8e6b902020cfc5e944b14b4437cfcdd3d1607c4ca69a8d9
+  data.tar.gz: a3a94e7cb3057c2b12194a61e471a78df2b318c27fa077ee30b7006a2332a3eb
 SHA512:
-  metadata.gz: da79f8f9fca0ea7574c74dd9f2c3fb0fcda40bb02bd230309363bc413a6b44368669ea9d591804754646bcf1b005a2217b1ed7365a10401ba98cb305557433ff
-  data.tar.gz: 64b4e5bf2af287f06f15232cf507d8e22ac3e44b5e2c4a6a2cfd40e6f5b4af78a878dd81cd8c01d73548b29409eba57daa65c259c44ac545c5f200355f3583e7
+  metadata.gz: 3254bc97253c51fc4e4891d94b0fce25fb27dbfae22207760914f549106a2f67fcc1b7196b12697f9d7420527f139e033eaf1d9fd33dfbedb9c8632160761323
+  data.tar.gz: 96cdacd90717e09bfdb9481a83ee93b7b1420d60bc430e869314b12074b5c47bcc81599388d72c686ef42ba2153ac2fd1b275cb01843704f251c817b4a4e8478

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,18 +1,19 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarBadgeComponentOverlay = () => {
+const AvatarBadgeComponentOverlay = (props) => {
     return (
         <div>
             <Avatar
                 componentOverlay={{
                     component: "badge",
                     placement: "bottom-right",
-                    text: "12"
+                    text: "12",
                 }}
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="sm"
+                {...props}
             />
 
             <Avatar
@@ -24,6 +25,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="md"
+                {...props}
+
             />
 
             <Avatar
@@ -36,6 +39,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="lg"
+                {...props}
+
             />
 
             <Avatar
@@ -48,7 +53,8 @@ const AvatarBadgeComponentOverlay = () => {
                 imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
                 marginBottom="sm"
                 size="xl"
-            /> 
+                {...props}
+            />
         </div>
     )
 }

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Avatar } from 'playbook-ui'
 
-const AvatarCircleIconComponentOverlay = () => {
+const AvatarCircleIconComponentOverlay = (props) => {
     return (
         <div>
         <Avatar
@@ -14,6 +14,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="sm"
+            {...props}
         />
 
         <Avatar
@@ -26,6 +27,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="md"
+            {...props}
         />
 
         <Avatar
@@ -38,6 +40,7 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="lg"
+            {...props}
         />
 
         <Avatar
@@ -50,7 +53,8 @@ const AvatarCircleIconComponentOverlay = () => {
             imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
             marginBottom="sm"
             size="xl"
-        /> 
+            {...props}
+        />
     </div>
     )
 }

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

@@ -0,0 +1,2 @@
+<%= 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

@@ -0,0 +1,5 @@
+<%= 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_copy_button/docs/example.yml

@@ -1,8 +1,8 @@
 examples:
-  
+  rails:
+  - copy_button_default: Default
+  - copy_button_from: Copy From
   
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  
-  

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

@@ -0,0 +1,11 @@
+<%= 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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+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_home_address_street/docs/example.yml

@@ -5,12 +5,14 @@ examples:
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   react:
   - home_address_street_default: Default
   - home_address_street_emphasis: Emphasis
   - home_address_street_modified: Modified
   - home_address_street_link: Link
+  - home_address_street_formatting: Formatting
 
   swift:
   - home_address_street_default_swift: Default

data/app/pb_kits/playbook/pb_home_address_street/docs/index.js

@@ -2,3 +2,4 @@ export { default as HomeAddressStreetDefault } from './_home_address_street_defa
 export { default as HomeAddressStreetEmphasis } from './_home_address_street_emphasis.jsx'
 export { default as HomeAddressStreetModified } from './_home_address_street_modified.jsx'
 export { default as HomeAddressStreetLink } from './_home_address_street_link.jsx'
+export { default as HomeAddressStreetFormatting } from './_home_address_street_formatting.jsx'

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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,29 @@
+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_link/docs/example.yml

@@ -1,16 +1,18 @@
 examples:
-  
+
   rails:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
-  
-  
+  - link_target: Target
+
+
   react:
   - link_color: Color
   - link_underline: Underline
   - link_icon: Icon
   - link_disabled: Disabled
   - link_tag: Tag
+  - link_target: Target

data/app/pb_kits/playbook/pb_link/docs/index.js

@@ -2,4 +2,5 @@ export { default as LinkColor } from './_link_color.jsx'
 export { default as LinkUnderline } from './_link_underline.jsx'
 export { default as LinkIcon } from './_link_icon.jsx'
 export { default as LinkDisabled } from './_link_disabled.jsx'
-export { default as LinkTag } from './_link_tag.jsx'
+export { default as LinkTag } from './_link_tag.jsx'
+export { default as LinkTarget } from './_link_target.jsx'

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tooltip.html.erb

@@ -2,7 +2,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
   step 1
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", tooltip_position: "left", step_direction: "horizontal" }) do %>
   step 2
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
@@ -11,7 +11,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
   step 4
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5", tooltip_position: "left" }) do %>
   step 5
   <% end %>
 <% end %>
@@ -19,7 +19,7 @@
 <br /><br />
 
 <%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical", tooltip_position: "left" }) do %>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
   <% end %>
@@ -31,10 +31,10 @@
 
 <br /><br>
 <%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"  }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right" }) do %>
       <%= pb_rails("caption", props:{text: "Ordered"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped", tooltip_position: "right" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
@@ -50,7 +50,7 @@
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
       <%= pb_rails("caption", props:{text: "Shipped"})%>
   <% end %>
-  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive", tooltip_position: "bottom"}) do %>
       <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
   <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.html.erb

@@ -39,20 +39,17 @@
     </tr>
   </tbody>
 <% end %>
-
 <%= pb_rails("table", props: { size: "sm", margin_bottom: "lg" }) do %>
   <colgroup>
     <%= pb_rails("background", props: { background_color: "error_subtle", tag: "col" }) %>
-    <%= pb_rails("background", props: { background_color: "card_light", tag: "col" }) %>
+    <%= pb_rails("background", props: { background_color: "info_subtle", tag: "col" }) %>
     <%= pb_rails("background", props: { background_color: "warning_subtle", tag: "col" }) %>
   </colgroup>
-  <%= pb_rails("background", props: { background_color: "card_light", tag: "thead" }) do %>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-    </tr>
-  <% end %>
+  <thead>
+    <th>Column 1</th>
+    <th>Column 2</th>
+    <th>Column 3</th>
+  </thead>
   <tbody>
     <tr>
       <td>Value 1</td>

data/app/pb_kits/playbook/pb_table/docs/_table_with_background_kit.jsx

@@ -68,7 +68,7 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
             <Background
-                backgroundColor="card_light"
+                backgroundColor="info_subtle"
                 tag='col'
             />
             <Background
@@ -76,16 +76,13 @@ const TableWithBackgroundKit = (props) => {
                 tag='col'
             />
           </colgroup>
-          <Background
-              backgroundColor="card_light"
-              tag='thead'
-          >
+          <thead>
             <tr>
-                <th>{'Column 1'}</th>
-                <th>{'Column 2'}</th>
-                <th>{'Column 3'}</th>
+              <th>{'Column 1'}</th>
+              <th>{'Column 2'}</th>
+              <th>{'Column 3'}</th>
             </tr>
-          </Background>
+          </thead>
           <tbody>
             <tr>
               <td>{'Value 1'}</td>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -43,4 +43,4 @@
         Whoa. I'm a tooltip.
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -0,0 +1,42 @@
+<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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,2 @@
+##### 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`.

data/app/pb_kits/playbook/pb_user/docs/example.yml

@@ -2,6 +2,7 @@ examples:
 
   rails:
   - user_default: Default
+  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size
@@ -11,6 +12,7 @@ examples:
 
   react:
   - user_default: Default
+  - user_light_weight: Light Weight
   - user_with_territory: With Territory
   - user_text_only: Text Only
   - user_size: Horizontal Size

data/app/pb_kits/playbook/pb_user/docs/index.js

@@ -1,4 +1,5 @@
 export { default as UserDefault } from './_user_default.jsx'
+export { default as UserLightWeight } from './_user_light_weight.jsx'
 export { default as UserWithTerritory } from './_user_with_territory.jsx'
 export { default as UserTextOnly } from './_user_text_only.jsx'
 export { default as UserSize } from './_user_size.jsx'