RubyGems - playbook_ui - Versions diffs - 11.0.0.pre.alpha.2 → 11.0.0 - Mend

playbook_ui 11.0.0.pre.alpha.2 → 11.0.0

Files changed (68) hide show

data/app/pb_kits/playbook/pb_text_input/{_text_input.jsx → _text_input.tsx} RENAMED Viewed

@@ -1,8 +1,7 @@
-/* @flow */
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { globalProps, domSafeProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 import Flex from '../pb_flex/_flex'
@@ -12,9 +11,9 @@ import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 type TextInputProps = {
-  aria?: object,
-  className: string,
-  data?: object,
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
   dark?: boolean,
   disabled?: boolean,
   error?: string,
@@ -22,7 +21,7 @@ type TextInputProps = {
   inline?: boolean,
   name: string,
   label: string,
-  onChange: (String) => void,
+  onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
   type: string,
@@ -33,9 +32,9 @@ type TextInputProps = {
     alignment?: "right" | "left",
     border?: boolean,
   },
-}
+} & GlobalProps
-const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
+const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>) => {
   const {
     addOn = { icon: null, alignment: 'right', border: true },
     aria = {},
@@ -48,7 +47,7 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     inline = false,
     name,
     label,
-    onChange = () => {},
+    onChange = () => { void 0 },
     placeholder,
     required,
     type = 'text',
@@ -104,34 +103,38 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     <React.Fragment>
       <Flex
           className={`add-on-${addOnAlignment} ${borderCss}`}
-          inline="flex-container"
+          inline
           vertical="center"
       >
-        <If condition={addOnAlignment == 'left'}>
-          <>
-            <Card
-                className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
-                dark={dark}
-            >
-              {addOnIcon}
-            </Card>
-            {textInput}
-          </>
-        <Else />
-          <>
-            {textInput}
-            <Card
-                className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
-                dark={dark}
-            >
-              {addOnIcon}
-            </Card>
-          </>
-        </If>
+        {addOnAlignment == 'left' && <>
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+          {textInput}
+        </> }
+        {addOnAlignment != 'left' && <>
+          {textInput}
+          <Card
+              className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
+              dark={dark}
+          >
+            {addOnIcon}
+          </Card>
+        </> }
       </Flex>
     </React.Fragment>
   )
+  const render = (() => {
+    if(children) return children
+    if (shouldShowAddOn) return addOnInput
+    return textInput
+  })()
   return (
     <div
         {...ariaProps}
@@ -140,21 +143,17 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
     >
       <Caption
           className="pb_text_input_kit_label"
-          dark={dark}
           text={label}
       />
       <div className={`${addOnCss} text_input_wrapper`}>
-        <Choose>
-          <When condition={children}>{children}</When>
-          <When condition={shouldShowAddOn}>{addOnInput}</When>
-          <Otherwise>{textInput}</Otherwise>
-        </Choose>
-        <If condition={error}>
-          <Body
-              status="negative"
-              text={error}
-          />
-        </If>
+        {render}
+        {error && <Body
+            status="negative"
+            text={error}
+            variant={null}
+                  />
+        }
       </div>
     </div>
   )

data/app/pb_kits/playbook/tokens/_colors.scss CHANGED Viewed

@@ -153,21 +153,37 @@ $data_colors: (
 /* Status colors ----------------------*/
 $success:             $green;
+$success_secondary:   lighten($success, 10%);
 $warning:             $yellow;
+$warning_secondary:   lighten($warning, 10%);
 $error:               $red;
 $error_dark:          $red_dark;
 $error_dark_body:     lighten($error_dark, 2%);
+$error_secondary:     lighten($error, 10%);
 $info:                $teal;
+$info_secondary :     lighten($info, 10%);
 $neutral:             $slate;
+$neutral_secondary:   lighten($neutral, 10%);
+$primary:             $primary;
+$primary_secondary:    lighten($primary, 10%);
 $status_colors: (
   success:            $success,
+  success_secondary:    $success_secondary,
   warning:            $warning,
+  warning_secondary:    $warning_secondary,
   error:              $error,
+  error_secondary:      $error_secondary,
   info:               $info,
+  info_secondary:       $info_secondary,
   neutral:            $neutral,
-  primary:            $primary
+  neutral_secondary:    $neutral_secondary,
+  primary:            $primary,
+  primary_secondary:    $primary_secondary
 );
 $status_color_text: (
   success:            $success,
   warning:            darken($warning, 10%),

data/app/pb_kits/playbook/utilities/props.ts CHANGED Viewed

@@ -22,7 +22,7 @@ const buildPrefixedProps = (prefix: string, data: {[key: string]: any}) =>
  *
  * @returns {() => {}} the noop function.
  */
-export const noop = () => {}
+export const noop = (): void => { void 0 }
 /**
  * Maps a given aria object into HTML valid aria attribtues and their values.
@@ -47,5 +47,5 @@ export const buildDataProps = (data: {[key: string]: any}) => buildPrefixedProps
  * @param {Object} rules a 'classnames' compliant rules object, used to derive the root className.
  * @returns {String} the derived root className value.
  */
-export const buildCss = (...rules: string[]) => classnames(rules).replace(/\s/g, '_')
+export const buildCss = (...rules: (string | { [x: string]: string; })[]): string => classnames(rules).replace(/\s/g, '_')

data/lib/playbook/version.rb CHANGED Viewed

@@ -2,5 +2,5 @@
 module Playbook
   PREVIOUS_VERSION = "10.26.0"
-  VERSION = "11.0.0.pre.alpha.2"
+  VERSION = "11.0.0"
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.0.0.pre.alpha.2
+  version: 11.0.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-06-01 00:00:00.000000000 Z
+date: 2022-06-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -510,8 +510,8 @@ files:
 - app/pb_kits/playbook/pb_card/docs/_card_tag.jsx
 - app/pb_kits/playbook/pb_card/docs/example.yml
 - app/pb_kits/playbook/pb_card/docs/index.js
-- app/pb_kits/playbook/pb_checkbox/_checkbox.jsx
 - app/pb_kits/playbook/pb_checkbox/_checkbox.scss
+- app/pb_kits/playbook/pb_checkbox/_checkbox.tsx
 - app/pb_kits/playbook/pb_checkbox/checkbox.html.erb
 - app/pb_kits/playbook/pb_checkbox/checkbox.rb
 - app/pb_kits/playbook/pb_checkbox/checkbox.test.js
@@ -648,6 +648,7 @@ files:
 - app/pb_kits/playbook/pb_date_picker/_date_picker.scss
 - app/pb_kits/playbook/pb_date_picker/date_picker.html.erb
 - app/pb_kits/playbook/pb_date_picker/date_picker.rb
+- app/pb_kits/playbook/pb_date_picker/date_picker.test.js
 - app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
@@ -686,12 +687,19 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.md
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_week.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.md
 - app/pb_kits/playbook/pb_date_picker/docs/_description.md
 - app/pb_kits/playbook/pb_date_picker/docs/example.yml
 - app/pb_kits/playbook/pb_date_picker/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/plugins/timeSelect.js
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_calendar_input_icon.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
@@ -699,6 +707,8 @@ files:
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_month_and_year_styles.scss
 - app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss
+- app/pb_kits/playbook/pb_date_picker/sass_partials/_week_styles.scss
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
 - app/pb_kits/playbook/pb_date_range_inline/date_range_inline.html.erb
@@ -790,6 +800,10 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
 - app/pb_kits/playbook/pb_dialog/docs/example.yml
 - app/pb_kits/playbook/pb_dialog/docs/index.js
 - app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx
@@ -944,8 +958,8 @@ files:
 - app/pb_kits/playbook/pb_form_group/docs/index.js
 - app/pb_kits/playbook/pb_form_group/form_group.html.erb
 - app/pb_kits/playbook/pb_form_group/form_group.rb
-- app/pb_kits/playbook/pb_form_pill/_form_pill.jsx
 - app/pb_kits/playbook/pb_form_pill/_form_pill.scss
+- app/pb_kits/playbook/pb_form_pill/_form_pill.tsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.md
@@ -987,8 +1001,8 @@ files:
 - app/pb_kits/playbook/pb_gauge/docs/index.js
 - app/pb_kits/playbook/pb_gauge/gauge.html.erb
 - app/pb_kits/playbook/pb_gauge/gauge.rb
-- app/pb_kits/playbook/pb_hashtag/_hashtag.jsx
 - app/pb_kits/playbook/pb_hashtag/_hashtag.scss
+- app/pb_kits/playbook/pb_hashtag/_hashtag.tsx
 - app/pb_kits/playbook/pb_hashtag/docs/_description.md
 - app/pb_kits/playbook/pb_hashtag/docs/_footer.md
 - app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.html.erb
@@ -1477,8 +1491,8 @@ files:
 - app/pb_kits/playbook/pb_progress_step/progress_step.rb
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.html.erb
 - app/pb_kits/playbook/pb_progress_step/progress_step_item.rb
-- app/pb_kits/playbook/pb_radio/_radio.jsx
 - app/pb_kits/playbook/pb_radio/_radio.scss
+- app/pb_kits/playbook/pb_radio/_radio.tsx
 - app/pb_kits/playbook/pb_radio/docs/_description.md
 - app/pb_kits/playbook/pb_radio/docs/_footer.md
 - app/pb_kits/playbook/pb_radio/docs/_radio_alignment.html.erb
@@ -1542,8 +1556,8 @@ files:
 - app/pb_kits/playbook/pb_section_separator/docs/index.js
 - app/pb_kits/playbook/pb_section_separator/section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/section_separator.rb
-- app/pb_kits/playbook/pb_select/_select.jsx
 - app/pb_kits/playbook/pb_select/_select.scss
+- app/pb_kits/playbook/pb_select/_select.tsx
 - app/pb_kits/playbook/pb_select/docs/_description.md
 - app/pb_kits/playbook/pb_select/docs/_footer.md
 - app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb
@@ -1769,8 +1783,8 @@ files:
 - app/pb_kits/playbook/pb_table/table.test.js
 - app/pb_kits/playbook/pb_table/table_row.html.erb
 - app/pb_kits/playbook/pb_table/table_row.rb
-- app/pb_kits/playbook/pb_text_input/_text_input.jsx
 - app/pb_kits/playbook/pb_text_input/_text_input.scss
+- app/pb_kits/playbook/pb_text_input/_text_input.tsx
 - app/pb_kits/playbook/pb_text_input/add_on.html.erb
 - app/pb_kits/playbook/pb_text_input/add_on.rb
 - app/pb_kits/playbook/pb_text_input/docs/_description.md
@@ -2208,9 +2222,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

data/app/pb_kits/playbook/pb_radio/_radio.jsx DELETED Viewed

@@ -1,78 +0,0 @@
-/* @flow */
-/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
-import React, { forwardRef } from 'react'
-import Body from '../pb_body/_body'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-type RadioProps = {
-  aria?: object,
-  alignment?: String,
-  checked?: Boolean,
-  children?: Node,
-  className?: String,
-  dark?: boolean,
-  data?: object,
-  error?: Boolean,
-  id?: String,
-  label: String,
-  name: String,
-  value: String,
-  text: String,
-  onChange: (Boolean)=>void,
-}
-const Radio = ({
-  aria = {},
-  alignment = '',
-  children,
-  className,
-  dark = false,
-  data = {},
-  error = false,
-  id,
-  label,
-  name = 'radio_name',
-  text = 'Radio Text',
-  value = 'radio_text',
-  onChange = () => {},
-  ...props
-}: RadioProps, ref) => {
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), alignment, className)
-  return (
-    <label
-        {...ariaProps}
-        {...dataProps}
-        className={classes}
-        htmlFor={id}
-    >
-      <If condition={children}>
-        {children}
-        <Else />
-        <input
-            {...props}
-            id={id}
-            name={name}
-            onChange={onChange}
-            ref={ref}
-            text={text}
-            type="radio"
-            value={value}
-        />
-      </If>
-      <span className="pb_radio_button" />
-      <Body
-          dark={dark}
-          status={error ? 'negative' : null}
-          text={label}
-      />
-    </label>
-  )
-}
-export default forwardRef(Radio)