playbook_ui 9.10.0.pre.alpha2 → 9.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 210dfcb2a5011173148bd19f95f1295fa55e69a26814da550b09e85b64025d81
-  data.tar.gz: 7b79476f36d303bcd6d992c5239c29faae33d8f1068674bbef0365af9ff6b9bc
+  metadata.gz: b1460f77a2ef88bf84e6e7388b473d73517373e9ef0d690418f318bf13eb49f6
+  data.tar.gz: 814d426340141a35d9286a0df82747538023dde241b7ec662c68bdfe6ef59585
 SHA512:
-  metadata.gz: fd106f6e9df0b198ef6b46729612c215e0ce06e7e0228135b006a91b8a08bca39410558c62b993745596b6366331a2790301a7565afed611aec2da196c9290fe
-  data.tar.gz: 8892f5c04d2cfd31a6f229807a8a61c10f4eb059feefff3c6ec5b0ec2cbf8fd8cb2846227f5c395cc33ff9f411158e6dfd07cb30dfc3fa9880a5d30755c26a2a
+  metadata.gz: e2c7ca89a529a1b173ac9cdd097813f342024c0428bac7830a6c0fa2fedc8e2951e6f7eea46bcaadbf85d8a65d5cd53d329c9d3c13abf5b0db0b001f11610bed
+  data.tar.gz: 73a48d081d1f1db44d7b788816ccc4e6c02657cf7e0b3107da11d18e1889bb716810717ab0259cb6385a31dd02b90c6ff8162896998732b97c2936f7f821a85f

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,7 @@
 @import 'tokens/fonts';
 @import 'pb_background/background';
 @import 'pb_body/body';
+@import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';

data/app/pb_kits/playbook/data/menu.yml

@@ -2,6 +2,7 @@ kits:
   - avatar
   - avatar_action_button
   - background
+  - bread_crumbs
   - buttons:
     - button
     - button_toolbar

data/app/pb_kits/playbook/index.js

@@ -10,6 +10,7 @@ export Background from './pb_background/_background.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
+export BreadCrumbs from './pb_bread_crumbs/_bread_crumbs.jsx'
 export Button from './pb_button/_button.jsx'
 export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx

@@ -0,0 +1,51 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps.js'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type BreadCrumbItemProps = {
+  aria?: object,
+  className?: string,
+  data?: object,
+  id?: string,
+  component?: element
+}
+const BreadCrumbItem = (props: BreadCrumbItemProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    component = 'a',
+    ...rest
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames(
+    buildCss('pb_bread_crumb_item_kit'),
+    globalProps(props),
+    className
+  )
+  const Component = component || 'span'
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      <Component
+          className="pb_bread_crumb_item"
+          {...rest}
+      />
+    </div>
+  )
+}
+export default BreadCrumbItem

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx

