playbook_ui_docs 15.1.0.pre.alpha.play252710946 → 15.1.0.pre.alpha.testingtiptap11043
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb +16 -16
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx +2 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb +31 -31
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx +4 -3
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -12
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx +37 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb +8 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +5 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.md +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +4 -2
    
        checksums.yaml
    CHANGED
    
    | @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            ---
         | 
| 2 2 | 
             
            SHA256:
         | 
| 3 | 
            -
              metadata.gz:  | 
| 4 | 
            -
              data.tar.gz:  | 
| 3 | 
            +
              metadata.gz: 192f398b5253e62b9e469435620b9d0a06b85e17726ea73c252414f8783dec0e
         | 
| 4 | 
            +
              data.tar.gz: 067c71a037c638ff0c3d51a14db7e9d0c2a42685fc0718c8f98748c6c216c535
         | 
| 5 5 | 
             
            SHA512:
         | 
| 6 | 
            -
              metadata.gz:  | 
| 7 | 
            -
              data.tar.gz:  | 
| 6 | 
            +
              metadata.gz: b2d8f28ec32c3c0355a778f8dfc951b497a491769f4946847655e2ef479c343eb8a5879128405412148ec30348645e10d30cb26d220956930503d4f1e2f61fa4
         | 
| 7 | 
            +
              data.tar.gz: 5999df95a099b842d7261d8f7d9e0bce75ebe87c82f8324c34db273e8de741216401b7433a0c366ae304c87fd19715386774901a15968c1814bcd8457f244b85
         | 
| @@ -3,12 +3,12 @@ | |
| 3 3 | 
             
            <%= pb_rails("button", props: { text: "Delete Status", data: {"open-dialog": "dialog-stacked-delete"}, margin_right: "md" }) %>
         | 
| 4 4 |  | 
| 5 5 |  | 
| 6 | 
            -
            <%= pb_rails("dialog", props: { | 
| 7 | 
            -
                id:"dialog-stacked-default", | 
| 6 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 7 | 
            +
                id:"dialog-stacked-default",
         | 
| 8 8 | 
             
                status: "default",
         | 
| 9 | 
            -
                size: "sm", | 
| 10 | 
            -
                title: "Are you sure?", | 
| 11 | 
            -
                text: "Text explaining why there is an alert", | 
| 9 | 
            +
                size: "sm",
         | 
| 10 | 
            +
                title: "Are you sure?",
         | 
| 11 | 
            +
                text: "Text explaining why there is an alert",
         | 
| 12 12 | 
             
            }) do %>
         | 
| 13 13 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 14 14 | 
             
                    <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
         | 
| @@ -18,12 +18,12 @@ | |
| 18 18 | 
             
                <% end %>
         | 
| 19 19 | 
             
            <% end %>
         | 
| 20 20 |  | 
| 21 | 
            -
            <%= pb_rails("dialog", props: { | 
| 22 | 
            -
                id:"dialog-stacked-caution", | 
| 21 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 22 | 
            +
                id:"dialog-stacked-caution",
         | 
| 23 23 | 
             
                status: "caution",
         | 
| 24 | 
            -
                size: "sm", | 
| 25 | 
            -
                title: "Are you sure?", | 
| 26 | 
            -
                text: "This is the action you will be taking", | 
| 24 | 
            +
                size: "sm",
         | 
| 25 | 
            +
                title: "Are you sure?",
         | 
| 26 | 
            +
                text: "This is the action you will be taking",
         | 
| 27 27 | 
             
            }) do %>
         | 
| 28 28 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 29 29 | 
             
                    <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
         | 
| @@ -33,16 +33,16 @@ | |
| 33 33 | 
             
                <% end %>
         | 
| 34 34 | 
             
            <% end %>
         | 
