playbook_ui 12.25.0.pre.alpha.play824786 → 12.25.0.pre.alpha.railsmultilevelimprovements758

data/lib/playbook/forms/builder/{intl_telephone_field.rb → multi_level_select_field.rb}

@@ -3,9 +3,9 @@
 module Playbook
   module Forms
     class Builder
-      def intl_telephone(name, props: {})
+      def multi_level_select(name, props: {})
         props[:name] = name
-        @template.pb_rails("phone_number_input", props: props)
+        @template.pb_rails("multi_level_select", props: props)
       end
     end
   end

data/lib/playbook/forms/builder.rb

@@ -10,7 +10,7 @@ module Playbook
       require_relative "builder/form_field_builder"
       require_relative "builder/select_field"
       require_relative "builder/typeahead_field"
-      require_relative "builder/intl_telephone_field"
+      require_relative "builder/multi_level_select_field"
 
       prepend(FormFieldBuilder.new(:email_field, kit_name: "text_input"))
       prepend(FormFieldBuilder.new(:number_field, kit_name: "text_input"))

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.25.0"
-  VERSION = "12.25.0.pre.alpha.play824786"
+  VERSION = "12.25.0.pre.alpha.railsmultilevelimprovements758"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.25.0.pre.alpha.play824786
+  version: 12.25.0.pre.alpha.railsmultilevelimprovements758
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-06-15 00:00:00.000000000 Z
+date: 2023-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -823,25 +823,6 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_footer.md
 - app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_year_stacked/docs/index.js
-- app/pb_kits/playbook/pb_detail/_detail.scss
-- app/pb_kits/playbook/pb_detail/_detail.tsx
-- app/pb_kits/playbook/pb_detail/_detail_mixins.scss
-- app/pb_kits/playbook/pb_detail/detail.html.erb
-- app/pb_kits/playbook/pb_detail/detail.rb
-- app/pb_kits/playbook/pb_detail/detail.test.jsx
-- app/pb_kits/playbook/pb_detail/docs/_description.md
-- app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx
-- app/pb_kits/playbook/pb_detail/docs/_detail_bold.md
-- app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx
-- app/pb_kits/playbook/pb_detail/docs/_detail_colors.md
-- app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx
-- app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb
-- app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx
-- app/pb_kits/playbook/pb_detail/docs/example.yml
-- app/pb_kits/playbook/pb_detail/docs/index.js
 - app/pb_kits/playbook/pb_dialog/_close_icon.tsx
 - app/pb_kits/playbook/pb_dialog/_dialog.scss
 - app/pb_kits/playbook/pb_dialog/_dialog.tsx
@@ -1426,17 +1407,19 @@ files:
 - app/pb_kits/playbook/pb_message/message.html.erb
 - app/pb_kits/playbook/pb_message/message.rb
 - app/pb_kits/playbook/pb_message/message.test.js
-- app/pb_kits/playbook/pb_multi_level_select/_helper_functions.tsx
 - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.scss
 - app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx
+- app/pb_kits/playbook/pb_multi_level_select/_multi_select_helper.tsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/example.yml
 - app/pb_kits/playbook/pb_multi_level_select/docs/index.js
+- app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb
 - app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx
@@ -1600,8 +1583,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
 - app/pb_kits/playbook/pb_phone_number_input/docs/index.js
 - app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb
@@ -2413,7 +2394,6 @@ files:
 - app/pb_kits/playbook/utilities/flexbox_global_props/_justify_self.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_order.scss
 - app/pb_kits/playbook/utilities/globalProps.ts
-- app/pb_kits/playbook/utilities/object.ts
 - app/pb_kits/playbook/utilities/props.ts
 - app/pb_kits/playbook/utilities/test-utils.js
 - app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
@@ -2452,7 +2432,7 @@ files:
 - lib/playbook/forms/builder/collection_select_field.rb
 - lib/playbook/forms/builder/date_picker_field.rb
 - lib/playbook/forms/builder/form_field_builder.rb
