box-ui-elements 16.0.0-beta.9 → 16.0.0

package/src/features/content-insights/MetricSummary.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import isFinite from 'lodash/isFinite';
+import isNaN from 'lodash/isNaN';
+import { injectIntl, IntlShape } from 'react-intl';
+
+import HeaderWithCount from './HeaderWithCount';
+import messages from './messages';
+import TrendPill from './TrendPill';
+import { formatCount } from './numberUtils';
+import { METRIC } from './constants';
+import { GraphData, Metric, Period } from './types';
+
+import './MetricSummary.scss';
+
+interface Props {
+    data: GraphData;
+    intl: IntlShape;
+    metric: Metric;
+    period: Period;
+    previousPeriodCount: number;
+    totalCount?: number;
+}
+
+const METRIC_MAP = {
+    [METRIC.PREVIEWS]: {
+        headerMessage: messages.previewGraphType,
+        getPeriodCount: (data: GraphData) => data.reduce((count, { previewsCount }) => count + previewsCount, 0),
+    },
+    [METRIC.DOWNLOADS]: {
+        getPeriodCount: (data: GraphData) => data.reduce((count, { downloadsCount }) => count + downloadsCount, 0),
+        headerMessage: messages.downloadGraphType,
+    },
+    [METRIC.USERS]: {
+        getPeriodCount: (data: GraphData) => {
+            const periodUsers = data.reduce(
+                (totalUsers, { users }) => new Set([...Array.from(totalUsers), ...Array.from(users)]),
+                new Set(),
+            );
+            return periodUsers.size;
+        },
+        headerMessage: messages.peopleTitle,
+    },
+} as const;
+
+// Limit the trend to a finite number (in case the previous period count was 0 and the calculated trend is Infinity)
+const formatTrend = (calculatedTrend: number) => (!isFinite(calculatedTrend) ? 1 : calculatedTrend);
+
+function MetricSummary({ data = [], intl, metric, period, previousPeriodCount = 0, totalCount }: Props) {
+    const { getPeriodCount, headerMessage } = METRIC_MAP[metric];
+    const periodCount = getPeriodCount(data);
+    const calculatedTrend = (periodCount - previousPeriodCount) / previousPeriodCount;
+    const trend = isNaN(calculatedTrend) ? 0 : formatTrend(calculatedTrend);
+
+    return (
+        <div className="MetricSummary">
+            <HeaderWithCount title={intl.formatMessage(headerMessage)} totalCount={totalCount} />
+            <div className="MetricSummary-period">
+                <span className="MetricSummary-periodCount">{formatCount(periodCount, intl)}</span>
+                <TrendPill period={period} trend={trend} />
+            </div>
+        </div>
+    );
+}
+
+export default injectIntl(MetricSummary);

package/src/features/content-insights/OpenContentInsightsButton.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Button, { ButtonType } from '../../components/button';
+
+import messages from './messages';
+
+interface Props {
+    onClick: () => void;
+}
+
+const OpenContentInsightsButton = ({ onClick }: Props) => {
+    return (
+        <Button className="OpenContentInsightsButton" onClick={onClick} type={ButtonType.BUTTON}>
+            <FormattedMessage {...messages.openContentInsightsButton} />
+        </Button>
+    );
+};
+
+export default OpenContentInsightsButton;

package/src/features/content-insights/TrendPill.scss

@@ -0,0 +1,33 @@
+@import '../../styles/variables';
+
+.TrendPill {
+    display: flex;
+    align-items: center;
+    color: $bdl-gray-80;
+    font-weight: bold;
+    background-color: $bdl-gray-05;
+}
+
+.TrendPill-trend {
+    position: relative;
+    margin-left: $bdl-grid-unit;
+    border: 5px solid transparent;
+}
+
+.TrendPill--up {
+    .TrendPill-trend {
+        bottom: 2px;
+        border-bottom-color: $bdl-green-light;
+    }
+}
+
+.TrendPill--down {
+    .TrendPill-trend {
+        top: 3px;
+        border-top-color: $bdl-watermelon-red;
+    }
+}
+
+.TrendPill-percentage {
+    margin-right: $bdl-grid-unit;
+}

