playbook_ui 12.26.1 → 12.27.0.pre.alpha.expandednotworking853

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

@@ -5,9 +5,11 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_only_countries: Limited Countries
+  - phone_number_input_validation: Form Validation

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

@@ -2,3 +2,4 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
+export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -5,6 +5,8 @@ module Playbook
     class PhoneNumberInput < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -15,6 +17,8 @@ module Playbook
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
+      prop :error, type: Playbook::Props::String,
+                   default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
 
@@ -27,11 +31,13 @@ module Playbook
           id: id,
           dark: dark,
           disabled: disabled,
+          error: error,
           initialCountry: initial_country,
           label: label,
           name: name,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
+          required: required,
           value: value,
         }
       end

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,74 +1,122 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
-import PhoneNumberInput from './_phone_number_input'
+import React from "react";
+import { render, screen } from "../utilities/test-utils";
+import PhoneNumberInput from "./_phone_number_input";
 
-const testId = "phoneNumberInput"
+const testId = "phoneNumberInput";
 
-test('should be disabled', () => {
-  const props = {
-    disabled: true,
-    id: testId,
-  }
+test("should be disabled", () => {
+    const props = {
+        disabled: true,
+        id: testId,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).toBeDisabled()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).toBeDisabled();
+});
 
-test('should be enabled by default', () => {
-  const props = {
-    id: testId,
-  }
+test("should be enabled by default", () => {
+    const props = {
+        id: testId,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).not.toBeDisabled()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).not.toBeDisabled();
+});
 
-test('should have label', () => {
-  const label = 'Phone Number'
-  const props = {
-    id: testId,
-    label,
-  }
+test("should have label", () => {
+    const label = "Phone Number";
+    const props = {
+        id: testId,
+        label,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByText(label)
-  expect(kit).toBeInTheDocument()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByText(label);
+    expect(kit).toBeInTheDocument();
+});
 
-test('should pass data prop', () => {
-  const props = {
-    data: { testid: testId },
-    id: testId,
-  }
+test("should pass data prop", () => {
+    const props = {
+        data: { testid: testId },
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByTestId(testId);
+    expect(kit).toBeInTheDocument();
+});
+
+test("should pass className prop", () => {
+    const className = "custom-class-name";
+    const props = {
+        className,
+        data: { testid: testId },
+        id: testId,
+    };
+
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByTestId(testId);
+    expect(kit).toHaveClass(className);
+});
+
+test("should pass value prop", () => {
+    const value = "1234567890";
+    const props = {
+        id: testId,
+        value,
+    };
 
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByTestId(testId)
-  expect(kit).toBeInTheDocument()
-})
+    render(<PhoneNumberInput {...props} />);
+    const kit = screen.getByRole("textbox");
+    expect(kit).toHaveDisplayValue(value);
+});
 
-test('should pass className prop', () => {
-  const className = 'custom-class-name'
+//TODO: test required field presence
+test("should pass required prop", () => {
+    const props = {
+        id: testId,
+    };
+
+    render(
+        <PhoneNumberInput
+            required
+            {...props}
+        />
+    );
+    const kit = screen.getByRole("textbox");
+    expect(kit).toHaveAttribute("required");
+});
+
+test("should have error attribute when invalid", () => {
   const props = {
-    className,
-    data: { testid: testId },
-    id: testId,
-  }
-
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(className)
-})
-
-test('should pass value prop', () => {
-  const value = '1234567890'
+      id: testId,
+      error: "Something isn't right here."
+  };
+
+  render(
+      <PhoneNumberInput
+          {...props}
+      />
+  );
+  const kit = screen.getByRole("textbox");
+  expect(kit).toHaveAttribute("error");
+});
+
+test("should trigger callback", () => {
+  const handleOnValidate = jest.fn((valid) => valid)
+
   const props = {
-    id: testId,
-    value,
-  }
-
-  render(<PhoneNumberInput {...props} />)
-  const kit = screen.getByRole("textbox")
-  expect(kit).toHaveDisplayValue(value)
-})
+      id: testId,
+      onValidate: handleOnValidate
+  };
+
+  render(
+      <PhoneNumberInput
+          {...props}
+      />
+  );
+
+  expect(handleOnValidate).toBeCalledWith(true)
+});

data/app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss

@@ -39,7 +39,7 @@ trix-toolbar .trix-button {
   float: left;
   color: rgba(0, 0, 0, 0.6);
   font-size: 0.75em;
-  font-weight: 600;
+  font-weight: $bold;
   white-space: nowrap;
   padding: 0 0.5em;
   margin: 0;
@@ -137,7 +137,7 @@ trix-toolbar .trix-dialog {
   z-index: 5; }
 trix-toolbar .trix-input--dialog {
   font-size: inherit;
-  font-weight: normal;
+  font-weight: $regular;
   padding: 0.5em 0.8em;
   margin: 0 10px 0 0;
   border-radius: 3px;

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -30,7 +30,7 @@
     @include pb_title_dark;
   }
 
-  &[class*=thin] {
+  &[class*=_thin] {
     @include pb_title_thin;
   }
 }

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -27,7 +27,7 @@ const Title = (props: TitleProps): React.ReactElement => {
     data = {},
     id,
     size = 3,
-    bold = size === 3 ? false : true,
+    bold = true,
     tag = 'h3',
     text,
     variant = null,
@@ -35,10 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
 
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
-
   const getBold = bold ? '' : 'thin'
   const classes = classnames(
-    buildCss("pb_title_kit", `size_${size}`, variant, color) + ` ${getBold}`,
+    buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb

@@ -1,2 +1,3 @@
 <%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1, bold: false }) %>
 <%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2, bold: false }) %>
+<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3, bold: false }) %>

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx

@@ -17,6 +17,12 @@ const TitleLightWeight = (props) => {
           text='Title 2'
           {...props}
       />
+      <Title bold={false}
+          size={3}
+          tag='h2'
+          text='Title 3'
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md

@@ -1,4 +1,3 @@
 ##### Prop
-Title `size 1` & `size 2` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
-Title `size 3` uses a light font weight by default and will not accept a bold font weight.
+Title `size 1`, `size 2`, & `size 3` will use `font-weight: 700` by default, if you want a lighter font weight, use the `bold` prop set to `false`.
 Title `size 4` uses a heavy font weight by default and will not accept a lighter font weight.

data/app/pb_kits/playbook/pb_title/title.rb

@@ -17,21 +17,14 @@ module Playbook
                      values: [nil, "link"],
                      default: nil,
                      deprecated: true
-
-      def initialize(props)
-        props[:bold] = [1, 2, 4].include?(props[:size]) unless props.key?(:bold)
-        props[:bold] = false if props[:size].nil? && !props.key?(:bold)
-        super(props)
-      end
-
-      prop :bold, type: Playbook::Props::Boolean
+      prop :bold, type: Playbook::Props::Boolean, default: true
 
       def classname
-        generate_classname("pb_title_kit", size, variant, color) + is_bold
+        generate_classname("pb_title_kit", size, variant, color, is_bold)
       end
 
       def is_bold
-        bold ? "" : " thin"
+        bold ? nil : "thin"
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3 thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3')
 })
 
 test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3 thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3_thin')
 })
 
 test('with colors', () => {
@@ -38,5 +38,5 @@ test('with colors', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  expect(kit).toHaveClass('pb_title_kit_size_3_success thin')
+  expect(kit).toHaveClass('pb_title_kit_size_3_success')
 })

data/app/pb_kits/playbook/utilities/object.ts

@@ -0,0 +1,3 @@
+/* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
+
+export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1