playbook_ui 2.9.9 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce4e8884441a2a18b3dfb1d5e6ad3d39c1d62445cc103a084bd7963038763b47
-  data.tar.gz: 69d4ddeba0f3cabd308908ef4eee403fe705291f144ccf8238e78cb0e24aa29a
+  metadata.gz: a5c588c16151accc6e7e39a6cc6ab93d458fd77d8be2c0af8f2aac9159362473
+  data.tar.gz: 5ab3e3623095f1c32f8fa173186364df352733cda08867438c994b3bfd418eb0
 SHA512:
-  metadata.gz: cfe8e4dcc247ea4c4934ea29297a0c4daa3bebf2a456d2d064dee847f1028a10e262b6ccbeafcd986c5d9a1ac75550de632165c9ab53dfecf215fe90dccea9ad
-  data.tar.gz: 3bdad6a98ef95b44e8985100f9c9530a56e60dab89bc530a31b0db80e641631e93c7528787a57ef6ac3dfc44208b6a753fd05caaa7cfc2e55638f9786eb1c243
+  metadata.gz: 3ea382d89bcec99c3440ccac5dbae6028127e9e48ac08e7d6884a090c611cdb788903eb1b0aac554f832c19074f6775c8e95d27d71cd70fdca7759fc11d55b41
+  data.tar.gz: 22c10a616f5eaebc260a94ac11c3564002802168200b002c94a45e6d374b57be3a291e78e129e3710d3b99c62a2b9ffb22551c1f9b390a56dd935dfde7128936

data/app/pb_kits/playbook/_playbook.scss

@@ -1,11 +1,13 @@
-@import 'pb_avatar/avatar';
-@import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import "pb_body/body";
 @import "pb_button/button";
 @import "pb_caption/caption";
 @import "pb_card/card";
+@import "pb_title/title";
+@import 'pb_avatar/avatar';
+@import 'pb_badge/badge';
+@import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
+@import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
@@ -15,6 +17,7 @@
 @import 'pb_date_year_stacked/date_year_stacked';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
+@import 'pb_form/form';
 @import 'pb_hashtag/hashtag';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
@@ -29,6 +32,7 @@
 @import 'pb_loading_inline/loading_inline';
 @import 'pb_message/message';
 @import 'pb_multiple_users/multiple_users';
+@import 'pb_multiple_users/multiple_users';
 @import 'pb_nav/nav';
 @import 'pb_online_status/online_status';
 @import 'pb_person/person';
@@ -37,15 +41,17 @@
 @import 'pb_progress_pills/progress_pills';
 @import 'pb_progress_simple/progress_simple';
 @import 'pb_section_separator/section_separator';
+@import 'pb_select/select';
+@import 'pb_selectable_card/selectable_card';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';
 @import 'pb_stat_value/stat_value';
 @import 'pb_table/table';
 @import 'pb_text_input/text_input';
+@import 'pb_textarea/textarea';
 @import 'pb_time/time';
 @import 'pb_timestamp/timestamp';
-@import "pb_title/title";
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';

data/app/pb_kits/playbook/index.js

@@ -7,9 +7,11 @@ import Button from "./pb_button/_button.jsx"
 import Caption from "./pb_caption/_caption.jsx"
 import Card from "./pb_card/_card.jsx"
 import Checkbox from "./pb_checkbox/_checkbox.jsx"
+import CircleIconButton from "./pb_circle_icon_button/_circle_icon_button.jsx"
 import Contact from "./pb_contact/_contact.jsx"
 import Currency from "./pb_currency/_currency.jsx"
 import DashboardValue from "./pb_dashboard_value/_dashboard_value.jsx"
+import Date from "./pb_date/_date.jsx"
 import DateRangeInline from "./pb_date_range_inline/_date_range_inline.jsx"
 import DateYearStacked from "./pb_date_year_stacked/_date_year_stacked.jsx"
 import DistributionBar from "./pb_distribution_bar/_distribution_bar.jsx"
@@ -37,11 +39,14 @@ import Pill from "./pb_pill/_pill.jsx"
 import ProgressPills from "./pb_progress_pills/_progress_pills.jsx"
 import ProgressSimple from "./pb_progress_simple/_progress_simple.jsx"
 import SectionSeparator from "./pb_section_separator/_section_separator.jsx"
+import Select from "./pb_select/_select.jsx"
+import SelectableCard from "./pb_selectable_card/_selectable_card.jsx"
 import Source from "./pb_source/_source.jsx"
 import StarRating from "./pb_star_rating/_star_rating.jsx"
 import StatChange from "./pb_stat_change/_stat_change.jsx"
 import StatValue from "./pb_stat_value/_stat_value.jsx"
 import Table from "./pb_table/_table.jsx"
+import Textarea from "./pb_textarea/_textarea.jsx"
 import TextInput from "./pb_text_input/_text_input.jsx"
 import Time from "./pb_time/_time.jsx"
 import TimeStamp from "./pb_timestamp/_timestamp.jsx"
