@xqmsg/ui-core 0.16.7 → 0.17.0

package/package.json

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

package/src/components/banner/index.tsx

@@ -1,10 +1,10 @@
 import React, { ReactNode, useMemo } from 'react';
-import { Alert, AlertDescription, Box, Flex, Image } from '@chakra-ui/react';
-import ErrorIcon from './assets/svg/error.svg';
-import PositiveIcon from './assets/svg/positive.svg';
-import NeutralIcon from './assets/svg/neutral.svg';
-import WarningIcon from './assets/svg/warning.svg';
+import { Alert, AlertDescription, Box, Flex } from '@chakra-ui/react';
 import { Button } from '../button';
+import { Error } from '../icons/error';
+import { Neutral } from '../icons/neutral';
+import { Positive } from '../icons/positive';
+import { Warning } from '../icons/warning';
 
 export type BannerVariant = 'positive' | 'warning' | 'error' | 'neutral';
 
@@ -29,13 +29,13 @@ export const Banner: React.FC<BannerProps> = ({
   const Icon = useMemo(() => {
     switch (variant) {
       case 'error':
-        return <Image src={ErrorIcon} alt="error" boxSize="16px" />;
+        return <Error boxSize="16px" />;
       case 'neutral':
-        return <Image src={NeutralIcon} alt="neutral" boxSize="16px" />;
+        return <Neutral boxSize="16px" />;
       case 'positive':
-        return <Image src={PositiveIcon} alt="positive" boxSize="16px" />;
+        return <Positive boxSize="16px" />;
       case 'warning':
-        return <Image src={WarningIcon} alt="warning" boxSize="16px" />;
+        return <Warning boxSize="16px" />;
       default:
         return null;
     }

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

@@ -1,6 +1,7 @@
+import { Box } from '@chakra-ui/react';
 import React from 'react';
+import { Google } from '../../icons/google';
 import { Button, ButtonProps } from '..';
-import { ReactComponent as GoogleLogo } from './assets/GoogleLogo.svg';
 
 export interface GoogleButtonProps extends Partial<ButtonProps> {
   onClick: () => void;
@@ -19,7 +20,11 @@ export const GoogleButton: React.FC<GoogleButtonProps> = ({
       variant="secondary"
       ariaLabel="google-login-button"
       className="google-button"
-      leftIcon={<GoogleLogo width={18} height={18} mr={3} />}
+      leftIcon={
+        <Box mr={3}>
+          <Google boxSize="18px" />
+        </Box>
+      }
       text="Sign in with Google"
       width="variable"
       type={type}

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ReactComponent as MicrosoftLogo } from './assets/MicrosoftLogo.svg';
+import { Microsoft } from '../../icons/microsoft';
 import { Button, ButtonProps } from '..';
+import { Box } from '@chakra-ui/react';
 
 export interface MicrosoftButtonProps extends Partial<ButtonProps> {
   onClick: () => void;
@@ -19,7 +20,11 @@ export const MicrosoftButton: React.FC<MicrosoftButtonProps> = ({
       variant="secondary"
       ariaLabel="microsoft-login-button"
       className="microsoft-button"
-      leftIcon={<MicrosoftLogo width={18} height={18} mr={3} />}
+      leftIcon={
+        <Box mr={3}>
+          <Microsoft boxSize="18px" />
+        </Box>
+      }
       text="Sign in with Microsoft"
       width="variable"
       type={type}

package/src/components/icons/chevron/down/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.184136 0.767507C0.422999 0.537831 0.802824 0.545278 1.0325 0.784142L4 3.93434L6.9675 0.784142C7.19718 0.545279 7.577 0.537831 7.81587 0.767507C8.05473 0.997183 8.06218 1.37701 7.8325 1.61587L4.4325 5.21587C4.31938 5.33352 4.16321 5.40001 4 5.40001C3.83679 5.40001 3.68062 5.33352 3.5675 5.21587L0.167501 1.61587C-0.0621751 1.37701 -0.0547276 0.997183 0.184136 0.767507Z" fill="white"/>
+</svg>

package/src/components/icons/chevron/down/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import colors from '../../../../theme/foundations/colors';
+import { ReactComponent as ChevronDownIcon } from './chevron-down.svg';
+
+export interface ChevronDownProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `ChevronDown` icon component
+ */
+export const ChevronDown: React.FC<ChevronDownProps> = ({ boxSize }) => {
+  return <ChevronDownIcon boxSize={boxSize} fill={colors.fill.action} />;
+};

package/src/components/icons/chevron/right/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.767599 7.81586C0.537923 7.577 0.54537 7.19718 0.784233 6.9675L3.93443 4L0.784233 1.0325C0.54537 0.802823 0.537922 0.422997 0.767598 0.184134C0.997274 -0.0547285 1.3771 -0.0621767 1.61596 0.167499L5.21596 3.5675C5.33361 3.68062 5.4001 3.83679 5.4001 4C5.4001 4.16321 5.33361 4.31938 5.21596 4.4325L1.61596 7.8325C1.3771 8.06218 0.997275 8.05473 0.767599 7.81586Z" fill="white"/>
+</svg>

package/src/components/icons/chevron/right/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as ChevronRightIcon } from './chevron-right.svg';
+
+export interface ChevronRightProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `ChevronRight` icon component
+ */
+export const ChevronRight: React.FC<ChevronRightProps> = ({ boxSize }) => {
+  return <ChevronRightIcon boxSize={boxSize} />;
+};

package/src/components/icons/clock/clock.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 3V7H10M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7Z" stroke="#0082ff" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icons/clock/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as ClockIcon } from './clock.svg';
+
+export interface ClockProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `Clock` icon component
+ */
+export const Clock: React.FC<ClockProps> = ({ boxSize }) => {
+  return <ClockIcon boxSize={boxSize} />;
+};

package/src/components/icons/close/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ReactComponent as CloseIcon } from './close.svg';
+
+export interface CloseProps {
+  boxSize: number | string;
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `Close` icon component
+ */
+export const Close: React.FC<CloseProps> = ({ boxSize, onClick }) => {
+  return <CloseIcon boxSize={boxSize} onClick={onClick} cursor="pointer" />;
+};

package/src/components/icons/dropdown/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as DropdownIcon } from './dropdown.svg';
+
+export interface DropdownProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `Dropdown` icon component
+ */
+export const Dropdown: React.FC<DropdownProps> = ({ boxSize }) => {
+  return <DropdownIcon boxSize={boxSize} />;
+};

package/src/components/icons/error/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as ErrorIcon } from './error.svg';
+
+export interface ErrorProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `Error` icon component
+ */
+export const Error: React.FC<ErrorProps> = ({ boxSize }) => {
+  return <ErrorIcon boxSize={boxSize} />;
+};

package/src/components/icons/file/fill/file-fill.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.75 0C1.05964 0 0.5 0.559644 0.5 1.25V12.75C0.5 13.4404 1.05964 14 1.75 14H10.25C10.9404 14 11.5 13.4404 11.5 12.75V7.5C11.5 6.11929 10.3807 5 9 5H7.75C7.05964 5 6.5 4.44036 6.5 3.75V2.5C6.5 1.11929 5.38071 0 4 0H1.75Z" fill="white"/>
+<path d="M6.64746 0.210603C7.17864 0.824319 7.5 1.62463 7.5 2.5V3.75C7.5 3.88807 7.61193 4 7.75 4H9C9.87537 4 10.6757 4.32136 11.2894 4.85254C10.6975 2.58658 8.91342 0.802516 6.64746 0.210603Z" fill="white"/>
+</svg>

package/src/components/icons/file/fill/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as FileFillIcon } from './file-fill.svg';
+
+export interface FileFillProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `FileFill` icon component
+ */
+export const FileFill: React.FC<FileFillProps> = ({ boxSize }) => {
+  return <FileFillIcon boxSize={boxSize} />;
+};

package/src/components/icons/file/outline/file-outline.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.0461 8.47693V6.75385C11.0461 5.53033 10.0542 4.53847 8.83072 4.53847H7.84611C7.43826 4.53847 7.10764 4.20785 7.10764 3.80001V2.81539C7.10764 1.59187 6.11578 0.600006 4.89226 0.600006H3.66149M5.13841 0.600006H1.93841C1.53057 0.600006 1.19995 0.930626 1.19995 1.33847V12.6615C1.19995 13.0694 1.53057 13.4 1.93841 13.4H10.3076C10.7155 13.4 11.0461 13.0694 11.0461 12.6615V6.5077C11.0461 3.24497 8.40114 0.600006 5.13841 0.600006Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icons/file/outline/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as FileOutlineIcon } from './file-outline.svg';
+
+export interface FileOutlineProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `FileOutline` icon component
+ */
+export const FileOutline: React.FC<FileOutlineProps> = ({ boxSize }) => {
+  return <FileOutlineIcon boxSize={boxSize} />;
+};

package/src/components/icons/folder/add/fill/folder-add-fill.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 7V11M10 9H6M8.70711 4.20711L7.29289 2.79289C7.10536 2.60536 6.851 2.5 6.58579 2.5H3C2.17157 2.5 1.5 3.17157 1.5 4V12C1.5 12.8284 2.17157 13.5 3 13.5H13C13.8284 13.5 14.5 12.8284 14.5 12V6C14.5 5.17157 13.8284 4.5 13 4.5H9.41421C9.149 4.5 8.89464 4.39464 8.70711 4.20711Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icons/folder/add/fill/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as FolderAddFillIcon } from './folder-add-fill.svg';
+
+export interface FolderAddFillProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `FolderAddFill` icon component
+ */
+export const FolderAddFill: React.FC<FolderAddFillProps> = ({ boxSize }) => {
+  return <FolderAddFillIcon boxSize={boxSize} />;
+};

package/src/components/icons/folder/add/outline/folder-add-outline.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 5V9M9 7H5M7.70711 2.20711L6.29289 0.792893C6.10536 0.605357 5.851 0.5 5.58579 0.5H2C1.17157 0.5 0.5 1.17157 0.5 2V10C0.5 10.8284 1.17157 11.5 2 11.5H12C12.8284 11.5 13.5 10.8284 13.5 10V4C13.5 3.17157 12.8284 2.5 12 2.5H8.41421C8.149 2.5 7.89464 2.39464 7.70711 2.20711Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icons/folder/add/outline/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ReactComponent as FolderAddOutlineIcon } from './folder-add-outline.svg';
+
+export interface FolderAddOutlineProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `FolderAddOutline` icon component
+ */
+export const FolderAddOutline: React.FC<FolderAddOutlineProps> = ({
+  boxSize,
+}) => {
+  return <FolderAddOutlineIcon boxSize={boxSize} />;
+};

package/src/components/icons/folder/fill/folder-fill.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.0001 0.399994C1.2269 0.399994 0.600098 1.02679 0.600098 1.79999V4.40872C1.00422 4.14999 1.48464 3.99999 2.0001 3.99999H12.0001C12.5156 3.99999 12.996 4.14999 13.4001 4.40872V3.39999C13.4001 2.6268 12.7733 1.99999 12.0001 1.99999H8.13147C8.07842 1.99999 8.02755 1.97892 7.99005 1.94142L6.85868 0.810044C6.59613 0.547493 6.24003 0.399994 5.86873 0.399994H2.0001Z" fill="white"/>
+<path d="M2.0001 5.19999C1.2269 5.19999 0.600098 5.8268 0.600098 6.59999V10.2C0.600098 10.9732 1.2269 11.6 2.0001 11.6H12.0001C12.7733 11.6 13.4001 10.9732 13.4001 10.2V6.59999C13.4001 5.8268 12.7733 5.19999 12.0001 5.19999H2.0001Z" fill="white"/>
+</svg>

package/src/components/icons/folder/fill/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as FolderFillIcon } from './folder-fill.svg';
+
+export interface FolderFillProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `FolderFill` icon component
+ */
+export const FolderFill: React.FC<FolderFillProps> = ({ boxSize }) => {
+  return <FolderFillIcon boxSize={boxSize} />;
+};

package/src/components/icons/folder/outline/folder-outline.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 6.53846V6.07692C1 5.31222 1.61991 4.69231 2.38462 4.69231H11.6154C12.3801 4.69231 13 5.31222 13 6.07692V6.53846M7.65271 2.57579L6.34729 1.27036C6.17418 1.09725 5.93939 1 5.69457 1H2.38462C1.61991 1 1 1.61991 1 2.38462V9.76923C1 10.5339 1.61991 11.1538 2.38462 11.1538H11.6154C12.3801 11.1538 13 10.5339 13 9.76923V4.23077C13 3.46607 12.3801 2.84615 11.6154 2.84615H8.30543C8.06061 2.84615 7.82582 2.7489 7.65271 2.57579Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/icons/folder/outline/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ReactComponent as FolderOutlineIcon } from './folder-outline.svg';
+
+export interface FolderOutlineProps {
+  boxSize: number | string;
+}
+
+/**
+ * A functional React component utilized to render the `FolderOutline` icon component
+ */
+export const FolderOutline: React.FC<FolderOutlineProps> = ({ boxSize }) => {
+  return <FolderOutlineIcon boxSize={boxSize} />;
+};