@memori.ai/memori-react 1.0.0-alpha.1

package/src/components/icons/Sound.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Sound = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"></path>
+  </svg>
+);
+
+export default Sound;

package/src/components/icons/SoundDeactivated.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const SoundDeactivated = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    viewBox="0 0 40 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      d="M25.085.277c-.264 0-.531.071-.777.236L8.482 10.857H1.161a.716.716 0 00-.715.714V24.43c0 .392.322.714.715.714h7.321l15.826 10.344c.246.16.518.236.777.236.745 0 1.433-.593 1.433-1.433V1.71c0-.84-.688-1.433-1.433-1.433zM23.304 30.99l-13.063-8.54-.803-.522H3.66V14.07h5.777l.799-.522 13.067-8.54V30.99zM39.534 15.148L36.967 18l2.567 2.852a1.09 1.09 0 010 1.427l-1.283 1.426a.845.845 0 01-1.284 0L34.4 20.852l-2.567 2.852a.845.845 0 01-1.283 0l-1.284-1.426a1.09 1.09 0 010-1.426L31.833 18l-2.567-2.852a1.09 1.09 0 010-1.426l1.283-1.427a.845.845 0 011.284 0l2.567 2.853 2.567-2.853a.845.845 0 011.284 0l1.283 1.427a1.09 1.09 0 010 1.426z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SoundDeactivated;

package/src/components/icons/Telegram.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const Telegram = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 496 512"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      fill="currentColor"
+      d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"
+    ></path>
+  </svg>
+);
+
+export default Telegram;

package/src/components/icons/Translation.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Translation = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M140 188h584v164h76V144c0-17.7-14.3-32-32-32H96c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h544v-76H140V188z"></path>
+    <path d="M414.3 256h-60.6c-3.4 0-6.4 2.2-7.6 5.4L219 629.4c-.3.8-.4 1.7-.4 2.6 0 4.4 3.6 8 8 8h55.1c3.4 0 6.4-2.2 7.6-5.4L322 540h196.2L422 261.4c-1.3-3.2-4.3-5.4-7.7-5.4zm12.4 228h-85.5L384 360.2 426.7 484zM936 528H800v-93c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v93H592c-13.3 0-24 10.7-24 24v176c0 13.3 10.7 24 24 24h136v152c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V752h136c13.3 0 24-10.7 24-24V552c0-13.3-10.7-24-24-24zM728 680h-88v-80h88v80zm160 0h-88v-80h88v80z"></path>
+  </svg>
+);
+
+export default Translation;

package/src/components/icons/Twitter.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Twitter = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0 0 75-94 336.64 336.64 0 0 1-108.2 41.2A170.1 170.1 0 0 0 672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 0 0-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 0 1-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 0 1-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z" />
+  </svg>
+);
+
+export default Twitter;

package/src/components/icons/User.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const User = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" />
+  </svg>
+);
+
+export default User;

package/src/components/icons/Warning.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const Warning = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"></path>
+  </svg>
+);
+
+export default Warning;

package/src/components/icons/WhatsApp.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const WhatsApp = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M713.5 599.9c-10.9-5.6-65.2-32.2-75.3-35.8-10.1-3.8-17.5-5.6-24.8 5.6-7.4 11.1-28.4 35.8-35 43.3-6.4 7.4-12.9 8.3-23.8 2.8-64.8-32.4-107.3-57.8-150-131.1-11.3-19.5 11.3-18.1 32.4-60.2 3.6-7.4 1.8-13.7-1-19.3-2.8-5.6-24.8-59.8-34-81.9-8.9-21.5-18.1-18.5-24.8-18.9-6.4-.4-13.7-.4-21.1-.4-7.4 0-19.3 2.8-29.4 13.7-10.1 11.1-38.6 37.8-38.6 92s39.5 106.7 44.9 114.1c5.6 7.4 77.7 118.6 188.4 166.5 70 30.2 97.4 32.8 132.4 27.6 21.3-3.2 65.2-26.6 74.3-52.5 9.1-25.8 9.1-47.9 6.4-52.5-2.7-4.9-10.1-7.7-21-13z"></path>
+    <path d="M925.2 338.4c-22.6-53.7-55-101.9-96.3-143.3-41.3-41.3-89.5-73.8-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9-53.3 22.8-101.1 55.2-142 96.5-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9.3 69.4 16.9 138.3 48 199.9v152c0 25.4 20.6 46 46 46h152.1c61.6 31.1 130.5 47.7 199.9 48h2.1c59.9 0 118-11.6 172.7-34.3 53.5-22.3 101.6-54.3 142.8-95.2 41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path>
+  </svg>
+);
+
+export default WhatsApp;

