playbook_ui 4.14.0 → 4.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0e529c840f659aace42862d67f6579c6fa9f1fc952960381374b8b005ff41b95
-  data.tar.gz: 53c5c3676212e699d5c232fc6d4bc59ea3ab10a97335d08e7dc0e4e139a8859f
+  metadata.gz: 7c60678bea5dfbd0876ea029d5ee3ee8acddec0ffb70c76dbdf98834c2502af5
+  data.tar.gz: 96100434503a2403c3fcf50dea881b520a2d3ff14f93afd5542e7f149f9a31cf
 SHA512:
-  metadata.gz: 92e483f7ec5633610f6180f3d1cf8740f9fae2d128c9db1a17ae8ac55a352a19f358ad32104236f8dcbe9ccd370f40a57c3a63b2b7587a200c95f8d00500dc76
-  data.tar.gz: 4707de050cf746dd9d82db1cc36cdc1bdf03a8a2653510e2785b324491ddbb1c462faea3053d4ba0d4e65c99f20bf609db0e76a16a3e851518ad58797af6c283
+  metadata.gz: 473b7c3b876ca669ab9a2ce799c661af6fd4689843548535d62cf16ff88e699e9330076d0dd3c35b9d935ac6a71f926572d43426a2c17f6dca34c3b3f2feb7b7
+  data.tar.gz: 9892a24ec8caa7570080db1cb329a83440a18c8a557e27df14c0421afd07ce9a1490af3aa10fd2ad2fccfb6573f3310145359248a6897da1c946253b1086d3f4

data/README.md

@@ -11,7 +11,6 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 1. Run `yarn && bundle`
 1. Run `make start`