@@ -71,12 +76,14 @@ export {
   Caption,
   Card,
   Checkbox,
+  CircleIconButton,
   commonSettings,
   Contact,
   Currency,
   DashboardValue,
   dashboardValueSettings,
   dataColors,
+  Date,
   DateRangeInline,
   DateYearStacked,
   DistributionBar,
@@ -106,11 +113,14 @@ export {
   ProgressPills,
   ProgressSimple,
   SectionSeparator,
+  Select,
+  SelectableCard,
   Source,
   StarRating,
   StatChange,
   StatValue,
   Table,
+  Textarea,
   TextInput,
   Time,
   TimeStamp,

data/app/pb_kits/playbook/kits/pb_circle_icon_button.js

@@ -0,0 +1,4 @@
+import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ CircleIconButton });

data/app/pb_kits/playbook/kits/pb_select.js

@@ -0,0 +1,4 @@
+import Select from "../pb_select/_select.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Select });

data/app/pb_kits/playbook/kits/pb_selectable_card.js

@@ -0,0 +1,4 @@
+import SelectableCard from "../pb_selectable_card/_selectable_card.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ SelectableCard });

data/app/pb_kits/playbook/kits/pb_textarea.js

@@ -0,0 +1,4 @@
+import Textarea from "../pb_textarea/_textarea.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Textarea });

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

@@ -20,6 +20,7 @@ import * as button from "pb_button/docs";
 import * as caption from "pb_caption/docs";
 import * as card from "pb_card/docs";
 import * as Checkbox from "pb_checkbox/docs";
+import * as CircleIconButton from "pb_circle_icon_button/docs";
 import * as Contact from "pb_contact/docs";
 import * as Currency from "pb_currency/docs";
 import * as DashboardValue from "pb_dashboard_value/docs";
@@ -51,11 +52,14 @@ 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 SectionSeparator from "pb_section_separator/docs";
+import * as Select from "pb_select/docs";
+import * as SelectableCard from "pb_selectable_card/docs";
 import * as Source from "pb_source/docs";
 import * as StarRating from "pb_star_rating/docs";
 import * as StatChange from "pb_stat_change/docs";
 import * as StatValue from "pb_stat_value/docs";
 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 Timestamp from "pb_timestamp/docs";
@@ -74,6 +78,7 @@ WebpackerReact.setup (button);
 WebpackerReact.setup (caption);
 WebpackerReact.setup (card);
 WebpackerReact.setup (Checkbox);
+WebpackerReact.setup (CircleIconButton);
 WebpackerReact.setup (Contact);
 WebpackerReact.setup (Currency);
 WebpackerReact.setup (DashboardValue);
@@ -105,11 +110,14 @@ WebpackerReact.setup (Pill);
 WebpackerReact.setup (ProgressPills);
 WebpackerReact.setup (ProgressSimple);
 WebpackerReact.setup (SectionSeparator);
+WebpackerReact.setup (Select);
+WebpackerReact.setup (SelectableCard);
 WebpackerReact.setup (Source);
 WebpackerReact.setup (StarRating);
 WebpackerReact.setup (StatChange);
 WebpackerReact.setup (StatValue);
 WebpackerReact.setup (table);
+WebpackerReact.setup (Textarea);
 WebpackerReact.setup (TextInput);
 WebpackerReact.setup (Time);
 WebpackerReact.setup (Timestamp);

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

@@ -6,6 +6,7 @@ import "../kits/pb_button.js";
 import "../kits/pb_caption.js";
 import "../kits/pb_card.js";
 import "../kits/pb_checkbox.js";
+import "../kits/pb_circle_icon_button.js";
 import "../kits/pb_contact.js";
 import "../kits/pb_currency.js";
 import "../kits/pb_dashboard_value.js";
@@ -36,12 +37,15 @@ import "../kits/pb_pill.js";
 import "../kits/pb_progress_pills.js";
 import "../kits/pb_progress_simple.js";
 import "../kits/pb_section_separator.js";
+import "../kits/pb_select.js";
+import "../kits/pb_selectable_card.js";
 import "../kits/pb_source.js";
 import "../kits/pb_star_rating.js";
 import "../kits/pb_stat_change.js";
 import "../kits/pb_stat_value.js";
 import "../kits/pb_table.js";
 import "../kits/pb_text_input.js";
+import "../kits/pb_textarea.js";
 import "../kits/pb_time.js";
 import "../kits/pb_timestamp.js";
 import "../kits/pb_title.js";
@@ -50,5 +54,3 @@ import "../kits/pb_title_detail.js";
 import "../kits/pb_toggle.js";
 import "../kits/pb_user.js";
 import "../kits/pb_user_badge.js";
-
-

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

@@ -75,4 +75,4 @@ const Avatar = ({
   )
 }
 
-export default Avatar
+export default Avatar

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -21,8 +21,11 @@ $pb_body_status: (
   line-height: $lh_tight;
   color: $color;
   font-size: $text_default;
+  font-weight: $regular;
+  font-family: $font-family-base;
 }
 
