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

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 %>