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

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

@@ -1,11 +0,0 @@
-<%= pb_rails("caption") do %>
-  Block
-<% end %>
-
-<%= pb_rails("caption", props: { size: 'lg' }) do %>
-  Large Block
-<% end %>
-
-<%= pb_rails("caption", props: { size: 'xs' }) do %>
-  Subcaption Block
-<% end %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import { Caption } from '../../'
-
-const CaptionBlock = (props) => {
-  return (
-    <div>
-      <Caption {...props}>
-        {'Block'}
-      </Caption>
-
-      <Caption
-          {...props}
-          size="lg"
-      >
-        {'Large Block'}
-      </Caption>
-
-      <Caption
-          {...props}
-          size="xs"
-      >
-        {'Subcaption Block'}
-      </Caption>
-    </div>
-  )
-}
-
-export default CaptionBlock

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

@@ -1,24 +0,0 @@
- <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true
-  }) %>
-
-  <br><br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true,
-    alignment: "center"
-  }) %>
-
-  <br><br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true,
-    alignment: "right"
-  }) %>
-  

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { Date as FormattedDate } from '../..'
-
-const DateAlignment = (props) => {
-  return (
-    <div>
-      <FormattedDate
-          dayOfWeek
-          icon
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          alignment="center"
-          dayOfWeek
-          icon
-          value="2020-12-25"
-          {...props}
-      />
-
-      <br />
-
-      <FormattedDate
-          alignment="right"
-          value={new Date()}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DateAlignment

data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb

@@ -1,27 +0,0 @@
-<div>
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-  }) %>
-
-  <br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true
-  }) %>
-
-  <br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_day_of_week: true
-  }) %>
-
-  <br>
-
-  <%= pb_rails("date", props: {
-    date: DateTime.now,
-    show_icon: true,
-    show_day_of_week: true
-  }) %>
-</div>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -1,43 +0,0 @@
-import React from 'react'
-import { Date as FormattedDate } from '../..'
-
-const DateVariants = (props) => {
-  return (
-    <div>
-      <FormattedDate
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          showIcon
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          value="1995-12-25"
-          {...props}
-      />
-
-      <br />
-      <br />
-
-      <FormattedDate
-          showDayOfWeek
-          showIcon
-          value="1995-12-25"
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default DateVariants

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

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js

@@ -1,18 +0,0 @@
-import PbEnhancedElement from '../pb_enhanced_element'
-
-export default class PbFixedConfirmationToast extends PbEnhancedElement {
-  static get selector() {
-    return '.remove_toast'
-  }
-
-  connect() {
-    this.self = this.element
-    this.self.addEventListener('click', () => {
-      this.removeToast(this.self)
-    })
-  }
-
-  removeToast(elem) {
-    elem.parentNode.removeChild(elem)
-  }
-}

data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("nav", props: {borderless: true}) do %>
-  <%= pb_rails("nav/item", props: { text: "Photos", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Music", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Video", link: "#", active: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Files", link: "#" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_borderless_nav.jsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { Nav } from '../../'
-import NavItem from '../_item.jsx'
-
-const BorderlessNav = () => {
-  return (
-    <Nav borderless>
-      <NavItem
-          active
-          link="#"
-          text="All Categories"
-      />
-      <NavItem
-          link="#"
-          text="Food"
-      />
-      <NavItem
-          link="#"
-          text="Digital"
-      />
-      <NavItem
-          link="#"
-          text="Design Art"
-      />
-    </Nav>
-  )
-}
-
-export default BorderlessNav

data/app/pb_kits/playbook/pb_nav/docs/_with_img_nav.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("nav", props: {title: "Browse", link: "#"}) do %>
-  <%= pb_rails("nav/item", props: { image_url: "https://upload.wikimedia.org/wikipedia/commons/0/00/Apple_News_icon_%28macOS%29.png", text: "News Feed"  }) %>
-  <%= pb_rails("nav/item", props: { image_url: "https://p7.hiclipart.com/preview/928/339/723/messages-iphone-apple-imessage-iphone-thumbnail.jpg", link: "#", text: "Messages", active: true }) %>
-  <%= pb_rails("nav/item", props: { image_url: "https://www.clipartmax.com/png/middle/103-1038653_circle-icons-calendar-svg-event-icon.png", icon_right: "angle-down", link: "#", text: "Events" }) %>
-  <%= pb_rails("nav/item", props: { image_url: "https://www.pngitem.com/pimgs/m/228-2289227_find-friends-icon-png-image-iphone-find-my.png", link: "#", text: "Friends" }) %>
-  <%= pb_rails("nav/item", props: { image_url: "https://img.favpng.com/18/5/20/blue-human-behavior-silhouette-area-communication-png-favpng-wLT3QYknSwc68uu9GAUHGS5FY_t.jpg", icon_right: "angle-down", link: "#", text: "Groups" }) %>
-<% end %>