feat: input field

stories/TextInput.js

@@ -0,0 +1,33 @@
+import { strToDom, domToStr } from "../utilities/dom";
+
+export const createTextInput = ({
+    name,
+    placeholder,
+    label,
+    hint,
+    isError,
+    disabled = false,
+    type = "text"
+}) => {
+
+    // class creator with modifier
+    const c = (modifier) => `sb-text-input__${modifier}`
+
+    const classNames = {
+        layout: `${c('layout')}`,
+        wrapper: `${c('wrapper')} ${disabled ? c('wrapper--disabled') : ''} ${isError ? c('wrapper--error') : ''}`,
+        label: `${c('label')}  ${disabled ? c('label--disabled') : ''}`,
+        input: `${c('input')} ${disabled ? c('input--disabled') : ''} ${isError ? c('input--error') : ''}`,
+        hint: `${c('hint')} ${isError ? c('hint--error') : ''}`
+    }
+
+    return strToDom(`
+        <div class="${classNames.layout}" >
+            <div class="${classNames.wrapper}" >
+                <label class="${classNames.label}" for="${name}" >${label}</label>
+                <input class="${classNames.input}" name="${name}" placeholder="${placeholder}" type="${type}" ${disabled ? "disabled" : ''} />
+            </div>
+            ${hint && `<p class="${classNames.hint}" >${hint}</p>`}
+        </div>
+    `)
+}

stories/TextInput.stories.js

@@ -0,0 +1,29 @@
+import { createTextInput } from "./TextInput";
+
+export default {
+    title: "Examples/Agency Profile Page",
+    argTypes: {
+      name: { control: "text" },
+      placeholder: { control: "text" },
+      label: { control: "text" },
+      hint: { control: "text" },
+      isError: { control: "boolean" },
+      disabled: { control: "boolean" },
+      type: { control: "text" },
+    },
+  };
+
+const Template = ({ ...args }) => {
+    return createTextInput({ ...args });
+};
+
+export const TextInput = Template.bind({});
+TextInput.args = {
+    label: "label",
+    name: "foo",
+    placeholder: "Placeholder",
+    hint: 'This is a hint text to help user.',
+    isError: false,
+    disabled: false,
+    type: "text",
+}

styles/components/_text-input.scss

@@ -0,0 +1,101 @@
+$label_size: 1.1375rem;
+$label_font_size: 0.6875rem;
+
+.sb-text-input__layout {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.sb-text-input__wrapper {
+    border: 1px solid #E5E5E5;
+    padding: 12px 16px;
+    padding-top: 20px;
+    border-radius: 8px;
+    background-color: #fff;
+
+    position: relative;
+    & * {
+        font-family: $font-primary-regular;
+    }
+
+    &:focus-within
+    {
+        border-color: #0095F6;
+
+        .sb-text-input__label {
+            font-size: $label_font_size;
+            transform: translateY(-$label_size);
+        }
+    }
+
+    &--disabled {
+        background-color: #F7F7F7;
+        &,
+        & *:hover {
+            cursor: not-allowed;
+        }
+    }
+
+    &--error {
+        border-color: #BB2A33;
+
+        &:focus-within
+        {
+            border-color: #BB2A33;
+        }    
+    }
+}
+
+.sb-text-input__input {
+    outline: none;
+    border: none;
+    width: 100%;
+
+    &::placeholder {
+        transition: opacity 0.2s linear;
+        opacity: 0;
+    }
+
+    &:focus {
+        &::placeholder {
+            opacity: 0.4;
+        }
+    }
+
+    &--disabled {
+        background-color: #F7F7F7;
+    }
+}
+
+.sb-text-input__label {
+    position: absolute;
+
+    font-size: 0.875rem;
+    line-height: $label_size;
+    color: #7A7A7A;
+    text-transform: capitalize;
+
+    transition: font-size 0.2s linear, transform 0.2s linear;
+
+    &--disabled {
+        color: #999999;
+    }
+
+    &:has(+ :not(input:placeholder-shown)) {
+        font-size: $label_font_size;
+        transform: translateY(-$label_size);
+    }
+}
+
+.sb-text-input__hint {
+    font-family: $font-primary-regular;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: #999999;
+    margin: 0;
+
+    &--error {
+        color: #BB2A33;
+    } 
+}

styles/components/index.scss

@@ -44,3 +44,4 @@
 @import "agency-people-card";
 @import "agency-news-card";
 @import "agency-profile-contact";
+@import "text-input";