pixel-priya 0.0.1

package/src/components/NLPInput/NLPInput.scss

@@ -0,0 +1,302 @@
+@use '../../assets/styles/fonts';
+
+@mixin transition-all($time: 0.3s) {
+  transition: opacity $time ease-out, transform $time ease-out,
+    font-size $time ease-out, padding $time ease-out;
+}
+
+@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+@mixin opacity-style($opacity: 1, $color: null, $border-color-arg: null) {
+  opacity: $opacity;
+  @if $color {
+    color: var(--nlp-input-placeholder-color);
+  }
+  @if $border-color-arg {
+    border-color: var(--nlp-border-color);
+  }
+}
+
+.ff-nlp-input-wrapper {
+  position: relative;
+
+  .ff-nlp-input {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    min-height: 32px;
+    min-width: 482px;
+    display: flex;
+    align-items: end;
+    position: relative;
+    &-fieldset {
+      margin: 0;
+      padding: 25px 0px 0px 8px;
+      border: 1px solid transparent;
+      box-sizing: border-box;
+      height: 32px;
+      width: 100%;
+      border-radius: 4px;
+      display: block;
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--no-label {
+        padding: 30px 0px 0px 8px;
+      }
+
+      &--default {
+        @include opacity-style(0, null, var(--ff-nlp-input-border-color));
+      }
+
+      &--active {
+        @include opacity-style(1, null, var(--ff-nlp-input-brand-color));
+      }
+
+      &--option {
+        opacity: 1;
+      }
+
+      &--no-border {
+        border-color: transparent;
+      }
+
+      &--error {
+        border-color: var(--error-light);
+      }
+
+      .ff-nlp-input-legend {
+        @extend .font-size-8;
+        padding: 0 2px;
+        letter-spacing: 0.5px;
+        &--default {
+          @include transition-all(0.3s);
+          opacity: 0;
+        }
+
+        &--active {
+          @include transition-all(0.25s);
+          @include opacity-style(1, var(--ff-nlp-input-brand-color));
+        }
+
+        &--option {
+          @include opacity-style(1, var(--ff-nlp-input-default-color));
+        }
+
+        &--error {
+          color: var(--error-light);
+        }
+
+        &--required {
+          margin-right: 2px;
+        }
+      }
+    }
+
+    &-container {
+      @include absolute-position(6px, auto, auto, auto);
+      width: calc(100% - 38px);
+      height: 32px;
+      padding: 0 28px 0 8px;
+      border-radius: 4px;
+      border: 1px solid transparent;
+      z-index: 100;
+      background: transparent;
+      outline: none;
+      color: var(--ff-nlp-input-text-color);
+      text-indent: 22px;
+
+      &:hover {
+        ~ .ff-nlp-input-label {
+          color: var(--nlp-input-placeholder-color);
+          padding-left: 26px;
+        }
+      }
+
+      &--border-radius {
+        border-radius: 0px 4px 4px 0px;
+      }
+
+      &--default {
+        @include opacity-style(1, null, var(--ff-nlp-input-border-color));
+
+        &:hover {
+          border-color: var(--nlp-input-placeholder-color);
+
+          ~ .ff-nlp-input-fieldset--option {
+            border-color: var(--ff-nlp-input-text-color);
+
+            .ff-nlp-input-legend--option {
+              color: var(--ff-nlp-input-text-color);
+            }
+          }
+        }
+      }
+
+      &--no-label {
+        min-height: calc(100% - 2px);
+        margin-top: 0px;
+        top: 0px;
+      }
+
+      &--active {
+        border-color: transparent;
+
+        &:hover {
+          border-color: transparent;
+        }
+      }
+
+      &--no-border {
+        border: none;
+        border-color: transparent;
+
+        &:hover {
+          border-color: transparent;
+
+          ~ .ff-nlp-input-fieldset--no-border {
+            border-color: transparent;
+          }
+        }
+      }
+
+      &--disable {
+        border-color: var(--ff-nlp-input-border-color);
+
+        &:hover {
+          border-color: var(--ff-nlp-input-border-color);
+
+          ~ .ff-nlp-input-label--default {
+            color: var(--ff-nlp-input-default-color);
+          }
+        }
+      }
+
+      &--error {
+        border-color: var(--error-light);
+
+        &:hover {
+          border-color: var(--error-light);
+        }
+      }
+    }
+
+    &-label {
+      @include absolute-position(13px, auto, auto, 8px);
+      z-index: 1;
+      font-size: 12px;
+      top: 60%;
+      padding-left: 8px;
+
+      &--default {
+        @include transition-all;
+        @include opacity-style(1, var(--ff-nlp-input-default-color));
+
+        transform: translateY(-50%);
+      }
+
+      &--active {
+        @include transition-all;
+        opacity: 0;
+        transform: translateY(-150%);
+        padding: 0 6px;
+      }
+
+      &--required {
+        margin-right: 2px;
+      }
+    }
+
+    &-arrow {
+      position: absolute;
+      top: 60%;
+      height: 100%;
+      right: 10px;
+      transform: rotateX(0deg) translateY(-50%);
+      cursor: pointer;
+
+      &--no-label {
+        top: 50%;
+      }
+    }
+  }
+
+  &-error-text {
+    @include absolute-position(auto, auto, -14px, 12px);
+    white-space: nowrap;
+  }
+  .ff-nlp-input-label {
+    display: flex;
+    align-items: center;
+    padding-left: 26px;
+    gap: 4px;
+  }
+  .ff-nlp-help_icon {
+    position: absolute;
+    bottom: 2px;
+    left: 8px;
+    width: 30px;
+    height: 30px;
+    z-index: 100;
+    cursor: pointer;
+  }
+}
+.ff-nlp-input-arrow {
+  z-index: 111;
+}
+.icon-container {
+  position: relative;
+  display: inline-block;
+}
+
+.icon-label {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-55%);
+  transform: translateY(-145%);
+  margin-bottom: 5px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+
+.icon-container:hover .icon-label {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}
+
+.help-icon-label {
+  position: absolute;
+  bottom: 80%;
+  left: 96%;
+  transform: translateX(-50%);
+  margin-bottom: 5px;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
+  background-color: var(--tooltip-bg-color);
+  color: var(--tooltip-text-color);
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+.help-icon-container:hover .help-icon-label {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0s;
+}

package/src/components/NLPInput/NlpInput.stories.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import NlpInput from './NlpInput';
+import { nlpList } from './sampleData';
+
+const meta: Meta<typeof NlpInput> = {
+  title: 'Components/NlpInput',
+  component: NlpInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof NlpInput>;
+
+// Refactor primaryNlp to utilize args for control panel
+export const PrimaryNlp: Story = {
+  args: {
+    label: 'Search NLP',
+    leftIcon: 'ai_search',
+    rightIcon: 'help_icon',
+    rightIconColor: 'var(--nlp-color)',
+    containerWidth: '1000px',
+    value: '',
+    optionsList: nlpList,
+  },
+  render: (args) => {
+    const [inputValue, setInputValue] = useState(args.value);
+    const [optionList, setOptionList] = useState(args.optionsList);
+
+    const handleChange = (e) => {
+      setInputValue(e.target.value);
+      setOptionList(nlpList);
+    };
+
+    const handleSelect = (e) => {
+      setInputValue(e.displayName);
+    };
+
+    return (
+      <NlpInput
+        {...args}
+        value={inputValue}
+        onChange={handleChange}
+        onSelect={handleSelect}
+        optionsList={optionList}
+        webServiceClick={() => {
+          alert('webServiceClick!');
+        }}
+        onHelpIconClick={() => {
+          alert('Help icon clicked!!');
+        }}
+        aiIconClick={() => {
+          alert('aiIconClick!');
+        }}
+      />
+    );
+  },
+};
+
+export const Disable: Story = {
+  args: {
+    label: 'NLP Input',
+    optionsList: [],
+    disabled: true,
+  },
+};
+
+export default meta;