playbook_ui 15.2.0.pre.alpha.toastfixes11417 → 15.2.0.pre.rc.0

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -60,10 +60,7 @@ module Playbook
       end
 
       def classname
-        default_z_index = z_index.present? ? "" : " z_index_max"
-        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
-        # Changing the order will break the auto_close functionality
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + auto_close_class + icon_class
       end
     end
   end

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -75,14 +75,4 @@ test('renders position when provided', () => {
         />
     );
     expect(container.querySelector('.positioned_toast')).toBeInTheDocument();
-});
-
-test('renders max zIndex by default', () => {
-    const { container } = render(<FixedConfirmationToast />);
-    expect(container.querySelector('.z_index_max')).toBeInTheDocument();
-});
-
-test('applies custom zIndex when provided', () => {
-    const { container } = render(<FixedConfirmationToast zIndex={10} />);
-    expect(container.querySelector('.z_index_10')).toBeInTheDocument();
 });

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,15 +21,6 @@
   ]
 %>
 
-<%
-  example_typeahead_options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -98,10 +89,8 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
-  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
-  <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +26,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-} & GlobalProps
+}
 
 const IconCircle = (props: IconCircleProps) => {
   const {

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,45 +3,51 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-.pb_icon_stat_value_kit_horizontal,
-.pb_icon_stat_value_kit_vertical
- {
+[class^=pb_icon_stat_value_kit]{
   display: flex;
   align-items: baseline;
 
-  &.pb_icon_stat_value_kit_vertical {
+  &[class*=_vertical]  {
     flex-direction: column;
 
-    &.text_align_center {
+    &[class*=_center]  {
       align-items: center;
 
-      .pb_title_kit,
-      .pb_body_kit,
-      .pb_caption_kit_md {
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
         text-align: center;
       }
     }
 
-    &.text_align_right {
+    &[class*=_right]  {
       align-items: flex-end;
 
-      .pb_title_kit,
-      .pb_body_kit,
-      .pb_caption_kit_md {
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
         text-align: right;
       }
     }
+
+    [class^=pb_icon_circle] {
+      margin-bottom: $space-xs;
+    }
   }
 
-  &.pb_icon_stat_value_kit_horizontal {
+  &[class*=_horizontal]  {
     align-items: center;
 
-    &.text_align_center {
+    &[class*=_center]  {
       justify-content: center;
     }
 
-    &.text_align_right {
+    &[class*=_right]  {
       justify-content: flex-end;
     }
+
+    [class^=pb_icon_circle] {
+      margin-right: $space-sm;
+    }
   }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,7 +33,8 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-} & GlobalProps
+    | "lighter",
+}
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -49,13 +50,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'default',
+    variant = 'lighter',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -100,8 +101,6 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
-          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
-          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,8 +3,6 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
-        margin_right: object.icon_margin_right,
-        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,8 +9,8 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green orange],
-                     default: "default"
+                     values: %w[default royal blue purple teal red yellow green orange lighter],
+                     default: "lighter"
 
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
@@ -25,7 +25,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_icon_stat_value_kit", orientation)
+        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
       end
 
       def value_string
@@ -41,14 +41,6 @@ module Playbook
           3
         end
       end
-
-      def icon_margin_right
-        orientation === "horizontal" && "sm"
-      end
-
-      def icon_margin_bottom
-        orientation === "vertical" && "xs"
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
     })
 
     test("renders icon", () => {
@@ -99,10 +99,9 @@ describe("IconStatValue Kit", () => {
                     value={64.18}
           />
             )
-            const size = sizeProp === "sm" ? "3" : sizeProp === "md" ? "2" : "1"
+    
             const kit = screen.getByTestId(testId)
-            const title = kit.querySelector(".pb_title_kit")
-            expect(title).toHaveClass(`pb_title_${size}`)
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
 
             cleanup()
         })
@@ -116,7 +115,8 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green"].forEach(
+        "green",
+        "lighter"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -128,10 +128,9 @@ describe("IconStatValue Kit", () => {
                     variant={colorProp}
           />
             )
-
+    
             const kit = screen.getByTestId(testId)
-            const iconCircle = kit.querySelector(`.pb_icon_circle_kit_size_sm_${colorProp}`)
-            expect(iconCircle).toBeInTheDocument()
+            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
 
             cleanup()
         }) 
@@ -150,7 +149,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
     })
 
 })

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -89,18 +89,7 @@ $positions: (
   }
 }
 
