@xqmsg/ui-core 0.15.3 → 0.16.0

package/package.json

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

package/src/components/banner/Banner.stories.tsx

@@ -31,6 +31,38 @@ const meta: Meta<BannerProps> = {
 export default meta;
 const Template: Story<BannerProps> = args => (
   <>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="positive"
+        message="Positive message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="warning"
+        message="Warning message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="error"
+        message="Error message."
+      />
+    </Box>
+    <Box mb="20px">
+      <Banner
+        {...args}
+        type="condensed"
+        variant="neutral"
+        message="Neutral message."
+      />
+    </Box>
     <Box mb="20px">
       <Banner
         {...args}

package/src/components/banner/index.tsx

@@ -13,6 +13,7 @@ export interface BannerProps {
   message: ReactNode;
   buttonText?: string;
   onClick?: () => void;
+  type?: 'condensed' | 'expanded';
 }
 
 /**
@@ -23,6 +24,7 @@ export const Banner: React.FC<BannerProps> = ({
   message,
   buttonText,
   onClick,
+  type = 'expanded',
 }) => {
   const Icon = useMemo(() => {
     switch (variant) {
@@ -42,19 +44,28 @@ export const Banner: React.FC<BannerProps> = ({
   return (
     <Alert variant={variant}>
       <AlertDescription>
-        <Box pb="8px">{Icon}</Box>
-        {message}
-        {onClick && buttonText && (
-          <Flex pt="8px" justifyContent="flex-end">
-            <Button
-              variant="secondary"
-              onClick={onClick}
-              text={buttonText}
-              width="variable"
-              ariaLabel="banner button"
-            />
-          </Flex>
-        )}
+        <Flex
+          flexDirection={type === 'condensed' ? 'row' : 'column'}
+          alignItems={type === 'condensed' ? 'center' : ''}
+        >
+          <Box pr="8px">{Icon}</Box>
+          <Box pt={type === 'condensed' ? 0 : '8px'}> {message}</Box>
+          {onClick && buttonText && (
+            <Flex
+              ml={type === 'condensed' ? 'auto' : ''}
+              pt={type === 'condensed' ? 0 : '8px'}
+              justifyContent={type === 'condensed' ? 'flex-end' : 'flex-end'}
+            >
+              <Button
+                variant="secondary"
+                onClick={onClick}
+                text={buttonText}
+                width="variable"
+                ariaLabel="banner button"
+              />
+            </Flex>
+          )}
+        </Flex>
       </AlertDescription>
     </Alert>
   );

package/src/components/button/Button.stories.tsx

@@ -37,7 +37,7 @@ const meta: Meta<ButtonProps> = {
 };
 export default meta;
 const Template: Story<ButtonProps> = args => (
-  <Flex flexDir="column" height="200px" justifyContent="space-between">
+  <Flex flexDir="column" height="150px" justifyContent="space-between">
     <Button {...args} text="Primary Fixed" variant="primary" width="fixed" />
     <Button
       {...args}

package/src/components/button/spinner/index.tsx

@@ -15,14 +15,13 @@ export const SpinnerButton: React.FC<SpinnerButtonProps> = ({
   onClick,
   type,
   ariaLabel,
-  variant = 'solid',
-
+  variant = 'primary',
   disabled,
   className,
 }) => {
   return (
     <Button
-      spinner={<Spinner size={'md'} />}
+      spinner={<Spinner size={'sm'} />}
       isLoading={isLoading}
       onClick={onClick}
       type={type}

package/src/components/input/StackedSelect/{StackedSelect.tsx → index.tsx}

@@ -8,7 +8,7 @@ import {
 } from '@chakra-ui/react';
 import { FieldOptions } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
-import colors from '../../../../src/theme/foundations/colors';
+import colors from '../../../theme/foundations/colors';
 import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 import SubtractIcon from './assets/svg/subtract.svg';
 import { Dropdown } from '../components/dropdown';
@@ -27,7 +27,16 @@ export interface StackedSelectProps extends StackedInputProps {
  */
 const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
   (
-    { isRequired, options, name, setValue, handleOnChange, value, ...props },
+    {
+      isRequired,
+      options,
+      name,
+      setValue,
+      handleOnChange,
+      disabled,
+      value,
+      ...props
+    },
     _ref
   ) => {
     const dropdownRef = useRef<HTMLDivElement>(null);
@@ -85,6 +94,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             fontSize="13px"
             textShadow={`0 0 0 ${colors.label.primary.light}`}
             value={selectedOption}
+            disabled={disabled}
             autoComplete="off"
             onKeyDown={e => {
               if (isFocussed) {
@@ -105,8 +115,8 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
             }}
           />
           <InputRightElement
-            cursor="pointer"
-            onClick={() => setIsFocussed(!isFocussed)}
+            cursor={disabled ? 'not-allowed' : 'pointer'}
+            onClick={() => !disabled && setIsFocussed(!isFocussed)}
           >
             <Image src={SubtractIcon} alt="subtract" boxSize="16px" />
           </InputRightElement>

package/src/components/input/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import StackedCheckBox from './StackedCheckbox/StackedCheckbox';
 import StackedInput from './StackedInput/StackedInput';
 import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
-import StackedSelect from './StackedSelect/StackedSelect';
+import StackedSelect from './StackedSelect';
 import StackedTextarea from './StackedTextarea/StackedTextarea';
 import { FieldOptions, ValidationProps, InputType } from './InputTypes';
 import {

package/src/components/table/empty/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Table as ChakraTable, Tbody, Td, Tr } from '@chakra-ui/react';
+
+/**
+ * A React component utilized to render the `EmptyTable` component
+ */
+export const EmptyTable: React.FC = () => {
+  const getOpacity = (index: number) => {
+    switch (index) {
+      case 1:
+        return 0.7;
+      case 3:
+        return 0.6;
+      case 5:
+        return 0.5;
+      case 7:
+        return 0.4;
+      case 9:
+        return 0.3;
+      case 11:
+        return 0.2;
+      case 13:
+        return 0.1;
+      default:
+        return 1;
+    }
+  };
+
+  return (
+    <ChakraTable
+      variant="unstyled"
+      width="100%"
+      style={{
+        borderCollapse: 'separate',
+        borderSpacing: '0px',
+      }}
+    >
+      <Tbody>
+        {Array.from({ length: 14 }, (_, i) => i + 1).map(i => (
+          <Tr>
+            <Td height="26px" opacity={getOpacity(i)}></Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </ChakraTable>
+  );
+};

package/src/components/table/index.tsx

@@ -9,7 +9,6 @@ import { generateTableColumnsAsConst } from './utils/generateTableColumns';
 
 import {
   Table as ChakraTable,
-  TableCaption,
   TableContainer,
   Tbody,
   Td,
@@ -19,6 +18,7 @@ import {
 } from '@chakra-ui/react';
 import { TableLoadingRows } from './components/loading';
 import colors from '../../theme/foundations/colors';
+import { EmptyTable } from './empty';
 
 export interface TableProps<T extends ReadonlyTableColumns> {
   columns: TableColumns;
@@ -36,46 +36,47 @@ export function Table<T extends ReadonlyTableColumns>({
   columns,
   headers,
   body,
-  placeholder = 'There is currently no available data',
   loading,
-
   loadMore,
 }: TableProps<T>) {
   const columnsAsConst = generateTableColumnsAsConst(columns);
 
   return (
     <TableContainer border="none" overflowX="auto" bg="white" width="100%">
-      <ChakraTable
-        variant="unstyled"
-        width="100%"
-        style={{
-          borderCollapse: 'separate',
-          borderSpacing: '0px',
-        }}
-      >
-        <Thead>
-          <Tr _odd={{ bg: colors.label.primary.dark }}>
-            {columnsAsConst.map(column => (
-              // @ts-ignore
-              <Th>{headers[column]}</Th>
-            ))}
-          </Tr>
-        </Thead>
-        <Tbody>
-          {body.map(row => (
-            <Tr>
+      {body.length ? (
+        <ChakraTable
+          variant="unstyled"
+          width="100%"
+          style={{
+            borderCollapse: 'separate',
+            borderSpacing: '0px',
+          }}
+        >
+          <Thead>
+            <Tr _odd={{ bg: colors.label.primary.dark }}>
               {columnsAsConst.map(column => (
                 // @ts-ignore
-                <Td>{row[column]}</Td>
+                <Th>{headers[column]}</Th>
               ))}
             </Tr>
-          ))}
-        </Tbody>
-        {!body.length && <TableCaption py={10}>{placeholder}</TableCaption>}{' '}
-      </ChakraTable>
-      {loadMore && loading !== undefined && (
-        <TableLoadingRows isLoading={loading} onLoadMore={loadMore} />
+          </Thead>
+          <Tbody>
+            {body.map(row => (
+              <Tr>
+                {columnsAsConst.map(column => (
+                  // @ts-ignore
+                  <Td>{row[column]}</Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </ChakraTable>
+      ) : (
+        <EmptyTable />
       )}
+      {loadMore && loading !== undefined && body.length ? (
+        <TableLoadingRows isLoading={loading} onLoadMore={loadMore} />
+      ) : null}
     </TableContainer>
   );
 }

package/src/theme/components/button.ts

@@ -6,6 +6,7 @@ const baseStyle = defineStyle({
   fontSize: '13px',
   bg: colors.fill.action,
   color: colors.label.primary.dark,
+  h: '26px',
   border: 'none',
   px: '8px',
   py: '4px',

package/src/theme/components/table.ts

@@ -11,8 +11,12 @@ const baseStyle = {
   },
   tr: {
     fontSize: '13px',
+    h: '26px',
+    lineHeight: 'normal',
     _odd: {
       td: {
+        h: '26px ',
+        lineHeight: 'normal',
         bg: colors.fill.light.tertiary,
         _first: {
           borderTopLeftRadius: 'md',
@@ -27,6 +31,8 @@ const baseStyle = {
   },
   td: {
     padding: '5px 8px !important',
+    lineHeight: 'normal',
+    h: '26px',
   },
 };
 

package/src/theme/components/text.ts

@@ -7,7 +7,7 @@ const baseStyle: Partial<TextProps> = {
   fontWeight: typography.fontWeights.normal,
   fontFamily: typography.fonts.base,
   fontSize: typography.fontSizes.sm,
-  lineHeight: typography.lineHeights.base,
+  lineHeight: typography.lineHeights.normal,
   letterSpacing: typography.letterSpacings.wide,
 };
 

package/src/theme/styles.ts

@@ -8,6 +8,7 @@ export default {
         base: 'visible',
         lg: 'hidden',
       },
+      lineHeight: 'normal',
     },
     '*, *::before, *::after': {
       borderColor: 'gray.200',