package/src/features/content-insights/TrendPill.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage, injectIntl, IntlShape } from 'react-intl';
+
+import LabelPill from '../../components/label-pill';
+import messages from './messages';
+
+import { Period } from './types';
+
+import './TrendPill.scss';
+
+interface Props {
+    intl: IntlShape;
+    period: Period;
+    trend: number;
+}
+
+type Trend = 'up' | 'down' | 'neutral';
+
+const getTrendStatus = (trend: number): Trend => {
+    if (trend === 0) {
+        return 'neutral';
+    }
+
+    return trend > 0 ? 'up' : 'down';
+};
+
+const getTrendByPeriod = (period: Period) => {
+    switch (period) {
+        case 'month':
+            return messages.trendMonth;
+        case 'threemonths':
+            return messages.trendThreeMonths;
+        case 'year':
+            return messages.trendYear;
+        case 'week':
+        default:
+            return messages.trendWeek;
+    }
+};
+
+function TrendPill({ intl, period, trend }: Props) {
+    const getTrendLabel = (value: number): string => {
+        return intl.formatMessage(value > 0 ? messages.trendUp : messages.trendDown);
+    };
+
+    const trendStatus = getTrendStatus(trend);
+    const trendLabel = getTrendLabel(trend);
+
+    return (
+        <LabelPill.Pill
+            className={classNames('TrendPill', {
+                'TrendPill--up': trendStatus === 'up',
+                'TrendPill--down': trendStatus === 'down',
+            })}
+        >
+            <>
+                {trendStatus !== 'neutral' && <span aria-label={trendLabel} className="TrendPill-trend" role="img" />}
+                <LabelPill.Text>
+                    <>
+                        <span className="TrendPill-percentage">{intl.formatNumber(trend, { style: 'percent' })}</span>
+                        <FormattedMessage {...getTrendByPeriod(period)} />
+                    </>
+                </LabelPill.Text>
+            </>
+        </LabelPill.Pill>
+    );
+}
+
+export default injectIntl(TrendPill);

package/src/features/content-insights/__tests__/CompactCount.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import CompactCount from '../CompactCount';
+
+describe('features/content-insights/CompactCount', () => {
+    const getWrapper = (props = {}) => render(<CompactCount count={0} {...props} />);
+
+    describe('render()', () => {
+        test('should apply a provided classname', () => {
+            const wrapper = getWrapper({ className: 'foo' });
+
+            expect(wrapper.container.firstChild).toHaveClass('foo');
+        });
+
+        test.each`
+            count   | expectedCount
+            ${0}    | ${'0'}
+            ${1}    | ${'1'}
+            ${1000} | ${'1,000'}
+        `('should display the count $count as $expectedCount', ({ count, expectedCount }) => {
+            const wrapper = getWrapper({ count });
+
+            expect(wrapper.getByText(expectedCount)).toBeVisible();
+        });
+
+        test.each`
+            count      | expectedCount
+            ${10000}   | ${'10K'}
+            ${11123}   | ${'11K'}
+            ${100123}  | ${'100K'}
+            ${1000000} | ${'1M'}
+            ${2000123} | ${'2M'}
+        `('should display the count $count as $expectedCount', ({ count, expectedCount }) => {
+            const wrapper = getWrapper({ count });
+
+            expect(wrapper.getByText(expectedCount)).toBeVisible();
+        });
+
+        test('should call mouseenter and mouseleave callbacks', () => {
+            const onMouseEnter = jest.fn();
+            const onMouseLeave = jest.fn();
+
+            getWrapper({ count: 1, onMouseEnter, onMouseLeave });
+
+            fireEvent.mouseEnter(screen.getByText('1'));
+
+            expect(onMouseLeave).toBeCalledTimes(0);
+            expect(onMouseEnter).toBeCalledTimes(1);
+
+            fireEvent.mouseLeave(screen.getByText('1'));
+
+            expect(onMouseLeave).toBeCalledTimes(1);
+            expect(onMouseEnter).toBeCalledTimes(1);
+        });
+    });
+});

