@xqmsg/ui-core 0.23.1-rc.0 → 0.23.1-rc.2

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

@@ -1,40 +1,40 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Layout, LayoutProps } from '.';
-import { Box } from '@chakra-ui/react';
-import { Text } from '../text';
-
-const meta: Meta<LayoutProps> = {
-  title: 'Layout example',
-  component: Layout,
-  argTypes: {
-    Header: {
-      control: { type: 'text' },
-      description: 'This is the content of the `Header` within `Layout`',
-    },
-    Navigation: {
-      control: { type: 'text' },
-      description: 'This is the content of the `Navigation` within `Layout`',
-    },
-    MainContent: {
-      control: { type: 'text' },
-      description: 'This is the content of the `MainContent` within `Layout`',
-    },
-    navbarWidth: {
-      control: { type: 'text' },
-      description: 'This is the width of the navbar',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<LayoutProps> = args => (
-  <Box height="90vh" width="100%">
-    <Layout {...args} Header={<Text variant="title-large">Header</Text>} />
-  </Box>
-);
-
-export const Default = Template.bind({});
-Default.args = {};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Layout, LayoutProps } from '.';
+import { Box } from '@chakra-ui/react';
+import { Text } from '../text';
+
+const meta: Meta<LayoutProps> = {
+  title: 'Layout example',
+  component: Layout,
+  argTypes: {
+    Header: {
+      control: { type: 'text' },
+      description: 'This is the content of the `Header` within `Layout`',
+    },
+    Navigation: {
+      control: { type: 'text' },
+      description: 'This is the content of the `Navigation` within `Layout`',
+    },
+    MainContent: {
+      control: { type: 'text' },
+      description: 'This is the content of the `MainContent` within `Layout`',
+    },
+    navbarWidth: {
+      control: { type: 'text' },
+      description: 'This is the width of the navbar',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<LayoutProps> = args => (
+  <Box height="90vh" width="100%">
+    <Layout {...args} Header={<Text variant="title-large">Header</Text>} />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/layout/index.tsx

@@ -1,100 +1,100 @@
-import React, { ReactNode, useState } from 'react';
-import {
-  Box,
-  Collapse,
-  Flex,
-  Grid,
-  GridItem,
-  IconButton,
-  useMediaQuery,
-} from '@chakra-ui/react';
-import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
-import { BorderedBox } from './BorderedBox';
-
-export interface LayoutProps {
-  Navigation?: ReactNode;
-  Header?: ReactNode;
-  MainContent?: ReactNode;
-  navbarWidth?: string;
-}
-
-/**
- * A functional React component utilized to render the `Layout` component
- */
-export const Layout: React.FC<LayoutProps> = ({
-  Navigation,
-  Header,
-  MainContent,
-  navbarWidth = '250px',
-}) => {
-  const [isLargerThan1200] = useMediaQuery('(min-width: 1200px)');
-
-  const [show, setShow] = useState(false);
-
-  return (
-    <Grid
-      templateAreas={
-        isLargerThan1200 ? `"nav header" "nav main"` : `"header" "main"`
-      }
-      gridTemplateRows="auto 1fr"
-      gridTemplateColumns={isLargerThan1200 ? `${navbarWidth} 1fr` : '100% 1fr'}
-      h="100%"
-      width="100%"
-      gap="4"
-      bg="#f5f5f5"
-    >
-      <GridItem area="header" p="20px 20px 10px 10px" minHeight="100px">
-        <BorderedBox
-          borderRadius="md"
-          boxShadow="rgba(235,237,238,.75) 8px 0 30px 10px"
-        >
-          <Flex
-            flexDirection="column"
-            justifyContent="center"
-            width="100%"
-            pl={'32px'}
-            py={5}
-          >
-            <Flex justifyContent="space-between" alignItems="center">
-              {Header}
-              {!isLargerThan1200 && (
-                <IconButton
-                  size="md"
-                  variant="unstyled"
-                  alignSelf="flex-start"
-                  aria-label="menu"
-                  type="button"
-                  onClick={() => setShow(!show)}
-                  icon={show ? <CloseIcon /> : <HamburgerIcon />}
-                  _focus={{
-                    boxShadow: 'none',
-                  }}
-                />
-              )}
-            </Flex>
-            {!isLargerThan1200 && (
-              <Collapse in={show}>
-                <Box marginTop={5}>{Navigation}</Box>
-              </Collapse>
-            )}
-          </Flex>
-        </BorderedBox>
-      </GridItem>
-      {isLargerThan1200 && (
-        <GridItem area="nav" width={navbarWidth}>
-          <BorderedBox boxShadow="rgba(0, 0, 0, 0.035) 0px 2px 10px">
-            {Navigation}
-          </BorderedBox>
-        </GridItem>
-      )}
-      <GridItem area="main" p="0 20px 20px 10px">
-        <BorderedBox
-          borderRadius="md"
-          boxShadow="rgba(0, 0, 0, 0.035) 0px 2px 10px"
-        >
-          {MainContent}
-        </BorderedBox>
-      </GridItem>
-    </Grid>
-  );
-};
+import React, { ReactNode, useState } from 'react';
+import {
+  Box,
+  Collapse,
+  Flex,
+  Grid,
+  GridItem,
+  IconButton,
+  useMediaQuery,
+} from '@chakra-ui/react';
+import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons';
+import { BorderedBox } from './BorderedBox';
+
+export interface LayoutProps {
+  Navigation?: ReactNode;
+  Header?: ReactNode;
+  MainContent?: ReactNode;
+  navbarWidth?: string;
+}
+
+/**
+ * A functional React component utilized to render the `Layout` component
+ */
+export const Layout: React.FC<LayoutProps> = ({
+  Navigation,
+  Header,
+  MainContent,
+  navbarWidth = '250px',
+}) => {
+  const [isLargerThan1200] = useMediaQuery('(min-width: 1200px)');
+
+  const [show, setShow] = useState(false);
+
+  return (
+    <Grid
+      templateAreas={
+        isLargerThan1200 ? `"nav header" "nav main"` : `"header" "main"`
+      }
+      gridTemplateRows="auto 1fr"
+      gridTemplateColumns={isLargerThan1200 ? `${navbarWidth} 1fr` : '100% 1fr'}
+      h="100%"
+      width="100%"
+      gap="4"
+      bg="#f5f5f5"
+    >
+      <GridItem area="header" p="20px 20px 10px 10px" minHeight="100px">
+        <BorderedBox
+          borderRadius="md"
+          boxShadow="rgba(235,237,238,.75) 8px 0 30px 10px"
+        >
+          <Flex
+            flexDirection="column"
+            justifyContent="center"
+            width="100%"
+            pl={'32px'}
+            py={5}
+          >
+            <Flex justifyContent="space-between" alignItems="center">
+              {Header}
+              {!isLargerThan1200 && (
+                <IconButton
+                  size="md"
+                  variant="unstyled"
+                  alignSelf="flex-start"
+                  aria-label="menu"
+                  type="button"
+                  onClick={() => setShow(!show)}
+                  icon={show ? <CloseIcon /> : <HamburgerIcon />}
+                  _focus={{
+                    boxShadow: 'none',
+                  }}
+                />
+              )}
+            </Flex>
+            {!isLargerThan1200 && (
+              <Collapse in={show}>
+                <Box marginTop={5}>{Navigation}</Box>
+              </Collapse>
+            )}
+          </Flex>
+        </BorderedBox>
+      </GridItem>
+      {isLargerThan1200 && (
+        <GridItem area="nav" width={navbarWidth}>
+          <BorderedBox boxShadow="rgba(0, 0, 0, 0.035) 0px 2px 10px">
+            {Navigation}
+          </BorderedBox>
+        </GridItem>
+      )}
+      <GridItem area="main" p="0 20px 20px 10px">
+        <BorderedBox
+          borderRadius="md"
+          boxShadow="rgba(0, 0, 0, 0.035) 0px 2px 10px"
+        >
+          {MainContent}
+        </BorderedBox>
+      </GridItem>
+    </Grid>
+  );
+};

package/src/components/link/Link.stories.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Link, LinkProps } from '.';
-import { Box } from '@chakra-ui/react';
-
-const meta: Meta<LinkProps> = {
-  title: 'Link example',
-  component: Link,
-
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<LinkProps> = () => (
-  <Box height="90vh" width="100%">
-    <Link variant="video" text="Video Link" />{' '}
-    <Link variant="page" text="Page Link" />
-  </Box>
-);
-
-export const Default = Template.bind({});
-Default.args = {};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Link, LinkProps } from '.';
+import { Box } from '@chakra-ui/react';
+
+const meta: Meta<LinkProps> = {
+  title: 'Link example',
+  component: Link,
+
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<LinkProps> = () => (
+  <Box height="90vh" width="100%">
+    <Link variant="video" text="Video Link" />{' '}
+    <Link variant="page" text="Page Link" />
+  </Box>
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/link/index.tsx

@@ -1,34 +1,34 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import { Flex, Text } from '@chakra-ui/react';
-import React, { useMemo } from 'react';
-import colors from '../../theme/foundations/colors';
-import { Page, Video } from '../icons';
-
-export interface LinkProps {
-  variant: 'video' | 'page';
-  text: string;
-  onClick: () => void;
-}
-
-/**
- * A functional React component utilized to render the `Link` component
- */
-export const Link: React.FC<LinkProps> = ({ variant, text, onClick }) => {
-  const getIcon = useMemo(() => {
-    switch (variant) {
-      case 'page':
-        return <Page boxSize="12px" />;
-      case 'video':
-        return <Video boxSize="12px" />;
-    }
-  }, [variant]);
-
-  return (
-    <Flex alignItems="flex-start" cursor="pointer" onClick={onClick}>
-      {getIcon}
-      <Text variant="description-large" pl="2px" color={colors.fill.action}>
-        {text}
-      </Text>
-    </Flex>
-  );
-};
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { Flex, Text } from '@chakra-ui/react';
+import React, { useMemo } from 'react';
+import colors from '../../theme/foundations/colors';
+import { Page, Video } from '../icons';
+
+export interface LinkProps {
+  variant: 'video' | 'page';
+  text: string;
+  onClick: () => void;
+}
+
+/**
+ * A functional React component utilized to render the `Link` component
+ */
+export const Link: React.FC<LinkProps> = ({ variant, text, onClick }) => {
+  const getIcon = useMemo(() => {
+    switch (variant) {
+      case 'page':
+        return <Page boxSize="12px" />;
+      case 'video':
+        return <Video boxSize="12px" />;
+    }
+  }, [variant]);
+
+  return (
+    <Flex alignItems="flex-start" cursor="pointer" onClick={onClick}>
+      {getIcon}
+      <Text variant="description-large" pl="2px" color={colors.fill.action}>
+        {text}
+      </Text>
+    </Flex>
+  );
+};

package/src/components/loading/LoadingIndicator.stories.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { LoadingIndicator, LoadingIndicatorProps } from '.';
-
-const meta: Meta<LoadingIndicatorProps> = {
-  title: 'Loading Indicator example',
-  component: LoadingIndicator,
-  argTypes: {
-    text: {
-      control: {
-        type: 'text',
-      },
-      description: 'The text of loading indicator - defaults to `Loading`',
-    },
-
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description:
-        'The chakra based size prop for the font size and spinner size',
-    },
-    thickness: {
-      control: {
-        type: 'text',
-      },
-      description: 'The thickness of spinner - defaults to `3px`',
-    },
-    speed: {
-      control: {
-        type: 'text',
-      },
-      description: 'The speed of spinner - defaults to `0.5s`',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<LoadingIndicatorProps> = args => (
-  <LoadingIndicator {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { LoadingIndicator, LoadingIndicatorProps } from '.';
+
+const meta: Meta<LoadingIndicatorProps> = {
+  title: 'Loading Indicator example',
+  component: LoadingIndicator,
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+      },
+      description: 'The text of loading indicator - defaults to `Loading`',
+    },
+
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description:
+        'The chakra based size prop for the font size and spinner size',
+    },
+    thickness: {
+      control: {
+        type: 'text',
+      },
+      description: 'The thickness of spinner - defaults to `3px`',
+    },
+    speed: {
+      control: {
+        type: 'text',
+      },
+      description: 'The speed of spinner - defaults to `0.5s`',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<LoadingIndicatorProps> = args => (
+  <LoadingIndicator {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/loading/index.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { Flex, Spinner, Text } from '@chakra-ui/react';
-import colors from '../../theme/foundations/colors';
-
-export interface LoadingIndicatorProps {
-  size?: 'sm' | 'md' | 'lg' | 'xs' | 'xl';
-  text?: string;
-  thickness?: string;
-  speed?: string;
-  className?: string;
-}
-
-/**
- * A functional React component utilized to render the `LoadingIndicator` component
- */
-export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
-  size = 'xl',
-  text = 'Loading',
-  thickness = '3px',
-  speed = '0.5s',
-  className,
-}) => {
-  return (
-    <Flex
-      flexDirection="column"
-      alignItems="center"
-      aria-label="loading-indicator"
-      className={`loading-indicator ${className ?? ''}`}
-    >
-      <Spinner
-        size={size}
-        color={colors.fill.action}
-        flex="none"
-        thickness={thickness}
-        speed={speed}
-        mb={2}
-      />
-      {text && (
-        <Text fontSize={size} lineHeight="shorter" fontWeight="semibold">
-          {text}
-        </Text>
-      )}
-    </Flex>
-  );
-};
+import React from 'react';
+import { Flex, Spinner, Text } from '@chakra-ui/react';
+import colors from '../../theme/foundations/colors';
+
+export interface LoadingIndicatorProps {
+  size?: 'sm' | 'md' | 'lg' | 'xs' | 'xl';
+  text?: string;
+  thickness?: string;
+  speed?: string;
+  className?: string;
+}
+
+/**
+ * A functional React component utilized to render the `LoadingIndicator` component
+ */
+export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
+  size = 'xl',
+  text = 'Loading',
+  thickness = '3px',
+  speed = '0.5s',
+  className,
+}) => {
+  return (
+    <Flex
+      flexDirection="column"
+      alignItems="center"
+      aria-label="loading-indicator"
+      className={`loading-indicator ${className ?? ''}`}
+    >
+      <Spinner
+        size={size}
+        color={colors.fill.action}
+        flex="none"
+        thickness={thickness}
+        speed={speed}
+        mb={2}
+      />
+      {text && (
+        <Text fontSize={size} lineHeight="shorter" fontWeight="semibold">
+          {text}
+        </Text>
+      )}
+    </Flex>
+  );
+};

package/src/components/modal/Modal.stories.tsx

@@ -1,36 +1,36 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Modal, ModalProps } from '.';
-import { ActionRow } from './components/action';
-
-const meta: Meta<ModalProps> = {
-  title: 'Modal example',
-  component: Modal,
-  argTypes: {},
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<ModalProps> = args => <Modal {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  isOpen: true,
-  onClose: () => null,
-  title: 'Window Title (Sentence Case)',
-  body: `Lorem ipsum dolor sit amet consectetur. Rhoncus purus maecenas sit
-        dictum. Accumsan ornare id suspendisse arcu vitae eget morbi ut cras.
-        Felis diam vulputate lorem ut nibh.
-     
-        Etiam tincidunt ut orci ullamcorper malesuada ultrices sit.`,
-  footer: (
-    <ActionRow
-      primaryDisabled={false}
-      primaryOnClick={() => null}
-      primaryText="Primary Button"
-      secondaryOnClick={() => null}
-      secondaryText="Secondary Button"
-    />
-  ),
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Modal, ModalProps } from '.';
+import { ActionRow } from './components/action';
+
+const meta: Meta<ModalProps> = {
+  title: 'Modal example',
+  component: Modal,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<ModalProps> = args => <Modal {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  isOpen: true,
+  onClose: () => null,
+  title: 'Window Title (Sentence Case)',
+  body: `Lorem ipsum dolor sit amet consectetur. Rhoncus purus maecenas sit
+        dictum. Accumsan ornare id suspendisse arcu vitae eget morbi ut cras.
+        Felis diam vulputate lorem ut nibh.
+     
+        Etiam tincidunt ut orci ullamcorper malesuada ultrices sit.`,
+  footer: (
+    <ActionRow
+      primaryDisabled={false}
+      primaryOnClick={() => null}
+      primaryText="Primary Button"
+      secondaryOnClick={() => null}
+      secondaryText="Secondary Button"
+    />
+  ),
+};