playbook_ui 2.9.0 → 2.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b6c7dc11c38335138d659f925a534eb976a2c612f3ae5bc19577640e1cfc3ea
-  data.tar.gz: 19b251b77226a249bb7da7eb923ee198fa00b53d2e44e14d4f7f84e6102b401a
+  metadata.gz: 11ec65aa572925990ddc23d8c9521e99045750e0f967ef7732d54f003eaca22d
+  data.tar.gz: 1474fe089227a407b0cd6aebf4ca91d76796f82f8a8b9ee0dc6e959c446c2cbb
 SHA512:
-  metadata.gz: 89441d84f686920f6ed1d833b8b06e4324ff3af6de03ab9cd4b68c4e2a7b22c30719bb238ed183e65388e662d1b8e3e498e92d7c3f4647bfda3e79b18fda1874
-  data.tar.gz: 2720ae93d19c177cec30a544edc3b649ed9b593a52f805eb11263bcf2eef997d4eba36f1e0af7688a816f82c28273ac96ec34f7e6df80ce190750cc77f5d6ca1
+  metadata.gz: aaf2117516558be2dd79460a31c6068cf974dfa16b6a79dffd8c685181e3988aa7628778b38c3427782df349b7c41d5881808a328da83256e6c781ee3c076b50
+  data.tar.gz: ca26c3f6b7ed8c8a822068661c7169c739ac26c8b9e2a129588db90e9787bd07883d2e9cd4faaee6cdf78458a298c322feb951cb09a28afede5ba3d109c40f3a

data/README.md

@@ -1,6 +1,6 @@
 # Playbook Design System
 
-Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Developemnt teams at Power Home Remodeling, the largest home remodeler in the US.
+Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Development teams at Power Home Remodeling, the largest home remodeler in the US.
 
 ## Requirements
 

data/app/helpers/playbook/pb_doc_helper.rb

@@ -34,7 +34,11 @@ module Playbook
 
     def pb_kit_api(kit)
       kit_class_obj = get_class_name(kit)
-      @kit_api = kit_class_obj.instance_method(:initialize).parameters.map(&:last)
+      @kit_api = if kit_class_obj < Playbook::PbKit::Base
+                   kit_class_obj.instance_method(:initialize).parameters.map(&:last)
+                 else
+                   kit_class_obj.props.keys
+                 end
       render partial: "playbook/config/pb_kit_api"
     end
 

data/app/pb_kits/playbook/index.js

@@ -0,0 +1,73 @@
+// React Component JSX Imports from the React Kits
+import Avatar from "./pb_avatar/_avatar.jsx"
+import BarGraph from "./pb_bar_graph/_bar_graph.jsx"
+import Body from "./pb_body/_body.jsx"
+import Button from "./pb_button/_button.jsx"
+import Caption from "./pb_caption/_caption.jsx"
+import Card from "./pb_card/_card.jsx"
+import DashboardValue from "./pb_dashboard_value/_dashboard_value.jsx"
+import DateYearStacked from "./pb_date_year_stacked/_date_year_stacked.jsx"
+import DateRangeInline from "./pb_date_range_inline/_date_range_inline.jsx"
+import DistributionBar from "./pb_distribution_bar/_distribution_bar.jsx"
+import Icon from "./pb_icon/_icon.jsx"
+import Image from "./pb_image/_image.jsx"
+import Input from "./pb_input/_input.jsx"
+import LabelValue from "./pb_label_value/_label_value.jsx"
+import Layout from "./pb_layout/_layout.jsx"
+import LineGraph from "./pb_line_graph/_line_graph.jsx"
+import List from "./pb_list/_list.jsx"
+import Message from "./pb_message/_message.jsx"
+import OnlineStatus from "./pb_online_status/_online_status.jsx"
+import Table from "./pb_table/_table.jsx"
+import TimeStamp from "./pb_timestamp/_timestamp.jsx"
+import Title from "./pb_title/_title.jsx"
+import User from "./pb_user/_user.jsx"
+import VerticalNav from "./pb_vertical_nav/_vertical_nav.jsx"
+import Pill from "./pb_pill/_pill.jsx"
+import Currency from "./pb_currency/_currency.jsx"
+import Toggle from "./pb_toggle/_toggle.jsx"
+
+// Dashboard Settings
+import commonSettings from "./pb_dashboard/commonSettings"
+import lineGraphSettings from "./pb_line_graph/lineGraphSettings"
+import barGraphSettings from "./pb_bar_graph/barGraphSettings"
+import dashboardValueSettings from "./pb_dashboard_value/dashboardValueSettings"
+
+// Other JS/Plugins
+import pbChart from "./plugins/pb_chart_plugin"
+
+// All Exports for Consumption in Nitro
+export {
+  Avatar,
+  BarGraph,
+  Body,
+  Button,
+  Caption,
+  Card,
+  DashboardValue,
+  DateYearStacked,
+  DateRangeInline,
+  DistributionBar,
+  Icon,
+  Image,
+  Input,
+  LabelValue,
+  Layout,
+  LineGraph,
+  List,
+  Message,
+  OnlineStatus,
+  Table,
+  TimeStamp,
+  Title,
+  User,
+  VerticalNav,
+  Pill,
+  Currency,
+  Toggle,
+  commonSettings,
+  lineGraphSettings,
+  barGraphSettings,
+  dashboardValueSettings,
+  pbChart,
+}

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