-- lib/playbook/forms/builder/intl_telephone_field.rb
+- lib/playbook/forms/builder/multi_level_select_field.rb
 - lib/playbook/forms/builder/select_field.rb
 - lib/playbook/forms/builder/typeahead_field.rb
 - lib/playbook/justify_content.rb

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -1,44 +0,0 @@
-@import "./detail_mixins";
-@import "../tokens/titles";
-@import "../tokens/typography";
-
-[class^=pb_detail_kit]{
-  @include pb_detail;
-
-  @each $color_name, $color_value in $pb_detail_colors {
-    &[class*=_#{$color_name}] {
-      @include pb_detail($color_value);
-    }
-  }
-
-  @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
-    &[class*=_#{$dark_color_name}][class*=dark]{
-      @include pb_detail($dark_color_value)
-    }
-  }
-
-  // Styles
-  &.bold,
-  &.bold.dark,
-  b,
-  strong {
-    font-weight: $bold;
-  }
-
-  a {
-    color: $primary;
-    &:hover {
-      cursor: pointer;
-      color: $text_lt_default;
-    }
-  }
-
-  em {
-    font-weight: $bold;
-  }
-
-  small {
-    font-size: $font_smaller;
-    letter-spacing: $lspace_loose;
-  }
-}

data/app/pb_kits/playbook/pb_detail/_detail.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
-
-type DetailProps = {
-  aria?: { [key: string]: string },
-  bold?: boolean,
-  children?: React.ReactChild[] | React.ReactChild,
-  className?: string,
-  color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
-  dark?: boolean,
-  data?: { [key: string]: string },
-  id?: string,
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
-  text?: string,
-} & GlobalProps
-
-const Detail = (props: DetailProps) => {
-  const {
-    aria = {},
-    bold = false,
-    children,
-    className,
-    color = 'light',
-    data = {},
-    id = '',
-    tag = 'div',
-    text= ''
-  } = props
-
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
-  const dataProps: {[key: string]: any} = buildDataProps(data)
-  const isBold = bold ? "bold" : null
-  const classes = classnames(
-    buildCss('pb_detail_kit', color),
-    isBold,
-    globalProps(props),
-    className
-  )
-  const Tag: React.ReactElement | any = `${tag}`
-
-  return (
-    <Tag
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        id={id}
-    >
-      {text || children}
-    </Tag>
-  )
-}
-
-export default Detail

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss

@@ -1,29 +0,0 @@
-@import "../tokens/colors";
-@import "../tokens/line_height";
-@import "../tokens/typography";
-
-$pb_detail_colors: (
-  light:          $text_lt_light,
-  default:        $text_lt_default,
-  lighter:        $text_lt_lighter,
-  link:           $primary,
-  error:          $error,
-  success:        $text_lt_success_sm,
-);
-
-$pb_dark_detail_colors: (
-  light:          $text_dk_light,
-  default:        $text_dk_default,
-  lighter:        $text_dk_lighter,
-  link:           $primary,
-  error:          $error_dark,
-  success:        $text_dk_success_sm,
-);
-
-@mixin pb_detail($color: $text_lt_light) {
-  line-height: $lh_tight;
-  color: $color;
-  font-size: $text_small;
-  font-weight: $regular;
-  font-family: $font-family-base;
-}

data/app/pb_kits/playbook/pb_detail/detail.html.erb

@@ -1,7 +0,0 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id) do %>
-  <%= object.content %>
-<% end %>

data/app/pb_kits/playbook/pb_detail/detail.rb

@@ -1,31 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbDetail
-    class Detail < Playbook::KitBase
-      prop :bold, type: Playbook::Props::Boolean,
-                  default: false
-      prop :color, type: Playbook::Props::Enum,
-                   values: %w[light default lighter link error success],
-                   default: "light"
-      prop :tag, type: Playbook::Props::Enum,
-                 values: %w[h1 h2 h3 h4 h5 h6 p span div],
-                 default: "div"
-      prop :text
-
-      def classname
-        generate_classname("pb_detail_kit", color) + is_bold
-      end
-
-      def content
-        super.presence || text
-      end
-
-    private
-
-      def is_bold
-        bold ? " bold" : ""
-      end
-    end
-  end
-end