package/src/features/content-insights/__tests__/ContentAnalyticsErrorState.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import ContentAnalyticsErrorState from '../ContentAnalyticsErrorState';
+
+const baseError = new Error('An error has occured');
+
+describe('features/content-insights/ContentAnalyticsErrorState', () => {
+    const getWrapper = (props = {}) => render(<ContentAnalyticsErrorState error={undefined} {...props} />);
+
+    describe('render', () => {
+        test('should show the default error state', () => {
+            getWrapper();
+
+            expect(screen.getByTestId('ContentAnalyticsErrorState-text')).toBeVisible();
+            expect(screen.queryByTestId('ContentAnalyticsErrorState-text--permission')).not.toBeInTheDocument();
+        });
+
+        test('should show default error state when theres an error passed in', () => {
+            getWrapper({ error: baseError });
+
+            expect(screen.getByTestId('ContentAnalyticsErrorState-text')).toBeVisible();
+            expect(screen.queryByTestId('ContentAnalyticsErrorState-text--permission')).not.toBeInTheDocument();
+        });
+
+        test('should show the permission error state when error exists and is a permission error', () => {
+            getWrapper({ error: { ...baseError, status: 403 } });
+
+            expect(screen.getByTestId('ContentAnalyticsErrorState-text--permission')).toBeVisible();
+            expect(screen.queryByTestId('ContentAnalyticsErrorState-text')).not.toBeInTheDocument();
+        });
+    });
+});

package/src/features/content-insights/__tests__/ContentInsightsSummary.test.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import ContentInsightsSummary from '../ContentInsightsSummary';
+// @ts-ignore: no ts definition
+import localize from '../../../../test/support/i18n';
+import messages from '../messages';
+import { GraphData } from '../types';
+
+const mockData = [
+    { start: 1, previewsCount: 0, type: 'day' },
+    { start: 2, previewsCount: 0, type: 'day' },
+    { start: 3, previewsCount: 0, type: 'day' },
+    { start: 4, previewsCount: 0, type: 'day' },
+    { start: 5, previewsCount: 0, type: 'day' },
+    { start: 6, previewsCount: 1, type: 'day' },
+    { start: 7, previewsCount: 1, type: 'day' },
+] as GraphData;
+
+const baseError = new Error('An error has occured');
+
+describe('features/content-insights/ContentInsightsSummary', () => {
+    const getWrapper = (props = {}) =>
+        render(
+            <ContentInsightsSummary
+                graphData={mockData}
+                error={undefined}
+                isLoading={false}
+                onClick={jest.fn()}
+                previousPeriodCount={1}
+                totalCount={10}
+                {...props}
+            />,
+        );
+
+    describe('render', () => {
+        test('should show the ghost state when isLoading is true', () => {
+            getWrapper({ isLoading: true });
+
+            expect(screen.getByTestId('GraphCardGhostState')).toBeVisible();
+            expect(screen.queryByLabelText(localize(messages.previewGraphLabel.id))).toBeNull();
+        });
+
+        test('should render correctly when isLoading is false and error is null', () => {
+            getWrapper();
+
+            expect(screen.queryByTestId('ContentAnalyticsErrorState')).toBeNull();
+            expect(screen.queryByTestId('GraphCardGhostState')).toBeNull();
+            expect(screen.getByLabelText(localize(messages.previewGraphLabel.id))).toBeVisible();
+        });
+
+        test('should show the error state when error exists', () => {
+            getWrapper({ error: baseError });
+
+            expect(screen.getByTestId('ContentAnalyticsErrorState-text')).toBeVisible();
+            expect(screen.queryByTestId('ContentAnalyticsErrorState-text--permission')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('GraphCardGhostState')).toBeNull();
+            expect(screen.queryByLabelText(localize(messages.previewGraphLabel.id))).toBeNull();
+        });
+
+        test('should show the permission error state when error exists and is a permission error', () => {
+            getWrapper({ error: { ...baseError, status: 403 } });
+
+            expect(screen.getByTestId('ContentAnalyticsErrorState-text--permission')).toBeVisible();
+            expect(screen.queryByTestId('ContentAnalyticsErrorState-text')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('GraphCardGhostState')).toBeNull();
+            expect(screen.queryByLabelText(localize(messages.previewGraphLabel.id))).toBeNull();
+        });
+
+        test('should call the onClick callback', () => {
+            const onClick = jest.fn();
+            getWrapper({ onClick });
+
+            expect(onClick).toBeCalledTimes(0);
+
+            screen.getByRole('button').click();
+
+            expect(onClick).toBeCalledTimes(1);
+        });
+    });
+});

