create button component and default primary style

Author: john-raymon

dist/lite-react-ui.es.js

@@ -2,7 +2,7 @@ import React, {useState} from 'react'
 import ReactDOM from 'react-dom'
 import components from './buildOrSource';
 
-const { TextField, TextArea, Navigation } = components;
+const { TextField, TextArea, Navigation, Button } = components;
 
 const _navLinks = [
   {
@@ -30,6 +30,18 @@ function App() {
   return (
     <div className="twr-p-10">
       <ul class="twr-space-y-5">
+        <li className="twr-flex twr-space-x-4">
+          <p className="">{`<Button> component:`}</p>
+          <Button loading="true" className="twr-w-auto">
+            Test
+          </Button>            
+          <Button className="twr-font-bold">
+            Sign up now 🏄🏽‍♂️
+          </Button>            
+          <Button loading="true" disabled={true}>
+            Test
+          </Button>            
+        </li>
         <li>
           <p>{`<Navigation> component:`}</p>
           <Navigation onNavLinkClick={() => alert('clicked')} className="twr-sticky twr-top-0 twr-z-20 twr-mb-4" navLinks={_navLinks} />

dist/lite-react-ui.umd.js

@@ -31,6 +31,7 @@
     "concurrently": "^6.2.0",
     "lite-react-ui": "^0.2.0",
     "npm-watch": "^0.9.0",
+    "postcss": "^8.3.5",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },

dist/style.css

@@ -0,0 +1,37 @@
+.twr-button {
+  @apply twr-relative
+  twr-flex
+  twr-py-4
+  twr-px-8
+  twr-rounded-lg
+  twr-transition
+  twr-outline-none
+  twr-text-center;
+  &__primary {
+    @apply twr-outline-none;
+    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
+    background: #FFFFFF;
+    &:hover:enabled {
+      @apply twr-outline-none;
+      background: #ECECEC;
+      box-shadow: 0px 0px 19px 2px rgba(0, 0, 0, 0.04);
+    }
+    &:focus:enabled {
+      @apply twr-outline-none twr-border-2;
+      /* offset 2px sides from increasing border-width of 0px to 2px */
+      padding: calc(1rem - 2px) calc(2rem - 2px) calc(1rem - 2px) calc(2rem - 2px);
+      background: #ECECEC;
+      border-color: rgba(179, 179, 179, 0.26);
+      box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
+    }
+    &:active:enabled {
+      background: #FCFCFC;
+      border-color: rgba(178, 178, 178, 0.26);
+      box-shadow: none;
+    }
+    &:disabled {
+      @apply twr-cursor-not-allowed twr-opacity-50;
+      box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
+    }
+  }
+}

example/main.jsx

@@ -0,0 +1,3 @@
+.twr-loading {
+
+}

package.json

@@ -0,0 +1,41 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Loading from './Loading';
+
+export default function Button({
+  id = '',
+  className = '',
+  inputClassName = '',
+  type = '',
+  text = '',
+  children = '',
+  buttonType = 'primary', 
+  loading = false,
+  loadingText = 'Loading...',
+  ...otherProps
+}) {
+  return (
+    <button 
+      id={id} 
+      className={`twr-button twr-button__${buttonType} ${className}`}
+      inputClassName={inputClassName}
+      type={type}
+      {...otherProps}      
+    >
+      <div className="twr-mx-auto">
+        { 
+          loading ?
+          (<div className="twr-flex twr-items-center twr-space-x-2 twr-mx-auto">
+            <div className="flex twr-w-5 twr-h-5">
+              <Loading /> 
+            </div>
+            <p>
+              {loadingText}
+            </p>
+          </div>) :
+        children || text
+        }
+      </div>
+    </button>
+  )
+}

src/assets/styles/buttons.css

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+export default function Loading() {
+  return (
+    <svg className="twr-animate-spin twr-w-full twr-h-full" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="twr-opacity-10" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+      <path className="twr-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    </svg>
+  );
+}