| 35 35 |  | 
| 36 | 
            -
            <%= pb_rails("dialog", props: { | 
| 37 | 
            -
                id:"dialog-stacked-delete", | 
| 36 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 37 | 
            +
                id:"dialog-stacked-delete",
         | 
| 38 38 | 
             
                status: "delete",
         | 
| 39 | 
            -
                size: "sm", | 
| 40 | 
            -
                title: "Delete", | 
| 41 | 
            -
                text: "You are about to delete ...", | 
| 39 | 
            +
                size: "sm",
         | 
| 40 | 
            +
                title: "Delete",
         | 
| 41 | 
            +
                text: "You are about to delete ...",
         | 
| 42 42 | 
             
            }) do %>
         | 
| 43 43 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 44 44 | 
             
                    <%= pb_rails("flex", props: { orientation: "column", padding_x:"md", padding: "sm" }) do %>
         | 
| 45 | 
            -
                        <%= pb_rails("button", props: { text: "Yes, Action", full_width: true }) %>
         | 
| 45 | 
            +
                        <%= pb_rails("button", props: { text: "Yes, Action", variant: "danger", full_width: true }) %>
         | 
| 46 46 | 
             
                        <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", full_width: true, margin_top: "sm", data: {"close-dialog": "dialog-stacked-delete" } }) %>
         | 
| 47 47 | 
             
                    <% end %>
         | 
| 48 48 | 
             
                <% end %>
         | 
