playbook_ui 4.15.0 → 4.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d06b43573e33c771eb3617100802fa3e8ad15bf58f7037c233725df32d4e447
-  data.tar.gz: 005256edb667970f313898e57ede8d2f50cbe9222fd99007a318808e075f3e23
+  metadata.gz: be9bba608156b09d59f0fce484b089d45895fbc8d8c899f002de676cbe8754fa
+  data.tar.gz: f356fb9ccc68b15659839bd865d9e603d7df902e4bbbbda1a219900d389a73b7
 SHA512:
-  metadata.gz: 33b0a8f35f696aed191bae44c33aa4686864ba89ac73473b88cd749e30d6cc792a7d4fedff7b413857b7ddd3c22959b68df5b34884c0ffe92e6ec319b0af8c2d
-  data.tar.gz: 1070e81eb6faefd83fe85fa725534a8d5ad2ee16f17fb1b9b920433d045a75e09040a85ac64f33c3789d89de1b4dbb332355950f0289914a9acd65a6b8dc19e7
+  metadata.gz: caf7accc56bc9ad9bd611ab68315ea0386b85673a7143cfdb546aa0c15fc8f62d58ce76832fa0ffc1766f07fc1254b160709563450a3b4a1ea78d8eb5237763f
+  data.tar.gz: d599aeacd3127cdaaa8aca96cfe98216d75528b3ff8fe8cb4ecd0e43db8772c53097fb4039687827c8305032b4cf789ef0ca80bf091e3b980896c965f0578284

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';
@@ -55,6 +57,8 @@
 @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';
@@ -63,6 +67,7 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
+@import 'pb_timeline/timeline';
 @import 'pb_time_range_inline/time_range_inline';
 @import 'pb_timestamp/timestamp';
 @import 'pb_title_count/title_count';
@@ -72,6 +77,7 @@
 @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

@@ -1,8 +1,9 @@
 samples:
   - dashboards
-  - something
+  - registration
 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
@@ -54,6 +57,7 @@ kits:
   - star_rating
   - stat_change
   - table
+  - timeline
   - tooltip
   - typography:
     - body

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'
@@ -53,10 +54,13 @@ 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,6 +70,7 @@ export TableRow from './pb_table/_table_row.jsx'
 export Textarea from './pb_textarea/_textarea.jsx'
 export TextInput from './pb_text_input/_text_input.jsx'
 export Time from './pb_time/_time.jsx'
+export Timeline from './pb_timeline/_timeline.jsx'
 export TimeStacked from './pb_time_stacked/_time_stacked.jsx'
 export Timestamp from './pb_timestamp/_timestamp.jsx'
 export TimeRangeInline from './pb_time_range_inline/_time_range_inline.jsx'

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'
@@ -68,6 +69,8 @@ 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'
@@ -76,6 +79,7 @@ import * as Table from 'pb_table/docs'
 import * as Textarea from 'pb_textarea/docs'
 import * as TextInput from 'pb_text_input/docs'
 import * as Time from 'pb_time/docs'
+import * as Timeline from 'pb_timeline/docs'
 import * as TimeStacked from 'pb_time_stacked/docs'
 import * as Timestamp from 'pb_timestamp/docs'
 import * as TimeRangeInline from 'pb_time_range_inline/docs'
@@ -89,6 +93,7 @@ import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
 WebpackerReact.setup({
   ...Avatar,
+  ...AvatarActionButton,
   ...Badge,
   ...BarGraph,
   ...Body,
@@ -143,6 +148,8 @@ WebpackerReact.setup({
   ...SectionSeparator,
   ...Select,
   ...SelectableCard,
+  ...SelectableIcon,
+  ...SelectableCardIcon,
   ...Source,
   ...StarRating,
   ...StatChange,
@@ -151,6 +158,7 @@ WebpackerReact.setup({
   ...Textarea,
   ...TextInput,
   ...Time,
+  ...Timeline,
   ...TimeStacked,
   ...Timestamp,
   ...TimeRangeInline,

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

@@ -11,5 +11,7 @@ import WebpackerReact from 'webpacker-react'
 // Generated file from kit generator.
 
 import Dashboards from '../../../views/playbook/samples/dashboards/index.jsx'
+import Registration from '../../../views/playbook/samples/registration/index.jsx'
 
 WebpackerReact.setup({ Dashboards })
+WebpackerReact.setup({ Registration })

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,33 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    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,81 @@
+/* @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,
+  id?: String,
+  imageUrl?: String,
+  linkUrl?: String,
+  name?: String,
+  onClick?: String,
+  placement?: String,
+  size?: String,
+}
+
+const AvatarActionButton = ({
+  action = 'add',
+  aria = {},
+  className,
+  data = {},
+  id,
+  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)}
+        id={id}
+    >
+      <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;
+      }
+    }
+  }
+}