Merge pull request #130 from Infineon/127-text-input

127 text input
Infineon · May 24, 2023 · a3e043a · a3e043a
2 parents c2717ff + bcc744e
commit a3e043a
Show file tree

Hide file tree

Showing 7 changed files with 263 additions and 6 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -201,6 +201,13 @@ export namespace Components {
     interface IfxTag {
         "text": string;
     }
+    interface IfxTextInput {
+        "disabled": boolean;
+        "error": boolean;
+        "errorMessage": string;
+        "placeholder": string;
+        "success": boolean;
+    }
     interface IfxToggle {
         "checked": boolean;
     }
@@ -469,6 +476,12 @@ declare global {
         prototype: HTMLIfxTagElement;
         new (): HTMLIfxTagElement;
     };
+    interface HTMLIfxTextInputElement extends Components.IfxTextInput, HTMLStencilElement {
+    }
+    var HTMLIfxTextInputElement: {
+        prototype: HTMLIfxTextInputElement;
+        new (): HTMLIfxTextInputElement;
+    };
     interface HTMLIfxToggleElement extends Components.IfxToggle, HTMLStencilElement {
     }
     var HTMLIfxToggleElement: {
@@ -520,6 +533,7 @@ declare global {
         "ifx-tab": HTMLIfxTabElement;
         "ifx-tabs": HTMLIfxTabsElement;
         "ifx-tag": HTMLIfxTagElement;
+        "ifx-text-input": HTMLIfxTextInputElement;
         "ifx-toggle": HTMLIfxToggleElement;
         "infineon-icon-stencil": HTMLInfineonIconStencilElement;
     }
@@ -724,6 +738,13 @@ declare namespace LocalJSX {
     interface IfxTag {
         "text"?: string;
     }
+    interface IfxTextInput {
+        "disabled"?: boolean;
+        "error"?: boolean;
+        "errorMessage"?: string;
+        "placeholder"?: string;
+        "success"?: boolean;
+    }
     interface IfxToggle {
         "checked"?: boolean;
         "onValueChanged"?: (event: IfxToggleCustomEvent<boolean>) => void;
@@ -770,6 +791,7 @@ declare namespace LocalJSX {
         "ifx-tab": IfxTab;
         "ifx-tabs": IfxTabs;
         "ifx-tag": IfxTag;
+        "ifx-text-input": IfxTextInput;
         "ifx-toggle": IfxToggle;
         "infineon-icon-stencil": InfineonIconStencil;
     }
@@ -816,6 +838,7 @@ declare module "@stencil/core" {
             "ifx-tab": LocalJSX.IfxTab & JSXBase.HTMLAttributes<HTMLIfxTabElement>;
             "ifx-tabs": LocalJSX.IfxTabs & JSXBase.HTMLAttributes<HTMLIfxTabsElement>;
             "ifx-tag": LocalJSX.IfxTag & JSXBase.HTMLAttributes<HTMLIfxTagElement>;
+            "ifx-text-input": LocalJSX.IfxTextInput & JSXBase.HTMLAttributes<HTMLIfxTextInputElement>;
             "ifx-toggle": LocalJSX.IfxToggle & JSXBase.HTMLAttributes<HTMLIfxToggleElement>;
             "infineon-icon-stencil": LocalJSX.InfineonIconStencil & JSXBase.HTMLAttributes<HTMLInfineonIconStencilElement>;
         }

diff --git a/src/components/text-input/readme.md b/src/components/text-input/readme.md
@@ -0,0 +1,21 @@
+# ifx-text-input
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property       | Attribute       | Description | Type      | Default         |
+| -------------- | --------------- | ----------- | --------- | --------------- |
+| `disabled`     | `disabled`      |             | `boolean` | `false`         |
+| `error`        | `error`         |             | `boolean` | `false`         |
+| `errorMessage` | `error-message` |             | `string`  | `""`            |
+| `placeholder`  | `placeholder`   |             | `string`  | `"Placeholder"` |
+| `success`      | `success`       |             | `boolean` | `false`         |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/src/components/text-input/text-input.scss b/src/components/text-input/text-input.scss
@@ -0,0 +1,152 @@
+@use "../../../node_modules/@infineon/design-system-tokens/dist/tokens";
+
+.textInput__container { 
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+
+  //width: 588px;
+  height: 64px;
+
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+
+  &.disabled { 
+    & .textInput__top-wrapper { 
+      & label { 
+        color: #BFBBBB;
+      }
+    }
+
+    & .textInput__bottom-wrapper { 
+      input { 
+        border: 1px solid #BFBBBB;
+
+        &::placeholder { 
+          color: #BFBBBB;
+        }
+      }
+    }
+
+  }
+
+  & .textInput__top-wrapper { 
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 4px;
+
+    flex: none;
+    order: 0;
+    align-self: stretch;
+    flex-grow: 0;
+
+    & label { 
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 24px;
+
+      display: flex;
+      align-items: center;
+
+      color: tokens.$color-text-black;
+
+      flex: none;
+      order: 0;
+      flex-grow: 0;
+    }
+  }
+
+  & .textInput__bottom-wrapper { 
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 4px;
+
+    flex: none;
+    order: 1;
+    align-self: stretch;
+    flex-grow: 0;
+
+    & input { 
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 8px 16px;
+      gap: 6px;
+
+      height: 40px;
+
+      background-color: tokens.$color-text-white;
+      color: #1D1D1D;
+
+      border: 1px solid #8D8786;
+      border-radius: 1px;
+
+      flex: none;
+      order: 0;
+      align-self: stretch;
+      flex-grow: 0;
+
+      &.error { 
+        border: 1px solid #CD002F;
+        &:focus { 
+          outline: none;
+        }
+      }
+
+      &.success { 
+        border: 1px solid #4CA460;
+        &:focus { 
+          outline: none;
+        }
+      }
+
+
+      &:focus:not(.error, .success) { 
+        outline: none;
+        border: 1px solid #0A8276;
+      }
+
+      &:hover:not(:disabled, .error, .success) { 
+        border: 1px solid #3C3A39;
+      }
+
+      &::placeholder { 
+        font-style: normal;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 24px;
+
+        color: #8D8786;
+
+        flex: none;
+        order: 1;
+        flex-grow: 1;
+      }
+    }
+
+    & .textInput__bottom-wrapper-error { 
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+
+      letter-spacing: 0.2px;
+
+      color: #CD002F;
+
+      flex: none;
+      order: 1;
+      align-self: stretch;
+      flex-grow: 0;
+    }
+  }
+}
diff --git a/src/components/text-input/text-input.stories.ts b/src/components/text-input/text-input.stories.ts
@@ -0,0 +1,23 @@
+export default {
+  title: "Components/TextInput",
+  args: {
+    error: false,
+    disabled: false,
+    success: false,
+    placeholder: 'Placeholder',
+    errorMessage: "",
+  },
+
+  argTypes: {
+
+  },
+};
+
+
+const DefaultTemplate = (args) =>
+  `<ifx-text-input disabled="${args.disabled}" error="${args.error}" success="${args.success}" error-message="${args.errorMessage}">Text field</ifx-text-input>`;
+
+
+export const Default = DefaultTemplate.bind({});
+
+
diff --git a/src/components/text-input/text-input.tsx b/src/components/text-input/text-input.tsx
@@ -0,0 +1,40 @@
+import { Component, h, Element, Prop } from '@stencil/core';
+
+@Component({
+  tag: 'ifx-text-input',
+  styleUrl: '../../index.scss', 
+  shadow: true
+})
+
+export class TextInput {
+  @Element() el;
+  @Prop() placeholder: string = "Placeholder"
+  @Prop() error: boolean = false;
+  @Prop() errorMessage: string = "";
+  @Prop() success: boolean = false;
+  @Prop() disabled: boolean = false;
+
+  render() {
+    return (
+      <div class={`textInput__container ${this.disabled ? 'disabled' : ""}`}>
+        <div class="textInput__top-wrapper">
+          <label htmlFor="text-field">
+            <slot />
+          </label>
+        </div>
+        <div class="textInput__bottom-wrapper">
+          <input 
+          disabled={this.disabled}
+          type="text" 
+          id='text-field' 
+          placeholder={this.placeholder} 
+          class={`${this.error ? 'error' : ""} ${this.success ? "success" : ""}`}/>
+          {this.error && 
+            <div class="textInput__bottom-wrapper-error">
+            {this.errorMessage}
+          </div>}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/index.html b/src/index.html
@@ -30,12 +30,7 @@
 
 <body>
 
-  <ifx-sidebar>
-    <ifx-sidebar-item icon="calendar-16">Item One</ifx-sidebar-item>
-    <ifx-sidebar-item>Item Two</ifx-sidebar-item>
-    <ifx-sidebar-item>Item Three</ifx-sidebar-item>
-    <ifx-sidebar-item>Item Four</ifx-sidebar-item>
-  </ifx-sidebar>
+  <ifx-text-input disabled="false" error="false" success="false" error-message="Caption text, description, error notification">Text field</ifx-text-input>
 
 </body>
 

diff --git a/src/index.scss b/src/index.scss
@@ -19,8 +19,11 @@
 @import './components/list-group/list-group-notification';
 @import './components/number-indicator/number-indicator';
 
+@import './components/text-input/text-input';
+
 @import './components/sidebar/sidebar';
 @import './components/sidebar/sidebar-item';
 
+
 @import './components/checkbox/checkbox';