RubyGems - playbook_ui - Versions diffs - 8.0.0.pre.alpha1 → 8.1.0 - Mend

playbook_ui 8.0.0.pre.alpha1 → 8.1.0

Files changed (65) hide show

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx CHANGED Viewed

@@ -19,6 +19,13 @@ const ProgressSimpleVariants = () => {
           percent={10}
           variant="negative"
       />
+      <br />
+      <ProgressSimple
+          percent={40}
+          variant="warning"
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.md CHANGED Viewed

	@@ -1 +1 @@
1	- Progress Simple can pass colors - primary, green and ~~red~~. Variants names are `default`, `positive`, and `~~negative`~~ respectively.
1	+ Progress Simple can pass colors - primary, green, red, and yellow. Variants names are `default`, `positive`, `negative`, and `warning`, respectively.

data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb CHANGED Viewed

@@ -18,7 +18,7 @@ module Playbook
       # could this possibly be [sm, md, lg]?
       prop :width, default: "100%"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default positive negative],
+                     values: %w[default positive negative warning],
                      default: "default"
       def number_value

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx CHANGED Viewed

@@ -4,50 +4,67 @@ import React from 'react'
 import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
-import { buildCss } from '../utilities/props'
-import { Body, Caption } from '../'
+import { buildCss, buildDataProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
+import { Body, Caption } from '../'
 type TimeStackedProps = {
   align?: 'left' | 'center' | 'right',
   className?: string | array<string>,
   dark?: boolean,
-  data?: string,
-  date: string,
+  data?: object,
+  date?: string,
   id?: string,
-  tag?: 'body' | 'caption',
+  time: number | Date,
+  timeZone?: string,
 }
-const TimeStacked = (props: TimeStackedProps) => {
-  const { align, className, dark, date } = props
-  deprecatedProps('TimeStacked', ['tag'])
+const TimeStackedDefault = (props: TimeStackedProps) => {
+  if (props.date) deprecatedProps('Time Stacked', ['date']) //date prop is deprecated, use time instead
+  const {
+    align = 'left',
+    className,
+    dark,
+    data = {},
+    date,
+    time,
+    timeZone,
+  } = props
   const classes = classnames(
     buildCss('pb_time_stacked_kit', align),
     globalProps(props),
-    className,
+    className
   )
+  const dataProps = buildDataProps(data)
-  const dateTimestamp = new DateTime({ value: date })
+  const dateTimestamp = new DateTime({ value: date ? date : new Date(time), zone: timeZone })
   return (
-    <div className={classes}>
-      <div
-          align={align}
-          className="pb_time_stacked_day_month"
+    <div
+        className={classes}
+        {...dataProps}
+    >
+      <Body
+          className={classnames('pb_time_stacked', 'time-spacing')}
+          color="light"
+          dark={dark}
       >
-        <Body
-            color="light"
-            dark={dark}
-            text={dateTimestamp.toTimeWithMeridian()}
-        />
-        <Caption
-            color="light"
-            dark={dark}
-            text={dateTimestamp.toTimezone()}
-        />
-      </div>
+        <time>
+          {dateTimestamp.toTimeWithMeridian()}
+          <Caption
+              className="pb_time_stacked"
+              color="light"
+              dark={dark}
+              tag="span"
+              text={dateTimestamp.toTimezone()}
+          />
+        </time>
+      </Body>
     </div>
   )
 }
-export default TimeStacked
+export default TimeStackedDefault

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss CHANGED Viewed

@@ -1,3 +1,21 @@
 @import "../pb_title/title";
 @import "../pb_caption/caption";
 @import "../tokens/colors";
+[class^=pb_time_stacked_kit] {
+ &[class*=_center]  {
+   text-align: center;
+ }
+ &[class*=_right]  {
+   text-align: right;
+ }
+}
+.time-spacing {
+  time {
+    display: inline-grid;
+    margin-bottom: $space_xs - 6px;
+  }
+}

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb CHANGED Viewed

@@ -1,5 +1,18 @@
-<%= pb_rails("time_stacked", props: { date: DateTime.now }) %>
-<br/>
-<%= pb_rails("time_stacked", props: { align: "center", date: DateTime.now }) %>
-<br/>
-<%= pb_rails("time_stacked", props: { align: "right", date: DateTime.now }) %>
+<%= pb_rails("time_stacked", props: {
+  time: DateTime.now,
+  align: "left",
+}) %>
+<br>
+<%= pb_rails("time_stacked", props: {
+  time: Time.now,
+  align: "center"
+}) %>
+<br>
+<%= pb_rails("time_stacked", props: {
+  time: Time.now,
+  align: "right"
+}) %>

data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx CHANGED Viewed

@@ -5,18 +5,23 @@ const TimeStackedDefault = (props) => {
   return (
     <div>
       <TimeStacked
+          time={new Date()}
+          timeZone="America/New_York"
           {...props}
-          date={new Date()}
       />
+      <br />
       <TimeStacked
-          {...props}
           align="center"
-          date={new Date()}
+          time={new Date()}
+          timeZone="America/New_York"
+          {...props}
       />
+      <br />
       <TimeStacked
-          {...props}
           align="right"
-          date={new Date()}
+          time={new Date()}
+          timeZone="America/New_York"
+          {...props}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb CHANGED Viewed

@@ -1,8 +1,12 @@
 <%= content_tag(:div,
-    align: object.align,
     id: object.id,
     data: object.data,
     class: object.classname) do %>
-      <%= pb_rails("body", props: { text: object.format_time_string, color: "light" }) %>
-      <%= pb_rails("caption", props: { text: object.format_timezone, color: "light" }) %>
+    <%= pb_rails("body", props: { color: "light", classname: "pb_time_stacked time-spacing" }) do %>
+      <time>
+        <%= object.format_time_string %>
+        <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase, classname: "pb_time_stacked" }) %>
+      </time>
+    <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb CHANGED Viewed

@@ -3,49 +3,27 @@
 module Playbook
   module PbTimeStacked
     class TimeStacked < Playbook::KitBase
+      prop :time, required: true
       prop :align, type: Playbook::Props::Enum,
                    values: %w[left center right],
                    default: "left"
-      prop :classnames, type: Playbook::Props::String,
-                        default: nil
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-      prop :date, type: Playbook::Props::Date, required: true
+      prop :timezone, default: "America/New_York"
       def classname
-        generate_classname("pb_time_stacked_kit", dark_class)
-      end
-      def day
-        day = Playbook::PbKit::PbDateTime.new(date)
-        content_tag(:time, datetime: day.to_iso) do
-          day.to_day.to_s
-        end
-      end
-      def month
-        month = Playbook::PbKit::PbDateTime.new(date)
-        content_tag(:time, datetime: month.to_iso) do
-          month.to_month.to_s
-        end
+        # convert deprecated prop values
+        generate_classname("pb_time_stacked_kit", align)
       end
       def format_time_string
-        "#{pb_date_time.to_full_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian}"
+        "#{pb_date_time.to_hour}:#{pb_date_time.to_minutes}#{pb_date_time.to_meridian}"
       end
-      def format_timezone
-        pb_date_time.to_timezone
-      end
-    private
-      def dark_class
-        dark ? "dark" : nil
+      def format_timezone_string
+        pb_date_time.to_timezone.to_s
       end
       def pb_date_time
-        Playbook::PbKit::PbDateTime.new(date)
+        Playbook::PbKit::PbDateTime.new(time, timezone)
       end
     end
   end

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.test.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { renderKit, screen } from '../utilities/test-utils'
+import TimeStacked from './_time_stacked'
+/*eslint no-multiple-empty-lines: 0*/
+test('returns the namespaced class', () => {
+  const props = {
+    data: { testid: 'default' },
+    time: new Date,
+  }
+  renderKit(TimeStacked, props)
+  expect(screen.getByTestId('default')).toHaveClass('pb_time_stacked_kit_left')
+  renderKit(TimeStacked, props, {
+    align: 'center',
+    data: { testid: 'center' },
+  })
+  expect(screen.getByTestId('center')).toHaveClass('pb_time_stacked_kit_center')
+  renderKit(TimeStacked, props, {
+    align: 'right',
+    data: { testid: 'right' },
+  })
+  expect(screen.getByTestId('right')).toHaveClass('pb_time_stacked_kit_right')
+  renderKit(TimeStacked, props, {
+    dark: true,
+    data: { testid: 'dark' },
+  })
+  expect(screen.getByTestId('dark')).toHaveClass('pb_time_stacked_kit_left dark')
+})

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

@@ -46,7 +46,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       content: " ";
       position: absolute;
       top: 100%;
-      left: 50%;
+      left: calc(50% - 10px);
       border-color: $white transparent transparent transparent;
       border-style: solid;
       border-width: 10px;
@@ -95,9 +95,10 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
     margin: 0 0 0 $space_sm;
     .arrow {
-      left: -#{$space_xs};
-      top: $arrow_vertical_offset;
+      left: -18px;
+      right: auto;
       margin-bottom: 0;
+      top: $arrow_vertical_offset;
       transform: rotate(90deg);
     }
     &.flipped .arrow {

data/app/pb_kits/playbook/vendor.js CHANGED Viewed

@@ -12,6 +12,9 @@ window.datePickerHelper = datePickerHelper
 // Lazy image loading
 import 'lazysizes'
+import PbCollapsible from './pb_collapsible'
+PbCollapsible.start()
 import PbPopover from './pb_popover'
 PbPopover.start()

data/lib/playbook.rb CHANGED Viewed

@@ -9,9 +9,10 @@ require "view_component/engine"
 require "playbook/props"
 require "playbook/version"
 require "playbook/pb_kit_helper"
+require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
-require "playbook/markdown/template_handler"
+require "playbook/markdown"
 require "playbook/engine" if defined?(Rails)
 module Playbook
@@ -20,12 +21,16 @@ module Playbook
   class ConflictingPropsError < StandardError; end
   class MissingPropError < StandardError; end
-  class << self
-    def webpacker
-      @webpacker ||= ::Webpacker::Instance.new(
-        root_path: ROOT_PATH,
-        config_path: ROOT_PATH.join("config/webpacker.yml")
-      )
-    end
+module_function
+  def webpacker
+    @webpacker ||= ::Webpacker::Instance.new(
+      root_path: ROOT_PATH,
+      config_path: ROOT_PATH.join("config/webpacker.yml")
+    )
+  end
+  def kit_path(kit, *args)
+    Playbook::Engine.root.join("app/pb_kits/playbook/pb_#{kit}", *args)
   end
 end

data/lib/playbook/markdown.rb ADDED Viewed

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+require "playbook/markdown/template_handler"
+require "playbook/markdown/helper"

data/lib/playbook/markdown/helper.rb ADDED Viewed

@@ -0,0 +1,153 @@
+# frozen_string_literal: true
+require "redcarpet"
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "action_view"
+module Playbook
+  module Markdown
+    module Helper
+      def markdown(text)
+        options = {
+          filter_html: false,
+          hard_wrap: true,
+          link_attributes: { rel: "nofollow", target: "_blank" },
+          space_after_headers: true,
+          fenced_code_blocks: true,
+          no_styles: false,
+          safe_links_only: true,
+        }
+        extensions = {
+          autolink: true,
+          superscript: true,
+          fenced_code_blocks: true,
+          tables: true,
+          disable_indented_code_blocks: false,
+          strikethrough: true,
+          underline: true,
+          highlight: true,
+          footnotes: true,
+          with_toc_data: true,
+        }
+        renderer = HTMLBlockCode.new(options)
+        markdown = Redcarpet::Markdown.new(renderer, extensions)
+        markdown.render(text).html_safe
+      end
+      def rouge(text, language)
+        formatter = Rouge::Formatters::HTML.new(scope: ".highlight")
+        lexer = Rouge::Lexer.find(language)
+        formatter.format(lexer.lex(text))
+      end
+      def rouge_markdown(text)
+        render_options = {
+          filter_html: true,
+          hard_wrap: true,
+          link_attributes: { rel: "nofollow" },
+        }
+        renderer = HTML.new(render_options)
+        extensions = {
+          autolink: true,
+          fenced_code_blocks: true,
+          lax_spacing: true,
+          no_intra_emphasis: true,
+          strikethrough: true,
+          superscript: true,
+        }
+        markdown = Redcarpet::Markdown.new(renderer, extensions)
+        markdown.render(text)
+      end
+    end
+    class HTML < Redcarpet::Render::HTML
+      include Rouge::Plugins::Redcarpet
+    end
+    class HTMLBlockCode < Redcarpet::Render::HTML
+      include ActionView::Helpers::AssetTagHelper
+      def header(title, level)
+        if level == 7
+          @headers ||= []
+          permalink = title.gsub(/\W+/, "-")
+          if @headers.include?(permalink)
+            permalink += "_1"
+            loop do
+              break unless @headers.include?(permalink)
+              permalink.gsub!(/\_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
+            end
+          end
+          @headers << permalink
+          %(\n<a name="#{permalink}" class="markdown-header-anchor anchor" href="##{permalink}"><span class="fa fa-link anchor-icon"></span></a><h#{level} id=\"#{permalink}\">#{title}</h#{level}>\n)
+        else
+          %(\n<h#{level}>#{title}</h#{level}>\n)
+        end
+      end
+      def image(link, title, alt_text)
+        image_tag(link, title: title, alt: alt_text, class: "imageloader lazyload")
+      end
+      def preprocess(full_document)
+        full_document.gsub(/\[component (.*)\]/) do
+          @string = Regexp.last_match(1)
+          @default_height = "160"
+          @attr = ["", @default_height]
+          # Set src from attributes
+          @string.gsub(/src="(.*?)"/) do
+            @attr[0] = Regexp.last_match(1)
+          end
+          # Set height from attributes
+          @string.gsub(/height="(.*?)"/) do
+            @attr[1] = (Regexp.last_match(1) || @default_height)
+          end
+          %(\n<div class="uix-component-frame"><iframe scrolling="no" id="component-preview" src="#{@attr[0]}" width="100%" height="#{@attr[1]}"></iframe><a href="#{@attr[0]}" target="_blank" class="uix-component-link">View component</a></div>\n)
+        end
+      end
+      def list(contents, _list_type)
+        @contents = contents
+        @list_items = contents.split("\n")
+        if @list_items[0].include?("[do]") || @list_items[0].include?("[dont]")
+          @element_items = []
+          @list_items.each do |item, _index|
+            item.gsub(%r{\<li>(.*)\</li>}) do
+              @element_items.push(Regexp.last_match(1))
+            end
+          end
+          # Doing both because we could have either/both
+          # clean up
+          @dont_items, @trash_items_dont = @element_items.partition { |x, _i| x.include? "[dont]" }
+          @do_items, @trash_items_do = @element_items.partition { |x, _i| x.include? "[do]" }
+          @do_list = []
+          @do_items.each do |item, _index|
+            @do_list.push("<li>#{item.sub('[do] ', '')}</li>")
+          end
+          @do_list = "<ul class='uix-ruleset do-list'>#{@do_list.join('')}</ul>"
+          @dont_list = []
+          @dont_items.each do |item, _index|
+            @dont_list.push("<li>#{item.sub('[dont] ', '')}</li>")
+          end
+          @dont_list = "<ul class='uix-ruleset dont-list'>#{@dont_list.join('')}</ul>"
+          "<div class='row uix-ruleset-block'><div class='col-sm-6'>#{@do_list}</div><div class='col-sm-6'>#{@dont_list}</div></div>"
+        else
+          @contents
+        end
+      end
+    end
+  end
+end