fix: add Inout to Docs, align colours [MDS-721]

docs/app/components/server/input/description.md

@@ -0,0 +1,3 @@
+Text input fields allow users to enter text and can be used to collect user feedback or enter information in data entry forms.
+
+These types of input fields are used on their own, or in combination with other inputs such as number entry, date picker, etc.

docs/app/components/server/input/examples/Default.tsx

@@ -0,0 +1,5 @@
+import Input from '@heathmont/moon-base-tw/lib/input/Input';
+
+export const Default = () => <Input aria-label="default" />;
+
+export default Default;

docs/app/components/server/input/page.tsx

@@ -0,0 +1,22 @@
+import { Default } from '@/app/components/server/input/examples/Default';
+import ExampleSection from '@/app/components/shared/ExampleSection';
+import QuickNav from '@/app/components/shared/QuickNav';
+import { getExamples } from '@/app/utils/getExamples';
+import { MDX } from '@/components/MDX';
+
+export default async function Home() {
+  const { server } = await getExamples();
+  const examplesList = Object.keys(server.input.examples);
+  return (
+    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+      <h1 className="font-medium text-moon-32">Input</h1>
+      <MDX markdown={server.input.description} />
+      <QuickNav items={examplesList} />
+      <ExampleSection
+        title="Default"
+        component={<Default />}
+        code={server.input.examples.Default}
+      />
+    </div>
+  );
+}

docs/app/components/types.ts

@@ -42,6 +42,12 @@ export interface Examples {
         Default: 'string';
       };
     };
+    input: {
+      description: 'string';
+      examples: {
+        Default: 'string';
+      };
+    };
     tag: {
       description: 'string';
       examples: {

workspaces/base/src/chip/Chip.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import type ChipProps from './private/types/ChipProps';
-import setPadding from './private/utils/setPadding';
+import getPadding from './private/utils/getPadding';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 const Chip = forwardRef<HTMLButtonElement, ChipProps>(
@@ -28,7 +28,7 @@ const Chip = forwardRef<HTMLButtonElement, ChipProps>(
         'hover:text-piccolo user-select-none',
         iconOnly ? 'center' : 'space-between',
         size === 'sm' ? 'h-8 gap-1' : 'h-10 gap-2',
-        setPadding({ size, iconLeft, iconRight, iconOnly }),
+        getPadding({ size, iconLeft, iconRight, iconOnly }),
         variant === 'ghost' ? '' : 'bg-gohan',
         isActive ? 'bg-jiren text-piccolo' : 'text-bulma',
         isStroke && 'hover:shadow-interactive',

workspaces/base/src/chip/private/utils/setPadding.ts → workspaces/base/src/chip/private/utils/getPadding.ts

@@ -1,6 +1,6 @@
 import type ChipProps from '../types/ChipProps';
 
-const setPadding = ({
+const getPadding = ({
   size,
   iconLeft,
   iconRight,
@@ -30,4 +30,4 @@ const setPadding = ({
   return `p-2`;
 };
 
-export default setPadding;
+export default getPadding;

workspaces/base/src/input/Input.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
-import mergeClassnames from '../mergeClassnames/mergeClassnames';
 import getSizeStyles from './private/getSizeStyles';
+import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 export interface InputProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -23,7 +23,7 @@ const InputPure = forwardRef<HTMLInputElement, InputProps>(
         disabled={disabled}
         className={mergeClassnames(
           'block w-full max-w-full py-0 px-4 m-0 appearance-none text-[1rem] text-bulma transition-shadow box-border relative z-[2]',
-          'bg-gohan shadow-input hover:shadow-input-hov',
+          'bg-goku shadow-input hover:shadow-input-hov',
           'focus:shadow-input-focus focus:outline-none',
           'focus-visible::shadow-input-focus focus-visible::outline-none',
           error &&

workspaces/base/src/loader/Loader.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type LoaderProps from './private/types/LoaderProps';
-import setDivBorder from './private/utils/setDivBorder';
-import setSize from './private/utils/setSize';
+import getDivBorder from './private/utils/getDivBorder';
+import getSize from './private/utils/getSize';
 import mergeClassnames from '../mergeClassnames/mergeClassnames';
 
 const Loader = ({
@@ -13,11 +13,11 @@ const Loader = ({
     aria-label={ariaLabel}
     role="alert"
     aria-busy="true"
-    className={mergeClassnames(setSize(size), 'relative rounded-full')}
+    className={mergeClassnames(getSize(size), 'relative rounded-full')}
   >
     <div
       className={mergeClassnames(
-        setDivBorder(size),
+        getDivBorder(size),
         color,
         'absolute w-full h-full rounded-full animate-[rotation_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite] border-x-transparent border-b-transparent'
       )}
@@ -26,7 +26,7 @@ const Loader = ({
     />
     <div
       className={mergeClassnames(
-        setDivBorder(size),
+        getDivBorder(size),
         color,
         'absolute w-full h-full rounded-full animate-[rotation_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite] border-x-transparent border-b-transparent'
       )}
@@ -35,7 +35,7 @@ const Loader = ({
     />
     <div
       className={mergeClassnames(
-        setDivBorder(size),
+        getDivBorder(size),
         color,
         'absolute w-full h-full rounded-full animate-[rotation_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite] border-x-transparent border-b-transparent'
       )}
@@ -44,7 +44,7 @@ const Loader = ({
     />
     <div
       className={mergeClassnames(
-        setDivBorder(size),
+        getDivBorder(size),
         color,
         'absolute w-full h-full rounded-full animate-[rotation_1.2s_cubic-bezier(0.5,0,0.5,1)_infinite] border-x-transparent border-b-transparent'
       )}

workspaces/base/src/loader/private/utils/setDivBorder.ts → workspaces/base/src/loader/private/utils/getDivBorder.ts

@@ -1,6 +1,6 @@
 import type LoaderSize from '../types/LoaderSize';
 
-const setDivBorder = (size?: LoaderSize) => {
+const getDivBorder = (size?: LoaderSize) => {
   switch (size) {
     case '2xs':
     case 'xs':
@@ -11,4 +11,4 @@ const setDivBorder = (size?: LoaderSize) => {
   }
 };
 
-export default setDivBorder;
+export default getDivBorder;

workspaces/base/src/loader/private/utils/setSize.ts → workspaces/base/src/loader/private/utils/getSize.ts

@@ -1,6 +1,6 @@
 import type LoaderSize from '../types/LoaderSize';
 
-const setSize = (size?: LoaderSize) => {
+const getSize = (size?: LoaderSize) => {
   switch (size) {
     case '2xs':
       return 'w-4 h-4';
@@ -15,4 +15,4 @@ const setSize = (size?: LoaderSize) => {
   }
 };
 
-export default setSize;
+export default getSize;