playbook_ui 4.18.1.pre.alpha1 → 5.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2089dad07588097cb7bf94e0c7915a97e1bcf3f2029c3dc8d77036ea6de0a74b
-  data.tar.gz: 767d1abd51a803e43d216ef1946b82b235f5c7a28fe5b1a3f38e245fff9e8918
+  metadata.gz: d2d56f651849112f219a822c91acbb3509875e03014444c1f4e93dc9f3507d6f
+  data.tar.gz: 98afd071a855e8eff49ea47f56170e219ca3db69f167cadcb5e704fc7f8dc0da
 SHA512:
-  metadata.gz: be7cf9f4ee8c126aeb48d3ff48f4b8e2c858eb0fb997c1bd8e29d44207369535808fd6711d456f9b5996d6b874662d4f16d86c8efbac033d3e45f6ac147f6006
-  data.tar.gz: e0ef0655b2b2c516b496f102410247859530f5b4f7e6f5d535aa1dff15cf911ad216e26c7faf9d8b72a113cd9482d60f5d89ef325aa597f3dac3651a2ceffbce
+  metadata.gz: e55b3425c7341be74aef73641a5972435ea67cfc2fa80b6df50db89b8b13936dd17f2c535a0c9914153da59e2935f11dedceabde3000794b9581dcd8afb16e56
+  data.tar.gz: 9a1eefdce2a9528175c4272b80b05addd29307f0254a691402ca84b70b5dcb05c85cdc81f94ac5a8a12c3fb5c3965fec0066328750a3e252d7dc7dcb9e13c160

data/README.md

@@ -9,10 +9,10 @@ Playbook is the first design system built for both Rails & React interfaces. Ins
 
 ## Getting started
 
-1. Run `yarn && bundle`
+1. Run `make install`
 1. Run `make start`
 1. Install overcommit hooks `bin/overcommit`