@@ -0,0 +1,49 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps.js'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type BreadCrumbsProps = {
+  aria?: object,
+  className?: string,
+  data?: object,
+  id?: string,
+  text?: string,
+  children?: node
+}
+const BreadCrumbs = (props: BreadCrumbsProps) => {
+  const {
+    aria = { label: 'Breadcrumb Navigation' },
+    className,
+    data = {},
+    id,
+    children,
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = classnames(
+    buildCss('pb_bread_crumbs_kit'),
+    globalProps(props),
+    className
+  )
+
+  return (
+    <nav
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      {children}
+    </nav>
+  )
+}
+
+export default BreadCrumbs

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -0,0 +1,55 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/spacing";
+@import "../tokens/typography";
+
+[class^=pb_bread_crumbs_kit] {
+  $pb_badge_height: 18px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border_rad_light;
+  padding: 0 $space_xs/2;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $card_light;
+
+  svg {
+   margin-right: 8px;
+  }
+    .pb_bread_crumb_item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+    }
+    .pb_bread_crumb_item_kit {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .pb_bread_crumb_item_kit:not(:last-child):after {
+      content: '/';
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      background: rgba($color_value, $opacity_1);
+      color: map-get($status_color_text, $color_name);
+    }
+  }
+
+  &.dark {
+    border-width: 0;
+
+    @each $color_name, $color_value in $status_colors {
+      &[class*=_#{$color_name}]  {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.html.erb

@@ -0,0 +1,9 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria) do%>
+<%= content_tag(object.link ? 'a' : 'span', class: 'bread_crumb_item', href: object.link) do %>
+    <%= content.presence %>
+<% end %>
+<%end%>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumb_item.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbBreadCrumbs
+    class BreadCrumbItem < Playbook::KitBase
+      prop :link, type: Playbook::Props::String
+      def classname
+        generate_classname("pb_bread_crumb_item_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:nav,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+      <%= content.presence %>
+<% end %>

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbBreadCrumbs
+    class BreadCrumbs < Playbook::KitBase
+      def classname
+        generate_classname("pb_bread_crumbs_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.test.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import BreadCrumbs from './_bread_crumbs'
+import BreadCrumbItem from './_bread_crumb_item'
+import { Icon, Title } from '../'
+
+it('should render bread crumbs', () => {
+  const testId = 'breadCrumbs'
+  render(
+    <BreadCrumbs
+        data={{ testid: testId }}
+        name={name}
+    >
+      <Icon
+          icon="home"
+          size="1x"
+      />
+      <BreadCrumbItem
+          dark
+          href="/home"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Home"
+        />
+      </BreadCrumbItem>
+    </BreadCrumbs>
+  )
+  const kit = screen.getByTestId(testId)
+  const label = screen.getByText('Home')
+
+  expect(kit).toHaveClass('pb_bread_crumbs_kit')
+  expect(label).toHaveTextContent('Home')
+})

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.html.erb

@@ -0,0 +1,17 @@
+
+<div>
+  <%= pb_rails("bread_crumbs", props: { aria: { label: "Breadcrumb Navigation" } }) do%>
+    <%= pb_rails("icon", props: { icon: "home"}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/" }) do %> 
+      <%= pb_rails("title", props: { size: 4, text: "Home", tag: "span" }) %>
+     <%end%>
+     <%= pb_rails("icon", props: { icon: 'users'}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item", props: { link: "/users" }) do %> 
+      <%= pb_rails("title", props: { size: 4, text: "Users", tag: "span" }) %>
+     <%end%>
+     <%= pb_rails("icon", props: { icon: "user"}) %>
+    <%= pb_rails("bread_crumbs/bread_crumb_item") do %> 
+      <%= pb_rails("title", props: { size: 4, text: "User", tag: "span" }) %>
+     <%end%>
+    <%end%>
+</div>

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import BreadCrumbs from '../_bread_crumbs.jsx'
+import { Icon, Title } from '../../'
+import BreadCrumbItem from '../_bread_crumb_item'
+
+const Link = (props) => <BreadCrumbItem {...props} />
+const BreadCrumbsDefault = (props) => {
+  return (
+    <BreadCrumbs
+        text="+1"
+        {...props}
+    >
+      <Icon
+          icon="home"
+          size="1x"
+      />
+      <BreadCrumbItem
+          {...props}
+          href="/home"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Home"
+        />
+      </BreadCrumbItem>
+      <Icon
+          icon="users"
+          size="1x"
+      />
+      <Link
+          {...props}
+          href="/users"
+      >
+        <Title
+            size="4"
+            tag="span"
+            text="Users"
+        />
+      </Link>
+      <Icon
+          icon="user"
+          size="1x"
+      />
+      <Link {...props}>
+        <Title
+            size="4"
+            tag="span"
+            text="User"
+        />
+      </Link>
+    </BreadCrumbs>
+  )
+}
+
+export default BreadCrumbsDefault

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

@@ -0,0 +1 @@
+BreadCrumbs can be used for keeping a user aware of there route location.

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

@@ -0,0 +1,7 @@
+examples:
+  rails:
+  - bread_crumbs_default: Default
+ 
+  react:
+  - bread_crumbs_default: Default
+ 

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

@@ -0,0 +1 @@
+export { default as BreadCrumbsDefault } from './_bread_crumbs_default.jsx'

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -2,16 +2,14 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildDataProps } from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
 
 import Icon from '../pb_icon/_icon.jsx'
 
 type EventHandler = (SyntheticInputEvent<HTMLInputElement>) => void
 type ButtonPropTypes = {
-  aria?: {
-    label: string,
-  },
+  aria?: object,
   children?: array<React.ReactChild>,
   className?: string | array<string>,
   data?: object,
@@ -55,20 +53,9 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
-const buttonAriaProps = (props: ButtonPropTypes) => {
-  const { aria } = props
-  if (typeof aria !== 'object') return {}
-  const { label } = aria
-
-  const ariaProps = {}
-
-  if (label !== null) ariaProps['aria-label'] = label
-
-  return ariaProps
-}
-
 const Button = (props: ButtonPropTypes) => {
   const {
+    aria = {},
     children,
     className,
     data = {},
@@ -84,7 +71,7 @@ const Button = (props: ButtonPropTypes) => {
     value,
   } = props
 
-  const buttonAria = buttonAriaProps(props)
+  const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
     buttonClassName(props),
@@ -114,11 +101,12 @@ const Button = (props: ButtonPropTypes) => {
   return (
     <If condition={link !== null}>
       <a
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           href={link}
           id={id}
+          role="link"
           target={newWindow ? '_blank' : null}
       >
         <If condition={loading}>{loadingIcon}</If>
@@ -126,12 +114,13 @@ const Button = (props: ButtonPropTypes) => {
       </a>
       <Else />
       <button
-          {...buttonAria}
+          {...ariaProps}
           {...dataProps}
           className={css}
           disabled={disabled}
           id={id}
           onClick={onClick}
+          role="button"
           type={htmlType}
           value={value}
       >