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

playbook_ui 4.17.0.pre.alpha1 → 5.0.1.pre.alpha1

Files changed (322) hide show

data/app/pb_kits/playbook/pb_image/_image.jsx CHANGED

@@ -1,21 +1,23 @@
 /* @flow */
 import React from 'react'
+import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
 type ImageProps = {
   url: string,
   alt?: string,
 }
-const Image = ({
-  alt = '',
-  url = '',
-}: ImageProps) => (
-  <img
-      alt={alt}
-      className="pb_image lazyload blur_up"
-      data-src={url}
-  />
-)
+const Image = (props: ImageProps) => {
+  const { alt = '', url = '' } = props
+  return (
+    <img
+        alt={alt}
+        className={classnames('pb_image lazyload blur_up', spacing(props))}
+        data-src={url}
+    />
+  )
+}
 export default Image

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_pill/_label_pill.jsx CHANGED

@@ -2,16 +2,11 @@
 import React from 'react'
 import classnames from 'classnames'
+import { spacing } from '../utilities/spacing.js'
-import {
-  buildAriaProps,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildDataProps } from '../utilities/props'
-import {
-  Caption,
-  Pill,
-} from '../'
+import { Caption, Pill } from '../'
 type LabelPillProps = {
   aria?: object,
@@ -20,34 +15,30 @@ type LabelPillProps = {
   id?: String,
   label?: String,
   pillValue?: String,
-  variant: 'error' | 'info' | 'neutral' | 'primary' | 'success' | 'warning',
+  variant: "error" | "info" | "neutral" | "primary" | "success" | "warning",
 }
-const LabelPill = ({
-  aria = {},
-  className,
-  data = {},
-  id,
-  label,
-  pillValue,
-  variant = 'neutral',
-}: LabelPillProps) => {
+const LabelPill = (props: LabelPillProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    id,
+    label,
+    pillValue,
+    variant = 'neutral',
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const css = classnames([
-    'pb_label_pill_kit',
-    className,
-  ])
+  const css = classnames(['pb_label_pill_kit', className], spacing(props))
   return (
     <div
         {...ariaProps}
         {...dataProps}
         className={css}
         id={id}
     >
       <Caption
           className="pb_label_pill_label"
           text={label}
@@ -58,7 +49,6 @@ const LabelPill = ({
           text={pillValue}
           variant={variant}
       />
     </div>
   )
 }

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,35 +2,47 @@
 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 = ({
-  className,
-  label,
-  value,
-  dark = false,
-}: LabelValueProps) => {
-  const themeStyle = dark === true ? '_dark' : ''
-  const css = classnames([
-    'pb_label_value_kit' + themeStyle,
+const LabelValue = (props: LabelValueProps) => {
+  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],
+    spacing(props)
+  )
   return (
-    <div className={css}>
-      <Caption
-          text={label}
-      />
-      <Body
-          text={value}
-      />
+    <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

@@ -2,24 +2,24 @@
 import React from 'react'
 import classnames from 'classnames'
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { spacing } from '../utilities/spacing.js'
 type LayoutPropTypes = {
   aria?: object,
   children?: Array<React.ReactNode> | React.ReactNode,
   className?: String,
-  collapse?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  collapse?: "xs" | "sm" | "md" | "lg" | "xl",
   dark?: Boolean,
   data?: object,
   full?: Boolean,
-  position?: 'left' | 'right',
-  size?: 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl',
-  variant?: 'light' | 'dark' | 'gradient',
-  transparent?: Boolean
+  position?: "left" | "right",
+  responsive?: Boolean,
+  size?: "xs" | "sm" | "md" | "base" | "lg" | "xl",
+  variant?: "light" | "dark" | "gradient",
+  transparent?: Boolean,
+  layout?: "sidebar" | "collection" | "kanban",
 }
 type LayoutSideProps = {
@@ -33,69 +33,93 @@ type LayoutBodyProps = {
 }
 // Side component
-const Side = ({
-  children,
-  className,
-}: LayoutSideProps) => {
+const Side = (props: LayoutSideProps) => {
+  const { children, className } = props
   return (
-    <div className={classnames('layout_sidebar', className)}>
+    <div className={classnames('layout_sidebar', className, spacing(props))}>
       {children}
     </div>
   )
 }
 // Body component
-const Body = ({
-  children,
-  className,
-}: LayoutBodyProps) => {
+const Body = (props: LayoutBodyProps) => {
+  const { children, className } = props
   return (
-    <div className={classnames('layout_body', className)}>
+    <div className={classnames('layout_body', className, spacing(props))}>
       {children}
     </div>
   )
 }
 // Main componenet
-const Layout = ({
-  aria = {},
-  children,
-  className,
-  collapse = 'md',
-  dark = false,
-  data = {},
-  full = false,
-  position = 'left',
-  size = 'md',
-  variant = 'light',
-  transparent = false,
-}: LayoutPropTypes) => {
+const Layout = (props: LayoutPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    collapse = 'md',
+    dark = false,
+    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', `size_${size}`, position, variant, {
-    'dark': dark,
-    'transparent': transparent,
-    'full': full,
-  })
-  const layoutCollapseCss = buildCss('layout', position, 'collapse', collapse)
+  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 layoutChildren = typeof(children) === 'object' && children.length ? children : [children]
+  const layoutCollapseCss =
+    layout == 'collection'
+      ? ''
+      : layout == 'kanban'
+        ? ''
+        : buildCss('layout', position, 'collapse', collapse)
+  const layoutChildren =
+    typeof children === 'object' && children.length ? children : [children]
   const subComponentTags = (tagName) => {
-    return layoutChildren.filter((c) => {
-      return c.type && c.type.displayName === tagName
-    }).map((child, i) => {
-      return React.cloneElement(child, { key: `${tagName.toLowerCase()}-${i}` })
-    })
+    return layoutChildren
+      .filter((c) => {
+        return c.type && c.type.displayName === tagName
+      })
+      .map((child, i) => {
+        return React.cloneElement(child, {
+          key: `${tagName.toLowerCase()}-${i}`,
+        })
+      })
   }
-  const nonSideChildren = layoutChildren.filter((child) => !child.type || child.type.displayName !== 'Side')
+  const nonSideChildren = layoutChildren.filter(
+    (child) => !child.type || child.type.displayName !== 'Side'
+  )
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(layoutCss, layoutCollapseCss, className)}
+        className={classnames(
+        layoutCss,
+        layoutCollapseCss,
+        className,
+        spacing(props)
+      )}
     >
       {subComponentTags('Side')}
       {nonSideChildren}