💄 #24 - style: make the paginator's inputs transparent

src/components/form/input/input.scss

@@ -56,4 +56,8 @@
   &[type="file"] {
     border: none;
   }
+
+  &--variant-transparent {
+    background-color: transparent;
+  }
 }

src/components/form/input/input.stories.tsx

@@ -5,6 +5,7 @@ import { Formik } from "formik";
 import React from "react";
 
 import { Button } from "../../button";
+import { Page } from "../../page";
 import { FORM_TEST_DECORATOR } from "../.storybook/decorators";
 import { Input } from "./input";
 
@@ -168,6 +169,24 @@ export const InputWithCustomSize: Story = {
   decorators: [FORM_TEST_DECORATOR],
 };
 
+export const TransparentInput: Story = {
+  args: {
+    name: "input",
+    placeholder: "e.g. John Doe",
+    type: "text",
+    variant: "transparent",
+  },
+  argTypes: FORM_TEST_ARG_TYPES,
+  decorators: [
+    FORM_TEST_DECORATOR,
+    (Story) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
+};
+
 export const UsageWithFormik: Story = {
   args: {
     name: "input",

src/components/form/input/input.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import React, { useEffect, useState } from "react";
 
 import { eventFactory } from "../eventFactory";
@@ -7,6 +8,9 @@ export type InputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "value"
 > & {
+  /** The variant (style) of the input. */
+  variant?: "normal" | "transparent";
+
   /** Gets called when the value is changed */
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
 
@@ -23,6 +27,7 @@ export type InputProps = Omit<
 export const Input: React.FC<InputProps> = ({
   type = "text",
   value,
+  variant = "normal",
   onChange,
   ...props
 }) => {
@@ -60,7 +65,7 @@ export const Input: React.FC<InputProps> = ({
   return (
     <input
       ref={inputRef}
-      className="mykn-input"
+      className={clsx("mykn-input", `mykn-input--variant-${variant}`)}
       type={type}
       value={valueState}
       onChange={_onChange}

src/components/form/select/select.scss

@@ -22,6 +22,10 @@
     width: fit-content;
   }
 
+  &--variant-transparent {
+    background-color: transparent;
+  }
+
   .mykn-icon {
     transition: transform var(--animation-duration-medium)
       var(--animation-timing-function);

src/components/form/select/select.stories.tsx

@@ -1,10 +1,11 @@
 import { action } from "@storybook/addon-actions";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
 import { Formik } from "formik";
 import React from "react";
 
 import { Button } from "../../button";
+import { Page } from "../../page";
 import { FORM_TEST_DECORATOR } from "../.storybook/decorators";
 import { Select } from "./select";
 
@@ -75,6 +76,19 @@ export const SelectComponent: Story = {
   },
 };
 
+export const TransparentSelect = {
+  ...SelectComponent,
+  args: { ...SelectComponent.args, variant: "transparent" },
+  decorators: [
+    ...(SelectComponent.decorators as StoryFn[]),
+    (Story: StoryFn) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
+};
+
 export const UsageWithFormik: Story = {
   args: {
     options: [

src/components/form/select/select.tsx

@@ -51,6 +51,9 @@ export type SelectProps = React.HTMLAttributes<HTMLDivElement> & {
   size?: "fit-content";
 
   value?: Option["value"] | null;
+
+  /** The variant (style) of the input. */
+  variant?: "normal" | "transparent";
 } & SelectRequiredConditional;
 
 type SelectRequiredConditional =
@@ -92,6 +95,7 @@ export const Select: React.FC<SelectProps> = ({
   required = false,
   size,
   value = null,
+  variant = "normal",
   ...props
 }) => {
   const fakeInputRef = React.useRef<HTMLSelectElement>(null);
@@ -179,7 +183,7 @@ export const Select: React.FC<SelectProps> = ({
   return (
     <>
       <div
-        className={clsx("mykn-select", {
+        className={clsx("mykn-select", `mykn-select--variant-${variant}`, {
           "mykn-select--selected": selectedIndex,
           [`mykn-select--size-${size}`]: size,
         })}

src/components/paginator/paginator.tsx

@@ -189,6 +189,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
               required={true}
               size="fit-content"
               value={pageSizeState}
+              variant="transparent"
               onChange={handlePageSizeChange}
             />
           </>
@@ -201,6 +202,7 @@ export const Paginator: React.FC<PaginatorProps> = ({
           size={String(pageCount).length}
           type="number"
           value={pageState}
+          variant="transparent"
           onChange={handlePageChange}
         ></Input>
       </div>