@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/post/threading/common/button/button.scss

@@ -1,148 +0,0 @@
-
-@mixin leveled-bg($hover, $active) {
-    &:hover {
-        &:not(:disabled) {
-            background: rgba($hover, 0.08);
-        }
-    }
-
-    &:active,
-    &.is-active {
-        &:not(:disabled) {
-            background: rgba($active, 0.08);
-        }
-    }
-
-    &.is-active {
-        &:active,
-        &:hover {
-            &:not(:disabled) {
-                background: rgba($active, 0.16);
-            }
-        }
-
-        &:hover {
-            &:active:not(:disabled) {
-                background: rgba($active, 0.24);
-            }
-        }
-    }
-}
-
-@mixin leveled-color($hover, $active) {
-    &:hover {
-        &:not(:disabled) {
-            color: rgba($hover, 0.72);
-        }
-    }
-
-    &:active,
-    &.is-active {
-        &:not(:disabled) {
-            color: rgba($active, 1);
-        }
-    }
-}
-
-.Button {
-    position: relative;
-    padding: 4px 10px;
-    border-radius: 4px;
-    color: rgba(var(--center-channel-color-rgb), 0.56);
-    font-family: Open Sans;
-    font-style: normal;
-    font-weight: 600;
-
-    &.allowTextOverflow {
-        min-width: 4rem;
-
-        .Button_label {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    }
-
-    &:hover {
-        text-decoration: none;
-    }
-
-    &:disabled {
-        opacity: 32%;
-    }
-
-    &.Button___transparent {
-        border: none;
-        background: transparent;
-
-        @include leveled-bg(
-            $hover: var(--center-channel-color-rgb),
-            $active: var(--button-bg-rgb),
-        );
-        @include leveled-color(
-            $hover: var(--center-channel-color-rgb),
-            $active: var(--button-bg-rgb),
-        );
-    }
-
-    &.Button___large {
-        font-size: 14px;
-
-        &.Button___icon {
-            width: 32px;
-            height: 32px;
-            padding: 7px 0;
-            font-size: 18px;
-            line-height: 18px;
-        }
-    }
-
-    .Button_label {
-        display: inline-block;
-        max-width: 100%;
-    }
-
-    .Button_prepended {
-        margin-right: 0.5em;
-    }
-
-    .Button_appended {
-        margin-left: 0.5em;
-    }
-
-    .dot {
-        position: absolute;
-        top: 6px;
-        right: 6px;
-        width: 4px;
-        height: 4px;
-        background: rgba(var(--sidebar-text-active-border-rgb), 1);
-        border-radius: 50%;
-    }
-}
-
-.separated + .separated {
-    // --button-separator-gap should always be even
-    margin-left: var(--button-separator-gap, 0);
-}
-
-.separated:not(.Button),
-.separated:not(:hover):not(.is-active) {
-    + .separated:not(.Button),
-    + .separated:not(:hover):not(.is-active) {
-        position: relative;
-
-        &::before {
-            position: absolute;
-            top: 50%;
-            left: calc(-0.5px - var(--button-separator-gap, 0px) / 2);
-            display: inline-block;
-            width: 1px;
-            height: var(--button-separator-height, 100%);
-            background: rgba(var(--center-channel-color-rgb), 0.16);
-            content: '';
-            pointer-events: none;
-            transform: translateY(-50%);
-        }
-    }
-}

package/src/components/post/threading/common/button/button.test.tsx

@@ -1,75 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {shallow} from 'enzyme';
-
-// import ReplyIcon from 'components/widgets/icons/reply_icon';
-
-// import Button from './button';
-
-// describe('components/threading/common/button', () => {
-//     test('should support onClick', () => {
-//         const action = jest.fn();
-
-//         const wrapper = shallow<typeof Button>(
-//             <Button
-//                 onClick={action}
-//             />,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-
-//         wrapper.simulate('click');
-//         expect(action).toHaveBeenCalled();
-//     });
-
-//     test('should support className', () => {
-//         const className = 'test-class other-test-class';
-//         const wrapper = shallow<typeof Button>(
-//             <Button
-//                 className={className}
-//             />,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-
-//         expect(wrapper.hasClass('test-class')).toBe(true);
-//         expect(wrapper.hasClass('other-test-class')).toBe(true);
-//     });
-
-//     test('should support prepended content', () => {
-//         const wrapper = shallow<typeof Button>(
-//             <Button
-//                 prepend={<ReplyIcon className='Icon'/>}
-//             />,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-
-//         expect(wrapper.exists('.Button_prepended ReplyIcon')).toBe(true);
-//     });
-
-//     test('should support appended content', () => {
-//         const wrapper = shallow<typeof Button>(
-//             <Button
-//                 append={<ReplyIcon className='Icon'/>}
-//             />,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-
-//         expect(wrapper.exists('.Button_appended ReplyIcon')).toBe(true);
-//     });
-
-//     test('should support children', () => {
-//         const wrapper = shallow<typeof Button>(
-//             <Button>
-//                 {'text-goes-here'}
-//             </Button>,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-//         expect(wrapper.text()).toBe('text-goes-here');
-//     });
-// });

package/src/components/post/threading/common/button/button.tsx

@@ -1,51 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {memo, ButtonHTMLAttributes, ReactNode} from 'react';
-import classNames from 'classnames';
-
-// import './button.scss';
-
-type Props = {
-    prepend?: ReactNode;
-    append?: ReactNode;
-    isActive?: boolean;
-    hasDot?: boolean;
-    allowTextOverflow?: boolean;
-}
-
-type Attrs = Exclude<ButtonHTMLAttributes<HTMLButtonElement>, Props>
-
-function Button({
-    prepend,
-    append,
-    children,
-    isActive,
-    hasDot,
-    allowTextOverflow = false,
-    ...attrs
-}: Props & Attrs) {
-    return (
-        <button
-            {...attrs}
-            className={classNames('Button Button___transparent', {'is-active': isActive, allowTextOverflow}, attrs.className)}
-        >
-            {prepend && (
-                <span className='Button_prepended'>
-                    {prepend}
-                </span>
-            )}
-            <span className='Button_label'>
-                {children}
-                {hasDot && <span className='dot'/>}
-            </span>
-            {append && (
-                <span className='Button_appended'>
-                    {append}
-                </span>
-            )}
-        </button>
-    );
-}
-
-export default memo(Button);

package/src/components/post/threading/common/button/index.ts

@@ -1,4 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export {default} from './button';

package/src/components/post/threading/common/follow_button/__snapshots__/follow_button.test.tsx.snap

@@ -1,50 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/threading/common/follow_button should say follow 1`] = `
-<Memo(FollowButton)
-  isFollowing={false}
-  onClick={[MockFunction]}
->
-  <Memo(Button)
-    className="FollowButton"
-    disabled={false}
-    isActive={false}
-    onClick={[MockFunction]}
-  >
-    <button
-      className="Button Button___transparent FollowButton"
-      disabled={false}
-      onClick={[MockFunction]}
-    >
-      <span
-        className="Button_label"
-      >
-        Follow
-      </span>
-    </button>
-  </Memo(Button)>
-</Memo(FollowButton)>
-`;
-
-exports[`components/threading/common/follow_button should say following 1`] = `
-<Memo(FollowButton)
-  isFollowing={true}
->
-  <Memo(Button)
-    className="FollowButton"
-    disabled={false}
-    isActive={true}
-  >
-    <button
-      className="Button Button___transparent is-active FollowButton"
-      disabled={false}
-    >
-      <span
-        className="Button_label"
-      >
-        Following
-      </span>
-    </button>
-  </Memo(Button)>
-</Memo(FollowButton)>
-`;

package/src/components/post/threading/common/follow_button/follow_button.test.tsx

@@ -1,56 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-
-// import {mountWithIntl} from 'tests/helpers/intl-test-helper';
-
-// import Button from '../button';
-
-// import FollowButton from './follow_button';
-
-// describe('components/threading/common/follow_button', () => {
-//     test('should say follow', () => {
-//         const clickHandler = jest.fn();
-
-//         const wrapper = mountWithIntl(
-//             <FollowButton
-//                 isFollowing={false}
-//                 onClick={clickHandler}
-//             />,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-
-//         expect(wrapper.find(Button).text()).toBe('Follow');
-
-//         wrapper.find(Button).simulate('click');
-//         expect(clickHandler).toHaveBeenCalled();
-//     });
-
-//     test('should say following', () => {
-//         const wrapper = mountWithIntl(
-//             <FollowButton
-//                 isFollowing={true}
-//             />,
-//         );
-
-//         expect(wrapper).toMatchSnapshot();
-
-//         expect(wrapper.find(Button).text()).toBe('Following');
-//     });
-
-//     test('should fire click handler', () => {
-//         const clickHandler = jest.fn();
-
-//         const wrapper = mountWithIntl(
-//             <FollowButton
-//                 isFollowing={false}
-//                 onClick={clickHandler}
-//             />,
-//         );
-
-//         wrapper.find(Button).simulate('click');
-//         expect(clickHandler).toHaveBeenCalled();
-//     });
-// });

package/src/components/post/threading/common/follow_button/follow_button.tsx

@@ -1,39 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {memo, ComponentProps} from 'react';
-import {useIntl} from 'react-intl';
-
-import classNames from 'classnames';
-
-import Button from '../button';
-import {t} from '../../../../../utils/i18n';
-
-type Props = {
-    isFollowing: boolean | null | undefined;
-}
-
-function FollowButton({
-    isFollowing,
-    ...props
-}: Props & Exclude<ComponentProps<typeof Button>, Props>) {
-    const {formatMessage} = useIntl();
-    return (
-        <Button
-            {...props}
-            className={classNames(props.className, 'FollowButton')}
-            disabled={props.disabled ?? isFollowing == null}
-            isActive={isFollowing ?? false}
-        >
-            {formatMessage(isFollowing ? {
-                id: t('threading.following'),
-                defaultMessage: 'Following',
-            } : {
-                id: t('threading.notFollowing'),
-                defaultMessage: 'Follow',
-            })}
-        </Button>
-    );
-}
-
-export default memo(FollowButton);

package/src/components/post/threading/common/follow_button/index.ts

@@ -1,4 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-export {default} from './follow_button';

package/src/components/post/timestamp/__snapshots__/semantic_time.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/timestamp/SemanticTime should support custom label 1`] = `
-<Memo(SemanticTime)
-  aria-label="A custom label"
-  value={2020-06-05T10:20:30.000Z}
->
-  <time
-    aria-label="A custom label"
-    dateTime="2020-06-05T10:20:30.000Z"
-  />
-</Memo(SemanticTime)>
-`;

