playbook_ui 12.20.0.pre.alpha.movemarkdown668 → 12.20.0.pre.alpha.title2665

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2df0f0270c3034cc3c34d508319933af0f3bd1961b9ec81b08bf52411381097c
-  data.tar.gz: 4f8fb1eea4a45848114ae267ba2f102359af6f03006543a82798e70007e18c50
+  metadata.gz: df3bfdb97b10c109fab6967ee2b4d3e7a3b88073618f7578476da1f368abfbed
+  data.tar.gz: 75f864b4374c1d0f63b971b0e63117ce51c6bde1774f1b19e208d6a01b3973f2
 SHA512:
-  metadata.gz: a392fbed9531d8af1023d645e5b1e5d6c74eff0baaade11e615d0381cb43af31584109c5d9d997daa816ae990786957f2620a3e016bc4335a98c727c5e11e7c7
-  data.tar.gz: 3f7b89e018d6535577e9c460947c8278f2a3cc16e34ae5cb99ed6965b24fbeb3026e8db0bc98a80fa86521dfac57bebe735805bcea2b7bad6d5ea77fdd1119e4
+  metadata.gz: 455e052442c4e16da55677e8117e496f8f6ad3c8a10f87020e2db25a72d8440bb925df2318569e2f4c0d0d3f3478450d59224ff5b84a08e44cf0659c44d9137e
+  data.tar.gz: 489a8187d1824032c5354554110ffc43647fe4f63a5bc38674a985cd6e2fc03da0233125afeab407084b4ddc8798772e24992c4924bf3590889317914f9ed2ac

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.html.erb

