playbook_ui 15.8.0.pre.rc.1 → 16.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d0177497af81bb89af7b26046f27197942cb10b7a6640df32234376c1f7cedcb
-  data.tar.gz: 164f59f14bfffc0a889b4859363c311d09dafddf5c1fce518000a42c4e647623
+  metadata.gz: 375e5a9a2040cbf190b9ed83ef91adb015b7347eff80afd264b3423996f9efdb
+  data.tar.gz: 26f03e82a99ac0e51a20674952021e5acd7237f12b64184c02c465a4d1b203f6
 SHA512:
-  metadata.gz: 6c3ead358396ac6c1adf2c5a2a5af3409513bfc0a944fa7298d74135b66ea59f865e30a51167b6f81247967b5ac2be7326aa5717d5b3d0c2993a2a2a96831d48
-  data.tar.gz: 4a5d41bdcc5e01b9dc0a3ffbaba5292702873902e5325dfeba5759e54049e03c95ce6ba760a0c0e8b1c9bd35c0ca6958bbec137fe7a33da7d978148cc6bc5b2f
+  metadata.gz: 7dcc49c34e7d3623cd943c7136ca99b1a58cb5bb479bf13377ea013f0e5ae67a0c83b25252aeab89e7ca2d7296b31ea0b719563fe1d8ee6955f02fff52827412
+  data.tar.gz: 73943f8daa01fec691f0ebcfb3e2c6d1e6f2ae47dc073ba862fda8aad8d0f0c08f7e92bf54bda7531f0ba12cb9d3bcd87b3322cd9feb092782694ff562b1fdd1

data/app/pb_kits/playbook/_playbook.scss

@@ -2,7 +2,6 @@
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
@@ -10,7 +9,6 @@
 @import 'pb_caption/caption';
 @import 'pb_card/card';
 @import 'pb_checkbox/checkbox';
-@import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
@@ -38,7 +36,6 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -53,7 +50,6 @@
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
 @import 'pb_lightbox/lightbox';
-@import 'pb_line_graph/line_graph';
 @import 'pb_link/link';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbBarGraph } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbCircleChart } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { PbCircleChart } from 'playbook-ui'
