RubyGems - playbook_ui - Versions diffs - 10.25.1 → 10.26.0.pre.alpha5 - Mend

playbook_ui 10.25.1 → 10.26.0.pre.alpha5

Files changed (119) hide show

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

@@ -0,0 +1,64 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import { SCREEN_SIZES } from '../../test-utils'
+const testSubject = 'body'
+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}`)
+    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('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]}`)
+    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]}`)
+    })
+  }
+})

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+import { SCREEN_SIZES } from '../../test-utils'
+const testSubject = 'body'
+test('Global Props: returns proper class name', () => {
+  const propValues = ["row", "column", "columnReverse"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexDirection={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_direction_${camelToSnakeCase(propValues[x])}`)
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flexDirection={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_direction_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import { SCREEN_SIZES } from '../../test-utils'
+const testSubject = 'body'
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 0, y = 2; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexGrow={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_grow_${x}`)
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${x}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flexGrow={{ [size]: x }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_grow_${size}_${x}`)
+    })
+  }
+})

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import { SCREEN_SIZES } from '../../test-utils'
+const testSubject = 'body'
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 0, y = 2; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexShrink={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_shrink_${x}`)
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${x}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flexShrink={{ [size]: x }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_shrink_${size}_${x}`)
+    })
+  }
+})

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../../utilities/text'
+import { SCREEN_SIZES } from '../../test-utils'
+const testSubject = 'body'
+test('Global Props: returns proper class name', () => {
+  const propValues = ["wrap", "nowrap", "wrapReverse"]
+  for(let x = 0, y = 3; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          flexWrap={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_wrap_${camelToSnakeCase(propValues[x])}`)
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            flexWrap={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_wrap_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../text'
+import { SCREEN_SIZES } from '../../test-utils'
+const testSubject = 'body'
+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
+          data={{ testid: testId }}
+          justifyContent={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`justify_content_${camelToSnakeCase(propValues[x])}`)
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            justifyContent={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`justify_content_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})

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

@@ -0,0 +1,37 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import { camelToSnakeCase } from '../../text'
+import { SCREEN_SIZES } from '../../test-utils'
+const testSubject = 'body'
+test('Global Props: returns proper class name', () => {
+  const propValues = ["start", "center", "end", "auto", "stretch"]
+  for(let x = 0, y = propValues.length; x < y; ++x) {
+    const testId = `${testSubject}-${propValues[x]}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          justifySelf={`${propValues[x]}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`justify_self_${camelToSnakeCase(propValues[x])}`)
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${propValues[x]}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            justifySelf={{ [size]: propValues[x] }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`justify_self_${size}_${camelToSnakeCase(propValues[x])}`)
+    })
+  }
+})

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import { render, screen } from '../../test-utils'
+import Body from '../../../pb_body/_body'
+import { SCREEN_SIZES } from '../../test-utils'
+const testSubject = 'body'
+test('Global Props: Returns ordinal suffixed class name', () => {
+  for(let x = 1, y = 13; x < y; ++x) {
+    const testId = `${testSubject}-${x}`
+    render(
+      <Body
+          data={{ testid: testId }}
+          order={`${x}`}
+          text="Hi"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`flex_order_${x}`)
+    SCREEN_SIZES.forEach((size) => {
+      const testId = `${testSubject}-${x}-${size}`
+      render(
+        <Body
+            data={{ testid: testId }}
+            order={{ [size]: x }}
+            text="Hi"
+        />
+      )
+      const kit = screen.getByTestId(testId)
+      expect(kit).toHaveClass(`flex_order_${size}_${x}`)
+    })
+  }
+})

data/app/pb_kits/playbook/utilities/test-utils.js CHANGED Viewed

@@ -27,6 +27,8 @@ const customRender = (ui, options) =>
 export * from '@testing-library/react'
 export { customRender as render }
