playbook_ui 6.0.1.pre.alpha6 → 6.1.0.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3d15e1dfbbf4ca480142d10ee4e6da90644a8e9b95c55948d5985626885c4a3b
-  data.tar.gz: a1cdc436d5c1c262a37ed465b6de00c1efe27663af599e641acaf871a0a04951
+  metadata.gz: 935fd3d3a764d02be6807cbc6f3271f6771865a0d1c4e33bfc4dd078e3dc93af
+  data.tar.gz: 6cb1089a51ef34a15ea142fb23b8e9c705c647a811bb1f945acfbc47e139228a
 SHA512:
-  metadata.gz: 3712c53539b7900f80549f6b57be230538b59f32ef5559d6b1de3327a9da63d8d9dc9ca333d3286c648cdb8605dd482bc45d8ed445b3d7609b42e13fef053d7b
-  data.tar.gz: 1bcb503b7574ec32dc420e84c99e0c5c1ed1bd1b720a54ef65a9b7b2bae7c77962dd660208e65c8672151119f08ac4fc6344dc06091eb0df8b029df136b04cae
+  metadata.gz: 721dab5867c8db09f78c40ea8b7bc3ed070437e9a3241299b9a1a46195a443546eb4526a12807a290b67df2e19bf703dd2b617f11b5be5796ad452f929bc09e6
+  data.tar.gz: 27d738f1736e7f516cb7a4f23d95189d6448628c68cee6ba29f230b656b7058ded78f603fd7d64ee4563bd733163e4165e4197206d72c7b85c4485e4de77e57d

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,6 @@
 @import "pb_body/body";
 @import "pb_button/button";
+@import 'pb_button_toolbar/button_toolbar';
 @import "pb_caption/caption";
 @import "pb_card/card";
 @import "pb_title/title";
@@ -14,6 +15,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

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

@@ -10,6 +10,7 @@ kits:
   - badge
   - buttons:
     - button
+    - button_toolbar
     - circle_icon_button
   - card
   - checkbox
@@ -25,6 +26,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -5,6 +5,7 @@ export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
 export Button from './pb_button/_button.jsx'
+export ButtonToolbar from './pb_button_toolbar/_button_toolbar.jsx'
 export Caption from './pb_caption/_caption.jsx'
 export Card from './pb_card/_card.jsx'
 export Checkbox from './pb_checkbox/_checkbox.jsx'
@@ -13,6 +14,7 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -90,6 +92,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

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

@@ -19,6 +19,7 @@ import * as Badge from 'pb_badge/docs'
 import * as BarGraph from 'pb_bar_graph/docs'
 import * as Body from 'pb_body/docs'
 import * as Button from 'pb_button/docs'
+import * as ButtonToolbar from 'pb_button_toolbar/docs'
 import * as Caption from 'pb_caption/docs'
 import * as Card from 'pb_card/docs'
 import * as Checkbox from 'pb_checkbox/docs'
