RubyGems - playbook_ui - Versions diffs - 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469 - Mend

playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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 (375) hide show

data/app/pb_kits/playbook/pb_full_screen/docs/_playground.overrides.json ADDED Viewed

@@ -0,0 +1,137 @@
+{
+  "children": {
+    "editable": true,
+    "default": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"Open fullscreen to review a focused workspace with enough content to test header behavior and padding.\" />\n</Card>"
+  },
+  "structureModes": {
+    "default": "trigger_prop",
+    "modes": {
+      "trigger_prop": {
+        "label": "Trigger Prop",
+        "template": "<FullScreen{{props}}>\n  {{children}}\n</FullScreen>",
+        "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"Open fullscreen to review a focused workspace with enough content to test header behavior and padding.\" />\n</Card>",
+        "props": {
+          "headerText": "Enrollment Review",
+          "trigger": "({ onClick, isOpen }) => (\n  <Button\n    marginBottom=\"md\"\n    onClick={onClick}\n  >\n    {isOpen ? \"Exit Fullscreen\" : \"Enter Fullscreen\"}\n  </Button>\n)"
+        }
+      },
+      "hook_trigger": {
+        "label": "Hook Trigger",
+        "template": "<FullScreen\n  isFullscreen={isFullscreen}\n  onClose={() => setIsFullscreen(false)}{{props}}\n>\n  {{children}}\n</FullScreen>",
+        "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"The hook lets the trigger live anywhere while FullScreen owns the overlay content.\" />\n</Card>",
+        "imports": ["useFullScreen"],
+        "props": {
+          "headerText": "Enrollment Review"
+        },
+        "wrapper": "const FullScreenPlaygroundExample = () => {\n  const [isFullscreen, setIsFullscreen, toggleFullScreen] = useFullScreen(false)\n\n  return (\n    <>\n      <Flex justify=\"end\">\n        <CircleIconButton\n          icon=\"expand\"\n          marginBottom=\"md\"\n          onClick={toggleFullScreen}\n        />\n      </Flex>\n      {{component}}\n    </>\n  )\n}\n\n<FullScreenPlaygroundExample />"
+      }
+    }
+  },
+  "defaults": {
+    "contentPadding": "lg",
+    "escToExit": true,
+    "headerText": "Enrollment Review",
+    "headerTextStyling": "title_4",
+    "onClose": "() => console.log('Fullscreen closed')",
+    "onOpen": "() => console.log('Fullscreen opened')",
+    "stickyHeader": true
+  },
+  "groups": [
+    {
+      "name": "Header",
+      "props": ["headerText", "headerTextStyling", "stickyHeader"]
+    },
+    {
+      "name": "Content",
+      "props": ["contentPadding"]
+    },
+    {
+      "name": "Behavior",
+      "props": ["escToExit"]
+    },
+    {
+      "name": "Callbacks",
+      "props": ["trigger", "onOpen", "onClose"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "contentPadding": "lg",
+        "escToExit": true,
+        "headerText": "Enrollment Review",
+        "headerTextStyling": "title_4",
+        "stickyHeader": true,
+        "trigger": "({ onClick, isOpen }) => (\n  <Button\n    marginBottom=\"md\"\n    onClick={onClick}\n  >\n    {isOpen ? \"Exit Fullscreen\" : \"Enter Fullscreen\"}\n  </Button>\n)"
+      }
+    },
+    {
+      "name": "Hook trigger",
+      "structureMode": "hook_trigger",
+      "props": {
+        "contentPadding": "lg",
+        "escToExit": true,
+        "headerText": "Enrollment Review",
+        "headerTextStyling": "title_4",
+        "stickyHeader": true
+      },
+      "children": "<Card padding=\"md\">\n  <Title size={4} text=\"Enrollment Review\" />\n  <Body marginTop=\"xs\" text=\"The hook lets the trigger live anywhere while FullScreen owns the overlay content.\" />\n</Card>"
+    },
+    {
+      "name": "Medium padding",
+      "props": {
+        "contentPadding": "md",
+        "headerText": "Medium Padding",
+        "stickyHeader": true
+      }
+    },
+    {
+      "name": "No padding",
+      "props": {
+        "contentPadding": "none",
+        "headerText": "Edge-to-edge Content",
+        "stickyHeader": true
+      }
+    },
+    {
+      "name": "Non-sticky header",
+      "props": {
+        "contentPadding": "lg",
+        "headerText": "Scrolling Header",
+        "stickyHeader": false
+      }
+    },
+    {
+      "name": "Body header",
+      "props": {
+        "headerText": "A quieter header treatment",
+        "headerTextStyling": "body",
+        "stickyHeader": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "hook_trigger": {
+      "presetName": "Hook trigger",
+      "message": "Use the hook pattern when the trigger needs to live outside the FullScreen wrapper.",
+      "type": "info"
+    },
+    "content_padding": {
+      "when": {
+        "contentPadding": "none"
+      },
+      "message": "Use no padding when the fullscreen content already provides its own spacing or needs an edge-to-edge layout.",
+      "type": "info"
+    },
+    "sticky_header": {
+      "when": {
+        "stickyHeader": false
+      },
+      "message": "Turn off stickyHeader when the header should scroll away with the fullscreen content.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": ["isFullscreen"]
+}

data/app/pb_kits/playbook/pb_full_screen/docs/example.yml ADDED Viewed

@@ -0,0 +1,14 @@
+examples:
+  rails:
+  # - full_screen_default: Default
+  react:
+  - full_screen_default: Default
+  - full_screen_custom_trigger: Custom Trigger
+  - full_screen_header_text_styling: Header Text Styling
+  - full_screen_sticky_header: Sticky Header
+  - full_screen_content_padding: Content Padding
+  - full_screen_table_and_filter: Complex Example

data/app/pb_kits/playbook/pb_full_screen/docs/index.js ADDED Viewed

@@ -0,0 +1,6 @@
+export { default as FullScreenDefault } from './_full_screen_default.jsx'
+export { default as FullScreenCustomTrigger } from './_full_screen_custom_trigger.jsx'
+export { default as FullScreenTableAndFilter } from './_full_screen_table_and_filter.jsx'
+export { default as FullScreenHeaderTextStyling } from './_full_screen_header_text_styling.jsx'
+export { default as FullScreenStickyHeader } from './_full_screen_sticky_header.jsx'
+export { default as FullScreenContentPadding } from './_full_screen_content_padding.jsx'

data/app/pb_kits/playbook/pb_full_screen/full_screen.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>FULL_SCREEN CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_full_screen/full_screen.rb ADDED Viewed

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+module Playbook
+  module PbFullScreen
+    class FullScreen < ::Playbook::KitBase
+      def classname
+        generate_classname("pb_full_screen_kit")
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_full_screen/full_screen.test.jsx ADDED Viewed

@@ -0,0 +1,237 @@
+import React from 'react'
+import { fireEvent, render, screen } from '../utilities/test-utils'
+import { FullScreen, useFullScreen } from 'playbook-ui'
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+  render(<FullScreen {...props} />)
+    expect(screen.getByTestId('default')).toBeInTheDocument()
+})
+test('stickyHeader is true by default', () => {
+  render(
+    <FullScreen
+        data={{ testid: 'default' }}
+        headerText="Fullscreen"
+        trigger={({ onClick }) => <button onClick={onClick}>Open</button>}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  fireEvent.click(screen.getByText('Open'))
+  expect(document.querySelector('.fullscreen-header')).toHaveClass('fullscreen-header-sticky')
+  expect(document.querySelector('.fullscreen-content')).toHaveClass('fullscreen-content-sticky')
+})
+test('stickyHeader can be disabled', () => {
+  render(
+    <FullScreen
+        data={{ testid: 'default' }}
+        headerText="Fullscreen"
+        stickyHeader={false}
+        trigger={({ onClick }) => <button onClick={onClick}>Open</button>}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  fireEvent.click(screen.getByText('Open'))
+  expect(document.querySelector('.fullscreen-header')).not.toHaveClass('fullscreen-header-sticky')
+  expect(document.querySelector('.fullscreen-content')).not.toHaveClass('fullscreen-content-sticky')
+})
+test('contentPadding is lg by default', () => {
+  render(
+    <FullScreen
+        data={{ testid: 'default' }}
+        trigger={({ onClick }) => <button onClick={onClick}>Open</button>}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  fireEvent.click(screen.getByText('Open'))
+  expect(document.querySelector('.fullscreen-content')).toHaveClass('p_lg')
+})
+test('contentPadding can be customized', () => {
+  render(
+    <FullScreen
+        contentPadding="sm"
+        data={{ testid: 'default' }}
+        trigger={({ onClick }) => <button onClick={onClick}>Open</button>}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  fireEvent.click(screen.getByText('Open'))
+  expect(document.querySelector('.fullscreen-content')).toHaveClass('p_sm')
+})
+test('headerText renders with title styling by default', () => {
+  render(
+    <FullScreen
+        headerText="Fullscreen Title"
+        trigger={({ onClick }) => <button onClick={onClick}>Open</button>}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  fireEvent.click(screen.getByText('Open'))
+  expect(screen.getByText('Fullscreen Title')).toHaveClass('pb_title_kit')
+  expect(screen.getByText('Fullscreen Title')).toHaveClass('pb_title_4')
+})
+test('headerTextStyling can render header text as body text', () => {
+  render(
+    <FullScreen
+        headerText="Fullscreen Body"
+        headerTextStyling="body"
+        trigger={({ onClick }) => <button onClick={onClick}>Open</button>}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  fireEvent.click(screen.getByText('Open'))
+  expect(screen.getByText('Fullscreen Body')).toHaveClass('pb_body_kit')
+})
+test('isFullscreen opens fullscreen in controlled mode', () => {
+  render(
+    <FullScreen
+        headerText="Controlled Fullscreen"
+        isFullscreen
+    >
+      <div>Controlled Content</div>
+    </FullScreen>
+  )
+  expect(document.querySelector('.fullscreen-overlay')).toBeInTheDocument()
+  expect(document.querySelector('.fullscreen-content')).toHaveTextContent('Controlled Content')
+  expect(screen.getByText('Controlled Fullscreen')).toBeInTheDocument()
+})
+test('trigger receives current state and toggles fullscreen', () => {
+  const onOpen = jest.fn()
+  const onClose = jest.fn()
+  render(
+    <FullScreen
+        onClose={onClose}
+        onOpen={onOpen}
+        trigger={({ onClick, isOpen }) => (
+          <button onClick={onClick}>{isOpen ? 'Close Fullscreen' : 'Open Fullscreen'}</button>
+        )}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  expect(screen.getByText('Open Fullscreen')).toBeInTheDocument()
+  fireEvent.click(screen.getByText('Open Fullscreen'))
+  expect(onOpen).toHaveBeenCalledTimes(1)
+  expect(screen.getByText('Close Fullscreen')).toBeInTheDocument()
+  expect(document.querySelector('.fullscreen-overlay')).toBeInTheDocument()
+  fireEvent.click(document.querySelector('.fullscreen-close-button'))
+  expect(onClose).toHaveBeenCalledTimes(1)
+  expect(screen.getByText('Open Fullscreen')).toBeInTheDocument()
+  expect(document.querySelector('.fullscreen-overlay')).not.toBeInTheDocument()
+})
+test('escToExit closes fullscreen by default', () => {
+  const onClose = jest.fn()
+  render(
+    <FullScreen
+        onClose={onClose}
+        trigger={({ onClick }) => <button onClick={onClick}>Open</button>}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  fireEvent.click(screen.getByText('Open'))
+  fireEvent.keyDown(document, { key: 'Escape' })
+  expect(onClose).toHaveBeenCalledTimes(1)
+  expect(document.querySelector('.fullscreen-overlay')).not.toBeInTheDocument()
+})
+test('escToExit can be disabled', () => {
+  const onClose = jest.fn()
+  render(
+    <FullScreen
+        escToExit={false}
+        onClose={onClose}
+        trigger={({ onClick }) => <button onClick={onClick}>Open</button>}
+    >
+      <div>Content</div>
+    </FullScreen>
+  )
+  fireEvent.click(screen.getByText('Open'))
+  fireEvent.keyDown(document, { key: 'Escape' })
+  expect(onClose).not.toHaveBeenCalled()
+  expect(document.querySelector('.fullscreen-overlay')).toBeInTheDocument()
+})
+test('can be controlled by useFullScreen from an external trigger', () => {
+  const ExternalTriggerExample = () => {
+    const [isFullscreen, setIsFullscreen] = useFullScreen(false)
+    return (
+      <>
+        <div data-testid="toolbar">
+          <button onClick={() => setIsFullscreen(true)}>Open from toolbar</button>
+        </div>
+        <FullScreen
+            data={{ testid: 'default' }}
+            headerText="Fullscreen"
+            isFullscreen={isFullscreen}
+            onClose={() => setIsFullscreen(false)}
+        >
+          <div>Content</div>
+        </FullScreen>
+      </>
+    )
+  }
+  render(<ExternalTriggerExample />)
+  expect(screen.getByTestId('toolbar')).toBeInTheDocument()
+  expect(document.querySelector('.fullscreen-overlay')).not.toBeInTheDocument()
+  fireEvent.click(screen.getByText('Open from toolbar'))
+  expect(document.querySelector('.fullscreen-overlay')).toBeInTheDocument()
+  expect(document.querySelector('.fullscreen-content')).toHaveTextContent('Content')
+  fireEvent.click(document.querySelector('.fullscreen-close-button'))
+  expect(document.querySelector('.fullscreen-overlay')).not.toBeInTheDocument()
+})

data/app/pb_kits/playbook/pb_full_screen/kit.schema.json ADDED Viewed

@@ -0,0 +1,89 @@
+{
+  "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
+  "name": "FullScreen",
+  "description": "FullScreen component",
+  "platforms": [
+    "react",
+    "rails"
+  ],
+  "props": {
+    "contentPadding": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "none",
+        "xxs",
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ]
+    },
+    "headerText": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "headerTextStyling": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "title_4",
+        "body"
+      ]
+    },
+    "isFullscreen": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onOpen": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onClose": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "stickyHeader": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "trigger": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "escToExit": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    }
+  },
+  "globalProps": true,
+  "usage": {
+    "react": {
+      "import": "import { FullScreen } from 'playbook-ui'",
+      "example": "<FullScreen contentPadding=\"none\" headerTextStyling=\"title_4\"></FullScreen>"
+    },
+    "rails": {
+      "import": null,
+      "example": "<%= pb_rails(\"full_screen\", props: { content_padding: \"none\", header_text_styling: \"title_4\" }) %>"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_full_screen/useFullScreen.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { useState } from 'react'
+const useFullScreen = (initial = false) => {
+  const [isFullscreen, setIsFullscreen] = useState(initial)
+  const toggleFullScreen = () => setIsFullscreen((prev) => !prev)
+  return [
+    isFullscreen,
+    setIsFullscreen as any,
+    toggleFullScreen,
+  ]
+}
+export default useFullScreen

data/app/pb_kits/playbook/pb_hashtag/docs/_playground.json CHANGED Viewed

@@ -3,28 +3,89 @@
   "propTargets": {},
   "defaults": {
     "newWindow": false,
-    "type": "default"
+    "type": "project",
+    "text": "470297",
+    "url": "https://google.com",
+    "dark": false
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "dark",
-        "newWindow",
-        "rel",
-        "target",
         "text",
-        "type",
-        "url"
+        "type"
+      ]
+    },
+    {
+      "name": "Link",
+      "props": [
+        "url",
+        "target",
+        "newWindow",
+        "rel"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "dark"
       ]
     }
   ],
   "presets": [
+    {
+      "name": "Project",
+      "props": {
+        "text": "470297",
+        "type": "project",
+        "url": "https://google.com"
+      }
+    },
+    {
+      "name": "Home",
+      "props": {
+        "text": "123456",
+        "type": "home",
+        "url": "https://google.com"
+      }
+    },
+    {
+      "name": "Appointment",
+      "props": {
+        "text": "456789",
+        "type": "appointment",
+        "url": "https://google.com"
+      }
+    },
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "text": "654321",
+        "type": "default",
+        "url": "https://google.com"
+      }
+    },
+    {
+      "name": "New window",
+      "props": {
+        "text": "Open in a new window",
+        "type": "project",
+        "url": "https://google.com",
+        "target": "_blank"
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "target": {
+      "requires": "url"
+    },
+    "rel": {
+      "requires": "url"
+    }
+  },
+  "hints": {},
+  "children": {
+    "editable": false,
+    "default": ""
+  }
 }