+export const SCREEN_SIZES = ["xs", "sm", "md", "lg", "xl"]
 export const renderKit = (Kit, props = {}, newProps = {}) => {
   const kitProps = { ...props, ...newProps }
   render(<Kit {...kitProps} />)

data/app/pb_kits/playbook/utilities/text.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { filter, isEmpty } from 'lodash'
+const titleizedWord = (word: string): string => (
+  word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
+)
+export const titleize = (sentence: string): string => (
+  isEmpty(sentence) ? sentence : sentence.split(' ').map(titleizedWord).join(' ')
+)
+const notEmpty = (value: string | Record<string, unknown>): boolean => !isEmpty(value)
+export const joinPresent = (array: [], separator: string): string => (
+  filter(array, notEmpty).join(separator)
+)
+export const camelToSnakeCase = (word: string): string => {
+  return word.split(/([A-Z])/g).map((w, i) => {
+    const prefix = i > 0 ? '_' : ''
+    return w === w.toLowerCase() ? w : prefix + w.toLowerCase()
+  }).join("")
+}

data/dist/reset.css CHANGED Viewed

@@ -1,2 +1,61 @@
-*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
+/* CLEAN UP AND REMOVE */
+/* Headings */
+/* Standard Font Weights */
+/* Non_Standard Font Weights */
+/*=====================================
+Base colors should not be documented.
+Only document color use.
+Colors -----------------------------*/
+/* Specialty Gradient -----------------*/
+/* Interface colors -------------------*/
+/* Main colors ------------------------*/
+/*=====================================
+Background colors ------------------*/
+/* Card colors ------------------*/
+/* Active colors ----------------------*/
+/* Hover colors -----------------------*/
+/* Focus colors -----------------------*/
+/* Border colors ----------------------*/
+/* Shadow colors ----------------------*/
+/* Text colors ------------------------*/
+/* Data colors ------------------------*/
+/* Status colors ----------------------*/
+/* Link colors ------------------------*/
+/* Product colors ---------------------*/
+/* Category colors ---------------------*/
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0; }
+  *:before, *:after {
+    box-sizing: border-box; }
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden; }
+body {
+  font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
+  font-size: 16px;
+  line-height: 1.5;
+  background-color: #F3F7FB;
+  height: 100%;
+  letter-spacing: 0;
+  font-weight: 400;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: #242B42;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; }
+a {
+  text-decoration: none;
+  color: #0056CF; }

data/lib/playbook/align_content.rb CHANGED Viewed

@@ -6,15 +6,23 @@ module Playbook
       base.prop :align_content
     end
+    # rubocop:disable Style/IfInsideElse
     def align_content_props
       selected_props = align_content_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
       selected_props.map do |k|
-        align_content_value = send(k)
-        "align_content_#{align_content_value}" if align_content_values.include? align_content_value
+        align_content = send(k)
+        if align_content.is_a?(Hash)
+          align_content.map do |media_size, align_value|
+            "align_content_#{media_size}_#{align_value.underscore}" if align_content_values.include? align_value
+          end
+        else
+          "align_content_#{align_content.underscore}" if align_content_values.include? align_content
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
     def align_content_options
       {
@@ -23,7 +31,7 @@ module Playbook
     end
     def align_content_values
-      %w[start end center space_between space_around space_evenly]
+      %w[start end center spaceBetween spaceAround spaceEvenly]
     end
   end
 end

data/lib/playbook/align_items.rb CHANGED Viewed

@@ -6,15 +6,23 @@ module Playbook
       base.prop :align_items
     end
+    # rubocop:disable Style/IfInsideElse
     def align_items_props
       selected_props = align_items_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
       selected_props.map do |k|
         align_items_value = send(k)
-        "align_items_#{align_items_value}" if align_items_values.include? align_items_value
+        if align_items_value.is_a?(Hash)
+          align_items_value.map do |media_size, align_value|
+            "align_items_#{media_size}_#{align_value.underscore}" if align_items_values.include? align_value.to_s
+          end
+        else
+          "align_items_#{align_items_value.underscore}" if align_items_values.include? align_items_value
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
     def align_items_options
       {
@@ -23,7 +31,7 @@ module Playbook
     end
     def align_items_values
-      %w[flex_start flex_end start end center baseline stretch]
+      %w[flexStart flexEnd start end center baseline stretch]
     end
   end
 end

data/lib/playbook/align_self.rb CHANGED Viewed

@@ -6,14 +6,22 @@ module Playbook
       base.prop :align_self
     end
+    # rubocop:disable Style/IfInsideElse
     def align_self_props
       selected_props = align_self_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
       selected_props.map do |k|
         align_self_value = send(k)
-        "align_self_#{align_self_value}" if align_self_values.include? align_self_value
+        if align_self_value.is_a?(Hash)
+          align_self_value.map do |media_size, align_value|
+            "align_self_#{media_size}_#{align_value}" if align_self_values.include? align_value
+          end
+        else
+          "align_self_#{align_self_value}" if align_self_values.include? align_self_value
+        end
       end.compact.join(" ")
+      # rubocop:enable Style/IfInsideElse
     end
     def align_self_options

data/lib/playbook/display.rb CHANGED Viewed

@@ -8,12 +8,20 @@ module Playbook
     def display_props
       selected_props = display_options.keys.select { |sk| try(sk) }
-      return nil unless selected_props.present?
-      selected_props.map do |k|
-        display_value = send(k)
-        "display_#{display_value}" if display_values.include? display_value
-      end.compact.join(" ")
+      responsive = selected_props.present? && try(:display).is_a?(::Hash)
+      css = ""
+      if responsive
+        display_value = send(:display)
+        display_value.each do |key, value|
+          css += "display_#{key}_#{value} " if display_size_values.include?(key.to_s) && display_values.include?(value.to_s)
+        end
+      else
+        selected_props.each do |k|
+          display_value = send(k)
+          css += "display_#{display_value}" if display_values.include? display_value
+        end
+      end
+      css unless css.blank?
     end
     def display_options
@@ -22,8 +30,12 @@ module Playbook
       }
     end
+    def display_size_values
+      %w[xs sm md lg xl]
+    end
     def display_values
-      %w[block inline_block inline flex inline_flex hidden]
+      %w[block inline_block inline flex inline_flex none]
     end
   end
 end

data/lib/playbook/flex.rb CHANGED Viewed

@@ -6,15 +6,23 @@ module Playbook
       base.prop :flex
     end
+    # rubocop:disable Style/IfInsideElse
     def flex_props
       selected_props = flex_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
       selected_props.map do |k|
         flex_value = send(k)
-        "flex_#{flex_value}" if flex_values.include? flex_value
+        if flex_value.is_a?(Hash)
+          flex_value.map do |media_size, value|
+            "flex_#{media_size}_#{value}" if flex_values.include? value.to_s
+          end
+        else
+          "flex_#{flex_value}" if flex_values.include? flex_value.to_s
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
     def flex_options
       {

data/lib/playbook/flex_direction.rb CHANGED Viewed

@@ -6,15 +6,23 @@ module Playbook
       base.prop :flex_direction
     end
+    # rubocop:disable Style/IfInsideElse
     def flex_direction_props
       selected_props = flex_direction_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
       selected_props.map do |k|
         flex_direction_value = send(k)
-        "flex_direction_#{flex_direction_value}" if flex_direction_values.include? flex_direction_value
+        if flex_direction_value.is_a?(Hash)
+          flex_direction_value.map do |media_size, flex_value|
+            "flex_direction_#{media_size}_#{flex_value.underscore}" if flex_direction_values.include? flex_value
+          end
+        else
+          "flex_direction_#{flex_direction_value.underscore}" if flex_direction_values.include? flex_direction_value
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
     def flex_direction_options
       {
@@ -23,7 +31,7 @@ module Playbook
     end
     def flex_direction_values
-      %w[row column row_reverse column_reverse]
+      %w[row column rowReverse columnReverse]
     end
   end
 end

data/lib/playbook/flex_grow.rb CHANGED Viewed

@@ -6,15 +6,23 @@ module Playbook
       base.prop :flex_grow
     end
+    # rubocop:disable Style/IfInsideElse
     def flex_grow_props
       selected_props = flex_grow_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
       selected_props.map do |k|
         flex_grow_value = send(k)
-        "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value
+        if flex_grow_value.is_a?(Hash)
+          flex_grow_value.map do |media_size, grow_value|
+            "flex_grow_#{media_size}_#{grow_value}" if flex_grow_values.include? grow_value.to_s
+          end
+        else
+          "flex_grow_#{flex_grow_value}" if flex_grow_values.include? flex_grow_value.to_s
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
     def flex_grow_options
       {

data/lib/playbook/flex_shrink.rb CHANGED Viewed

@@ -6,15 +6,23 @@ module Playbook
       base.prop :flex_shrink
     end
+    # rubocop:disable Style/IfInsideElse
     def flex_shrink_props
       selected_props = flex_shrink_options.keys.select { |sk| try(sk) }
       return nil unless selected_props.present?
       selected_props.map do |k|
         flex_shrink_value = send(k)
-        "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value
+        if flex_shrink_value.is_a?(Hash)
+          flex_shrink_value.map do |media_size, shrink_value|
+            "flex_shrink_#{media_size}_#{shrink_value}" if flex_shrink_values.include? shrink_value.to_s
+          end
+        else
+          "flex_shrink_#{flex_shrink_value}" if flex_shrink_values.include? flex_shrink_value.to_s
+        end
       end.compact.join(" ")
     end
+    # rubocop:enable Style/IfInsideElse
     def flex_shrink_options
       {