@@ -27,6 +28,7 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -98,6 +100,7 @@ WebpackerReact.setup({
   ...BarGraph,
   ...Body,
   ...Button,
+  ...ButtonToolbar,
   ...Caption,
   ...Card,
   ...Checkbox,
@@ -106,6 +109,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,
@@ -170,3 +174,4 @@ WebpackerReact.setup({
   ...UserBadge,
   ...WeekdayStacked,
 })
+

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+      <%= !object.children.nil? ? capture(&object.children) : object.text %>
+<% end %>

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx

@@ -0,0 +1,52 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+
+import { globalProps } from '../utilities/globalProps.js'
+
+type ButtonToolbarProps = {
+  aria?: object,
+  children?: Array<React.ReactChild>,
+  className?: String,
+  connected?: Boolean,
+  data?: object,
+  id?: String,
+  onClick?: EventHandler,
+  orientation?: "horizontal" | "vertical",
+  text?: String,
+  variant?: String,
+}
+
+const ButtonToolbar  = (props: ButtonToolbarProps) => {
+  const {
+    aria = {},
+    children,
+    className,
+    connected = false,
+    data = {},
+    id,
+    orientation = 'horizontal',
+    text,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+
+  const classes = classnames(buildCss('pb_button_toolbar_kit', orientation, { connected: connected }), className, globalProps(props))
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {children || text}
+    </div>
+  )
+}
+
+export default ButtonToolbar

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -0,0 +1,101 @@
+@import "../pb_button/button";
+@import "../pb_button/button_mixins";
+@import "../tokens/colors";
+
+[class^=pb_button_toolbar]{
+    // Orientation =========
+    &[class*=_horizontal]  {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+  
+      & > [class^=pb_button]  {
+        margin-right: $space-xs;
+
+        &:hover {
+          background-color:darken($royal, 20%);
+        }
+
+        &[class*=secondary] {
+          &:hover {
+            background-color:rgba($primary_action, $opacity_3)
+          }
+        }
+  
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+    &[class*=_vertical]  {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+  
+      & > [class^=pb_button]  {
+        display: block;
+        flex-grow: 1;
+        flex-shrink: 1;
+        flex-basis: auto;
+        width: 100%;
+        margin-bottom: $space-xs;
+
+        &:hover {
+          background-color:darken($royal, 20%);
+        }
+
+        &[class*=secondary] {
+          &:hover {
+            background-color:rgba($primary_action, $opacity_3)
+          }
+        }
+  
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    // Connect =============
+    &[class*=_connected]  {
+      & > [class^=pb_button]  {
+        margin: 0;
+      }
+  
+      &[class*=_horizontal] {
+        & > [class^=pb_button]  {
+          &:not(:last-child){
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+            border-right-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+          &:not(:first-child){
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            border-left-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+        }
+      }
+  
+      &[class*=_vertical] {
+        & > [class^=pb_button]  {
+          &:not(:last-child){
+            border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+          &:not(:first-child){
+            border-top-right-radius: 0;
+            border-top-left-radius: 0;
+            border-top-width: 0;
+            border: 1px solid #e1e4e8;
+          }
+        }
+      }
+    }
+  }

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbButtonToolbar
+    class ButtonToolbar
+      include Playbook::Props
+
+      partial "pb_button_toolbar/button_toolbar"
+
+      prop :connected, type: Playbook::Props::Boolean, default: false
+
+      prop :orientation, type: Playbook::Props::Enum,
+                         values: %w[horizontal vertical],
+                         default: "horizontal"
+
+      prop :text
+
+      def classname
+        generate_classname("pb_button_toolbar_kit", orientation, connected_class)
+      end
+
+    private
+
+      def connected_class
+        connected == true ? "connected" : nil
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
+  <%= pb_rails("button", props: { text: "Field" }) %>
+  <%= pb_rails("button", props: { text: "Retail"}) %>
+  <%= pb_rails("button", props: { text: "Event"}) %>
+  <%= pb_rails("button", props: { text: "Training"}) %>
+  <%= pb_rails("button", props: { text: "Not Working"}) %>
+<% end %>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarDefault = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="horizontal"
+    >
+      <Button
+          text="Field"
+      />
+      <Button
+          text="Retail"
+      />
+      <Button
+          text="Event"
+      />
+      <Button
+          text="Training"
+      />
+      <Button
+          text="Not Working"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarDefault

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("button_toolbar", props: { orientation: "horizontal", connected: true }) do %>
+    <%= pb_rails("button", props: { text: "Field", variant: "secondary" }) %>
+    <%= pb_rails("button", props: { text: "Retail", variant: "secondary"}) %>
+    <%= pb_rails("button", props: { text: "Event", variant: "secondary"}) %>
+    <%= pb_rails("button", props: { text: "Training", variant: "secondary"}) %>
+    <%= pb_rails("button", props: { text: "Not Working", variant: "secondary"}) %>
+  <% end %>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarSecondary = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="horizontal"
+    >
+      <Button
+          text="Field"
+          variant="secondary"
+      />
+      <Button
+          text="Retail"
+          variant="secondary"
+      />
+      <Button
+          text="Event"
+          variant="secondary"
+      />
+      <Button
+          text="Training"
+          variant="secondary"
+      />
+      <Button
+          text="Not Working"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarSecondary

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.html.erb

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("button_toolbar", props: { orientation: "vertical", connected: true }) do %>
+      <%= pb_rails("button", props: { text: "Field" }) %>
+      <%= pb_rails("button", props: { text: "Retail"}) %>
+      <%= pb_rails("button", props: { text: "Event"}) %>
+      <%= pb_rails("button", props: { text: "Training"}) %>
+      <%= pb_rails("button", props: { text: "Not Working"}) %>
+    <% end %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarVertical = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="vertical"
+    >
+      <Button
+          text="Field"
+      />
+      <Button
+          text="Retail"
+      />
+      <Button
+          text="Event"
+      />
+      <Button
+          text="Training"
+      />
+      <Button
+          text="Not Working"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarVertical

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <div>
+    <%= pb_rails("button_toolbar", props: { orientation: "vertical", connected: true }) do %>
+      <%= pb_rails("button", props: { text: "Field", variant: "secondary" }) %>
+      <%= pb_rails("button", props: { text: "Retail", variant: "secondary" }) %>
+      <%= pb_rails("button", props: { text: "Event", variant: "secondary" }) %>
+      <%= pb_rails("button", props: { text: "Training", variant: "secondary" }) %>
+      <%= pb_rails("button", props: { text: "Not Working", variant: "secondary" }) %>
+    <% end %>
+  </div>
+</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Button, ButtonToolbar } from '../..'
+
+const ButtonToolbarVerticalSecondary = () => (
+  <div>
+    <ButtonToolbar
+        connected
+        orientation="vertical"
+    >
+      <Button
+          text="Field"
+          variant="secondary"
+      />
+      <Button
+          text="Retail"
+          variant="secondary"
+      />
+      <Button
+          text="Event"
+          variant="secondary"
+      />
+      <Button
+          text="Training"
+          variant="secondary"
+      />
+      <Button
+          text="Not Working"
+          variant="secondary"
+      />
+    </ButtonToolbar>
+  </div>
+)
+
+export default ButtonToolbarVerticalSecondary