From ce3bdc5c77f65c0094146d135ae97ec389e54a84 Mon Sep 17 00:00:00 2001
From: Marios Antonoudiou <mariosant@sent.com>
Date: Sat, 22 Feb 2020 21:30:52 +0000
Subject: [PATCH] Support optional classnames

---
 README.md          | 12 +++++++++++-
 src/index.ts       |  4 ++--
 test/index.test.ts |  5 +++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c02cabd..c2302ac 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,17 @@ Using cn is pretty simple. It is inspired by the well known [Classnames](https:/
 import cn from '@mariosant/cn';
 
 const isActive = true;
-const SomeComponent = () => <Button className={cn('btn', [isActive, 'active', 'inactive'])} .../>
+const SomeComponent = () => <Button className={cn('btn', [isActive, 'active'])} .../> // classnames would be 'btn active'
+```
+
+Why the tuple syntax, you may ask. Well, tuple allows to pass an alternative classname, optionally.
+Consider the following:
+
+```javascript
+import cn from '@mariosant/cn';
+
+const isActive = false;
+const SomeComponent = () => <Button className={cn('btn', [isActive, 'active', 'inactive'])} .../> // classnames would be 'btn inactive'
 ```
 
 ## Development
diff --git a/src/index.ts b/src/index.ts
index 78be2d5..eb8f978 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
-type Tuple = [boolean, string, string];
+type Tuple = [boolean, string, string?];
 
-const handleTuple = ([conditional, yeap, nope]: Tuple) =>
+const handleTuple = ([conditional, yeap, nope = '']: Tuple) =>
 	conditional ? yeap : nope;
 
 const handleString = (c: string) => c;
diff --git a/test/index.test.ts b/test/index.test.ts
index 5bcebd0..c280eb8 100644
--- a/test/index.test.ts
+++ b/test/index.test.ts
@@ -8,6 +8,11 @@ test('outputs multiple classes', () => {
 	expect(className('test', 'work')).toEqual('test work');
 });
 
+test('works with simple conditions', () => {
+	expect(className([true, 'works'])).toEqual('works');
+	expect(className([false, 'works'])).toEqual('');
+});
+
 test('works with conditions', () => {
 	expect(className([true, 'works', 'does not work'])).toEqual('works');
 	expect(className([false, 'works', 'does not work'])).toEqual('does not work');