RubyGems - playbook_ui - Versions diffs - 4.17.0 → 5.0.1.pre.beta - Mend

playbook_ui 4.17.0 → 5.0.1.pre.beta

Files changed (208) hide show

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

@@ -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 CHANGED

@@ -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 CHANGED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

@@ -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 ADDED

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

data/app/pb_kits/playbook/pb_installer/docs/index.js ADDED

	@@ -0,0 +1 @@
1	+ export { default as InstallerDefault } from './_installer_default.jsx'

data/app/pb_kits/playbook/pb_installer/installer.rb ADDED

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+module Playbook
+  module PbInstaller
+    class Installer
+      include Playbook::Props
+      partial "pb_installer/installer"
+      prop :link
+      prop :project_name
+      def classname
+        generate_classname("pb_installer_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_label_value/_label_value.html.erb CHANGED

@@ -1,4 +1,5 @@
 <%= content_tag(:div,
+    aria: object.aria,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_label_value/_label_value.jsx CHANGED

@@ -2,18 +2,32 @@
 import React from 'react'
 import classnames from 'classnames'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
 import { Body, Caption } from '../'
 import { spacing } from '../utilities/spacing.js'
 type LabelValueProps = {
+  aria?: object,
   className?: String,
+  dark?: Boolean,
+  data?: object,
+  id?: String,
   label: String,
   value: String,
-  dark?: Boolean,
 }
 const LabelValue = (props: LabelValueProps) => {
-  const { className, label, value, dark = false } = props
+  const {
+    aria = {},
+    className,
+    dark = false,
+    data = {},
+    id,
+    label,
+    value } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const themeStyle = dark === true ? '_dark' : ''
   const css = classnames(
     ['pb_label_value_kit' + themeStyle, className],
@@ -21,7 +35,12 @@ const LabelValue = (props: LabelValueProps) => {
   )
   return (
-    <div className={css}>
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={css}
+        id={id}
+    >
       <Caption text={label} />
       <Body text={value} />
     </div>

data/app/pb_kits/playbook/pb_layout/_body.html.erb CHANGED

@@ -1,4 +1,4 @@
-<%= content_tag(:div,
+<%= content_tag(object.tag,
     id: object.id,
     data: object.data,
     class: object.classname) do %>

data/app/pb_kits/playbook/pb_layout/_column.html.erb ADDED

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

data/app/pb_kits/playbook/pb_layout/_layout.jsx CHANGED

@@ -14,12 +14,12 @@ type LayoutPropTypes = {
   dark?: Boolean,
   data?: object,
   full?: Boolean,
-  position?: 'left' | 'right',
-  size?: 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl',
-  variant?: 'light' | 'dark' | 'gradient',
+  position?: "left" | "right",
+  responsive?: Boolean,
+  size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
+  variant?: "light" | "dark" | "gradient",
   transparent?: Boolean,
-  layout?: 'sidebar' | 'collection',
+  layout?: "sidebar" | "collection" | "kanban",
 }
 type LayoutSideProps = {
@@ -33,15 +33,23 @@ type LayoutBodyProps = {
 }
 // Side component
-const Side = ({ children, className }: LayoutSideProps) => {
+const Side = (props: LayoutSideProps) => {
+  const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className)}>{children}</div>
+    <div className={classnames('layout_sidebar', className, spacing(props))}>
+      {children}
+    </div>
   )
 }
 // Body component
-const Body = ({ children, className }: LayoutBodyProps) => {
-  return <div className={classnames('layout_body', className)}>{children}</div>
+const Body = (props: LayoutBodyProps) => {
+  const { children, className } = props
+  return (
+    <div className={classnames('layout_body', className, spacing(props))}>
+      {children}
+    </div>
+  )
 }
 // Main componenet
@@ -56,20 +64,32 @@ const Layout = (props: LayoutPropTypes) => {
     data = {},
     full = false,
     position = 'left',
+    responsive = false,
     size = 'md',
     layout = 'sidebar',
     variant = 'light',
     transparent = false,
   } = props
+  const responsiveClass = responsive ? '_responsive' : ''
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const layoutCss = buildCss(`pb_layout_kit_${layout}`, `size_${size}`, position, variant, {
-    'dark': dark,
-    'transparent': transparent,
-    'full': full,
-  })
+  const layoutCss =
+    layout == 'collection'
+      ? `pb_layout_kit_${layout}`
+      : layout == 'kanban'
+        ? `pb_layout_kit_${layout}${responsiveClass}`
+        : buildCss(`pb_layout_kit_${layout}`, `size_${size}`, position, variant, {
+          dark: dark,
+          transparent: transparent,
+          full: full,
+        })
-  const layoutCollapseCss = buildCss('layout', position, 'collapse', collapse)
+  const layoutCollapseCss =
+    layout == 'collection'
+      ? ''
+      : layout == 'kanban'
+        ? ''
+        : buildCss('layout', position, 'collapse', collapse)
   const layoutChildren =
     typeof children === 'object' && children.length ? children : [children]

data/app/pb_kits/playbook/pb_layout/_layout.scss CHANGED

@@ -3,6 +3,15 @@
 @import "../tokens/screen_sizes";
 @import "./layout_mixin";
+$list-width: 300px;
+$gap: $space_sm;
+$scrollbar-thickness: $space_md;
+$list-header-height: $space_lg;
+$list-footer-height: $space_lg;
+$list-border-radius: $border_rad_lighter;
+$card-border-radius: $border_rad_lightest;
 [class^=pb_layout_kit] {
   &[class*=_collection]{
@@ -22,6 +31,51 @@
     }
   }
+  &[class*=_kanban]{
+    display: flex;
+    overflow-x: auto;
+    > * {
+      flex: 0 0 auto;
+      margin-left: $gap;
+    }
+    &::after {
+      content: '';
+      flex: 0 0 $gap;
+    }
+    div.layout_body{
+      width: $list-width;
+      height: 100vh;
+      list-style: none;
+      margin: 0;
+      overflow-y: auto;
+      & > * {
+        margin: $space_xs $space_xs $space_xs;
+        &:not(:last-child) {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+  // For future release as of 6/18/2020
+  &[class*=_kanban_responsive] {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    &::after {
+      flex: none;
+      content: none;
+    }
+    div.layout_body{
+      width: 100%;
+    }
+  }
   &[class*=_sidebar]{
     $layout_sizes: (
       "xs":   64px,

data/app/pb_kits/playbook/pb_layout/body.rb CHANGED

@@ -7,6 +7,10 @@ module Playbook
       partial "pb_layout/body"
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[ul li span div],
+                 default: "div"
       def classname
         generate_classname("layout_body")
       end

data/app/pb_kits/playbook/pb_layout/docs/_layout_kanban.html.erb ADDED

@@ -0,0 +1,140 @@
+<%= pb_rails("layout", props: {layout: "kanban"}) do %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Queued'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'In Progress'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Validation'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Done'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'OKRs'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Bugs'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Another Column'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'Another Column'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+  <%= pb_rails("layout/body") do %>
+    <%= pb_rails("caption", props: {text: 'A Final Column'}) %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+    <%= pb_rails("card") do %>
+      Kanban Item
+    <% end %>
+  <% end %>
+<% end %>