RubyGems - playbook_ui - Versions diffs - 10.27.0.pre.lazysizes1 → 11.0.0 - Mend

playbook_ui 10.27.0.pre.lazysizes1 → 11.0.0

Files changed (75) hide show

data/app/pb_kits/playbook/pb_select/{_select.jsx → _select.tsx} RENAMED Viewed

@@ -1,10 +1,8 @@
-/* @flow */
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps, domSafeProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
 import Body from '../pb_body/_body'
@@ -18,16 +16,14 @@ type SelectOption = {
 }
 type SelectProps = {
-  aria?: object,
+  aria?: { [key: string]: string },
   blankSelection?: string,
-  children?: React.Node,
-  compact?: boolean,
+  children?: Node,
   className?: string,
-  data?: object,
+  compact?: boolean,
+  data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
-  onChange: InputCallback<HTMLSelectElement>,
-  options: SelectOption[],
   id?: string,
   includeBlank?: string,
   inline?: boolean,
@@ -36,9 +32,11 @@ type SelectProps = {
   marginBottom: string,
   multiple?: boolean,
   name?: string,
+  onChange: InputCallback<HTMLSelectElement>,
+  options: SelectOption[],
   required?: boolean,
   value?: string,
-}
+} & GlobalProps
 const createOptions = (options: SelectOption[]) => options.map((option, index) => (
   <option
@@ -68,7 +66,7 @@ const Select = ({
   required = false,
   value,
   ...props
-}: SelectProps, ref: React.ElementRef<"select">) => {
+}: SelectProps, ref: React.LegacyRef<HTMLSelectElement>) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const optionsList = createOptions(options)
@@ -87,6 +85,25 @@ const Select = ({
   )
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
+  const selectBody =(() =>{
+    if (children) return children
+    return (
+      <select
+          {...domSafeProps(props)}
+          disabled={disabled}
+          id={name}
+          multiple={multiple}
+          name={name}
+          onChange={onChange}
+          ref={ref}
+          required={required}
+          value={value}
+      >
+        {blankSelection && <option value="">{blankSelection}</option>}
+        {optionsList}
+      </select>
+    )
+  })()
   return (
     <div
@@ -94,51 +111,30 @@ const Select = ({
         {...dataProps}
         className={classes}
     >
-      <If condition={label}>
+      {label &&
         <label
             className="pb_select_kit_label"
             htmlFor={name}
         >
-          <Caption
-              text={label}
-          />
+          <Caption text={label} />
         </label>
-      </If>
+      }
       <label
           className={selectWrapperClass}
           htmlFor={name}
       >
-        <If condition={children}>
-          {children}
-          <Else />
-          <select
-              {...domSafeProps(props)}
-              disabled={disabled}
-              id={name}
-              multiple={multiple}
-              name={name}
-              onChange={onChange}
-              ref={ref}
-              required={required}
-              value={value}
-          >
-            <If condition={blankSelection}>
-              <option value="">{blankSelection}</option>
-            </If>
-            {optionsList}
-          </select>
-        </If>
+        {selectBody}
         <Icon
             className="pb_select_kit_caret"
             fixedWidth
             icon="angle-down"
         />
-        <If condition={error}>
+        {error &&
           <Body
               status="negative"
               text={error}
           />
-        </If>
+        }
       </label>
     </div>
   )

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/pb_typeahead/typeahead.rb CHANGED Viewed

@@ -60,9 +60,12 @@ module Playbook
           plusIcon: plus_icon,
         }
-        base_options.merge!({ getOptionLabel: get_option_label }) if get_option_label.present?
-        base_options.merge!({ getOptionValue: get_option_value }) if get_option_value.present?
-        base_options.merge!({ async: true, loadOptions: load_options }) if async
+        base_options[:getOptionLabel] = get_option_label if get_option_label.present?
+        base_options[:getOptionValue] = get_option_value if get_option_value.present?
+        if async
+          base_options[:async] = true
+          base_options[:loadOptions] = load_options
+        end
         base_options
       end
     end

data/app/pb_kits/playbook/playbook-rails.js CHANGED Viewed

@@ -11,7 +11,6 @@ window.datePickerHelper = datePickerHelper
 // Lazy image loading
 import 'lazysizes'
-import 'lazysizes/plugins/blur-up/ls.blur-up'
 import PbCollapsible from './pb_collapsible'
 PbCollapsible.start()

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/dist/reset.css CHANGED Viewed

@@ -1,61 +1,2 @@
-/* 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; }
+*{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/props.rb CHANGED Viewed

@@ -48,7 +48,7 @@ module Playbook
       end
       def prop(name, type: Playbook::Props::String, **options)
-        self.props = props.merge(name => type.new(options.merge(name: name, kit: self)))
+        self.props = props.merge(name => type.new(**options.merge(name: name, kit: self)))
         define_method(name) { prop(name) }
       end

data/lib/playbook/version.rb CHANGED Viewed

@@ -2,5 +2,5 @@
 module Playbook
   PREVIOUS_VERSION = "10.26.0"
-  VERSION = "10.27.0.pre.lazysizes1"
+  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: 10.27.0.pre.lazysizes1
+  version: 11.0.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-05-25 00:00:00.000000000 Z
+date: 2022-06-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -205,14 +205,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.20.0
+        version: 1.23.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 1.20.0
+        version: 1.23.0
 - !ruby/object:Gem::Dependency
   name: rubocop-performance
   requirement: !ruby/object:Gem::Requirement
@@ -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,11 +2222,11 @@ 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.1.6
+rubygems_version: 3.3.7
 signing_key:
 specification_version: 4
 summary: Playbook Design System

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)