RubyGems - playbook_ui - Versions diffs - 14.9.0.pre.alpha.PLAY16264818 → 14.9.0.pre.alpha.PLAY16264952 - Mend

playbook_ui 14.9.0.pre.alpha.PLAY16264818 → 14.9.0.pre.alpha.PLAY16264952

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_form.jsx ADDED Viewed

@@ -0,0 +1,138 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { Checkbox, Card, Body, Button } from "playbook-ui"
+const CheckboxForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm({
+    defaultValues: {
+      termsAccepted: false,
+      newsletter: false,
+      interests: [],
+      preferences: {
+        emailUpdates: false,
+        smsUpdates: false,
+        pushNotifications: false,
+      },
+    },
+  })
+  const onSubmit = (data) => {
+    console.log("Form submitted:", data)
+  }
+  const formValues = watch()
+  return (
+    <div>
+      <Card padding='md'>
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <div>
+            <Body marginBottom='xs'
+                text='Terms and Conditions'
+            />
+            <Checkbox
+                error={errors.termsAccepted?.message}
+                name='termsAccepted'
+                register={register}
+                rules={{
+                required: "You must accept the terms and conditions",
+              }}
+                text='I accept the terms and conditions'
+            />
+          </div>
+          <div className='mt-4'>
+            <Body marginBottom='xs'
+                text='Newsletter Subscription'
+            />
+            <Checkbox
+                name='newsletter'
+                register={register}
+                text='Subscribe to our newsletter'
+            />
+          </div>
+          <div className='mt-4'>
+            <Body marginBottom='xs'
+                text='Your Interests'
+            />
+            <Checkbox
+                error={errors.interests?.message}
+                name='interests'
+                register={register}
+                rules={{
+                validate: (value) => {
+                  const selectedInterests = Object.values(value).filter(Boolean)
+                  return (
+                    selectedInterests.length >= 1 ||
+                    "Please select at least one interest"
+                  )
+                },
+              }}
+                text='Technology'
+                value='technology'
+            />
+            <Checkbox
+                name='interests'
+                register={register}
+                text='Design'
+                value='design'
+            />
+            <Checkbox
+                name='interests'
+                register={register}
+                text='Business'
+                value='business'
+            />
+            <Checkbox
+                name='interests'
+                register={register}
+                text='Marketing'
+                value='marketing'
+            />
+          </div>
+          <div className='mt-4'>
+            <Body marginBottom='xs'
+                text='Communication Preferences'
+            />
+            <Checkbox
+                name='preferences.emailUpdates'
+                register={register}
+                text='Email Updates'
+            />
+            <Checkbox
+                name='preferences.smsUpdates'
+                register={register}
+                text='SMS Updates'
+            />
+            <Checkbox
+                name='preferences.pushNotifications'
+                register={register}
+                text='Push Notifications'
+            />
+          </div>
+          <Button
+              htmlType="submit"
+              marginTop='lg'
+              text='Submit'
+              type='submit'
+              variant='primary'
+          />
+        </form>
+        <Card marginTop='lg'>
+          <Body text='Current Form Values:'
+              variant='bold'
+          />
+          <pre style={{ marginTop: "8px", color: "white" }}>
+            {JSON.stringify(formValues, null, 2)}
+          </pre>
+        </Card>
+      </Card>
+    </div>
+  )
+}
+export default CheckboxForm

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml CHANGED Viewed

@@ -9,12 +9,13 @@ examples:
     - checkbox_disabled: Disabled Checkbox
   react:
-  - checkbox_default: Default
-  - checkbox_checked: Load as checked
-  - checkbox_custom: Custom Checkbox
-  - checkbox_error: Default w/ Error
-  - checkbox_indeterminate: Indeterminate Checkbox
-  - checkbox_disabled: Disabled Checkbox
+    - checkbox_default: Default
+    - checkbox_checked: Load as checked
+    - checkbox_custom: Custom Checkbox
+    - checkbox_error: Default w/ Error
+    - checkbox_indeterminate: Indeterminate Checkbox
+    - checkbox_disabled: Disabled Checkbox
+    - checkbox_form: Checkbox Form
   swift:
     - checkbox_default_swift: Default

data/app/pb_kits/playbook/pb_checkbox/docs/index.js CHANGED Viewed

@@ -4,3 +4,4 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
+export { default as CheckboxForm } from './_checkbox_form.jsx'

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
-import { globalProps, globalInlineProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,6 +32,7 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 const Collapsible = ({
@@ -47,8 +48,9 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
+  tag = 'div',
   ...props
-}: CollapsibleProps): React.ReactElement => {
+}: CollapsibleProps & GlobalProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
   useEffect(()=> {
@@ -76,9 +78,12 @@ const Collapsible = ({
     className
   )
   const dynamicInlineProps = globalInlineProps(props)
+  const Tag: React.ReactElement | any = `${tag}`;
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <div
+      <Tag
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -96,7 +101,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </div>
+      </Tag>
     </CollapsibleContext.Provider>
   )
 }

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps): React.ReactElement => {
+}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx CHANGED Viewed

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps } from '../../utilities/globalProps'
+import { globalProps, GlobalProps } from '../../utilities/globalProps'
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps): React.ReactElement=> {
+}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss CHANGED Viewed

