playbook_ui 12.21.0 → 12.22.0.pre.alpha.play698responsivespacingglobalprop690

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1649557cda106585da9087061c3e7e8017578aed64a96820b78ff08ae29b357a
-  data.tar.gz: 7969b004419abdc3a207667de30b50439a42559d00ad1c9144755074932aa2e7
+  metadata.gz: 383851d079d36f1d554a0e282c498a4fc6847f4b5454e7235949dac02a03d72b
+  data.tar.gz: a16155b3649ed77452c42f37b2dba7453759265c5fa8670ae8bafc5d110db796
 SHA512:
-  metadata.gz: cad804b80ced6b0f966c72f7e35a02e782898b03ed8b789120ac8662f6c88c293f63f4b5cc5970916bc91aa0be3a182d42d17e365c79ca07b4f5500edf3aa348
-  data.tar.gz: f8abc54b2526773eb5bdb0244f157a23f27cda78ea88029b59261c4d58938761b0d9eaa9cadce84ea31ffafc23c9a8ff6cb5c09914dcf294b9a74664ab6bddd7
+  metadata.gz: 1bf064f59ae1cb0b15bf62cfd577d92f08a106f58ed014a142b656bf101cc5915b3598f83c2ef26fcb225b8f44a601a193a9b7893503e36dd1a097a3a43ee24e
+  data.tar.gz: f715563781a813989eb0a90910db0034ce7f117a133708a449abeb2c7631b65b2e4fdd14361c93a7524ba521bc1ea31d4352f7e62dc79c7433e2a8772479284d

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -46,25 +46,29 @@
 
 <script>
   var htmlButton = document.getElementById('<%= "copy-html-#{example_key}" %>')
-  htmlButton.addEventListener('click', function() {
-    var tempElement = document.createElement('div')
-    tempElement.innerHTML = `<%= example_html %>`
-    var decodedString = tempElement.textContent || tempElement.innerText;
-    copyContent(decodedString)
-  })
+  if (htmlButton) {
+    htmlButton.addEventListener('click', function() {
+      var tempElement = document.createElement('div')
+      tempElement.innerHTML = `<%= example_html %>`
+      var decodedString = tempElement.textContent || tempElement.innerText;
+      copyContent(decodedString)
+    })
+  }
 
   var button = document.getElementById('<%= "copy-button-#{example_key}" %>')
