playbook_ui 7.4.0.pre.alpha6 → 7.4.0.pre.test2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84234e5245ed8198a33015e8a1f990c70d38b788b41a951cbbb2d15150abae31
-  data.tar.gz: a7dfea6cb2cfcff7daf6393c744d0e3a8b3959f314ee5d02ba0f376c996d253d
+  metadata.gz: edcd483154d0afd156eefc07b277386e923c18ebf81792ad5ff820edec18e49a
+  data.tar.gz: 5b226758e48f33b05fc5198f88d5b47f6f1083ffbd6fd2c391bf1b305c1e57a3
 SHA512:
-  metadata.gz: 6c28070ae0ee1907e7f9b9543c3bba8fd3b781886dd05a522b73d633d3cc30db2e14f24e63eabdc74670a582adb33bf41d21f5aea14028287dfa7906d5a03c24
-  data.tar.gz: 766165343399fac0c7a821488262d632a033dc48fc93867d9414a24eaa2ec2059b861015ef0013edee061164a47d2b55c3af123cdb107a84be83c70be47e4a01
+  metadata.gz: 3a0aa8bc5d8b1257b9026f4e33eb5b92fb4577b15369e99a22f42ca753fc65ab4b8b25323e81c31ad460f58e8b6b0071e22d8187ddf543444453c9157a61506c
+  data.tar.gz: b9f3b18987643f6a9ec374f68b8fc4ae866e1a5e57dde52529375da4c61fcb1555ca689473fde8c3eaef6104e8cd7ea16dc9b2b87bcfce03fceba961d69397dd

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,5 @@
 @import "tokens/fonts";
+@import "pb_background/background";
 @import "pb_body/body";
 @import "pb_button/button";
 @import 'pb_button_toolbar/button_toolbar';
@@ -17,6 +18,7 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_picker/date_picker';
+@import 'pb_date_time/date_time';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
@@ -62,7 +64,6 @@
 @import 'pb_selectable_card/selectable_card';
 @import 'pb_selectable_card_icon/selectable_card_icon';
 @import 'pb_selectable_icon/selectable_icon';
-@import 'pb_selectable_list/selectable_list';
 @import 'pb_source/source';
 @import 'pb_star_rating/star_rating';
 @import 'pb_stat_change/stat_change';
@@ -84,3 +85,4 @@
 @import 'pb_time_stacked/time_stacked';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/spacing';
+

data/app/pb_kits/playbook/data/menu.yml

@@ -7,6 +7,7 @@ samples:
 kits:
   - avatar
   - avatar_action_button
+  - background
   - buttons:
     - button
     - button_toolbar
@@ -20,7 +21,6 @@ kits:
     - gauge
     - legend
     - line_graph
-
   - filter
   - fixed_confirmation_toast
   - flex
@@ -34,7 +34,6 @@ kits:
     - selectable_card
     - selectable_card_icon
     - selectable_icon
-    - selectable_list
     - text_input
     - textarea
     - typeahead
@@ -79,6 +78,7 @@ kits:
     - date_range_inline
     - date_range_stacked
     - date_stacked
+    - date_time
     - date_time_stacked
     - date_year_stacked
     - home_address_street

data/app/pb_kits/playbook/index.js

@@ -5,6 +5,7 @@ import 'lazysizes'
 // React Component JSX Imports from the React Kits
 export Avatar from './pb_avatar/_avatar.jsx'
 export AvatarActionButton from './pb_avatar_action_button/_avatar_action_button.jsx'
+export Background from 'pb_background/_background.jsx'
 export Badge from './pb_badge/_badge.jsx'
 export BarGraph from './pb_bar_graph/_bar_graph.jsx'
 export Body from './pb_body/_body.jsx'
@@ -23,6 +24,7 @@ export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
+export DateTime from './pb_date_time/_date_time.jsx'
 export DateTimeStacked from './pb_date_time_stacked/_date_time_stacked.jsx'
 export DateYearStacked from './pb_date_year_stacked/_date_year_stacked.jsx'
 export DistributionBar from './pb_distribution_bar/_distribution_bar.jsx'
@@ -68,8 +70,6 @@ export Select from './pb_select/_select.jsx'
 export SelectableCard from './pb_selectable_card/_selectable_card.jsx'
 export SelectableCardIcon from './pb_selectable_card_icon/_selectable_card_icon.jsx'
 export SelectableIcon from './pb_selectable_icon/_selectable_icon.jsx'
-export SelectableList from './pb_selectable_list/_selectable_list.jsx'
-export SelectableListItem from './pb_selectable_list/_item.jsx'
 export Source from './pb_source/_source.jsx'
 export StarRating from './pb_star_rating/_star_rating.jsx'
 export StatChange from './pb_stat_change/_stat_change.jsx'

