playbook_ui 13.15.0 → 13.16.0.pre.alpha.fonttest1972

data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx

@@ -6,20 +6,21 @@ import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
+import { GenericObject } from '../types'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
   aria?: { [key: string]: string; },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: GenericObject,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
 }
 
-const IconValue = (props: IconValueProps) => {
+const IconValue = (props: IconValueProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md

@@ -0,0 +1,17 @@
+![nav-horizontal-bold](https://github.com/powerhome/playbook/assets/54749071/f55f31c5-dbf9-40e2-9f08-6a075c7cb56b)
+
+```swift
+@State private var selectedHBold: Int = 1
+
+PBNav(
+        selected: $selectedHBold,
+        variant: .bold,
+        orientation: .horizontal,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md

@@ -0,0 +1,17 @@
+![nav-horizontal-default](https://github.com/powerhome/playbook/assets/54749071/8731ad83-322f-43f8-8459-76bc425ba30f)
+
+```swift
+ @State private var selectedHDefault: Int = 1
+
+ PBNav(
+          selected: $selectedHDefault,
+          variant: .normal,
+          orientation: .horizontal
+        ) {
+          PBNavItem("Photos")
+          PBNavItem("Music")
+          PBNavItem("Video")
+          PBNavItem("Files")
+        }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md

@@ -0,0 +1,18 @@
+![nav-horizontal-subtle-no-highlight](https://github.com/powerhome/playbook/assets/54749071/ee79fb55-8d5b-46b0-89aa-a310bf48dd19)
+
+```swift
+@State private var selectedHSubtleNoHighlight: Int = 1
+
+ PBNav(
+        selected: $selectedHSubtleNoHighlight,
+        variant: .subtle,
+        orientation: .horizontal,
+        borders: false,
+        highlight: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md

@@ -0,0 +1,18 @@
+![nav-horizontal-subtle](https://github.com/powerhome/playbook/assets/54749071/e595cf20-f145-4e47-bb9a-d8dcdc217af7)
+
+```swift
+@State private var selectedHSubtle: Int = 1
+
+PBNav(
+        selected: $selectedHSubtle,
+        variant: .subtle,
+        orientation: .horizontal,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **selected** | `Int` | Sets selected to current index | `0` |  |
+| **currentHover** | `Int?` | Sets the current hover state to the current index|  |  |
+| **variant** | `Variant` | Sets variant for nav | `.normal` | `normal` `subtle` `bold` |
+| **orientation** | `Orientation` | Changes the orientation of nav | `.vertical` | `horizontal` `verticle` |
+| **title** | `String?` | Sets title of nav |  |  |
+| **borders** | `Bool` | Boolean value for whether nav items have a border or not | `true` | `true` `false` |
+| **highlight** | `Bool` | Boolean value for adding a highlight to nav | `true` | `true` `false` |
+| **views** | `[AnyView]` | An Array of AnyView |  |  |

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md

@@ -0,0 +1,18 @@
+![nav-vertical-bold](https://github.com/powerhome/playbook/assets/54749071/4d9ea3b7-c2e8-4703-80e3-54e4cee8dbfc)
+
+```swift
+ @State private var selectedVBold: Int = 1
+
+PBNav(
+        selected: $selectedVBold,
+        variant: .bold,
+        orientation: .vertical,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md

@@ -0,0 +1,18 @@
+![nav-vertical-default](https://github.com/powerhome/playbook/assets/54749071/ddbf0c77-4d98-483e-9f12-561ac169e6a9)
+
+```swift
+@State private var selectedVDefault: Int = 1
+
+PBNav(
+        selected: $selectedVDefault,
+        variant: .normal,
+        orientation: .vertical,
+        title: "Menu"
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md

@@ -0,0 +1,19 @@
+![nav-vertical-subtle_no-highlight](https://github.com/powerhome/playbook/assets/54749071/3f6d5773-6aa4-4ea1-a0b2-948e4325a311)
+
+```swift
+@State private var selectedVSubtleNoHighlight: Int = 1
+
+PBNav(
+        selected: $selectedVSubtleNoHighlight,
+        variant: .subtle,
+        orientation: .vertical,
+        borders: false,
+        highlight: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+
+```

data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_swift.md

@@ -0,0 +1,17 @@
+![nav-vertical-subtle](https://github.com/powerhome/playbook/assets/54749071/06a30a15-661a-4779-a674-7b4e6cded472)
+
+```swift
+@State private var selectedVSubtle: Int = 1
+
+PBNav(
+        selected: $selectedVSubtle,
+        variant: .subtle,
+        orientation: .vertical,
+        borders: false
+      ) {
+        PBNavItem("Photos")
+        PBNavItem("Music")
+        PBNavItem("Video")
+        PBNavItem("Files")
+      }
+```

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

@@ -42,3 +42,20 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
+
+  swift:
+  - nav_vertical_default_swift: Vertical Default
+  - nav_vertical_subtle_swift: Vertical Subtle
+  - nav_vertical_subtle_no_highlight_swift: Vertical Subtle No Highlight
+  - nav_vertical_bold_swift: Vertical Bold
+  - nav_horizontal_default_swift: Horizontal Default
+  - nav_horizontal_subtle_swift: Horizontal Subtle
+  - nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
+  - nav_horizontal_bold_swift: Horizontal Bold
+  - nav_props_swift: ""
+
+
+
+  
+
+  

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -13,25 +13,26 @@ import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
 import TextInput from '../pb_text_input/_text_input'
+import { GenericObject } from "../types"
 
 type PassphraseProps = {
   aria?: { [key: string]: string },
   confirmation?: boolean,
   className?: string,
-  data?: object,
+  data?: GenericObject,
   dark?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inputProps?: {},
+  inputProps?: GenericObject,
   label?: string,
-  onChange: (inputValue: String) => void,
+  onChange: (inputValue: string) => void,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
   value: string,
 }
 
-const Passphrase = (props: PassphraseProps) => {
+const Passphrase = (props: PassphraseProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -42,7 +43,7 @@ const Passphrase = (props: PassphraseProps) => {
     id,
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
-    onChange = () => { },
+    onChange = () => undefined,
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -84,60 +85,60 @@ const Passphrase = (props: PassphraseProps) => {
     globalProps(props),
     className
   )
-   const dataProps = buildDataProps(data)
-   const htmlProps = buildHtmlProps(htmlOptions)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
 
   const popoverReference = (
     <CircleIconButton
-      className={tipClass}
-      dark={dark}
-      icon="info-circle"
-      onClick={toggleShowPopover}
-      variant="link"
+        className={tipClass}
+        dark={dark}
+        icon="info-circle"
+        onClick={toggleShowPopover}
+        variant="link"
     />
   )
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       <label>
         <Flex align="baseline">
           <Caption
-            className="passphrase-label"
-            text={label}
+              className="passphrase-label"
+              text={label}
           />
           {tips.length > 0 && !confirmation &&
             <PbReactPopover
-              className="passphrase-tips"
-              closeOnClick="outside"
-              placement="right"
-              reference={popoverReference}
-              shouldClosePopover={handleShouldClosePopover}
-              show={showPopover}
+                className="passphrase-tips"
+                closeOnClick="outside"
+                placement="right"
+                reference={popoverReference}
+                shouldClosePopover={handleShouldClosePopover}
+                show={showPopover}
             >
               <Flex
-                align="center"
-                orientation="column"
+                  align="center"
+                  orientation="column"
               >
                 <Caption
-                  marginBottom="xs"
-                  text="Tips for a good passphrase"
+                    marginBottom="xs"
+                    text="Tips for a good passphrase"
                 />
                 <div>
                   {tips.map((tip, i) => (
                     <Caption
-                      key={i}
-                      marginBottom="xs"
-                      size="xs"
+                        key={i}
+                        marginBottom="xs"
+                        size="xs"
                     >
                       <Icon
-                        icon="shield-check"
-                        marginRight="xs"
+                          icon="shield-check"
+                          marginRight="xs"
                       />
                       {tip}
                     </Caption>
@@ -149,30 +150,30 @@ const Passphrase = (props: PassphraseProps) => {
         </Flex>
         <div className="passphrase-text-input-wrapper">
           <TextInput
-            className="passphrase-text-input"
-            dark={dark}
-            marginBottom="xs"
-            onChange={handleChange}
-            placeholder="Enter a passphrase..."
-            type={showPassphrase ? "text" : "password"}
-            value={displayValue}
-            {...inputProps}
+              className="passphrase-text-input"
+              dark={dark}
+              marginBottom="xs"
+              onChange={handleChange}
+              placeholder="Enter a passphrase..."
+              type={showPassphrase ? "text" : "password"}
+              value={displayValue}
+              {...inputProps}
           />
           <span
-            className="show-passphrase-icon"
-            onClick={toggleShowPassphrase}
+              className="show-passphrase-icon"
+              onClick={toggleShowPassphrase}
           >
             <Body
-              className={showPassphrase ? "hide-icon" : ""}
-              color="light"
-              dark={dark}
+                className={showPassphrase ? "hide-icon" : ""}
+                color="light"
+                dark={dark}
             >
               <Icon icon="eye-slash" />
             </Body>
             <Body
-              className={showPassphrase ? "" : "hide-icon"}
-              color="light"
-              dark={dark}
+                className={showPassphrase ? "" : "hide-icon"}
+                color="light"
+                dark={dark}
             >
               <Icon icon="eye" />
             </Body>

data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx

@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 import Contact from '../pb_contact/_contact'
 import Person from '../pb_person/_person'
+import { GenericObject } from '../types'
 
 type ContactItem = {
   contactType: string,
@@ -17,7 +18,7 @@ type ContactItem = {
 type PersonContactProps = {
   aria?: { [key: string]: string },
   className?: string | string[],
-  data?: object,
+  data?: GenericObject,
   firstName: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -25,7 +26,7 @@ type PersonContactProps = {
   contacts?: ContactItem[],
 }
 
-const PersonContact = (props: PersonContactProps) => {
+const PersonContact = (props: PersonContactProps): React.ReactElement => {
   const {
     aria = {},
     className,
@@ -60,35 +61,35 @@ const PersonContact = (props: PersonContactProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       <Person
-        firstName={firstName}
-        lastName={lastName}
+          firstName={firstName}
+          lastName={lastName}
       />
       {validContacts().map((contactObject, index) => (
         <Contact
-          contactDetail={contactObject.contactDetail}
-          contactType={contactObject.contactType}
-          contactValue={contactObject.contactValue}
-          key={`valid-contact-${index}`}
+            contactDetail={contactObject.contactDetail}
+            contactType={contactObject.contactType}
+            contactValue={contactObject.contactValue}
+            key={`valid-contact-${index}`}
         />
       ))}
       {wrongContacts().map((contactObject, index) => (
         <div key={`wrong-contact-caption-wrapper-${index}`}>
           <Caption
-            className="wrong_numbers"
-            key={`wrong-contact-caption-${index}`}
-            text="wrong number"
+              className="wrong_numbers"
+              key={`wrong-contact-caption-${index}`}
+              text="wrong number"
           />
           <Contact
-            contactType={contactObject.contactType}
-            contactValue={contactObject.contactValue}
-            key={`wrong-contact-${index}`}
+              contactType={contactObject.contactType}
+              contactValue={contactObject.contactValue}
+              key={`wrong-contact-${index}`}
           />
         </div>
       ))}

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -62,6 +62,7 @@ const formatAllCountries = () => {
 formatAllCountries()
 
 const containOnlyNumbers = (value: string) => {
+  // eslint-disable-next-line no-useless-escape
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
@@ -259,9 +260,9 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   if (required) textInputProps.required = true
 
   return (
-    <div 
-      {...wrapperProps} 
-      {...htmlProps}
+    <div
+        {...wrapperProps}
+        {...htmlProps}
     >
       <TextInput
           ref={

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import {
@@ -54,7 +55,7 @@ const popoverModifiers = ({
   offset,
 }: {
   modifiers: Modifier<any> & any;
-  offset: {};
+  offset: boolean;
 }) => {
   return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
 };
@@ -143,7 +144,7 @@ const Popover = (props: PbPopoverProps) => {
   );
 };
 
-const PbReactPopover = (props: PbPopoverProps) => {
+const PbReactPopover = (props: PbPopoverProps): React.ReactElement => {
   const [targetId] = useState(_uniqueId('id-'))
   const {
     className,
@@ -226,9 +227,10 @@ const PbReactPopover = (props: PbPopoverProps) => {
           <PopperReference>
             {({ ref }) => (
               <span
-                  id={"reference-" + targetId}
                   className="pb_popover_reference_wrapper"
-                  ref={ref}>
+                  id={"reference-" + targetId}
+                  ref={ref}
+              >
                 <reference.type {...reference.props} />
               </span>
             )}

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx

@@ -20,6 +20,14 @@ type ProgressPillsProps = {
   value?: string,
 }
 
+const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
+  <div
+      className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
+      }`}
+      key={step}
+  />
+)
+
 const showSteps = (steps: number, active: number, dark: boolean) => {
   const items = []
 
@@ -30,14 +38,6 @@ const showSteps = (steps: number, active: number, dark: boolean) => {
   return items
 }
 
-const ProgressPill = ({ active, dark, steps: step }: ProgressPillsProps) => (
-  <div
-    className={`pb_progress_pill${step <= active ? '_active' : '_inactive'}${dark ? ' dark' : ''
-      }`}
-    key={step}
-  />
-)
-
 const ProgressPills = (props: ProgressPillsProps) => {
   const {
     active = 0,
@@ -59,24 +59,24 @@ const ProgressPills = (props: ProgressPillsProps) => {
 
   return (
     <div
-      {...ariaProps}
-      {...dataProps}
-      {...htmlProps}
-      className={classes}
-      id={id}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
     >
       {title &&
         <div className="progress_pills_status">
           <Title
-            dark={dark}
-            size={4}
-            tag="h4"
-            text={title}
+              dark={dark}
+              size={4}
+              tag="h4"
+              text={title}
           />
           <Body
-            color="light"
-            dark={dark}
-            text={value}
+              color="light"
+              dark={dark}
+              text={value}
           />
         </div>}
       <div className="progress_pills">{showSteps(steps, active, dark)}</div>

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx

@@ -18,7 +18,7 @@ type ProgressSimpleProps = {
   width: string,
 }
 
-const ProgressSimple = (props: ProgressSimpleProps) => {
+const ProgressSimple = (props: ProgressSimpleProps): React.ReactElement => {
   const {
     align,
     className,
@@ -57,9 +57,9 @@ const ProgressSimple = (props: ProgressSimpleProps) => {
 
   return (
     <div 
-      {...dataProps}
-      {...htmlProps}
-      className={wrapperClass}
+        {...dataProps}
+        {...htmlProps}
+        className={wrapperClass}
     >
       <div
           className={kitClass}

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx

@@ -7,7 +7,7 @@ import Tooltip from "../../pb_tooltip/_tooltip";
 
 type EditorButtonProps = {
   classname?: string,
-  onclick?: () => {} | void,
+  onclick?: () => undefined | void,
   icon?: string;
   text?: string;
   disable?: boolean
@@ -19,29 +19,31 @@ const EditorButton = ({
   onclick,
   icon,
   text,
-}: EditorButtonProps) => {
+}: EditorButtonProps): React.ReactElement => {
   return (
-    <Tooltip 
-      delay={{
+    <Tooltip
+        delay={{
         open: 2000
       }}
-      interaction 
-      placement="top" 
-      text={text}
+        interaction
+        placement="top"
+        text={text}
     >
       <button
-        className={classname}
-        disabled={disable}
-        onClick={onclick}
-        role="button"
-        type="button"
+          className={classname}
+          disabled={disable}
+          onClick={onclick}
+          role="button"
+          type="button"
       >
-        <Flex 
-          align="center"
-          className="toolbar_button_icon"
-          justify="center"
+        <Flex
+            align="center"
+            className="toolbar_button_icon"
+            justify="center"
         >
-          <Icon icon={icon} size="lg" />
+          <Icon icon={icon}
+              size="lg"
+          />
         </Flex>
       </button>
     </Tooltip>