package/src/components/post/timestamp/__snapshots__/timestamp.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`components/timestamp/Timestamp should be wrapped in SemanticTime and support passthrough className and label 1`] = `
-<Memo(SemanticTime)
-  aria-label="test label"
-  className="test class"
-  value={2019-05-03T13:20:00.000Z}
->
-  Friday
-</Memo(SemanticTime)>
-`;
-
-exports[`components/timestamp/Timestamp should not be wrapped in SemanticTime 1`] = `"Friday"`;

package/src/components/post/timestamp/index.ts

@@ -1,50 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import {connect} from 'react-redux';
-
-// import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
-// import {getUserTimezone} from 'mattermost-redux/selectors/entities/timezone';
-// import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';
-// import {getBool} from 'mattermost-redux/selectors/entities/preferences';
-// import {UserTimezone} from 'mattermost-redux/types/users';
-
-// import {areTimezonesEnabledAndSupported} from 'selectors/general';
-
-// import {GlobalState} from 'types/store';
-
-// import {Preferences} from 'utils/constants';
-
-// import Timestamp, {Props as TimestampProps, supportsHourCycle} from './timestamp';
-
-// type Props = {
-//     userTimezone?: UserTimezone;
-// }
-
-// function mapStateToProps(state: GlobalState, {userTimezone}: Props) {
-//     const currentUserId = getCurrentUserId(state);
-
-//     let timeZone: TimestampProps['timeZone'];
-//     let hourCycle: TimestampProps['hourCycle'];
-//     let hour12: TimestampProps['hour12'];
-
-//     if (areTimezonesEnabledAndSupported(state)) {
-//         timeZone = getUserCurrentTimezone(userTimezone ?? getUserTimezone(state, currentUserId)) ?? undefined;
-//     }
-
-//     const useMilitaryTime = getBool(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.USE_MILITARY_TIME, false);
-
-//     if (supportsHourCycle) {
-//         hourCycle = useMilitaryTime ? 'h23' : 'h12';
-//     } else {
-//         hour12 = !useMilitaryTime;
-//     }
-
-//     return {timeZone, hourCycle, hour12};
-// }
-
-// export default connect(mapStateToProps)(Timestamp);
-
-// export {default as SemanticTime} from './semantic_time';
-// import * as RelativeRanges from './relative_ranges';
-// export {RelativeRanges};

