cronofy-elements 1.48.1 → 1.49.1

package/src/js/components/Agenda/EventAttendees.js

@@ -1,30 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Agenda";
-
-const EventDetails = ({ attendees }) => {
-    const theme = useContext(ThemeContext);
-    return attendees && attendees.length > 1 ? (
-        <div className={`${theme.prefix}__event__attendees--expanded`}>
-            <h3 className={`${theme.prefix}__event__subtitle`}>Attendees</h3>
-            {attendees.map((attendee, key) => {
-                return (
-                    <li
-                        key={key}
-                        css={css`
-                            list-style: none;
-                            font-size: 0.8em;
-                        `}
-                    >
-                        <span className={`${theme.prefix}__event__attendee`} />
-                        {attendee.display_name ? <span>{attendee.display_name}</span> : null}{" "}
-                        {attendee.email ? <span>{`<${attendee.email}>`}</span> : null}
-                    </li>
-                );
-            })}
-        </div>
-    ) : null;
-};
-
-export default EventDetails;

package/src/js/components/Agenda/EventDetail.js

@@ -1,111 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import moment from "moment-timezone";
-
-import EventWrapper from "./EventWrapper";
-import EventMessages from "./EventMessages";
-import EventAttendees from "./EventAttendees";
-import EventTime from "./EventTime";
-import Location from "./Location";
-
-import { getCalColor } from "../../helpers/events";
-import { getCalendarColors } from "../../helpers/colors";
-
-import { CalendarsContext, I18nContext, ThemeContext } from "./Agenda";
-
-const EventDetails = props => {
-    const i18n = useContext(I18nContext);
-    const theme = useContext(ThemeContext);
-    const calendars = useContext(CalendarsContext);
-    const calIndex = getCalColor(props.event.calendar_id, calendars);
-    let colors = getCalendarColors(theme.colors, calIndex);
-    return (
-        <EventWrapper
-            calIndex={calIndex}
-            data={props.event}
-            expand={() => props.expand(false)}
-            css={css`
-                padding: 2em 1em;
-                display: flex;
-                flex-direction: column;
-                height: 100%;
-
-                .${theme.prefix}__event__title--expanded {
-                    font-size: 1.4em;
-                    margin-bottom: 0.5em;
-                }
-
-                .${theme.prefix}__event__subtitle {
-                    font-size: 0.8em;
-                    text-transform: uppercase;
-                    letter-spacing: 0.1em;
-                    display: inline-block;
-                    margin: 1em 0 0.5em 0;
-                }
-
-                .${theme.prefix}__event__date--expanded {
-                    font-size: 0.8em;
-                    display: block;
-                }
-
-                .${theme.prefix}__event__description-inner {
-                    white-space: pre-line;
-                    margin: 1em 0;
-                    border-left: 2px solid ${colors.text};
-                    padding-left: 0.5em;
-                    font-size: 0.8em;
-                }
-
-                .${theme.prefix}__event__attendee {
-                    margin: 0 5px 0 0;
-                }
-
-                &.${theme.prefix}__event--expanded .${theme.prefix}__event__description-inner {
-                    border-left: 2px solid ${colors.black};
-                }
-            `}
-            className={`${theme.prefix}__event--expanded`}
-        >
-            <EventMessages data={props.event} />
-            <span
-                className={`${theme.prefix}__event__title ${theme.prefix}__event__title--expanded`}
-            >
-                {props.event.summary}
-            </span>
-            <span className={`${theme.prefix}__event__date--expanded`}>
-                {i18n.f(moment(props.date), "LL")}
-            </span>
-            <EventTime
-                start={props.event.start}
-                end={props.event.end}
-                current={props.date}
-                recurring={props.event.recurring}
-            />
-            {props.event.description ? (
-                <div className={`${theme.prefix}__event__description`}>
-                    <h3 className={`${theme.prefix}__event__subtitle`}>Description</h3>
-                    <div className={`${theme.prefix}__event__description-inner`}>
-                        {props.event.description}
-                    </div>
-                </div>
-            ) : null}
-            <EventAttendees attendees={props.event.attendees} />
-            {props.event.location ? (
-                <div className={`${theme.prefix}__event__location--expanded`}>
-                    <h3 className={`${theme.prefix}__event__subtitle`}>Location</h3>
-                    <Location
-                        locationString={props.event.location.description}
-                        calIndex={calIndex}
-                        styles={css`
-                            display: block;
-                        `}
-                    >
-                        {props.event.location.description}
-                    </Location>{" "}
-                </div>
-            ) : null}
-        </EventWrapper>
-    );
-};
-
-export default EventDetails;

