Merge pull request #49 from kodiak-packages/general-button-fixes

General component fixes

src/components/Button/Button.module.css

@@ -7,6 +7,7 @@
   cursor: pointer;
   display: flex;
   flex-direction: row;
+  justify-content: center;
   align-items: center;
 }
 

src/components/Input/Input.mdx

@@ -51,9 +51,7 @@ A Input can be used to let the user insert text using key strokes. A crucial for
 
 ```css
 .countryCode {
-  width: 30px;
-}
-.countryCode input {
+  width: 50px;
   text-align: center;
 }
 ```

src/components/Input/Input.module.css

@@ -1,7 +1,3 @@
-.container {
-  width: 100%;
-}
-
 .input {
   font: inherit;
   box-sizing: border-box;
@@ -10,6 +6,7 @@
   border-radius: var(--border-radius-small);
   border: 1px solid var(--color-neutral-4);
   padding: 6.5px 14px;
+  width: 100%;
 }
 
 .input::placeholder {

src/components/Input/Input.test.tsx

@@ -99,9 +99,9 @@ describe('Input', () => {
 
   test('className prop', () => {
     const className = 'center';
-    const component = <Input {...defaultButtonProps} className={className} />;
+    const component = <Input {...defaultButtonProps} name="classname" className={className} />;
     const { getByTestId } = render(component);
-    const containerElement = getByTestId('container');
+    const containerElement = getByTestId('input-classname');
 
     const renderedClassNames = containerElement.className.split(' ');
     expect(renderedClassNames).toContain(className);

src/components/Input/Input.tsx

@@ -36,27 +36,30 @@ const Input = React.forwardRef<HTMLInputElement, Props>(
     }: Props,
     ref,
   ) => {
-    const mergedContainerClassName = classNames(cssReset.ventura, styles.container, className);
-    const mergedInputClassName = classNames(styles.input, {
-      [styles.containsError]: Boolean(isInvalid),
-    });
+    const inputClassNames = classNames(
+      cssReset.ventura,
+      styles.input,
+      {
+        [styles.containsError]: Boolean(isInvalid),
+      },
+      className,
+    );
+
     return (
-      <div className={mergedContainerClassName} data-testid="container">
-        <input
-          name={name}
-          value={value}
-          onChange={onChange}
-          placeholder={placeholder}
-          type={type}
-          spellCheck={spellCheck}
-          autoComplete={autoComplete ? 'on' : 'off'}
-          maxLength={maxLength}
-          ref={ref}
-          className={mergedInputClassName}
-          data-testid={`input-${name}`}
-          onBlur={onBlur}
-        />
-      </div>
+      <input
+        name={name}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        type={type}
+        spellCheck={spellCheck}
+        autoComplete={autoComplete ? 'on' : 'off'}
+        maxLength={maxLength}
+        ref={ref}
+        className={inputClassNames}
+        data-testid={`input-${name}`}
+        onBlur={onBlur}
+      />
     );
   },
 );

src/components/Input/__snapshots__/Input.test.tsx.snap

@@ -2,19 +2,14 @@
 
 exports[`Input default snapshot 1`] = `
 <DocumentFragment>
-  <div
-    class="ventura container"
-    data-testid="container"
-  >
-    <input
-      autocomplete="off"
-      class="input"
-      data-testid="input-firstname"
-      name="firstname"
-      spellcheck="false"
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    autocomplete="off"
+    class="ventura input"
+    data-testid="input-firstname"
+    name="firstname"
+    spellcheck="false"
+    type="text"
+    value=""
+  />
 </DocumentFragment>
 `;

src/components/Input/docAssets/docs.module.css

@@ -1,7 +1,4 @@
 .countryCode {
   width: 50px;
-}
-
-.countryCode input {
   text-align: center;
 }

src/components/utils/Spinner/Spinner.module.css

@@ -19,14 +19,15 @@
 .svg {
   animation: loadingKeyframes 2s linear infinite;
   height: 12px;
+  color: inherit;
 }
 
 .circle {
   stroke-dashoffset: 6;
   stroke-dasharray: 300;
   stroke-width: 16;
   stroke-miterlimit: 10;
-  stroke-linecap: 10;
+  stroke-linecap: round;
   animation: loadingCircleKeyFrames 1.6s cubic-bezier(0.4, 0.15, 0.6, 0.85) infinite;
   stroke: currentColor;
   fill: transparent;

src/css-reset.module.css

@@ -9,4 +9,5 @@
 .ventura *:before,
 .ventura *:after {
   box-sizing: border-box;
+  font-family: var(--font-family);
 }

tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "module": "esnext",
     "strict": true,
     "noImplicitAny": true,
     "noImplicitThis": true,