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

playbook_ui 4.17.0.pre.alpha1 → 4.17.0

Files changed (145) 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_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.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,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
+  transparent?: Boolean,
+  layout?: 'sidebar' | 'collection',
 }
 type LayoutSideProps = {
@@ -33,69 +33,73 @@ type LayoutBodyProps = {
 }
 // Side component
-const Side = ({
-  children,
-  className,
-}: LayoutSideProps) => {
+const Side = ({ children, className }: LayoutSideProps) => {
   return (
-    <div className={classnames('layout_sidebar', className)}>
-      {children}
-    </div>
+    <div className={classnames('layout_sidebar', className)}>{children}</div>
   )
 }
 // Body component
-const Body = ({
-  children,
-  className,
-}: LayoutBodyProps) => {
-  return (
-    <div className={classnames('layout_body', className)}>
-      {children}
-    </div>
-  )
+const Body = ({ children, className }: LayoutBodyProps) => {
+  return <div className={classnames('layout_body', className)}>{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',
+    size = 'md',
+    layout = 'sidebar',
+    variant = 'light',
+    transparent = false,
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const layoutCss = buildCss('pb_layout_kit', `size_${size}`, position, variant, {
+  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 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}

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";
+            }
           }
         }
       }
     }
   }
 }