feat/Checkbox

assets/icons/index.tsx

@@ -9,8 +9,8 @@ const LoadingSpinner: FC = () => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M18.65 8.35L15.86 11.14C15.54 11.46 15.76 12 16.21 12H18C18 15.31 15.31 18 12 18C11.21 18 10.44 17.85 9.75003 17.56C9.39003 17.41 8.98003 17.52 8.71003 17.79C8.20003 18.3 8.38003 19.16 9.05003 19.43C9.96003 19.8 10.96 20 12 20C16.42 20 20 16.42 20 12H21.79C22.24 12 22.46 11.46 22.14 11.15L19.35 8.36C19.16 8.16 18.84 8.16 18.65 8.35V8.35ZM6.00003 12C6.00003 8.69 8.69003 6 12 6C12.79 6 13.56 6.15 14.25 6.44C14.61 6.59 15.02 6.48 15.29 6.21C15.8 5.7 15.62 4.84 14.95 4.57C14.04 4.2 13.04 4 12 4C7.58003 4 4.00003 7.58 4.00003 12H2.21003C1.76003 12 1.54003 12.54 1.86003 12.85L4.65003 15.64C4.85003 15.84 5.16003 15.84 5.36003 15.64L8.15003 12.85C8.46003 12.54 8.24003 12 7.79003 12H6.00003Z"
       fill="white"
     />

package.json

@@ -23,8 +23,9 @@
     "lint": "tsdx lint",
     "watch:css": "postcss src/tailwind.css -o src/index.css -w",
     "prepare": "tsdx build",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 ",
     "build-storybook": "build-storybook -o ./storybook-static",
+    "storybook-run": "npm-run-all --parallel watch:css storybook",
     "semantic-release": "semantic-release"
   },
   "peerDependencies": {

src/buttons/Button.tsx

@@ -23,7 +23,7 @@ const ImageLoading = styled.div`
 `
 
 const Button: FC<Props> = ({
-  className,
+  className='',
   onClick,
   children,
   disabled,
@@ -60,45 +60,45 @@ const Button: FC<Props> = ({
       dimensions: `${selectedDimension.height} ${selectedDimension.width}`,
       textUtils: 'text-white font-poppins border-white rounded-lg',
       hoverState:
-        'hover:bg-blue-100 focus:outline-none border-2 hover:border-blue-300 hover:text-blue-400',
+        'hover:bg-blue-100 focus:outline-none border hover:border-blue-300 hover:text-blue-300',
     },
     BlueDarkButton: {
       borderColor: 'border-transparent',
-      backgroundColor: 'bg-blue-600',
+      backgroundColor: 'bg-blue-400',
       dimensions: `${selectedDimension.height} ${selectedDimension.width}`,
       textUtils: 'text-white font-poppins rounded',
       hoverState:
-        'hover:bg-blue-100 focus:outline-none border-2 hover:border-blue-500 hover:text-blue-400',
+        'hover:bg-blue-100 focus:outline-none border hover:border-blue-400 hover:text-blue-400',
     },
     BlueDarkTransparentOutlinedButton: {
-      borderColor: 'border-2 border-solid border-blue-500',
+      borderColor: 'border border-solid border-blue-400',
       backgroundColor: 'bg-transparent',
       dimensions: `${selectedDimension.height} ${selectedDimension.width}`,
       textUtils: 'text-blue-400 font-poppins rounded',
-      hoverState: 'hover:bg-blue-500 focus:outline-none hover:text-white',
+      hoverState: 'hover:bg-blue-400 focus:outline-none hover:text-white',
     },
     GreenButton: {
       borderColor: 'border-transparent',
-      backgroundColor: 'bg-green-600',
+      backgroundColor: 'bg-green-300',
       dimensions: `${selectedDimension.height} ${selectedDimension.width}`,
       textUtils: 'text-white font-poppins rounded',
       hoverState:
-        'hover:bg-green-100 focus:outline-none border-2 hover:border-green-500 hover:text-green-500',
+        'hover:bg-transparent focus:outline-none border hover:border-green-300 hover:text-green-300',
     },
     BlueLightestOutlinedButton: {
-      borderColor: 'border-2 border-solid border-blue-500',
+      borderColor: 'border border-solid border-blue-300',
       backgroundColor: 'bg-blue-100',
       dimensions: `${selectedDimension.height} ${selectedDimension.width}`,
-      textUtils: 'text-blue-500 font-poppins rounded',
-      hoverState: 'hover:bg-blue-500 focus:outline-none hover:text-white',
+      textUtils: 'text-blue-300 font-poppins rounded',
+      hoverState: 'hover:bg-blue-300 focus:outline-none hover:text-white',
     },
     RedButton: {
       borderColor: 'border-transparent',
-      backgroundColor: 'bg-red-600',
+      backgroundColor: 'bg-red-300',
       dimensions: `${selectedDimension.height} ${selectedDimension.width}`,
       textUtils: 'text-white font-poppins rounded',
       hoverState:
-        'hover:bg-red-100 focus:outline-none  border-2 hover:border-red-500 hover:text-red-500',
+        'hover:bg-transparent focus:outline-none  border hover:border-red-300 hover:text-red-300',
     },
   }