@@ -128,3 +128,27 @@ WebpackerReact.setup (SectionSeparator);
 
 import * as Currency from "pb_currency/docs";
 WebpackerReact.setup (Currency);
+
+import * as FixedConfirmationToast from "pb_fixed_confirmation_toast/docs";
+WebpackerReact.setup (FixedConfirmationToast);
+
+import * as LoadingInline from "pb_loading_inline/docs";
+WebpackerReact.setup (LoadingInline);
+
+import * as Checkbox from "pb_checkbox/docs";
+WebpackerReact.setup (Checkbox);
+
+import * as HomeAddressStreet from "pb_home_address_street/docs";
+WebpackerReact.setup (HomeAddressStreet);
+
+import * as Badge from "pb_badge/docs";
+WebpackerReact.setup (Badge);
+
+import * as DateYearStacked from "pb_date_year_stacked/docs";
+WebpackerReact.setup (DateYearStacked);
+
+import * as DateRangeInline from "pb_date_range_inline/docs";
+WebpackerReact.setup (DateRangeInline);
+
+import * as DistributionBar from "pb_distribution_bar/docs";
+WebpackerReact.setup (DistributionBar);

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

@@ -38,3 +38,11 @@ import "./pb_stat_value.js";
 import "./pb_stat_change.js";
 import "./pb_section_separator.js";
 import "./pb_currency.js";
+import "./pb_fixed_confirmation_toast.js";
+import "./pb_loading_inline.js";
+import "./pb_checkbox.js";
+import "./pb_home_address_street.js";
+import "./pb_badge.js";
+import "./pb_date_year_stacked.js";
+import "./pb_date_range_inline.js";
+import "./pb_distribution_bar.js";

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

@@ -0,0 +1,4 @@
+import Badge from "pb_badge/_badge.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ Badge });

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

@@ -0,0 +1,4 @@
+import Checkbox from "pb_checkbox/_checkbox.jsx";
+import WebpackerReact from "webpacker-react";
+
+WebpackerReact.setup({ Checkbox });

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

@@ -0,0 +1,4 @@
+import DateRangeInline from "pb_date_range_inline/_date_range_inline.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ DateRangeInline });

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

@@ -0,0 +1,4 @@
+import DateYearStacked from "pb_date_year_stacked/_date_year_stacked.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ DateYearStacked });

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

@@ -0,0 +1,4 @@
+import DistributionBar from "pb_distribution_bar/_distribution_bar.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ DistributionBar });

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

@@ -0,0 +1,4 @@
+import FixedConfirmationToast from "pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ FixedConfirmationToast });

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

@@ -0,0 +1,4 @@
+import HomeAddressStreet from "pb_home_address_street/_home_address_street.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ HomeAddressStreet });

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

@@ -0,0 +1,4 @@
+import LoadingInline from "pb_loading_inline/_loading_inline.jsx";
+
+import WebpackerReact from "webpacker-react";
+WebpackerReact.setup({ LoadingInline });

data/app/pb_kits/playbook/packs/site_styles/_kit_style_index.scss

