playbook_ui 14.17.0.pre.alpha.playcdntest7233 → 14.17.0.pre.rc.0

data/app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx

@@ -1,90 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
-
-import Card from '../../pb_card/_card'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-
-type LayoutGameProps = {
-  children: React.ReactNode[] | React.ReactNode,
-  className?: string,
-  numberOfRounds: number,
-  numberOfGames: number,
-  isOdd: boolean,
-} & GlobalProps
-
-// Game component (modeled after Item)
-const Game = (props: LayoutGameProps) => {
-  const { children, className, numberOfRounds, numberOfGames, isOdd } = props
-  const dynamicInlineProps = globalInlineProps(props)
-  
-  const numberOfChildren = Array.isArray(children) ? children.length : 0
-  
-  const isMultiple = Array.isArray(children)
-  
-  let ratio = 0
-  let exponent
-  if (numberOfGames > 1) {
-    exponent = (numberOfRounds) - Math.log2(numberOfGames) - 1
-    ratio = 2 ** exponent
-  }
-  
-  if (numberOfChildren === 2) {
-    const [firstChild, secondChild] = React.Children.toArray(children)
-  
-    if (React.isValidElement(firstChild) && React.isValidElement(secondChild)) { 
-    return (
-      <div
-          className={classnames('layout_game', globalProps(props), className)}
-          style={dynamicInlineProps}
-      >
-        <Card
-            marginY="xs"
-            padding="none"
-            shadow="deep"
-        >
-          <Card.Body padding="xs">{firstChild}</Card.Body>
-          <SectionSeparator />
-          <Card.Body padding="xs">{secondChild}</Card.Body>
-        </Card>
-        {isOdd && numberOfGames > 1  &&
-          <div
-              className="half_box"
-              style={{ height: `calc(${ratio} * 100% + 4px)` }}
-          />
-        }
-      </div>
-      )
-    }
-  }
-  
-  return (
-    <div
-        className={classnames('layout_game', globalProps(props), className)}
-        style={dynamicInlineProps}
-    >
-    {((!isMultiple && children) || numberOfChildren >= 1 )? (
-      children
-    ) : (
-      <Card
-          marginY="xs"
-          padding="none"
-          shadow="deep"
-      >
-        <Card.Body padding="xs">To be determined...</Card.Body>
-        <SectionSeparator />
-        <Card.Body padding="xs">To be determined...</Card.Body>
-      </Card>
-    )}
-      {isOdd && numberOfGames > 1  &&
-        <div
-            className="half_box"
-            style={{ height: `calc(${ratio} * 100% + 4px)` }}
-        />
-      }
-    </div>
-  )
-}
-
-export default Game

data/app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-
-import { GlobalProps, globalProps, globalInlineProps } from '../../utilities/globalProps'
-
-type LayoutRoundLabelProps = {
-  children: React.ReactNode[] | React.ReactNode,
-  className?: string,
-} & GlobalProps
-
-export const RoundLabel = (props: LayoutRoundLabelProps) => {
-  const { children, className } = props
-  const dynamicInlineProps = globalInlineProps(props)
-  return (
-    <div
-        className={classnames('layout_round_label', className)}
-        style={dynamicInlineProps}
-    >
-      {children}
-    </div>
-  )
-}
-
-type LayoutRoundProps = {
-  children: React.ReactNode[] | React.ReactNode,
-  className?: string,
-  numberOfRounds: number,
-} & GlobalProps
-
-export const Round = (props: LayoutRoundProps) => {
-  const { children, className, numberOfRounds } = props
-  const dynamicInlineProps = globalInlineProps(props)
-  const numberOfChildren = Array.isArray(children) ? children.length : 0
-
-  const childrenWithProps = Array.isArray(children) ? children.map((child, index) =>
-    React.isValidElement(child) ? React.cloneElement(child, { numberOfRounds, numberOfGames: numberOfChildren, isOdd: index % 2 === 0, key: `child_${index}` }) : child
-  ) : children
-
-  const rightConnectors = Array.from({ length: numberOfChildren / 2 }, (_, index) => (
-    <div
-        className="right_connector"
-        key={`right_connector_${index}`}
-    />
-  ))
-
-  return (
-    <>
-      <div
-          className={classnames('layout_round', globalProps(props), className)}
-          style={dynamicInlineProps}
-      >
-        {childrenWithProps}
-      </div>
-      <div className="connector_container">{rightConnectors}</div>
-    </>
-  )
-}

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.md

@@ -1 +0,0 @@
-To guarantee the vertical section separator displays properly, please add the `vertical: "stretch"`/`vertical="stretch"` property to the parent container (which is commonly a Flex container). This will stretch the container’s child elements vertically and ensure the section separator appears as expected.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
-    <thead>
-        <tr>
-            <th>Column 1</th>
-            <th>Column 2</th>
-            <th>Column 3</th>
-            <th>Column 4</th>
-            <th>Column 5</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-        <tr>
-            <td>Value 1</td>
-            <td>Value 2</td>
-            <td>Value 3</td>
-            <td>Value 4</td>
-            <td>Value 5</td>
-        </tr>
-    </tbody>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md

@@ -1 +0,0 @@
-Customize your header by removing the header borders with the `header_style: "borderless"` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb

@@ -1,36 +0,0 @@
-<%= pb_rails("card", props: { background: "light" })  do %>
-    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
-        <%= pb_rails("table/table_head") do %>
-            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
-                <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
-                <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
-            <% end %>
-        <% end %>
-        <%= pb_rails("table/table_body") do %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-            <%= pb_rails("table/table_row") do %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
-                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md

@@ -1 +0,0 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).