package/src/js/components/Agenda/EventMessages.js

@@ -1,24 +0,0 @@
-import React, { useContext } from "react";
-
-import { I18nContext, ThemeContext } from "./Agenda";
-
-const EventMessages = ({ data }) => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-    return (
-        <div className={`${theme.prefix}__event__messages`}>
-            <span
-                className={`${theme.prefix}__event__message ${theme.prefix}__event__message--transparency`}
-            >
-                {data.transparency === "transparent" ? i18n.t("transparent") : i18n.t("opaque")}
-            </span>
-            <span
-                className={`${theme.prefix}__event__message ${theme.prefix}__event__message--participation`}
-            >
-                {data.participation_status === "needs_action" ? i18n.t("needs_action") : null}
-            </span>
-        </div>
-    );
-};
-
-export default EventMessages;

package/src/js/components/Agenda/EventMeta.js

@@ -1,48 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import Location from "./Location";
-
-import { truncateString } from "../../helpers/utils";
-import { getCalendarColors } from "../../helpers/colors";
-
-import { ThemeContext } from "./Agenda";
-
-const EventMeta = ({ data, calIndex }) => {
-    const theme = useContext(ThemeContext);
-    let colors = getCalendarColors(theme.colors, calIndex);
-    return (
-        <div className={`${theme.prefix}__event__meta`}>
-            {data.location ? (
-                <Location
-                    locationString={data.location.description}
-                    calIndex={calIndex}
-                    styles={css`
-                        @media (max-width: 450px) {
-                            display: block;
-                            max-width: 60px;
-                            overflow: hidden;
-                            line-height: 16px;
-                            height: 16px;
-                            padding: 0 5px;
-                            position: relative;
-                        }
-                    `}
-                >
-                    {truncateString(data.location.description, 18)}
-                </Location>
-            ) : null}
-
-            {data.attendees && data.attendees.length > 1 ? (
-                <div className={`${theme.prefix}__event__attendees`}>
-                    <span className={`${theme.prefix}__event__attendee`} />
-                    <span className={`${theme.prefix}__event__attendee`} />
-                    <span className={`${theme.prefix}__event__attendee-count`}>
-                        {data.attendees.length}
-                    </span>
-                </div>
-            ) : null}
-        </div>
-    );
-};
-export default EventMeta;

package/src/js/components/Agenda/EventTime.js

@@ -1,34 +0,0 @@
-import React, { useContext } from "react";
-
-import moment from "moment-timezone";
-import { dayNumbersString, checkISO8601 } from "../../helpers/events";
-
-import { I18nContext, ThemeContext } from "./Agenda";
-
-const EventTime = ({ start, end, current, recurring }) => {
-    const theme = useContext(ThemeContext);
-    const i18n = useContext(I18nContext);
-    const startObj = moment(start);
-    const endObj = moment(end);
-    // If the event string is *just* in YYYY-MM-DD format, it's an "all day" event
-    const isAllDay = checkISO8601(start) && checkISO8601(end);
-    // Normal time display
-    let times = `${i18n.f(startObj, "LT")} - ${i18n.f(endObj, "LT")}`;
-    // Does the event run over multiple days?
-    let daysString = i18n.t("all_day");
-    daysString += dayNumbersString(startObj, endObj, current);
-    return (
-        <React.Fragment>
-            <span className={`${theme.prefix}__event__times`}>
-                {isAllDay ? (
-                    <span className={`${theme.prefix}__event__times--string`}>{daysString}</span>
-                ) : (
-                    <span className={`${theme.prefix}__event__times--time`}>{times}</span>
-                )}
-            </span>
-            {recurring ? <span className={`${theme.prefix}__event__icon--recurring`} /> : null}
-        </React.Fragment>
-    );
-};
-
-export default EventTime;

package/src/js/components/Agenda/EventWrapper.js