@@ -11,3 +11,8 @@
   }
 }
+.dark [class*='pb_file_upload_kit'] {
+  [class*='pb_card_kit'] {
+    border: 1px $text_dk_lighter dashed;
+  }
+}

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ type FileUploadProps = {
   accept?: string[],
   className?: string,
   customMessage?: string,
+  dark?: boolean,
   data?: {[key: string]: string | number},
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   acceptedFilesDescription?: string,
@@ -31,6 +32,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
     acceptedFilesDescription = '',
     className,
     customMessage,
+    dark = false,
     data = {},
     htmlOptions = {},
     maxSize,
@@ -94,9 +96,12 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
         {...htmlProps}
         {...getRootProps()}
     >
-      <Card>
+      <Card dark={dark}>
         <input {...getInputProps()} />
-        <Body color="light">
+        <Body
+            color="light"
+            dark={dark}
+        >
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb CHANGED Viewed

@@ -5,11 +5,17 @@
     id: object.id,
     **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
-        <label for="upload-<%= object.id %>" class="pb_button_kit_secondary_inline_enabled"><%= "#{object.label}" %></label>
+        <label
+          for="upload-<%= object.id %>"
+          class="pb_button_kit_secondary_inline_enabled <%= 'dark' if object.dark %>"
+        >
+          <%= "#{object.label}" %>
+        </label>
         <%= pb_rails("text_input", props: {
           type: "file",
+          dark: object.dark,
           input_options: {
-            id: "upload-#{object.id}",
+            id: "upload-#{object.id}",
             classname: "cursor_pointer",
           }.merge(object.input_options)
         }) %>

data/app/pb_kits/playbook/pb_link/_link.scss CHANGED Viewed

@@ -17,7 +17,7 @@
     outline-offset: 2px;
   }
   &:visited {
-    color: $data_3;
+    color: darken($primary_action, 10%);
   }
   &.dark  {
     @include pb_link($active_dark);
@@ -34,7 +34,7 @@
       }
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }
@@ -48,7 +48,7 @@
       }
       &:visited {
-        color: $data_3;
+        color: darken($primary_action, 10%);
       }
     }
   }

data/app/pb_kits/playbook/pb_nav/_bold_mixin.scss CHANGED Viewed

@@ -19,6 +19,16 @@
           font-weight: $bolder;
         }
       }
-   }
+    }
+  }
+  .dark & {
+    [class*=pb_nav_list_kit_item][class*=pb_nav_list_item] {
+      &[class*=_link] {
+        &[class*=_active] {
+          box-shadow: 0 2px 10px 0 $shadow_dark;
+        }
+      }
+    }
   }
 }

data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss CHANGED Viewed

@@ -223,6 +223,7 @@
         }
       }
       [class*="pb_collapsible_nav_item"][class*="pb_nav_list_item_link_collapsible"][class*="pb_nav_list_kit_item"] {
+        box-shadow: unset !important;
         .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
@@ -240,11 +241,17 @@
       .pb_collapsible_main_kit:hover {
         background-color: mix($white, $card_dark, 20%);
-        .pb_nav_list_item_text_collapsible,
-        svg {
+        .pb_nav_list_item_text_collapsible {
           color: $white !important;
         }
       }
+      .pb_collapsible_main_kit {
+        svg {
+          color: $text_dk_default !important;
+        }
+      }
       .icon_wrapper:hover {
         background-color: mix($white, $card_dark, 40%);
       }
@@ -256,6 +263,13 @@
           }
         }
       }
