RubyGems - playbook_ui - Versions diffs - 16.1.0.pre.rc.1 → 16.1.0.pre.rc.2 - Mend

playbook_ui 16.1.0.pre.rc.1 → 16.1.0.pre.rc.2

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

data/app/pb_kits/playbook/utilities/test/globalProps/left.test.js ADDED Viewed

@@ -0,0 +1,60 @@
+import React from 'react'
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { render, screen } 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 validSizes = ['xs', 'sm', 'md', 'lg', 'xl']
+// NOTE: TextInput excluded - positioning props are not valid for input elements
+// Test left prop with string values
+testGlobalProp(
+  'left',
+  validSizes,
+  (v) => `left_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+// Test left prop with object values (inset) - tested separately due to object value complexity
+test('Global Props: left returns proper class name with object values (inset)', () => {
+  const testCases = [
+    { value: { value: 'md', inset: true }, expected: 'left_md_inset' },
+    { value: { value: 'lg', inset: false }, expected: 'left_lg' },
+    { value: { value: 'sm', inset: true }, expected: 'left_sm_inset' }
+  ]
+  testCases.forEach(({ value, expected }) => {
+    const testId = `body-left-object-${value.value}-${value.inset}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          left={value}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(expected)
+  })
+})
+testGlobalPropAbsence(
+  'left',
+  ['left_xs', 'left_sm', 'left_md', 'left_lg', 'left_xl'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'left',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['left_invalid', 'left_bad_value', 'left_not_a_size', 'left_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/lineHeight.test.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+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 - lineHeight is not a valid prop for input elements
+testGlobalProp(
+  'lineHeight',
+  ['loosest', 'looser', 'loose', 'normal', 'tight', 'tighter', 'tightest'],
+  (v) => `line_height_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropAbsence(
+  'lineHeight',
+  ['line_height_loosest', 'line_height_looser', 'line_height_loose', 'line_height_normal', 'line_height_tight', 'line_height_tighter', 'line_height_tightest'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'lineHeight',
+  ['invalid', 'bad_value', 'not_a_line_height', 'special-chars!@#'],
+  ['line_height_invalid', 'line_height_bad_value', 'line_height_not_a_line_height', 'line_height_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/margin.test.js ADDED Viewed

@@ -0,0 +1,95 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+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 validValues = ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto', 'initial', 'inherit']
+// Test margin prop
+testGlobalProp(
+  'margin',
+  validValues,
+  (v) => `m_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test marginX prop
+testGlobalProp(
+  'marginX',
+  validValues,
+  (v) => `mx_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test marginY prop
+testGlobalProp(
+  'marginY',
+  validValues,
+  (v) => `my_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test marginTop prop
+testGlobalProp(
+  'marginTop',
+  validValues,
+  (v) => `mt_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test marginBottom prop
+testGlobalProp(
+  'marginBottom',
+  validValues,
+  (v) => `mb_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test marginLeft prop
+testGlobalProp(
+  'marginLeft',
+  validValues,
+  (v) => `ml_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test marginRight prop
+testGlobalProp(
+  'marginRight',
+  validValues,
+  (v) => `mr_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test absence for all margin props
+const marginProps = ['margin', 'marginX', 'marginY', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight']
+marginProps.forEach((propName) => {
+  const prefix = propName === 'margin' ? 'm' : propName === 'marginX' ? 'mx' : propName === 'marginY' ? 'my' : propName === 'marginTop' ? 'mt' : propName === 'marginBottom' ? 'mb' : propName === 'marginLeft' ? 'ml' : 'mr'
+  testGlobalPropAbsence(
+    propName,
+    [`${prefix}_xs`, `${prefix}_sm`, `${prefix}_md`, `${prefix}_lg`, `${prefix}_xl`],
+    undefined,
+    { skipNull: true }
+  )
+})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'margin',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['m_invalid', 'm_bad_value', 'm_not_a_size', 'm_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/numberSpacing.test.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+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 - numberSpacing is not a valid prop for input elements
+testGlobalProp(
+  'numberSpacing',
+  ['tabular'],
+  (v) => `ns_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropAbsence(
+  'numberSpacing',
+  ['ns_tabular'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'numberSpacing',
+  ['invalid', 'bad_value', 'not_tabular', 'special-chars!@#'],
+  ['ns_invalid', 'ns_bad_value', 'ns_not_tabular', 'ns_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/overflow.test.js ADDED Viewed

@@ -0,0 +1,68 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+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 validValues = ['scroll', 'visible', 'hidden', 'auto']
+// NOTE: TextInput excluded - overflow properties are not valid props for input elements
+// Test overflow prop
+testGlobalProp(
+  'overflow',
+  validValues,
+  (v) => `overflow_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropAbsence(
+  'overflow',
+  ['overflow_scroll', 'overflow_visible', 'overflow_hidden', 'overflow_auto'],
+  undefined,
+  { skipNull: true }
+)
+// Test overflowX prop
+testGlobalProp(
+  'overflowX',
+  validValues,
+  (v) => `overflow_x_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropAbsence(
+  'overflowX',
+  ['overflow_x_scroll', 'overflow_x_visible', 'overflow_x_hidden', 'overflow_x_auto'],
+  undefined,
+  { skipNull: true }
+)
+// Test overflowY prop
+testGlobalProp(
+  'overflowY',
+  validValues,
+  (v) => `overflow_y_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropAbsence(
+  'overflowY',
+  ['overflow_y_scroll', 'overflow_y_visible', 'overflow_y_hidden', 'overflow_y_auto'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'overflow',
+  ['invalid', 'bad_value', 'not_an_overflow', 'special-chars!@#'],
+  ['overflow_invalid', 'overflow_bad_value', 'overflow_not_an_overflow', 'overflow_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/padding.test.js ADDED Viewed

@@ -0,0 +1,95 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+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 validValues = ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto', 'initial', 'inherit']
+// Test padding prop
+testGlobalProp(
+  'padding',
+  validValues,
+  (v) => `p_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test paddingX prop
+testGlobalProp(
+  'paddingX',
+  validValues,
+  (v) => `px_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test paddingY prop
+testGlobalProp(
+  'paddingY',
+  validValues,
+  (v) => `py_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test paddingTop prop
+testGlobalProp(
+  'paddingTop',
+  validValues,
+  (v) => `pt_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test paddingBottom prop
+testGlobalProp(
+  'paddingBottom',
+  validValues,
+  (v) => `pb_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test paddingLeft prop
+testGlobalProp(
+  'paddingLeft',
+  validValues,
+  (v) => `pl_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test paddingRight prop
+testGlobalProp(
+  'paddingRight',
+  validValues,
+  (v) => `pr_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+// Test absence for all padding props
+const paddingProps = ['padding', 'paddingX', 'paddingY', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight']
+paddingProps.forEach((propName) => {
+  const prefix = propName === 'padding' ? 'p' : propName === 'paddingX' ? 'px' : propName === 'paddingY' ? 'py' : propName === 'paddingTop' ? 'pt' : propName === 'paddingBottom' ? 'pb' : propName === 'paddingLeft' ? 'pl' : 'pr'
+  testGlobalPropAbsence(
+    propName,
+    [`${prefix}_xs`, `${prefix}_sm`, `${prefix}_md`, `${prefix}_lg`, `${prefix}_xl`],
+    undefined,
+    { skipNull: true }
+  )
+})
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'padding',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['p_invalid', 'p_bad_value', 'p_not_a_size', 'p_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/position.test.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+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'
+testGlobalProp(
+  'position',
+  ['relative', 'absolute', 'fixed', 'sticky'],
+  (v) => `position_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+testGlobalPropAbsence(
+  'position',
+  ['position_relative', 'position_absolute', 'position_fixed', 'position_sticky'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'position',
+  ['invalid', 'bad_value', 'not_a_position', 'static', 'special-chars!@#'],
+  ['position_invalid', 'position_bad_value', 'position_not_a_position', 'position_static', 'position_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/right.test.js ADDED Viewed

@@ -0,0 +1,60 @@
+import React from 'react'
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { render, screen } 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 validSizes = ['xs', 'sm', 'md', 'lg', 'xl']
+// NOTE: TextInput excluded - positioning props are not valid for input elements
+// Test right prop with string values
+testGlobalProp(
+  'right',
+  validSizes,
+  (v) => `right_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+// Test right prop with object values (inset) - tested separately due to object value complexity
+test('Global Props: right returns proper class name with object values (inset)', () => {
+  const testCases = [
+    { value: { value: 'md', inset: true }, expected: 'right_md_inset' },
+    { value: { value: 'lg', inset: false }, expected: 'right_lg' },
+    { value: { value: 'sm', inset: true }, expected: 'right_sm_inset' }
+  ]
+  testCases.forEach(({ value, expected }) => {
+    const testId = `body-right-object-${value.value}-${value.inset}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          right={value}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(expected)
+  })
+})
+testGlobalPropAbsence(
+  'right',
+  ['right_xs', 'right_sm', 'right_md', 'right_lg', 'right_xl'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'right',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['right_invalid', 'right_bad_value', 'right_not_a_size', 'right_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/shadow.test.js ADDED Viewed

@@ -0,0 +1,33 @@
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+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'
+testGlobalProp(
+  'shadow',
+  ['none', 'deep', 'deeper', 'deepest'],
+  (v) => `shadow_${v}`,
+  null,
+  [Body, Button, Card, Title, TextInput, Flex, Link, Badge]
+)
+testGlobalPropAbsence(
+  'shadow',
+  ['shadow_none', 'shadow_deep', 'shadow_deeper', 'shadow_deepest'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'shadow',
+  ['invalid', 'bad_value', 'not_a_shadow', 'special-chars!@#'],
+  ['shadow_invalid', 'shadow_bad_value', 'shadow_not_a_shadow', 'shadow_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/textAlign.test.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { camelToSnakeCase } from '../../../utilities/text'
+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 - textAlign is not a valid prop for input elements
+testGlobalProp(
+  'textAlign',
+  ['start', 'end', 'left', 'right', 'center', 'justify', 'justifyAll', 'matchParent'],
+  (v) => `text_align_${v}`,
+  (size, v) => `text_align_${size}_${camelToSnakeCase(v)}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropResponsiveWithDefault(
+  'textAlign',
+  { default: 'center', xs: 'left', sm: 'center', md: 'right' },
+  (v) => `text_align_${camelToSnakeCase(v)}`,
+  (size, v) => `text_align_${size}_${camelToSnakeCase(v)}`
+)
+testGlobalPropAbsence(
+  'textAlign',
+  ['text_align_start', 'text_align_end', 'text_align_center', 'text_align_left', 'text_align_right'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'textAlign',
+  ['invalid', 'bad_value', 'not_an_alignment', 'special-chars!@#'],
+  ['text_align_invalid', 'text_align_bad_value', 'text_align_not_an_alignment', 'text_align_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/top.test.js ADDED Viewed

@@ -0,0 +1,60 @@
+import React from 'react'
+import { testGlobalProp, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+import { render, screen } 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 validSizes = ['xs', 'sm', 'md', 'lg', 'xl']
+// NOTE: TextInput excluded - positioning props are not valid for input elements
+// Test top prop with string values
+testGlobalProp(
+  'top',
+  validSizes,
+  (v) => `top_${v}`,
+  null,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+// Test top prop with object values (inset) - tested separately due to object value complexity
+test('Global Props: top returns proper class name with object values (inset)', () => {
+  const testCases = [
+    { value: { value: 'md', inset: true }, expected: 'top_md_inset' },
+    { value: { value: 'lg', inset: false }, expected: 'top_lg' },
+    { value: { value: 'sm', inset: true }, expected: 'top_sm_inset' }
+  ]
+  testCases.forEach(({ value, expected }) => {
+    const testId = `body-top-object-${value.value}-${value.inset}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          text="Hi"
+          top={value}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(expected)
+  })
+})
+testGlobalPropAbsence(
+  'top',
+  ['top_xs', 'top_sm', 'top_md', 'top_lg', 'top_xl'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'top',
+  ['invalid', 'bad_value', 'not_a_size', 'special-chars!@#'],
+  ['top_invalid', 'top_bad_value', 'top_not_a_size', 'top_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)

data/app/pb_kits/playbook/utilities/test/globalProps/verticalAlign.test.js ADDED Viewed

@@ -0,0 +1,40 @@
+import { testGlobalProp, testGlobalPropResponsiveWithDefault, testGlobalPropAbsence, testGlobalPropInvalidValues } from './globalPropsTestHelper'
+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 - verticalAlign is not a valid prop for input elements
+testGlobalProp(
+  'verticalAlign',
+  ['baseline', 'super', 'top', 'middle', 'bottom', 'sub', 'text-top', 'text-bottom'],
+  (v) => `vertical_align_${v}`,
+  (size, v) => `vertical_align_${size}_${v}`,
+  [Body, Button, Card, Title, Flex, Link, Badge]
+)
+testGlobalPropResponsiveWithDefault(
+  'verticalAlign',
+  { default: 'middle', xs: 'top', sm: 'middle', md: 'bottom' },
+  (v) => `vertical_align_${v}`,
+  (size, v) => `vertical_align_${size}_${v}`
+)
+testGlobalPropAbsence(
+  'verticalAlign',
+  ['vertical_align_baseline', 'vertical_align_top', 'vertical_align_middle', 'vertical_align_bottom'],
+  undefined,
+  { skipNull: true }
+)
+// NOTE: Currently using skipKnownIssues: true because globalProps.ts generates classes for invalid values
+testGlobalPropInvalidValues(
+  'verticalAlign',
+  ['invalid', 'bad_value', 'not_an_alignment', 'special-chars!@#'],
+  ['vertical_align_invalid', 'vertical_align_bad_value', 'vertical_align_not_an_alignment', 'vertical_align_special-chars!@#'],
+  undefined,
+  { skipKnownIssues: true }
+)