playbook_ui 4.14.0 → 4.15.0

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepDefault = () => (
+  <div>
+    <ProgressStep icon>
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+    <br />
+
+    <ProgressStep>
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+    <br />
+
+    <ProgressStep>
+      <ProgressStepItem status="complete">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        {'Child'}
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepDefault

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.html.erb

@@ -0,0 +1,33 @@
+<%= pb_rails("progress_step", props: {orientation: "vertical", icon: true}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br />
+
+<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+  <% end %>
+<% end %>
+
+<br />
+
+<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
+    Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
+    Child
+  <% end %>
+  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
+    Child
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import ProgressStep from '../_progress_step.jsx'
+import ProgressStepItem from '../_progress_step_item.jsx'
+
+const ProgressStepVertical = () => (
+  <div>
+    <ProgressStep
+        icon
+        orientation="vertical"
+    >
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+
+    <ProgressStep orientation="vertical">
+      <ProgressStepItem status="complete" />
+      <ProgressStepItem status="active" />
+      <ProgressStepItem status="inactive" />
+    </ProgressStep>
+
+    <br />
+
+    <ProgressStep orientation="vertical">
+      <ProgressStepItem status="complete">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="active">
+        {'Child'}
+      </ProgressStepItem>
+      <ProgressStepItem status="inactive">
+        {'Child'}
+      </ProgressStepItem>
+    </ProgressStep>
+  </div>
+)
+
+export default ProgressStepVertical

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - progress_step_default: Default
+  - progress_step_vertical: Vertical
+  - progress_step_dark: Dark
+  
+  
+  react:
+  - progress_step_default: Default
+  - progress_step_vertical: Vertical
+  - progress_step_dark: Dark

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

@@ -0,0 +1,3 @@
+export { default as ProgressStepDefault } from './_progress_step_default.jsx'
+export { default as ProgressStepVertical } from './_progress_step_vertical.jsx'
+export { default as ProgressStepDark } from './_progress_step_dark.jsx'

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

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

@@ -0,0 +1,19 @@
+# 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_stat_change/docs/_stat_change_default.html.erb

@@ -14,5 +14,5 @@
 
 <%= pb_rails("stat_change", props: {
   change: "neutral",
-  value: 98
+  value: 102
 }) %>

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -20,7 +20,7 @@ const StatChangeDefault = () => {
 
       <StatChange
           change="neutral"
-          value={98}
+          value={102}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_stat_change/stat_change.rb

@@ -10,7 +10,7 @@ module Playbook
       prop :change, type: Playbook::Props::Enum,
                     values: %w[neutral increase decrease],
                     default: "neutral"
-      prop :value, type: Playbook::Props::Percentage
+      prop :value, type: Playbook::Props::Numeric
 
       def status
         case change

data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx

@@ -1,21 +1,46 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import {
+  Caption,
+} from '../'
+
+import {
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
 
-class Timestamp extends React.Component {
-  render() {
-    return (
-      <div className="pb_timestamp">
-        <span>{'TIMESTAMP CONTENT'}</span>
-      </div>
-    )
-  }
+type TimestampProps = {
+  id?: String,
+  data?: object,
+  className?: String,
+  text?: String,
 }
 
-Timestamp.propTypes = propTypes
+const Timestamp = ({
+  id,
+  className,
+  data = {},
+  text,
+}: TimestampProps) => {
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_timestamp_kit')
+
+  return (
+    <div
+        {...dataProps}
+        className={classnames(className, pbCss)}
+        id={id}
+    >
+      <Caption
+          size="xs"
+          tag="span"
+          text={text}
+      />
+    </div>
+  )
+}
 
 export default Timestamp

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

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

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

@@ -1,7 +1,7 @@
 examples:
-  
+
   rails:
   - timestamp_default: Default
-  
-  
+
   react:
+  - timestamp_default: Default

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

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

data/app/pb_kits/playbook/pb_title_detail/_title_detail.jsx

@@ -1,21 +1,54 @@
+/* @flow */
+
 import React from 'react'
-import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
-const propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string,
-}
+import {
+  Body,
+  Title,
+} from '../'
+
+import {
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
 
-class TitleDetail extends React.Component {
-  render() {
-    return (
-      <div className="pb_title_detail">
-        <span>{'TITLE DETAIL CONTENT'}</span>
-      </div>
-    )
-  }
+type TitleDetailProps = {
+  align?: 'left' | 'center' | 'right',
+  className?: String,
+  data?: object,
+  detail: String,
+  id?: String,
+  title: String,
 }
 
-TitleDetail.propTypes = propTypes
+const TitleDetail = ({
+  align = 'left',
+  className,
+  data = {},
+  detail,
+  id,
+  title,
+}: TitleDetailProps) => {
+  const dataProps = buildDataProps(data)
+  const pbCss = buildCss('pb_title_detail_kit', align)
+
+  return (
+    <div
+        {...dataProps}
+        className={classnames(className, pbCss)}
+        id={id}
+    >
+      <Title
+          size={4}
+          text={title}
+      />
+      <Body
+          color="light"
+          text={detail}
+      />
+    </div>
+  )
+}
 
 export default TitleDetail

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

@@ -0,0 +1,26 @@
+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_title_detail/docs/example.yml

@@ -1,7 +1,7 @@
 examples:
-  
+
   rails:
   - title_detail_default: Default
-  
-  
+
   react:
+  - title_detail_default: Default

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

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

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

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

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

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

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

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

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

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

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