chore: refactor color handling to accept argb colors

luzento · Dec 11, 2020 · a599f13 · a599f13
1 parent c867b6a
commit a599f13
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 46 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -59,17 +59,19 @@ function numberToPx(name, value) {
 }
 
 function handleColor(name, value) {
- return isValidColor(value) ? value : "";
+ const color = parseColor(value);
+ if (color) {
+ if (value[0] === '#' && value.length === 9) {
+ return color.rgb().toString();
+ }
+ return value;
+ }
+ return '';
 }
 
-export function isValidColor(value) {
- if(!value) {
- return false;
- }
+function parseColor(value) {
  try {
- Color(value);
- } catch (e) {
- return false;
- }
- return true;
-}
+ return new Color(value);
+ } catch (e) {}
+ return null;
+}
diff --git a/test/mjml-tags.spec.js b/test/mjml-tags.spec.js
@@ -241,4 +241,44 @@ describe('mjml tags', () => {
  '<mj-raw><!--Hello World!--></mj-raw>',
  );
  });
+
+ describe('validate color value', () => {
+ it('should render with passed values', () => {
+ expect(
+ renderToMjml(
+ <tags.MjmlColumn
+ innerBackgroundColor="#ffffffee"
+ backgroundColor="red"
+ >
+ <tags.MjmlDivider
+ borderColor="#fdfdfd"
+ containerBackgroundColor="rgb(255,0,0)"
+ />
+ <tags.MjmlText color="rgba(255,0,0,0.1)">Content</tags.MjmlText>
+ </tags.MjmlColumn>,
+ ),
+ ).to.equal(
+ '<mj-column inner-background-color="rgba(255, 255, 255, 0.9333333333333333)" background-color="red"><mj-divider border-color="#fdfdfd" container-background-color="rgb(255,0,0)"></mj-divider><mj-text color="rgba(255,0,0,0.1)">Content</mj-text></mj-column>',
+ );
+ });
+
+ it('should render empty color attribute with passed values', () => {
+ expect(
+ renderToMjml(
+ <tags.MjmlColumn
+ innerBackgroundColor="#fafafaf"
+ backgroundColor="brown sugar"
+ >
+ <tags.MjmlDivider
+ borderColor="#g6labc"
+ containerBackgroundColor="rgb(255,2)"
+ />
+ <tags.MjmlText color="rgba(255,0)">Content</tags.MjmlText>
+ </tags.MjmlColumn>,
+ ),
+ ).to.equal(
+ '<mj-column inner-background-color="" background-color=""><mj-divider border-color="" container-background-color=""></mj-divider><mj-text color="">Content</mj-text></mj-column>',
+ );
+ });
+ });
 });
diff --git a/test/utils.spec.js b/test/utils.spec.js
@@ -9,8 +9,6 @@ import {
  addQueryParams,
 } from '../src/utils/index';
 
-import { isValidColor } from '../src/utils';
-
 describe('utils', () => {
  describe('namedEntityToHexCode', () => {
  it('should not replace incomplete entity', () => {
@@ -110,37 +108,4 @@ describe('utils', () => {
  expect(addQueryParams('url', { one: '?two' })).to.equal('url?one=%3Ftwo');
  });
  });
-
- describe('isValidColor', () => {
- it('should return true if #ffffff is passed', () => {
- expect(isValidColor('#ffffff')).to.equal(true);
- });
- it('should return false if #fafafaf is passed', () => {
- expect(isValidColor('#fafafaf')).to.equal(false);
- });
- it('should return false if #g6labc is passed', () => {
- expect(isValidColor('#g6labc')).to.equal(false);
- });
- it('should return true if #fab is passed', () => {
- expect(isValidColor('#fab')).to.equal(true);
- });
- it('should return true if white is passed', () => {
- expect(isValidColor('white')).to.equal(true);
- });
- it('should return true if transparent is passed', () => {
- expect(isValidColor('transparent')).to.equal(true);
- });
- it('should return true if rgb(255,0,0) is passed', () => {
- expect(isValidColor('rgb(255,0,0)')).to.equal(true);
- });
- it('should return false if rgb(255,2) is passed', () => {
- expect(isValidColor('rgb(255,2)')).to.equal(false);
- });
- it('should return true if rgba(255,0,0,0.1) is passed', () => {
- expect(isValidColor('rgb(255,0,0,0.1)')).to.equal(true);
- });
- it('should return false if rgba(255,0) is passed', () => {
- expect(isValidColor('rgba(255,0)')).to.equal(false);
- });
- });
 });