@@ -1,271 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-import { transparentize } from "polished";
-
-import { getCalendarColors } from "../../helpers/colors";
-
-import { ThemeContext } from "./Agenda";
-
-const EventWrapper = props => {
-    const theme = useContext(ThemeContext);
-    let colors = getCalendarColors(theme.colors, props.calIndex);
-
-    const prefix = theme.prefix;
-
-    const transparency = props.transparency || props.data.transparency;
-    return (
-        /* eslint-disable */
-        <div
-            css={css`
-                background-color: ${colors.main};
-                color: ${colors.text};
-                padding: 4px 10px 14px 10px;
-                margin-bottom: 1em;
-                position: relative;
-                cursor: pointer;
-                border-left: 6px solid ${colors.dark};
-                transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
-                
-                &:last-of-type {
-                    margin-bottom: 0;
-                }
-                
-                &:not(.${prefix}__event--expanded):hover {
-                    background-color: ${colors.mid};
-                }
-        
-                &.${prefix}__event--line {
-                    padding: 0.3em 1em;
-                    margin-bottom: 10px;
-                }
-        
-                &.${prefix}__event--needs_action {
-                    background: ${theme.colors.white};
-                    color: ${theme.colors.black};
-                    padding-top: 10px;
-                    border-top: 1px solid ${colors.dark}; 
-                    border-right: 1px solid ${colors.dark};
-                    border-bottom: 1px solid ${colors.dark};
-                    background-image: repeating-linear-gradient(
-                        -45deg,
-                        transparent,
-                        transparent 8px,
-                        ${transparentize(0.9, colors.dark)} 8px,
-                        ${transparentize(0.9, colors.dark)} 16px
-                    );
-                }
-
-                &.${prefix}__event--needs_action:not(.${prefix}__event--expanded):hover {
-                    color: ${colors.text};
-                }
-
-                &.${prefix}__event--needs_action:not(.${prefix}__event--expanded):hover
-                    .${prefix}__event__message--participation {
-                    background: ${colors.mid};
-                    color: ${transparentize(0.6, colors.text)};
-                }
-        
-                .${prefix}__event__message {
-                    position: absolute;
-                    top: 0;
-                    left: 50%;
-                    transform: translate(-50%, 0);
-                    user-select: none;
-                }
-        
-                &.${prefix}__event--needs_action .${prefix}__event__message--participation {
-                    display: block;
-                    text-transform: uppercase;
-                    letter-spacing: 0.1em;
-                    // color: ${transparentize(0.6, colors.text)};
-                    // background: ${colors.main};
-                    color: ${transparentize(0.6, colors.black)};
-                    background: ${colors.white};
-                    padding: 0.2em 0.8em 0.2em 0.8em;
-                    font-size: 0.6em;
-                    transition: background 0.2s;
-                }
-        
-                .${prefix}__event__times {
-                    font-size: 0.8em;
-                }
-        
-                &.${prefix}__event--transparent {
-                    border-left: 0;
-                }
-        
-                .${prefix}__event__message--transparency {
-                    opacity: 0;
-                    display: block;
-                    top: auto;
-                    bottom: 2px;
-                    left: 50%;
-                    text-transform: uppercase;
-                    letter-spacing: 0.1em;
-                    font-size: 0.6em;
-                    transition: opacity 0.2s;
-                }
-                &:hover .${prefix}__event__message--transparency {
-                    opacity: 1;
-                }
-        
-                .${prefix}__event__times--time {
-                    text-transform: lowercase;
-                }
-                .${prefix}__event__title {
-                    display: block;
-                    font-weight: bold;
-                    margin-top: 0.2em;
-                }
-                &.${prefix}__event--line .${prefix}__event__title {
-                    display: inline;
-                    margin-top: 0;
-                    margin-right: 0.5em;
-                }
-                .${prefix}__event__description {
-                    white-space: pre-line;
-                }
-        
-                .${prefix}__event__meta {
-                    position: absolute;
-                    top: 0.5em;
-                    right: 0.5em;
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-end;
-                }
-        
-                .${prefix}__event__attendees {
-                    margin-top: 0.2em;
-                    margin-left: 0.5em;
-                }
-        
-                .${prefix}__before-icon,
-                .${prefix}__after-icon {
-                    position: absolute;
-                    top: 0;
-                    left: 100%;
-                    height: 100%;
-                    width: 0.5em;
-                    fill: ${colors.main};
-                    transition: fill 0.2s;
-                }
-                .${prefix}__before-icon {
-                    left: 0;
-                    transform: translate(-0.8em, 0) rotate(180deg);
-                }
-                &:hover .${prefix}__after-icon,
-                &:hover .${prefix}__before-icon {
-                    fill: ${colors.mid};
-                }
-        
-                &.${prefix}__event--transparent .${prefix}__before-icon {
-                    transform: translate(-0.5em, 0) rotate(180deg);
-                }
-                &.${prefix}__event--has-before {
-                    margin-left: 0.5em;
-                }
-                &.${prefix}__event--has-after {
-                    margin-right: 0.5em;
-                }
-        
-                // "Recurring Event" icon
-                .${prefix}__event__icon--recurring {
-                    display: inline-block;
-                    margin-left: 0.5em;
-                    width: 10px;
-                    height: 10px;
-                    border: 1px solid ${colors.text};
-                    border-radius: 0.3em;
-                    position: relative;
-                    &:before {
-                        content: "";
-                        display: block;
-                        width: 6px;
-                        height: 6px;
-                        position: absolute;
-                        top: 0;
-                        left: 50%;
-                        transform: translate(-50%, -50%) rotate(45deg);
-                        border-top: 2px solid ${colors.main};
-                        border-right: 2px solid ${colors.main};
-                        box-shadow: inset ${colors.text} -1px 1px 0 0;
-                        transition: border-color 0.2s;
-                    }
-                }
-                &:not(.${prefix}__event--expanded):hover .${prefix}__event__icon--recurring:before {
-                    border-top-color: ${colors.mid};
-                    border-right-color: ${colors.mid};
-                }
-        
-                // "Attendees" icon
-                .${prefix}__event__attendees {
-                    // position: absolute;
-                    // bottom: 0.2em;
-                    // right: 0.5em;
-                }
-                .${prefix}__event__attendee {
-                    display: inline-block;
-                    width: 12px;
-                    height: 8px;
-                    background: ${colors.text};
-                    margin-left: -5px;
-                    border-top-left-radius: 10px 10px;
-                    border-top-right-radius: 10px 10px;
-                    border: 1px solid ${colors.main};
-                    position: relative;
-                    &:before {
-                        content: "";
-                        display: block;
-                        position: absolute;
-                        top: 0;
-                        left: 50%;
-                        height: 8px;
-                        width: 8px;
-                        background: ${colors.text};
-                        border-radius: 50%;
-                        transform: translate(-50%, -7px);
-                        border: 1px solid ${colors.main};
-                    }
-                }
-                &:not(.${prefix}__event--expanded):hover .${prefix}__event__attendee {
-                    border-color: ${colors.mid};
-                    &:before {
-                        border-color: ${colors.mid};
-                    }
-                }
-                .${prefix}__event__attendee-count {
-                    font-size: 0.8em;
-                    position: absolute;
-                    bottom: 100%;
-                    right: 0;
-                    opacity: 0;
-                    background: ${colors.black};
-                    color: ${colors.white};
-                    width: 1.2em;
-                    height: 1.2em;
-                    display: block;
-                    padding: 0.1em 0 0 0;
-                    line-height: 1;
-                    border-radius: 0.6em;
-                    text-align: center;
-                }
-                .${prefix}__event__attendees:hover .${prefix}__event__attendee-count {
-                    opacity: 1;
-                }`}
-            className={`
-                ${prefix}__event
-                ${prefix}__event--${transparency}
-                ${prefix}__event--${props.data.participation_status}
-                ${typeof props.className !== "undefined" ? props.className : ""}
-            `}
-            onClick={() => props.expand(props.data.event_uid)}
-            title={props.data.summary}
-        >
-            {props.children}
-        </div>
-        /* eslint-disable */
-    );
-};
-
-export default EventWrapper;