package/src/components/icons/icons.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+
+interface Props {
+  iconName: string;
+}
+
+interface IconProps {
+  className?: string;
+  title?: string;
+}
+
+const IconShowcaseItem = ({ iconName, ...iconProps }: Props & IconProps) => {
+  const Icon = require(`./${iconName}`).default;
+  return <Icon {...iconProps} />;
+};
+
+const IconsShowcase = (iconProps: IconProps) => {
+  const icons = require.context('./', false, /\.tsx$/);
+  const iconNames = icons
+    .keys()
+    .map(key => key.replace('./', '').replace('.tsx', ''))
+    .filter(name => !name.includes('stories'));
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(7, 1fr)',
+        gridGap: '3rem',
+      }}
+    >
+      {iconNames.map(iconName => (
+        <div key={iconName}>
+          <IconShowcaseItem iconName={iconName} {...iconProps} />
+          <p>{iconName}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const meta: Meta = {
+  title: 'Icons',
+  component: IconsShowcase,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<IconProps> = args => <IconsShowcase {...args} />;
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Showcase = Template.bind({});
+
+Showcase.args = {};

package/src/components/icons/loading.css

@@ -0,0 +1,14 @@
+.memori-loading-icon {
+    display: inline-block;
+    animation: memori-loading 1s infinite linear;
+}
+
+@keyframes memori-loading {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/components/layouts/Default.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import Spin from '../ui/Spin';
+
+export interface Props {
+  header?: JSX.Element | null;
+  avatar: JSX.Element;
+  chat?: JSX.Element | null;
+  startPanel: JSX.Element;
+  integrationStyle?: JSX.Element | null;
+  integrationBackground?: JSX.Element | null;
+  changeMode?: JSX.Element | null;
+  sessionId?: string;
+  hasUserActivatedSpeak?: boolean;
+  showInstruct?: boolean;
+  loading?: boolean;
+}
+
+const Default: React.FC<Props> = ({
+  header,
+  avatar,
+  chat,
+  startPanel,
+  integrationStyle,
+  integrationBackground,
+  changeMode,
+  sessionId,
+  hasUserActivatedSpeak,
+  showInstruct = false,
+  loading = false,
+}) => (
+  <>
+    {integrationStyle}
+    {integrationBackground}
+
+    <Spin spinning={loading}>
+      {showInstruct && changeMode}
+
+      {header}
+
+      <div className="memori--grid">
+        <div className="memori--grid-column memori--grid-column-left">
+          {avatar}
+        </div>
+        <div className="memori--grid-column memori--grid-column-right">
+          {sessionId && hasUserActivatedSpeak ? chat : startPanel}
+        </div>
+      </div>
+    </Spin>
+  </>
+);
+
+export default Default;

package/src/components/ui/Button.css

@@ -0,0 +1,138 @@
+:root,
+#root {
+    --memori-primary: rgb(102, 103, 171);
+    --memori-primary-text: #fff;
+    --memori-button-radius: 5px;
+    --memori-button-padding: 0.5rem 1.5rem;
+    --memori-button-border-color: #d9d9d9;
+    --memori-button-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
+}
+
+.memori-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 15px;
+    border: 1px solid var(--memori-button-border-color);
+    border-radius: var(--memori-button-radius);
+    background: #fff;
+    box-shadow: var(--memori-button-box-shadow);
+    color: #333;
+    font-family: 'Exo 2', sans-serif;
+    font-size: 14px;
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.memori-button:hover {
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
+    color: #333;
+    cursor: pointer;
+}
+
+.memori-button:hover,
+.memori-button:focus {
+    border-color: var(--memori-primary);
+    color: var(--memori-primary);
+}
+
+.memori-button:focus {
+    outline-color: var(--memori-primary);
+}
+
+.memori-button:active {
+    box-shadow: inset var(--memori-button-box-shadow);
+}
+
+.memori-button--padded {
+    padding: var(--memori-button-padding);
+}
+
+.memori-button--block {
+    display: block;
+    width: 100%;
+}
+
+.memori-button--primary {
+    background: var(--memori-primary);
+    color: var(--memori-primary-text);
+}
+
+.memori-button--primary:hover,
+.memori-button--primary:focus {
+    color: var(--memori-primary-text);
+}
+
+.memori-button--primary:active {
+    transform: scale(0.95);
+}
+
+.memori-button--outlined {
+    border-color: var(--memori-primary);
+    background: none;
+    color: var(--memori-primary);
+}
+
+.memori-button--outlined:hover,
+.memori-button--outlined:focus {
+    border-color: var(--memori-primary);
+    background-color: var(--memori-primary);
+    color: var(--memori-primary-text);
+}
+
+.memori-button--outlined:active {
+    transform: scale(0.95);
+}
+
+.memori-button--ghost {
+    border: 1px solid transparent;
+    background: none;
+    box-shadow: none;
+}
+
+.memori-button--ghost:hover,
+.memori-button--ghost:focus {
+    border-color: transparent;
+    background: rgba(0, 0, 0, 0.04);
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.04);
+    color: inherit;
+}
+
+.memori-button--ghost:focus {
+    border: 1px solid var(--memori-primary);
+}
+
+.memori-button--square {
+    border-radius: 0;
+}
+
+.memori-button--rounded {
+    border-radius: var(--memori-button-radius);
+}
+
+.memori-button--circle {
+    padding: 0.75em;
+    border-radius: 50%;
+    aspect-ratio: 1/1;
+}
+
+.memori-button--icon {
+    display: inline-flex;
+    color: currentColor;
+}
+
+.memori-button--icon svg {
+    width: 1.25em;
+    height: 1.25em;
+    fill: currentColor;
+    font-size: 1em;
+    line-height: 1;
+}
+
+.memori-button--with-icon .memori-button--icon {
+    margin-right: 0.5em;
+}
+
+.memori-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+}

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

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import Button, { Props } from './Button';
+import Eye from '../icons/Eye';
+
+const meta: Meta = {
+  title: 'UI/Button',
+  component: Button,
+  argTypes: {
+    children: {
+      control: {
+        type: 'text',
+      },
+    },
+    className: {
+      control: {
+        type: 'text',
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+        options: ['button', 'submit', 'reset'],
+      },
+    },
+    primary: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    outlined: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    ghost: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    padded: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    block: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    danger: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <Button {...args} />;
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Click me',
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: 'Click me',
+  primary: true,
+};
+
+export const Outlined = Template.bind({});
+Outlined.args = {
+  children: 'Click me',
+  outlined: true,
+};
+
+export const Ghost = Template.bind({});
+Ghost.args = {
+  children: 'Click me',
+  ghost: true,
+};
+
+export const PrimaryOutlined = Template.bind({});
+PrimaryOutlined.args = {
+  children: 'Click me',
+  primary: true,
+  outlined: true,
+};
+
+export const Square = Template.bind({});
+Square.args = {
+  children: 'Click me',
+  shape: 'square',
+};
+
+export const Padded = Template.bind({});
+Padded.args = {
+  children: 'Click me',
+  padded: true,
+};
+
+export const Block = Template.bind({});
+Block.args = {
+  children: 'Click me',
+  block: true,
+};
+
+export const Circle = Template.bind({});
+Circle.args = {
+  shape: 'circle',
+  icon: <Eye />,
+  padded: false,
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  children: 'Click me',
+  icon: <Eye />,
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  children: 'Click me',
+  danger: true,
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  children: 'Click me',
+  loading: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  children: 'Click me',
+  disabled: true,
+};

package/src/components/ui/Button.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Button from './Button';
+import Loading from '../icons/Loading';
+
+it('renders empty Button unchanged', () => {
+  const { container } = render(<Button />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button unchanged', () => {
+  const { container } = render(<Button>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button primary unchanged', () => {
+  const { container } = render(<Button primary>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button outlined unchanged', () => {
+  const { container } = render(<Button outlined>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button padded unchanged', () => {
+  const { container } = render(<Button padded>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button block unchanged', () => {
+  const { container } = render(<Button block>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button with icon unchanged', () => {
+  const { container } = render(<Button icon={<Loading />}>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button with icon only unchanged', () => {
+  const { container } = render(<Button icon={<Loading />} />);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button danger unchanged', () => {
+  const { container } = render(<Button danger>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button loading unchanged', () => {
+  const { container } = render(<Button loading>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button disabled unchanged', () => {
+  const { container } = render(<Button disabled>Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button with title unchanged', () => {
+  const { container } = render(<Button title="Button title">Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button square unchanged', () => {
+  const { container } = render(<Button shape="square">Click me</Button>);
+  expect(container).toMatchSnapshot();
+});
+
+it('renders Button circle unchanged', () => {
+  const { container } = render(<Button shape="circle" icon={<Loading />} />);
+  expect(container).toMatchSnapshot();
+});