RubyGems - playbook_ui - Versions diffs - 4.15.1.alpha1 → 4.18.1 - Mend

playbook_ui 4.15.1.alpha1 → 4.18.1

Files changed (402) hide show

data/app/pb_kits/playbook/pb_label_pill/docs/_label_pill_default.jsx ADDED

@@ -0,0 +1,50 @@
+import React from 'react'
+import { LabelPill } from '../../'
+const LabelPillDefault = () => (
+  <>
+    <LabelPill
+        label="Service Needed"
+        pillValue="76"
+    />
+    <LabelPill
+        label="Waiting"
+        pillValue="69"
+        variant="success"
+    />
+    <LabelPill
+        label="In Service"
+        pillValue="28"
+        variant="error"
+    />
+    <LabelPill
+        label="Fully Serviced"
+        pillValue="101"
+        variant="warning"
+    />
+    <LabelPill
+        label="Inbox"
+        pillValue="197"
+        variant="info"
+    />
+    <LabelPill
+        label="Outbox"
+        pillValue="13"
+        variant="neutral"
+    />
+    <LabelPill
+        label="Inbox"
+        pillValue="218"
+        variant="primary"
+    />
+  </>
+)
+export default LabelPillDefault

data/app/pb_kits/playbook/pb_label_pill/docs/example.yml CHANGED

@@ -1,7 +1,8 @@
 examples:
   rails:
   - label_pill_default: Default
   react:
+  - label_pill_default: Default

data/app/pb_kits/playbook/pb_label_pill/docs/index.js CHANGED

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

data/app/pb_kits/playbook/pb_label_pill/label_pill.rb CHANGED

@@ -14,7 +14,7 @@ module Playbook
       prop :pill_value
       def classname
-        generate_classname("pb_label_pill_kit", variant)
+        generate_classname("pb_label_pill_kit")
       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,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/_layout.jsx CHANGED

@@ -2,56 +2,114 @@
 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 LayoutProps = {
+type LayoutPropTypes = {
   aria?: object,
-  children?: Array<React.ReactChild>,
-  collapse?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  children?: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
+  collapse?: "xs" | "sm" | "md" | "lg" | "xl",
   dark?: Boolean,
   data?: object,
   full?: Boolean,
   position?: 'left' | 'right',
   size?: 'xs' | 'sm' | 'md' | 'base' | 'lg' | 'xl',
-  transparent?: Boolean
+  variant?: 'light' | 'dark' | 'gradient',
+  transparent?: Boolean,
+  layout?: 'sidebar' | 'collection',
+}
+type LayoutSideProps = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
+}
+type LayoutBodyProps = {
+  children: Array<React.ReactNode> | React.ReactNode,
+  className?: String,
+}
+// Side component
+const Side = (props: LayoutSideProps) => {
+  const { children, className } = props
+  return (
+    <div className={classnames('layout_sidebar', className, spacing(props))}>{children}</div>
+  )
 }
