playbook_ui_docs 14.6.2.pre.alpha.PLAY1607dependencydisplayymlupdate4271 → 14.6.2.pre.alpha.PLAY15814384

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b2f5991b5df46c27e422607e977169298720ef5bbed4fc88d2a59a2d0b8f2cb3
-  data.tar.gz: 4ba042f669f89522ca24409de72bc40d18c5a645f603e831f434814118ed1e62
+  metadata.gz: 5a87ae7a9eed66fd39f1d74d245970d0ed3953de8e55768300d321959a0f9c98
+  data.tar.gz: 5ee05dda27eba4bc8ace61e91b65d6320c66c98bd0847c6b9fd6b19af43e38ab
 SHA512:
-  metadata.gz: b4baaf451ab312df4f5f39a4cdbc478e07c48d3c4eb83ce5ba516224b56f46929f3e95de359ff6508efdfa2e48658a5fcced192b221684e1065e6db2a93aa1f2
-  data.tar.gz: a6d1a834a075a0cf11de9b58e07df08c0d6f79d499b9433994b827c8777d529f1d8d471202d54de870fc0154119a7bfbc939ba2c48bb56028751a158fe09ec40
+  metadata.gz: 655cf9744204519a8605acef134963294845b19ca80b3c62272c6970f0593d2620a48e4032fc2d3c761b4f8e558786dc41199201aa4ac690be8943bf8ca1f064
+  data.tar.gz: 37d3ae02502b529cea6228c733ff292c58cd6601b2a50854e46f832f007a8665a397473fbf1bc782cdb52e8193d8852d86a23b8e733c052f6560ae8b9aa3f5aa

data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("currency", props: {
+  amount: '1234567.89',
+  comma_separator: true,
+  size: 'lg',
+  emphasized: false,
+  decimals: 'matching',
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.jsx

@@ -0,0 +1,18 @@
+import React from "react"
+
+import Currency from "../_currency"
+
+const CurrencyCommaSeparator = (props) => {
+  return (
+    <Currency
+        amount='1234567.89'
+        commaSeparator
+        decimals="matching"
+        emphasized={false}
+        size="lg"
+        {...props}
+    />
+  )
+}
+
+export default CurrencyCommaSeparator

data/app/pb_kits/playbook/pb_currency/docs/_currency_comma_separator.md

@@ -0,0 +1,3 @@
+The optional `commaSeparator` can be used to auto-format the use of commas as a thousands separator. 
+
+**NOTE:** If the value passed into the `amount` prop is already comma-dilineated, it will not add additional commas.

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

@@ -8,7 +8,8 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
-
+  - currency_comma_separator: Comma Separator
+  
   react:
   - currency_variants: Variants
   - currency_size: Size
@@ -17,6 +18,7 @@ examples:
   - currency_abbreviated: Abbreviate Larger Amounts
   - currency_matching_decimals: Matching Decimals
   - currency_unstyled: Unstyled
+  - currency_comma_separator: Comma Separator
 
   swift:
   - currency_size_swift: Size

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

@@ -5,3 +5,4 @@ export { default as CurrencyNoSymbol } from './_currency_no_symbol.jsx'
 export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
+export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -13,7 +13,30 @@
     id: "typeahead-form-pill",
     is_multi: true,
     options: names,
-    label: "Names",
+    label: "Truncation Within Typeahead",
     pills: true,
     truncate: 1,
 }) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
