@ssa-ui-kit/core 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,
@@ -29,8 +29,8 @@
     "loose-envify": "^1.4.0",
     "scheduler": "^0.23.0",
     "uuid": "^9.0.0",
-    "@ssa-ui-kit/hooks": "^1.0.0",
-    "@ssa-ui-kit/utils": "^1.0.0"
+    "@ssa-ui-kit/utils": "^1.0.0",
+    "@ssa-ui-kit/hooks": "^1.0.0"
   },
   "devDependencies": {
     "@emotion/jest": "^11.11.0",

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.stories.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { Routes, Route, MemoryRouter } from 'react-router-dom';
-import { Meta } from '@storybook/react';
-import { Title, Description, Source } from '@storybook/addon-docs';
+import { Meta, StoryObj } from '@storybook/react';
+import { Title, Description, Subtitle, Stories } from '@storybook/addon-docs';
 
 import { DecoratorFunction } from '@storybook/types';
 import { CollapsibleNavBar } from '../CollapsibleNavBar';
@@ -35,11 +35,17 @@ export default {
   parameters: {
     layout: 'fullscreen',
     docs: {
+      source: {
+        type: 'code',
+      },
       page: () => (
         <Fragment>
           <Title />
+          <Subtitle />
           <Description />
-          <Source code={`<CollapsibleNavBar />`} />
+          <div css={{ height: 300 }}>
+            <Stories />
+          </div>
         </Fragment>
       ),
     },
@@ -54,26 +60,42 @@ export default {
   },
 } as Meta<typeof CollapsibleNavBar>;
 
-export const Default = {};
+export const Default: StoryObj<typeof CollapsibleNavBar> = () => {
+  return (
+    <CollapsibleNavBar
+      items={ITEMS}
+      renderLogo={<Logo />}
+      onChange={(isChecked) => {
+        console.log('>>>onChange', isChecked);
+      }}
+    />
+  );
+};
 
-export const WithCustomIcon = {
-  title: 'With Custom Icon',
-  component: CollapsibleNavBar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    items: [
-      ...ITEMS,
-      {
-        path: 'custom',
-        CustomIcon,
-        title: 'Item with custom icon',
-      },
-    ],
-    renderLogo: <Logo />,
-    onChange: (isChecked) => {
-      console.log('>>>onChange', isChecked);
-    },
-  },
-} as Meta<typeof CollapsibleNavBar>;
+Default.args = {};
+
+export const WithCustomIcon: Meta<typeof CollapsibleNavBar> = () => {
+  return (
+    <CollapsibleNavBar
+      items={[
+        ...ITEMS,
+        {
+          path: 'custom',
+          CustomIcon,
+          title: 'Item with custom icon',
+          iconSize: 22,
+          iconName: 'archive',
+        },
+      ]}
+      renderLogo={<Logo />}
+      onChange={(isChecked) => {
+        console.log('>>>onChange', isChecked);
+      }}
+    />
+  );
+};
+
+WithCustomIcon.title = 'With Custom Icon';
+WithCustomIcon.parameters = {
+  layout: 'fullscreen',
+};

package/src/components/CollapsibleNavBar/stories/Layout.tsx

@@ -36,7 +36,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
       }}>
       {children}
       <Main>
-        {new Array(100).fill(1).map((_, index) => (
+        {new Array(30).fill(1).map((_, index) => (
           <NotificationCard
             key={index}
             title="CyberVeinToken is Now Available"

package/src/components/Filters/Filters.tsx

@@ -74,7 +74,7 @@ export const Filters = ({
         <FilterBlockWrapper>
           <FiltersBlock />
         </FilterBlockWrapper>
-        <Wrapper css={{ width: 110 }}>
+        <Wrapper css={{ width: 110, zIndex: 1 }}>
           <TableFilters
             {...useTableDataResult}
             checkboxData={hiddenCheckboxData}

package/src/components/MultipleDropdownOptions/MultipleDropdownOptions.tsx

@@ -23,7 +23,7 @@ const DropdownOptionsBase = styled.ul<{ tabindex?: string }>`
   overflow-x: hidden;
   overflow-y: auto;
 
-  z-index: 2;
+  z-index: 1;
 
   filter: ${({ theme }) =>
     `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`};

package/src/components/ResponsiveImage/ResponsiveImage.stories.tsx

@@ -21,10 +21,12 @@ export const Default: StoryObj<typeof ResponsiveImage> = () => {
         tag
       </Typography>
       <ResponsiveImage
-        srcSet="https://placehold.co/64x64 64w, https://placehold.co/48x48 48w"
-        sizes="(min-width: 1440px) 64px, 48px"
-        src="https://placehold.co/48x48"
-        alt="Steps"
+        srcSet={`
+          https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FUI_KIT_Medium_90_51.png?alt=media&token=6761e4f3-b985-4322-8824-0c9668a2e2d9 90w, 
+          https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FUI_KIT_Small_80_49.png?alt=media&token=910e7a01-8127-4e2e-88e6-1b85805d7beb 80w`}
+        sizes="(max-width: 900px) 80px, (min-width: 900px) 90px"
+        src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FUI_KIT_Small_80_49.png?alt=media&token=910e7a01-8127-4e2e-88e6-1b85805d7beb"
+        alt="SSA UI Kit"
       />
     </div>
   );

package/src/components/TableFilters/styles.ts

@@ -6,6 +6,7 @@ export const tableFilterPopoverContentStyles = (theme: Theme) => css`
   padding: 20px 20px 14px 18px;
   width: 340px;
   background: ${theme.colors.white};
+  z-index: 1;
 `;
 
 export const tableFilterDividerStyles = (theme: Theme) => css`

package/src/components/TextField/TextField.stories.tsx

@@ -148,7 +148,14 @@ export const WithAction: StoryObj<typeof TextField> = () => {
       register={register}
       helperText="some nice text"
       endElement={
-        <button onClick={() => console.log('calling action...')}>Action</button>
+        <button
+          onClick={(event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            console.log('calling action...');
+          }}>
+          Action
+        </button>
       }
     />
   );