data/app/pb_kits/playbook/pb_detail/detail.test.jsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-
-import Detail from './_detail'
-
-test('returns namespaced class name', () => {
-  render(
-    <Detail
-        data={{ testid: 'primary-test' }}
-        text="Test class name"
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_detail_kit_light')
-})
-
-test('with colors', () => {
-  ['light', 'default', 'lighter', 'link', 'success', 'error'].forEach((color) => {
-    const testId = `colors-test-${color}`
-
-    render(
-      <Detail
-          color={color}
-          data={{ testid: testId }}
-          text="Test colors"
-      />
-    )
-
-    const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_detail_kit_${color}`)
-  })
-})
-
-test('bold font-weight should be 600', () => {
-  render(
-    <Detail
-        bold
-        data={{ testid: 'primary-test' }}
-        text="Test bold prop"
-    />
-  )
-
-  const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass("bold")
-})

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

@@ -1 +0,0 @@
-Used for tables or designs with large amounts of data or text.

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.html.erb

@@ -1,34 +0,0 @@
-<%= pb_rails("detail", props: {
-  bold: true,
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "default",
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "lighter",
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "link",
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "error",
-  text: "I am a bold detail kit"
-}) %>
-
-<%= pb_rails("detail", props: {
-  bold: true,
-  color: "success",
-  text: "I am a bold detail kit"
-}) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { Detail } from '../..'
-
-const DetailBold = (props) => (
-  <div>
-    <Detail
-        bold
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="default"
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="lighter"
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="link"
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="error"
-        text="I am a bold detail kit"
-        {...props}
-    />
-
-    <Detail
-        bold
-        color="success"
-        text="I am a bold detail kit"
-        {...props}
-    />
-  </div>
-)
-
-export default DetailBold

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.md

@@ -1 +0,0 @@
-Use the `bold` prop to strongly emphasis your text.

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "default"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "lighter"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "link"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "error"
-}) %>
-
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit",
-  color: "success"
-}) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { Detail } from '../..'
-
-const DetailColors = (props) => (
-  <div>
-    <Detail
-        color="default"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="lighter"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="link"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="error"
-        text="I am a detail kit"
-        {...props}
-    />
-
-    <Detail
-        color="success"
-        text="I am a detail kit"
-        {...props}
-    />
-  </div>
-)
-
-export default DetailColors

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.md

@@ -1,6 +0,0 @@
-##### Prop
-This kit uses the `light` color by default, and can be replaced with colors below:
-
-`default` `lighter` `link` `error` `success`
-
-These colors are not for standard usage. You can use the `color` prop to make fixes if colors are not appearing properly, but consult your UX team members if you are deciding to implement it.

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.html.erb

@@ -1,3 +0,0 @@
-<%= pb_rails("detail", props: {
-  text: "I am a detail kit"
-}) %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import { Detail } from '../..'
-
-const DetailDefault = (props) => (
-  <div>
-    <Detail
-        text="I am a detail kit"
-        {...props}
-    />
-  </div>
-)
-
-export default DetailDefault

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.html.erb

@@ -1,22 +0,0 @@
-<%= pb_rails("detail") do %>
-    <b>This text is using the <%="<b>"%> tag.</b>
-    <br />
-    <br />
-    <strong>This text is using the <%="<strong>"%> tag.</strong>
-    <br />
-    <br />
-    <a>This text is using the <%="<a>"%> tag.</a>
-    <br />
-    <br />
-    <i>This text is using the <%="<i>"%> tag.</i>
-    <br />
-    <br />
-    This <em>word</em> is using an <%="<em>"%> tag.
-    <br />
-    <br />
-    <small>This text is using the <%="<small>"%> tag.</small>
-    <br />
-    <br />
-    <u>This text is using the <%="<u>"%> tag.</u>
-    <br />
-<% end %>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import { Detail } from '../..'
-
-const DetailStyled = (props) => (
-  <>
-    <Detail {...props}>
-      <b>{"This text is using the <b> tag."}</b>
-      <br />
-      <br />
-      <strong>{"This text is using the <strong> tag."}</strong>
-      <br />
-      <br />
-      <a>{"This text is using the <a> tag."}</a>
-      <br />
-      <br />
-      <i>{"This text is using the <i> tag."}</i>
-      <br />
-      <br />
-      {"This "}<em>{"word"}</em>{" is using an <em> tag."}
-      <br />
-      <br />
-      <small>{"This text is using the <small> tag."}</small>
-      <br />
-      <br />
-      <u>{"This text is using the <u> tag."}</u>
-      <br />
-      <br />
-    </Detail>
-  </>
-)
-
-export default DetailStyled

data/app/pb_kits/playbook/pb_detail/docs/example.yml

@@ -1,11 +0,0 @@
-examples:
-
-  rails:
-  - detail_default: Default
-  - detail_colors: Colors
-  - detail_bold: Bold
-
-  react:
-  - detail_default: Default
-  - detail_colors: Colors
-  - detail_bold: Bold

data/app/pb_kits/playbook/pb_detail/docs/index.js

@@ -1,4 +0,0 @@
-export { default as DetailDefault } from './_detail_default.jsx'
-export { default as DetailColors } from './_detail_colors.jsx'
-export { default as DetailStyled } from './_detail_styled.jsx'
-export { default as DetailBold } from './_detail_bold.jsx'