-const Layout = ({
-  aria = {},
-  children,
-  collapse = 'md',
-  dark = false,
-  data = {},
-  full = false,
-  position = 'left',
-  transparent = false,
-  size = 'base',
-}: LayoutProps) => {
+// Body component
+const Body = (props: LayoutBodyProps) => {
+  const { children, className } = props
+  return <div className={classnames('layout_body', className, spacing(props))}>{children}</div>
+}
+// Main componenet
+const Layout = (props: LayoutPropTypes) => {
+  const {
+    aria = {},
+    children,
+    className,
+    collapse = 'md',
+    dark = false,
+    data = {},
+    full = false,
+    position = 'left',
+    size = 'md',
+    layout = 'sidebar',
+    variant = 'light',
+    transparent = false,
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('layout', position, 'collapse', collapse),
-    buildCss('pb_layout_kit', size, position, {
-      'dark': dark,
-      'transparent': transparent,
-      'full': full,
-    })
+  const layoutCss = buildCss(`pb_layout_kit_${layout}`, `size_${size}`, position, variant, {
+    'dark': dark,
+    'transparent': transparent,
+    'full': full,
+  })
+  const layoutCollapseCss = 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}`,
+        })
+      })
+  }
+  const nonSideChildren = layoutChildren.filter(
+    (child) => !child.type || child.type.displayName !== 'Side'
   )
   return (
     <div
         {...ariaProps}
         {...dataProps}
-        className={classnames(classes)}
+        className={classnames(
+        layoutCss,
+        layoutCollapseCss,
+        className,
+        spacing(props)
+      )}
     >
-      {children}
+      {subComponentTags('Side')}
+      {nonSideChildren}
     </div>
   )
 }
+Layout.Side = Side
+Layout.Body = Body
 export default Layout

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

@@ -4,80 +4,99 @@
 @import "./layout_mixin";
 [class^=pb_layout_kit] {
-  $layout_sizes: (
-    "xs":   64px,
-    "sm":   200px,
-    "md":   250px,
-    "lg":   300px,
-    "xl":   365px,
-  );
-  $positions: (
-    "left",
-    "right",
-  );
-  $colors: (
-    "light",
-    "dark",
-    "gradient",
-    "transparent",
-  );
-  // Sections
-  &[class*=_section] {
-    padding: $space_sm $space_xl;
-    &[class*=_border] {
+  &[class*=_collection]{
+    div.layout_body{
+      display: grid;
+      grid-template-rows: 1fr;
+      grid-column-gap: $space_sm;
+      grid-row-gap: $space_sm;
+      grid-template-columns: repeat(4, 1fr);
+      @media screen and (max-width: $screen-md-min) {
+        grid-template-columns: repeat(2, 1fr);
+      }
+       @media screen and (max-width: $screen-xs-min) {
+        grid-template-columns: repeat(1, 1fr);
+      }
+    }
+  }
+  &[class*=_sidebar]{
+    $layout_sizes: (
+      "xs":   64px,
+      "sm":   200px,
+      "md":   250px,
+      "lg":   300px,
+      "xl":   365px,
+    );
+    $positions: (
+      "left",
+      "right",
+    );
+    $colors: (
+      "light",
+      "dark",
+      "gradient",
+      "transparent",
+    );
+    // Sections
+    &[class*=_section] {
       padding: $space_sm $space_xl;
-      border-bottom: 1px solid $border_light;
-      &[class*=_margin] {
-        margin: $space_sm $space_xl;
+      &[class*=_border] {
+        padding: $space_sm $space_xl;
         border-bottom: 1px solid $border_light;
+        &[class*=_margin] {
+          margin: $space_sm $space_xl;
+          border-bottom: 1px solid $border_light;
+        }
       }
     }
-  }
-  // sidebar and Body
-  @each $name, $size in $layout_sizes {
-    &[class*=_size_#{$name}] {
-      @each $position in $positions {
-        &[class*=_#{$position}] {
-          @each $color in $colors {
-            &[class*=_#{$color}] {
-              @include layout_settings($size, $position, $color, "#{&}");
+    // sidebar and Body
+    @each $name, $size in $layout_sizes {
+      &[class*=_size_#{$name}] {
+        @each $position in $positions {
+          &[class*=_#{$position}] {
+            @each $color in $colors {
+              &[class*=_#{$color}] {
+                @include layout_settings($size, $position, $color, "#{&}");
+              }
             }
           }
         }
       }
     }
-  }
-  // Collapse Settings
-  @each $position in $positions {
-    @each $breakpoint_name, $breakpoint in $breakpoints {
-      &_#{$position}_collapse_#{$breakpoint_name} {
-        @include break_at($breakpoint) {
-          @if $position == 'left' {
-            grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
-            grid-template-rows: auto 1fr;
+    // Collapse Settings
+    @each $position in $positions {
+      @each $breakpoint_name, $breakpoint in $breakpoints {
+        &_#{$position}_collapse_#{$breakpoint_name} {
+          @include break_at($breakpoint) {
+            @if $position == 'left' {
+              grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
+              grid-template-rows: auto 1fr;
-          } @else {
-            grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
-            grid-template-rows: 1fr auto;
-          }
-          grid-template-columns: 1fr;
-          &.full {
-            min-height: auto !important;
-          }
-          .layout_sidebar {
-            grid-area: "layout_collapsed_#{$breakpoint_name}_sidebar";
-            border-width: 0 0 1px 0;
-          }
-          .layout_body {
-            grid-area: "layout_collapsed_#{$breakpoint_name}_body";
+            } @else {
+              grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
+              grid-template-rows: 1fr auto;
+            }
+            grid-template-columns: 1fr;
+            &.full {
+              min-height: auto !important;
+            }
+            .layout_sidebar {
+              grid-area: "layout_collapsed_#{$breakpoint_name}_sidebar";
+              border-width: 0 0 1px 0;
+            }
+            .layout_body {
+              grid-area: "layout_collapsed_#{$breakpoint_name}_body";
+            }
           }
         }
       }
     }
   }
 }