@@ -0,0 +1,56 @@
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "xxs",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "away"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "xs",
+    image_alt: "Terry Johnson Standing",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "online"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image_alt: "Terry Johnson Standing",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "away"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "md",
+    image_alt: "Terry Johnson Standing",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "offline"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "lg",
+    image_alt: "Terry Johnson Standing",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "online"
+  }) %>
+
+<br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "xl",
+    image_alt: "Terry Johnson Standing",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "away"
+  }) %>

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import { Avatar } from '../../'
+
+const AvatarDefault = (props) => {
+  return (
+    <div>
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="xxs"
+          status="online"
+          {...props}
+      />
+      <br />
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="xs"
+          status="online"
+          {...props}
+      />
+      <br />
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+          status="online"
+          {...props}
+      />
+      <br />
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="md"
+          status="away"
+          {...props}
+      />
+      <br />
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="lg"
+          status="offline"
+          {...props}
+      />
+      <br />
+      <Avatar
+          imageAlt="Terry Johnson Standing"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="xl"
+          status="offline"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AvatarDefault

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xxs" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xs" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "sm" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "md" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "lg" }) %>
+<%= pb_rails("avatar", props: { name: "Terry Johnson", size: "xl" }) %>

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Avatar } from '../../'
+
+const AvatarDefault = (props) => {
+  return (
+    <div>
+      <Avatar
+          name="Terry Johnson"
+          size="xxs"
+          {...props}
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="xs"
+          {...props}
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="sm"
+          {...props}
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="md"
+          {...props}
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="lg"
+          {...props}
+      />
+      <Avatar
+          name="Terry Johnson"
+          size="xl"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AvatarDefault

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.md

@@ -0,0 +1,2 @@
+
+This is used when there is no avatar for a particular user.

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.html.erb

@@ -0,0 +1,6 @@
+<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "xxs" }) %>
+<%= pb_rails("avatar", props: { image_url: true, name: "Terry Johnson", size: "xs" }) %>
+<%= pb_rails("avatar", props: { image_url: 4, name: "Terry Johnson", size: "sm" }) %>
+<%= pb_rails("avatar", props: { image_url: "https://google.com", name: "Terry Johnson", size: "md" }) %>
+<%= pb_rails("avatar", props: { image_url: "", name: "Terry Johnson", size: "lg" }) %>
+<%= pb_rails("avatar", props: { image_url: "https://randomuser.me/api/portraits/men/notapicture.jpg", name: "Terry Johnson", size: "xl" }) %>

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

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Avatar } from '../../'
+
+const AvatarNoImage = (props) => {
+  return (
+    <div>
+      <Avatar
+          imageUrl="Just some text here"
+          name="Terry Johnson"
+          size="xxs"
+          {...props}
+      />
+      <Avatar
+          imageUrl="Just some text here"
+          name="Terry Johnson"
+          size="xs"
+          {...props}
+      />
+      <Avatar
+          imageUrl={4}
+          name="Terry Johnson"
+          size="sm"
+          {...props}
+      />
+      <Avatar
+          imageUrl="https://google.com"
+          name="Terry Johnson"
+          size="md"
+          {...props}
+      />
+      <Avatar
+          imageUrl=""
+          name="Terry Johnson"
+          size="lg"
+          {...props}
+      />
+      <Avatar
+          imageUrl="https://randomuser.me/api/portraits/men/notapicture.jpg"
+          name="Terry Johnson"
+          size="xl"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AvatarNoImage

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.md

@@ -0,0 +1,2 @@
+
+A monagram is used as a fallback when an invalid or missing image url is provided.

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.html.erb

@@ -0,0 +1,36 @@
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image_alt: "Terry Johnson Status",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg"
+  }) %>
+
+<br>
+
+  <%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image_alt: "Terry Johnson Online",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "online"
+  }) %>
+
+  <br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image_alt: "Terry Johnson Away",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "away"
+  }) %>
+
+  <br>
+
+<%= pb_rails("avatar", props: {
+    name: "Terry Johnson",
+    size: "sm",
+    image_alt: "Terry Johnson Offline",
+    image_url: "https://randomuser.me/api/portraits/men/44.jpg",
+    status: "offline"
+  }) %>

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

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Avatar } from '../../'
+
+const AvatarStatus = (props) => {
+  return (
+    <>
+      <Avatar
+          imageAlt="Terry Johnson Status"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+          {...props}
+      />
+
+      <br />
+
+      <Avatar
+          imageAlt="Terry Johnson Online"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+          status="online"
+          {...props}
+      />
+
+      <br />
+
+      <Avatar
+          imageAlt="Terry Johnson Away"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+          status="away"
+          {...props}
+      />
+
+      <br />
+
+      <Avatar
+          imageAlt="Terry Johnson Offline"
+          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
+          name="Terry Johnson"
+          size="sm"
+          status="offline"
+          {...props}
+      />
+
+      <br />
+    </>
+  )
+}
+
+export default AvatarStatus

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.md

@@ -0,0 +1,2 @@
+
+The Status prop is used to display a user's online status like popular chat apps.

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

@@ -0,0 +1,2 @@
+Avatar displays a user's picture. This helps aid easy recognition of the user. This kit is normally not used by itself, but rather used within other kits.
+The only time Avatar should be used instead of the User kit is when you are not going to display the user's name.

data/app/pb_kits/playbook/pb_avatar/docs/_footer.md

@@ -0,0 +1,3 @@
+### Things to Avoid
+
+Avoid using Avatar with the user's name right next to it or under it. Use User kit instead. Do not use this kit for images that are not profile pictures.

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

@@ -0,0 +1,11 @@
+examples:
+  rails:
+    - avatar_default: Default
+    - avatar_monogram: Monogram
+    - avatar_no_image: "Bad Image Link"
+    - avatar_status: Status
+  react:
+    - avatar_default: Default
+    - avatar_monogram: Monogram
+    - avatar_no_image: "Bad Image Link"
+    - avatar_status: Status

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