package/src/components/post/timestamp/relative_ranges.tsx

@@ -1,58 +0,0 @@
-// // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// // See LICENSE.txt for license information.
-
-// import * as React from 'react';
-// import {FormattedMessage} from 'react-intl';
-// import {Unit} from '@formatjs/intl-relativetimeformat';
-
-// import {RangeDescriptor} from './timestamp';
-
-// export const TODAY_YESTERDAY: RangeDescriptor = {
-//     within: ['day', -1],
-//     display: ['day'],
-// };
-
-// export const TODAY_TITLE_CASE: RangeDescriptor = {
-//     equals: ['day', 0],
-//     display: (
-//         <FormattedMessage
-//             id='date_separator.today'
-//             defaultMessage='Today'
-//         />
-//     ),
-// };
-
-// export const YESTERDAY_TITLE_CASE: RangeDescriptor = {
-//     equals: ['day', -1],
-//     display: (
-//         <FormattedMessage
-//             id='date_separator.yesterday'
-//             defaultMessage='Yesterday'
-//         />
-//     ),
-// };
-
-// export const TOMORROW_TITLE_CASE: RangeDescriptor = {
-//     equals: ['day', 1],
-//     display: (
-//         <FormattedMessage
-//             id='date_separator.tomorrow'
-//             defaultMessage='Tomorrow'
-//         />
-//     ),
-// };
-
-// export const STANDARD_UNITS: {[key in Unit]: RangeDescriptor} & {[key: string]: RangeDescriptor} = {
-//     now: {within: ['second', -45], display: ['second', 0]},
-//     second: {within: ['second', -59], display: ['second']},
-//     minute: {within: ['minute', -59], display: ['minute']},
-//     hour: {within: ['hour', -23.75], display: ['hour']},
-//     'today-yesterday': TODAY_YESTERDAY,
-//     Today: TODAY_TITLE_CASE,
-//     Yesterday: YESTERDAY_TITLE_CASE,
-//     day: {within: ['day', -6], display: ['day']},
-//     week: {within: ['week', -3], display: ['week']},
-//     month: {within: ['month', -11], display: ['month']},
-//     quarter: {within: ['quarter', -3], display: ['quarter']},
-//     year: {within: ['year', -1000], display: ['year']},
-// };