-1. open [http://localhost:8080](http://localhost:8080)
+1. open [http://localhost:8089](http://localhost:8089)
 
 To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
 

data/app/helpers/playbook/pb_sample_helper.rb

@@ -49,7 +49,7 @@ module Playbook
       if type == "rails"
         render template: "playbook/samples/#{sample}/index.html.erb"
       elsif type == "react"
-        react_component(sample.titleize.to_s)
+        react_component(sample.titleize.delete(" ").to_s)
       end
     end
   end

data/app/pb_kits/playbook/_playbook.scss

@@ -33,6 +33,7 @@
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_value/icon_value';
 @import 'pb_image/image';
+@import 'pb_installer/installer';
 @import 'pb_label_pill/label_pill';
 @import 'pb_label_value/label_value';
 @import 'pb_layout/layout';
@@ -80,4 +81,3 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
-

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

@@ -1,6 +1,8 @@
 samples:
   - dashboards
   - registration
+  - filter_table
+
 kits:
   - avatar
   - avatar_action_button
@@ -39,6 +41,7 @@ kits:
   - icon_circle
   - icon_value
   - image
+  - installer
   - layout
   - list
   - loading_inline
@@ -88,4 +91,3 @@ kits:
     - title_detail
     - weekday_stacked
   - user
-  - user_badge

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

@@ -45,6 +45,7 @@ import * as Icon from 'pb_icon/docs'
 import * as IconCircle from 'pb_icon_circle/docs'
 import * as IconValue from 'pb_icon_value/docs'
 import * as Image from 'pb_image/docs'
+import * as Installer from 'pb_installer/docs'
 import * as LabelPill from 'pb_label_pill/docs'
 import * as LabelValue from 'pb_label_value/docs'
 import * as Layout from 'pb_layout/docs'
@@ -124,6 +125,7 @@ WebpackerReact.setup({
   ...IconCircle,
   ...IconValue,
   ...Image,
+  ...Installer,
   ...LabelPill,
   ...LabelValue,
   ...Layout,

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

@@ -11,7 +11,9 @@ 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({ FilterTable })
 WebpackerReact.setup({ Registration })

data/app/pb_kits/playbook/pb_caption/_caption.jsx

@@ -2,29 +2,37 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildCss } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { spacing } from '../utilities/spacing.js'
 
 type CaptionProps = {
+  aria?: object,
   className?: String,
   children: Array<React.ReactNode> | React.ReactNode,
   dark?: Boolean,
+  data?: object,
+  id?: String,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
-  tag: String,
-  text: String,
+  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div",
+  text?: String,
 }
 
 const Caption = (props: CaptionProps) => {
   const {
+    aria = {},
     className,
     children,
     dark = false,
+    data = {},
+    id,
     size = 'md',
     tag = 'div',
     text,
   } = props
   const Tag = `${tag}`
 
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const css = classnames(
     buildCss('pb_caption_kit', size, {
       dark: dark,
@@ -33,7 +41,16 @@ const Caption = (props: CaptionProps) => {
     spacing(props)
   )
 
-  return <Tag className={css}>{text || children}</Tag>
+  return (
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
+      {text || children}
+    </Tag>
+  )
 }
 
 export default Caption

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

@@ -1,75 +1,4 @@
-@import "../tokens/shadows";
-@import "../tokens/border_radius";
-@import "../tokens/spacing";
-@import "../tokens/colors";
-@import "../tokens/transition";
-@import "../tokens/animation-curves";
-
-$pb_card_border_width: 1px;
-$pb_card_border_radius: $border_rad_heavier;
-$pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
-$pb_card_highlight_size: 4px;
-$pb_card_header_colors: $category_colors;
-$pb_card_header_border_radius: $border_rad_heavy;
-$pb_card_padding:(
-  none: 0,
-  xs: $space_xs,
-  sm: $space_sm,
-  md: $space_md,
-  lg: $space_lg,
-  xl: $space_xl,
-);
-
-@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: $background;
-  background-clip: border-box;
-  border-width: $pb_card_border_width;
-  border-style: solid;
-  border-color: $border_color;
-  border-radius: $pb_card_border_radius;
-  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;
-}
-
-@mixin pb_card_header_color($category_color) {
-  background: $category_color;
-}
+@import "card_mixin";
 
 
 [class^=pb_card_kit] {

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

@@ -0,0 +1,72 @@
+@import "../tokens/shadows";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "../tokens/colors";
+@import "../tokens/transition";
+@import "../tokens/animation-curves";
+
+$pb_card_border_width: 1px;
+$pb_card_border_radius: $border_rad_heavier;
+$pb_card_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
+$pb_card_highlight_size: 4px;
+$pb_card_header_colors: $category_colors;
+$pb_card_header_border_radius: $border_rad_heavy;
+$pb_card_padding:(
+  none: 0,
+  xs: $space_xs,
+  sm: $space_sm,
+  md: $space_md,
+  lg: $space_lg,
+  xl: $space_xl,
+);
+
+@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: $background;
+  background-clip: border-box;
+  border-width: $pb_card_border_width;
+  border-style: solid;
+  border-color: $border_color;
+  border-radius: $pb_card_border_radius;
+  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;
+}
+
+@mixin pb_card_header_color($category_color) {
+  background: $category_color;
+}

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx

@@ -21,7 +21,6 @@ const FiltersPopover = ({ children }: FiltersPopoverProps) => {
   return (
     <PbReactPopover
         closeOnClick="outside"
-        offset
         placement="bottom"
         reference={filterButton}
         shouldClosePopover={updateHide}

data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx

@@ -69,7 +69,7 @@ const SortMenu = ({ options, value, onChange }: SortMenuProps) => {
     <PbReactPopover
         className="pb_filter_sort_menu"
         closeOnClick="outside"
-        offset
+        padding="none"
         placement="bottom"
         reference={sortButton}
         shouldClosePopover={updateHide}

data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb

@@ -13,7 +13,7 @@
 <%end%>
 
 <% if object.template != "filter_only"%>
-  <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom'}) do %>
+  <%= pb_rails("popover", props: {classname: "pb_filter_sort_menu", close_on_click: "outside", trigger_element_id: "sort-button#{object.id}", tooltip_id: "sort-filter-btn-tooltip#{object.id}", position: 'bottom', padding: 'none'}) do %>
       <%= pb_rails("list") do %>
         <% object.sort_menu.each do |item| %>
           <%= pb_rails("list/item") do%> <%= pb_rails("button", props: {variant: "link" ,classname: "p-0", text: item[:item], link: item[:link]}) %><% end %>

data/app/pb_kits/playbook/pb_installer/_installer.html.erb

@@ -0,0 +1,16 @@
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname) do %>
+    <%= pb_rails("body", props: {color: "light" }) do %>
+      <%= pb_rails("caption", props: { text: "Installer" }) %>
+      <%= pb_rails("icon", props: { icon: "truck", fixed_width: true }) %>
+      <% if object.link %>
+        <%= link_to object.link, class: "pb_installer_kit_links" do %>
+          <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4 }) %>
+        <% end %>
+      <% else %>
+        <%= pb_rails("title", props: { text: object.project_name, tag: "span", size: 4 }) %>
+      <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_installer/_installer.jsx

@@ -0,0 +1,54 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { Body, Caption, Icon, Title } from '../'
+
+const renderProjectName = (link, projectName) => {
+  if (link) {
+    return (
+      <a
+          className="pb_installer_kit_links"
+          href={link}
+      >
+        <Title
+            size={4}
+            tag="span"
+            text={projectName}
+        />
+      </a>
+    )
+  }
+
+  return (
+    <Title
+        size={4}
+        tag="span"
+        text={projectName}
+    />
+  )
+}
+
+type InstallerProps = {
+  link?: String,
+  projectName: String,
+}
+
+const Installer = ({
+  link,
+  projectName,
+}: InstallerProps) => (
+  <div className={classnames('pb_installer_kit')}>
+    <Body color="light">
+      <Caption text="Installer" />
+      <Icon
+          fixedwidth
+          icon="truck"
+      />
+      {' '}
+      {renderProjectName(link, projectName)}
+    </Body>
+  </div>
+)
+
+export default Installer

data/app/pb_kits/playbook/pb_installer/_installer.scss

@@ -0,0 +1,7 @@
+[class^=pb_installer_kit] {
+  .pb_installer_kit_links {
+    span {
+      color: $data_1;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_installer/docs/_installer_default.html.erb

@@ -0,0 +1,8 @@
+<%= pb_rails("installer", props: {
+  project_name: "JD Installations LLC"
+}) %>
+<br /><br />
+<%= pb_rails("installer", props: {
+  link: "#",
+  project_name: "JD Installations LLC"
+}) %>

data/app/pb_kits/playbook/pb_installer/docs/_installer_default.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Installer from '../_installer.jsx'
+
+const InstallerDefault = () => (
+  <div>
+    <Installer projectName="JD Installations LLC" />
+    <br />
+    <br />
+    <Installer
+        link="#"
+        projectName="JD Installations LLC"
+    />
+  </div>
+)
+
+export default InstallerDefault

data/app/pb_kits/playbook/pb_installer/docs/example.yml

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - installer_default: Default
+  
+  
+  react:
+  - installer_default: Default
+