@veeqo/ui 0.0.1 → 0.0.3

package/src/components/InputGroup/__snapshots__/InputGroup.test.tsx.snap

@@ -0,0 +1,182 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly 1`] = `
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.c3 svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c1 {
+  position: relative;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  background-color: transparent;
+  white-space: nowrap;
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 24px;
+  padding-right: 24px;
+  border-radius: 8px;
+  font-size: 16px;
+}
+
+.c1:hover {
+  cursor: pointer;
+}
+
+.c1:disabled {
+  pointer-events: none;
+  cursor: unset !important;
+}
+
+.c1 > span {
+  position: relative;
+  top: -1px;
+}
+
+.c2 {
+  border-color: #CDD1D5;
+  background-color: white;
+  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
+  color: #37424D;
+}
+
+.c2:hover {
+  background-color: #FAFAFB;
+}
+
+.c2:active {
+  background-color: #FAFAFB;
+  border-color: #0079D1;
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+}
+
+.c2:focus-visible {
+  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
+  outline: 0;
+}
+
+.c2:disabled {
+  box-shadow: none !important;
+  background-color: #DFE3E8 !important;
+  border-color: #DFE3E8 !important;
+  color: #637381 !important;
+}
+
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c0 > * {
+  margin-left: 0;
+  margin-right: 0;
+  box-shadow: none;
+}
+
+.c0 > *:not(:last-child) {
+  border-right-width: 0 !important;
+}
+
+.c0 > *:focus,
+.c0 > *:active {
+  z-index: 5;
+  border-right-width: 1px !important;
+}
+
+.c0 > *:focus + *,
+.c0 > *:active + * {
+  border-left-width: 0 !important;
+}
+
+.c0 > *:not(:first-child):not(:last-child) {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.c0 > *:first-child {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.c0 > *:last-child {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <button
+      class="c1 c2"
+    >
+      <span
+        class="c3"
+      >
+        <span>
+          One
+        </span>
+      </span>
+    </button>
+    <button
+      class="c1 c2"
+    >
+      <span
+        class="c3"
+      >
+        <span>
+          Two
+        </span>
+      </span>
+    </button>
+    <button
+      class="c1 c2"
+    >
+      <span
+        class="c3"
+      >
+        <span>
+          Three
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;

package/src/components/InputGroup/index.ts

@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+
+export const InputGroup = styled.div`
+  display: flex;
+
+  & > * {
+    margin-left: 0;
+    margin-right: 0;
+    box-shadow: none;
+  }
+
+  & > *:not(:last-child) {
+    border-right-width: 0 !important;
+  }
+
+  & > *:hover {
+  }
+
+  & > *:focus,
+  & > *:active {
+    z-index: 5;
+    border-right-width: 1px !important;
+  }
+
+  & > *:focus + *,
+  & > *:active + * {
+    border-left-width: 0 !important;
+  }
+
+  & > *:not(:first-child):not(:last-child) {
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  & > *:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  & > *:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+`;

package/src/components/Loader/Docs.mdx

@@ -20,7 +20,7 @@ Type will default to TailSpin.
 Grid, TailSpin and ThreeDots loading states.
 
 <div style={{ display: 'flex', gap: '20px' }}>
-  <Story of={LoaderStories.Primary} />
+  <Story of={LoaderStories.Grid} />
   <Story of={LoaderStories.TailSpin} />
   <Story of={LoaderStories.ThreeDots} />
 </div>

package/src/components/Loader/Grid.tsx

@@ -8,7 +8,7 @@ export interface GridProps {
   label?: string;
 }
 
-const Grid = ({ width, height, className, color, label }: GridProps) => (
+export const Grid = ({ width, height, className, color, label }: GridProps) => (
   <svg
     width={width}
     height={height}
@@ -109,5 +109,3 @@ const Grid = ({ width, height, className, color, label }: GridProps) => (
     </circle>
   </svg>
 );
-
-export default Grid;

package/src/components/Loader/Loader.stories.tsx

@@ -10,7 +10,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = {
+export const Grid: Story = {
   argTypes: {
     type: {
       options: ['Grid', 'TailSpin', 'ThreeDots'],

package/src/components/Loader/Loader.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Loader } from './Loader';
+import { LoaderType } from './loaderTypes';
+
+describe('Loader', () => {
+  test.each(['Grid', 'TailSpin', 'ThreeDots', undefined] as (LoaderType | undefined)[])(
+    'renders %s loader',
+    (type) => {
+      const { container } = render(<Loader type={type} />);
+      expect(container.firstChild).toMatchSnapshot();
+    },
+  );
+});

package/src/components/Loader/Loader.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import TailSpin from './TailSpin';
-import Grid from './Grid';
-import ThreeDots from './ThreeDots';
+import { TailSpin } from './TailSpin';
+import { Grid } from './Grid';
+import { ThreeDots } from './ThreeDots';
 
 import { LoaderProps } from './loaderTypes';
 
@@ -20,8 +20,8 @@ export const Loader = ({
     case 'ThreeDots': {
       return <ThreeDots className={className} height={height} width={width} color={color} />;
     }
-    default:
-    case 'TailSpin': {
+    case 'TailSpin':
+    default: {
       return <TailSpin className={className} height={height} width={width} color={color} />;
     }
   }

package/src/components/Loader/TailSpin.tsx

@@ -8,7 +8,7 @@ export interface TailSpinProps {
   label?: string;
 }
 
-const TailSpin = ({ width, height, className, color, label }: TailSpinProps) => (
+export const TailSpin = ({ width, height, className, color, label }: TailSpinProps) => (
   <svg
     width={width}
     height={height}
@@ -50,5 +50,3 @@ const TailSpin = ({ width, height, className, color, label }: TailSpinProps) =>
     </g>
   </svg>
 );
-
-export default TailSpin;

package/src/components/Loader/ThreeDots.tsx

@@ -8,7 +8,7 @@ export interface ThreeDotsProps {
   label?: string;
 }
 
-const ThreeDots = ({ width, height, className, color, label }: ThreeDotsProps) => (
+export const ThreeDots = ({ width, height, className, color, label }: ThreeDotsProps) => (
   <svg
     width={width}
     height={height}
@@ -86,5 +86,3 @@ const ThreeDots = ({ width, height, className, color, label }: ThreeDotsProps) =
     </circle>
   </svg>
 );
-
-export default ThreeDots;

package/src/components/Loader/__snapshots__/Loader.test.tsx.snap

@@ -1,13 +1,315 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loader it renders correctly 1`] = `
+exports[`Loader renders Grid loader 1`] = `
 <svg
-  height={24}
+  fill="#588CB0"
+  height="24"
+  viewBox="0 0 105 105"
+  width="24"
+>
+  <circle
+    cx="12.5"
+    cy="12.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="0s"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+  <circle
+    cx="12.5"
+    cy="52.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="100ms"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+  <circle
+    cx="52.5"
+    cy="12.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="300ms"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+  <circle
+    cx="52.5"
+    cy="52.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="600ms"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+  <circle
+    cx="92.5"
+    cy="12.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="800ms"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+  <circle
+    cx="92.5"
+    cy="52.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="400ms"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+  <circle
+    cx="12.5"
+    cy="92.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="700ms"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+  <circle
+    cx="52.5"
+    cy="92.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="500ms"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+  <circle
+    cx="92.5"
+    cy="92.5"
+    r="12.5"
+  >
+    <animate
+      attributeName="fill-opacity"
+      begin="200ms"
+      calcMode="linear"
+      dur="1s"
+      repeatCount="indefinite"
+      values="1;.2;1"
+    />
+  </circle>
+</svg>
+`;
+
+exports[`Loader renders TailSpin loader 1`] = `
+<svg
+  height="24"
+  viewBox="0 0 38 38"
+  width="24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <defs>
+    <lineargradient
+      id="a"
+      x1="8.042%"
+      x2="65.682%"
+      y1="0%"
+      y2="23.865%"
+    >
+      <stop
+        offset="0%"
+        stop-color="#588CB0"
+        stop-opacity="0"
+      />
+      <stop
+        offset="63.146%"
+        stop-color="#588CB0"
+        stop-opacity=".631"
+      />
+      <stop
+        offset="100%"
+        stop-color="#588CB0"
+      />
+    </lineargradient>
+  </defs>
+  <g
+    fill="none"
+    fill-rule="evenodd"
+  >
+    <g
+      transform="translate(1 1)"
+    >
+      <path
+        d="M36 18c0-9.94-8.06-18-18-18"
+        id="Oval-2"
+        stroke="#588CB0"
+        stroke-width="2"
+      >
+        <animatetransform
+          attributeName="transform"
+          dur="0.9s"
+          from="0 18 18"
+          repeatCount="indefinite"
+          to="360 18 18"
+          type="rotate"
+        />
+      </path>
+      <circle
+        cx="36"
+        cy="18"
+        fill="#fff"
+        r="1"
+      >
+        <animatetransform
+          attributeName="transform"
+          dur="0.9s"
+          from="0 18 18"
+          repeatCount="indefinite"
+          to="360 18 18"
+          type="rotate"
+        />
+      </circle>
+    </g>
+  </g>
+</svg>
+`;
+
+exports[`Loader renders ThreeDots loader 1`] = `
+<svg
+  fill="#588CB0"
+  height="24"
+  viewBox="0 0 120 30"
+  width="24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <circle
+    cx="15"
+    cy="15"
+    r="15"
+  >
+    <animate
+      attributeName="r"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="15"
+      repeatCount="indefinite"
+      to="15"
+      values="15;9;15"
+    />
+    <animate
+      attributeName="fillOpacity"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="1"
+      repeatCount="indefinite"
+      to="1"
+      values="1;.5;1"
+    />
+  </circle>
+  <circle
+    attributeName="fillOpacity"
+    cx="60"
+    cy="15"
+    from="1"
+    r="9"
+    to="0.3"
+  >
+    <animate
+      attributeName="r"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="9"
+      repeatCount="indefinite"
+      to="9"
+      values="9;15;9"
+    />
+    <animate
+      attributeName="fillOpacity"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="0.5"
+      repeatCount="indefinite"
+      to="0.5"
+      values=".5;1;.5"
+    />
+  </circle>
+  <circle
+    cx="105"
+    cy="15"
+    r="15"
+  >
+    <animate
+      attributeName="r"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="15"
+      repeatCount="indefinite"
+      to="15"
+      values="15;9;15"
+    />
+    <animate
+      attributeName="fillOpacity"
+      begin="0s"
+      calcMode="linear"
+      dur="0.8s"
+      from="1"
+      repeatCount="indefinite"
+      to="1"
+      values="1;.5;1"
+    />
+  </circle>
+</svg>
+`;
+
+exports[`Loader renders undefined loader 1`] = `
+<svg
+  height="24"
   viewBox="0 0 38 38"
+  width="24"
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>
-    <linearGradient
+    <lineargradient
       id="a"
       x1="8.042%"
       x2="65.682%"
@@ -16,23 +318,23 @@ exports[`Loader it renders correctly 1`] = `
     >
       <stop
         offset="0%"
-        stopColor="#588CB0"
-        stopOpacity="0"
+        stop-color="#588CB0"
+        stop-opacity="0"
       />
       <stop
         offset="63.146%"
-        stopColor="#588CB0"
-        stopOpacity=".631"
+        stop-color="#588CB0"
+        stop-opacity=".631"
       />
       <stop
         offset="100%"
-        stopColor="#588CB0"
+        stop-color="#588CB0"
       />
-    </linearGradient>
+    </lineargradient>
   </defs>
   <g
     fill="none"
-    fillRule="evenodd"
+    fill-rule="evenodd"
   >
     <g
       transform="translate(1 1)"
@@ -41,9 +343,9 @@ exports[`Loader it renders correctly 1`] = `
         d="M36 18c0-9.94-8.06-18-18-18"
         id="Oval-2"
         stroke="#588CB0"
-        strokeWidth="2"
+        stroke-width="2"
       >
-        <animateTransform
+        <animatetransform
           attributeName="transform"
           dur="0.9s"
           from="0 18 18"
@@ -58,7 +360,7 @@ exports[`Loader it renders correctly 1`] = `
         fill="#fff"
         r="1"
       >
-        <animateTransform
+        <animatetransform
           attributeName="transform"
           dur="0.9s"
           from="0 18 18"