data/app/pb_kits/playbook/pb_background/_background.html.erb

@@ -0,0 +1,14 @@
+<%= content_tag(object.tag,
+    aria: object.aria,
+    data: object.data,
+    id: object.id) do %>
+    <% if object.image_url.present? %>
+      <div class="<%= object.classname %>" style="background-image: url(<%= object.image_url %>);">
+        <%= capture(&object.children) %>
+      </div>
+    <% else %>
+      <div class="<%= object.classname %>">
+        <%= capture(&object.children) %>
+      </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,63 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+
+type BackgroundProps = {
+  aria?: object,
+  backgroundColor?: 'gradient' | 'dark' | 'light' | 'white',
+  children?: array<React.ReactNode> | React.ReactNode,
+  className?: string,
+  data?: object,
+  id?: string,
+  imageUrl?: string,
+  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
+}
+
+const Background = (props: BackgroundProps) => {
+  const {
+    aria = {},
+    backgroundColor = 'light',
+    children,
+    className,
+    data = {},
+    id,
+    imageUrl = '',
+    tag = 'div',
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_background_kit'), globalProps(props), `pb_background_color_${backgroundColor}`, className)
+  const Tag = `${tag}`
+  const backgroundStyle = {
+    backgroundImage: `url(${imageUrl})`,
+    backgroundSize: 'cover',
+  }
+
+  return (
+    <Tag
+        {...ariaProps}
+        {...dataProps}
+        id={id}
+    >
+      <If condition={imageUrl}>
+        <div
+            className={classes + 'lazyload blur_up'}
+            style={backgroundStyle}
+        >
+          { children }
+        </div>
+        <Else />
+        <div className={classes}>
+          { children }
+        </div>
+      </If>
+    </Tag>
+  )
+}
+
+export default Background

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

@@ -0,0 +1,35 @@
+@import "../tokens/colors";
+
+$background_colors: (
+  "gradient": linear-gradient(135deg, $gradient_start 0%, $gradient_end 100%),
+  "dark": $bg_dark,
+  "light": $bg_light,
+  "white": $white,
+);
+
+
+[class^=pb_background_kit] {
+  max-width: 100%;
+  max-height: 100%;
+  background-size: cover;
+
+  @each $name, $color in $background_colors {
+    &.pb_background_color_#{$name} {
+      background: $color;
+    }
+  };
+
+  .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,35 @@
+# 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 :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, separator: " ")
+      end
+
+    private
+
+      def image_classname
+        image_url.present? ? "lazyload blur_up" : ""
+      end
+
+      def background_color_classname
+        !image_url.present? ? "pb_background_color_#{background_color}" : ""
+      end
+    end
+  end
+end

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

@@ -0,0 +1,3 @@
+<%= pb_rails("background", props: { background_color: "dark", padding: "xl" }) do %> 
+
+<% end %>

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundDark = () => (
+  <div>
+    <Background
+        backgroundColor="dark"
+        padding="xl"
+    />
+  </div>
+)
+
+export default BackgroundDark

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

@@ -0,0 +1,3 @@
+<%= pb_rails("background", props: { background_color: "gradient", padding: "xl" }) do %> 
+
+<% end %>

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundGradient = () => (
+  <div>
+    <Background
+        backgroundColor="gradient"
+        padding="xl"
+    />
+  </div>
+)
+
+export default BackgroundGradient

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

@@ -0,0 +1,13 @@
+<%= 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_image.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Background } from '../..'
+import { Card, Flex, FlexItem, Title } from '../..'
+
+const BackgroundImage = () => (
+  <div>
+    <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 BackgroundImage

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

@@ -0,0 +1,3 @@
+<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
+
+<% end %>

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

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundLight = () => (
+  <div>
+    <Background
+        backgroundColor="light"
+        padding="xl"
+    />
+  </div>
+)
+
+export default BackgroundLight

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

@@ -0,0 +1,3 @@
+  <%= pb_rails("background", props: { background_color: "white", padding: "xl" }) do %>
+    
+  <% end %>

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

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Background } from '../..'
+
+const BackgroundWhite = () => (
+  <div>
+    <Background
+        backgroundColor="white"
+        className="blah"
+    />
+  </div>
+
+)
+
+export default BackgroundWhite

data/app/pb_kits/playbook/pb_background/docs/_description.md

@@ -0,0 +1 @@
+The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, and white.

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

@@ -0,0 +1,15 @@
+examples:
+
+  rails:
+  - background_light: Light
+  - background_white: White
+  - background_dark: Dark
+  - background_gradient: Gradient
+  - background_image: Image
+
+  react:
+  - background_light: Light
+  - background_white: White
+  - background_dark: Dark
+  - background_gradient: Gradient
+  - background_image: Image

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

