playbook_ui 7.3.0 → 7.4.0.pre.alpha6

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb

@@ -1,46 +1,10 @@
-<%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
-  <%= pb_rails("flex/flex_item") do %>
-    <span id='regular-tooltip-1'>Hover here (Top)</span>
-
-    <%= pb_rails("tooltip", props: {
-      trigger_element_id: "regular-tooltip-1",
-      tooltip_id: "tooltip-1",
-      position: 'top'
-    }) do %>
-        Whoa. I'm a tooltip.
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <span id='regular-tooltip-2'>Hover here (Bottom)</span>
-    <%= pb_rails("tooltip", props: {
-      trigger_element_id: "regular-tooltip-2",
-      tooltip_id: "tooltip-2",
-      position: 'bottom'
-    }) do %>
-        Whoa. I'm a tooltip.
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <span id='regular-tooltip-3'>Hover here (Right)</span>
-    <%= pb_rails("tooltip", props: {
-      trigger_element_id: "regular-tooltip-3",
-      tooltip_id: "tooltip-3",
-      position: 'right'
-    }) do %>
-        Whoa. I'm a tooltip.
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
-    <span id='regular-tooltip-4'>Hover here (Left)</span>
-    <%= pb_rails("tooltip", props: {
-      trigger_element_id: "regular-tooltip-4",
-      tooltip_id: "tooltip-4",
-      position: 'left'
-    }) do %>
-        Whoa. I'm a tooltip.
-    <% end %>
-  <% end %>
-<% end %>
+<span id='regular-tooltip-2'>Hover over me.</span>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "regular-tooltip-2",
+  tooltip_id: "tooltip-2",
+  position: 'top',
+  dark: true,
+}) do %>
+    Whoa. I'm a tooltip.
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb

@@ -1,9 +1,9 @@
-<span id='regular-tooltip-5'>I am a white tooltip.</span>
+<span id='regular-tooltip-1'>I am a white tooltip.</span>
 
 <%= pb_rails("tooltip", props: {
-  trigger_element_id: "regular-tooltip-5",
-  tooltip_id: "tooltip-5",
+  trigger_element_id: "regular-tooltip-1",
+  tooltip_id: "tooltip-1",
   position: 'top'
 }) do %>
     Whoa. I'm a white tooltip.
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :trigger_element_id
       prop :tooltip_id
       prop :dark, type: Playbook::Props::Boolean,
-                  default: false
+                          default: false
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
@@ -25,8 +25,7 @@ module Playbook
         )
       end
 
-    private
-
+      private
       def dark_class
         dark ? "dark" : nil
       end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.3.0"
+  VERSION = "7.4.0.pre.alpha6"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.3.0
+  version: 7.4.0.pre.alpha6
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-10-23 00:00:00.000000000 Z
+date: 2020-10-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -445,23 +445,6 @@ files:
 - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
 - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
 - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
-- app/pb_kits/playbook/pb_background/_background.html.erb
-- app/pb_kits/playbook/pb_background/_background.jsx
-- app/pb_kits/playbook/pb_background/_background.scss
-- app/pb_kits/playbook/pb_background/background.rb
-- app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb
-- app/pb_kits/playbook/pb_background/docs/_background_dark.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb
-- app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
-- app/pb_kits/playbook/pb_background/docs/_background_image.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
-- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
-- app/pb_kits/playbook/pb_background/docs/_background_white.jsx
-- app/pb_kits/playbook/pb_background/docs/_description.md
-- app/pb_kits/playbook/pb_background/docs/example.yml
-- app/pb_kits/playbook/pb_background/docs/index.js
 - app/pb_kits/playbook/pb_badge/_badge.html.erb
 - app/pb_kits/playbook/pb_badge/_badge.jsx
 - app/pb_kits/playbook/pb_badge/_badge.scss
@@ -685,14 +668,10 @@ files:
 - app/pb_kits/playbook/pb_date/_date.jsx
 - app/pb_kits/playbook/pb_date/_date.scss
 - app/pb_kits/playbook/pb_date/date.rb
-- app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
-- app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -780,19 +759,6 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_stacked/docs/index.js
-- app/pb_kits/playbook/pb_date_time/_date_time.html.erb
-- app/pb_kits/playbook/pb_date_time/_date_time.jsx
-- app/pb_kits/playbook/pb_date_time/_date_time.scss
-- app/pb_kits/playbook/pb_date_time/date_time.rb
-- app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
-- app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx
-- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb
-- app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
-- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
-- app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
-- app/pb_kits/playbook/pb_date_time/docs/_description.md
-- app/pb_kits/playbook/pb_date_time/docs/example.yml
-- app/pb_kits/playbook/pb_date_time/docs/index.js
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
@@ -1496,6 +1462,20 @@ files:
 - app/pb_kits/playbook/pb_selectable_icon/docs/example.yml
 - app/pb_kits/playbook/pb_selectable_icon/docs/index.js
 - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb
+- app/pb_kits/playbook/pb_selectable_list/_item.jsx
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss
+- app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb
+- app/pb_kits/playbook/pb_selectable_list/docs/_description.md
+- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb
+- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx
+- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb
+- app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx
+- app/pb_kits/playbook/pb_selectable_list/docs/example.yml
+- app/pb_kits/playbook/pb_selectable_list/docs/index.js
+- app/pb_kits/playbook/pb_selectable_list/selectable_list.rb
+- app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
 - app/pb_kits/playbook/pb_source/_source.html.erb
 - app/pb_kits/playbook/pb_source/_source.jsx
 - app/pb_kits/playbook/pb_source/_source.scss
@@ -1900,9 +1880,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.7.3

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

@@ -1,14 +0,0 @@
-<%= 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

@@ -1,63 +0,0 @@
-/* @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

@@ -1,35 +0,0 @@
-@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

@@ -1,35 +0,0 @@
-# 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

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

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

@@ -1,13 +0,0 @@
-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

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

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

@@ -1,13 +0,0 @@
-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

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

@@ -1,30 +0,0 @@
-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

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