| @@ -51,7 +51,7 @@ const DialogStackedAlert = () => { | |
| 51 51 | 
             
              return (
         | 
| 52 52 | 
             
                <div>
         | 
| 53 53 | 
             
                <Flex
         | 
| 54 | 
            -
                    rowGap="xs" | 
| 54 | 
            +
                    rowGap="xs"
         | 
| 55 55 | 
             
                    wrap
         | 
| 56 56 | 
             
                >
         | 
| 57 57 | 
             
                  <Button
         | 
| @@ -93,6 +93,7 @@ const DialogStackedAlert = () => { | |
| 93 93 | 
             
                      <Button
         | 
| 94 94 | 
             
                          fullWidth
         | 
| 95 95 | 
             
                          onClick={dialog.toggle}
         | 
| 96 | 
            +
                          variant= {dialog.status == "delete" ? "danger" : "primary"}
         | 
| 96 97 | 
             
                      >
         | 
| 97 98 | 
             
                        {dialog.buttonOneText}
         | 
| 98 99 | 
             
                      </Button>
         | 
| @@ -8,12 +8,12 @@ | |
| 8 8 | 
             
            <%= pb_rails("button", props: { text: "Success Status", data: {"open-dialog": "dialog-status-success"}, margin_right: "md" }) %>
         | 
| 9 9 | 
             
            <% end %>
         | 
| 10 10 |  | 
| 11 | 
            -
            <%= pb_rails("dialog", props: { | 
| 12 | 
            -
                id:"dialog-status-default", | 
| 11 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 12 | 
            +
                id:"dialog-status-default",
         | 
| 13 13 | 
             
                status: "default",
         | 
| 14 | 
            -
                size: "status_size", | 
| 15 | 
            -
                title: "Are you sure?", | 
| 16 | 
            -
                text: "Text explaining why there is an alert", | 
| 14 | 
            +
                size: "status_size",
         | 
| 15 | 
            +
                title: "Are you sure?",
         | 
| 16 | 
            +
                text: "Text explaining why there is an alert",
         | 
| 17 17 | 
             
            }) do %>
         | 
| 18 18 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 19 19 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -23,12 +23,12 @@ | |
| 23 23 | 
             
                <% end %>
         | 
| 24 24 | 
             
            <% end %>
         | 
| 25 25 |  | 
| 26 | 
            -
            <%= pb_rails("dialog", props: { | 
| 27 | 
            -
                id:"dialog-status-info", | 
| 26 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 27 | 
            +
                id:"dialog-status-info",
         | 
| 28 28 | 
             
                status: "info",
         | 
| 29 | 
            -
                size: "status_size", | 
| 30 | 
            -
                title: "Information", | 
| 31 | 
            -
                text: "Text explaining why there is an alert", | 
| 29 | 
            +
                size: "status_size",
         | 
| 30 | 
            +
                title: "Information",
         | 
| 31 | 
            +
                text: "Text explaining why there is an alert",
         | 
| 32 32 | 
             
            }) do %>
         | 
| 33 33 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 34 34 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -37,12 +37,12 @@ | |
| 37 37 | 
             
                <% end %>
         | 
| 38 38 | 
             
            <% end %>
         | 
| 39 39 |  | 
| 40 | 
            -
            <%= pb_rails("dialog", props: { | 
| 41 | 
            -
                id:"dialog-status-caution", | 
| 40 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 41 | 
            +
                id:"dialog-status-caution",
         | 
| 42 42 | 
             
                status: "caution",
         | 
| 43 | 
            -
                size: "status_size", | 
| 44 | 
            -
                title: "Are you Sure?", | 
| 45 | 
            -
                text: "This is the action you will be taking", | 
| 43 | 
            +
                size: "status_size",
         | 
| 44 | 
            +
                title: "Are you Sure?",
         | 
| 45 | 
            +
                text: "This is the action you will be taking",
         | 
| 46 46 | 
             
            }) do %>
         | 
| 47 47 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 48 48 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -52,27 +52,27 @@ | |
| 52 52 | 
             
                <% end %>
         | 
| 53 53 | 
             
            <% end %>
         | 
| 54 54 |  | 
| 55 | 
            -
            <%= pb_rails("dialog", props: { | 
| 56 | 
            -
                id:"dialog-status-delete", | 
| 55 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 56 | 
            +
                id:"dialog-status-delete",
         | 
| 57 57 | 
             
                status: "delete",
         | 
| 58 | 
            -
                size: "status_size", | 
| 59 | 
            -
                title: "Delete", | 
| 60 | 
            -
                text: "You are about to delete ...", | 
| 58 | 
            +
                size: "status_size",
         | 
| 59 | 
            +
                title: "Delete",
         | 
| 60 | 
            +
                text: "You are about to delete ...",
         | 
| 61 61 | 
             
            }) do %>
         | 
| 62 62 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 63 63 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| 64 | 
            -
                        <%= pb_rails("button", props: { text: "Yes, Delete" }) %>
         | 
| 64 | 
            +
                        <%= pb_rails("button", props: { text: "Yes, Delete", variant: "danger" }) %>
         | 
| 65 65 | 
             
                        <%= pb_rails("button", props: { text: "No, Cancel", variant: "secondary", data: {"close-dialog": "dialog-status-delete" } }) %>
         | 
| 66 66 | 
             
                    <% end %>
         | 
| 67 67 | 
             
                <% end %>
         | 
| 68 68 | 
             
            <% end %>
         | 
| 69 69 |  | 
| 70 | 
            -
            <%= pb_rails("dialog", props: { | 
| 71 | 
            -
                id:"dialog-status-error", | 
| 70 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 71 | 
            +
                id:"dialog-status-error",
         | 
| 72 72 | 
             
                status: "error",
         | 
| 73 | 
            -
                size: "status_size", | 
| 74 | 
            -
                title: "Error Message", | 
| 75 | 
            -
                text: "Text explaining the error", | 
| 73 | 
            +
                size: "status_size",
         | 
| 74 | 
            +
                title: "Error Message",
         | 
| 75 | 
            +
                text: "Text explaining the error",
         | 
| 76 76 | 
             
            }) do %>
         | 
| 77 77 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 78 78 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -81,12 +81,12 @@ | |
| 81 81 | 
             
                <% end %>
         | 
| 82 82 | 
             
            <% end %>
         | 
| 83 83 |  | 
| 84 | 
            -
            <%= pb_rails("dialog", props: { | 
| 85 | 
            -
                id:"dialog-status-success", | 
| 84 | 
            +
            <%= pb_rails("dialog", props: {
         | 
| 85 | 
            +
                id:"dialog-status-success",
         | 
| 86 86 | 
             
                status: "success",
         | 
| 87 | 
            -
                size: "status_size", | 
| 88 | 
            -
                title: "Success!", | 
| 89 | 
            -
                text: "Text explaining what is successful", | 
| 87 | 
            +
                size: "status_size",
         | 
| 88 | 
            +
                title: "Success!",
         | 
| 89 | 
            +
                text: "Text explaining what is successful",
         | 
| 90 90 | 
             
            }) do %>
         | 
| 91 91 | 
             
                <%= pb_rails("dialog/dialog_footer") do %>
         | 
| 92 92 | 
             
                    <%= pb_rails("flex", props: { spacing:"between", padding_x:"md", padding_bottom:"md", padding: "sm" }) do %>
         | 
| @@ -83,8 +83,8 @@ const DialogStatus = () => { | |
| 83 83 |  | 
| 84 84 | 
             
              return (
         | 
| 85 85 | 
             
                <div>
         | 
| 86 | 
            -
                  <Flex | 
| 87 | 
            -
                      rowGap="xs" | 
| 86 | 
            +
                  <Flex
         | 
| 87 | 
            +
                      rowGap="xs"
         | 
| 88 88 | 
             
                      wrap
         | 
| 89 89 | 
             
                  >
         | 
| 90 90 | 
             
                    <Button
         | 
| @@ -117,7 +117,7 @@ const DialogStatus = () => { | |
| 117 117 | 
             
                    >
         | 
| 118 118 | 
             
                      {"Success Status"}
         | 
| 119 119 | 
             
                    </Button>
         | 
| 120 | 
            -
                    <Button | 
| 120 | 
            +
                    <Button
         | 
| 121 121 | 
             
                        marginRight="md"
         | 
| 122 122 | 
             
                        onClick={toggleErrorAlert}
         | 
| 123 123 | 
             
                    >
         | 
| @@ -152,6 +152,7 @@ const DialogStatus = () => { | |
| 152 152 | 
             
                              <Button
         | 
| 153 153 | 
             
                                  onClick={dialog.toggle}
         | 
| 154 154 | 
             
                                  paddingRight="xl"
         | 
| 155 | 
            +
                                  variant={dialog.status == "delete" ? "danger" : "primary"}
         | 
| 155 156 | 
             
                              >
         | 
| 156 157 | 
             
                              {dialog.buttonOneText}
         | 
| 157 158 | 
             
                              </Button>
         | 
| @@ -21,15 +21,6 @@ | |
| 21 21 | 
             
              ]
         | 
| 22 22 | 
             
            %>
         | 
| 23 23 |  | 
| 24 | 
            -
            <%
         | 
| 25 | 
            -
              example_typeahead_options = [
         | 
| 26 | 
            -
                { label: 'Orange', value: '#FFA500' },
         | 
| 27 | 
            -
                { label: 'Red', value: '#FF0000' },
         | 
| 28 | 
            -
                { label: 'Green', value: '#00FF00' },
         | 
| 29 | 
            -
                { label: 'Blue', value: '#0000FF' },
         | 
| 30 | 
            -
              ]
         | 
| 31 | 
            -
            %>
         | 
| 32 | 
            -
             | 
| 33 24 | 
             
            <% treeData = [{
         | 
| 34 25 | 
             
                label: "Power Home Remodeling",
         | 
| 35 26 | 
             
                value: "Power Home Remodeling",
         | 
| @@ -97,9 +88,7 @@ | |
| 97 88 | 
             
            }] %>
         | 
| 98 89 |  | 
| 99 90 | 
             
            <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
         | 
| 100 | 
            -
              <%= form.typeahead : | 
| 101 | 
            -
              <%= form.typeahead :example_typeahead_validation, 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." } } %>
         | 
| 102 | 
            -
              <%= form.typeahead :example_typeahead_validation_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
         | 
| 91 | 
            +
              <%= 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." } } %>
         | 
| 103 92 | 
             
              <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
         | 
| 104 93 | 
             
              <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
         | 
| 105 94 | 
             
              <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
         | 
| @@ -0,0 +1,37 @@ | |
| 1 | 
            +
            import React from 'react'
         | 
| 2 | 
            +
            import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
         | 
| 3 | 
            +
            import { useEditor, EditorContent } from "@tiptap/react"
         | 
| 4 | 
            +
            import StarterKit from "@tiptap/starter-kit"
         | 
| 5 | 
            +
            import Link from '@tiptap/extension-link'
         | 
| 6 | 
            +
             | 
| 7 | 
            +
             | 
| 8 | 
            +
            const RichTextEditorAdvancedSimple = (props) => {
         | 
| 9 | 
            +
             | 
| 10 | 
            +
                const editor = useEditor({
         | 
| 11 | 
            +
                    extensions: [
         | 
| 12 | 
            +
                        StarterKit,
         | 
| 13 | 
            +
                        Link
         | 
| 14 | 
            +
                    ],
         | 
| 15 | 
            +
                    content:"Add your text here. You can format your text, add links, quotes, and bullets."
         | 
| 16 | 
            +
                })
         | 
| 17 | 
            +
                  if (!editor) {
         | 
| 18 | 
            +
                    return null
         | 
| 19 | 
            +
                  } 
         | 
| 20 | 
            +
             | 
| 21 | 
            +
                  
         | 
| 22 | 
            +
             | 
| 23 | 
            +
             | 
| 24 | 
            +
              return (
         | 
| 25 | 
            +
                <div>
         | 
| 26 | 
            +
                  <RichTextEditor
         | 
| 27 | 
            +
                      advancedEditor={editor}
         | 
| 28 | 
            +
                      simple
         | 
| 29 | 
            +
                      {...props}
         | 
| 30 | 
            +
                  >
         | 
| 31 | 
            +
                    <EditorContent editor={editor}/>
         | 
| 32 | 
            +
                  </RichTextEditor>
         | 
| 33 | 
            +
                </div>
         | 
| 34 | 
            +
              )
         | 
| 35 | 
            +
            }
         | 
| 36 | 
            +
             | 
| 37 | 
            +
            export default RichTextEditorAdvancedSimple
         | 
| @@ -16,6 +16,7 @@ examples: | |
| 16 16 | 
             
              - rich_text_editor_advanced_default: Advanced Default
         | 
| 17 17 | 
             
              - rich_text_editor_more_extensions: Advanced (Extra Extensions)
         | 
| 18 18 | 
             
              - rich_text_editor_toolbar_disabled: Advanced (Toolbar disabled)
         | 
| 19 | 
            +
              - rich_text_editor_advanced_simple: Advanced (Simple)
         | 
| 19 20 | 
             
              - rich_text_editor_simple: Simple
         | 
| 20 21 | 
             
              - rich_text_editor_attributes: Attributes
         | 
| 21 22 | 
             
              - rich_text_editor_focus: Focus
         | 
| @@ -11,3 +11,4 @@ export { default as RichTextEditorAdvancedDefault } from './_rich_text_editor_ad | |
| 11 11 | 
             
            export { default as RichTextEditorMoreExtensions } from './_rich_text_editor_more_extensions.jsx'
         | 
| 12 12 | 
             
            export { default as RichTextEditorToolbarDisabled } from './_rich_text_editor_toolbar_disabled.jsx'
         | 
| 13 13 | 
             
            export { default as RichTextEditorAdvancedPreview } from './_rich_text_editor_advanced_preview.jsx'
         | 
| 14 | 
            +
            export { default as RichTextEditorAdvancedSimple } from './_rich_text_editor_advanced_simple.jsx'
         | 
| @@ -9,23 +9,27 @@ | |
| 9 9 |  | 
| 10 10 | 
             
            <%= pb_rails("text_input", props: {
         | 
| 11 11 | 
             
              label: "Last Name",
         | 
| 12 | 
            -
              placeholder: "Enter last name"
         | 
| 12 | 
            +
              placeholder: "Enter last name",
         | 
| 13 | 
            +
              id: "last-name"
         | 
| 13 14 | 
             
            }) %>
         | 
| 14 15 |  | 
| 15 16 | 
             
            <%= pb_rails("text_input", props: {
         | 
| 16 17 | 
             
                label: "Phone Number",
         | 
| 17 18 | 
             
                type: "phone",
         | 
| 18 | 
            -
                placeholder: "Enter phone number"
         | 
| 19 | 
            +
                placeholder: "Enter phone number",
         | 
| 20 | 
            +
                id: "phone"
         | 
| 19 21 | 
             
            }) %>
         | 
| 20 22 |  | 
| 21 23 | 
             
            <%= pb_rails("text_input", props: {
         | 
| 22 24 | 
             
                label: "Email Address",
         | 
| 23 25 | 
             
                type: "email",
         | 
| 24 | 
            -
                placeholder: "Enter email address"
         | 
| 26 | 
            +
                placeholder: "Enter email address",
         | 
| 27 | 
            +
                id: "email"
         | 
| 25 28 | 
             
            }) %>
         | 
| 26 29 |  | 
| 27 30 | 
             
            <%= pb_rails("text_input", props: {
         | 
| 28 31 | 
             
                label: "Zip Code",
         | 
| 29 32 | 
             
                type: "number",
         | 
| 30 | 
            -
                placeholder: "Enter zip code"
         | 
| 33 | 
            +
                placeholder: "Enter zip code",
         | 
| 34 | 
            +
                id: "zip"
         | 
| 31 35 | 
             
            }) %>
         | 
| @@ -38,6 +38,7 @@ const TextInputDefault = (props) => { | |
| 38 38 | 
             
                      {...props}
         | 
| 39 39 | 
             
                  />
         | 
| 40 40 | 
             
                  <TextInput
         | 
| 41 | 
            +
                      id="last-name"
         | 
| 41 42 | 
             
                      label="Last Name"
         | 
| 42 43 | 
             
                      name="lastName"
         | 
| 43 44 | 
             
                      onChange={handleOnChangeFormField}
         | 
| @@ -46,6 +47,7 @@ const TextInputDefault = (props) => { | |
| 46 47 | 
             
                      {...props}
         | 
| 47 48 | 
             
                  />
         | 
| 48 49 | 
             
                  <TextInput
         | 
| 50 | 
            +
                      id="phone"
         | 
| 49 51 | 
             
                      label="Phone Number"
         | 
| 50 52 | 
             
                      name="phone"
         | 
| 51 53 | 
             
                      onChange={handleOnChangeFormField}
         | 
| @@ -55,6 +57,7 @@ const TextInputDefault = (props) => { | |
| 55 57 | 
             
                      {...props}
         | 
| 56 58 | 
             
                  />
         | 
| 57 59 | 
             
                  <TextInput
         | 
| 60 | 
            +
                      id="email"
         | 
| 58 61 | 
             
                      label="Email Address"
         | 
| 59 62 | 
             
                      name="email"
         | 
| 60 63 | 
             
                      onChange={handleOnChangeFormField}
         | 
| @@ -64,6 +67,7 @@ const TextInputDefault = (props) => { | |
| 64 67 | 
             
                      {...props}
         | 
| 65 68 | 
             
                  />
         | 
| 66 69 | 
             
                  <TextInput
         | 
| 70 | 
            +
                      id="zip"
         | 
| 67 71 | 
             
                      label="Zip Code"
         | 
| 68 72 | 
             
                      name="zip"
         | 
| 69 73 | 
             
                      onChange={handleOnChangeFormField}
         | 
| @@ -84,6 +88,7 @@ const TextInputDefault = (props) => { | |
| 84 88 | 
             
                  <br />
         | 
| 85 89 |  | 
| 86 90 | 
             
                  <TextInput
         | 
| 91 | 
            +
                      id="first-name"
         | 
| 87 92 | 
             
                      label="First Name"
         | 
| 88 93 | 
             
                      onChange={handleOnChangeFirstName}
         | 
| 89 94 | 
             
                      placeholder="Enter first name"
         | 
| @@ -0,0 +1 @@ | |
| 1 | 
            +
            Add an `id` to your Text Input so that clicking the label will move focus directly to the input.
         |