package/src/components/post/timestamp/semantic_time.test.tsx

@@ -1,47 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import * as React from 'react';
-import {mount} from 'enzyme';
-
-import SemanticTime from './semantic_time';
-
-describe('components/timestamp/SemanticTime', () => {
-    test('should render time semantically', () => {
-        const date = new Date('2020-06-05T10:20:30Z');
-        const wrapper = mount(
-            <SemanticTime
-                value={date}
-            />,
-        );
-        expect(wrapper.find('time').prop('aria-label')).toBe(date.toLocaleString());
-        expect(wrapper.find('time').prop('dateTime')).toBe(date.toISOString());
-    });
-
-    test('should support passthrough children', () => {
-        const date = new Date('2020-06-05T10:20:30Z');
-        const wrapper = mount(
-            <SemanticTime
-                value={date}
-            >
-                {'10:20'}
-            </SemanticTime>,
-        );
-
-        expect(wrapper.find('time').prop('aria-label')).toBe(date.toLocaleString());
-        expect(wrapper.find('time').text()).toBe('10:20');
-    });
-
-    test('should support custom label', () => {
-        const date = new Date('2020-06-05T10:20:30Z');
-        const wrapper = mount(
-            <SemanticTime
-                value={date}
-                aria-label='A custom label'
-            />,
-        );
-
-        expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find('time').prop('aria-label')).toBe('A custom label');
-    });
-});

package/src/components/post/timestamp/semantic_time.tsx

@@ -1,28 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import React, {FC, ReactNode, memo, TimeHTMLAttributes} from 'react';
-
-export type Props = {
-    value: Date;
-    children?: ReactNode;
-} & TimeHTMLAttributes<HTMLTimeElement>;
-
-const SemanticTime: FC<Props> = ({
-    value,
-    children,
-    'aria-label': label = value.toLocaleString(),
-    ...props
-}: Props) => {
-    return (
-        <time
-            {...props}
-            aria-label={label}
-            dateTime={value.toISOString()}
-        >
-            {children}
-        </time>
-    );
-};
-
-export default memo(SemanticTime);