@@ -0,0 +1,4 @@
+export { default as AvatarDefault } from './_avatar_default.jsx'
+export { default as AvatarMonogram } from './_avatar_monogram.jsx'
+export { default as AvatarStatus } from './_avatar_status.jsx'
+export { default as AvatarNoImage } from './_avatar_no_image.jsx'

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.html.erb

@@ -0,0 +1,19 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Add Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Add Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "add",
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Remove Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Remove Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      action: "remove",
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_actions.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonActions = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        action="add"
+        imageAlt="Add Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Add Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+    <AvatarActionButton
+        action="remove"
+        imageAlt="Remove Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Remove Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonActions

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.html.erb

@@ -0,0 +1,10 @@
+<div class="pb--doc-demo-row">
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_default.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonDefault = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonDefault

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_on_click.jsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonOnClick = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Alert Sophia Carden"
+        linkUrl="https://www.google.com"
+        name="Sophia Carden"
+        onClick={() => alert('clicked!')}
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonOnClick

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_onclick.html.erb

@@ -0,0 +1,16 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Alert Sophia Carden",
+      name: "Sophia Carden",
+      id: "clickable",
+      link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+  }) %>
+
+  <%= javascript_tag do %>
+    document.querySelector('#clickable').addEventListener('click', () => alert('clickable clicked!'))
+  <% end %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.html.erb

@@ -0,0 +1,35 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_left"
+  }) %>
+
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "bottom_right"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_left"
+  }) %>
+
+    <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      placement: "top_right"
+  }) %>
+
+</div>

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_placement.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import AvatarActionButton from '../_avatar_action_button'
+
+const AvatarActionButtonPlacement = (props) => (
+  <div className="pb--doc-demo-row">
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="bottom_left"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="bottom_right"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="top_left"
+        {...props}
+    />
+    <AvatarActionButton
+        imageAlt="Sophia Carden"
+        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
+        linkAriaLabel="Sophia Carden"
+        name="Sophia Carden"
+        placement="top_right"
+        {...props}
+    />
+  </div>
+)
+
+export default AvatarActionButtonPlacement

data/app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb

@@ -0,0 +1,13 @@
+<div class="pb--doc-demo-row">
+  
+  <%= pb_rails("avatar_action_button", props: {
+      link_aria_label: "Sophia Carden",
+      name: "Sophia Carden",
+      link_url: "http://www.google.com",
+      image_alt: "Sophia Carden",
+      image_url: "https://randomuser.me/api/portraits/women/8.jpg",
+      tooltip_text: "Tooltip Text",
+      tooltip_id: "avatar_1",
+  }) %>
+
+</div>

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

@@ -0,0 +1,15 @@
+examples:
+  
+  rails:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_onclick: On Click
+  - avatar_action_button_tooltip: Tooltip
+
+  
+  react:
+  - avatar_action_button_default: Default
+  - avatar_action_button_placement: Placement
+  - avatar_action_button_actions: Actions
+  - avatar_action_button_on_click: On Click

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

@@ -0,0 +1,4 @@
+export { default as AvatarActionButtonDefault } from './_avatar_action_button_default.jsx'
+export { default as AvatarActionButtonPlacement } from './_avatar_action_button_placement.jsx'
+export { default as AvatarActionButtonActions } from './_avatar_action_button_actions.jsx'
+export { default as AvatarActionButtonOnClick } from './_avatar_action_button_on_click.jsx'

data/app/pb_kits/playbook/pb_background/docs/_background_category.html.erb

@@ -0,0 +1,23 @@
+<%= pb_rails("flex", props: {gap: "md", justify: "center", wrap: true}) do %>
+  <%= pb_rails("background", props: { background_color: "category_1", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_2", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_3", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_4", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_5", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_6", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_7", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_8", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_9", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_10", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_11", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_12", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_13", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_14", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_15", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_16", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_17", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_18", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_19", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_20", padding: "xl" }) do %> <% end %>
+  <%= pb_rails("background", props: { background_color: "category_21", padding: "xl" }) do %> <% end %>
+<%end%>