+import PbCircleChart from './_pb_circle_chart'
 
 beforeEach(() => {
   // Silences error logs within the test suite.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbGaugeChart } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { PbGaugeChart } from 'playbook-ui'
+import PbGaugeChart from './_pb_gauge_chart'
 
 beforeEach(() => {
   // Silences error logs within the test suite.

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md

@@ -2,4 +2,9 @@
 
 This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.
+
+**NOTE**: All chart kits are available through a separate entrypoint to keep Highcharts optional. Import them using:
+```javascript
+import { PbLineGraph } from 'playbook-ui/charts'
+```

data/app/pb_kits/playbook/pb_pb_line_graph/pb_line_graph.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { PbLineGraph } from 'playbook-ui'
+import PbLineGraph from './_pb_line_graph'
 
 beforeEach(() => {
   // Silences error logs within the test suite.

data/app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js

@@ -1,55 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
 
-const testSubject = 'body'
+// Note: TextInput excluded - alignContent is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'alignContent',
+  ['start', 'center', 'end', 'spaceBetween', 'spaceAround', 'spaceEvenly'],
+  (v) => `align_content_${camelToSnakeCase(v)}`,
+  (size, v) => `align_content_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
 
-test('Global Props: returns proper class name', () => {
-  const propValues = ["start", "center", "end", "spaceBetween", "spaceAround", "spaceEvenly"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          alignContent={`${propValues[x]}`}
-          data={{ testid: testId }}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`align_content_${camelToSnakeCase(propValues[x])}`)
+testGlobalPropResponsiveWithDefault(
+  'alignContent',
+  { default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" },
+  (v) => `align_content_${camelToSnakeCase(v)}`,
+  (size, v) => `align_content_${size}_${camelToSnakeCase(v)}`
+)
 
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            alignContent={{ [size]: propValues[x] }}
-            data={{ testid: testId }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`align_content_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'alignContent',
+  ['align_content_start', 'align_content_center', 'align_content_end', 'align_content_space_between', 'align_content_space_around', 'align_content_space_evenly'],
+  undefined,
+  { skipNull: true }
+)
 
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignContent={{ default: "spaceAround", xs: "center", sm: "spaceAround", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_content_space_around`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_content_xs_center`)
-  expect(kit).toHaveClass(`align_content_sm_space_around`)
-  expect(kit).toHaveClass(`align_content_md_center`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'alignContent',
+  ['invalid', 'bad_value', 'not_an_align_value', 'special-chars!@#'],
+  ['align_content_invalid', 'align_content_bad_value', 'align_content_not_an_align_value', 'align_content_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js

@@ -1,54 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
+
+// Note: TextInput excluded - alignItems is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'alignItems',
+  ['start', 'center', 'end', 'baseline', 'stretch', 'flexStart', 'flexEnd'],
+  (v) => `align_items_${camelToSnakeCase(v)}`,
+  (size, v) => `align_items_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
 
-const testSubject = 'body'
+testGlobalPropResponsiveWithDefault(
+  'alignItems',
+  { default: 'end', xs: 'center', sm: 'end', md: 'center' },
+  (v) => `align_items_${camelToSnakeCase(v)}`,
+  (size, v) => `align_items_${size}_${camelToSnakeCase(v)}`
+)
 
-test('Global Props: returns proper class name', () => {
-  const propValues = ["start", "center", "end", "baseline", "stretch", "flexStart", "flexEnd"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          alignItems={`${propValues[x]}`}
-          data={{ testid: testId }}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`align_items_${camelToSnakeCase(propValues[x])}`)
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            alignItems={{ [size]: propValues[x] }}
-            data={{ testid: testId }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`align_items_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'alignItems',
+  ['align_items_start', 'align_items_center', 'align_items_end', 'align_items_baseline', 'align_items_stretch', 'align_items_flex_start', 'align_items_flex_end'],
+  undefined,
+  { skipNull: true }
+)
 
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignItems={{ default: "end", xs: "center", sm: "end", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_items_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_items_xs_center`)
-  expect(kit).toHaveClass(`align_items_sm_end`)
-  expect(kit).toHaveClass(`align_items_md_center`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'alignItems',
+  ['invalid', 'bad_value', 'not_an_align_value', 'special-chars!@#'],
+  ['align_items_invalid', 'align_items_bad_value', 'align_items_not_an_align_value', 'align_items_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js

@@ -1,55 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
 
-const testSubject = 'body'
+// Note: TextInput excluded - alignSelf is a flexbox property that doesn't apply to form inputs
+testGlobalProp(
+  'alignSelf',
+  ['start', 'center', 'end', 'stretch', 'baseline', 'auto'],
+  (v) => `align_self_${camelToSnakeCase(v)}`,
+  (size, v) => `align_self_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
 
-test('Global Props: returns proper class name', () => {
-  const propValues = ["start", "center", "end", "stretch", "baseline", "auto"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          alignSelf={`${propValues[x]}`}
-          data={{ testid: testId }}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`align_self_${camelToSnakeCase(propValues[x])}`)
+testGlobalPropResponsiveWithDefault(
+  'alignSelf',
+  { default: 'end', xs: 'center', sm: 'end', md: 'center' },
+  (v) => `align_self_${camelToSnakeCase(v)}`,
+  (size, v) => `align_self_${size}_${camelToSnakeCase(v)}`
+)
 
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            alignSelf={{ [size]: propValues[x] }}
-            data={{ testid: testId }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`align_self_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'alignSelf',
+  ['align_self_start', 'align_self_center', 'align_self_end', 'align_self_stretch', 'align_self_baseline', 'align_self_auto'],
+  undefined,
+  { skipNull: true }
+)
 
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        alignSelf={{ default: "end", xs: "center", sm: "end", md: "center" }}
-        data={{ testid: testId }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`align_self_end`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`align_self_xs_center`)
-  expect(kit).toHaveClass(`align_self_sm_end`)
-  expect(kit).toHaveClass(`align_self_md_center`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'alignSelf',
+  ['invalid', 'bad_value', 'not_an_align_value', 'special-chars!@#'],
+  ['align_self_invalid', 'align_self_bad_value', 'align_self_not_an_align_value', 'align_self_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/display.test.js

@@ -1,56 +1,42 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
-import Body from '../../../pb_body/_body'
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import { camelToSnakeCase } from '../../../utilities/text'
-import { SCREEN_SIZES } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import TextInput from '../../../pb_text_input/_text_input'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
 
-const testSubject = 'body'
+testGlobalProp(
+  'display',
+  ['block', 'inline', 'inline_block', 'flex', 'inline_flex', 'none', 'grid'],
+  (v) => `display_${camelToSnakeCase(v)}`,
+  (size, v) => `display_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
 
-// %w[block inline_block inline flex inline_flex none]
-test('Global Props: returns proper class name', () => {
-  const propValues = ["block", "inline", "inline_block", "flex", "inline_flex", "none", "grid" ]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          display={`${propValues[x]}`}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`display_${camelToSnakeCase(propValues[x])}`)
+testGlobalPropResponsiveWithDefault(
+  'display',
+  { default: 'none', xs: 'block', sm: 'none', md: 'block' },
+  (v) => `display_${camelToSnakeCase(v)}`,
+  (size, v) => `display_${size}_${camelToSnakeCase(v)}`
+)
 
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            display={{ [size]: propValues[x] }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`display_${size}_${camelToSnakeCase(propValues[x])}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'display',
+  ['display_block', 'display_inline', 'display_flex', 'display_none', 'display_grid'],
+  undefined,
+  { skipNull: true },
+)
 
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        display={{ default: "none", xs: "block", sm: "none", md: "block" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`display_none`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`display_xs_block`)
-  expect(kit).toHaveClass(`display_sm_none`)
-  expect(kit).toHaveClass(`display_md_block`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+// NOTE: Using allowRenderingErrors: true because invalid types (like numbers) cause rendering errors with camelToSnakeCase
+testGlobalPropInvalidValues(
+  'display',
+  ['invalid', 'bad_value', 'not_a_display_value', 'special-chars!@#', 'display_with_underscores'],
+  ['display_invalid', 'display_bad_value', 'display_not_a_display_value', 'display_special-chars!@#', 'display_display_with_underscores'],
+  undefined,
+  { skipKnownIssues: true, allowRenderingErrors: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/flex.test.js

@@ -1,82 +1,50 @@
-import React from 'react'
-import { render, screen } from '../../test-utils'
-
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
 import Body from '../../../pb_body/_body'
-import { SCREEN_SIZES } from '../../test-utils'
-
-const testSubject = 'body'
+import Button from '../../../pb_button/_button'
+import Card from '../../../pb_card/_card'
+import Title from '../../../pb_title/_title'
+import TextInput from '../../../pb_text_input/_text_input'
+import Flex from '../../../pb_flex/_flex'
+import Link from '../../../pb_link/_link'
+import Badge from '../../../pb_badge/_badge'
 
-test('Global Props: Returns ordinal suffixed class name', () => {
-  for(let x = 0, y = 13; x < y; ++x) {
-    const testId = `${testSubject}-${x}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          flex={`${x}`}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`flex_${x}`)
+// Test numeric values (0-12) - flex prop expects strings
+testGlobalProp(
+  'flex',
+  Array.from({ length: 13 }, (_, i) => String(i)),
+  (v) => `flex_${v}`,
+  (size, v) => `flex_${size}_${v}`,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
 
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${x}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            flex={{ [size]: x }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`flex_${size}_${x}`)
-    })
-  }
-})
+// Test string values
+testGlobalProp(
+  'flex',
+  ['auto', 'initial', 'none'],
+  (v) => `flex_${v}`,
+  (size, v) => `flex_${size}_${v}`,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
 
-test('Global Props: returns proper class name', () => {
-  const propValues = ["auto", "initial", "none"]
-  for(let x = 0, y = propValues.length; x < y; ++x) {
-    const testId = `${testSubject}-${propValues[x]}`
-    render(
-      <Body
-          data={{ testid: testId }}
-          flex={`${propValues[x]}`}
-          text="Hi"
-      />
-    )
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`flex_${propValues[x]}`)
+testGlobalPropResponsiveWithDefault(
+  'flex',
+  { default: '3', xs: '1', sm: '3', md: '1' },
+  (v) => `flex_${v}`,
+  (size, v) => `flex_${size}_${v}`
+)
 
-    SCREEN_SIZES.forEach((size) => {
-      const testId = `${testSubject}-${propValues[x]}-${size}`
-      render(
-        <Body
-            data={{ testid: testId }}
-            flex={{ [size]: propValues[x] }}
-            text="Hi"
-        />
-      )
-      const kit = screen.getByTestId(testId)
-      expect(kit).toHaveClass(`flex_${size}_${propValues[x]}`)
-    })
-  }
-})
+testGlobalPropAbsence(
+  'flex',
+  ['flex_0', 'flex_1', 'flex_12', 'flex_auto', 'flex_initial', 'flex_none'],
+  undefined,
+  { skipNull: true }
+)
 
-test('Global Props: returns proper class name with default key', () => {
-  const testId = `${testSubject}-default-responsive`
-  render(
-    <Body
-        data={{ testid: testId }}
-        flex={{ default: "3", xs: "1", sm: "3", md: "1" }}
-        text="Hi"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  // Should have base class for default value
-  expect(kit).toHaveClass(`flex_3`)
-  // Should have responsive classes for screen sizes
-  expect(kit).toHaveClass(`flex_xs_1`)
-  expect(kit).toHaveClass(`flex_sm_3`)
-  expect(kit).toHaveClass(`flex_md_1`)
-})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'flex',
+  [999, -1, 'invalid', 'out_of_range', 'bad_string', 13, 'special-chars!@#'],
+  ['flex_999', 'flex_-1', 'flex_invalid', 'flex_out_of_range', 'flex_bad_string', 'flex_13', 'flex_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)