playbook_ui 14.16.0.pre.alpha.PLAY1929bracketlayout6930 → 14.16.0.pre.alpha.play1756pbcontenttag6933

data/lib/playbook/kit_base.rb

@@ -91,11 +91,11 @@ module Playbook
     # rubocop:disable Layout/CommentIndentation
     # pb_content_tag information (potentially to be abstracted into its own dev doc in the future)
     # The pb_content_tag generates HTML content tags for rails kits with flexible options.
-    # Modify a generated kit.html.erb file accordingly (the default_options listed below no longer need to be explictly outlined in that file, only modifications).
+    # Modify a generated kit.html.erb file accordingly (the kit_base_default_options listed below no longer need to be explictly outlined in that file, only modifications).
     # name - the first argument is for HTML tag. The default is :div.
     # content_or_options_with_block - additional content or options for the tag (i.e., the customizations a dev adds to kit.html.erb).
     # options - Within combined_options, the empty options hash allows for customizations to
-        # merge with the default_options and combined_html_options.
+        # merge with the kit_base_default_options and combined_html_options.
     # escape - set to true, this allows for HTML-escape.
     # block - an optional block for content inside the tag.
     # The return is a HTML tag that includes any provided customizations. If nothing is specified in kit.html.erb, the default shape is:
@@ -111,7 +111,7 @@ module Playbook
     def pb_content_tag(name = :div, content_or_options_with_block = {}, options = {}, escape = true, &block)
       combined_options = options
                          .merge(combined_html_options)
-                         .merge(default_options.merge(content_or_options_with_block))
+                         .merge(kit_base_default_options.merge(content_or_options_with_block))
       content_tag(name, combined_options, options, escape, &block)
     end
     # rubocop:enable Style/OptionalBooleanParameter
@@ -146,7 +146,7 @@ module Playbook
 
   private
 
-    def default_options
+    def kit_base_default_options
       options = {
         id: id,
         data: data,

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.16.0"
-  VERSION = "14.16.0.pre.alpha.PLAY1929bracketlayout6930"
+  VERSION = "14.16.0.pre.alpha.play1756pbcontenttag6933"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.16.0.pre.alpha.PLAY1929bracketlayout6930
+  version: 14.16.0.pre.alpha.play1756pbcontenttag6933
 platform: ruby
 authors:
 - Power UX
@@ -1795,8 +1795,6 @@ files:
 - app/pb_kits/playbook/pb_layout/body.html.erb
 - app/pb_kits/playbook/pb_layout/body.rb
 - app/pb_kits/playbook/pb_layout/docs/_description.md
-- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx
-- app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.md
@@ -1830,8 +1828,6 @@ files:
 - app/pb_kits/playbook/pb_layout/layout.test.js
 - app/pb_kits/playbook/pb_layout/sidebar.html.erb
 - app/pb_kits/playbook/pb_layout/sidebar.rb
-- app/pb_kits/playbook/pb_layout/subcomponents/_game.tsx
-- app/pb_kits/playbook/pb_layout/subcomponents/_round.tsx
 - app/pb_kits/playbook/pb_legend/_legend.scss
 - app/pb_kits/playbook/pb_legend/_legend.tsx
 - app/pb_kits/playbook/pb_legend/docs/_description.md
@@ -3465,7 +3461,7 @@ files:
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
 - dist/chunks/_typeahead-Djo6qCne.js
-- dist/chunks/_weekday_stacked-DEK84Xao.js
+- dist/chunks/_weekday_stacked-DIIHW0OV.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-BGzBzFZX.js
 - dist/chunks/pb_form_validation-BvNy9Bd6.js

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.jsx

@@ -1,190 +0,0 @@
-import React from 'react'
-
-import Layout from '../../pb_layout/_layout'
-import Flex from '../../pb_flex/_flex'
-import Body from '../../pb_body/_body'
-import Caption from '../../pb_caption/_caption'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-
-const LayoutBracket = () => {
-  return (
-    <div>
-      <Layout
-          layout="bracket"
-      >
-        <Layout.RoundLabel>
-          <Caption>Wild Card</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Packers</Body>
-              <Body>10</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>22</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Vikings</Body>
-              <Body>9</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Rams</strong></Body>
-              <Body>27</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Lions</strong></Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>BYE</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Commanders</strong></Body>
-              <Body>23</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>Buccaneers</Body>
-              <Body>20</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>BYE</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Chargers</Body>
-              <Body>12</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Texans</strong></Body>
-              <Body>32</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Broncos</Body>
-              <Body>7</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Bills</strong></Body>
-              <Body>31</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Steelers</Body>
-              <Body>14</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Ravens</strong></Body>
-              <Body>28</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Divisional</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Rams</Body>
-              <Body>22</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>28</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body><strong>Commanders</strong></Body>
-              <Body>45</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body>Lions</Body>
-              <Body>31</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Texans</Body>
-              <Body>14</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-              <Body>23</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Ravens</Body>
-              <Body>25</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Bills</strong></Body>
-              <Body>27</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Conference</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round marginBottom={{ xs: "md", sm: "md" }}>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Commanders</Body>
-              <Body>23</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>55</Body>
-            </Flex>
-          </Layout.Game>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Bills</Body>
-              <Body>29</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Chiefs</strong></Body>
-              <Body>32</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-        <Layout.RoundLabel>
-          <Caption>Super Bowl</Caption>
-          <SectionSeparator marginY="sm"/>
-        </Layout.RoundLabel>
-        <Layout.Round>
-          <Layout.Game>
-            <Flex justify="between">
-              <Body>Chiefs</Body>
-              <Body>22</Body>
-            </Flex>
-            <Flex justify="between">
-              <Body><strong>Eagles</strong></Body>
-              <Body>40</Body>
-            </Flex>
-          </Layout.Game>
-        </Layout.Round>
-      </Layout>
-    </div>
-  )
-}
-
-export default LayoutBracket

data/app/pb_kits/playbook/pb_layout/docs/_layout_bracket.md

@@ -1,5 +0,0 @@
-Use `<Layout.RoundLabel>`, `<Layout.Round>`, and `<Layout.Game>` to make a bracket layout.
-
-On mobile devices, `<Layout.RoundLabel>` will display (on desktop these components are hidden) and the bracket will be in one column.
-
-Ensure that each `<Layout.Game>` maintains a consistent height for the bracket lines to lay out properly.

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 }) : 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>
-    </>
-  )
-}