Text box Colors, HTML Semantic (#20)

creativecodeco · Feb 6, 2024 · bcf2c36 · bcf2c36
1 parent 37daabb
commit bcf2c36
Show file tree

Hide file tree

Showing 11 changed files with 794 additions and 731 deletions.
diff --git a/Changelog.md b/Changelog.md
@@ -1,7 +1,14 @@
-<!-- markdownlint-configure-file { "MD024": { "allow_different_nesting": true } } -->
+<!-- markdownlint-configure-file { "MD024": false } -->
 # Changelog
 
-## v0.4.1 - Button (Jan 22 - 2024)
+## v0.4.2 - Text Box (Jan 22 - 2024)
+
+### 📶 Changes
+
+- Text Box semantic Html
+- Text Box colors
+
+## v0.4.2 - Button (Jan 22 - 2024)
 
 ### 📶 Changes
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.4.1",
+  "version": "0.4.2",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -48,41 +48,41 @@
     "usehooks-ts": "2.9.1"
   },
   "dependencies": {
-    "postcss": "8.4.33",
+    "postcss": "8.4.34",
     "postcss-import": "16.0.0",
     "react": "18.2.0",
-    "react-hook-form": "7.49.3",
+    "react-hook-form": "7.50.1",
     "tailwindcss": "3.4.1",
-    "usehooks-ts": "2.9.5"
+    "usehooks-ts": "2.13.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.7",
-    "@babel/preset-env": "7.23.8",
+    "@babel/core": "7.23.9",
+    "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@jest/globals": "29.7.0",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-interactions": "7.6.10",
-    "@storybook/addon-links": "7.6.10",
-    "@storybook/addon-mdx-gfm": "7.6.10",
-    "@storybook/blocks": "7.6.10",
-    "@storybook/react": "7.6.10",
-    "@storybook/react-webpack5": "7.6.10",
-    "@storybook/test": "7.6.10",
+    "@storybook/addon-essentials": "7.6.12",
+    "@storybook/addon-interactions": "7.6.12",
+    "@storybook/addon-links": "7.6.12",
+    "@storybook/addon-mdx-gfm": "7.6.12",
+    "@storybook/blocks": "7.6.12",
+    "@storybook/react": "7.6.12",
+    "@storybook/react-webpack5": "7.6.12",
+    "@storybook/test": "7.6.12",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.2.1",
-    "@testing-library/react": "14.1.2",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
-    "@types/jest": "29.5.11",
-    "@types/node": "20.11.5",
-    "@types/react": "18.2.48",
+    "@types/jest": "29.5.12",
+    "@types/node": "20.11.16",
+    "@types/react": "18.2.55",
     "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
+    "@typescript-eslint/eslint-plugin": "6.21.0",
     "autoprefixer": "10.4.17",
-    "chromatic": "10.3.1",
+    "chromatic": "10.7.1",
     "classnames": "2.5.1",
     "cpx2": "7.0.1",
-    "daisyui": "4.6.0",
+    "daisyui": "4.6.1",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
@@ -98,17 +98,17 @@
     "eslint-plugin-standard": "5.0.0",
     "eslint-plugin-storybook": "0.6.15",
     "eslint-plugin-unused-imports": "3.0.0",
-    "husky": "8.0.3",
+    "husky": "9.0.10",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-transform-css": "6.0.1",
     "postcss-cli": "11.0.0",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "prop-types": "15.8.1",
     "react-dom": "18.2.0",
     "react-icons": "5.0.1",
-    "storybook": "7.6.10",
+    "storybook": "7.6.12",
     "storybook-addon-themes": "6.1.0",
     "string-width": "7.1.0",
     "ts-jest": "29.1.2",

diff --git a/src/theme/text-box.css b/src/theme/text-box.css
@@ -1,48 +1,50 @@
-.text-box-size-xs {
-  @apply input-xs;
+.text-box-size {
+  &-xs {
+    @apply input-xs;
 
-  &.text-box-with-left-icon {
-    @apply pl-8;
-  }
+    &.text-box-with-left-icon {
+      @apply pl-8;
+    }
 
-  &.text-box-with-right-icon {
-    @apply pr-8;
+    &.text-box-with-right-icon {
+      @apply pr-8;
+    }
   }
-}
 
-.text-box-size-sm {
-  @apply input-sm;
+  &-sm {
+    @apply input-sm;
 
-  &.text-box-with-left-icon {
-    @apply pl-8;
-  }
+    &.text-box-with-left-icon {
+      @apply pl-8;
+    }
 
-  &.text-box-with-right-icon {
-    @apply pr-8;
+    &.text-box-with-right-icon {
+      @apply pr-8;
+    }
   }
-}
 
-.text-box-size-md {
-  @apply input-md;
+  &-md {
+    @apply input-md;
 
-  &.text-box-with-left-icon {
-    @apply pl-9;
-  }
+    &.text-box-with-left-icon {
+      @apply pl-9;
+    }
 
-  &.text-box-with-right-icon {
-    @apply pr-9;
+    &.text-box-with-right-icon {
+      @apply pr-9;
+    }
   }
-}
 
-.text-box-size-lg {
-  @apply input-lg;
+  &-lg {
+    @apply input-lg;
 
-  &.text-box-with-left-icon {
-    @apply pl-9;
-  }
+    &.text-box-with-left-icon {
+      @apply pl-9;
+    }
 
-  &.text-box-with-right-icon {
-    @apply pr-9;
+    &.text-box-with-right-icon {
+      @apply pr-9;
+    }
   }
 }
 
@@ -85,3 +87,27 @@
     @apply top-6 right-3;
   }
 }
+
+.text-box-color {
+  &-primary {
+    @apply input-primary;
+  }
+  &-secondary {
+    @apply input-secondary;
+  }
+  &-accent {
+    @apply input-accent;
+  }
+  &-success {
+    @apply input-success;
+  }
+  &-warning {
+    @apply input-warning;
+  }
+  &-info {
+    @apply input-info;
+  }
+  &-error {
+    @apply input-error;
+  }
+}
diff --git a/src/types/ui/forms/text-box.types.ts b/src/types/ui/forms/text-box.types.ts
@@ -1,5 +1,5 @@
 import type { IconType } from 'react-icons';
-import type { ErrorType, SizeType } from '@/types';
+import type { ColorType, ErrorType, SizeType } from '@/types';
 
 export interface TextBoxType
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
@@ -11,6 +11,7 @@ export interface TextBoxType
   disabled?: boolean;
 
   size?: SizeType;
+  color?: ColorType;
 
   leftIcon?: IconType;
   rightIcon?: IconType;

diff --git a/src/ui/components/button/button.test.tsx b/src/ui/components/button/button.test.tsx
@@ -98,7 +98,6 @@ describe('<Button />', () => {
     const { getByRole } = render(<Button loading>Button</Button>);
 
     const button = getByRole('button');
-    console.log(button.firstChild);
 
     expect((button.firstChild as HTMLSpanElement).className).toBe(
       'span-loading'

diff --git a/src/ui/forms/dropdown/__snapshots__/dropdown.test.tsx.snap b/src/ui/forms/dropdown/__snapshots__/dropdown.test.tsx.snap
@@ -5,8 +5,9 @@ exports[`<Dropdown /> snapshot 1`] = `
   <div
     class="dropdown block"
   >
-    <div
+    <label
       class="form-control w-full flex"
+      for="test"
     >
       <div
         class="relative"
@@ -34,7 +35,7 @@ exports[`<Dropdown /> snapshot 1`] = `
           />
         </svg>
       </div>
-    </div>
+    </label>
   </div>
 </div>
 `;
@@ -44,19 +45,15 @@ exports[`<Dropdown /> snapshot full 1`] = `
   <div
     class="dropdown block"
   >
-    <div
+    <label
       class="form-control w-full flex"
+      for="test"
     >
-      <div
-        class="label"
+      <span
+        class="label-text"
       >
-        <label
-          class="label-text"
-          for="test"
-        >
-          Label
-        </label>
-      </div>
+        Label
+      </span>
       <div
         class="relative"
       >
@@ -70,7 +67,7 @@ exports[`<Dropdown /> snapshot full 1`] = `
           value=""
         />
         <svg
-          class="text-box-right-icon text-box-right-icon-size-md cursor-pointer"
+          class="text-box-right-icon text-box-right-icon-size-md cursor-not-allowed"
           fill="currentColor"
           height="1em"
           stroke="currentColor"
@@ -89,7 +86,7 @@ exports[`<Dropdown /> snapshot full 1`] = `
       >
         Error
       </p>
-    </div>
+    </label>
   </div>
 </div>
 `;
diff --git a/src/ui/forms/text-box/__snapshots__/text-box.test.tsx.snap b/src/ui/forms/text-box/__snapshots__/text-box.test.tsx.snap
@@ -2,8 +2,9 @@
 
 exports[`<TextBox /> snapshot 1`] = `
 <div>
-  <div
+  <label
     class="form-control w-full flex"
+    for="test"
   >
     <div
       class="relative"
@@ -15,30 +16,26 @@ exports[`<TextBox /> snapshot 1`] = `
         name="test"
       />
     </div>
-  </div>
+  </label>
 </div>
 `;
 
 exports[`<TextBox /> snapshot full 1`] = `
 <div>
-  <div
+  <label
     class="form-control w-full flex"
+    for="test"
   >
-    <div
-      class="label"
+    <span
+      class="label-text"
     >
-      <label
-        class="label-text"
-        for="test"
-      >
-        Label
-      </label>
-    </div>
+      Label
+    </span>
     <div
       class="relative"
     >
       <svg
-        class="text-box-left-icon text-box-left-icon-size-lg"
+        class="text-box-left-icon text-box-left-icon-size-lg cursor-not-allowed"
         fill="currentColor"
         height="1em"
         stroke="currentColor"
@@ -59,7 +56,7 @@ exports[`<TextBox /> snapshot full 1`] = `
         name="test"
       />
       <svg
-        class="text-box-right-icon text-box-right-icon-size-lg cursor-pointer"
+        class="text-box-right-icon text-box-right-icon-size-lg cursor-not-allowed"
         fill="currentColor"
         height="1em"
         stroke="currentColor"
@@ -78,6 +75,6 @@ exports[`<TextBox /> snapshot full 1`] = `
     >
       Error
     </p>
-  </div>
+  </label>
 </div>
 `;