RubyGems - playbook_ui - Versions diffs - 4.14.0 → 4.17.0 - Mend

playbook_ui 4.14.0 → 4.17.0

Files changed (290) 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.jsx CHANGED

@@ -3,34 +3,27 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Body, Caption } from '../'
+import { spacing } from '../utilities/spacing.js'
 type LabelValueProps = {
   className?: String,
   label: String,
   value: String,
-  dark?: Boolean
+  dark?: Boolean,
 }
-const LabelValue = ({
-  className,
-  label,
-  value,
-  dark = false,
-}: LabelValueProps) => {
+const LabelValue = (props: LabelValueProps) => {
+  const { className, label, value, dark = false } = props
   const themeStyle = dark === true ? '_dark' : ''
-  const css = classnames([
-    'pb_label_value_kit' + themeStyle,
-    className,
-  ])
+  const css = classnames(
+    ['pb_label_value_kit' + themeStyle, className],
+    spacing(props)
+  )
   return (
     <div className={css}>
-      <Caption
-          text={label}
-      />
-      <Body
-          text={value}
-      />
+      <Caption text={label} />
+      <Body text={value} />
     </div>
   )
 }

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

@@ -2,56 +2,112 @@
 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 = ({ children, className }: LayoutSideProps) => {
+  return (
+    <div className={classnames('layout_sidebar', className)}>{children}</div>
+  )
 }
-const Layout = ({
-  aria = {},
-  children,
-  collapse = 'md',
-  dark = false,
-  data = {},
-  full = false,
-  position = 'left',
-  transparent = false,
-  size = 'base',
-}: LayoutProps) => {
+// Body component
+const Body = ({ children, className }: LayoutBodyProps) => {
+  return <div className={classnames('layout_body', className)}>{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";
+            }
           }
         }
       }
     }
   }
 }

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

@@ -0,0 +1,54 @@
+<%= pb_rails("layout", props: {layout: "collection"}) do %>
+  <%= pb_rails("layout/body") do %>
+ <%= pb_rails("card" ) do %>
+      Card content
+    <% end %>
+     <%= pb_rails("card") do %>
+   <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+        <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+    <% end %>
+     <%= pb_rails("card" ) do %>
+      Card content
+    <% end %>
+     <%= pb_rails("card") do %>
+      Card content
+    <% end %>
+      <%= pb_rails("user", props: {
+      name: "Anna Black",
+      title: "Remodeling Consultant",
+      orientation: "vertical",
+      align: "center",
+      size: "lg",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg"
+      }) %>
+     <%= pb_rails("card" ) do %>
+      Card content
+    <% end %>
+     <%= pb_rails("card" ) do %>
+     <%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
+<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
+<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
+    <% end %>
+  <% end %>
+<% end %>