@xqmsg/ui-core 0.18.0 → 0.18.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.18.0",
+  "version": "0.18.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/navigation/index.tsx

@@ -1,16 +1,21 @@
 import React, { useMemo, useState } from 'react';
 import { Box } from '@chakra-ui/react';
 import { NavigationMenuHeader } from './components/header';
-import {
-  NavigationMenuItem,
-  NavigationMenuItemProps,
-} from './components/items';
+import { NavigationMenuItem } from './components/items';
+
+export interface GroupedMenuItems {
+  leftIcon: JSX.Element;
+  label: string;
+  href?: string;
+  rightIcon?: JSX.Element;
+  isExternal?: boolean;
+}
 
 export interface NavigationMenuProps {
   groupedMenuItems: {
     groupSortValue: number;
     groupHeader?: string;
-    groupMenuItems: NavigationMenuItemProps[];
+    groupMenuItems: GroupedMenuItems[];
   }[];
   defaultSelectedMenuItem?: string;
 }

package/src/components/toolbar/Toolbar.stories.tsx

@@ -4,6 +4,7 @@ import { Meta, Story } from '@storybook/react';
 import { Box } from '@chakra-ui/react';
 import { Toolbar, ToolbarProps } from '.';
 import { useState } from '@storybook/addons';
+import { Button } from '../button';
 
 const meta: Meta<ToolbarProps> = {
   title: 'Toolbar example',
@@ -41,10 +42,16 @@ const Template: Story<ToolbarProps> = args => {
         {...args}
         pageList={pageList}
         currentPage={currentPage}
-        sortOptions={sortOptions}
         searchValue={searchValue}
         onChangeSearch={(value: string) => setSearchValue(value)}
-      />
+      >
+        <Button
+          variant="secondary"
+          text="Sign Out"
+          width="variable"
+          ariaLabel="button"
+        />
+      </Toolbar>
     </Box>
   );
 };

package/src/components/toolbar/index.tsx

@@ -1,21 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { ToolbarBreadcrumbs } from './components/breadcrumbs';
-import { Actions } from './components/actions';
-import { useMediaQuery } from '@chakra-ui/media-query';
-import StackedInput from '../input/StackedInput/StackedInput';
-import colors from '../../theme/foundations/colors';
-import { FieldOption, FieldOptions } from '../input/InputTypes';
 
 export type ToolbarLabelAndHandler = { label: string; handler: () => void };
 
-export interface ToolbarProps {
+export interface ToolbarProps extends PropsWithChildren {
   pageList: ToolbarLabelAndHandler[];
   currentPage: string;
   searchValue: string;
-  sortOptions: FieldOptions;
-  onSelectSortItem: (option: FieldOption) => void;
-  onClickAdd: () => void;
+
   onChangeSearch: (value: string) => void;
 }
 
@@ -23,23 +16,10 @@ export interface ToolbarProps {
  * A functional React component utilized to render the `Toolbar` component
  */
 export const Toolbar: React.FC<ToolbarProps> = ({
+  children,
   pageList,
   currentPage,
-  searchValue,
-  sortOptions,
-  onChangeSearch,
-  onClickAdd,
-  onSelectSortItem,
 }) => {
-  const [breakpoint800] = useMediaQuery('(min-width: 600px)');
-  const [showSearch, setShowSearch] = useState(false);
-
-  useEffect(() => {
-    if (breakpoint800) {
-      setShowSearch(false);
-    }
-  }, [breakpoint800, showSearch]);
-
   return (
     <Flex flexDirection="column">
       <Flex
@@ -50,32 +30,8 @@ export const Toolbar: React.FC<ToolbarProps> = ({
         background="white"
       >
         <ToolbarBreadcrumbs pageList={pageList} currentPage={currentPage} />
-        <Actions
-          onChangeSearch={onChangeSearch}
-          onClickAdd={onClickAdd}
-          onClickSearch={() => setShowSearch(!showSearch)}
-          onSelectSortItem={onSelectSortItem}
-          searchValue={searchValue}
-          sortOptions={sortOptions}
-        />
+        <Flex alignItems="center">{children} </Flex>
       </Flex>
-      {showSearch && (
-        <Flex
-          px="13px"
-          height="52px"
-          alignItems="center"
-          background="white"
-          borderTop="1px solid"
-          borderColor={colors.fill.light.tertiary}
-        >
-          <StackedInput
-            placeholder="Search..."
-            name="search"
-            value={searchValue}
-            onChange={e => onChangeSearch(e.target.value)}
-          />
-        </Flex>
-      )}
     </Flex>
   );
 };

package/dist/components/toolbar/components/actions/index.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-import { FieldOption, FieldOptions } from '../../../input/InputTypes';
-export interface ActionsProps {
-    onSelectSortItem: (option: FieldOption) => void;
-    onClickAdd: () => void;
-    onClickSearch: () => void;
-    onChangeSearch: (value: string) => void;
-    searchValue: string;
-    sortOptions: FieldOptions;
-}
-/**
- * A functional React component utilized to render the `Actions` component
- */
-export declare const Actions: React.FC<ActionsProps>;

package/src/components/toolbar/components/actions/index.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Flex } from '@chakra-ui/react';
-import { Add } from './add';
-import { Sort } from './sort';
-import { Search } from './search';
-import { FieldOption, FieldOptions } from '../../../input/InputTypes';
-
-export interface ActionsProps {
-  onSelectSortItem: (option: FieldOption) => void;
-  onClickAdd: () => void;
-  onClickSearch: () => void;
-  onChangeSearch: (value: string) => void;
-  searchValue: string;
-  sortOptions: FieldOptions;
-}
-
-/**
- * A functional React component utilized to render the `Actions` component
- */
-export const Actions: React.FC<ActionsProps> = ({
-  onSelectSortItem,
-  onClickAdd,
-  onChangeSearch,
-  onClickSearch,
-  searchValue,
-  sortOptions,
-}) => {
-  return (
-    <Flex alignItems="center">
-      <Sort onSelectItem={onSelectSortItem} sortOptions={sortOptions} />
-      <Add onClick={onClickAdd} />
-      <Search
-        onChange={onChangeSearch}
-        onClick={onClickSearch}
-        searchValue={searchValue}
-      />
-    </Flex>
-  );
-};