playbook_ui 7.0.1.pre.alpha14 → 7.0.1.pre.alpha15

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/docs/_button_toolbar_vertical.html.erb

@@ -1,11 +0,0 @@
-<div class="pb--doc-demo-row">
-  <div>
-    <%= pb_rails("button_toolbar", props: { orientation: "vertical", connected: true }) do %>
-      <%= pb_rails("button", props: { text: "Field" }) %>
-      <%= pb_rails("button", props: { text: "Retail"}) %>
-      <%= pb_rails("button", props: { text: "Event"}) %>
-      <%= pb_rails("button", props: { text: "Training"}) %>
-      <%= pb_rails("button", props: { text: "Not Working"}) %>
-    <% end %>
-  </div>
-</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { Button, ButtonToolbar } from '../..'
-
-const ButtonToolbarVertical = () => (
-  <div>
-    <ButtonToolbar
-        connected
-        orientation="vertical"
-    >
-      <Button
-          text="Field"
-      />
-      <Button
-          text="Retail"
-      />
-      <Button
-          text="Event"
-      />
-      <Button
-          text="Training"
-      />
-      <Button
-          text="Not Working"
-      />
-    </ButtonToolbar>
-  </div>
-)
-
-export default ButtonToolbarVertical

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.html.erb

@@ -1,11 +0,0 @@
-<div class="pb--doc-demo-row">
-  <div>
-    <%= pb_rails("button_toolbar", props: { orientation: "vertical", connected: true }) do %>
-      <%= pb_rails("button", props: { text: "Field", variant: "secondary" }) %>
-      <%= pb_rails("button", props: { text: "Retail", variant: "secondary" }) %>
-      <%= pb_rails("button", props: { text: "Event", variant: "secondary" }) %>
-      <%= pb_rails("button", props: { text: "Training", variant: "secondary" }) %>
-      <%= pb_rails("button", props: { text: "Not Working", variant: "secondary" }) %>
-    <% end %>
-  </div>
-</div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_vertical_secondary.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { Button, ButtonToolbar } from '../..'
-
-const ButtonToolbarVerticalSecondary = () => (
-  <div>
-    <ButtonToolbar
-        connected
-        orientation="vertical"
-    >
-      <Button
-          text="Field"
-          variant="secondary"
-      />
-      <Button
-          text="Retail"
-          variant="secondary"
-      />
-      <Button
-          text="Event"
-          variant="secondary"
-      />
-      <Button
-          text="Training"
-          variant="secondary"
-      />
-      <Button
-          text="Not Working"
-          variant="secondary"
-      />
-    </ButtonToolbar>
-  </div>
-)
-
-export default ButtonToolbarVerticalSecondary

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_allow_input.html.erb

@@ -1,4 +0,0 @@
-<%= pb_rails("date_picker", props: {
-  allow_input: true,
-  picker_id: "date-picker-read-only"
-}) %>

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

@@ -1,13 +0,0 @@
-import React from 'react'
-import { DatePicker } from '../..'
-
-const DatePickerAllowInput = () => (
-  <div>
-    <DatePicker
-        allowInput
-        pickerId="date-picker-read-only"
-    />
-  </div>
-)
-
-export default DatePickerAllowInput

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

@@ -1 +0,0 @@
-By default the date picker input can only be modified by picking a date on the calendar.  This prop allows your users to manually type in the date.

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dark.html.erb

@@ -1,4 +0,0 @@
-<%= pb_rails("date_picker", props: { 
-  dark: true,
-  picker_id: "date-picker-dark"
-}) %>

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

@@ -1,13 +0,0 @@
-import React from 'react'
-import { DatePicker } from '../../'
-
-const DatePickerDark = () => (
-  <div>
-    <DatePicker
-        dark
-        pickerId="date-picker-dark"
-    />
-  </div>
-)
-
-export default DatePickerDark

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_summary.jsx

@@ -1,45 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import { Body, Flex, FlexItem, Icon } from '../..'
-
-const TypeaheadWithPillsAsyncSummary = () => {
-  return (
-    <>
-      <Flex
-          marginBottom="lg"
-          vertical="center"
-      >
-        <FlexItem>
-          <Body
-              color="light"
-          >
-            <Icon
-                icon="info-circle"
-                marginRight="xs"
-            />
-          </Body>
-        </FlexItem>
-        <FlexItem>
-          <Body
-              color="light"
-          >
-            {'If the data field '}
-            <code>{'imageUrl'}</code>
-            {' is present, '}
-            <code>{'FormPill'}</code>
-            {' will receive that field as a prop and display the image. '}
-            <br />
-            {'Additionally, you can also leverage the callback prop: '}
-            <code>{'onMultiValueClick'}</code>
-            {' to perform custom work when a '}
-            <code>{'MultiValue'}</code>
-            {' item is clicked.'}
-          </Body>
-        </FlexItem>
-      </Flex>
-    </>
-  )
-}
-
-export default TypeaheadWithPillsAsyncSummary

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_summary.jsx

@@ -1,27 +0,0 @@
-// @flow
-
-import React from 'react'
-import { Body, Icon } from '../..'
-
-const TypeaheadWithPillsSummary = () => {
-  return (
-    <>
-      <Body
-          color="light"
-          marginBottom="lg"
-      >
-        <Icon
-            icon="info-circle"
-            marginRight="xs"
-        />
-        {'Typeahead kit is data-driven. The minimum default fields are '}
-        <code>{'label'}</code>
-        {' and '}
-        <code>{'value'}</code>
-        {'.'}
-      </Body>
-    </>
-  )
-}
-
-export default TypeaheadWithPillsSummary