RubyGems - playbook_ui - Versions diffs - 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756 → 12.24.0.pre.alpha.alphatestforselfhostfak720 - Mend

playbook_ui 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756 → 12.24.0.pre.alpha.alphatestforselfhostfak720

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

data/app/pb_kits/playbook/pb_time/_time.tsx CHANGED Viewed

@@ -20,7 +20,6 @@ type TimeProps = {
   size?: "md" | "sm";
   showTimezone?: boolean;
   timeZone?: string;
-  unstyled?: boolean;
 } & GlobalProps
 const Time = (props: TimeProps) => {
@@ -31,10 +30,8 @@ const Time = (props: TimeProps) => {
     showIcon,
     size,
     timeZone,
-    unstyled = false,
     showTimezone = true,
   } = props;
   const classes = classnames(
     buildCss("pb_time_kit", align, size),
     globalProps(props),
@@ -46,79 +43,46 @@ const Time = (props: TimeProps) => {
   return (
     <div className={classes}>
       {showIcon && (
-        unstyled
-          ? (
-              <span>
-                <Icon fixedWidth
-                    icon="clock"
+        <>
+          <Body color="light" tag="span">
+            <Icon fixedWidth icon="clock" size={size === "md" ? "" : "sm"} />
+          </Body>{" "}
+        </>
+      )}
+      <time dateTime={date}>
+        <span>
+          {size === "md" ? (
+            <>
+              <Body
+                className="pb_time"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+              />{" "}
+              {showTimezone && (
+                <Body
+                  color="light"
+                  tag="span"
+                  text={dateTimestamp.toTimezone()}
                 />
-                {" "}
-              </span>
-            )
-          : (
+              )}
+            </>
+          ) : (
             <>
-              <Body color="light"
+              <Caption
+                color="light"
+                tag="span"
+                text={dateTimestamp.toTimeWithMeridian()}
+              />{" "}
+              {showTimezone && (
+                <Caption
+                  color="light"
                   tag="span"
-              >
-                <Icon fixedWidth
-                    icon="clock"
-                    size={size === "md" ? "" : "sm"}
+                  text={dateTimestamp.toTimezone()}
                 />
-                {" "}
-              </Body>
+              )}
             </>
-            )
-      )}
-      <time dateTime={date}>
-        <span>
-          {unstyled
-            ? (
-                <>
-                  <span>
-                    {dateTimestamp.toTimeWithMeridian()}
-                  </span>
-                  {" "}
-                  {showTimezone && (
-                    <span>
-                      {dateTimestamp.toTimezone()}
-                    </span>
-                  )}
-                </>
-              )
-            : size === "md"
-              ? (
-                  <>
-                    <Body
-                        className="pb_time"
-                        tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
-                    />{" "}
-                    {showTimezone && (
-                      <Body
-                          color="light"
-                          tag="span"
-                          text={dateTimestamp.toTimezone()}
-                      />
-                    )}
-                  </>
-                )
-              : (
-                  <>
-                    <Caption
-                        color="light"
-                        tag="span"
-                        text={dateTimestamp.toTimeWithMeridian()}
-                    />{" "}
-                    {showTimezone && (
-                      <Caption
-                          color="light"
-                          tag="span"
-                          text={dateTimestamp.toTimezone()}
-                      />
-                    )}
-                  </>
-                )}
+          )}
         </span>
       </time>
     </div>

data/app/pb_kits/playbook/pb_time/docs/example.yml CHANGED Viewed

@@ -6,7 +6,6 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
-  - time_unstyled: Unstyled
   react:
   - time_default: Default
@@ -14,4 +13,3 @@ examples:
   - time_timestamp: Timestamp Values
   - time_timezone: Handling Timezones
   - time_align: Alignment
-  - time_unstyled: Unstyled

data/app/pb_kits/playbook/pb_time/docs/index.js CHANGED Viewed

@@ -3,4 +3,3 @@ export { default as TimeSizes } from './_time_sizes.jsx'
 export { default as TimeTimestamp } from './_time_timestamp.jsx'
 export { default as TimeAlign } from './_time_align.jsx'
 export { default as TimeTimezone } from './_time_timezone.jsx'
-export { default as TimeUnstyled } from './_time_unstyled.jsx'

data/app/pb_kits/playbook/pb_time/time.html.erb CHANGED Viewed

@@ -8,44 +8,25 @@
     size = "sm" if object.size == "xs"
     size = "md" if object.size == "lg"
   %>
-  <% if object.unstyled %>
-    <% if object.show_icon %>
-      <span>
-        <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
-      </span>
-    <% end %>
-    <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-      <span><%= object.format_time_string %></span>
-      <% if object.show_timezone %>
-        <span><%= object.pb_date_time.to_timezone.upcase %></span>
-      <% end %>
-    <% end %>
-  <% elsif size == "md" %>
+  <% if size == "md" %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
         <%= pb_rails("icon", props: { icon: "clock", fixed_width: true }) %>
       <% end %>
     <% end %>
-    <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-      <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
-      <% if object.show_timezone %>
-        <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
-      <% end %>
+    <%= pb_rails("body", props: { tag: "span", text: object.format_time_string, classname: "pb_time" }) %>
+    <% if object.show_timezone %>
+      <%= pb_rails("body", props: { color: "light", tag: "span", text: object.pb_date_time.to_timezone.upcase }) %>
     <% end %>
   <% else %>
     <% if object.show_icon %>
       <%= pb_rails("body", props: { color: "light", tag: "span"}) do %>
         <%= pb_rails("icon", props: { icon: "clock", fixed_width: true, size: "sm" }) %>
       <% end %>
     <% end %>
-    <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
-      <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
+    <%= pb_rails("caption", props: { color: "light", tag: "span", text: object.format_time_string }) do %>
+      <%= content_tag(:time, datetime: object.pb_date_time.to_iso) do %>
         <%= object.format_time_string %>
         <% if object.show_timezone %>
           <span class="pb_time_timezone">

data/app/pb_kits/playbook/pb_time/time.rb CHANGED Viewed

@@ -15,8 +15,6 @@ module Playbook
                        default: false
       prop :show_timezone, type: Playbook::Props::Boolean,
                            default: true
-      prop :unstyled, type: Playbook::Props::Boolean,
-                      default: false
       def classname
         # convert deprecated prop values

data/app/pb_kits/playbook/pb_title/_title.scss CHANGED Viewed

@@ -18,7 +18,6 @@
   &[class*=_3] {
     @include pb_title_3;
     @include title_colors;
-    @include pb_title_bold;
   }
   &[class*=_4] {
@@ -30,7 +29,7 @@
     @include pb_title_dark;
   }
-  &[class*=thin] {
+  &[class*=_thin] {
     @include pb_title_thin;
   }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx CHANGED Viewed

@@ -21,13 +21,13 @@ const Title = (props: TitleProps): React.ReactElement => {
   if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
   const {
     aria = {},
+    bold = true,
     children,
     className,
     color,
     data = {},
     id,
     size = 3,
-    bold = size === 3 ? false : true,
     tag = 'h3',
     text,
     variant = null,
@@ -35,10 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_title/title.rb CHANGED Viewed

@@ -17,21 +17,14 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
-      def initialize(props)
-        props[:bold] = [1, 2, 4].include?(props[:size]) unless props.key?(:bold)
-        props[:bold] = false if props[:size].nil? && !props.key?(:bold)
-        super(props)
-      end
-      prop :bold, type: Playbook::Props::Boolean
+      prop :bold, type: Playbook::Props::Boolean, default: true
       def classname
-        generate_classname("pb_title_kit", size, variant, color) + is_bold
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
       end
       def is_bold
-        bold ? "" : " thin"
+        bold ? nil : "thin"
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js CHANGED Viewed

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
   )
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3 thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
   )
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3 thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
 })
 test('with colors', () => {
@@ -38,5 +38,5 @@ test('with colors', () => {
   )
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_success thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })

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

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+require "redcarpet"
+require "rouge"
+require "rouge/plugins/redcarpet"
+require "action_view"
+module Playbook
+  module Markdown
+    module Helper
+      def self.call(template, _source)
+        markdown(template.source)
+      end
+      def render_markdown(text)
+        # rubocop:disable Security/Eval
+        eval(Playbook::Markdown::Helper.markdown(text))
+        # rubocop:enable Security/Eval
+      end
+      def self.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 = {
+          lax_spacing: true,
+          no_intra_emphasis: true,
+          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)
+        # toc_renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
+        # @TOC = Redcarpet::Markdown.new(toc_renderer)
+        # puts "TOC: #{@TOC.inspect}"
+        markdown = Redcarpet::Markdown.new(renderer, extensions)
+        "#{markdown.render(text).inspect}.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
+      class HTML < Redcarpet::Render::HTML
+        include Rouge::Plugins::Redcarpet
+      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 HTMLWithPants < Redcarpet::Render::HTML
+      include Redcarpet::Render::SmartyPants
+    end
+    class HTML < Redcarpet::Render::HTML
+      include Rouge::Plugins::Redcarpet
+    end
+    class HTMLBlockCode < Redcarpet::Render::HTML
+      include ActionView::Helpers::AssetTagHelper
+      # def block_code(code, language)
+      #   "\n.nf\n#{normal_text(rouge(code, language))}\n.fi\n"
+      # end
+      def table(header, body)
+        "<table class='pb_table table-sm table-responsive-collapse table-card table-collapse-sm'>" \
+          "<thead>#{header}</thead>" \
+          "<tbody>#{body}</tbody>" \
+        "</table>"
+      end
+      def header(title, level)
+        @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
+        permalink_markup = %(<a name="#{permalink}" class="markdown-header-anchor" )
+        permalink_markup += %(href="##{permalink}"><span class="far fa-link markdown-header-anchor-icon"></span></a>)
+        %(\n<h#{level} id="#{permalink}">#{title} #{permalink_markup}</h#{level}>\n)
+      end
+      def image(link, title, alt_text)
+        return nil if link.nil?
+        %(<a href="#{link}" target="_blank">#{image_tag(link, title: title, alt: alt_text, class: 'imageloader lazyload')}</a>)
+      end
+    end
+  end
+end

data/lib/playbook/markdown.rb ADDED Viewed

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

data/lib/playbook/version.rb CHANGED Viewed

@@ -2,5 +2,5 @@
 module Playbook
   PREVIOUS_VERSION = "12.24.0"
-  VERSION = "12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756"
+  VERSION = "12.24.0.pre.alpha.alphatestforselfhostfak720"
 end

data/lib/playbook.rb CHANGED Viewed

@@ -8,9 +8,10 @@ require "playbook/props"
 require "playbook/forms"
 require "playbook/pb_forms_helper"
 require "playbook/pb_kit_helper"
-require "playbook/pb_doc_helper" # Duplicated from website (Temp)
+require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
+require "playbook/markdown"
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.24.0.pre.alpha.PLAY603datepickerquickpickinputpresetdropdown756
+  version: 12.24.0.pre.alpha.alphatestforselfhostfak720
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-06-09 00:00:00.000000000 Z
+date: 2023-06-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -67,6 +67,34 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 2.6.1
+- !ruby/object:Gem::Dependency
+  name: redcarpet
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.6'
+- !ruby/object:Gem::Dependency
+  name: rouge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.15'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.15'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -255,9 +283,7 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 3.3.1
-description: Playbook UI is built out in Ruby View Components and React Components.
-  Playbook takes a modern design approach and applies it in a way that makes it easy
-  to support bleeding edge or legacy systems.
+description: Playbook Design System. Built for Nitro, but powering all.
 email:
 - nitroux@powerhrg.com
 - dev@powerhrg.com
@@ -664,9 +690,6 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
-- app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb
-- app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx
-- app/pb_kits/playbook/pb_date/docs/_date_unstyled.md
 - app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_description.md
@@ -723,8 +746,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions_element.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.html.erb
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
@@ -739,7 +760,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_description.md
 - app/pb_kits/playbook/pb_date_picker/docs/example.yml
 - app/pb_kits/playbook/pb_date_picker/docs/index.js
-- app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx
 - app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.ts
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
@@ -749,7 +769,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
-- app/pb_kits/playbook/pb_date_picker/sass_partials/_quick_pick_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -886,6 +905,8 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
 - app/pb_kits/playbook/pb_distribution_bar/docs/index.js
+- app/pb_kits/playbook/pb_docs/kit_api.html.erb
+- app/pb_kits/playbook/pb_docs/kit_api.rb
 - app/pb_kits/playbook/pb_docs/kit_example.html.erb
 - app/pb_kits/playbook/pb_docs/kit_example.rb
 - app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
@@ -2063,9 +2084,6 @@ files:
 - app/pb_kits/playbook/pb_time/docs/_time_timezone.html.erb
 - app/pb_kits/playbook/pb_time/docs/_time_timezone.jsx
 - app/pb_kits/playbook/pb_time/docs/_time_timezone.md
-- app/pb_kits/playbook/pb_time/docs/_time_unstyled.html.erb
-- app/pb_kits/playbook/pb_time/docs/_time_unstyled.jsx
-- app/pb_kits/playbook/pb_time/docs/_time_unstyled.md
 - app/pb_kits/playbook/pb_time/docs/example.yml
 - app/pb_kits/playbook/pb_time/docs/index.js
 - app/pb_kits/playbook/pb_time/time.html.erb
@@ -2413,7 +2431,6 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/order.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - dist/menu.yml
-- dist/playbook-rails.js
 - dist/reset.css
 - lib/playbook.rb
 - lib/playbook/align_content.rb
@@ -2442,6 +2459,8 @@ files:
 - lib/playbook/kit_base.rb
 - lib/playbook/kit_resolver.rb
 - lib/playbook/line_height.rb
+- lib/playbook/markdown.rb
+- lib/playbook/markdown/helper.rb
 - lib/playbook/number_spacing.rb
 - lib/playbook/order.rb
 - lib/playbook/pagination_renderer.rb
@@ -2469,7 +2488,7 @@ files:
 - lib/playbook/version.rb
 - lib/playbook/z_index.rb
 - lib/playbook_ui.rb
-homepage: https://playbook.powerapp.cloud/
+homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.html.erb DELETED Viewed

@@ -1,30 +0,0 @@
-<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>
-<%= pb_rails("date", props: {
-  date: Date.today,
-  unstyled: true
-}) %>
-<br />
-<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>
-<%= pb_rails("title", props: { size: 1 }) do %>
-  <%= pb_rails("date", props: {
-    date: "2012-08-02T15:49:29Z",
-    unstyled: true
-  }) %>
-<% end %>
-<br />
-<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>
-<%= pb_rails("caption", props: { size: "xs" }) do %>
-  <%= pb_rails("date", props: {
-    date: "2012-08-02T15:49:29Z",
-    show_icon: true,
-    unstyled: true,
-    show_day_of_week: true
-  }) %>
-<% end %>