Add email, password, url components to lookbook

app/components/input/email_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Input::EmailComponent < InputFieldComponent
+  def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '')
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+end

app/components/input/email_component/email_component.html.haml

@@ -0,0 +1 @@
+= render InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: "email")

app/components/input/password_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Input::PasswordComponent < InputFieldComponent
+  def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '')
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+end

app/components/input/password_component/password_component.html.haml

@@ -0,0 +1 @@
+= render InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: "password")

app/components/input/url_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Input::UrlComponent < InputFieldComponent
+  def initialize(label: '', name:, value: nil, placeholder: '', error_message: '', helper_text: '')
+    super(label: label, name: name, value: value,  placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+  end
+end

app/components/input/url_component/url_component.html.haml

@@ -0,0 +1 @@
+= render InputFieldComponent.new(label: @label, name: @name, value: @value,  placeholder: @placeholder, error_message: @error_message, helper_text: @helper_text, type: "url")

test/components/previews/input/email_component_preview.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Input::EmailComponentPreview < ViewComponent::Preview
+  def default
+    # This is a url input field:
+    # - To use it without a label: don't give a value to the param label or leave it empty.
+    # - To put it in error state: define the param error_message with the error message you want to be displayed.
+    # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+    # @param label text
+    # @param error_message text
+    # @param helper_text text
+
+    def default(label: "Label", placeholder: "", error_message: "", helper_text: "")
+      render Input::EmailComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+    end
+  end
+end

test/components/previews/input/password_component_preview.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Input::PasswordComponentPreview < ViewComponent::Preview
+  def default
+    # This is a url input field:
+    # - To use it without a label: don't give a value to the param label or leave it empty.
+    # - To put it in error state: define the param error_message with the error message you want to be displayed.
+    # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+    # @param label text
+    # @param error_message text
+    # @param helper_text text
+
+    def default(label: "Label", placeholder: "", error_message: "", helper_text: "")
+      render Input::PasswordComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+    end
+  end
+end

test/components/previews/input/url_component_preview.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class Input::UrlComponentPreview < ViewComponent::Preview
+  def default
+    # This is a url input field:
+    # - To use it without a label: don't give a value to the param label or leave it empty.
+    # - To put it in error state: define the param error_message with the error message you want to be displayed.
+    # - To give it a helper text (a text displayed under the input field): define the param helper_text with the helper text you want to be displayed.
+    # @param label text
+    # @param error_message text
+    # @param helper_text text
+
+    def default(label: "Label", placeholder: "", error_message: "", helper_text: "")
+      render Input::UrlComponent.new(label: label, name: "name", placeholder: placeholder, error_message: error_message, helper_text: helper_text)
+    end
+  end
+end