feat(avatarinitials): move backgroundColor into scss (#1585)

* feat(avatar): allow style override for avatarinitials

* feat(avatarintials): move backgroundcolor of initials into scss

* feat(avatarintials): use data attribute to determine backgroundColor

* feat(avatarinitials): moved avatar colors into _theme.scss

* feat(avatarinitials): parse sass lists when compiling constants files

* feat(avatarinitials): remove unused sass variable

* build(buildstylevars): readded line

* style(avatar): readded removed line

Author: cweeii

scripts/build-style-vars.js

@@ -24,10 +24,20 @@ async function main() {
     const jsData = parse(scssData, {
         camelCase: false,
     });
-    const moduleString = Object.entries(jsData)
+
+    // Parse Sass lists
+    const formattedData = Object.entries(jsData).map(([k, v]) => (v.indexOf(', ') >= 0 ? [k, v.split(', ')] : [k, v]));
+
+    const moduleString = formattedData
         .map(([k, v]) => `export const ${camelCase(k)} = ${JSON.stringify(v)}; // ${k}`)
         .join('\n');
-    const jsonString = JSON.stringify(jsData, null, 2);
+
+    // Recreate literal object before stringifying
+    const newJson = formattedData.reduce((prev, [k, v]) => {
+        prev[k] = v;
+        return prev;
+    }, {});
+    const jsonString = JSON.stringify(newJson, null, 2);
 
     // Don't write the files again if nothing has changed
     let priorJson;
@@ -37,7 +47,7 @@ async function main() {
         priorJson = {};
     }
 
-    if (!isEqual(priorJson, jsData)) {
+    if (!isEqual(priorJson, newJson)) {
         await writeFile(outputJs, `${moduleHeader}${moduleString}`);
         await writeFile(outputJson, jsonString);
     }

src/components/avatar/Avatar.scss

@@ -38,6 +38,12 @@
         line-height: 1;
     }
 
+    @for $i from 1 through length($avatar-colors) {
+        .avatar-initials[data-bg-idx='#{$i - 1}'] {
+            background-color: nth($avatar-colors, $i);
+        }
+    }
+
     &.avatar--large {
         width: 44px;
         height: 44px;

src/components/avatar/AvatarInitials.js

@@ -1,28 +1,6 @@
 // @flow
 import React from 'react';
-import {
-    bdlLightBlue,
-    bdlBoxBlue,
-    bdlDarkBlue,
-    bdlGray62,
-    bdlGreenLight,
-    bdlYellorange,
-    bdlGrimace,
-    bdlPurpleRain,
-    bdlWatermelonRed,
-} from '../../styles/variables';
-
-const AVATAR_COLORS = [
-    bdlLightBlue,
-    bdlBoxBlue,
-    bdlDarkBlue,
-    bdlGray62,
-    bdlGreenLight,
-    bdlYellorange,
-    bdlGrimace,
-    bdlPurpleRain,
-    bdlWatermelonRed,
-];
+import { avatarColors } from '../../styles/variables';
 
 const getInitials = name => {
     const firstInitial = name.slice(0, 1);
@@ -38,9 +16,10 @@ type Props = {
 
 const AvatarInitials = ({ className = '', id, name }: Props) => {
     const avatarColorSelector = parseInt(id, 10) || 0;
-    const backgroundColor = AVATAR_COLORS[avatarColorSelector % AVATAR_COLORS.length];
+    const backgroundColorIndex = avatarColorSelector % avatarColors.length;
+
     return (
-        <span className={`avatar-initials ${className}`} style={{ backgroundColor }}>
+        <span className={`avatar-initials ${className}`} data-bg-idx={backgroundColorIndex}>
             {getInitials(name)}
         </span>
     );

src/components/avatar/__tests__/AvatarInitials-test.js

@@ -13,13 +13,13 @@ describe('components/avatar/AvatarInitials', () => {
         expect(wrapper.text()).toEqual('HW');
     });
 
-    test('should set a backgroundColor based on id', () => {
+    test('should set data-bg-idx attribute based on id', () => {
         const wrapper = shallow(<AvatarInitials id="10" name="hello world" />);
-        expect(wrapper.prop('style').backgroundColor).toEqual('#0061d5');
+        expect(wrapper.prop('data-bg-idx')).toEqual(1);
     });
 
-    test('should set a default backgroundColor if no id is passed in', () => {
+    test('should set a default data-bg-idx attribute if no id is passed in', () => {
         const wrapper = shallow(<AvatarInitials name="hello world" />);
-        expect(wrapper.prop('style').backgroundColor).toEqual('#2486fc');
+        expect(wrapper.prop('data-bg-idx')).toEqual(0);
     });
 });

src/styles/_variables.scss

@@ -3,6 +3,7 @@
 @import './constants/layout';
 @import './constants/animation';
 @import './constants/typography';
+@import './constants/themes';
 @import './deprecated'; // <<< Deprecated
 
 // Mixins

src/styles/constants/_themes.scss

@@ -0,0 +1 @@
+$avatar-colors: $bdl-light-blue, $bdl-box-blue, $bdl-dark-blue, $bdl-gray-62, $bdl-green-light, $bdl-yellorange, $bdl-grimace, $bdl-purple-rain, $bdl-watermelon-red;

src/styles/variables.js

@@ -64,6 +64,7 @@ export const bdlWatermelonRed10 = "#fdebee"; // bdl-watermelon-red-10
 export const bdlWatermelonRed05 = "#fef5f6"; // bdl-watermelon-red-05
 export const bdlWatermelonRed02 = "#fffbfc"; // bdl-watermelon-red-02
 export const bdlLineHeight = "20px"; // bdl-line-height
+export const avatarColors = ["#2486fc","#0061d5","#003c84","#767676","#26c281","#f5b31b","#4826c2","#9f3fed","#ed3757"]; // avatar-colors
 export const modalDialogZIndex = "160"; // modal-dialog-z-index
 export const menuZIndex = "170"; // menu-z-index
 export const notificationsWrapperZIndex = "180"; // notifications-wrapper-z-index

src/styles/variables.json

@@ -61,6 +61,17 @@
     "bdl-watermelon-red-05": "#fef5f6",
     "bdl-watermelon-red-02": "#fffbfc",
     "bdl-line-height": "20px",
+    "avatar-colors": [
+        "#2486fc",
+        "#0061d5",
+        "#003c84",
+        "#767676",
+        "#26c281",
+        "#f5b31b",
+        "#4826c2",
+        "#9f3fed",
+        "#ed3757"
+    ],
     "modal-dialog-z-index": "160",
     "menu-z-index": "170",
     "notifications-wrapper-z-index": "180",