package/src/js/components/Agenda/Location.js

@@ -1,29 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { getCalendarColors } from "../../helpers/colors";
-import { ThemeContext } from "./Agenda";
-
-const Location = ({ styles, locationString, calIndex, children }) => {
-    const theme = useContext(ThemeContext);
-    let colors = getCalendarColors(theme.colors, calIndex);
-    return (
-        <span
-            css={css`
-                display: inline-block;
-                border: 1px solid ${colors.text};
-                padding: 3px 5px;
-                border-radius: 4px;
-                font-size: 0.8em;
-                color: ${colors.text};
-                ${styles};
-            `}
-            className={`${theme.prefix}__event__location`}
-            title={locationString}
-        >
-            {children}
-        </span>
-    );
-};
-
-export default Location;

package/src/js/components/Agenda/Message.js

@@ -1,22 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { ThemeContext } from "./Agenda";
-
-const Message = ({ message, show = true }) => {
-    const theme = useContext(ThemeContext);
-    return show ? (
-        <div
-            css={css`
-                border: 1px solid ${theme.colors.hairline};
-                padding: 0.4em 1em;
-                margin-bottom: 0.5em;
-            `}
-            className={`${theme.prefix}__message`}
-        >
-            <h2>{message}</h2>
-        </div>
-    ) : null;
-};
-
-export default Message;