+<%= pb_rails("card", props: { max_width: "xs" })  do %>
+  <%= pb_rails("form_pill", props: {
+      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      tabindex: 0,
+      truncate: 1,
+      id: "truncation-1"
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show truncation",
+      tabindex: 0,
+      truncate: 1,
+      id: "truncation-2"
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill long tag no tooltip show truncation",
+      tabindex: 0,
+      truncate: 1,
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
@@ -15,11 +15,34 @@ const FormPillTruncatedText = (props) => {
       <Typeahead
           htmlOptions={{ style: { maxWidth: "240px" }}}
           isMulti
-          label="Names"
+          label="Truncation Within Typeahead"
           options={names}
           truncate={1}
           {...props}
       />
+      <Caption text="Form Pill Truncation"/>
+      <Card maxWidth="xs">
+        <FormPill
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
+            onClick={() => alert('Click!')}
+            tabIndex={0}
+            truncate={1}
+        />
+        <FormPill
+            icon="badge-check"
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="icon and a very long tag to show truncation"
+            truncate={1}
+        />
+        <FormPill
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="form pill with a very long tag to show truncation"
+            truncate={1}
+        />
+      </Card>
     </>
   )
 }

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_rails.md

@@ -0,0 +1,3 @@
+For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+
+__NOTE__: For Rails Form Pills (not ones embedded within a React-rendered Typeahead or MultiLevelSelect), a unique `id` is required to enable the Tooltip functionality displaying the text or tag section of the Form Pill.

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text_react.md

@@ -0,0 +1 @@
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.

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

@@ -0,0 +1,30 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.google.com/search?q=playbook+design+system",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://www.youtube.com/@PowerHRG",
+    color: "body",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://github.com/powerhome/.github/blob/main/profile/README.md",
+    color: "muted",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "https://rubygems.org/gems/playbook_ui/",
+    color: "destructive",
+  }) %>
+</div>

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkColor = (props) => (
+  <div>
+    <div>
+      <Link
+          href="https://www.google.com/search?q=playbook+design+system"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="body"
+          href="https://www.youtube.com/@PowerHRG"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="muted"
+          href="https://github.com/powerhome/.github/blob/main/profile/README.md"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          color="destructive"
+          href="https://rubygems.org/gems/playbook_ui/"
+          text="link example"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkColor

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

@@ -0,0 +1,5 @@
+<%= pb_rails("link", props: {
+  text: "link example",
+  href: "#disabled",
+  disabled: true,
+}) %>

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkDisabled = (props) => (
+  <div>
+    <Link
+        disabled
+        href="#disabled"
+        text="link example"
+        {...props}
+    />
+  </div>
+)
+
+export default LinkDisabled

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

@@ -0,0 +1,15 @@
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "#icon",
+    icon: "arrow-up-right-from-square",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("link", props: {
+    text: "link example",
+    href: "#icon2",
+    icon_right: "chevron-right",
+  }) %>
+</div>

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkIcon = (props) => (
+  <div>
+    <div>
+      <Link
+          href="#icon"
+          icon="arrow-up-right-from-square"
+          text="link example"
+          {...props}
+      />
+    </div>
+    <div>
+      <Link
+          href="#icon2"
+          iconRight="chevron-right"
+          text="link example"
+          {...props}
+      />
+    </div>
+  </div>
+)
+
+export default LinkIcon

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

@@ -0,0 +1,35 @@
+<%= pb_rails("link", props: {
+  text: "h1 link example",
+  href: "#tag",
+  icon: "arrow-up-right-from-square",
+  tag: "h1",
+}) %>
+
+<%= pb_rails("link", props: {
+  text: "h3 link example",
+  href: "#tag2",
+  tag: "h3",
+  underline: true,
+}) %>
+
+<%= pb_rails("link", props: {
+  color: "destructive",
+  text: "h6 link example",
+  href: "#tag3",
+  tag: "h6",
+}) %>
+
+<%= pb_rails("link", props: {
+  text: "p link example",
+  href: "#tag4",
+  icon_right: "chevron-right",
+  tag: "p",
+}) %>
+
+<div>
+  This is a <%= pb_rails("link", props: {
+    text: "span link example",
+    href: "#tag5",
+    tag: "span",
+  }) %>
+</div>

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkTag = (props) => (
+  <div>
+    <Link
+        href="#tag"
+        icon="arrow-up-right-from-square"
+        tag="h1"
+        text="h1 link example"
+        {...props}
+    />
+    <Link
+        href="#tag2"
+        tag="h3"
+        text="h3 link example"
+        underline
+        {...props}
+    />
+    <Link
+        color="destructive"
+        href="#tag3"
+        tag="h6"
+        text="h6 link example"
+        {...props}
+    />
+    <Link
+        href="#tag4"
+        iconRight="chevron-right"
+        tag="p"
+        text="p link example"
+        {...props}
+    />
+    <div>
+      This is a <Link
+          href="#tag5"
+          tag="span"
+          text="span link example"
+          {...props}
+    />
+    </div>
+  </div>
+)
+
+export default LinkTag

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

@@ -0,0 +1,5 @@
+<%= pb_rails("link", props: {
+  text: "link example",
+  href: "#underline",
+  underline: true,
+}) %>

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Link } from 'playbook-ui'
+
+const LinkUnderline = (props) => (
+  <div>
+    <Link
+        href="#underline"
+        text="link example"
+        underline
+        {...props}
+    />
+  </div>
+)
+
+export default LinkUnderline

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

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

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

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

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("timeline", props: {orientation: "horizontal", show_date: true}) do %>
+    <%= pb_rails("timeline/item", props: { line_style: "solid"}) do |item| %>
+
+      <% item.label do %>
+        <%= pb_rails("timeline/label") do %>
+          <%= pb_rails("title", props: { text: "Any Kit Here", size: 2 }) %>
+        <% end %>
+      <% end %>
+    
+      <% item.step do %>
+        <%= pb_rails("timeline/step", props: { icon: 'check', icon_color: 'teal' }) %>
+      <% end %>
+    
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Jackson Heights",
+          detail: "37-27 74th Street"
+        }) %>
+      <% end %>
+    <% end %>
+    <%= pb_rails("timeline/item", props: { line_style: "dotted"}) do |item| %>
+
+      <% item.step do %>
+        <%= pb_rails("timeline/step") do %>
+          <%= pb_rails("pill", props: { text: "Any Kit" , variant: "success" }) %>
+        <% end %>
+      <% end %>
+    
+      <% item.detail do %>
+        <%= pb_rails("title_detail", props: {
+          title: "Greenpoint",
+          detail: "81 Gate St Brooklyn"
+        }) %>
+      <% end %>
+    <% end %>
+
+    <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1 }) do |item| %>
+      <%= pb_rails("title_detail", props: {
+          title: "Society Hill",
+          detail: "72 E St Astoria"
+      }) %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+
+import Timeline from '../_timeline'
+import Title from '../../pb_title/_title'
+import Pill from '../../pb_pill/_pill'
+
+import TitleDetail from '../../pb_title_detail/_title_detail'
+
+const TimelineWithChildren = (props) => (
+  <div>
+    <Timeline orientation="horizontal"
+        showDate
+        {...props}
+    >
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label>
+          <Title size={2}
+              text='Any Kit Here'
+          />
+        </Timeline.Label>
+        <Timeline.Step icon="user"
+            iconColor="royal"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="37-27 74th Street"
+              title="Jackson Heights"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="dotted"
+          {...props}
+      >
+        <Timeline.Step>
+          <Pill text="Any Kit"
+              variant="success"
+          />
+        </Timeline.Step>
+        <Timeline.Detail>
+          <TitleDetail detail="81 Gate St Brooklyn"
+              title="Greenpoint"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+
+      <Timeline.Item lineStyle="solid"
+          {...props}
+      >
+        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
+        <Timeline.Step icon="map-marker-alt"
+            iconColor="purple"
+        />
+        <Timeline.Detail>
+          <TitleDetail detail="72 E St Astoria"
+              title="Society Hill"
+              {...props}
+          />
+        </Timeline.Detail>
+      </Timeline.Item>
+    </Timeline>
+  </div>
+)
+
+export default TimelineWithChildren

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.md

@@ -0,0 +1,2 @@
+Any kit can be used inside of our compound components of label, step, or detail. Expand the code snippet below to see how to use these children elements.
+

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

@@ -4,10 +4,11 @@ examples:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
+  - timeline_with_children: With Children
   
   
   react:
   - timeline_default: Default
   - timeline_vertical: Vertical
   - timeline_with_date: With Date
-  
+  - timeline_with_children: With Children

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

@@ -1,3 +1,4 @@
 export { default as TimelineDefault } from './_timeline_default.jsx'
 export { default as TimelineVertical } from './_timeline_vertical.jsx'
 export { default as TimelineWithDate } from './_timeline_with_date.jsx'
+export { default as TimelineWithChildren } from './_timeline_with_children.jsx'