@@ -0,0 +1,6 @@
+export { default as BackgroundLight } from './_background_light.jsx'
+export { default as BackgroundWhite } from './_background_white.jsx'
+export { default as BackgroundDark } from './_background_dark.jsx'
+export { default as BackgroundGradient } from './_background_gradient.jsx'
+export { default as BackgroundImage } from './_background_image.jsx'
+

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -1,11 +1,10 @@
 <%= content_tag(:label, aria: object.aria,
                         id: object.id,
                         data: object.data,
-                        class: object.classname,
-                        for: object.for_attribute ) do %>  
+                        class: object.classname) do %>  
   <% if object.children %>
     <%= capture(&object.children) %>
-   <% else %>            
+   <% else %>             
     <%= object.input %>
   <% end %>
     <span class="pb_checkbox_checkmark">

data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx

@@ -51,14 +51,13 @@ const Checkbox = (props: CheckboxProps) => {
         {...ariaProps}
         {...dataProps}
         className={classes}
-        htmlFor={id}
+        id={id}
     >
       <If condition={children}>
         {children}
         <Else />
         <input
             defaultChecked={checked}
-            id={id}
             name={name}
             onChange={onChange}
             type="checkbox"

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -14,6 +14,7 @@ module Playbook
       prop :text
       prop :value
       prop :name
+
       prop :input_options, type: Playbook::Props::Hash,
                            default: {}
       prop :required, type: Playbook::Props::Boolean,
@@ -33,10 +34,6 @@ module Playbook
         check_box_tag(name, value, checked, input_options)
       end
 
-      def for_attribute
-        input_options[:id]
-      end
-
       def checkbox_label_status
         error ? "negative" : nil
       end

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb

@@ -1,8 +1,5 @@
 <%= pb_rails("checkbox" , props: {
   text: "Checkbox Label",
-  input_options: {
-    value: "checkbox-value",
-    name: "checkbox-name",
-    id: "label-id",
-  }
+  value: "checkbox-value",
+  name: "checkbox-name"
 }) %>

data/app/pb_kits/playbook/pb_date/_date.html.erb

@@ -1,14 +1,70 @@
 <%= content_tag(:div,
     id: object.id,
     data: object.data,
-    class: object.classname) do %>
-    <% if object.size == "lg" %>
-      <%= pb_rails("title", props: { text: object.lg_date, size: 3 }) %>
-    <% elsif object.size == "sm" %>
-      <%= pb_rails("icon", props: { icon: "calendar", fixed_width: true }) %>
-      <%= pb_rails("title", props: { tag: "span", text: object.sm_date, size: 4 }) %>
+    class: object.classname,
+    aria: object.aria) do %>
+
+  <% if object.size == "md" %>
+    <!-- icon -->
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: {
+        color: "light",
+        tag: "div",
+      }) do %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+      <% end %>
+    <% end %>
+
+    <!-- day_of_week -->
+    <% if object.show_day_of_week %>
+      <%= pb_rails("title", props: { tag: "div", text: object.day_of_week, size: 4 }) %>
+      <%= pb_rails("body", props: {
+        text: "•",
+        color: "light",
+        tag: "div",
+      }) %>
+    <% end %>
+
+    <!-- month day, year -->
+
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
+      <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}", size: 4 }) %>
+    <%# if is current year %>
     <% else %>
-      <%= pb_rails("title", props: { text: object.xs_date, size: 4 }) %>
+      <%= pb_rails("title", props: { tag: "div", text: "#{object.month} #{object.day}, #{object.year}", size: 4 }) %>
+    <% end %>
+
+  <% else %>
+
+    <!-- icon -->
+    <% if object.show_icon %>
+      <%= pb_rails("body", props: {
+        color: "light",
+        tag: "div",
+      }) do %>
+        <%= pb_rails("icon", props: { icon: "calendar-alt", fixed_width: true }) %>
+      <% end %>
+    <% end %>
+
+    <!-- day_of_week -->
+    <% if object.show_day_of_week %>
+      <%= pb_rails("caption", props: { tag: "div", text: object.day_of_week }) %>
+      <%= pb_rails("caption", props: {
+        text: "•",
+        color: "light",
+        tag: "div",
+      }) %>
+    <% end %>
+
+    <!-- month day, year -->
+
+    <%# if not current year %>
+    <% if object.year.to_s == DateTime.now.year.to_s %>
+      <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}" }) %>
+    <%# if is current year %>
+    <% else %>
+      <%= pb_rails("caption", props: { tag: "span", text: "#{object.month} #{object.day}, #{object.year}" }) %>
+    <% end %>
   <% end %>
 <% end %>
-