playbook_ui 7.0.1.pre.alpha8 → 7.0.1.pre.alpha14

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -0,0 +1,15 @@
+[class^=pb_background_kit] {
+  max-width: 100%;
+  max-height: 100%;
+
+  .blur_up {
+    -webkit-filter: blur(6px);
+    filter: blur(6px);
+    transition: filter 550ms, -webkit-filter 550ms;
+  }
+
+  .blur_up.lazyloaded {
+    -webkit-filter: blur(0);
+    filter: blur(0);
+  }
+}

data/app/pb_kits/playbook/pb_background/background.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbBackground
+    class Background
+      include Playbook::Props
+
+      partial "pb_background/background"
+
+      prop :background_color, type: Playbook::Props::Enum,
+                              values: %w[gradient dark light white],
+                              default: "light"
+      prop :image_url
+      prop :padding, type: Playbook::Props::Enum,
+                     values: %w[none xs sm md lg xl],
+                     default: "md"
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p div span],
+                 default: "div"
+
+      def classname
+        generate_classname("pb_background_kit", image_classname, background_color_classname, padding, separator: " ")
+      end
+
+    private
+
+      def image_classname
+        image_url.present? ? "lazyload blur_up" : ""
+      end
+
+      def background_color_classname
+        !image_url.present? ? "bg_#{background_color}" : ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_background/docs/_background_default.html.erb