package/src/features/content-insights/__tests__/GraphCardPreviewsSummary.test.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import GraphCardPreviewsSummary from '../GraphCardPreviewsSummary';
+// @ts-ignore: No ts definition
+import localize from '../../../../test/support/i18n';
+import messages from '../messages';
+import { GraphData } from '../types';
+
+const mockData = [
+    { start: 1, previewsCount: 0, type: 'day' },
+    { start: 2, previewsCount: 0, type: 'day' },
+    { start: 3, previewsCount: 0, type: 'day' },
+    { start: 4, previewsCount: 0, type: 'day' },
+    { start: 5, previewsCount: 0, type: 'day' },
+    { start: 6, previewsCount: 1, type: 'day' },
+    { start: 7, previewsCount: 1, type: 'day' },
+] as GraphData;
+
+describe('features/content-insights/GraphCardPreviewsSummary', () => {
+    const getWrapper = (props = {}) =>
+        render(<GraphCardPreviewsSummary graphData={mockData} previousPeriodCount={1} totalCount={10} {...props} />);
+
+    describe('render()', () => {
+        test('should render correctly', () => {
+            getWrapper();
+
+            expect(screen.getByLabelText(localize(messages.previewGraphLabel.id))).toBeVisible();
+            expect(screen.getByText('2')).toBeVisible(); // current period count
+            expect(screen.getByText('10')).toBeVisible(); // total count
+            expect(screen.getByText('100%')).toBeVisible(); // trend
+        });
+    });
+});

package/src/features/content-insights/__tests__/HeaderWithCount.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import HeaderWithCount from '../HeaderWithCount';
+
+describe('features/content-insights/HeaderWithCount', () => {
+    const getWrapper = (props = {}) => {
+        return render(<HeaderWithCount title="Title type" totalCount={3} {...props} />);
+    };
+
+    describe('render', () => {
+        test('should render correctly', () => {
+            const wrapper = getWrapper();
+
+            expect(wrapper.getByText('Title type')).toBeVisible();
+            expect(wrapper.getByText('3')).toBeVisible();
+        });
+
+        test.each([undefined, null])('should only render the title if %s count is provided', totalCount => {
+            const wrapper = getWrapper({ totalCount });
+
+            expect(wrapper.getByText('Title type')).toBeVisible();
+            expect(wrapper.container.querySelector('.HeaderWithCount-titleCount')).toBeNull();
+        });
+    });
+});

