feat: add backgroundColor and color on the events prop on the WeeklyC…

src/components/WeeklyCalendar/readme.md

@@ -303,3 +303,135 @@ const WeeklyCalendarExample = () => {
         <WeeklyCalendarExample />
     </div>
 ```
+
+##### Weekly Calendar with styled events
+
+```js
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { WeeklyCalendar, Card } from 'react-rainbow-components';
+
+const firstDay = new Date();
+firstDay.setDate(firstDay.getDate() - firstDay.getDay());
+const daysOfWeek = Array.from(Array(7), (_value, index) => {
+    const day = new Date(firstDay);
+    day.setDate(day.getDate() + index);
+    return day;
+});
+
+const events = [
+    {
+        id: 1,
+        title: 'Reinier',
+        startDate: new Date(daysOfWeek[0].setHours(6, 0, 0, 0)),
+        endDate: new Date(daysOfWeek[0].setHours(6,30, 0, 0)),
+        backgroundColor: 'rgba(253,230,230,1)',
+        color: 'rgba(254,72,73,1)',
+    },
+    {
+        id: 2,
+        title: 'JL Torres',
+        startDate: new Date(daysOfWeek[0].setHours(7, 30, 0, 0)),
+        endDate: new Date(daysOfWeek[0].setHours(8, 0, 0, 0)),
+        backgroundColor: 'rgba(255,204,0,0.4)',
+        color: 'rgba(255,157,0,1)',
+    },
+    {
+        id: 3,
+        title: 'Leandro Torres',
+        startDate: new Date(daysOfWeek[0].setHours(11, 0, 0, 0)),
+        endDate: new Date(daysOfWeek[0].setHours(12, 15, 0, 0)),
+        backgroundColor: 'rgba(145,220,193,1)',
+        color: 'rgba(0,171,142,1)',
+    },
+    {
+        id: 4,
+        title: 'Yuri V. Munayev',
+        startDate: new Date(daysOfWeek[1].setHours(6, 30, 0, 0)),
+        endDate: new Date(daysOfWeek[1].setHours(7, 30, 0, 0)),
+        backgroundColor: 'rgba(254,72,73,1)',
+    },
+    {
+        id: 5,
+        title: 'Tahimi',
+        startDate: new Date(daysOfWeek[1].setHours(8, 0, 0, 0)),
+        endDate: new Date(daysOfWeek[1].setHours(8, 15, 0, 0)),
+        backgroundColor: 'rgba(240,243,56,1)',
+    },
+    {
+        id: 6,
+        title: 'Tahimi L',
+        startDate: new Date(daysOfWeek[2].setHours(8, 0, 0, 0)),
+        endDate: new Date(daysOfWeek[2].setHours(9, 30, 0, 0)),
+        backgroundColor: 'rgba(240,243,56,1)',
+    },
+    {
+        id: 7,
+        title: 'Sara',
+        startDate: new Date(daysOfWeek[3].setHours(6, 0, 0, 0)),
+        endDate: new Date(daysOfWeek[3].setHours(6, 30, 0, 0)),
+        backgroundColor: 'rgba(254,72,73,1)',
+    },
+    {
+        id: 8,
+        title: 'Tahimi',
+        startDate: new Date(daysOfWeek[3].setHours(6, 30, 0, 0)),
+        endDate: new Date(daysOfWeek[3].setHours(7, 0, 0, 0)),
+        backgroundColor: 'rgba(254,72,73,1)',
+    },
+    {
+        id: 9,
+        title: 'Reinier',
+        startDate: new Date(daysOfWeek[3].setHours(7, 30, 0, 0)),
+        endDate: new Date(daysOfWeek[3].setHours(8, 15, 0, 0)),
+        backgroundColor: 'rgba(255,204,0,1)',
+    },
+    {
+        id: 10,
+        title: 'Sara P',
+        startDate: new Date(daysOfWeek[4].setHours(6, 30, 0, 0)),
+        endDate: new Date(daysOfWeek[4].setHours(8, 0, 0, 0)),
+        backgroundColor: 'rgba(254,72,73,1)',
+    },
+    {
+        id: 11,
+        title: 'Leo Torres',
+        startDate: new Date(daysOfWeek[5].setHours(6, 0, 0, 0)),
+        endDate: new Date(daysOfWeek[5].setHours(7, 0, 0, 0)),
+        backgroundColor: 'rgba(254,72,73,1)',
+
+    },
+    {
+        id: 12,
+        title: 'Tahimi',
+        startDate: new Date(daysOfWeek[6].setHours(8, 0, 0, 0)),
+        endDate: new Date(daysOfWeek[6].setHours(9, 30, 0, 0)),
+        backgroundColor: 'rgba(240,243,56,1)',
+    },
+];
+
+const StyledCard = styled(Card)`
+    height: 600px;
+    padding: 1rem;
+`;
+
+function CustomWeecklyCalendar() {
+    const [currentWeek, setCurrentWeek] = useState(new Date());
+
+    return (
+        <div className="rainbow-m-around_large">
+            <StyledCard>
+                <WeeklyCalendar
+                    events={events}
+                    currentWeek={currentWeek}
+                    onWeekChange={({ week }) => setCurrentWeek(week)}
+                    onEventClick={event => alert(event.title)}
+                    locale="en"
+                />
+            </StyledCard>
+        </div>
+    );
+}
+
+    <CustomWeecklyCalendar />
+```

src/components/WeeklyCalendar/week/event.js

@@ -14,15 +14,21 @@ import RenderIf from '../../RenderIf';
 
 export default function Event(props) {
     const { onEventClick, locale, ...event } = props;
-    const { title, startDate, endDate } = event;
+    const { title, startDate, endDate, color, backgroundColor } = event;
     const eventId = useUniqueIdentifier('calendar-event');
     const duration = useEventDuration(startDate, endDate);
     const style = useEventStyle(startDate, duration);
     const formattedTimeRange = useFormattedEventTimeRange(startDate, endDate, locale);
     const formattedStartDate = useFormattedEventStartDate(startDate, locale);
 
     return (
-        <StyledEvent id={eventId} style={style} onClick={() => onEventClick(event)}>
+        <StyledEvent
+            id={eventId}
+            style={style}
+            color={color}
+            backgroundColor={backgroundColor}
+            onClick={() => onEventClick(event)}
+        >
             <StyledEventItem>
                 <StyledEventTitle>{title}</StyledEventTitle>
                 <RenderIf isTrue={duration < 60}>
@@ -41,11 +47,15 @@ Event.propTypes = {
     title: PropTypes.string.isRequired,
     startDate: PropTypes.instanceOf(Date).isRequired,
     endDate: PropTypes.instanceOf(Date).isRequired,
+    color: PropTypes.string,
+    backgroundColor: PropTypes.string,
     onEventClick: PropTypes.func,
     locale: PropTypes.string,
 };
 
 Event.defaultProps = {
     onEventClick: () => {},
     locale: undefined,
+    color: undefined,
+    backgroundColor: undefined,
 };

src/components/WeeklyCalendar/week/helpers/__test__/getCurrentBackgroundColor.spec.js

@@ -0,0 +1,20 @@
+import { getCurrentBackgroundColor } from '..';
+
+const theme = {
+    palette: {
+        brand: {
+            main: '#000000',
+        },
+    },
+};
+
+describe('getCurrentBackgroundColor', () => {
+    it('should return color1 when this is a valid color', () => {
+        const color1 = '#1700ff';
+        expect(getCurrentBackgroundColor(color1, theme)).toBe('#1700ff');
+    });
+    it('should return "#000000" when color1 is not a valid color', () => {
+        const color1 = '#1700ff#';
+        expect(getCurrentBackgroundColor(color1, theme)).toBe('#000000');
+    });
+});

src/components/WeeklyCalendar/week/helpers/__test__/getCurrentColor.spec.js

@@ -0,0 +1,31 @@
+import { getCurrentColor } from '..';
+
+const mockGetContrastText = jest.fn(() => '#ffffff');
+const theme = {
+    palette: {
+        brand: {
+            main: '#000000',
+        },
+        getContrastText: mockGetContrastText,
+    },
+};
+
+describe('getCurrentColor', () => {
+    it('should return color1 when this is a valid color', () => {
+        const color1 = '#1700ff';
+        const color2 = '#ff0008';
+        expect(getCurrentColor(color1, color2, theme)).toBe('#1700ff');
+    });
+    it('should call getContrastText with color2 when color1 is not a valid color', () => {
+        const color1 = '#1700ff#';
+        const color2 = '#ff0008';
+        expect(getCurrentColor(color1, color2, theme)).toBe('#ffffff');
+        expect(mockGetContrastText).toHaveBeenCalledWith('#ff0008');
+    });
+    it('should call getContrastText with "#000000" when color1 and color2 are not valid colors', () => {
+        const color1 = '#1700ff#';
+        const color2 = '#ff0008#';
+        expect(getCurrentColor(color1, color2, theme)).toBe('#ffffff');
+        expect(mockGetContrastText).toHaveBeenCalledWith('#000000');
+    });
+});

src/components/WeeklyCalendar/week/helpers/getCurrentBackgroundColor.js

@@ -0,0 +1,10 @@
+import { isValidColor } from '../../../../styles/helpers/color';
+
+export default function getCurrentBackgroundColor(color1, theme) {
+    const { brand } = theme.palette;
+
+    if (color1 && isValidColor(color1)) {
+        return color1;
+    }
+    return brand.main;
+}

src/components/WeeklyCalendar/week/helpers/getCurrentColor.js

@@ -0,0 +1,13 @@
+import { isValidColor } from '../../../../styles/helpers/color';
+
+export default function getCurrentColor(color1, color2, theme) {
+    const { getContrastText, brand } = theme.palette;
+
+    if (color1 && isValidColor(color1)) {
+        return color1;
+    }
+    if (color2 && isValidColor(color2)) {
+        return getContrastText(color2);
+    }
+    return getContrastText(brand.main);
+}

src/components/WeeklyCalendar/week/helpers/index.js

@@ -3,3 +3,5 @@ export { default as getEventsOfDay } from './getEventsOfDay';
 export { default as getFormattedEventTimeRange } from './getFormattedEventTimeRange';
 export { default as getFormattedEventTime } from './getFormattedEventTime';
 export { default as getFormattedEventStartDate } from './getFormattedEventStartDate';
+export { default as getCurrentColor } from './getCurrentColor';
+export { default as getCurrentBackgroundColor } from './getCurrentBackgroundColor';

src/components/WeeklyCalendar/week/styled/event.js

@@ -1,13 +1,24 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs';
 import { replaceAlpha } from '../../../../styles/helpers/color';
+import getTheme from '../../../../styles/helpers/getTheme';
+import { getCurrentColor, getCurrentBackgroundColor } from '../helpers';
 
-const StyledEvent = attachThemeAttrs(styled.div)`
+const StyledEvent = attachThemeAttrs(styled.div).attrs(props => {
+    const theme = getTheme(props);
+    const currentColor = getCurrentColor(props.color, props.backgroundColor, theme);
+    const currentBackgroundColor = getCurrentBackgroundColor(props.backgroundColor, theme);
+
+    return {
+        currentColor,
+        currentBackgroundColor,
+    };
+})`
     text-align: left;
     font-size: 12px;
     border: 1px solid ${props => replaceAlpha(props.palette.background.main, 0.8)};
-    color: ${props => props.palette.getContrastText(props.palette.brand.main)};
-    background-color: ${props => props.palette.brand.main};
+    color: ${props => props.currentColor};
+    background-color: ${props => props.currentBackgroundColor};
     width: 100%;
     min-height: 20px;
     border-radius: 8px;