@xqmsg/ui-core 0.23.2 → 0.24.0

package/src/components/breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,66 +1,66 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Breadcrumbs, BreadcrumbsProps } from '.';
-import { Box, Button, Flex } from '@chakra-ui/react';
-import { useState } from '@storybook/addons';
-
-const meta: Meta<BreadcrumbsProps> = {
-  title: 'Breadcrumbs example',
-  component: Breadcrumbs,
-  argTypes: {
-    steps: {
-      description: 'The `steps` of the `Breadcrumbs` component',
-    },
-    activeStepIndex: {
-      description: 'The `activeStepIndex` of the `Breadcrumbs` component',
-    },
-    orientation: {
-      description: 'The `orientation` handler of the `Breadcrumbs` component',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<BreadcrumbsProps> = args => {
-  const [activeStepIndex, setActiveStepIndex] = useState(0);
-
-  return (
-    <>
-      <Box mb="20px">
-        <Breadcrumbs
-          {...args}
-          orientation="horizontal"
-          activeStepIndex={activeStepIndex}
-        />
-      </Box>
-      <Box mb="20px">
-        <Breadcrumbs
-          {...args}
-          orientation="vertical"
-          activeStepIndex={activeStepIndex}
-        />
-      </Box>
-      <Flex width="350px" justifyContent="space-between">
-        <Button
-          disabled={activeStepIndex === 0}
-          onClick={() => setActiveStepIndex(prevIndex => --prevIndex)}
-        >
-          Back
-        </Button>
-        <Button
-          disabled={activeStepIndex === 3}
-          onClick={() => setActiveStepIndex(prevIndex => ++prevIndex)}
-        >
-          Next
-        </Button>
-      </Flex>
-    </>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  steps: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Breadcrumbs, BreadcrumbsProps } from '.';
+import { Box, Button, Flex } from '@chakra-ui/react';
+import { useState } from '@storybook/addons';
+
+const meta: Meta<BreadcrumbsProps> = {
+  title: 'Breadcrumbs example',
+  component: Breadcrumbs,
+  argTypes: {
+    steps: {
+      description: 'The `steps` of the `Breadcrumbs` component',
+    },
+    activeStepIndex: {
+      description: 'The `activeStepIndex` of the `Breadcrumbs` component',
+    },
+    orientation: {
+      description: 'The `orientation` handler of the `Breadcrumbs` component',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<BreadcrumbsProps> = args => {
+  const [activeStepIndex, setActiveStepIndex] = useState(0);
+
+  return (
+    <>
+      <Box mb="20px">
+        <Breadcrumbs
+          {...args}
+          orientation="horizontal"
+          activeStepIndex={activeStepIndex}
+        />
+      </Box>
+      <Box mb="20px">
+        <Breadcrumbs
+          {...args}
+          orientation="vertical"
+          activeStepIndex={activeStepIndex}
+        />
+      </Box>
+      <Flex width="350px" justifyContent="space-between">
+        <Button
+          disabled={activeStepIndex === 0}
+          onClick={() => setActiveStepIndex(prevIndex => --prevIndex)}
+        >
+          Back
+        </Button>
+        <Button
+          disabled={activeStepIndex === 3}
+          onClick={() => setActiveStepIndex(prevIndex => ++prevIndex)}
+        >
+          Next
+        </Button>
+      </Flex>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  steps: ['Step 1', 'Step 2', 'Step 3', 'Step 4'],
+};

package/src/components/breadcrumbs/components/icon/index.tsx

@@ -1,38 +1,38 @@
-import React, { useMemo } from 'react';
-import { Flex, Text } from '@chakra-ui/react';
-import colors from '../../../../theme/foundations/colors';
-
-export interface IconProps {
-  step: number;
-  status: 'complete' | 'active' | 'inactive';
-}
-
-/**
- * A functional React component utilized to render the `Icon` for the `Breadcrumbs` component.
- */
-export const Icon: React.FC<IconProps> = ({ step, status }) => {
-  const getColors = useMemo(() => {
-    switch (status) {
-      case 'active':
-        return { bg: '#0082FF', color: colors.label.primary.dark };
-      case 'complete':
-        return { bg: '#7474800D', color: colors.label.primary.light };
-      case 'inactive':
-        return { bg: '#7474800D', color: colors.label.primary.light };
-    }
-  }, [status]);
-
-  return (
-    <Flex
-      boxSize="20px"
-      bg={getColors.bg}
-      borderRadius="100%"
-      alignItems="center"
-      justifyContent="center"
-    >
-      <Text fontSize="12px" color={getColors.color}>
-        {step}
-      </Text>
-    </Flex>
-  );
-};
+import React, { useMemo } from 'react';
+import { Flex, Text } from '@chakra-ui/react';
+import colors from '../../../../theme/foundations/colors';
+
+export interface IconProps {
+  step: number;
+  status: 'complete' | 'active' | 'inactive';
+}
+
+/**
+ * A functional React component utilized to render the `Icon` for the `Breadcrumbs` component.
+ */
+export const Icon: React.FC<IconProps> = ({ step, status }) => {
+  const getColors = useMemo(() => {
+    switch (status) {
+      case 'active':
+        return { bg: '#0082FF', color: colors.label.primary.dark };
+      case 'complete':
+        return { bg: '#7474800D', color: colors.label.primary.light };
+      case 'inactive':
+        return { bg: '#7474800D', color: colors.label.primary.light };
+    }
+  }, [status]);
+
+  return (
+    <Flex
+      boxSize="20px"
+      bg={getColors.bg}
+      borderRadius="100%"
+      alignItems="center"
+      justifyContent="center"
+    >
+      <Text fontSize="12px" color={getColors.color}>
+        {step}
+      </Text>
+    </Flex>
+  );
+};

package/src/components/breadcrumbs/components/label/index.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
-import { Box, Text } from '@chakra-ui/react';
-import colors from '../../../../theme/foundations/colors';
-
-export interface LabelProps {
-  label: string;
-}
-
-/**
- * A functional React component utilized to render the `Label` for the `Breadcrumbs` component.
- */
-export const Label: React.FC<LabelProps> = ({ label }) => {
-  return (
-    <Box pl="8px">
-      <Text color={colors.label.primary.light} fontSize="13px">
-        {label}
-      </Text>
-    </Box>
-  );
-};
+import React from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import colors from '../../../../theme/foundations/colors';
+
+export interface LabelProps {
+  label: string;
+}
+
+/**
+ * A functional React component utilized to render the `Label` for the `Breadcrumbs` component.
+ */
+export const Label: React.FC<LabelProps> = ({ label }) => {
+  return (
+    <Box pl="8px">
+      <Text color={colors.label.primary.light} fontSize="13px">
+        {label}
+      </Text>
+    </Box>
+  );
+};

package/src/components/breadcrumbs/index.tsx

@@ -1,48 +1,48 @@
-import React, { useCallback } from 'react';
-import { Flex } from '@chakra-ui/react';
-import { Icon } from './components/icon';
-import { Label } from './components/label';
-
-export interface BreadcrumbsProps {
-  steps: string[];
-  activeStepIndex: number;
-  orientation?: 'horizontal' | 'vertical';
-}
-
-/**
- * A functional React component utilized to render the `Breadcrumbs` component.
- *
- * The component will render a list of steps, based on the `steps` array, displaying the completed,
- * active, and incomplete steps. The orientation of the component may be either `horizontal` or
- * `vertical`.
- */
-export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
-  steps,
-  activeStepIndex,
-  orientation,
-}) => {
-  const getStatus = useCallback(
-    (stepIndex: number) => {
-      if (activeStepIndex > stepIndex) return 'complete';
-      if (activeStepIndex < stepIndex) return 'inactive';
-      return 'active';
-    },
-    [activeStepIndex]
-  );
-
-  return (
-    <Flex flexDir={orientation === 'horizontal' ? 'row' : 'column'}>
-      {steps.map((step, idx) => (
-        <Flex
-          key={idx}
-          alignItems="center"
-          pr={orientation === 'horizontal' ? '16px' : 0}
-          py="4px"
-        >
-          <Icon step={idx + 1} status={getStatus(idx)} />
-          <Label label={step} />
-        </Flex>
-      ))}
-    </Flex>
-  );
-};
+import React, { useCallback } from 'react';
+import { Flex } from '@chakra-ui/react';
+import { Icon } from './components/icon';
+import { Label } from './components/label';
+
+export interface BreadcrumbsProps {
+  steps: string[];
+  activeStepIndex: number;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+/**
+ * A functional React component utilized to render the `Breadcrumbs` component.
+ *
+ * The component will render a list of steps, based on the `steps` array, displaying the completed,
+ * active, and incomplete steps. The orientation of the component may be either `horizontal` or
+ * `vertical`.
+ */
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+  steps,
+  activeStepIndex,
+  orientation,
+}) => {
+  const getStatus = useCallback(
+    (stepIndex: number) => {
+      if (activeStepIndex > stepIndex) return 'complete';
+      if (activeStepIndex < stepIndex) return 'inactive';
+      return 'active';
+    },
+    [activeStepIndex]
+  );
+
+  return (
+    <Flex flexDir={orientation === 'horizontal' ? 'row' : 'column'}>
+      {steps.map((step, idx) => (
+        <Flex
+          key={idx}
+          alignItems="center"
+          pr={orientation === 'horizontal' ? '16px' : 0}
+          py="4px"
+        >
+          <Icon step={idx + 1} status={getStatus(idx)} />
+          <Label label={step} />
+        </Flex>
+      ))}
+    </Flex>
+  );
+};

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

@@ -1,140 +1,140 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Button, ButtonProps } from '.';
-import { Box, Flex } from '@chakra-ui/react';
-
-const meta: Meta<ButtonProps> = {
-  title: 'Button example',
-  component: Button,
-  argTypes: {
-    width: {
-      control: null,
-      description:
-        '`variable` adopts 100% of the width of the parent component, whereas `fixed` fits the label content to the button',
-    },
-    text: {
-      control: {
-        type: 'text',
-      },
-      description: 'The text within the button',
-    },
-    onClick: {
-      description: 'The callback for the onClick handler of the button',
-    },
-    type: {
-      control: 'select',
-      options: ['button', 'submit', 'reset'],
-      description: 'The type of the button',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state of the button',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<ButtonProps> = args => (
-  <Flex flexDir="column" height="150px" justifyContent="space-between">
-    <Box p={5}>
-      <Button {...args} text="Primary Fixed" variant="primary" width="fixed" />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Secondary Fixed"
-        variant="secondary"
-        width="fixed"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Tertiary Fixed"
-        variant="tertiary"
-        width="fixed"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Primary Variable"
-        variant="primary"
-        width="variable"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Secondary Variable"
-        variant="secondary"
-        width="variable"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Tertiary Variable"
-        variant="tertiary"
-        width="variable"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Primary Variable Flat"
-        variant="flat-primary"
-        width="variable"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Secondary Variable Flat"
-        variant="flat-secondary"
-        width="variable"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Tertiary Variable Flat"
-        variant="flat-tertiary"
-        width="variable"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Primary Fixed Flat"
-        variant="flat-primary"
-        width="fixed"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Secondary Fixed Flat"
-        variant="flat-secondary"
-        width="fixed"
-      />
-    </Box>
-    <Box p={5}>
-      <Button
-        {...args}
-        text="Tertiary Fixed Flat"
-        variant="flat-tertiary"
-        width="fixed"
-      />
-    </Box>
-  </Flex>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  onClick: () => alert('This is a button click!'),
-  type: 'button',
-  disabled: false,
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Button, ButtonProps } from '.';
+import { Box, Flex } from '@chakra-ui/react';
+
+const meta: Meta<ButtonProps> = {
+  title: 'Button example',
+  component: Button,
+  argTypes: {
+    width: {
+      control: null,
+      description:
+        '`variable` adopts 100% of the width of the parent component, whereas `fixed` fits the label content to the button',
+    },
+    text: {
+      control: {
+        type: 'text',
+      },
+      description: 'The text within the button',
+    },
+    onClick: {
+      description: 'The callback for the onClick handler of the button',
+    },
+    type: {
+      control: 'select',
+      options: ['button', 'submit', 'reset'],
+      description: 'The type of the button',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state of the button',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<ButtonProps> = args => (
+  <Flex flexDir="column" height="150px" justifyContent="space-between">
+    <Box p={5}>
+      <Button {...args} text="Primary Fixed" variant="primary" width="fixed" />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Secondary Fixed"
+        variant="secondary"
+        width="fixed"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Tertiary Fixed"
+        variant="tertiary"
+        width="fixed"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Primary Variable"
+        variant="primary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Secondary Variable"
+        variant="secondary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Tertiary Variable"
+        variant="tertiary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Primary Variable Flat"
+        variant="flat-primary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Secondary Variable Flat"
+        variant="flat-secondary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Tertiary Variable Flat"
+        variant="flat-tertiary"
+        width="variable"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Primary Fixed Flat"
+        variant="flat-primary"
+        width="fixed"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Secondary Fixed Flat"
+        variant="flat-secondary"
+        width="fixed"
+      />
+    </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="Tertiary Fixed Flat"
+        variant="flat-tertiary"
+        width="fixed"
+      />
+    </Box>
+  </Flex>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  onClick: () => alert('This is a button click!'),
+  type: 'button',
+  disabled: false,
+};

package/src/components/button/google/GoogleButton.stories.tsx

@@ -1,23 +1,23 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { GoogleButton, GoogleButtonProps } from '.';
-
-const meta: Meta<GoogleButtonProps> = {
-  title: 'Google Button example',
-  component: GoogleButton,
-  argTypes: {
-    onClick: {
-      description: 'The onClick callback for the google button',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<GoogleButtonProps> = args => <GoogleButton {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  onClick: () => alert('This is a google button click!'),
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { GoogleButton, GoogleButtonProps } from '.';
+
+const meta: Meta<GoogleButtonProps> = {
+  title: 'Google Button example',
+  component: GoogleButton,
+  argTypes: {
+    onClick: {
+      description: 'The onClick callback for the google button',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<GoogleButtonProps> = args => <GoogleButton {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  onClick: () => alert('This is a google button click!'),
+};