package/src/features/content-insights/__tests__/MetricSummary.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+// @ts-ignore: No ts definition
+import localize from '../../../../test/support/i18n';
+
+import messages from '../messages';
+import MetricSummary from '../MetricSummary';
+import { METRIC, PERIOD } from '../constants';
+import { GraphData } from '../types';
+
+const mockPreviewData = [
+    { start: 1, previewsCount: 0 },
+    { start: 2, previewsCount: 0 },
+    { start: 3, previewsCount: 0 },
+    { start: 4, previewsCount: 0 },
+    { start: 5, previewsCount: 0 },
+    { start: 6, previewsCount: 1 },
+    { start: 7, previewsCount: 1 },
+] as GraphData;
+
+const mockDownloadData = [
+    { start: 1, downloadsCount: 0 },
+    { start: 2, downloadsCount: 0 },
+    { start: 3, downloadsCount: 0 },
+    { start: 4, downloadsCount: 0 },
+    { start: 5, downloadsCount: 0 },
+    { start: 6, downloadsCount: 1 },
+    { start: 7, downloadsCount: 1 },
+] as GraphData;
+
+const mockUserData = ([
+    { start: 1, users: [] },
+    { start: 2, users: [] },
+    { start: 3, users: [] },
+    { start: 4, users: [] },
+    { start: 5, users: [] },
+    { start: 6, users: [1, 2] },
+    { start: 7, users: [] },
+] as unknown) as GraphData;
+
+describe('features/content-insights/MetricSummary', () => {
+    const downloadHeaderMessage = localize(messages.downloadGraphType.id);
+    const peopleHeaderMessage = localize(messages.peopleTitle.id);
+    const previewHeaderMessage = localize(messages.previewGraphType.id);
+
+    const getWrapper = (props = {}) => {
+        return render(
+            <MetricSummary
+                data={mockPreviewData}
+                metric={METRIC.PREVIEWS}
+                period={PERIOD.WEEK}
+                previousPeriodCount={10}
+                totalCount={20}
+                {...props}
+            />,
+        );
+    };
+
+    describe('render', () => {
+        test('should render correctly', () => {
+            getWrapper();
+
+            expect(screen.getByText(previewHeaderMessage)).toBeVisible();
+        });
+
+        test.each`
+            metric              | data                | header                   | period
+            ${METRIC.PREVIEWS}  | ${mockPreviewData}  | ${previewHeaderMessage}  | ${PERIOD.WEEK}
+            ${METRIC.DOWNLOADS} | ${mockDownloadData} | ${downloadHeaderMessage} | ${PERIOD.WEEK}
+            ${METRIC.USERS}     | ${mockUserData}     | ${peopleHeaderMessage}   | ${PERIOD.WEEK}
+            ${METRIC.PREVIEWS}  | ${mockPreviewData}  | ${previewHeaderMessage}  | ${PERIOD.MONTH}
+            ${METRIC.DOWNLOADS} | ${mockDownloadData} | ${downloadHeaderMessage} | ${PERIOD.MONTH}
+            ${METRIC.USERS}     | ${mockUserData}     | ${peopleHeaderMessage}   | ${PERIOD.MONTH}
+            ${METRIC.PREVIEWS}  | ${mockPreviewData}  | ${previewHeaderMessage}  | ${PERIOD.THREEMONTHS}
+            ${METRIC.DOWNLOADS} | ${mockDownloadData} | ${downloadHeaderMessage} | ${PERIOD.THREEMONTHS}
+            ${METRIC.USERS}     | ${mockUserData}     | ${peopleHeaderMessage}   | ${PERIOD.THREEMONTHS}
+            ${METRIC.PREVIEWS}  | ${mockPreviewData}  | ${previewHeaderMessage}  | ${PERIOD.YEAR}
+            ${METRIC.DOWNLOADS} | ${mockDownloadData} | ${downloadHeaderMessage} | ${PERIOD.YEAR}
+            ${METRIC.USERS}     | ${mockUserData}     | ${peopleHeaderMessage}   | ${PERIOD.YEAR}
+        `('should render correct metric summary for $metric', ({ data, header, metric, period }) => {
+            getWrapper({ metric, data, period });
+
+            expect(screen.getByText(header)).toBeVisible();
+            expect(screen.getByText('20')).toBeVisible();
+            expect(screen.getByText('-80%')).toBeVisible();
+        });
+    });
+});

