pixel-react 1.1.3 → 1.1.5

package/src/components/Tabs/Tabs.stories.tsx

@@ -39,15 +39,15 @@ const TabContentFour = () => (
   </div>
 );
 
+const tabsData = [
+  { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
+  { id: 'tab-2', label: 'Tab--2', component: <TabContentTwo /> },
+  { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
+];
+
 export const DefaultTabs: Story = {
   render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('0');
-
-    const tabsData = [
-      { label: 'Tab--1', component: <TabContentOne /> },
-      { label: 'Tab--2', component: <TabContentTwo /> },
-      { label: 'Tab--3', component: <TabContentThree /> },
-    ];
+    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
 
     return (
       <Tabs
@@ -60,14 +60,14 @@ export const DefaultTabs: Story = {
 };
 export const CapsuleTabs: Story = {
   render: () => {
-    const [activeTabIdCapsule, setActiveTabIdCapsule] = useState<string>('0');
+    const [activeTabIdCapsule, setActiveTabIdCapsule] = useState<string>('tab-1');
 
     const tabsDataForCapsule = [
-      { label: 'Loremipsum_1', component: <TabContentOne /> },
-      { label: 'Loremipsum_2', component: <TabContentTwo /> },
-      { label: 'Loremipsum_3', component: <TabContentThree /> },
-      { label: 'Loremipsum_4', component: <TabContentFour /> },
-      { label: 'Loremipsum_5', component: <TabContentFour /> },
+      { id: 'tab-1', label: 'Loremipsum_1', component: <TabContentOne /> },
+      { id: 'tab-2', label: 'Loremipsum_2', component: <TabContentTwo /> },
+      { id: 'tab-3', label: 'Loremipsum_3', component: <TabContentThree /> },
+      { id: 'tab-4', label: 'Loremipsum_4', component: <TabContentFour /> },
+      { id: 'tab-5', label: 'Loremipsum_5', component: <TabContentFour /> },
     ];
 
     return (
@@ -83,12 +83,17 @@ export const CapsuleTabs: Story = {
 
 export const TabsWithDisabledTab: Story = {
   render: () => {
-    const [activeTabId, setActiveTabId] = useState<string>('0');
+    const [activeTabId, setActiveTabId] = useState<string>('tab-1');
 
     const tabsDataWithOneDisableAttribute = [
-      { label: 'Tab--1', component: <TabContentOne /> },
-      { label: 'Tab--2', component: <TabContentTwo />, disabled: true },
-      { label: 'Tab--3', component: <TabContentThree /> },
+      { id: 'tab-1', label: 'Tab--1', component: <TabContentOne /> },
+      {
+        id: 'tab-2',
+        label: 'Tab--2',
+        component: <TabContentTwo />,
+        disabled: true,
+      },
+      { id: 'tab-3', label: 'Tab--3', component: <TabContentThree /> },
     ];
 
     return (
@@ -103,13 +108,7 @@ export const TabsWithDisabledTab: Story = {
 
 export const WithoutBorder: Story = {
   render: () => {
-    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('0');
-
-    const tabsData = [
-      { label: 'Tab--1', component: <TabContentOne /> },
-      { label: 'Tab--2', component: <TabContentTwo /> },
-      { label: 'Tab--3', component: <TabContentThree /> },
-    ];
+    const [activeTabIdDefault, setActiveTabIdDefault] = useState<string>('tab-1');
 
     return (
       <div style={{ display: 'flex', gap: '10px' }}>
@@ -132,4 +131,4 @@ export const WithoutBorder: Story = {
   },
 };
 
-export default meta;
+export default meta;

package/src/components/Tabs/Tabs.tsx

@@ -11,13 +11,6 @@ const Tabs = ({
   onTabClick,
   noBorder = false,
 }: TabsProps) => {
-  const tabs = tabsData.map((tab, index) => ({
-    id: index.toString(),
-    label: tab.label,
-    component: tab.component,
-    disabled: tab.disabled,
-  }));
-
   return (
     <div className={`ff-tabs-container`}>
       <div
@@ -25,7 +18,7 @@ const Tabs = ({
           'ff-tab-row--no-border': noBorder,
         })}
       >
-        {tabs.map((tab) => (
+        {tabsData.map((tab) => (
           <button
             key={tab.id}
             onClick={() => !tab.disabled && onTabClick(tab.id)}
@@ -60,10 +53,10 @@ const Tabs = ({
         ))}
       </div>
       <div className={`ff-tab-content`}>
-        {tabs.find((tab) => tab.id === activeTabId)?.component}
+        {tabsData.find((tab) => tab.id === activeTabId)?.component}
       </div>
     </div>
   );
 };
 
-export default Tabs;
+export default Tabs;

package/src/components/Tabs/types.ts

@@ -21,7 +21,12 @@ export interface TabsProps {
   /**
    * An array of tab objects containing label, component, and optional disabled status.
    */
-  tabsData: { label: string; component?: JSX.Element; disabled?: boolean }[];
+  tabsData: {
+    id: string;
+    label: string;
+    component?: JSX.Element;
+    disabled?: boolean;
+  }[];
   /**
    * Defines the styling variant of the tabs.
    */
@@ -40,3 +45,4 @@ export interface TabsProps {
    */
   noBorder?: boolean;
 }
+

package/src/index.ts

@@ -46,6 +46,8 @@ import Paper from './components/Paper';
 import DashboardDonutChart from './components/Charts/DashboardDonutChart';
 import Recaptcha from './components/FF_Captcha/Recaptcha';
 import NLPInput from './components/NLPInput';
+import MachineInputField from './components/MachineInputField';
+import SequentialConnectingBranch from './components/SequentialConnectingBranch';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -119,6 +121,9 @@ export {
   Paper,
   Recaptcha,
   NLPInput,
+  MachineInputField,
+  SequentialConnectingBranch,
+
   // utils exports
   checkEmpty,
   getExtension,

package/lib/index.css

@@ -1,404 +0,0 @@
-.button {
-  background-color: #71347b;
-}
-.ff-icon-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.ff-icon-click {
-  cursor: pointer;
-  padding: 5px;
-  box-sizing: content-box;
-}
-.ff-icon-click:hover {
-  border-radius: 50%;
-  background-color: #ffffff;
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2509803922);
-}
-.ff-icon-click:hover > svg {
-  color: #71347b;
-}
-
-.ff-icon-disabled {
-  cursor: no-drop;
-}
-.ff-icon-disabled > svg {
-  color: #cfd1e2;
-}
-.ff-icon-disabled:hover {
-  box-shadow: none;
-}
-.ff-icon-disabled:hover > svg {
-  color: #cfd1e2;
-}
-@font-face {
-  font-family: "Montserrat-Medium", sans-serif;
-  src: local("Montserrat-Medium"), url(../../fonts/Montserrat/Montserrat-Medium.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Montserrat-SemiBold", sans-serif;
-  src: local("Montserrat-SemiBold"), url(../../fonts/Montserrat/Montserrat-SemiBold.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Poppins-Regular";
-  src: local("Poppins-Regular"), url(../../fonts/Poppins/Poppins-Regular.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Poppins-Medium";
-  src: local("Poppins-Medium"), url(../../fonts/Poppins/Poppins-Medium.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Poppins-SemiBold";
-  src: local("Poppins-SemiBold"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format("truetype");
-}
-@font-face {
-  font-family: "Poppins-Bold";
-  src: local("Poppins-Bold"), url(../../fonts/Poppins/Poppins-Bold.ttf) format("truetype");
-}
-.fontPoppinsRegularXLg {
-  font-family: Poppins-Regular !important;
-  font-size: 18px !important;
-}
-
-.fontPoppinsRegularLg {
-  font-family: Poppins-Regular !important;
-  font-size: 16px !important;
-}
-
-.fontPoppinsRegularMd {
-  font-family: Poppins-Regular !important;
-  font-size: 14px !important;
-}
-
-.fontPoppinsRegularSm {
-  font-family: Poppins-Regular !important;
-  font-size: 12px !important;
-}
-
-.fontPoppinsRegularXs {
-  font-family: Poppins-Regular !important;
-  font-size: 10px !important;
-}
-
-.fontPoppinsRegularXs8px {
-  font-family: Poppins-Regular !important;
-  font-size: 8px !important;
-}
-
-.fontPoppinsRegularXs9px {
-  font-family: Poppins-Regular !important;
-  font-size: 9px !important;
-}
-
-.fontPoppinsMediumPageSubHeader {
-  font-family: Poppins-Medium !important;
-  font-size: 26px !important;
-}
-
-.fontPoppinsMediumXX2 {
-  font-family: Poppins-Medium !important;
-  font-size: 22px !important;
-}
-
-.fontPoppinsMediumXXlg {
-  font-family: Poppins-Medium !important;
-  font-size: 20px !important;
-}
-
-.fontPoppinsMediumXXlg {
-  font-family: Poppins-Medium !important;
-  font-size: 20px !important;
-}
-
-.fontPoppinsMediumLg {
-  font-family: Poppins-Medium !important;
-  font-size: 16px !important;
-}
-
-.fontPoppinsMediumMd {
-  font-family: Poppins-Medium !important;
-  font-size: 14px !important;
-}
-
-.fontPoppinsMediumSm {
-  font-family: Poppins-Medium !important;
-  font-size: 12px !important;
-}
-
-.fontPoppinsMediumSm11 {
-  font-family: Poppins-Medium !important;
-  font-size: 11px !important;
-}
-
-.fontPoppinsMediumXs {
-  font-family: Poppins-Medium !important;
-  font-size: 10px !important;
-}
-
-.fontPoppinsMediumXs8px {
-  font-family: Poppins-Medium !important;
-  font-size: 8px !important;
-}
-
-.fontPoppinsMediumXs8px {
-  font-family: Poppins-Medium !important;
-  font-size: 8px !important;
-}
-
-.fontPoppinsSemibold-size-50 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 50px !important;
-}
-
-.fontPoppinsSemibold-size-42 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 42px !important;
-}
-
-.fontPoppinsSemiboldPageHeader {
-  font-family: Poppins-SemiBold !important;
-  font-size: 36px !important;
-}
-
-.fontPoppinsSemiboldAlertHeader {
-  font-family: Poppins-SemiBold !important;
-  font-size: 32px !important;
-}
-
-.fontPoppinsSemibold-size-28 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 28px !important;
-}
-
-.fontPoppinsSemibold-size-26 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 26px !important;
-}
-
-.fontPoppinsSemiboldPageSubHeader {
-  font-family: Poppins-SemiBold !important;
-  font-size: 24px !important;
-}
-
-.fontPoppinsSemiboldXX2 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 22px !important;
-}
-
-.fontPoppinsSemiboldXXlg {
-  font-family: Poppins-SemiBold !important;
-  font-size: 20px !important;
-}
-
-.fontPoppinsSemiboldXlg {
-  font-family: Poppins-SemiBold !important;
-  font-size: 18px !important;
-}
-
-.fontPoppinsSemiboldLg {
-  font-family: Poppins-SemiBold !important;
-  font-size: 16px !important;
-}
-
-.fontPoppinsSemiboldMd {
-  font-family: Poppins-SemiBold !important;
-  font-size: 14px !important;
-}
-
-.fontPoppinsSemiboldSm {
-  font-family: Poppins-SemiBold !important;
-  font-size: 12px !important;
-}
-
-.fontPoppinsSemiboldSm11 {
-  font-family: Poppins-SemiBold !important;
-  font-size: 11px !important;
-}
-
-.fontPoppinsSemiboldXs {
-  font-family: Poppins-SemiBold !important;
-  font-size: 10px !important;
-}
-
-.fontPoppinsSemiboldXs9px {
-  font-family: Poppins-SemiBold !important;
-  font-size: 9px !important;
-}
-
-.fontPoppinsSemiboldXs8px {
-  font-family: Poppins-Medium !important;
-  font-size: 8px !important;
-}
-
-.fontPoppinsSemiboldXXs {
-  font-family: Poppins-SemiBold !important;
-  font-size: 8px !important;
-}
-
-.fontMontserratMediumXs {
-  font-family: Montserrat-Medium, sans-serif !important;
-  font-size: 10px !important;
-}
-
-.fontMontserratMediumSm {
-  font-family: Montserrat-Medium, sans-serif !important;
-  font-size: 12px !important;
-}
-
-.fontMontserratMediumMd {
-  font-family: Montserrat-Medium, sans-serif !important;
-  font-size: 14px !important;
-}
-
-.fontMontserratSemiboldXs {
-  font-family: Montserrat-SemiBold, sans-serif !important;
-  font-size: 10px !important;
-}
-
-.fontMontserratSemiboldSm {
-  font-family: Montserrat-SemiBold, sans-serif !important;
-  font-size: 12px !important;
-}
-
-.fontMontserratSemiboldMd {
-  font-family: Montserrat-SemiBold, sans-serif !important;
-  font-size: 14px !important;
-}
-
-.fontMontserratSemiboldLg {
-  font-family: Montserrat-SemiBold, sans-serif !important;
-  font-size: 16px !important;
-}
-
-.ff--switch-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.ff--switch-container:disabled {
-  opacity: 0.7;
-  cursor: no-drop;
-}
-.ff--switch-container .ff--switch-checkbox {
-  height: 0;
-  width: 0;
-  display: none;
-}
-.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {
-  left: calc(100% - 19px);
-  right: -1px;
-  border: 1px solid #71347b;
-  background: #ffffff;
-  transition: all 0.3s;
-  box-shadow: 0px 0px 2px 0px #141a60;
-}
-.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-check-symbol {
-  height: 6px;
-  width: 3px;
-  border-bottom: 2px solid #71347b;
-  border-right: 2px solid #71347b;
-  transform: rotate(45deg);
-  border-bottom-right-radius: 2px;
-  animation: checkmark 0.2s forwards;
-  transition: all 0.1s;
-}
-.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {
-  background: #71347b;
-  transition: all 0.3s;
-}
-.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {
-  cursor: default;
-  color: rgba(113, 52, 123, 0.5019607843);
-  background: rgba(113, 52, 123, 0.5019607843);
-}
-.ff--switch-container .ff--switch-checkbox:disabled {
-  cursor: no-drop;
-}
-.ff--switch-container .ff--switch-label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  border-radius: 8px;
-  position: relative;
-  background: #cfd1e2;
-  transition: all 0.3s;
-}
-.ff--switch-container .ff--switch-label--disabled {
-  opacity: 0.5;
-  cursor: no-drop;
-}
-.ff--switch-container .ff--switch-label .ff--switch-button {
-  position: absolute;
-  left: 0;
-  width: 20px;
-  height: 20px;
-  border: 1px solid #cfd1e2;
-  display: flex;
-  background: #ffffff;
-  border-radius: 50%;
-  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2509803922);
-  transition: all 0.3s;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol {
-  width: 8px;
-  height: 8px;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line {
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background-color: #aeb0c0;
-  transition: all 0.3s;
-  animation: crossmark 0.2s forwards;
-}
-.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line:first-child {
-  transform: rotate(45deg);
-}
-.ff--switch-container .ff--switch-label .ff--switch-button .ff-wrong-symbol .ff-cross-line:last-child {
-  transform: rotate(-45deg);
-}
-.ff--switch-container .default {
-  width: 32px;
-  height: 14px;
-}
-@keyframes checkmark {
-  0% {
-    height: 0;
-    width: 0;
-    opacity: 0;
-  }
-  50% {
-    height: 3px;
-    width: 3px;
-    opacity: 1;
-  }
-  100% {
-    height: 6px;
-    width: 3px;
-    opacity: 1;
-  }
-}
-@keyframes crossmark {
-  0% {
-    width: 0;
-    opacity: 0;
-  }
-  50% {
-    width: 50%;
-    opacity: 1;
-  }
-  100% {
-    width: 100%;
-    opacity: 1;
-  }
-}