From cbbffc2d31119bcc3f32a9b3f137ded3a5b9de13 Mon Sep 17 00:00:00 2001
From: ahmetkuslular <ahmetkuslular@gmail.com>
Date: Sun, 8 Dec 2019 05:59:48 +0300
Subject: [PATCH] If the variant sent does not match, the default variant usage
 is added

---
 .gitignore         |  1 +
 README.md          | 21 +++++++++++++++++++++
 example/src/App.js |  1 +
 index.js           |  6 +++++-
 test.js            | 33 +++++++++++++++++++++++++++++++++
 5 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index c426448..d24ac11 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules
 *.log
 example/bundle.js
 dist
+.idea
diff --git a/README.md b/README.md
index edbbad3..560cfe1 100644
--- a/README.md
+++ b/README.md
@@ -198,3 +198,24 @@ Button.defaultProps = {
 <Button variant="success"/>
 <Button variant="warning"/>
 ```
+
+if an undefined variant arrives, the default variant is used.
+
+```js
+import styled from 'styled-components';
+import theme from 'styled-theming';
+
+const backgroundColor = theme.variants('mode', 'variant', {
+  default: { light: 'gray', dark: 'darkgray' },
+  primary: { light: 'blue', dark: 'darkblue' },
+  success: { light: 'green', dark: 'darkgreen' },
+  warning: { light: 'orange', dark: 'darkorange' },
+});
+
+const Button = styled.button`
+  background-color: ${backgroundColor};
+`;
+
+<Button variant="noVariant"/> // default
+<Button variant="default"/> // default
+```
\ No newline at end of file
diff --git a/example/src/App.js b/example/src/App.js
index dd01b8a..44ed90e 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -54,6 +54,7 @@ export default class App extends React.Component {
           <Button kind="success" onClick={this.handleToggleMode}>Toggle Mode</Button>
           <Button kind="warning" onClick={this.handleToggleSize}>Toggle Size</Button>
           <Button kind="danger" onClick={this.handleToggleMode}>Toggle Mode</Button>
+          <Button kind="noKind" onClick={this.handleToggleMode}>Toggle Size</Button>
         </Box>
       </ThemeProvider>
     );
diff --git a/index.js b/index.js
index c2aed94..eb7345e 100644
--- a/index.js
+++ b/index.js
@@ -30,7 +30,11 @@ function theme(name, values) {
 theme.variants = function(name, prop, values) {
   return function(props) {
     var variant = props[prop] && values[props[prop]];
-    return variant && getThemeValue(name, props, variant);
+    var defaultVariant = props[prop] && values['default'];
+
+    return variant
+        ? getThemeValue(name, props, variant)
+        : getThemeValue(name, props, defaultVariant)
   };
 };
 
diff --git a/test.js b/test.js
index 75d6490..2a92e52 100644
--- a/test.js
+++ b/test.js
@@ -111,3 +111,36 @@ describe('theme.variants()', () => {
     expect(fn({ kind: 'fancy', theme: { mode: themes => themes.dark } })).toBe('#0f0');
   });
 });
+
+describe('theme.variants()', () => {
+  const fn = theme.variants('mode', 'kind', {
+    default: { light: '#fff', dark: '#000' },
+    fancy: { light: '#f0f', dark: '#0f0' },
+  });
+
+  it('should create a function that returns a matching prop when passed a string', () => {
+    expect(fn({ kind: 'default', theme: { mode: 'light' } })).toBe('#fff');
+    expect(fn({ kind: 'default', theme: { mode: 'dark' } })).toBe('#000');
+    expect(fn({ kind: 'fancy', theme: { mode: 'light' } })).toBe('#f0f');
+    expect(fn({ kind: 'fancy', theme: { mode: 'dark' } })).toBe('#0f0');
+  });
+
+  it('should create a function that returns calls a passed function', () => {
+    expect(fn({ kind: 'default', theme: { mode: themes => themes.light } })).toBe('#fff');
+    expect(fn({ kind: 'default', theme: { mode: themes => themes.dark } })).toBe('#000');
+    expect(fn({ kind: 'fancy', theme: { mode: themes => themes.light } })).toBe('#f0f');
+    expect(fn({ kind: 'fancy', theme: { mode: themes => themes.dark } })).toBe('#0f0');
+  });
+});
+
+describe('defaultVariant', () => {
+  const fn = theme.variants('mode', 'kind', {
+    default: { light: '#fff', dark: '#000' },
+    fancy: { light: '#f0f', dark: '#0f0' },
+  });
+
+  it('should create a function that returns a matching prop when passed a string', () => {
+    expect(fn({ kind: 'test', theme: { mode: 'light' } })).toBe('#fff');
+    expect(fn({ kind: 'test', theme: { mode: 'dark' } })).toBe('#000');
+  });
+});
\ No newline at end of file