Add addClasses function

d.ts/homey.d.ts

@@ -17,6 +17,7 @@ export const html: Element;
 /* CSS */
 
 export function addClass(element: Element, cssClass: CSSClass): boolean;
+export function addClass(element: Element, ...cssClasses: CSSClass[]): boolean;
 export function hasClass(element: Element, cssClass: CSSClass): boolean;
 export function removeClass(element: Element, cssClass: CSSClass): boolean;
 export function toggleClass(element: Element, cssClass: CSSClass, state?: boolean): boolean;

spec/css/add-class.spec.js

@@ -3,7 +3,7 @@ import { addClass } from "../../src";
 describe("addClass", () => {
   afterEach(clearFixtures);
 
-  it("adds given class to element if element has't given class already", () => {
+  it("adds given class to element if element hasn't given class already", () => {
     useFixture(`<div class="root"></div>`);
 
     const subject = document.querySelector(".root");

spec/css/add-classes.spec.js

@@ -0,0 +1,61 @@
+import { addClasses } from "../../src";
+
+describe("addClasses", () => {
+  afterEach(clearFixtures);
+
+  it("adds classes from given list which not added to element early", () => {
+    useFixture(`<div class="root foo"></div>`);
+
+    const subject = document.querySelector(".root");
+
+    expect(subject.classList.contains("foo")).toBe(true);
+    expect(subject.classList.contains("bar")).toBe(false);
+
+    addClasses(subject, "foo", "bar");
+
+    expect(subject.classList.contains("foo")).toBe(true);
+    expect(subject.classList.contains("bar")).toBe(true);
+  });
+
+  it("returns `true` if all given classes has been added to element", () => {
+    useFixture(`<div class="root"></div>`);
+
+    const subject = document.querySelector(".root");
+
+    expect(subject.classList.contains("foo")).toBe(false);
+    expect(subject.classList.contains("bar")).toBe(false);
+
+    expect(addClasses(subject, "foo", "bar")).toBe(true);
+
+    expect(subject.classList.contains("foo")).toBe(true);
+    expect(subject.classList.contains("bar")).toBe(true);
+  });
+
+  it("returns `true` if any given class has been added to element", () => {
+    useFixture(`<div class="root foo"></div>`);
+
+    const subject = document.querySelector(".root");
+
+    expect(subject.classList.contains("foo")).toBe(true);
+    expect(subject.classList.contains("bar")).toBe(false);
+
+    expect(addClasses(subject, "foo", "bar")).toBe(true);
+
+    expect(subject.classList.contains("foo")).toBe(true);
+    expect(subject.classList.contains("bar")).toBe(true);
+  });
+
+  it("returns `true` if any given class has been added to element", () => {
+    useFixture(`<div class="root foo bar"></div>`);
+
+    const subject = document.querySelector(".root");
+
+    expect(subject.classList.contains("foo")).toBe(true);
+    expect(subject.classList.contains("bar")).toBe(true);
+
+    expect(addClasses(subject, "foo", "bar")).toBe(false);
+
+    expect(subject.classList.contains("foo")).toBe(true);
+    expect(subject.classList.contains("bar")).toBe(true);
+  });
+});

src/css/add-classes.js

@@ -0,0 +1,14 @@
+/* @flow */
+
+import type { CSSClass } from "./types";
+
+import addClass from "./add-class";
+
+function addClasses(element: Element, ...cssClasses: Array<CSSClass>) {
+  return cssClasses.reduce(
+    (result, cssClass) => addClass(element, cssClass) || result,
+    false
+  );
+}
+
+export default addClasses;

src/index.js

@@ -13,6 +13,7 @@ import type { CSSSelector, Elements } from "./types";
 import body from "./aliases/body";
 import html from "./aliases/html";
 import addClass from "./css/add-class";
+import addClasses from "./css/add-classes";
 import hasClass from "./css/has-class";
 import removeClass from "./css/remove-class";
 import toggleClass from "./css/toggle-class";
@@ -46,6 +47,7 @@ export {
   body,
   html,
   addClass,
+  addClasses,
   hasClass,
   removeClass,
   toggleClass,