package/src/features/content-insights/_mixins.scss

@@ -0,0 +1,7 @@
+@import '../../styles/variables';
+
+@mixin ContentInsightsHeaderText {
+    color: $bdl-gray-62;
+    font-weight: bold;
+    font-size: $bdl-fontSize-minimum;
+}

package/src/features/content-insights/_variables.scss

@@ -0,0 +1,4 @@
+@import '../../styles/variables';
+
+$ContentInsights-chart-color-previews: linear-gradient($bdl-light-blue, rgba($bdl-light-blue, .7));
+$ContentInsights-chart-height-small: 80px;

package/src/features/content-insights/charts/bar/Bar.scss

@@ -0,0 +1,27 @@
+@import '../../../../styles/variables';
+
+$ca-Bar-borderRadius: 10px;
+
+.ca-Bar-value {
+    flex: 1 1 auto;
+    background-color: $bdl-box-blue;
+    border-radius: $ca-Bar-borderRadius;
+
+    @include bdl-transition($bdl-transitionDurationBase, height);
+}
+
+.ca-Bar {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: flex-end;
+    height: 100%;
+    border-radius: $ca-Bar-borderRadius;
+
+    &.is-horizontal {
+        width: 100%;
+
+        .ca-Bar-value {
+            @include bdl-transition($bdl-transitionDurationBase, width);
+        }
+    }
+}

package/src/features/content-insights/charts/bar/Bar.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+
+import { Direction } from '../types';
+
+import './Bar.scss';
+
+const DEFAULT_SIZE = 50;
+
+interface Props {
+    color?: string;
+    direction?: Direction;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    size: number;
+}
+
+function Bar({ color, direction = 'vertical', onMouseEnter = noop, onMouseLeave = noop, size = DEFAULT_SIZE }: Props) {
+    const isHorizontal = direction === 'horizontal';
+    const cssProperty = direction === 'horizontal' ? 'width' : 'height';
+    const [style, setStyle] = React.useState({
+        backgroundColor: color,
+        [cssProperty]: '0%',
+    });
+
+    const adjustedSize = Math.max(0, size);
+
+    React.useEffect(() => {
+        setStyle({
+            backgroundColor: color,
+            [cssProperty]: adjustedSize === 0 ? '2px' : `${adjustedSize}%`,
+        });
+    }, [adjustedSize, color, cssProperty]);
+
+    return (
+        <div
+            className={classNames('ca-Bar', { 'is-horizontal': isHorizontal })}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            role="presentation"
+        >
+            <div className="ca-Bar-value" style={style} />
+        </div>
+    );
+}
+
+export default Bar;

package/src/features/content-insights/charts/bar/BarChart.scss

@@ -0,0 +1,56 @@
+@import '../../../../styles/variables';
+
+.ca-BarChart {
+    $Bar-margin: .5px;
+    $Bar-minSize: 2px;
+
+    display: flex;
+    flex: 1 1 auto;
+    align-items: flex-end;
+    justify-content: space-between;
+
+    .ca-Bar {
+        flex: 1 1 auto;
+        margin: 0 $Bar-margin;
+
+        &:first-child {
+            margin-left: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    .ca-Bar-value {
+        min-height: $Bar-minSize;
+    }
+
+    &.is-horizontal {
+        flex-direction: column;
+        align-items: start;
+        min-width: $Bar-minSize;
+        margin: $Bar-margin 0;
+
+        .ca-Bar {
+            &:first-child {
+                margin-top: 0;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &.is-interactive {
+        .ca-Bar:hover {
+            background-color: $bdl-gray-05;
+            cursor: pointer;
+
+            .ca-Bar-value {
+                background-color: $bdl-gray-80;
+            }
+        }
+    }
+}