playbook_ui 7.4.0.pre.alpha5 → 7.4.0.pre.alpha6

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

@@ -1,19 +0,0 @@
-import React from 'react'
-import { Collapsible } from '../..'
-
-const CollapsibleDefault = () => (
-  <Collapsible>
-    <Collapsible.Main>
-      <div>{'Main Section'}</div>
-    </Collapsible.Main>
-    <Collapsible.Content>
-      <div>
-        {
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel erat sed purus hendrerit viverra. Duis et vestibulum metus. Sed consequat ut ante non vehicula. Etiam nunc massa, pharetra vel quam id, posuere rhoncus quam. Quisque imperdiet arcu enim, nec aliquet justo auctor eget. Curabitur in metus nec nunc rhoncus faucibus vitae ac elit. Nulla facilisi. Vestibulum quis pretium nulla. Nulla ut accumsan velit. Duis varius urna sed sem tempor, sit amet fermentum nibh auctor. Praesent lorem arcu, egestas non ante quis, placerat pellentesque lectus.Vestibulum lacinia ipsum quis venenatis tristique. Vivamus suscipit, libero eu fringilla egestas, orci urna commodo arcu, vel gravida turpis ipsum molestie nibh. Donec cursus eu ante sagittis ultrices. Phasellus id sagittis risus. Mauris dapibus neque faucibus, tempor ligula vel, cursus ante. Donec faucibus gravida porta. Nullam egestas est quis aliquam feugiat. Sed eget metus diam. Cras eget placerat libero.'
-        }
-      </div>
-    </Collapsible.Content>
-  </Collapsible>
-)
-
-export default CollapsibleDefault

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

@@ -1,9 +0,0 @@
-examples:
-
-  rails:
-  - collapsible_default: Light
-  - collapsible_dark: Dark
-
-  react:
-  - collapsible_default: Light
-  - collapsible_dark: Dark

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

@@ -1,2 +0,0 @@
-export { default as CollapsibleDefault } from './_collapsible_default.jsx'
-export { default as CollapsibleDark } from './_collapsible_dark.jsx'

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

@@ -1,82 +0,0 @@
-import PbEnhancedElement from '../pb_enhanced_element'
-
-const MAIN_SELECTOR = '[data-collapsible-main]'
-const CONTENT_SELECTOR = '[data-collapsible-content]'
-const DOWN_ARROW_SELECTOR = '.fa-chevron-down'
-const UP_ARROW_SELECTOR = '.fa-chevron-up'
-
-export default class PbCollapsible extends PbEnhancedElement {
-  static get selector() {
-    return MAIN_SELECTOR
-  }
-
-  connect() {
-    this.element.addEventListener('click', () => {
-      this.toggle(this.target)
-    })
-    this.displayDownArrow()
-  }
-
-  get target() {
-    return this.element.parentNode.querySelector(CONTENT_SELECTOR)
-  }
-
-  // Show an element
-  show(elem) {
-  // Get the natural height of the element
-    const getHeight = () => {
-      elem.style.display = 'block' // Make it visible
-      const height = elem.scrollHeight + 'px' // Get it's height
-      elem.style.display = '' //  Hide it again
-      return height
-    }
-
-    const height = getHeight() // Get the natural height
-    elem.classList.add('is-visible') // Make the element visible
-    elem.style.height = height // Update the max-height
-
-    // Once the transition is complete, remove the inline max-height so the content can scale responsively
-    window.setTimeout(() => {
-      elem.style.height = ''
-    }, 300)
-  }
-  // Hide an element
-  hide(elem) {
-    // Give the element a height to change from
-    elem.style.height = elem.scrollHeight + 'px'
-    // Set the height back to 0
-    window.setTimeout(() => {
-      elem.style.height = '0'
-      elem.style.paddingTop = '0'
-      elem.style.paddingBottom = '0'
-    }, 1)
-
-    // When the transition is complete, hide it
-    window.setTimeout(() => {
-      elem.classList.remove('is-visible')
-    }, 300)
-  }
-
-  // Toggle element visibility
-  toggle(elem) {
-    // If the element is visible, hide it
-    if (elem.classList.contains('is-visible')) {
-      this.hide(elem)
-      this.displayDownArrow()
-      return
-    }
-    // Otherwise, show it
-    this.show(elem)
-    this.displayUpArrow()
-  }
-
-  displayDownArrow() {
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'none'
-  }
-
-  displayUpArrow() {
-    this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
-    this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
-  }
-}

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_time/_date_time.html.erb

