playbook_ui 7.1.1.pre.alpha1 → 7.3.0.pre.alpha2

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 %>); background-size: cover">
-        <%= 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,64 +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 = '',
-    padding = 'md',
-    tag = 'div',
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_background_kit'), className, globalProps(props, { padding }))
-  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 + `bg_${backgroundColor}`}>
-          { children }
-        </div>
-      </If>
-    </Tag>
-  )
-}
-
-export default Background

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

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

@@ -1,36 +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 :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

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

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

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

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

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

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss

@@ -1,57 +0,0 @@
-@import "./button_toolbar_mixins";
-@import "../tokens/colors";
-@import "../tokens/opacity";
-
-[class^=pb_button_toolbar]{
-
-  // Vertical =============
-
-  &[class*=_vertical] {
-    &[class*=_primary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $primary_dark)
-      }
-    }
-    &[class*=_secondary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $secondary_dark)
-      }
-    }
-  }
-
-  // Horizontal =============
-
-  &[class*=_horizontal] {
-    &[class*=_primary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $primary_dark)
-      }
-    }
-    &[class*=_secondary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $secondary_dark)
-      }
-    }
-  }
-  & > [class^=pb_button]:not(:first-child):hover::before,
-  [class^=pb_button]:hover + [class^=pb_button]::before {
-    opacity: 0
-  }
-
-  // Hover =============
-
-  [class^=pb_button].dark  {
-    @media (hover:hover) {
-      &:hover {
-        background-color:darken($royal, 20%);
-      }
-    }
-    &[class*=secondary] {
-      @media (hover:hover) {
-        &:hover {
-          background-color:rgba($primary_action, $opacity_3)
-        }
-      }
-    }
-  }
-}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss

@@ -1,27 +0,0 @@
-@import "../tokens/spacing";
-@import "../tokens/colors";
-@import "../tokens/opacity";
-
-$primary_border:      rgba($white, $opacity_1);
-$secondary_border:    rgba($white, $opacity_10);
-$primary_dark:        rgba($bg_dark, $opacity_2);
-$secondary_dark:      rgba($bg_dark, $opacity_2);
-
-@mixin toolbar_border($horizontal: true, $color: $color) {
-    @if $horizontal == true {
-        height: 2px;
-        width: calc(100% + #{$space_md} + #{$space_md});
-        top: calc(-#{$space_xs} - 1px);
-        left: -$space_md;
-    } @else {
-        width: 2px;
-        height: $space_md;
-        top: 0;
-        right: calc(#{$space_lg} + 2px);
-    }
-    background-color: $color;
-    content: '';
-    position: relative;
-    bottom: 0;
-    display: block;
-}

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

@@ -1,10 +0,0 @@
-<%= pb_rails("checkbox" , props: {
-  text: "Checkbox with Options",
-  input_options: {
-    id: "checkbox-id",
-    name: "checkbox-name",
-    value: "checkbox-value",
-    class: "checkbox-class",
-    checked: true
-  }
-}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -1 +0,0 @@
-The `defaultDate`/`default_date` prop has a null or empty string value by default.  You can pass a string or date object if you want a default value on page load.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import { DatePicker, LabelValue } from '../..'
-
-const DatePickerOnChange = () => {
-  const today = new Date()
-  const [dateString, setDateString] = useState(today.toLocaleDateString())
-  const [dateObj, setDateObj] = useState([today])
-
-  const changeHandler = (dateStr, selectedDates) => {
-    setDateString(dateStr)
-    setDateObj(selectedDates)
-  }
-
-  return (
-    <div>
-      <DatePicker
-          defaultDate={dateString}
-          marginBottom="lg"
-          onChange={changeHandler}
-          pickerId="date-picker-onchange"
-      />
-      <LabelValue
-          label="Date Object"
-          marginBottom="lg"
-          value={dateObj[0] ? dateObj[0].toString() : ''}
-      />
-      <LabelValue
-          label="Date String"
-          value={dateString}
-      />
-    </div>
-  )
-}
-export default DatePickerOnChange

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md

@@ -1,3 +0,0 @@
-Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
-
-The first, `dateStr`, is a string of the chosen date.  The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb

@@ -1,21 +0,0 @@
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Error Message",
-  status: "error",
-  closeable: true
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Items Successfully Moved",
-  status: "success",
-  closeable: true
-})%>
-
-<br><br>
-
-<%= pb_rails("fixed_confirmation_toast", props: {
-  text: "Scan to Assign Selected Items",
-  status: "neutral",
-  closeable: true
-})%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { FixedConfirmationToast } from '../../'
-
-const FixedConfirmationToastClose = () => {
-  return (
-    <div>
-      <div>
-        <FixedConfirmationToast
-            closeable
-            status="error"
-            text="Error Message"
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            closeable
-            status="success"
-            text="Items Successfully Moved"
-        />
-      </div>
-
-      <br />
-
-      <div>
-        <FixedConfirmationToast
-            closeable
-            status="neutral"
-            text="Scan to Assign Selected Items"
-        />
-      </div>
-    </div>
-  )
-}
-
-export default FixedConfirmationToastClose