initial commit of tabs

.eslintrc.json

@@ -18,6 +18,7 @@
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
+    "react/display-name": "off",
     "@typescript-eslint/no-unused-vars": "warn",
     "lines-around-comment": "off",
     "@typescript-eslint/lines-around-comment": [

package.json

@@ -96,9 +96,9 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.5.3",
-    "@types/node": "^20.4.8",
-    "@types/react": "^18.2.18",
-    "@types/react-dom": "^18.2.7",
+    "@types/node": "^20.8.10",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
     "@types/styled-components": "^5.1.26",
     "@types/styled-system": "^5.1.16",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
@@ -127,7 +127,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "storybook": "^7.2.1",
     "storybook-addon-designs": "^7.0.0-beta.2",
-    "typescript": "^5.1.6",
+    "typescript": "^5.2.2",
     "web-vitals": "^3.4.0"
   }
 }

src/components/Breadcrumb/Breadcrumb.tsx

@@ -82,7 +82,7 @@ export const Breadcrumb = ({
     return null;
   });
   return (
-    <nav aria-label={restProps["aria-label"]}>
+    <nav aria-label={restProps['aria-label']}>
       <BreadcrumbWrapper id={componentId} {...restProps}>
         {homeLink && <HomeLinkWrapper>{homeLink}</HomeLinkWrapper>}
         {renderChildren}

src/components/Breadcrumb/index.ts

@@ -1 +1 @@
-export * from './Breadcrumb'
+export * from './Breadcrumb';

src/components/Button/Button.tsx

@@ -34,7 +34,8 @@ const buttonDimensions = {
   },
 };
 
-type ButtonHTMLAttributes = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonHTMLAttributes =
+  React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 /**
  * Button component properties
@@ -234,32 +235,37 @@ const TextButton = styled(ButtonBase)<{ size?: Size }>`
 /**
  * Button component
  */
