@xqmsg/ui-core 0.16.4 → 0.16.6

package/package.json

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

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

@@ -1,32 +1,29 @@
 import React from 'react';
-import { Button, Text, Icon } from '@chakra-ui/react';
-import GoogleLogo from './assets/GoogleLogo.svg';
+import { Button, ButtonProps } from '..';
+import { ReactComponent as GoogleLogo } from './assets/GoogleLogo.svg';
 
-export interface GoogleButtonProps {
+export interface GoogleButtonProps extends Partial<ButtonProps> {
   onClick: () => void;
 }
 
 /**
  * A functional React component utilized to render the `GoogleButton` component
  */
-export const GoogleButton: React.FC<GoogleButtonProps> = ({ onClick }) => {
+export const GoogleButton: React.FC<GoogleButtonProps> = ({
+  onClick,
+  type,
+}) => {
   return (
     <Button
       onClick={onClick}
-      variant="plain"
-      size="lg"
-      borderRadius="2px"
-      aria-label="google-login-button"
+      variant="secondary"
+      ariaLabel="google-login-button"
       className="google-button"
-      px={4}
-      leftIcon={<Icon as={GoogleLogo} width={18} height={18} mr={3} />}
-      fontFamily="Roboto, sans-serif"
-      fontWeight="500"
-      fontSize={14}
-      backgroundColor="white"
-      boxShadow="rgba(0, 0, 0, 0.24) 0px 0px 1px 0px, rgba(0, 0, 0, 0.24) 0px 2px 2px 0px"
-    >
-      <Text color="rgba(0, 0, 0, 0.54)">{'Sign in with Google'}</Text>
-    </Button>
+      leftIcon={<GoogleLogo width={18} height={18} mr={3} />}
+      text="Sign in with Google"
+      width="variable"
+      type={type}
+      color="#000"
+    />
   );
 };

package/src/components/button/index.tsx

@@ -11,6 +11,9 @@ export interface ButtonProps {
   ariaLabel: string;
   disabled?: boolean;
   className?: string;
+  leftIcon?: JSX.Element;
+  rightIcon?: JSX.Element;
+  color?: string;
 }
 
 /**
@@ -25,6 +28,9 @@ export const Button: React.FC<ButtonProps> = ({
   disabled,
   className,
   width,
+  rightIcon,
+  leftIcon,
+  color,
 }) => {
   return (
     <ChakraButton
@@ -35,6 +41,9 @@ export const Button: React.FC<ButtonProps> = ({
       aria-label={ariaLabel}
       className={className}
       width={width === 'fixed' ? '100%' : 'fit-content'}
+      rightIcon={rightIcon}
+      leftIcon={leftIcon}
+      color={color}
     >
       {text}
     </ChakraButton>

package/src/components/button/microsoft/MicrosoftButton.stories.tsx

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