@@ -0,0 +1,41 @@
+<%= pb_rails("background", props: { background_color: "gradient" }) do %>
+  Background Kit Gradient Color
+<% end %>
+
+<%= pb_rails("background", props: { background_color: "dark" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "center"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { dark: true, size: 2, text: "Background Kit Dark" })%>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "right"}) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("body", props: { text: "Background Kit Light" })%>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("background", props: { background_color: "white", padding: "lg" }) do %>
+  <%= pb_rails("flex") do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { size: 3, text: "Background Kit White" })%>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= pb_rails("background", props: { image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", padding: "lg" }) do %>
+  <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("title", props: { dark: true, size: 1, text: "Background Kit Image" })%>
+    <% end %>
+    <%= pb_rails("flex/flex_item", props: { padding: "lg" }) do %>
+      <%= pb_rails("card", props: { shadow: "deepest" }) do %>
+        We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own.
+        -Cesar Chavez
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_default.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Background } from '../../'
+import { Body, Card, Flex, FlexItem, Title } from '../../'
+
+const BackgroundDefault = () => (
+  <div>
+    <Background
+        backgroundColor="gradient"
+    >
+      {'Background Kit Gradient Color'}
+    </Background>
+    <Background
+        backgroundColor="dark"
+    >
+      <Flex
+          horizontal="center"
+          orientation="row"
+      >
+        <FlexItem>
+          <Title
+              dark
+              size={2}
+              text="Background Kit Dark"
+          />
+        </FlexItem>
+      </Flex>
+    </Background>
+    <Background
+        backgroundColor="light"
+        padding="xl"
+    >
+      <Flex
+          horizontal="right"
+          orientation="row"
+      >
+        <FlexItem>
+          <Body
+              text="Background Kit Light"
+          />
+        </FlexItem>
+      </Flex>
+    </Background>
+    <Background
+        backgroundColor="white"
+        padding="lg"
+    >
+      <Title
+          size={3}
+          text="Background Kit White"
+      />
+    </Background>
+    <Background imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80">
+      <Flex
+          orientation="column"
+          vertical="center"
+      >
+        <FlexItem>
+          <Title
+              dark
+              padding="lg"
+              size={1}
+              text="Background Kit Image"
+          />
+        </FlexItem>
+        <FlexItem padding="lg">
+          <Card shadow="deepest">
+            {'We cannot seek achievement for ourselves and forget about progress and prosperity for our community... Our ambitions must be broad enough to include the aspirations and needs of others, for their sakes and for our own. - Cesar Chavez'}
+          </Card>
+        </FlexItem>
+      </Flex>
+    </Background>
+  </div>
+)
+
+export default BackgroundDefault

data/app/pb_kits/playbook/pb_background/docs/example.yml

@@ -0,0 +1,8 @@
+examples:
+
+  rails:
+  - background_default: Default
+
+  react:
+  - background_default: Default
+

data/app/pb_kits/playbook/pb_background/docs/index.js

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

data/app/pb_kits/playbook/pb_badge/_badge.jsx

@@ -32,8 +32,10 @@ const Badge = (props: BadgeProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const css = classnames(
-    buildCss('pb_badge_kit', variant, { rounded: rounded }), className,
-    globalProps(props))
+    buildCss('pb_badge_kit', variant, { rounded }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx

@@ -75,7 +75,7 @@ export default class BarGraph extends React.Component<BarGraphProps> {
 
     return (
       <div
-          className={classnames(className, globalProps(this.props))}
+          className={classnames(globalProps(this.props), className)}
           id={id}
       />
     )

data/app/pb_kits/playbook/pb_body/_body.jsx

@@ -26,7 +26,7 @@ const Body = (props: BodyProps) => {
     aria = {},
     className,
     children,
-    color = 'default',
+    color = '',
     data = {},
     highlightedText = [],
     highlighting = false,

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,6 +1,7 @@
 @import "./body_mixins";
 
 [class^=pb_body_kit]{
+  @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
     &[class*=_#{$color_name}] {
       @include pb_body($color_value);
@@ -19,8 +20,23 @@
   }
   
   @each $status_name, $status_value in $pb_body_status {
-    &[class*=_default_#{$status_name}][class*=dark] {
+    &[class*=#{$status_name}] {
       @include pb_body($status_value);
     }
   }
+
+  &[class*=dark] {
+    @include pb_body_dark();
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors{
+      &[class*=_#{$dark_color_name}][class*=dark]{
+        @include pb_body($dark_color_value); 
+      }
+    }
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*=_#{$status_name}] {
+        @include pb_body($status_value);
+      }
+    }
+  }
+ 
 }

data/app/pb_kits/playbook/pb_body/body.rb

@@ -41,7 +41,7 @@ module Playbook
       end
 
       def color_class
-        color
+        color == "default" ? nil : color
       end
 
       def status_class

data/app/pb_kits/playbook/pb_button/_button.jsx

@@ -82,7 +82,11 @@ const Button = (props: ButtonPropTypes) => {
   } = props
 
   const buttonAria = buttonAriaProps(props)
-  const css = classnames(buttonClassName(props), className, globalProps(props))
+  const css = classnames(
+    buttonClassName(props),
+    globalProps(props),
+    className
+  )
   const loadingIcon = (
     <div className="loading-icon">
       <Icon
@@ -97,6 +101,7 @@ const Button = (props: ButtonPropTypes) => {
     <span className="pb_button_content">
       <If condition={icon !== null}>
         <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+        {' '}
       </If>
       <span>{text || children}</span>
     </span>

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -10,7 +10,8 @@ $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
 $pb_button_h_padding: 34px;
 $pb_button_hover_darken: 4%;
-$pb_button_border_width: 1px;
+$pb_button_border_width: 0px;
+
 
 @mixin pb_button($bg: $primary_action, $color: $text_dk_default, $border: transparent) {
   text-rendering: optimizeLegibility;
@@ -47,16 +48,17 @@ $pb_button_border_width: 1px;
     visibility: visible;
   }
 
-  &:hover {
+  &:hover, &:focus {
     outline: none;
+    
   }
 
-  &:active,
-  &:focus {
+  &:active {
     outline: none;
     border-width: $pb_button_border_width;
     border-color: darken($bg, $pb_button_hover_darken);
   }
+  
 };
 
 @mixin pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken)){
@@ -67,8 +69,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_primary {
   @include pb_button;
 
-  &:hover {
-    @include pb_button_hover;
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover;
+    }
   }
 }
 
@@ -76,17 +80,21 @@ $pb_button_border_width: 1px;
 @mixin pb_button_secondary {
   @include pb_button(rgba($primary_action, 0.05), $primary_action);
 
-  &:hover {
-    @include pb_button_hover(rgba($primary_action, $opacity_3));
-  }
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover(rgba($primary_action, $opacity_3));
+    }
+  } 
 }
 
 // Link =========================
 @mixin pb_button_link {
   @include pb_button($transparent, $primary_action);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }
 
@@ -120,8 +128,10 @@ $pb_button_border_width: 1px;
 @mixin pb_button_primary_dark{
   @include pb_button($primary_action);
 
-  &:hover {
-    @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($bg: darken($primary_action, $pb_button_hover_darken));
+    }
   }
 }
 
@@ -129,17 +139,21 @@ $pb_button_border_width: 1px;
 @mixin pb_button_secondary_dark{
   @include pb_button(rgba($white, 0.2), $white);
 
-  &:hover {
-    @include pb_button_hover(rgba($primary_action, $opacity_2));
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover(rgba($primary_action, $opacity_2));
+    }
   }
 }
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button($transparent, $primary_action);
+  @include pb_button($transparent, $white);
 
-  &:hover {
-    @include pb_button_hover($transparent);
+  @media (hover:hover) {
+    &:hover {
+      @include pb_button_hover($transparent);
+    }
   }
 }
 

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -9,12 +9,14 @@ const ButtonDefault = (props) => (
         onClick={() => alert('button clicked!')}
         text="Button Primary"
     />
+    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Secondary"
         variant="secondary"
         {...props}
     />
+    {' '}
     <Button
         onClick={() => alert('button clicked!')}
         text="Button Link"

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

@@ -8,12 +8,14 @@ const ButtonLink = (props) => (
         link="https://google.com"
         text="A Tag Button"
     />
+    {' '}
     <Button
         {...props}
         link="https://google.com"
         newWindow
         text="Open in New Window"
     />
+    {' '}
     <Button
         {...props}
         disabled

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -8,12 +8,14 @@ const ButtonLoading = (props) => (
         loading
         text="Button Primary"
     />
+    {' '}
     <Button
         {...props}
         loading
         text="Button Secondary"
         variant="secondary"
     />
+    {' '}
     <Button
         {...props}
         loading

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx

@@ -35,7 +35,11 @@ const ButtonToolbar  = (props: ButtonToolbarProps) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
 
-  const classes = classnames(buildCss('pb_button_toolbar_kit', orientation, { connected: connected }), className, globalProps(props))
+  const classes = classnames(
+    buildCss('pb_button_toolbar_kit', orientation, { connected }),
+    globalProps(props),
+    className
+  )
 
   return (
     <div