@@ -1,31 +0,0 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname) do %>
-
-    <%= pb_rails("flex", props: { 
-      orientation: "row", 
-      horizontal: object.align, 
-      vertical: "baseline" }) do %>
-
-      <%= pb_rails("date", props: {
-        dark: object.dark,
-        date: object.date,
-        show_day_of_week: object.show_day_of_week,
-        size: object.size,
-        timezone: object.timezone,
-      }) %>
-
-      <%= pb_rails("time", props: {
-        margin_left: "sm",
-        show_icon: object.show_icon,
-        size: object.size,
-        tag: "caption",
-        time: object.date,
-        timezone: object.timezone,
-      }) %>
-
-    <% end %>
-
-<% end %>

data/app/pb_kits/playbook/pb_date_time/_date_time.jsx

@@ -1,73 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
-import {  Flex, Date as FormattedDate, Time } from '../'
-
-type DateTimeProps = {
-  align?: "left" | "center" | "right",
-  aria?: object,
-  className?: string,
-  data?: object,
-  datetime: string,
-  id?: string,
-  size?: "sm" | "md",
-  showDayOfWeek: boolean,
-  showIcon?: boolean,
-  timeZone?: string
-}
-
-const DateTime = (props: DateTimeProps) => {
-  const {
-    align = 'left',
-    aria = {},
-    className,
-    data = {},
-    showDayOfWeek = false,
-    datetime,
-    id,
-    showIcon = false,
-    size = 'md',
-    timeZone = 'America/New_York',
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(
-    buildCss('pb_date_time', size),
-    globalProps(props),
-    className
-  )
-
-  return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      <Flex
-          horizontal={align}
-          vertical="baseline"
-      >
-        <FormattedDate
-            datetime={datetime}
-            showDayOfWeek={showDayOfWeek}
-            size={size}
-            timeZone={timeZone}
-        />
-        <Time
-            date={new Date()}
-            marginLeft="sm"
-            showIcon={showIcon}
-            size={size}
-            timeZone={timeZone}
-        />
-      </Flex>
-    </div>
-  )
-}
-
-export default DateTime

data/app/pb_kits/playbook/pb_date_time/_date_time.scss

@@ -1,26 +0,0 @@
-[class^=pb_date_time] {
-  [class*=pb_date_kit] > div:last-child {
-    margin-right: 0 !important;
-  }
-  &[class*=_center] {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-  }
-  &[class*=_right]  {
-    display: flex;
-    justify-content: flex-end;
-    text-align: right;
-  }
-  &[class*=dark] {
-    [class^=pb_title_kit] {
-        color: $text_dk_default !important;
-    }
-    & * {
-      @include caption_dark;
-    }
-    .pb_time {
-      color: $text_dk_default;
-    }
-  }
-}

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -1,29 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDateTime
-    class DateTime
-      include Playbook::Props
-
-      partial "pb_date_time/date_time"
-
-      prop :date, type: Playbook::Props::Date,
-                  default: ::DateTime.current
-      prop :align, type: Playbook::Props::Enum,
-                   values: %w[left center right],
-                   default: "left"
-      prop :timezone, type: Playbook::Props::String,
-                      default: "America/New_York"
-      prop :size, type: Playbook::Props::Enum,
-                  values: %w[sm md],
-                  default: "md"
-      prop :dark, type: Playbook::Props::Boolean, default: false
-      prop :show_icon, type: Playbook::Props::Boolean, default: false
-      prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
-
-      def classname
-        generate_classname("pb_date_time_kit", align)
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb

@@ -1,17 +0,0 @@
-<%= pb_rails("date_time", props: {
-    date: DateTime.now
-}) %>
-    
-<br />
-
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    align:"center"
-}) %>
-    
-<br />
-
-<%= pb_rails("date_time", props: {
-    date: DateTime.now,
-    align:"right"
-}) %>

data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import DateTime from '../_date_time.jsx'
-
-const DateTimeAlign = (props) => (
-  <div>
-    <DateTime
-        datetime={new Date()}
-        dayOfWeek
-        icon
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        align="center"
-        datetime={new Date()}
-        dayOfWeek
-        icon
-        {...props}
-    />
-
-    <br />
-
-    <DateTime
-        align="right"
-        datetime={new Date()}
-        dayOfWeek
-        icon
-        {...props}
-    />
-  </div>
-)
-
-export default DateTimeAlign