package/src/js/components/Agenda/TimedEventsList.js

@@ -1,29 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import Event from "./Event";
-import ShadowScrollbars from "../generic/ShadowScrollbars";
-
-import { ThemeContext } from "./Agenda";
-
-const TimedEventsList = props => {
-    const theme = useContext(ThemeContext);
-    return (
-        <ShadowScrollbars
-            css={css`
-                flex-grow: 1;
-                height: auto !important; // Hack to avoid Scrollbars injected styles that break the flexbox layout.
-                display: flex;
-            `}
-            className={`${theme.prefix}__list ${theme.prefix}__list--timed`}
-        >
-            {props.events.length > 0
-                ? props.events.map((event, key) => (
-                      <Event key={key} current={props.date} data={event} expand={props.expand} />
-                  ))
-                : null}
-        </ShadowScrollbars>
-    );
-};
-
-export default TimedEventsList;

package/src/js/components/AvailabilityRules/AddButton.js

@@ -1,60 +0,0 @@
-import React, { useContext } from "react";
-import { css } from "@emotion/core";
-
-import { buttonReset } from "../../styles/utils";
-import { ThemeContext } from "./Wrapper";
-import { useI18n } from "../../contexts/i18n-context";
-
-const AddButton = ({ callback }) => {
-    const [theme, setTheme] = useContext(ThemeContext);
-    const i18n = useI18n();
-    return (
-        <button
-            type="button"
-            css={css`
-                ${buttonReset}
-                background: ${theme.colors.white};
-                border: 1px solid ${theme.colors.hairline};
-                border-radius: 4px;
-                height: 28px;
-                width: 28px;
-                position: relative;
-                cursor: pointer;
-                transition: background 0.2s;
-                margin-bottom: 5px;
-                &:hover {
-                    background: ${theme.colors.whiteDark};
-                }
-            `}
-            className={`${theme.prefix}__calendars__add-button`}
-            onClick={() => callback()}
-        >
-            <svg
-                css={css`
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    width: 12px;
-                    height: 12px;
-                    display: block;
-                `}
-                className={`${theme.prefix}__calendars__add-button-icon`}
-                viewBox="0 0 7 6"
-            >
-                <path
-                    css={css`
-                        transform: rotate(45deg);
-                        transform-origin: 50% 50%;
-                    `}
-                    className={`${theme.prefix}__calendars__add-button-icon--path`}
-                    fill={theme.colors.black}
-                    d="M3.5 2.287L5.451.336c.163-.163.455-.135.651.062.197.196.225.488.062.65L4.213 3l1.951 1.951c.163.163.135.455-.062.651-.196.197-.488.225-.65.062L3.5 3.713 1.549 5.664c-.163.163-.455.135-.651-.062-.197-.196-.225-.488-.062-.65L2.787 3 .836 1.049C.673.886.7.594.898.398c.196-.197.488-.225.65-.062L3.5 2.287z"
-                />
-            </svg>
-            <span className="visuallyhidden">{i18n.t("add_calendar")}</span>
-        </button>
-    );
-};
-
-export default AddButton;