-.pb_multiple_users_stacked_kit,
-.pb_multiple_users_stacked_kit_single,
-.pb_multiple_users_stacked_kit_bubble,
-.pb_multiple_users_stacked_kit_single_bubble,
-.pb_multiple_users_stacked_kit_bubble_size_sm,
-.pb_multiple_users_stacked_kit_bubble_size_md,
-.pb_multiple_users_stacked_kit_bubble_size_lg,
-.pb_multiple_users_stacked_kit_bubble_size_xl,
-.pb_multiple_users_stacked_kit_single_bubble_size_sm,
-.pb_multiple_users_stacked_kit_single_bubble_size_md,
-.pb_multiple_users_stacked_kit_single_bubble_size_lg,
-.pb_multiple_users_stacked_kit_single_bubble_size_xl {
+[class^=pb_multiple_users_stacked_kit] {
   $container_size: map-get($avatar-sizes, "xs");
   $bubble_container_size: map-get($avatar-sizes, "sm");
   $overlap: -15px;
@@ -114,8 +103,7 @@ $positions: (
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
-  .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
+  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
     @include avatar-size($stacked_size);
     &.dark {
       .avatar_wrapper {
@@ -129,17 +117,10 @@ $positions: (
       }
     }
   }
-  &.pb_multiple_users_stacked_kit_single .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_sm .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_md .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_lg .pb_multiple_users_stacked_item,
-  &.pb_multiple_users_stacked_kit_single_bubble_size_xl .pb_multiple_users_stacked_item {
+  &[class*=_single] .pb_multiple_users_stacked_item {
     @include avatar-size(28px);
   }
-  .pb_avatar_kit_size_xs.second_item,
-  .pb_avatar_kit_size_md.second_item, 
-  .pb_badge_kit_primary_rounded.second_item {
+  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
     @include position((bottom: 0, right: 0));
     z-index: 2;
     background: tint($primary, 90%);
@@ -162,8 +143,7 @@ $positions: (
 
   // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
   @each $size_name, $size_value in $avatar-sizes {
-      &.pb_multiple_users_stacked_kit_bubble_size_#{$size_name},
-      &.pb_multiple_users_stacked_kit_single_bubble_size_#{$size_name} {
+      &[class*=_bubble_][class*=_size_#{$size_name}] {
         // Set bubble container size based on the class
         $bubble_container_size: $size_value;
         $container_size: $size_value;
@@ -181,8 +161,7 @@ $positions: (
           background-color: $card_dark;
         }
   
-        .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
-        .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
+        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
           @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
   
           &.dark {
@@ -196,8 +175,7 @@ $positions: (
           }
         }
   
-        .pb_avatar_kit_size_xs,
-        .pb_avatar_kit_size_md {
+        [class^=pb_avatar_kit] {
           // First Item
           &.first_item {
             @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
@@ -257,13 +235,8 @@ $positions: (
           }
         }
         
-        &.pb_multiple_users_stacked_kit_single_bubble,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_sm,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_md,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_lg,
-        &.pb_multiple_users_stacked_kit_single_bubble_size_xl {
-          .pb_avatar_kit_size_xs.first_item,
-          .pb_avatar_kit_size_md.first_item {
+        &[class*=_single_bubble] {
+          [class^=pb_avatar_kit].first_item {
             @include position((top: 0, left: 0));
             @include avatar-size($bubble_container_size);
           }

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

@@ -111,7 +111,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
-  const [error, setError] = useState(props.error || "")
+  const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
@@ -124,6 +124,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     }
   }, [error, onValidate])
 
+  /*
+    useImperativeHandle exposes the kit's input element to a parent component via a ref.
+    See the Playbook docs for use cases.
+    Read: https://react.dev/reference/react/useImperativeHandle
+  */
+  useImperativeHandle(ref, () => {
+    return {
+      clearField() {
+        setInputValue("")
+        setError("")
+        setHasTyped(false)
+      },
+      inputNode() {
+        return inputRef.current
+      }
+    }
+  })
+
   const unformatNumber = (formattedNumber: any) => {
     return formattedNumber.replace(/\D/g, "")
   }
@@ -146,13 +164,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooShortNumber = (itiInit: any) => {
     if (!itiInit) return
-
-    // If field is empty, don't show "too short" error
-    if (!inputValue || inputValue.trim() === '') {
-      setError('')
-      return false
-    }
-
     if (itiInit.getValidationError() === ValidationError.TooShort) {
       return showFormattedError('too short')
     } else {
@@ -172,7 +183,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateUnhandledError = (itiInit: any) => {
-    if (!itiInit) return
+    if (!required || !itiInit) return
     if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
       if (inputValue.length === 1) {
         return showFormattedError('too short')
@@ -195,27 +206,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateRepeatCountryCode = (itiInit: any) => {
     if (!itiInit) return
-    const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
+    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
     if (unformatNumber(inputValue).startsWith(countryDialCode)) {
       return showFormattedError('repeat country code')
     }
   }
 
-  const validateRequiredField = () => {
-    if (!inputValue || inputValue.trim() === '') {
-      setError('Missing phone number')
-      return true
-    }
-    return false
-  }
 
   const validateErrors = () => {
-    // If field is empty, show error message
-    if (!inputValue || inputValue.trim() === '') {
-      if (validateRequiredField()) return
-      return
-    }
-
     if (!hasTyped && !error) return
 
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
@@ -227,87 +225,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateRepeatCountryCode(itiRef.current)) return
   }
 
-  /*
-    useImperativeHandle exposes the kit's input element to a parent component via a ref.
-    See the Playbook docs for use cases.
-    Read: https://react.dev/reference/react/useImperativeHandle
-  */
-  useImperativeHandle(ref, () => {
-    return {
-      clearField() {
-        setInputValue("")
-        setError("")
-        setHasTyped(false)
-      },
-      inputNode() {
-        return inputRef.current
-      },
-      // Expose validation method for React Hook Form
-      validate() {
-        // Run validation and return error message or true
-        const isEmpty = !inputValue || inputValue.trim() === ''
-
-        if (isEmpty) {
-          // Show missing phone number error
-          const errorMessage = 'Missing phone number'
-          setError(errorMessage)
-          setHasTyped(true)
-          // Only return error for React Hook Form if field is required
-          return required ? errorMessage : true
-        }
-
-        if (!itiRef.current) {
-          return true
-        }
-
-        // Check for repeat country code first
-        const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
-        if (unformatNumber(inputValue).startsWith(countryDialCode)) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const errorMessage = `Invalid ${countryName} phone number (repeat country code)`
-          setError(errorMessage)
-          setHasTyped(true)
-          return errorMessage
-        }
-
-        // Check if it only contains valid characters
-        if (!containOnlyNumbers(inputValue)) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const errorMessage = `Invalid ${countryName} phone number (enter numbers only)`
-          setError(errorMessage)
-          setHasTyped(true)
-          return errorMessage
-        }
-
-        // Check if valid number
-        if (!itiRef.current.isValidNumber()) {
-          const countryName = itiRef.current.getSelectedCountryData().name
-          const validationError = itiRef.current.getValidationError()
-          let errorMessage = ''
-
-          if (validationError === ValidationError.TooShort) {
-            errorMessage = `Invalid ${countryName} phone number (too short)`
-          } else if (validationError === ValidationError.TooLong) {
-            errorMessage = `Invalid ${countryName} phone number (too long)`
-          } else if (validationError === ValidationError.MissingAreaCode) {
-            errorMessage = `Invalid ${countryName} phone number (missing area code)`
-          } else {
-            errorMessage = `Invalid ${countryName} phone number`
-          }
-
-          setError(errorMessage)
-          setHasTyped(true)
-
-          return errorMessage
-        }
-
-        // Clear error if valid
-        setError('')
-        return true
-      }
-    }
-  })
-
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
     return { ...itiInit.getSelectedCountryData(), number: inputValue }
   }
@@ -383,7 +300,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error: hasTyped ? error : props.error,
+    error,
     type: 'tel',
     id,
     label,

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -3,9 +3,6 @@
 @import "../tokens/colors";
 
 .pb_text_input_kit {
-  label {
-    display: block !important;
-  }
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -140,14 +140,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
 
-  const errorId = error ? `${id}-error` : undefined
-
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
-        aria-describedby={errorId}
-        aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
@@ -206,20 +202,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label && (
-        <label htmlFor={id}>
-          <Caption className="pb_text_input_kit_label" 
-              text={label} 
-          />
-        </label>
-      )}
+      {label &&
+        <Caption
+            className="pb_text_input_kit_label"
+            text={label}
+        />
+      }
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 
         {error && <Body
-            aria={{ atomic: "true", live: "polite" }}
-            htmlOptions={{ role: "alert" }}
-            id={errorId}
             status="negative"
             text={error}
             variant={null}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -9,27 +9,23 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name",
-  id: "last-name"
+  placeholder: "Enter last name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number",
-    id: "phone"
+    placeholder: "Enter phone number"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address",
-    id: "email"
+    placeholder: "Enter email address"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code",
-    id: "zip"
+    placeholder: "Enter zip code"
 }) %>