playbook_ui 9.10.0 → 9.14.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b9945857d72557eecdaac3f4cff4f8d02d7941118ea741fa43eb13a7fb8af86f
-  data.tar.gz: 9a8c82315215fce86c9b34e6418f9a44a4656d7afebc2a0e15a2ec94ba4fdf0b
+  metadata.gz: ac52100757b7a77673deacf90cb3c92c2c53e36611bea82739556081a7351f7a
+  data.tar.gz: 5cbd39cfdc2c35ee0002a908b2464b29461161a5f366861d733c0d998eea4b9a
 SHA512:
-  metadata.gz: f2da5e8f1f95b18fd53919a99c18ff28e2039eb5dd2cb1ce30939db84f1abf46358279a63993e71eb5c2151bfb3812797b49984fab77537ffe5cdf82bc9623d7
-  data.tar.gz: cf5b9ff8408fb77863c81bb1ddaf4668835f5a97cd926729e743c6845e3c4a283c7148355186c24dcbfb2316b5d0800ef0ada9747387a112828701f27bfef32f
+  metadata.gz: 05a9cc1143df406e74845f19004c58c6db3a931f1a9295447930dc9376f17f4c17e81df3795e23308ac7d901b116d847462bc44666ca89b4178d8ed521260a10
+  data.tar.gz: 210590e03979d8be499c4f1596f47c9dca835b380efd6a9cfb1b643ebb84c6b7dc921f219e7fb2dce298c1b87591a1cc012c9f3546018778b9a0b1ab8644c3aa

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

@@ -1,7 +1,12 @@
 kits:
-  - avatar
-  - avatar_action_button
+  - avatars:
+    - avatar
+    - avatar_action_button
+    - multiple_users
+    - multiple_users_stacked
+    - user
   - background
+  - bread_crumbs
   - buttons:
     - button
     - button_toolbar
@@ -18,7 +23,6 @@ kits:
   - dialog
   - filter
   - fixed_confirmation_toast
-  - flex
   - forms:
     - checkbox
     - date_picker
@@ -36,19 +40,19 @@ kits:
     - selectable_list
     - text_input
     - textarea
-    - typeahead
     - toggle
+    - typeahead
   - highlight
   - icon
   - icon_circle
   - icon_stat_value
   - icon_value
   - image
-  - layout
+  - layouts:
+    - flex
+    - layout
   - list
   - loading_inline
-  - multiple_users
-  - multiple_users_stacked
   - nav
   - tags:
     - badge
@@ -60,11 +64,22 @@ kits:
     - progress_simple
     - progress_step
   - section_separator
-  - source
   - star_rating
-  - stat_change
   - table
   - timeline
+  - time_and_date:
+    - date
+    - date_range_inline
+    - date_range_stacked
+    - date_stacked
+    - date_time
+    - date_time_stacked
+    - date_year_stacked
+    - time
+    - time_range_inline
+    - time_stacked
+    - timestamp
+    - weekday_stacked
   - tooltip
   - typography:
     - body
@@ -74,26 +89,15 @@ kits:
     - contact
     - currency
     - dashboard_value
-    - date
-    - date_range_inline
-    - date_range_stacked
-    - date_stacked
-    - date_time
-    - date_time_stacked
-    - date_year_stacked
     - home_address_street
     - label_pill
     - label_value
     - message
     - person
     - person_contact
+    - source
+    - stat_change
     - stat_value
-    - time
-    - time_stacked
-    - timestamp
-    - time_range_inline
     - title_count
     - title_detail
-    - weekday_stacked
-  - user
   - user_badge

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_badge/_badge.scss

@@ -15,9 +15,9 @@
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
+  white-space: nowrap;
 
   span {
-    transform: translateY(1px);
     display: inline-block;
     font-size: $font_smaller - 1;
     font-weight: $bolder;

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')
+})