-  button.addEventListener('click', function() {
-    var tempElement = document.createElement('div')
-    tempElement.innerHTML = `<%= source %>`
-    var decodedString = tempElement.textContent || tempElement.innerText;
-    copyContent(decodedString)
-    var fadeAwayDiv = document.getElementById("<%= "tooltip-#{example_key}" %>")
-    setTimeout(function() {
-      fadeAwayDiv.classList.remove('show')
-    }, 3000)
-    setTimeout(function() {
-      fadeAwayDiv.classList.add('hide')
-    }, 3001)
-  })
+  if (button) {
+    button.addEventListener('click', function() {
+      var tempElement = document.createElement('div')
+      tempElement.innerHTML = `<%= source %>`
+      var decodedString = tempElement.textContent || tempElement.innerText;
+      copyContent(decodedString)
+      var fadeAwayDiv = document.getElementById("<%= "tooltip-#{example_key}" %>")
+      setTimeout(function() {
+        fadeAwayDiv.classList.remove('show')
+      }, 3000)
+      setTimeout(function() {
+        fadeAwayDiv.classList.add('hide')
+      }, 3001)
+    })
+  }
 </script>

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+
+import Flex from '../../pb_flex/_flex'
+import PbReactPopover from '../../pb_popover/_popover'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
+
+const MoreExtensionsDropdown = ({extensions}: any) => {
+  const [showPopover, setShowPopover] = useState(false)
+
+  const handleTogglePopover = () => {
+    setShowPopover(true)
+  }
+
+  const handlePopoverClose = (shouldClosePopover: boolean) => {
+    setShowPopover(!shouldClosePopover)
+  }
+
+
+const popoverReference = (
+    <button
+      className="toolbar_button"
+      onClick={handleTogglePopover}
+    >
+    <Flex 
+      align="center"
+      className="toolbar_button_icon"
+      justify="center"
+    >
+      <Icon icon="ellipsis" size="lg" />
+    </Flex>
+  </button>
+
+);
+
+  return (
+      <PbReactPopover
+          closeOnClick='outside'
+          padding='none'
+          placement="bottom"
+          reference={popoverReference}
+          shouldClosePopover={handlePopoverClose}
+          show={showPopover}
+      >
+        <Nav 
+          paddingTop={extensions.length > 1 ? "xs" : "none"}
+          paddingBottom={extensions.length > 1 ? "xs" : "none"} 
+          variant="subtle"
+        >
+          {extensions && extensions.map(({ icon, text, onclick, isActive}:any, index:number) => ( 
+            <NavItem
+              cursor="pointer"
+              className={`pb_tiptap_toolbar_dropdown_list_item ${isActive ? "is-active" : ""}`}
+              iconLeft={icon}
+              key={`${text}_${index}`}
+              margin='none'
+              onClick={()=> {onclick(); setShowPopover(false)}}
+              text={text}
+              paddingTop='xxs'
+              paddingBottom='xxs'
+            />
+          ))}
+        </Nav>
+      </PbReactPopover>
+  )
+}
+
+export default MoreExtensionsDropdown

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx

@@ -9,8 +9,9 @@ import ToolbarDropdown from "./ToolbarDropdown";
 import ToolbarNodes from "./ToolbarNodes";
 import { ToolbarTypes } from "./EditorTypes";
 import ToolbarHistoryItems from "./ToolbarHistory";
+import MoreExtensionsDropdown from "./MoreExtensionsDropdown";
 
-const EditorToolbar = ({ editor }:any) => {
+const EditorToolbar = ({ editor, extensions }:any) => {
   const toolbaritems = [
     {
         icon: "bold",
@@ -51,10 +52,16 @@ const EditorToolbar = ({ editor }:any) => {
             )}
             <SectionSeparator orientation="vertical" />
             <ToolbarNodes editor={editor} />
+            {
+              extensions && (
+                <>
+                  <MoreExtensionsDropdown extensions={extensions}/>
+                </>
+              )
+            }
         </FlexItem>
         <ToolbarHistoryItems editor={editor} />
       </Flex>
-      {/* <SectionSeparator /> */}
     </Background>
   );
 };

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -98,7 +98,17 @@ const popoverReference = (
        activeCount === 2 ? (
         activeItems[1]
        ) : (
+        activeCount === 1 ? (
         activeItems[0] || null
+        ) : (
+          <Flex align="center" key="paragraph" gap="xs">
+            <Icon icon="paragraph" size="lg" />
+            <div>Paragraph</div>
+            <Flex className={showPopover ? "fa-flip-vertical" : ""} display="inline_flex">
+              <Icon fixedWidth icon="angle-down" margin-left="xs" />
+            </Flex>
+          </Flex>
+        )
        )
     }
   </Button>

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -35,7 +35,8 @@ type RichTextEditorProps = {
   data?: { [key: string]: string },
   focus?: boolean,
   id?: string,
-  inline?: boolean,
+  inline?: boolean, 
+  extensions?: { [key: string]: string }[],
   name?: string,
   onChange: (html: string, text: string) => void,
   placeholder?: string,
@@ -56,6 +57,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
     data = {},
     focus = false,
     inline = false,
+    extensions,
     name,
     onChange = noop,
     placeholder,
@@ -162,7 +164,7 @@ const RichTextEditor = (props: RichTextEditorProps) => {
       {
         advancedEditor ? (
           <div className='pb_rich_text_editor_advanced_container'>
-          <EditorToolbar editor={advancedEditor}/>
+          <EditorToolbar extensions={extensions} editor={advancedEditor}/>
           { children }
           </div>
         ) : (

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { RichTextEditor } from '../..'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+
+import HorizontalRule from "@tiptap/extension-horizontal-rule"
+import Highlight from '@tiptap/extension-highlight'
+
+
+const RichTextEditorMoreExtensions = (props) => {
+
+    const editor = useEditor({
+        extensions: [
+            StarterKit,
+            Link,
+            HorizontalRule,
+            Highlight.configure({ multicolor: true })
+        ],
+        content:"Add your text here. You can format your text, add links, quotes, and bullets."
+    })
+      if (!editor) {
+        return null
+      } 
+
+  const ExtensionsList = [
+    {
+        icon: "horizontal-rule",
+        isActive: editor.isActive("horizontalRule"),
+        text: "Horizontal Rule",
+        onclick: () => editor.chain().focus().setHorizontalRule().run(),
+    },
+    {
+      icon: "highlighter",
+      isActive: editor.isActive("highlight"),
+      text: "Highlighter",
+      onclick: () => editor.chain().focus().toggleHighlight().run(),
+    }
+  ]
+
+      
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          extensions={ExtensionsList}
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+
+export default RichTextEditorMoreExtensions

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md

@@ -0,0 +1,12 @@
+This variant allows you to optionally include any of [Tiptap’s 53 extensions](https://tiptap.dev/extensions) within any advanced editor by using the `extensions` prop.
+
+__NOTE__: In order to leverage this prop, you __must__ install the extension you need in your project, import it and pass it to the extensions array as shown in this example with the HorizontalRule and the Highlight extensions. 
+
+In order to add the extension to the editor toolbar, create an array of objects (as shown in the ExtensionsList array in the example below). Each object in this array should include:
+
+`icon`: the icon to display within the toolbar dropdown (any Fontawesome icons can be used)
+`isActive`: sets the extension to active within the dropdown, when applicable
+`text`: the label within the toolbar dropdown
+`onclick`: initializes the extension when it’s clicked within the dropdown (snytax varies with extension, see Tiptap's docs for more information)
+
+This array can then be passed to the `extensions` prop and all extensions in the array will be rendered in the ellipsis dropdown. 

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

@@ -14,6 +14,7 @@ examples:
   react:
   - rich_text_editor_default: Default
   - rich_text_editor_advanced_default: Advanced Default
+  - rich_text_editor_more_extensions: Advanced (Extra Extensions)
   - rich_text_editor_simple: Simple
   - rich_text_editor_attributes: Attributes
   - rich_text_editor_focus: Focus

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

@@ -7,4 +7,5 @@ export { default as RichTextEditorTemplates } from './_rich_text_editor_template
 export { default as RichTextEditorToolbarBottom } from './_rich_text_editor_toolbar_bottom.jsx'
 export { default as RichTextEditorInline } from './_rich_text_editor_inline.jsx'
 export { default as RichTextEditorPreview } from './_rich_text_editor_preview.jsx'
-export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
+export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_advanced_default.jsx'
+export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'

data/app/pb_kits/playbook/pb_weekday_stacked/{_weekday_stacked.jsx → _weekday_stacked.tsx}

@@ -12,18 +12,17 @@ import DateTime from '../pb_kit/dateTime'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
-  aria?: object,
+  aria?: {[key:string]:string },
   className?: string,
   dark?: boolean,
   data?: object,
-  date: date,
+  date: Date,
   id?: string,
   variant?: "day_only" | "month_day" | "expanded",
   compact?: boolean,
-  id?: string,
 }
 
-const getDayOfWeek = (value, compact) => {
+const getDayOfWeek = (value: Date | string, compact: boolean) => {
   const dateTime = new DateTime({ value })
   if (compact) {
     return dateTime.toDayAbbr()
@@ -32,7 +31,7 @@ const getDayOfWeek = (value, compact) => {
   }
 }
 
-const getFormattedDate = (value, variant) => {
+const getFormattedDate = (value: Date | string, variant: "day_only" | "month_day" | "expanded") => {
   const dateTime = new DateTime({ value })
   if (variant === 'day_only') {
     return dateTime.toDay()

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+
+import WeekdayStacked from "./_weekday_stacked";
+
+const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.setSystemTime(new Date(TEST_DATE));
+const testId = "weekdaystacked-kit";
+const realDate = Date;
+
+beforeEach(() => {
+  global.Date.now = jest.fn(() => new Date(TEST_DATE));
+});
+
+afterEach(() => {
+  global.Date = realDate;
+});
+
+describe("WeekdayStacked Kit", () => {
+  test("renders className", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }} 
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_weekday_stacked_kit_left");
+  });
+
+  test("renders Caption with weekday", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_md");
+    expect(text.textContent).toEqual("Wed") 
+  });
+
+  test("renders Title with date", () => {
+    render(
+      <WeekdayStacked 
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("1/1") 
+  });
+
+  test("renders compact prop", () => {
+    render(
+      <WeekdayStacked 
+          compact
+          data={{ testid: testId }}
+      />
+    );
+
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_caption_kit_md");
+    expect(text.textContent).toEqual("W") 
+  });
+
+  test("renders align prop", () => {
+    render(
+        <WeekdayStacked 
+            align="left"
+            data={{ testid: testId }}
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass("pb_weekday_stacked_kit_left")
+  });
+
+  test("renders day_only variant prop", () => {
+    render(
+        <WeekdayStacked 
+            data={{ testid: testId }}
+            variant="day_only"
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("1") 
+  });
+
+  test("renders expanded variant prop", () => {
+    render(
+        <WeekdayStacked 
+            data={{ testid: testId }}
+            variant="expanded"
+        />
+    );
+      
+    const kit = screen.getByTestId(testId);
+    const text = kit.querySelector(".pb_title_kit_size_4");
+    expect(text.textContent).toEqual("Jan 1") 
+  });
+});

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -7,7 +7,10 @@ $space_classes: (
 	md: $space_md,
 	lg: $space_lg,
 	xl: $space_xl,
-	none: 0
+	none: 0,
+  auto: auto,
+  initial: initial,
+  inherit: inherit
 );
 
 $positions: (
@@ -41,3 +44,26 @@ $positions: (
 		}
 	}
 }
+
+@each $size, $size_value in $breakpoints_grid {
+  @each $position_name, $position in $positions {
+    @each $space_name, $space in $space_classes {
+        $min_size: map-get($size_value, "min");
+        $max_size: map-get($size_value, "max");
+        .#{$position_name}_#{$size}_#{$space_name} {
+          @if type-of($position)=="list" {
+            @each $coordinate in $position {
+              @include break_on($min_size, $max_size) {
+              #{$coordinate}: #{$space} !important;
+              }
+            }
+          }
+          @else {
+            @include break_on($min_size, $max_size) {
+              #{$position}: #{$space} !important;
+            }
+          }
+        }
+    }
+  }
+}

data/app/pb_kits/playbook/utilities/globalProps.ts

@@ -153,22 +153,67 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
     padding,
   }: Margin & Padding) => {
     let css = ''
-    css += marginRight ? `mr_${marginRight} ` : ''
-    css += marginLeft ? `ml_${marginLeft} ` : ''
-    css += marginTop ? `mt_${marginTop} ` : ''
-    css += marginBottom ? `mb_${marginBottom} ` : ''
-    css += marginX ? `mx_${marginX} ` : ''
-    css += marginY ? `my_${marginY} ` : ''
-    css += margin ? `m_${margin} ` : ''
-    css += paddingRight ? `pr_${paddingRight} ` : ''
-    css += paddingLeft ? `pl_${paddingLeft} ` : ''
-    css += paddingTop ? `pt_${paddingTop} ` : ''
-    css += paddingBottom ? `pb_${paddingBottom} ` : ''
-    css += paddingX ? `px_${paddingX} ` : ''
-    css += paddingY ? `py_${paddingY} ` : ''
-    css += padding ? `p_${padding} ` : ''
-    return css
+    const spacingProps = {
+      marginRight,
+      marginLeft,
+      marginTop,
+      marginBottom,
+      marginX,
+      marginY,
+      margin,
+      paddingRight,
+      paddingLeft,
+      paddingTop,
+      paddingBottom,
+      paddingX,
+      paddingY,
+      padding,
+    };
+
+    function handleObjectValue(properties: Margin | Padding, prefix: string) {
+      let classResult = '';
+
+      Object.entries(properties).forEach(([key, value]) => {
+        classResult += `${prefix}_${key}_${value} `;
+      });
+
+      return classResult;
+    }
+
+    function getPrefix(key: string) {
+      const prefixes: Record<string, string> = {
+        marginRight: 'mr',
+        marginLeft: 'ml',
+        marginTop: 'mt',
+        marginBottom: 'mb',
+        marginX: 'mx',
+        marginY: 'my',
+        margin: 'm',
+        paddingRight: 'pr',
+        paddingLeft: 'pl',
+        paddingTop: 'pt',
+        paddingBottom: 'pb',
+        paddingX: 'px',
+        paddingY: 'py',
+        padding: 'p',
+      };
+
+      return prefixes[key];
+    }
+
+    Object.entries(spacingProps).forEach(([key, value]) => {
+      if (value) {
+        if (typeof value === 'object') {
+          css += handleObjectValue(value, getPrefix(key));
+        } else {
+          const prefix = getPrefix(key);
+          css += `${prefix}_${value} `;
+        }
+      }
+    });
+    return css.trim();
   },
+
   darkProps: ({ dark }: Dark) => dark ? 'dark' : '',
   numberSpacingProps: ({ numberSpacing }: NumberSpacing) => {
     let css = ''

data/lib/playbook/spacing.rb

@@ -50,17 +50,32 @@ module Playbook
     end
 
     def spacing_values
-      %w[none xxs xs sm md lg xl]
+      %w[none xxs xs sm md lg xl auto initial inherit]
+    end
+
+    def screen_size_values
+      %w[xs sm md lg xl]
     end
 
     def spacing_props
       selected_props = spacing_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
 
-      selected_props.map do |k|
-        spacing_value = send(k)
-        "#{spacing_options[k]}_#{spacing_value}" if spacing_values.include? spacing_value
-      end.compact.join(" ")
+      responsive = selected_props.present? && try(selected_props.first).is_a?(::Hash)
+      css = ""
+      selected_props.each do |prop|
+        spacing_value = send(prop)
+        prefix = spacing_options[prop]
+        if responsive
+          spacing_value.each do |key, value|
+            css += "#{prefix}_#{key}_#{value} " if screen_size_values.include?(key.to_s) && spacing_values.include?(value.to_s)
+          end
+        elsif spacing_values.include?(spacing_value)
+          css += "#{prefix}_#{spacing_value} "
+        end
+      end
+
+      css.strip unless css.blank?
     end
 
     def max_width_props

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.20.0"
-  VERSION = "12.21.0"
+  PREVIOUS_VERSION = "12.22.0"
+  VERSION = "12.22.0.pre.alpha.play698responsivespacingglobalprop690"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.21.0
+  version: 12.22.0.pre.alpha.play698responsivespacingglobalprop690
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-05-16 00:00:00.000000000 Z
+date: 2023-05-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1721,6 +1721,7 @@ files:
 - app/pb_kits/playbook/pb_radio/radio.test.js
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts
+- app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx
 - app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx
@@ -1740,6 +1741,8 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
+- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
@@ -2347,8 +2350,8 @@ files:
 - app/pb_kits/playbook/pb_walkthrough/docs/example.yml
 - app/pb_kits/playbook/pb_walkthrough/docs/index.js
 - app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx
-- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss
+- app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb
@@ -2359,6 +2362,7 @@ files:
 - app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
 - app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.rb
+- app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.test.jsx
 - app/pb_kits/playbook/playbook-doc.js
 - app/pb_kits/playbook/playbook-rails-react-bindings.js
 - app/pb_kits/playbook/playbook-rails.js
@@ -2487,7 +2491,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -2498,12 +2502,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
-signing_key:
+signing_key: 
 specification_version: 4
 summary: Playbook Design System
 test_files: []