playbook_ui 4.15.0 → 4.15.1.alpha1

data/app/pb_kits/playbook/pb_progress_step/progress_step.rb

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbProgressStep
-    class ProgressStep
-      include Playbook::Props
-
-      partial "pb_progress_step/progress_step"
-
-      prop :orientation, type: Playbook::Props::Enum,
-                         values: %w[vertical horizontal],
-                         default: "horizontal"
-      prop :icon, type: Playbook::Props::Boolean,
-                  default: false
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-
-      def classname
-        generate_classname("pb_progress_step_kit", orientation, icon_class, dark_class)
-      end
-
-    private
-
-      def icon_class
-        icon === true ? "icon" : nil
-      end
-
-      def dark_class
-        dark === true ? "dark" : nil
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_progress_step/progress_step_item.rb

@@ -1,19 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbProgressStep
-    class ProgressStepItem
-      include Playbook::Props
-
-      partial "pb_progress_step/progress_step_item"
-
-      prop :status, type: Playbook::Props::Enum,
-                    values: %w[complete active inactive],
-                    default: "inactive"
-
-      def classname
-        generate_classname("pb_progress_step_item_kit", status)
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -1,8 +0,0 @@
-import React from 'react'
-import { Timestamp } from '../../'
-
-const TimestampDefault = () => (
-  <Timestamp text="20 seconds ago" />
-)
-
-export default TimestampDefault

data/app/pb_kits/playbook/pb_title_detail/docs/_title_detail_default.jsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { TitleDetail } from '../../'
-
-const TitleDetailDefault = () => (
-  <div>
-    <TitleDetail
-        detail="Commits data and history"
-        title="Email Notifications"
-    />
-
-    <TitleDetail
-        align="center"
-        detail="Commits data and history"
-        title="Email Notifications"
-    />
-
-    <TitleDetail
-        align="right"
-        detail="Commits data and history"
-        title="Email Notifications"
-    />
-
-  </div>
-)
-
-export default TitleDetailDefault

data/app/pb_kits/playbook/pb_tooltip/_tooltip.html.erb

@@ -1,10 +0,0 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname) do %>
-    <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
-      <%= capture(&object.children) %>
-      <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
-    </div>
-
-<% end %>

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -1,105 +0,0 @@
-@import "../tokens/positioning";
-@import "../tokens/colors";
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-[class^="pb_tooltip_kit"] {
-  .tooltip_tooltip {
-    display: none;
-    opacity: 0;
-    left: 0;
-    animation-name: fadeIn;
-    animation-duration: 150ms;
-    animation-timing-function: linear;
-    animation-fill-mode: forwards;
-
-    &.flipped {
-      margin-top: 15px;
-      .arrow {
-        top: -35%;
-        border-color: transparent transparent $white transparent;
-      }
-    }
-
-    &.react {
-      .arrow {
-        top: 78%;
-      }
-      &.flipped {
-        .arrow {
-          top: -8%;
-        }
-      }
-    }
-
-    .arrow {
-      content: " ";
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      border-color: $white transparent transparent transparent;
-      border-style: solid;
-      border-width: 10px;
-      margin-bottom: 50px;
-      margin-left: -10px;
-    }
-    &.show {
-      opacity: 1;
-      display: block;
-      z-index: $z_9;
-      margin-bottom: $space_sm;
-      background-color: $white;
-      padding: $space_xs $space_sm $space_xs $space_sm;
-      box-shadow: $shadow_deeper;
-      border-radius: $border_rad_light;
-
-      &.fade_out {
-        animation-name: fadeOut;
-        animation-duration: 150ms;
-        animation-timing-function: linear;
-        animation-fill-mode: forwards;
-      }
-    }
-  }
-  &[class*=_dark]{
-    .tooltip_tooltip{
-      color: $white;
-      background-color: rgba($black, $opacity_9);
-
-
-      &.show {
-      }
-      .arrow {
-        border-color: $black transparent transparent transparent;
-        opacity: $opacity_9;
-      }
-      &.flipped {
-        .arrow {
-          border-color: transparent transparent $black transparent;
-          opacity: $opacity_9;
-        }
-      }
-    }
-  }
-}
-
-.tooltip_tooltip.top {
-  padding: ($space_xs - 3px) 0;
-}

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

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

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

@@ -1,5 +0,0 @@
-examples:
-
-  rails:
-  - tooltip_default: Default
-  - tooltip_white: White

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

@@ -1,80 +0,0 @@
-import PbEnhancedElement from '../pb_enhanced_element'
-import Popper from 'popper.js'
-
-const TOOLTIP_OFFSET = '0,0'
-const TOOLTIP_TIMEOUT = 250
-
-export default class PbTooltip extends PbEnhancedElement {
-  static get selector() {
-    return '[data-pb-tooltip-kit]'
-  }
-
-  connect() {
-    this.popper = new Popper(this.triggerElement, this.tooltip, {
-      placement: this.position,
-      modifiers: {
-        offset: {
-          offset: TOOLTIP_OFFSET,
-        },
-        arrow: {
-          element: `#${this.tooltipId}-arrow`,
-        },
-      },
-      onUpdate: (p) => {
-        p.instance.popper.classList.toggle('flipped', p.flipped)
-      },
-    })
-
-    this.tooltip.addEventListener('mouseleave', () => {
-      this.hideTooltip()
-    })
-
-    this.triggerElement.addEventListener('mouseenter', () => {
-      this.mouseenterTimeout = setTimeout(() => {
-        this.popper.scheduleUpdate()
-        this.showTooltip()
-      }, TOOLTIP_TIMEOUT)
-
-      this.triggerElement.addEventListener('mouseleave', (event) => {
-        clearTimeout(this.mouseenterTimeout)
-        if (event.toElement.closest(`#${this.tooltipId}`) !== this.tooltip) {
-          setTimeout(() => {
-            this.hideTooltip()
-          }, 0)
-        }
-      }, { once: true })
-    })
-  }
-
-  showTooltip() {
-    this.tooltip.classList.add('show')
-  }
-
-  hideTooltip() {
-    this.tooltip.classList.remove('show')
-  }
-
-  toggleTooltip() {
-    this.tooltip.classList.toggle('show')
-  }
-
-  get triggerElement() {
-    return this._triggerElement = (this._triggerElement || document.querySelector(`#${this.triggerElementId}`))
-  }
-
-  get tooltip() {
-    return this._tooltip = (this._tooltip || this.element.querySelector(`#${this.tooltipId}`))
-  }
-
-  get position() {
-    return this.element.dataset.pbTooltipPosition
-  }
-
-  get triggerElementId() {
-    return this.element.dataset.pbTooltipTriggerElementId
-  }
-
-  get tooltipId() {
-    return this.element.dataset.pbTooltipTooltipId
-  }
-}

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

@@ -1,34 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbTooltip
-    class Tooltip
-      include Playbook::Props
-      partial "pb_tooltip/tooltip"
-
-      prop :position
-      prop :trigger_element_id
-      prop :tooltip_id
-      prop :dark, type: Playbook::Props::Boolean,
-                          default: false
-
-      def classname
-        generate_classname("pb_tooltip_kit", dark_class)
-      end
-
-      def data
-        Hash(values[:data]).merge(
-          pb_tooltip_kit: true,
-          pb_tooltip_position: position,
-          pb_tooltip_trigger_element_id: trigger_element_id,
-          pb_tooltip_tooltip_id: tooltip_id,
-        )
-      end
-
-      private
-      def dark_class
-        dark ? "dark" : nil
-      end
-    end
-  end
-end