version 0.3.1 with tertiary buttons

Author: john-raymon

dist/lite-react-ui.es.js

@@ -11,7 +11,7 @@
     "@mdx-js/react": "^1.6.18",
     "@next/mdx": "^9.1.1",
     "@tailwindcss/aspect-ratio": "^0.2.1",
-    "lite-react-ui": "^0.3.0",
+    "lite-react-ui": "^0.3.1",
     "next": "latest",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

dist/lite-react-ui.umd.js

@@ -11,14 +11,23 @@ The button component by default renders with a button type of
 
 <br/>
 
-<div className="flex space-x-4">
+<div className="flex flex-col space-y-2 twr-bg-grey-400">
   <Button>
     Hello World 🌍
   </Button>
 
   <Button buttonType="secondary">
     Hello World 🌍
   </Button>
+
+  <Button buttonType="tertiary">
+    Hello World 🌍
+  </Button>
+  <div className="w-full bg-black py-3 px-1 rounded-lg">
+    <Button className="w-full" inverted buttonType="tertiary">
+      Hello World 🌍
+    </Button>
+  </div>
 </div>
 
 
@@ -31,6 +40,14 @@ The button component by default renders with a button type of
   <Button buttonType="secondary">
     Hello World 🌍
   </Button>
+
+  <Button buttonType="tertiary">
+    Hello World 🌍
+  </Button>
+
+  <Button inverted buttonType="tertiary">
+    Hello World 🌍
+  </Button>
 ```
 
 <br/>

dist/style.css

@@ -2193,10 +2193,10 @@ lite-react-ui@^0.2.6:
     react "^17.0.0"
     react-dom "^17.0.0"
 
-lite-react-ui@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/lite-react-ui/-/lite-react-ui-0.3.0.tgz#8b8ed4075a570ab2320ed2e28c7ad1dc4f602356"
-  integrity sha512-7iJF7tSjmZ2C3t7gVGzptgnu2wqjS0CpLG5PQro7ytuEd4hDS9MbnDGcknXn/ceWCT1sCtapsTG8KcD30HyZGQ==
+lite-react-ui@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/lite-react-ui/-/lite-react-ui-0.3.1.tgz#6641e4503512fa3b03c0b3b900f9a352527374c4"
+  integrity sha512-sBIj4s9N/4Yv01+ZUaABeZLdyUdSavt2TKrtMjYOvLhP+/sfltu+XsifDW1jQlyzWLfv0Yb8QbM/9JfARw+vSg==
   dependencies:
     concurrently "^6.2.0"
     lite-react-ui "^0.2.6"

docs/package.json

@@ -24,7 +24,7 @@ function App() {
   return (
     <div className="twr-p-10">
       <ul class="twr-space-y-5">
-        <li className="twr-flex twr-space-x-4">
+        <li className="twr-flex twr-flex-col twr-space-x-4 twr-space-y-2 twr-flex-wrap">
           <p className="">{`<Button> component:`}</p>
           <Button loading="true" className="twr-w-auto">
             Test
@@ -41,6 +41,23 @@ function App() {
           <Button buttonType="secondary" disabled className="twr-w-auto">
             Test
           </Button>
+          <Button buttonType="tertiary" disabled className="twr-w-auto">
+            Test
+          </Button>
+          <Button buttonType="tertiary" className="twr-w-auto">
+            Test
+          </Button>
+          <Button buttonType="tertiary" loading className="twr-w-auto">
+            Test
+          </Button>
+          <div className="twr-flex twr-space-x-2 twr-bg-black twr-rounded-lg twr-p-2">
+            <Button inverted buttonType="tertiary" className="twr-w-auto">
+              Test
+            </Button>
+            <Button inverted buttonType="tertiary" loading className="twr-w-auto">
+              Test
+            </Button>
+          </div>
         </li>
         <li>
           <p>{`<Navigation> component:`}</p>

docs/pages/buttons.mdx

@@ -1,6 +1,6 @@
 {
   "name": "lite-react-ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "homepage": "htps://github.com/john-raymon/lite-react-UI-components",
   "author": "john-raymon",
   "repository": {

docs/yarn.lock

@@ -6,10 +6,53 @@
   twr-rounded-lg
   twr-transition
   twr-outline-none
+  twr-items-center
+  twr-justify-center
   twr-text-center
   twr-text-black;
   box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.1);
   padding: calc(1rem - 2px) calc(2rem - 2px) calc(1rem - 2px) calc(2rem - 2px);
+  
+  &__tertiary {
+    @apply twr-bg-transparent twr-text-black twr-outline-none twr-border-2 twr-border-black;
+    
+    &--inverted {
+      @apply twr-text-white twr-border-white;
+
+      &:hover:enabled {
+        @apply twr-outline-none twr-text-black twr-bg-white twr-border-white;
+      }
+
+      &:not(:active):focus:enabled {
+        @apply twr-outline-none twr-text-black;
+        background: rgba(248, 248, 248, 0.9);
+        border: 2px solid #A9A9A9;
+      }
+
+      &:active:enabled {
+        @apply twr-outline-none twr-text-black;
+        background: rgba(142, 142, 142, 0.73);
+        border: 2px solid #B8B8B8;
+      }
+    }
+
+    &:not(&--inverted):not(:active):focus:enabled {
+      @apply twr-outline-none twr-text-white;
+      background: #414141;
+      border: 2px solid #000000;
+    }
+
+    &:not(&--inverted):active:enabled {
+      @apply twr-outline-none twr-text-white;
+      background: rgba(38, 38, 38, 0.93);
+      border: 2px solid #000000;
+    }
+
+    &:not(&--inverted):not(:focus):hover:enabled {
+      @apply twr-outline-none twr-text-white twr-bg-black;
+      border-color: #000000;
+    }
+  }
 
   &__secondary {
     @apply twr-bg-black twr-text-white twr-outline-none twr-border-2 twr-border-black;

example/main.jsx

@@ -12,12 +12,13 @@ export default function Button({
   loading = false,
   loadingText = 'Loading...',
   active = null, // for explicitlity forcing a focus state
+  inverted = false,
   ...otherProps
 }) {
   return (
     <button 
       id={id} 
-      className={`twr-button twr-button__${buttonType} ${active ? `twr-button__${buttonType}--focus` : (active === null ? '' : `twr-button__${buttonType}--no-focus`)} ${className}`}
+      className={`twr-button twr-button__${buttonType} ${inverted ? `twr-button__tertiary--inverted` : ''}  ${active ? `twr-button__${buttonType}--focus` : (active === null ? '' : `twr-button__${buttonType}--no-focus`)} ${className}`}
       type={type}
       {...otherProps}      
     >