-export const Button = ({
-  label,
-  startIcon,
-  endIcon,
-  variant = 'filled',
-  size = 'medium',
-  disabled = false,
-  ...restProps
-}: ButtonProps) => {
-  let ButtonComponent;
-  switch (variant) {
-    case 'filled':
-      ButtonComponent = FilledButton;
-      break;
-    case 'outlined':
-      ButtonComponent = OutlinedButton;
-      break;
-    case 'text':
-      ButtonComponent = TextButton;
-      break;
+export const Button = React.forwardRef(
+  (
+    {
+      label,
+      startIcon,
+      endIcon,
+      variant = 'filled',
+      size = 'medium',
+      disabled = false,
+      ...restProps
+    }: ButtonProps,
+    ref: ButtonProps['ref']
+  ) => {
+    let ButtonComponent;
+    switch (variant) {
+      case 'filled':
+        ButtonComponent = FilledButton;
+        break;
+      case 'outlined':
+        ButtonComponent = OutlinedButton;
+        break;
+      case 'text':
+        ButtonComponent = TextButton;
+        break;
+    }
+    return (
+      <ButtonComponent size={size} disabled={disabled} ref={ref} {...restProps}>
+        {startIcon}
+        {label}
+        {endIcon}
+      </ButtonComponent>
+    );
   }
-  return (
-    <ButtonComponent size={size} disabled={disabled} {...restProps}>
-      {startIcon}
-      {label}
-      {endIcon}
-    </ButtonComponent>
-  );
-};
+);

src/components/Input/Input.tsx

@@ -290,54 +290,60 @@ export interface InputProps
 /**
  * Input component
  */
-export const Input = ({
-  id,
-  variant = 'outlined',
-  label,
-  helperText,
-  disabled = false,
-  error = false,
-  readOnly = false,
-  required = false,
-  width,
-  endIcon,
-  ...restProps
-}: InputProps) => {
-  let InputComponent;
-  switch (variant) {
-    case 'filled':
-      InputComponent = FilledInput;
-      break;
-    case 'outlined':
-      InputComponent = OutlinedInput;
-      break;
-  }
+export const Input = React.forwardRef(
+  (
+    {
+      id,
+      variant = 'outlined',
+      label,
+      helperText,
+      disabled = false,
+      error = false,
+      readOnly = false,
+      required = false,
+      width,
+      endIcon,
+      ...restProps
+    }: InputProps,
+    ref: InputProps['ref']
+  ) => {
+    let InputComponent;
+    switch (variant) {
+      case 'filled':
+        InputComponent = FilledInput;
+        break;
+      case 'outlined':
+        InputComponent = OutlinedInput;
+        break;
+    }
 
-  // Use Id form props or create randomized string
-  const componentId = id ?? generateRandomString(5);
+    // Use Id form props or create randomized string
+    const componentId = id ?? generateRandomString(5);
 
-  return (
-    <Wrapper width={width}>
-      <InputWrapper
-        id={componentId}
-        label={label}
-        helperText={helperText}
-        disabled={disabled}
-        error={error}
-        required={required}
-      >
-        <InputComponent
+    return (
+      <Wrapper width={width}>
+        <InputWrapper
+          id={componentId}
+          label={label}
+          helperText={helperText}
           disabled={disabled}
           error={error}
           required={required}
-          readOnly={readOnly}
-          id={`input-${componentId}`}
-          aria-labelledby={label && `label-${componentId}`}
-          aria-describedby={helperText && `helper-${componentId}`}
-          {...restProps}
-        />
-        {endIcon}
-      </InputWrapper>
-    </Wrapper>
-  );
-};
+        >
+          <InputComponent
+            disabled={disabled}
+            error={error}
+            required={required}
+            readOnly={readOnly}
+            id={`input-${componentId}`}
+            aria-labelledby={label && `label-${componentId}`}
+            aria-describedby={helperText && `helper-${componentId}`}
+            ref={ref}
+            {...restProps}
+          />
+          {endIcon}
+        </InputWrapper>
+      </Wrapper>
+    );
+  }
+);

src/components/Popup/Popup.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { withDesign } from 'storybook-addon-designs';
 import { Popup, PopupProps } from './Popup';
-import { height } from 'styled-system';
 import { Button } from '../Button';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export

src/components/Radio/Radio.tsx

@@ -143,7 +143,6 @@ export const Radio = ({
   required = false,
   size = 'large',
   onChange,
-  checked,
   ...restProps
 }: RadioProps) => {
   // Use ID form props or create randomized string

src/components/Sidebar/index.ts

@@ -1 +1 @@
-export * from './Sidebar';
+export * from './Sidebar';

src/components/Tabs/Tab/Tab.stories.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import { withDesign } from 'storybook-addon-designs';
+import { Tab } from './Tab';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Tabs/Tab',
+  component: Tab,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  parameters: {
+    design: [
+      {
+        name: 'light',
+        type: 'figma',
+        url: 'https://www.figma.com/file/qUvylGh5ubOWlpqlplVORt/IZ-Design-System---%F0%9F%9A%80-Live?type=design&node-id=2447-19156&mode=design&t=dl8DfP2GTSxVMB11-4',
+      },
+      {
+        name: 'dark',
+        type: 'figma',
+        url: 'https://www.figma.com/file/qUvylGh5ubOWlpqlplVORt/IZ-Design-System---%F0%9F%9A%80-Live?type=design&node-id=2450-19345&mode=design&t=dl8DfP2GTSxVMB11-4',
+      },
+    ],
+  },
+  decorators: [withDesign],
+} as Meta<typeof Tab>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: StoryFn<typeof Tab> = (args) => <Tab {...args} label='Tab' />;
+const ActiveTab: StoryFn<typeof Tab> = (args) => (
+  <Tab {...args} selected label='Tab' />
+);
+
+/**
+ * Default variant (not specified)
+ */
+export const DefaultVariant = Template.bind({});
+
+/**
+ * Active variant
+ */
+export const ActiveVariant = ActiveTab.bind({});