playbook_ui 4.15.1.alpha1 → 4.18.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1eaec88d82c53a274c0d92dd7d6a69e63ba22589107395a1cdc0935806ceef8
-  data.tar.gz: 68fede97efa40f94dee01360bd6f29f3121969d5e2190c9d80b51b3531951ef1
+  metadata.gz: e66952518f8aeb3810ab2ac245ea551a42052cc47c3c28f2848540ac4ee38e76
+  data.tar.gz: fb1871dbdfdeb396d4d547888546ba362451934bacb7a1f7942a7817484e4ca6
 SHA512:
-  metadata.gz: a0f5bf6be6bd1160d6fd1eeb54e806348aa3178470574ef4a18327826e40f145d7cc6af01937b2cf612fd5f5d26f3a7c0805ae896490ab1929c2ef581afba46e
-  data.tar.gz: 60a66f8d413244e10d2187c5f7c1465e5310154ddbeb82d630c2fd5b7614fb2a3fd3d4730b501a538f4ad18c26b0a599d2c262cb15410d67cbc712ed33d4e8c9
+  metadata.gz: c8385b878f9b733bcbe1604cb35fdad66ada9648ab439c0b5145fe6dc4776d8d90e7a8fa30f4fe6fe8f981767f71df80733996422bd82eafcfb76ea318a53e5f
+  data.tar.gz: 6903d4fa3646a0af79c51130b6d196a340e2ecf16cd078f7488bd93cbc73ac65869ad942e6bf2248dc3ac43a9b4d832963eb029384f21d9af4e707271af8bc14

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,9 +4,11 @@
 @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';
+@import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
@@ -15,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';
@@ -49,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';
@@ -61,14 +67,17 @@
 @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';
 @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

@@ -1,7 +1,9 @@
 samples:
   - dashboards
+  - registration
 kits:
   - avatar
+  - avatar_action_button
   - badge
   - buttons:
     - button
@@ -13,6 +15,8 @@ kits:
     - legend
     - line_graph
     - distribution_bar
+    - circle_chart
+
   - filter
   - fixed_confirmation_toast
   - flex
@@ -23,6 +27,8 @@ kits:
     - radio
     - select
     - selectable_card
+    - selectable_card_icon
+    - selectable_icon
     - text_input
     - textarea
     - typeahead
@@ -45,11 +51,14 @@ kits:
   - popover
   - progress_pills
   - progress_simple
+  - progress_step
   - section_separator
   - source
   - star_rating
   - stat_change
   - table
+  - timeline
+  - 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'
@@ -65,11 +70,13 @@ 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 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 +93,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'
@@ -75,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'
@@ -88,6 +93,7 @@ import * as WeekdayStacked from 'pb_weekday_stacked/docs'
 
 WebpackerReact.setup({
   ...Avatar,
+  ...AvatarActionButton,
   ...Badge,
   ...BarGraph,
   ...Body,
@@ -137,10 +143,13 @@ WebpackerReact.setup({
   ...Pill,
   ...ProgressPills,
   ...ProgressSimple,
+  ...ProgressStep,
   ...Radio,
   ...SectionSeparator,
   ...Select,
   ...SelectableCard,
+  ...SelectableIcon,
+  ...SelectableCardIcon,
   ...Source,
   ...StarRating,
   ...StatChange,
@@ -149,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