feat(palette): Use props.tone if it wasn't passed in as argument

diegohaz · Sep 2, 2018 · ce36900 · ce36900
1 parent 4ac4bce
commit ce36900
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -147,12 +147,12 @@ const Button = styled.button`
 
 ### palette
 
-Returns `props.theme.palette[key][index]` or `defaultValue`.
+Returns `props.theme.palette[key || props.palette][tone || props.tone || 0]` or `defaultValue`.
 
 #### Parameters
 
--   `keyOrIndex` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number))** 
--   `indexOrDefaultValue` **any** 
+-   `keyOrTone` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number))** 
+-   `toneOrDefaultValue` **any** 
 -   `defaultValue` **any** 
 
 #### Examples
@@ -171,6 +171,7 @@ const theme = {
 const Button = styled.button`
   color: ${palette(1)};                    // props.theme.palette[props.palette][1]
   color: ${palette("primary", 1)};         // props.theme.palette.primary[1]
+  color: ${palette("primary")};            // props.theme.palette.primary[props.tone || 0]
   color: ${palette("primary", -1)};        // props.theme.palette.primary[3]
   color: ${palette("primary", 10)};        // props.theme.palette.primary[3]
   color: ${palette("primary", -10)};       // props.theme.palette.primary[0]

diff --git a/src/palette.js b/src/palette.js
@@ -2,7 +2,8 @@
 import type { PropsWithTheme } from ".";
 
 type Props = PropsWithTheme & {
-  palette?: string
+  palette?: string,
+  tone?: number
 };
 
 const toArray = (arg: any) => (Array.isArray(arg) ? arg : [arg]);
@@ -14,7 +15,7 @@ const clamp = (number: number, min: number, max: number) => {
 };
 
 /**
- * Returns `props.theme.palette[key][index]` or `defaultValue`.
+ * Returns `props.theme.palette[key || props.palette][tone || props.tone || 0]` or `defaultValue`.
  * @example
  * import styled, { ThemeProvider } from "styled-components";
  * import { palette } from "styled-tools";
@@ -29,6 +30,7 @@ const clamp = (number: number, min: number, max: number) => {
  * const Button = styled.button`
  *   color: ${palette(1)};                    // props.theme.palette[props.palette][1]
  *   color: ${palette("primary", 1)};         // props.theme.palette.primary[1]
+ *   color: ${palette("primary")};            // props.theme.palette.primary[props.tone || 0]
  *   color: ${palette("primary", -1)};        // props.theme.palette.primary[3]
  *   color: ${palette("primary", 10)};        // props.theme.palette.primary[3]
  *   color: ${palette("primary", -10)};       // props.theme.palette.primary[0]
@@ -40,31 +42,31 @@ const clamp = (number: number, min: number, max: number) => {
  * </ThemeProvider>
  */
 const palette = (
-  keyOrIndex?: string | number,
-  indexOrDefaultValue?: any,
+  keyOrTone?: string | number,
+  toneOrDefaultValue?: any,
   defaultValue?: any
 ) => (props: Props) => {
-  const key = typeof keyOrIndex === "string" ? keyOrIndex : props.palette;
-  const index =
-    typeof keyOrIndex === "number"
-      ? keyOrIndex
-      : typeof indexOrDefaultValue === "number"
-        ? indexOrDefaultValue
-        : 0;
+  const key = typeof keyOrTone === "string" ? keyOrTone : props.palette;
+  const tone =
+    typeof keyOrTone === "number"
+      ? keyOrTone
+      : typeof toneOrDefaultValue === "number"
+        ? toneOrDefaultValue
+        : props.tone || 0;
   const finalDefaultValue =
-    indexOrDefaultValue !== index ? indexOrDefaultValue : defaultValue;
+    toneOrDefaultValue !== tone ? toneOrDefaultValue : defaultValue;
 
   if (!props.theme.palette || !props.theme.palette[key]) {
     return finalDefaultValue;
   }
 
   const tones = toArray(props.theme.palette[key]);
 
-  if (index < 0) {
-    return tones[clamp(tones.length + index, 0, tones.length - 1)];
+  if (tone < 0) {
+    return tones[clamp(tones.length + tone, 0, tones.length - 1)];
   }
 
-  return tones[clamp(index, 0, tones.length - 1)];
+  return tones[clamp(tone, 0, tones.length - 1)];
 };
 
 export default palette;
diff --git a/test/palette.test.js b/test/palette.test.js
@@ -7,11 +7,12 @@ const theme = {
   }
 };
 
-test("only index", () => {
+test("only tone", () => {
   expect(palette()({ theme: {} })).toBeUndefined();
   expect(palette()({ theme })).toBeUndefined();
   expect(palette(0)({ theme })).toBeUndefined();
   expect(palette()({ theme, palette: "primary" })).toBe("primary0");
+  expect(palette()({ theme, palette: "primary", tone: 2 })).toBe("primary2");
   expect(palette(0)({ theme, palette: "primary" })).toBe("primary0");
   expect(palette(1)({ theme, palette: "primary" })).toBe("primary1");
   expect(palette(-1)({ theme, palette: "primary" })).toBe("primary2");
@@ -25,9 +26,10 @@ test("only index", () => {
   expect(palette(1, "foo")({ theme, palette: "other" })).toBe("foo");
 });
 
-test("palette and index", () => {
+test("palette and tone", () => {
   expect(palette("primary")({ theme: {} })).toBeUndefined();
   expect(palette("primary")({ theme })).toBe("primary0");
+  expect(palette("primary")({ theme, tone: 2 })).toBe("primary2");
   expect(palette("primary", 0)({ theme })).toBe("primary0");
   expect(palette("primary", 5)({ theme })).toBe("primary2");
   expect(palette("primary", -1)({ theme })).toBe("primary2");

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -17,26 +17,30 @@ type ThemeWithPalette = {
 };
 
 interface Palette {
-  (index?: number): <Props, Theme extends ThemeWithPalette>(
-    props: Props & { theme: Theme; palette?: keyof Theme["palette"] }
+  (tone?: number): <Props, Theme extends ThemeWithPalette>(
+    props: Props & {
+      theme: Theme;
+      palette?: keyof Theme["palette"];
+      tone?: number;
+    }
   ) => any;
 
-  (index: number, defaultValue: any): <Props, Theme extends ThemeWithPalette>(
+  (tone: number, defaultValue: any): <Props, Theme extends ThemeWithPalette>(
     props: Props & { theme: Partial<Theme>; palette?: keyof Theme["palette"] }
   ) => any;
 
-  (key: string, index?: number): <Props, Theme extends ThemeWithPalette>(
-    props: Props & { theme: Theme }
+  (key: string, tone?: number): <Props, Theme extends ThemeWithPalette>(
+    props: Props & { theme: Theme; tone?: number }
   ) => any;
 
   (key: string, defaultValue?: Exclude<any, number>): <
     Props,
     Theme extends ThemeWithPalette
   >(
-    props: Props & { theme: Theme }
+    props: Props & { theme: Theme; tone?: number }
   ) => any;
 
-  (key: string, index: number, defaultValue?: Exclude<any, number>): <
+  (key: string, tone: number, defaultValue?: Exclude<any, number>): <
     Props,
     Theme extends ThemeWithPalette
   >(