@@ -39,3 +39,11 @@
 @import '../../pb_stat_change/stat_change';
 @import '../../pb_section_separator/section_separator';
 @import '../../pb_currency/currency';
+@import '../../pb_fixed_confirmation_toast/fixed_confirmation_toast';
+@import '../../pb_loading_inline/loading_inline';
+@import '../../pb_home_address_street/home_address_street';
+@import '../../pb_badge/badge';
+@import '../../pb_checkbox/checkbox';
+@import '../../pb_date_year_stacked/date_year_stacked';
+@import '../../pb_date_range_inline/date_range_inline';
+@import '../../pb_distribution_bar/distribution_bar';

data/app/pb_kits/playbook/pb_badge/_badge.html.erb

@@ -0,0 +1,6 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname(object.kit_class)) do %>
+  <span><%= object.text %></span>
+<% end %>

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -0,0 +1,34 @@
+/* @flow */
+/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
+
+import React from 'react'
+import classnames from 'classnames'
+
+type BadgeProps = {
+  className?: String,
+  id?: String,
+  text?: String,
+  variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral',
+  rounded?: Boolean
+}
+const Badge = ({
+  className,
+  id,
+  text,
+  variant = 'neutral',
+  rounded = false
+}: BadgeProps) => {
+  const roundedValue = rounded == true ? "rounded" : ""
+  const css = classnames([
+    `pb_badge_kit_${variant}_${roundedValue}`,
+    className,
+  ])
+
+  return (
+    <div id={id} className={css}>
+        <span>{text}</span>
+    </div>
+  )
+}
+
+export default Badge

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -0,0 +1,37 @@
+@import "../tokens/border_radius";
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/spacing";
+@import "../tokens/typography";
+
+[class^=pb_badge_kit] {
+  $pb_badge_height: 18px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: $border_rad_light;
+  padding: 0 $space_xs / 2;
+  border: 1px solid $white;
+
+  span {
+    transform: translateY(1px);
+    display: inline-block;
+    font-size: $font_smaller - 2;
+    font-weight: $boldest;
+  }
+
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      background: rgba($color_value, $opacity-1);
+      color: $color_value;
+    }
+  }
+
+  &[class*="rounded"] {
+    height: $pb_badge_height;
+    min-height: $pb_badge_height;
+    min-width: $pb_badge_height;
+    border-radius: $pb_badge_height / 2;
+  }
+}

data/app/pb_kits/playbook/pb_badge/badge.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbBadge
+    class Badge < Playbook::PbKit::Base
+      PROPS = %i[
+        configured_classname
+        configured_data
+        configured_id
+        configured_text
+        configured_variant
+        configured_rounded
+      ].freeze
+
+      def initialize(classname: default_configuration,
+                     data: default_configuration,
+                     id: default_configuration,
+                     text: default_configuration,
+                     variant: default_configuration,
+                     rounded: default_configuration)
+        self.configured_classname = classname
+        self.configured_data = data
+        self.configured_id = id
+        self.configured_text = text
+        self.configured_variant = variant
+        self.configured_rounded = rounded
+      end
+
+      def text
+        default_value(configured_text, "")
+      end
+
+      def rounded
+        true_value(configured_rounded, "rounded", nil)
+      end
+
+      def variant
+        variant_options = %w[success warning error info neutral primary]
+        one_of_value(configured_variant, variant_options, "neutral")
+      end
+
+      def kit_class
+        kit_options = [
+          "pb_badge_kit",
+          variant,
+          rounded,
+        ]
+        kit_options.compact.join("_")
+      end
+
+      def to_partial_path
+        "pb_badge/badge"
+      end
+
+    private
+
+      DEFAULT = Object.new
+      private_constant :DEFAULT
+      def default_configuration
+        DEFAULT
+      end
+      attr_accessor(*PROPS)
+    end
+  end
+end

data/app/pb_kits/playbook/pb_badge/docs/_badge_colors.html.erb

@@ -0,0 +1,107 @@
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "primary",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "primary"
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "primary",
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "success",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "success"
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "success"
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "warning",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "warning"
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "warning"
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "error",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "error"
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "error"
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "info",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "info"
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "info"
+  }) %>
+</div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "+1",
+    variant: "neutral",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+4",
+    variant: "neutral"
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "+1000",
+    variant: "neutral"
+  }) %>
+</div>