+      &[class*="_active"] {
+        > .pb_collapsible_main_kit {
+          background-color: $primary;
+          box-shadow: 0 2px 10px 0 $shadow_dark;
+        }
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss CHANGED Viewed

@@ -115,7 +115,7 @@ $selector: ".pb_nav_list";
       }
       [class*="_item_text"],
       [class*="_item_icon"] {
-        color: $text_dk_lighter !important;
+        color: $text_dk_light !important;
       }
       &[class*="_link"] {
         &:hover {

data/app/pb_kits/playbook/pb_select/_select.tsx CHANGED Viewed

@@ -1,12 +1,12 @@
-import React, { forwardRef } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { FieldValues } from 'react-hook-form'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
-import { HookFormProps, withHookForm } from '../utilities/hookFormProps'
 import type { InputCallback } from '../types'
 import { getAllIcons } from "../utilities/icons/allicons"
+import { withReactHookForm, WithReactHookFormProps } from '../utilities/withReactHookForm'
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -18,7 +18,7 @@ type SelectOption = {
   disabled?: boolean,
 }
-type SelectProps<T extends FieldValues = FieldValues> = {
+type SelectProps = {
   aria?: { [key: string]: string },
   blankSelection?: string,
   children?: Node,
@@ -33,8 +33,8 @@ type SelectProps<T extends FieldValues = FieldValues> = {
   inline?: boolean,
   label?: string,
   margin?: string,
-  marginBottom: string,
-  marginTop: string,
+  marginBottom?: string,
+  marginTop?: string,
   multiple?: boolean,
   name?: string,
   onChange?: InputCallback<HTMLSelectElement>,
@@ -42,7 +42,7 @@ type SelectProps<T extends FieldValues = FieldValues> = {
   required?: boolean,
   showArrow?: boolean,
   value?: string,
-} & GlobalProps & Partial<HookFormProps<T>>
+} & GlobalProps
 const createOptions = (options: SelectOption[]) => options.map((option, index) => (
   <option
@@ -54,7 +54,7 @@ const createOptions = (options: SelectOption[]) => options.map((option, index) =
   </option>
 ))
-const Select = <T extends FieldValues = FieldValues>({
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({
   aria = {},
   blankSelection,
   children,
@@ -70,18 +70,15 @@ const Select = <T extends FieldValues = FieldValues>({
   name,
   onChange,
   options = [],
-  register,
   required = false,
-  rules,
   showArrow = false,
   value,
   ...props
-}: SelectProps<T>, ref: React.LegacyRef<HTMLSelectElement>) => {
+}, ref) => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const optionsList = createOptions(options)
-  const hookFormProps = name ? withHookForm({ register, name, rules }) : {}
   const inlineClass = inline ? 'inline' : null
   const compactClass = compact ? 'compact' : null
@@ -98,7 +95,7 @@ const Select = <T extends FieldValues = FieldValues>({
   );
   const icons = getAllIcons()
-  const angleDown = icons?.angleDown?.icon as { [key: string]: SVGElement }
+  const angleDown = icons?.angleDown?.icon
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
@@ -106,13 +103,12 @@ const Select = <T extends FieldValues = FieldValues>({
     return (
       <select
           {...domSafeProps(props)}
-          {...hookFormProps}
           disabled={disabled}
           id={name}
           multiple={multiple}
           name={name}
-          onChange={onChange || hookFormProps.onChange}
-          ref={ref || hookFormProps.ref}
+          onChange={onChange}
+          ref={ref}
           required={required}
           value={value}
       >
@@ -158,6 +154,11 @@ const Select = <T extends FieldValues = FieldValues>({
       </label>
     </div>
   )
-}
+})
+Select.displayName = 'Select'
+export type SelectWithHookFormProps<T extends FieldValues = FieldValues> = SelectProps & WithReactHookFormProps<T>
-export default forwardRef(Select)
+const SelectWithHookForm = withReactHookForm(Select)
+export default SelectWithHookForm

data/app/pb_kits/playbook/pb_select/docs/_select_form.jsx CHANGED Viewed

@@ -81,6 +81,7 @@ const SelectForm = (props) => {
           />
           <Button
+              htmlType="submit"
               marginTop="lg"
               text="Submit"
               type="submit"

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss CHANGED Viewed

@@ -151,7 +151,7 @@ $pb_selectable_paddings: (
       input[type="radio"] {
         &:checked ~ label {
           border-width: $pb_card_border_width;
-          outline: 1px solid $primary;
+          outline: 1px solid $primary_action_dark;
         }
       }
     }
@@ -161,11 +161,11 @@ $pb_selectable_paddings: (
     color: $white;
     > label {
       @include pb_card_dark;
-      background: transparent;
+      background: $bg_dark_card;
       .pb_selectable_card_circle {
         border-color: $bg_dark;
-        background: $primary-action;
+        background: $primary_action_dark;
       }
     }
@@ -173,7 +173,7 @@ $pb_selectable_paddings: (
     input[type="radio"] {
       &:checked ~ label {
         @include pb_card_selected_dark;
-        background: transparent;
+        background: $bg_dark_card;
       }
     }

data/app/pb_kits/playbook/pb_selectable_card/selectable_card.html.erb CHANGED Viewed

@@ -35,7 +35,7 @@
         <% end %>
       <% else %>
         <% if content.nil? %>
-          <%= pb_rails("body", props: { text: object.text }) %>
+          <%= pb_rails("body", props: { text: object.text, dark: object.dark }) %>
         <% else %>
           <%= content %>
         <% end %>