playbook_ui 9.10.0.pre.date.time.stacked.1 → 9.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27cd1418907251e1ac5b3f234dcbf01e8ee6ab30e179511e82139fe9a912cbf7
-  data.tar.gz: 8b37fe666405f0b156341f4bcbe7e338341800bf9b3b4c9f9793fcfca515211f
+  metadata.gz: 454a36effc86e9d19eeb9e613a961a581d16ff491c2933cacffe0732669327f7
+  data.tar.gz: b3656b823c07b3f5b2653205d1a7a42165a86a9a429759b65ddc0e05a213850b
 SHA512:
-  metadata.gz: 32e94d16d64743934c313661b1f4e86f8cd8768cb9e52576fd10d4c089cd9ca2ece7ec13549cd6a37304d1afb1b137c56bb3acf03a950ac31166f1d277e8311d
-  data.tar.gz: 7a835ec81990710a3638f15f9a4ef1b9abdb57a942a9e993e718523cfe880c940febee3b4f1c02e0155de076032b3551550383d6018a198aab839519c00ff801
+  metadata.gz: 6d9eed8e5c343aae96350758b62eed4ddcf68f92c9df97909b6743eb74b66e9afbb0625642968f19335066a27ee38593be6e191e97ff5277ca33a690f3f2c4cf
+  data.tar.gz: 7c45e5fa6c94dbb0e3c7cdc36de9e2d9655511122309f46e2b45294697fe84d7b8af213adbb88e2bc45713319a1c4988cd8996df894c73341dd0de696427a513

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_background/background.rb

@@ -12,7 +12,6 @@ module Playbook
                  values: %w[h1 h2 h3 h4 h5 h6 p div span],
                  default: "div"
 
-
       def classname
         generate_classname("pb_background_kit", image_classname, background_color_classname, separator: " ")
       end

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps.js'
+import { Icon } from '../'
 
 import {
   buildAriaProps,
@@ -13,8 +14,15 @@ import {
 type BadgeProps = {
   aria?: object,
   className?: string,
+  closeProps?: {
+    onClick?: EventHandler,
+    onMouseDown?: EventHandler,
+    onTouchEnd?: EventHandler,
+  },
   data?: object,
   id?: string,
+  removeIcon?: Boolean,
+  removeOnClick?: EventHandler,
   rounded?: boolean,
   text?: string,
   variant?: "error" | "info" | "neutral" | "primary" | "success" | "warning",
@@ -23,8 +31,11 @@ const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,
+    closeProps = {},
     data = {},
     id,
+    removeIcon = false,
+    removeOnClick = () => {},
     rounded = false,
     text,
     variant = 'neutral',
@@ -44,7 +55,21 @@ const Badge = (props: BadgeProps) => {
         className={css}
         id={id}
     >
-      <span>{text}</span>
+      <span>
+        {text}
+        <If condition={removeIcon}>
+          <span
+              onClick={removeOnClick}
+              style={{ cursor: 'pointer' }}
+              {...closeProps}
+          >
+            <Icon
+                fixedWidth
+                icon="times"
+            />
+          </span>
+        </If>
+      </span>
     </div>
   )
 }

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}
       >