+
 // Colors ======================
 @mixin pb_body_light {
   @include pb_body($text_lt_light);

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -15,6 +15,7 @@ type ButtonPropTypes = {
   fixedWidth?: Boolean,
   fullWidth?: Boolean,
   icon?: String,
+  id?: String,
   loading?: Boolean,
   newWindow?: Boolean,
   onClick?: EventHandler,
@@ -68,6 +69,7 @@ const Button = (props: ButtonPropTypes) => {
     children,
     className,
     icon = null,
+    id,
     loading = false,
     onClick = () => {},
     link = null,
@@ -98,6 +100,7 @@ const Button = (props: ButtonPropTypes) => {
         {...buttonAria}
         className={css}
         href={link}
+        id={id}
         target={newWindow ? '_blank' : null}>
         <If condition={loading}>{loadingIcon}</If>
         {content}
@@ -106,6 +109,7 @@ const Button = (props: ButtonPropTypes) => {
       <button
         {...buttonAria}
         className={css}
+        id={id}
         onClick={onClick}
         type={htmlType}
         value={value}>

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -2,6 +2,8 @@
 @import "../tokens/border_radius";
 @import "../tokens/shadows";
 @import "../tokens/colors";
+@import "../tokens/transition";
+@import "../tokens/animation-curves";
 @import "child_kits/card_body";
 
 $pb_card_border_width: 1px;
@@ -9,21 +11,63 @@ $pb_card_border_radius: $border_rad_heavier;
 $pb_card_highlight_colors: map-merge($status_colors, $product_colors);
 $pb_card_highlight_size: 4px;
 
-[class^=pb_card_kit] {
+@mixin pb_card_selected($border_color: $primary) {
+  border-color: $border_color;
+  border-width: $pb_card_border_width * 2;
+}
+
+@mixin pb_card_selected_dark {
+  @include pb_card_selected($primary_action);
+}
+
+@mixin pb_card($background: $card_light, $border_color: $border_light) {
   position: relative;
   display: flex;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
-  background-color: $card_light;
+  background-color: $background;
   background-clip: border-box;
-  border: $pb_card_border_width solid $border_light;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_color;
   border-radius: $pb_card_border_radius;
-  transition: all 0.3s ease;
+  transition-property: all;
+  transition-duration: $transition_short;
+  transition-timing-function: $easeIn;
+
+  @each $name, $shadow in $box_shadows {
+    &[class*=_#{$name}] {
+      box-shadow: $shadow;
+    }
+  }
+}
+
+@mixin pb_card_dark {
+  @include pb_card($card_dark, $border_dark);
+}
+
+@mixin pb_card_highlight($width, $height, $background){
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: $width;
+  height: $height;
+  background: $background;
+  z-index: 10;
+}
+
+[class^=pb_card_kit] {
+  @include pb_card;
 
   &[class*=_selected] {
-    border-color: $primary;
-    border-width: $pb_card_border_width * 2;
+    @include pb_card_selected;
+  }
+  &[class*=_dark] {
+    &[class*=_selected] {
+      @include pb_card_selected_dark;
+    }
   }
 
   @each $name, $shadow in $box_shadows {
@@ -32,17 +76,6 @@ $pb_card_highlight_size: 4px;
     }
   }
 
-  @mixin pb_card_highlight($width, $height, $background){
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $width;
-    height: $height;
-    background: $background;
-    z-index: 10;
-  }
-
   &[class*=_highlight] {
     overflow: hidden;
   }

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.html.erb

@@ -0,0 +1,10 @@
+<%= content_tag(:div,
+  id: object.id,
+  data: object.data,
+  class: object.classname) do %>
+
+  <%= pb_rails("button", props: {variant: object.variant, disabled: object.disabled, dark: object.dark}) do %>
+    <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
+  <% end %>
+
+<% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import {Button, Icon} from "../"
+
+type CircleIconButtonProps = {
+  variant?: 'primary' | 'secondary' | 'link',
+  disabled?: Boolean,
+  dark?: Boolean,
+  className?: String,
+  icon: String,
+  id?: String,
+};
+
+const CircleIconButton = (props: CircleIconButtonProps) => {
+  const {
+    variant,
+    disabled,
+    icon,
+    dark
+  } = props
+
+  return (
+    <div className={'pb_circle_icon_button_kit'}>
+      <Button text={null} variant={variant} disabled={disabled} dark={dark}>
+        <Icon fixedWidth icon={icon} />
+      </Button>
+    </div>
+  );
+}
+
+export default CircleIconButton;

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -0,0 +1,32 @@
+@import "../pb_button/button";
+@import "../pb_button/button_mixins";
+
+$pb_button_styles: [
+  "primary",
+  "secondary",
+  "link",
+];
+
+@mixin pb_circle_icon_button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: $pb_button_size;
+  height: $pb_button_size;
+  border-radius: $pb_button_size/2;
+  line-height: $pb_button_size;
+  flex-basis: $pb_button_size;
+  min-width: $pb_button_size;
+  padding: 0;
+}
+
+[class^=pb_circle_icon_button_kit] {
+  @each $style in $pb_button_styles {
+    [class^=pb_button_kit][class*=_#{$style}] {
+      @include pb_circle_icon_button;
+    }
+  }
+}