pixel-react 1.7.9 → 1.8.1

package/src/components/ScriptSwitchButton/ScriptSwitchButton.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import ScriptSwitchButton from './ScriptSwitchButton';
+
+const meta: Meta<typeof ScriptSwitchButton> = {
+  title: 'Components/ScriptSwitchButton',
+  component: ScriptSwitchButton,
+  tags: ['autodocs'],
+  argTypes: {
+    selected: {
+      control: { type: 'radio' },
+      options: ['Automation', 'Manual'],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ScriptSwitchButton>;
+
+export const Default: Story = {
+  args: {
+    selected: 'Automation',
+    tabList: ['Automation', 'Manual'],
+    handleClick: () => {},
+  },
+};
+
+export const Switch: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string>('Automation');
+    const handleChange = (selectedSwitch: string) => {
+      if (selectedSwitch.includes('Automation')) {
+        !selectedSwitch.includes('Add') && setSelected(selectedSwitch);
+      } else {
+        !selectedSwitch.includes('Add') && setSelected(selectedSwitch);
+      }
+    };
+
+    return (
+      <ScriptSwitchButton
+        selected={selected}
+        tabList={['Automation', 'Manual']}
+        handleClick={handleChange}
+      />
+    );
+  },
+};

package/src/components/ScriptSwitchButton/ScriptSwitchButton.tsx

@@ -0,0 +1,65 @@
+import React, { type JSX } from 'react';
+import './ScriptSwitchButton.scss';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+
+interface ScriptSwitchButtonProps {
+  handleClick: (selected: string) => void;
+  selected: string;
+  tabList: Array<'Automation' | 'Manual'>;
+}
+
+const ScriptSwitchButton: React.FC<ScriptSwitchButtonProps> = ({
+  selected = 'text',
+  handleClick,
+  tabList, //  ['Automation' , 'Manual']
+}): JSX.Element => {
+  const isAutomation = tabList?.includes('Automation');
+  const isManual = tabList?.includes('Manual');
+
+  return (
+    <div className="ff-script-switch-container">
+      <Tooltip
+        title={isAutomation ? 'Automation' : 'Add Automation'}
+        zIndex={1000}
+      >
+        <div
+          className={`ff-script-switch-button ${
+            selected === 'Automation' ? 'active' : ''
+          }`}
+          onClick={() =>
+            handleClick(isAutomation ? 'Automation' : 'Add Automation')
+          }
+        >
+          <Icon
+            name={isAutomation ? 'automation_testcase' : 'add_testcase'}
+            color={
+              selected === 'Automation'
+                ? 'var(--primary-button-text-color)'
+                : 'var(--description-text)'
+            }
+          />
+        </div>
+      </Tooltip>
+      <Tooltip title={isManual ? 'Manual' : 'Add Manual'} zIndex={1000}>
+        <div
+          className={`ff-script-switch-button ${
+            selected === 'Manual' ? 'active' : ''
+          }`}
+          onClick={() => handleClick(isManual ? 'Manual' : 'Add Manual')}
+        >
+          <Icon
+            name={isManual ? 'manual_testcase' : 'add_testcase'}
+            color={
+              selected === 'Manual'
+                ? 'var(--primary-button-text-color)'
+                : 'var(--description-text)'
+            }
+          />
+        </div>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default ScriptSwitchButton;

package/src/components/ScriptSwitchButton/index.ts

@@ -0,0 +1 @@
+export { default } from './ScriptSwitchButton';

package/src/components/Search/Search.scss

@@ -1,104 +1,104 @@
-@use '../../assets/styles/fonts';
-
-.ff-search-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .ff-search-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 4px;
-
-    &:hover {
-      background-color: var(--ff-search-field-hover-color);
-    }
-
-    .ff-icon-container {
-      svg {
-        path {
-          fill: var(--brand-color);
-        }
-      }
-    }
-  }
-
-  .ff-search-input {
-    @extend .fontXs;
-    border: none;
-    color: var(--tooltip-bg-color);
-    line-height: 12px;
-    visibility: hidden;
-    transition: width 0.4s ease;
-
-    &:focus {
-      outline: none;
-      border: none;
-    }
-
-    &:hover {
-      border: none;
-    }
-  }
-
-  &.disabled {
-    opacity: 0.5;
-  }
-
-  &.expanded {
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--ff-search-filed-bg-color);
-
-    .ff-search-icon {
-      &:hover {
-        background-color: var(--ff-search-filed-bg-color);
-      }
-    }
-
-    .ff-vertical-line {
-      height: 8px;
-      width: 1px;
-      border-radius: 1px;
-      background-color: var(--border-color);
-    }
-
-    .ff-search-input {
-      visibility: visible;
-      margin-left: 4px;
-
-      &::placeholder {
-        color: var(--ff-search-filed-placeholder-text);
-      }
-    }
-
-    .ff-search-icon {
-      border: none;
-      cursor: default;
-      margin-right: 4px;
-    }
-
-    .ff-search-clear-button {
-      display: grid;
-      place-items: center;
-      cursor: pointer;
-      width: 22px;
-      padding-top: 1px;
-    }
-
-    .ff-search-close-icon {
-      margin: 4px;
-      cursor: pointer;
-
-      .ff-icon-container {
-        svg {
-          path {
-            fill: var(--ff-search-filed-close-Icon);
-          }
-        }
-      }
-    }
-  }
+@use '../../assets/styles/fonts';
+
+.ff-search-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .ff-search-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--ff-search-field-hover-color);
+    }
+
+    .ff-icon-container {
+      svg {
+        path {
+          fill: var(--brand-color);
+        }
+      }
+    }
+  }
+
+  .ff-search-input {
+    @extend .fontXs;
+    border: none;
+    color: var(--tooltip-bg-color);
+    line-height: 12px;
+    visibility: hidden;
+    transition: width 0.4s ease;
+
+    &:focus {
+      outline: none;
+      border: none;
+    }
+
+    &:hover {
+      border: none;
+    }
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
+
+  &.expanded {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--ff-search-filed-bg-color);
+
+    .ff-search-icon {
+      &:hover {
+        background-color: var(--ff-search-filed-bg-color);
+      }
+    }
+
+    .ff-vertical-line {
+      height: 8px;
+      width: 1px;
+      border-radius: 1px;
+      background-color: var(--border-color);
+    }
+
+    .ff-search-input {
+      visibility: visible;
+      margin-left: 4px;
+
+      &::placeholder {
+        color: var(--ff-search-filed-placeholder-text);
+      }
+    }
+
+    .ff-search-icon {
+      border: none;
+      cursor: default;
+      margin-right: 4px;
+    }
+
+    .ff-search-clear-button {
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      width: 22px;
+      padding-top: 1px;
+    }
+
+    .ff-search-close-icon {
+      margin: 4px;
+      cursor: pointer;
+
+      .ff-icon-container {
+        svg {
+          path {
+            fill: var(--ff-search-filed-close-Icon);
+          }
+        }
+      }
+    }
+  }
 }