-1. Bootstrap the database: `docker-compose run web bin/rails db:setup`
 1. Install overcommit hooks `bin/overcommit`
 1. open [http://localhost:8080](http://localhost:8080)
 

data/app/pb_kits/playbook/_playbook.scss

@@ -4,6 +4,7 @@
 @import "pb_card/card";
 @import "pb_title/title";
 @import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_badge/badge';
 @import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
@@ -16,6 +17,7 @@
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
+@import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_file_upload/file_upload';
@@ -50,10 +52,13 @@
 @import 'pb_popover/popover';
 @import 'pb_progress_pills/progress_pills';
 @import 'pb_progress_simple/progress_simple';
+@import 'pb_progress_step/progress_step';
 @import 'pb_radio/radio';
 @import 'pb_section_separator/section_separator';
 @import 'pb_select/select';
 @import 'pb_selectable_card/selectable_card';
+@import 'pb_selectable_card_icon/selectable_card_icon';
+@import 'pb_selectable_icon/selectable_icon';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';
@@ -67,9 +72,11 @@
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
+@import 'pb_tooltip/tooltip';
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
+@import './utilities/spacing';
+

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

@@ -3,6 +3,7 @@ samples:
   - something
 kits:
   - avatar
+  - avatar_action_button
   - badge
   - buttons:
     - button
@@ -26,6 +27,8 @@ kits:
     - radio
     - select
     - selectable_card
+    - selectable_card_icon
+    - selectable_icon
     - text_input
     - textarea
     - typeahead
@@ -48,11 +51,13 @@ kits:
   - popover
   - progress_pills
   - progress_simple
+  - progress_step
   - section_separator
   - source
   - star_rating
   - stat_change
   - table
+  - tooltip
   - typography:
     - body
     - caption

data/app/pb_kits/playbook/index.js

@@ -1,5 +1,6 @@
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
+export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
@@ -52,10 +53,14 @@ export PersonContact from './pb_person_contact/_person_contact.jsx'
 export Pill from './pb_pill/_pill.jsx'
 export ProgressPills from './pb_progress_pills/_progress_pills.jsx'
 export ProgressSimple from './pb_progress_simple/_progress_simple.jsx'
+export ProgressStep from './pb_progress_step/_progress_step.jsx'
+export ProgressStepItem from './pb_progress_step/_progress_step_item.jsx'
 export Radio from './pb_radio/_radio.jsx'
 export SectionSeparator from './pb_section_separator/_section_separator.jsx'
 export Select from './pb_select/_select.jsx'
 export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
+export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon.jsx'
+export SelectableIcon from './pb_selectable_icon/_selectable_icon.jsx'
 export Source from './pb_source/_source.jsx'
 export StarRating from './pb_star_rating/_star_rating.jsx'
 export StatChange from './pb_stat_change/_stat_change.jsx'
@@ -66,10 +71,11 @@ export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
-export TimeStamp from './pb_timestamp/_timestamp.jsx'
+export Timestamp from './pb_timestamp/_timestamp.jsx'
 export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'
 export Title from './pb_title/_title.jsx'
 export TitleCount from './pb_title_count/_title_count.jsx'
+export TitleDetail from './pb_title_detail/_title_detail.jsx'
 export Toggle from './pb_toggle/_toggle.jsx'
 export User from './pb_user/_user.jsx'
 export UserBadge from './pb_user_badge/_user_badge.jsx'
@@ -86,3 +92,4 @@ export pbChart from './plugins/pb_chart.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'
+export PbTooltip from './pb_tooltip'

data/app/pb_kits/playbook/packs/examples.js

@@ -14,6 +14,7 @@ import WebpackerReact from 'webpacker-react'
 
 import '../pb_form/pb_form_validation'
 import * as Avatar from 'pb_avatar/docs'
+import * as AvatarActionButton from 'pb_avatar_action_button/docs'
 import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
 import * as Body from 'pb_body/docs'
@@ -63,10 +64,13 @@ import * as PersonContact from 'pb_person_contact/docs'
 import * as Pill from 'pb_pill/docs'
 import * as ProgressPills from 'pb_progress_pills/docs'
 import * as ProgressSimple from 'pb_progress_simple/docs'
+import * as ProgressStep from 'pb_progress_step/docs'
 import * as Radio from 'pb_radio/docs'
 import * as SectionSeparator from 'pb_section_separator/docs'
 import * as Select from 'pb_select/docs'
 import * as SelectableCard from 'pb_selectable_card/docs'
+import * as SelectableCardIcon from 'pb_selectable_card_icon/docs'
+import * as SelectableIcon from 'pb_selectable_icon/docs'
 import * as Source from 'pb_source/docs'
 import * as StarRating from 'pb_star_rating/docs'
 import * as StatChange from 'pb_stat_change/docs'
@@ -88,6 +92,7 @@ import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
 WebpackerReact.setup({
   ...Avatar,
+  ...AvatarActionButton,
   ...Badge,
   ...BarGraph,
   ...Body,
@@ -137,10 +142,13 @@ WebpackerReact.setup({
   ...Pill,
   ...ProgressPills,
   ...ProgressSimple,
+  ...ProgressStep,
   ...Radio,
   ...SectionSeparator,
   ...Select,
   ...SelectableCard,
+  ...SelectableIcon,
+  ...SelectableCardIcon,
   ...Source,
   ...StarRating,
   ...StatChange,

data/app/pb_kits/playbook/packs/kits/pb_progress_step.js

@@ -0,0 +1,2 @@
+import '../../pb_progress_step/_progress_step.jsx'
+

data/app/pb_kits/playbook/packs/site_styles/docs/_markdown.scss

@@ -37,7 +37,7 @@
     background: #122b3b;
     color: #faf6e4;
     padding: 0.1rem 0.3rem;
-    margin: 1rem 5px;
+    margin: 0 5px;
     box-shadow: 0 2px 10px $shadow;
     border-radius: 0.25rem;
     overflow: hidden;

data/app/pb_kits/playbook/pb_avatar/_avatar.jsx

@@ -4,34 +4,43 @@ import React from 'react'
 import classnames from 'classnames'
 import { map } from 'lodash'
 
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
+
 import { Image } from '../'
 
 type AvatarProps = {
+  aria?: object,
   className?: String,
-  name: String,
+  data?: object,
+  id?: String,
   imageUrl: String,
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-  status: 'online' | 'away',
+  name: String,
+  size?: "md" | "lg" | "sm" | "xl" | "xs",
+  status: "away" | "offline" | "online",
 }
 
-const firstTwoInitials = (name) => (
+const firstTwoInitials = (name) =>
   map(name.split(/\s/), (name) => name[0])
     .join('')
     .substring(0, 2)
-)
-
-const Avatar = ({
-  className,
-  name = null,
-  imageUrl,
-  size = 'md',
-  status = null,
-}: AvatarProps) => {
-  const classes = classnames(['pb_avatar_kit', `avatar_${size}`, className])
+
+const Avatar = (props: AvatarProps) => {
+  const { aria = {}, className, data = {}, name = null, id = id, imageUrl, size = 'md', status = null } = props
+  const dataProps = buildDataProps(data)
+  const ariaProps = buildAriaProps(aria)
+  const classes = classnames(buildCss('pb_avatar_kit', size), className, spacing(props))
+
   const initials = name && firstTwoInitials(name)
+  dataProps['data-initials'] = initials
 
   return (
-    <div className={classes}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
       <div
           className="avatar_wrapper"
           data-initials={initials}

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

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

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

@@ -1,8 +1,9 @@
 examples:
   rails:
-  - avatar_default: Default
-  - avatar_monogram: Monogram
-  - avatar_status: Status
+    - avatar_default: Default
+    - avatar_monogram: Monogram
+    - avatar_status: Status
   react:
-  - avatar_default: Default
-  - avatar_monogram: Monogram
+    - avatar_default: Default
+    - avatar_monogram: Monogram
+    - avatar_status: Status

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

@@ -1,2 +1,3 @@
 export { default as AvatarDefault } from './_avatar_default.jsx'
 export { default as AvatarMonogram } from './_avatar_monogram.jsx'
+export { default as AvatarStatus } from './_avatar_status.jsx'

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.html.erb

@@ -0,0 +1,32 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+      
+
+    <% if object.tooltip_text.present? %>
+        <%= pb_rails("tooltip", props: {
+          trigger_element_id: object.tooltip_id,
+          tooltip_id: "tooltip-2",
+          position: 'top',
+          dark: true,
+        }) do %>
+          <%= object.tooltip_text %>
+        <% end %>
+    <% end %>
+
+    <%= link_to object.link_url, id: object.tooltip_id do %>
+
+      <%= pb_rails("avatar", props: {
+        name: object.name,
+        size: object.size,
+        image_url: object.image_url,
+        class: "avatar_action"
+      }) %>
+        <div class="icon">
+            <%= pb_rails("icon", props: {
+              icon: object.action_icons
+            }) %>
+        </div>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx

@@ -0,0 +1,78 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { Avatar, Icon } from '../'
+
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+
+type AvatarActionButtonProps = {
+  action?: String,
+  aria: Object,
+  className?: String,
+  data?: Object,
+  imageUrl?: String,
+  linkUrl?: String,
+  name?: String,
+  onClick?: String,
+  placement?: String,
+  size?: String,
+}
+
+const AvatarActionButton = ({
+  action = 'add',
+  aria = {},
+  className,
+  data = {},
+  imageUrl,
+  linkUrl,
+  name,
+  onClick,
+  placement = 'bottom left',
+  size = 'md',
+}: AvatarActionButtonProps) => {
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const css = buildCss({
+    'pb_avatar_action_button_kit': true,
+    [action]: true,
+    [placement]: true,
+    [size]: true,
+  })
+
+  const icons = {
+    add: 'plus-circle',
+    remove: 'times-circle',
+  }
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className)}
+    >
+      <a
+          href={linkUrl}
+          onClick={onClick}
+      >
+        <Avatar
+            imageUrl={imageUrl}
+            name={name}
+            size={size}
+        />
+        <div className="icon">
+          <Icon
+              icon={icons[action]}
+          />
+        </div>
+      </a>
+    </div>
+  )
+}
+
+export default AvatarActionButton

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -0,0 +1,63 @@
+[class^=pb_avatar_action_button_kit] {
+
+  $icon_size: 0px;
+  $border_size: 0px;
+
+  $action-colors: (
+    "add": $primary,
+    "remove": $error,
+  );
+
+  @each $key, $value in $action-colors {
+    &[class*=_#{$key}] a {
+      color: $value;
+    }
+  }
+  
+  @mixin icon-base {
+    width: $icon_size;
+    height: $icon_size;
+    position: absolute;
+    background-color: $white;
+    border-radius: $icon_size;
+    font-size: ($icon_size - $border_size * 2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
+  }
+
+  @each $name, $size in $avatar-sizes {
+    
+    &[class*=_#{$name}] {
+      
+      $avatar_size: map-get($avatar-sizes, $name);
+      $icon_size: $avatar_size / 2;
+      $border_size: $icon_size / 10;
+
+      position: relative;
+      width: $avatar_size * 1.25;
+      height: $avatar_size * 1.1;
+      display: flex;
+    
+      [class^=pb_tooltip_kit] {
+        justify-self: center;
+      }
+    
+      &[class*=_bottom] .icon {
+        @include icon-base;
+        top: $icon_size * 1.27;
+      }
+      &[class*=_top] .icon {
+        @include icon-base;
+        bottom: $icon_size * 1.27;
+      }
+      &[class*=_right] .icon {
+        left: $icon_size * 1.5;
+      }
+      &[class*=_left] [class^=pb_avatar_kit] {
+        padding-left: $icon_size / 2;
+      }
+    }
+  }
+}