package/src/components/Search/Search.stories.tsx

@@ -1,44 +1,44 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Search from './Search';
-import React, { useState } from 'react';
-const meta: Meta<typeof Search> = {
-  title: 'Components/Search',
-  component: Search,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Search>;
-export const Default: Story = {
-  render: () => {
-    const [isExpand, setIsExpand] = useState(false);
-    const [searchValue, setSearchValue] = useState('');
-
-    const handleSearch = (value: string) => {
-      setSearchValue(value);
-    };
-
-    const handleClose = () => {
-      setIsExpand(false);
-      setSearchValue('');
-    };
-    return (
-      <div>
-        <Search
-          placeholder="Search here..."
-          isExpand={isExpand}
-          value={searchValue}
-          onSearch={handleSearch}
-          onExpand={(expand) => setIsExpand(expand)}
-          onClose={handleClose}
-          disabled={false}
-          width={200}
-        />
-      </div>
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Search from './Search';
+import React, { useState } from 'react';
+const meta: Meta<typeof Search> = {
+  title: 'Components/Search',
+  component: Search,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Search>;
+export const Default: Story = {
+  render: () => {
+    const [isExpand, setIsExpand] = useState(false);
+    const [searchValue, setSearchValue] = useState('');
+
+    const handleSearch = (value: string) => {
+      setSearchValue(value);
+    };
+
+    const handleClose = () => {
+      setIsExpand(false);
+      setSearchValue('');
+    };
+    return (
+      <div>
+        <Search
+          placeholder="Search here..."
+          isExpand={isExpand}
+          value={searchValue}
+          onSearch={handleSearch}
+          onExpand={(expand) => setIsExpand(expand)}
+          onClose={handleClose}
+          disabled={false}
+          width={200}
+        />
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/components/Search/Search.tsx

@@ -1,138 +1,138 @@
-import React, { useState, useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import './Search.scss';
-import Icon from '../Icon';
-import { SearchProps } from './types';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import Typography from '../Typography';
-import Tooltip from '../Tooltip';
-
-const Search = ({
-  placeholder = 'Search',
-  onSearch,
-  disabled = false,
-  width = 150,
-  value = '',
-  isExpand = false,
-  onClose,
-  onExpand,
-}: SearchProps) => {
-  const [searchValue, setSearchValue] = useState<string>(value);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (isExpand && inputRef.current) {
-      inputRef.current.focus();
-    }
-    setSearchValue('');
-  }, [isExpand]);
-
-  useEffect(() => {
-    setSearchValue(value);
-  }, [value]);
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !checkEmpty(searchValue)) {
-      onSearch(searchValue.trim());
-    } else if (event?.key === 'Escape') {
-      handleSearchClearAndClose('Close');
-    }
-  };
-
-  const handleSearchClearAndClose = (label: string) => {
-    setSearchValue('');
-    onSearch('');
-    if (label === 'Close') {
-      onClose?.();
-    }
-    if (label === 'Clear' && isExpand && inputRef.current) {
-      inputRef.current.focus();
-    }
-  };
-
-  const handleIconClick = () => {
-    if (!disabled) {
-      onExpand?.(!isExpand);
-    }
-  };
-  const handleChange = (data: string) => {
-    setSearchValue(data);
-    if (data === '') {
-      onSearch('');
-    }
-  };
-
-  return (
-    <div
-      className={classNames('ff-search-container', {
-        expanded: isExpand,
-        disabled: disabled,
-      })}
-    >
-      <div
-        className={classNames('ff-search-icon', { expanded: isExpand })}
-        onClick={handleIconClick}
-      >
-        <Tooltip title="Search">
-          <Icon
-            name="search"
-            height={isExpand ? 14 : 16}
-            width={isExpand ? 14 : 16}
-          />
-        </Tooltip>
-      </div>
-      <div
-        className={classNames('ff-vertical-line', {
-          expanded: isExpand,
-        })}
-      ></div>
-      <input
-        className="ff-search-input"
-        name="input"
-        style={{ width: isExpand ? `${width}px` : '0px' }}
-        placeholder={placeholder}
-        type="text"
-        value={searchValue}
-        disabled={disabled}
-        ref={inputRef}
-        autoComplete="off"
-        onChange={(e) => {
-          handleChange(e.target.value);
-        }}
-        onKeyDown={handleKeyDown}
-      />
-
-      {isExpand && (
-        <>
-          <div
-            className="ff-search-clear-button"
-            onClick={() => handleSearchClearAndClose('Clear')}
-          >
-            {searchValue !== '' && (
-              <Typography
-                children={'Clear'}
-                fontSize={8}
-                color={'var(--ff-search-filed-clear-text)'}
-              />
-            )}
-          </div>
-          <Tooltip title="Close">
-            <div className="ff-search-close-icon">
-              <Icon
-                height={6}
-                width={6}
-                name="close"
-                hoverEffect={true}
-                onClick={() => {
-                  handleSearchClearAndClose('Close');
-                }}
-              />
-            </div>
-          </Tooltip>
-        </>
-      )}
-    </div>
-  );
-};
-
-export default Search;
+import React, { useState, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import './Search.scss';
+import Icon from '../Icon';
+import { SearchProps } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Typography from '../Typography';
+import Tooltip from '../Tooltip';
+
+const Search = ({
+  placeholder = 'Search',
+  onSearch,
+  disabled = false,
+  width = 150,
+  value = '',
+  isExpand = false,
+  onClose,
+  onExpand,
+}: SearchProps) => {
+  const [searchValue, setSearchValue] = useState<string>(value);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isExpand && inputRef.current) {
+      inputRef.current.focus();
+    }
+    setSearchValue('');
+  }, [isExpand]);
+
+  useEffect(() => {
+    setSearchValue(value);
+  }, [value]);
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' && !checkEmpty(searchValue)) {
+      onSearch(searchValue.trim());
+    } else if (event?.key === 'Escape') {
+      handleSearchClearAndClose('Close');
+    }
+  };
+
+  const handleSearchClearAndClose = (label: string) => {
+    setSearchValue('');
+    onSearch('');
+    if (label === 'Close') {
+      onClose?.();
+    }
+    if (label === 'Clear' && isExpand && inputRef.current) {
+      inputRef.current.focus();
+    }
+  };
+
+  const handleIconClick = () => {
+    if (!disabled) {
+      onExpand?.(!isExpand);
+    }
+  };
+  const handleChange = (data: string) => {
+    setSearchValue(data);
+    if (data === '') {
+      onSearch('');
+    }
+  };
+
+  return (
+    <div
+      className={classNames('ff-search-container', {
+        expanded: isExpand,
+        disabled: disabled,
+      })}
+    >
+      <div
+        className={classNames('ff-search-icon', { expanded: isExpand })}
+        onClick={handleIconClick}
+      >
+        <Tooltip title="Search">
+          <Icon
+            name="search"
+            height={isExpand ? 14 : 16}
+            width={isExpand ? 14 : 16}
+          />
+        </Tooltip>
+      </div>
+      <div
+        className={classNames('ff-vertical-line', {
+          expanded: isExpand,
+        })}
+      ></div>
+      <input
+        className="ff-search-input"
+        name="input"
+        style={{ width: isExpand ? `${width}px` : '0px' }}
+        placeholder={placeholder}
+        type="text"
+        value={searchValue}
+        disabled={disabled}
+        ref={inputRef}
+        autoComplete="off"
+        onChange={(e) => {
+          handleChange(e.target.value);
+        }}
+        onKeyDown={handleKeyDown}
+      />
+
+      {isExpand && (
+        <>
+          <div
+            className="ff-search-clear-button"
+            onClick={() => handleSearchClearAndClose('Clear')}
+          >
+            {searchValue !== '' && (
+              <Typography
+                children={'Clear'}
+                fontSize={8}
+                color={'var(--ff-search-filed-clear-text)'}
+              />
+            )}
+          </div>
+          <Tooltip title="Close">
+            <div className="ff-search-close-icon">
+              <Icon
+                height={6}
+                width={6}
+                name="close"
+                hoverEffect={true}
+                onClick={() => {
+                  handleSearchClearAndClose('Close');
+                }}
+              />
+            </div>
+          </Tooltip>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default Search;