diff --git a/src/components/AvatarCompact/AvatarCompact.constants.ts b/src/components/AvatarCompact/AvatarCompact.constants.ts deleted file mode 100644 index b3f2552be0..0000000000 --- a/src/components/AvatarCompact/AvatarCompact.constants.ts +++ /dev/null @@ -1,8 +0,0 @@ -const CLASS_PREFIX = 'md-avatar-compact'; -const K_THRESHOLD = 1000; - -const STYLE = { - wrapper: `${CLASS_PREFIX}-wrapper`, -}; - -export { STYLE, K_THRESHOLD }; diff --git a/src/components/AvatarCompact/AvatarCompact.documentation.mdx b/src/components/AvatarCompact/AvatarCompact.documentation.mdx deleted file mode 100644 index ad80be5522..0000000000 --- a/src/components/AvatarCompact/AvatarCompact.documentation.mdx +++ /dev/null @@ -1 +0,0 @@ -AvatarCompact Documentation diff --git a/src/components/AvatarCompact/AvatarCompact.stories.tsx b/src/components/AvatarCompact/AvatarCompact.stories.tsx deleted file mode 100644 index 95130063ba..0000000000 --- a/src/components/AvatarCompact/AvatarCompact.stories.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import React, { FC } from 'react'; -import { Story } from '@storybook/react'; - -import AvatarCompact, { AvatarCompactProps } from './'; -import { - Title, - Subtitle, - Description, - Primary, - ArgsTable, - PRIMARY_STORY, -} from '@storybook/addon-docs'; - -import Documentation from './AvatarCompact.documentation.mdx'; - -const DocsPage: FC = () => ( - <> - - <Subtitle /> - <Description /> - <Documentation /> - <Primary /> - <ArgsTable story={PRIMARY_STORY} /> - </> -); - -export default { - title: 'Momentum UI/AvatarCompact', - component: AvatarCompact, - parameters: { - expanded: true, - docs: { - page: DocsPage, - }, - }, - argTypes: { - className: { - defaultValue: undefined, - description: - 'If present, the class name will be added to the underlying component. Used to override styles by consumers.', - control: { type: 'text' }, - table: { - type: { - summary: 'string', - }, - defaultValue: { - summary: undefined, - }, - }, - }, - count: { - defaultValue: undefined, - description: 'Number of people for this compact avatar.', - control: { type: 'number' }, - table: { - type: { - summary: 'number', - }, - defaultValue: { - summary: undefined, - }, - }, - }, - }, -}; - -const MultiTemplate: Story<AvatarCompactProps> = (args: AvatarCompactProps, { parameters }) => { - const { variants } = parameters; - - const items = variants.map((variant, index: number) => ( - <div key={index}> - <AvatarCompact {...args} {...variant} /> - <p>{variant.label}</p> - </div> - )); - - return ( - <div - style={{ - display: 'grid', - gridTemplateColumns: `repeat(4, auto)`, - gap: '1.5rem', - alignItems: 'end', - }} - > - {items} - </div> - ); -}; - -const Template: Story<AvatarCompactProps> = (args) => <AvatarCompact {...args} />; - -const Example = Template.bind({}); - -Example.args = { - count: 200, -}; - -const Common = MultiTemplate.bind({}); - -Common.parameters = { - variants: [ - { count: 20 }, - { count: 1 }, - { count: 10000 }, - { count: 1001 }, - { count: 100000 }, - { count: 125343 }, - { count: 15343 }, - ], -}; - -export { Example, Common }; diff --git a/src/components/AvatarCompact/AvatarCompact.style.scss b/src/components/AvatarCompact/AvatarCompact.style.scss deleted file mode 100644 index 98551f9240..0000000000 --- a/src/components/AvatarCompact/AvatarCompact.style.scss +++ /dev/null @@ -1,8 +0,0 @@ -.md-avatar-compact-wrapper { - background-color: var(--mds-color-theme-avatar-default); - color: var(--mds-color-theme-common-text-primary-normal); - border-radius: 100vh; - font-size: 0.75rem; - padding: 0.25rem 0.5rem; - width: fit-content; -} diff --git a/src/components/AvatarCompact/AvatarCompact.tsx b/src/components/AvatarCompact/AvatarCompact.tsx deleted file mode 100644 index d50535573a..0000000000 --- a/src/components/AvatarCompact/AvatarCompact.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { FC } from 'react'; -import classnames from 'classnames'; - -import './AvatarCompact.style.scss'; -import { Props } from './AvatarCompact.types'; -import { STYLE, K_THRESHOLD } from './AvatarCompact.constants'; - -const AvatarCompact: FC<Props> = (props: Props) => { - const { className, count } = props; - - const getFormattedNumber = () => { - if (count < K_THRESHOLD) { - return `+${count}`; - } else { - const ret = count / K_THRESHOLD; - return `+${ret.toFixed(count % K_THRESHOLD < 100 ? 0 : 1)}K`; - } - }; - - return <div className={classnames(className, STYLE.wrapper)}>{getFormattedNumber()}</div>; -}; - -/** - * Avatar component used to represent multiple people - */ - -export default AvatarCompact; diff --git a/src/components/AvatarCompact/AvatarCompact.types.ts b/src/components/AvatarCompact/AvatarCompact.types.ts deleted file mode 100644 index 165d6c6df9..0000000000 --- a/src/components/AvatarCompact/AvatarCompact.types.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface Props { - /** - * className prop description - */ - className?: string; - /** - * If type of avatar is read-receipt, the avatar will represent - * a certain number of people. This props will indicate that. - */ - count: number; -} diff --git a/src/components/AvatarCompact/AvatarCompact.unit.test.tsx b/src/components/AvatarCompact/AvatarCompact.unit.test.tsx deleted file mode 100644 index a76e6e7ee9..0000000000 --- a/src/components/AvatarCompact/AvatarCompact.unit.test.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import AvatarCompact from '.'; -import { mount } from 'enzyme'; -import React from 'react'; -import { STYLE } from './AvatarCompact.constants'; - -describe('AvatarCompact', () => { - describe('snapshot', () => { - it('should match snapshot', () => { - expect.assertions(1); - - const container = mount(<AvatarCompact count={1} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with 50 -> +50', () => { - expect.assertions(1); - - const container = mount(<AvatarCompact count={50} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with 1000 -> +1K', () => { - expect.assertions(1); - - const container = mount(<AvatarCompact count={1000} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with 1001 -> +1K', () => { - expect.assertions(1); - - const container = mount(<AvatarCompact count={1001} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with 100000 -> +100K', () => { - expect.assertions(1); - - const container = mount(<AvatarCompact count={100000} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with 125343 -> +125.3K', () => { - expect.assertions(1); - - const container = mount(<AvatarCompact count={125343} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with 15343 -> +15.3K', () => { - expect.assertions(1); - - const container = mount(<AvatarCompact count={15343} />); - - expect(container).toMatchSnapshot(); - }); - }); - - describe('attributes', () => { - it('should have its main class', () => { - expect.assertions(1); - - const element = mount(<AvatarCompact count={10} />) - .find(AvatarCompact) - .getDOMNode(); - - expect(element.classList.contains(STYLE.wrapper)).toBe(true); - }); - - it('should pass the count prop', () => { - expect.assertions(1); - - const count = 10; - - const element = mount(<AvatarCompact count={count} />) - .find(AvatarCompact) - .getDOMNode(); - - expect(element.innerHTML).toBe(`+${count}`); - }); - }); -}); diff --git a/src/components/AvatarCompact/AvatarCompact.unit.test.tsx.snap b/src/components/AvatarCompact/AvatarCompact.unit.test.tsx.snap deleted file mode 100644 index ce53b2541b..0000000000 --- a/src/components/AvatarCompact/AvatarCompact.unit.test.tsx.snap +++ /dev/null @@ -1,85 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`AvatarCompact snapshot should match snapshot 1`] = ` -<AvatarCompact - count={1} -> - <div - className="md-avatar-compact-wrapper" - > - +1 - </div> -</AvatarCompact> -`; - -exports[`AvatarCompact snapshot should match snapshot with 50 -> +50 1`] = ` -<AvatarCompact - count={50} -> - <div - className="md-avatar-compact-wrapper" - > - +50 - </div> -</AvatarCompact> -`; - -exports[`AvatarCompact snapshot should match snapshot with 1000 -> +1K 1`] = ` -<AvatarCompact - count={1000} -> - <div - className="md-avatar-compact-wrapper" - > - +1K - </div> -</AvatarCompact> -`; - -exports[`AvatarCompact snapshot should match snapshot with 1001 -> +1K 1`] = ` -<AvatarCompact - count={1001} -> - <div - className="md-avatar-compact-wrapper" - > - +1K - </div> -</AvatarCompact> -`; - -exports[`AvatarCompact snapshot should match snapshot with 15343 -> +15.3K 1`] = ` -<AvatarCompact - count={15343} -> - <div - className="md-avatar-compact-wrapper" - > - +15.3K - </div> -</AvatarCompact> -`; - -exports[`AvatarCompact snapshot should match snapshot with 100000 -> +100K 1`] = ` -<AvatarCompact - count={100000} -> - <div - className="md-avatar-compact-wrapper" - > - +100K - </div> -</AvatarCompact> -`; - -exports[`AvatarCompact snapshot should match snapshot with 125343 -> +125.3K 1`] = ` -<AvatarCompact - count={125343} -> - <div - className="md-avatar-compact-wrapper" - > - +125.3K - </div> -</AvatarCompact> -`; diff --git a/src/components/AvatarCompact/index.ts b/src/components/AvatarCompact/index.ts deleted file mode 100644 index 3fe74d28a4..0000000000 --- a/src/components/AvatarCompact/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { default as AvatarCompact } from './AvatarCompact'; -import { Props } from './AvatarCompact.types'; -import * as CONSTANTS from './AvatarCompact.constants'; - -export { CONSTANTS as AVATAR_COMPACT_CONSTANTS }; - -export type AvatarCompactProps = Props; - -export default AvatarCompact; diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.constants.ts b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.constants.ts deleted file mode 100644 index 6649af7c2f..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.constants.ts +++ /dev/null @@ -1,23 +0,0 @@ -const CLASS_PREFIX = 'md-avatar-meetings-list-item'; - -const SCHEDULER_STATES = { - available: 'available', - unavailable: 'unavailable', - unknown: 'unknown', - quietHours: 'quiet-hours', - none: 'none', -}; - -const DEFAULTS = { - SCHEDULER_STATE: SCHEDULER_STATES.none, - IS_MUTED: true, - AVATAR_PROPS: { title: 'C' }, -}; - -const STYLE = { - wrapper: `${CLASS_PREFIX}-wrapper`, - actionsWrapper: `${CLASS_PREFIX}-actions-wrapper`, - textWrapper: `${CLASS_PREFIX}-text-wrapper`, -}; - -export { CLASS_PREFIX, DEFAULTS, STYLE, SCHEDULER_STATES }; diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.args.ts b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.args.ts deleted file mode 100644 index 5e8de799ac..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.args.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { commonStyles } from '../../storybook/helper.stories.argtypes'; -import { SCHEDULER_STATES } from './AvatarMeetingsListItem.constants'; - -export default { - ...commonStyles, - schedulerState: { - description: 'Determines the state of the scheduler and will display an according icon.', - control: { type: 'select' }, - options: [...Object.values(SCHEDULER_STATES)], - table: { - type: { - summary: "'available' | 'unavailable' | 'unknown' | 'quiet-hours' | 'none'", - }, - defaultValue: { - summary: SCHEDULER_STATES.none, - }, - }, - }, - firstLine: { - description: - 'Text displayed on the first line of the item. (if only firstLine is provided, it will be centered).', - control: { type: 'text' }, - table: { - type: { - summary: 'text', - }, - defaultValue: { - summary: '', - }, - }, - }, - secondLine: { - description: 'Text displayed on the second line of the item.', - control: { type: 'text' }, - table: { - type: { - summary: 'text', - }, - defaultValue: { - summary: '', - }, - }, - }, - onHoverActionCallback: { - action: 'onHoverActionCallback', - description: - 'If this callback is present, a close button will appear on hover and this callback is passed as the event handler.', - table: { - type: { - summary: '(e: PressEvent) => void;', - }, - defaultValue: { - summary: 'undefined', - }, - }, - }, - onPressMuteAction: { - action: 'onPressMuteAction', - description: 'Callback passed down to the mute/unmute button.', - table: { - type: { - summary: '(e: PressEvent) => void;', - }, - defaultValue: { - summary: 'undefined', - }, - }, - }, - isMuted: { - description: 'Determines the style/color of the microphone icon button if present.', - control: { type: 'boolean' }, - table: { - type: { - summary: 'boolean', - }, - defaultValue: { - summary: false, - }, - }, - }, - displayActions: { - description: 'Determines what actions will be displayed inside the list item.', - control: { type: 'array' }, - table: { - type: { - summary: 'array', - }, - defaultValue: { - summary: [], - }, - }, - }, - - //TODO: once Popover is implemented, add arg type for menuAction - // moreActionMenu: { - // description: 'Contains the menu list.', - // control: { type: 'ReactElement' }, - // table: { - // type: { - // summary: 'ReactElement', - // }, - // defaultValue: { - // summary: undefined, - // }, - // }, - // }, -}; diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.docs.mdx b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.docs.mdx deleted file mode 100644 index e173b84e75..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.docs.mdx +++ /dev/null @@ -1 +0,0 @@ -The `<AvatarMeetingsListItem />` component. diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.tsx b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.tsx deleted file mode 100644 index d8fa55e8ae..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.stories.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { MultiTemplateWithPseudoStates, Template } from '../../storybook/helper.stories.templates'; -import { DocumentationPage } from '../../storybook/helper.stories.docs'; -import StyleDocs from '../../storybook/docs.stories.style.mdx'; - -import AvatarMeetingsListItem, { AvatarMeetingsListItemProps } from '.'; -import argTypes from './AvatarMeetingsListItem.stories.args'; -import Documentation from './AvatarMeetingsListItem.stories.docs.mdx'; -import { action } from '@storybook/addon-actions'; -import { PresenceType } from '../Avatar/Avatar.types'; -import { SCHEDULER_STATES } from './AvatarMeetingsListItem.constants'; -import { AvatarMeetingsListItemActions } from './AvatarMeetingsListItem.types'; -export default { - title: 'Momentum UI/AvatarMeetingsListItem', - component: AvatarMeetingsListItem, - parameters: { - expanded: true, - docs: { - page: DocumentationPage(Documentation, StyleDocs), - }, - }, -}; - -const Example = Template<AvatarMeetingsListItemProps>(AvatarMeetingsListItem).bind({}); - -Example.args = { - firstLine: 'This is a first line', - secondLine: 'This is a second line', - avatarProps: { - title: 'Cisco', - presence: PresenceType.Active, - }, -}; - -Example.argTypes = { ...argTypes }; - -const Common = MultiTemplateWithPseudoStates<AvatarMeetingsListItemProps>( - AvatarMeetingsListItem -).bind({}); - -Common.argTypes = { ...argTypes }; -delete Common.argTypes.children; - -Common.args = { - avatarProps: { - title: 'Cisco', - presence: PresenceType.Active, - }, -}; - -Common.parameters = { - variants: [ - { - label: 'Long text', - firstLine: 'This is a very long first line', - schedulerState: SCHEDULER_STATES.available, - displayActions: [AvatarMeetingsListItemActions.mute, AvatarMeetingsListItemActions.more], - onPressMuteAction: action('onPressMuteAction'), - }, - { - label: 'Two lines', - firstLine: 'Example B', - secondLine: 'Example second line', - schedulerState: SCHEDULER_STATES.unavailable, - displayActions: [AvatarMeetingsListItemActions.mute, AvatarMeetingsListItemActions.more], - onPressMuteAction: action('onPressMuteAction'), - isMuted: false, - }, - { - label: 'Scheduler Unknown', - firstLine: 'Example C', - schedulerState: SCHEDULER_STATES.unknown, - displayActions: [AvatarMeetingsListItemActions.mute], - onPressMuteAction: action('onPressMuteAction'), - }, - { - label: 'Scheduler Quite Hours', - firstLine: 'Example C', - schedulerState: SCHEDULER_STATES.quietHours, - }, - { - label: 'With hover action', - firstLine: 'Example C', - schedulerState: SCHEDULER_STATES.quietHours, - onHoverActionCallback: action('onHoverActionCallback'), - displayActions: [AvatarMeetingsListItemActions.closeOnHover], - }, - ], -}; - -export { Example, Common }; diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.style.scss b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.style.scss deleted file mode 100644 index cec98b8ba6..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.style.scss +++ /dev/null @@ -1,39 +0,0 @@ -.md-avatar-meetings-list-item-text-wrapper { - display: flex; - align-items: center; - - div { - display: flex; - flex-direction: column; - - p { - margin: 0; - float: left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 10rem; // I need help with this, I'd like to make this responsive but I didn't manage - } - - small { - margin: 0; - color: var(--mds-color-theme-text-secondary-normal) !important; - margin-top: -4px; - overflow: auto; - text-overflow: ellipsis; - } - } - - mdc-icon { - margin-right: 0.5rem; - } -} - -.md-avatar-meetings-list-item-actions-wrapper { - display: flex; - justify-content: flex-end; - - > button:last-child { - margin-left: 0.5rem !important; - } -} diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx deleted file mode 100644 index 17cf258fd2..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.tsx +++ /dev/null @@ -1,153 +0,0 @@ -import React, { FC } from 'react'; -import classnames from 'classnames'; - -import { DEFAULTS, SCHEDULER_STATES, STYLE } from './AvatarMeetingsListItem.constants'; -import { AvatarMeetingsListItemActions, Props } from './AvatarMeetingsListItem.types'; -import './AvatarMeetingsListItem.style.scss'; -import ListItemBase from '../ListItemBase'; -import ListItemBaseSection from '../ListItemBaseSection'; -import Avatar from '../Avatar'; -import Text from '../Text'; -import Icon, { IconWeight, IconScale } from '../Icon'; -import ButtonCircle from '../ButtonCircle'; -import { useHover } from '@react-aria/interactions'; - -/** - * Avatar Meetings List Item component used in in-meeting experience participants lists. - */ -const AvatarMeetingsListItem: FC<Props> = (props: Props) => { - const { - className, - id, - style, - schedulerState = DEFAULTS.SCHEDULER_STATE, - firstLine, - secondLine, - isMuted = DEFAULTS.IS_MUTED, - displayActions, - //TODO: moreActionMenu, Once popover component is implemented, add way to customize the menu - onHoverActionCallback, - onPressMuteAction, - avatarProps = DEFAULTS.AVATAR_PROPS, - } = props; - - const iconProps = { scale: 16 as IconScale, weight: 'bold' as IconWeight, strokeColor: 'none' }; - - let displayHoverAction = false; - let displayMoreAction = false; - let displayMuteAction = false; - - if (displayActions && Array.isArray(displayActions)) { - displayHoverAction = displayActions.includes(AvatarMeetingsListItemActions.closeOnHover); - displayMoreAction = displayActions.includes(AvatarMeetingsListItemActions.more); - displayMuteAction = displayActions.includes(AvatarMeetingsListItemActions.mute); - } - - const renderSchedulerIcon = () => { - switch (schedulerState) { - case SCHEDULER_STATES.available: - return ( - <Icon - name="scheduler-available" - fillColor="var(--mds-color-theme-text-success-normal)" - {...iconProps} - /> - ); - - case SCHEDULER_STATES.unavailable: - return ( - <Icon - name="scheduler-unavailable" - fillColor="var(--mds-color-theme-text-warning-normal)" - {...iconProps} - /> - ); - - case SCHEDULER_STATES.unknown: - return ( - <Icon - name="scheduler-unknown" - fillColor="var(--mds-color-theme-text-error-normal)" - {...iconProps} - /> - ); - - case SCHEDULER_STATES.quietHours: - return ( - <Icon - name="scheduler-not-working-hours" - fillColor="var(--mds-color-theme-text-secondary-normal)" - {...iconProps} - /> - ); - case SCHEDULER_STATES.none: - return null; - } - }; - - const renderText = () => { - if (secondLine) { - return ( - <> - <Text type="body-primary" tagName="p"> - {firstLine} - </Text> - <Text type="body-secondary" tagName="small"> - {secondLine} - </Text> - </> - ); - } else { - return ( - <Text type="body-primary" tagName="p"> - {firstLine} - </Text> - ); - } - }; - - const { hoverProps, isHovered } = useHover({}); - - return ( - <ListItemBase - size={50} - shape="isPilled" - className={classnames(className, STYLE.wrapper)} - id={id} - {...hoverProps} - style={style} - > - <ListItemBaseSection position="start"> - <Avatar size={32} {...avatarProps} /> - </ListItemBaseSection> - <ListItemBaseSection position="middle" className={STYLE.textWrapper}> - {renderSchedulerIcon()} - <div>{renderText()}</div> - </ListItemBaseSection> - <ListItemBaseSection position="end" className={STYLE.actionsWrapper}> - {isHovered && displayHoverAction && ( - <ButtonCircle color="cancel" size={28} onPress={onHoverActionCallback}> - <Icon name="cancel" weight="bold" scale={16} /> - </ButtonCircle> - )} - {displayMoreAction && ( - <ButtonCircle ghost size={28}> - <Icon name="more" weight="bold" scale={16} /> - </ButtonCircle> - )} - {displayMuteAction && ( - <ButtonCircle onPress={onPressMuteAction} ghost size={28}> - <Icon - name={isMuted ? 'microphone-muted' : 'microphone-on'} - weight="bold" - scale={16} - fillColor={isMuted && 'var(--mds-color-theme-text-error-normal)'} - /> - </ButtonCircle> - )} - </ListItemBaseSection> - </ListItemBase> - ); -}; - -export default AvatarMeetingsListItem; diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.types.ts b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.types.ts deleted file mode 100644 index 7f00916b2c..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.types.ts +++ /dev/null @@ -1,74 +0,0 @@ -import { PressEvent } from '@react-types/shared'; -import { CSSProperties, ReactElement, ReactNode } from 'react'; -import { AvatarProps } from '../Avatar'; - -export enum AvatarMeetingsListItemActions { - mute = 'mute', - more = 'more', - closeOnHover = 'close-on-hover', -} -export interface Props { - /** - * Child components of this ButtonPill. - */ - children?: ReactNode; - - /** - * Custom class for overriding this component's CSS. - */ - className?: string; - - /** - * Custom id for overriding this component's CSS. - */ - id?: string; - - /** - * Props passed to the Avatar component, apart from size which is fixed - */ - avatarProps?: Omit<AvatarProps, 'size'>; - - /** - * Custom style for overriding this component's CSS. - */ - style?: CSSProperties; - - /** - * Determines the state of the scheduler and will display an according icon. - */ - schedulerState?: 'available' | 'unavailable' | 'unknown' | 'quiet-hours' | 'none'; - - /** - * Text displayed on the first line of the item. (if only firstLine is provided, it will be centered). - */ - firstLine?: string; - - /** - * Text displayed on the second line of the item. - */ - secondLine?: string; - - /** - * Callback passed to hover close button as event handler. - */ - onHoverActionCallback?: (e: PressEvent) => void; - - /** - * Callback passed down to the mute/unmute button. - */ - onPressMuteAction?: (e: PressEvent) => void; - - /** - * Determines what actions will be displayed inside the list item. - */ - displayActions?: Array<AvatarMeetingsListItemActions>; - - /** - * Determines the style/color of the microphone icon button if present. - */ - isMuted?: boolean; - /** - * Represents the actions menu displayed when the more button is pressed. - */ - moreActionMenu?: ReactElement; -} diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx deleted file mode 100644 index 4ad7a97fc9..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx +++ /dev/null @@ -1,377 +0,0 @@ -import React from 'react'; -import { mountAndWait } from '../../../test/utils'; -import { PresenceType } from '../Avatar/Avatar.types'; -import AvatarMeetingsListItem, { AVATAR_MEETINGS_LIST_ITEM_CONSTANTS as CONSTANTS } from '.'; -import ButtonCircle from '../ButtonCircle'; -import { AvatarMeetingsListItemActions } from './AvatarMeetingsListItem.types'; - -describe('<AvatarMeetingsListItem />', () => { - describe('snapshot', () => { - it('should match snapshot', async () => { - expect.assertions(1); - - const container = await mountAndWait(<AvatarMeetingsListItem />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with className', async () => { - expect.assertions(1); - - const className = 'example-class'; - - const container = await mountAndWait(<AvatarMeetingsListItem className={className} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with id', async () => { - expect.assertions(1); - - const id = 'example-id'; - - const container = await mountAndWait(<AvatarMeetingsListItem id={id} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with style', async () => { - expect.assertions(1); - - const style = { color: 'pink' }; - - const container = await mountAndWait(<AvatarMeetingsListItem style={style} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with scheduler state = unknown', async () => { - expect.assertions(1); - - const schedulerState = 'unknown'; - - const container = await mountAndWait( - <AvatarMeetingsListItem schedulerState={schedulerState} /> - ); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with scheduler state = unavailable', async () => { - expect.assertions(1); - - const schedulerState = 'unavailable'; - - const container = await mountAndWait( - <AvatarMeetingsListItem schedulerState={schedulerState} /> - ); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with scheduler state = available', async () => { - expect.assertions(1); - - const schedulerState = 'available'; - - const container = await mountAndWait( - <AvatarMeetingsListItem schedulerState={schedulerState} /> - ); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with scheduler state = quiet-hours', async () => { - expect.assertions(1); - - const schedulerState = 'quiet-hours'; - - const container = await mountAndWait( - <AvatarMeetingsListItem schedulerState={schedulerState} /> - ); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with firstLine', async () => { - expect.assertions(1); - - const firstLine = 'firstLine'; - - const container = await mountAndWait(<AvatarMeetingsListItem firstLine={firstLine} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with secondLine', async () => { - expect.assertions(1); - - const secondLine = 'secondLine'; - - const container = await mountAndWait(<AvatarMeetingsListItem secondLine={secondLine} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with displayMuteAction', async () => { - expect.assertions(1); - - const displayActions = [AvatarMeetingsListItemActions.mute]; - - const container = await mountAndWait( - <AvatarMeetingsListItem displayActions={displayActions} /> - ); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with displayMuteAction && !isMuted', async () => { - expect.assertions(1); - - const displayActions = [AvatarMeetingsListItemActions.mute]; - const isMuted = false; - - const container = await mountAndWait( - <AvatarMeetingsListItem displayActions={displayActions} isMuted={isMuted} /> - ); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with displayMoreAction', async () => { - expect.assertions(1); - - const displayActions = [AvatarMeetingsListItemActions.more]; - - const container = await mountAndWait( - <AvatarMeetingsListItem displayActions={displayActions} /> - ); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with avatarProps', async () => { - expect.assertions(1); - - const avatarProps = { - title: 'Cisco', - presence: PresenceType.Active, - }; - - const container = await mountAndWait(<AvatarMeetingsListItem avatarProps={avatarProps} />); - - expect(container).toMatchSnapshot(); - }); - }); - - describe('attributes', () => { - it('should have its wrapper class', async () => { - expect.assertions(1); - - const element = (await mountAndWait(<AvatarMeetingsListItem />)) - .find(AvatarMeetingsListItem) - .getDOMNode(); - - expect(element.classList.contains(CONSTANTS.STYLE.wrapper)).toBe(true); - }); - - it('should have provided class when className is provided', async () => { - expect.assertions(1); - - const className = 'example-class'; - - const element = (await mountAndWait(<AvatarMeetingsListItem className={className} />)) - .find(AvatarMeetingsListItem) - .getDOMNode(); - - expect(element.classList.contains(className)).toBe(true); - }); - - it('should have provided id when id is provided', async () => { - expect.assertions(1); - - const id = 'example-id'; - - const element = (await mountAndWait(<AvatarMeetingsListItem id={id} />)) - .find(AvatarMeetingsListItem) - .getDOMNode(); - - expect(element.id).toBe(id); - }); - - it('should have provided style when style is provided', async () => { - expect.assertions(1); - - const style = { color: 'pink' }; - const styleString = 'color: pink;'; - - const element = (await mountAndWait(<AvatarMeetingsListItem style={style} />)) - .find(AvatarMeetingsListItem) - .getDOMNode(); - - expect(element.getAttribute('style')).toBe(styleString); - }); - - it('should have provided correct icon when state = unknown is provided', async () => { - expect.assertions(1); - - const schedulerState = 'unknown'; - - const element = ( - await mountAndWait(<AvatarMeetingsListItem schedulerState={schedulerState} />) - ) - .find('Icon[name="scheduler-unknown"]') - .getDOMNode(); - - expect(element).toBeDefined(); - }); - - it('should have provided correct icon when schedulerState = unavailable is provided', async () => { - expect.assertions(1); - - const schedulerState = 'unavailable'; - - const element = ( - await mountAndWait(<AvatarMeetingsListItem schedulerState={schedulerState} />) - ) - .find('Icon[name="scheduler-unavailable"]') - .getDOMNode(); - - expect(element).toBeDefined(); - }); - - it('should have provided correct icon when schedulerState = available is provided', async () => { - expect.assertions(1); - - const schedulerState = 'available'; - - const element = ( - await mountAndWait(<AvatarMeetingsListItem schedulerState={schedulerState} />) - ) - .find('Icon[name="scheduler-available"]') - .getDOMNode(); - - expect(element).toBeDefined(); - }); - - it('should have provided correct icon when schedulerState = quiet-hours is provided', async () => { - expect.assertions(1); - - const schedulerState = 'quiet-hours'; - - const element = ( - await mountAndWait(<AvatarMeetingsListItem schedulerState={schedulerState} />) - ) - .find('Icon[name="scheduler-not-working-hours"]') - .getDOMNode(); - - expect(element).toBeDefined(); - }); - - it('should display firstLine when firstLine is provided', async () => { - expect.assertions(1); - - const firstLine = 'firstLine'; - - const element = (await mountAndWait(<AvatarMeetingsListItem firstLine={firstLine} />)) - .find('Text[type="body-primary"]') - .getDOMNode(); - - expect(element.innerHTML).toBe(firstLine); - }); - - it('should display firstLine when firstLine is provided', async () => { - expect.assertions(1); - - const firstLine = 'firstLine'; - const secondLine = 'secondLine'; - - const element = ( - await mountAndWait(<AvatarMeetingsListItem firstLine={firstLine} secondLine={secondLine} />) - ) - .find('Text[type="body-secondary"]') - .getDOMNode(); - - expect(element.innerHTML).toBe(secondLine); - }); - - it('should display correct icon when displayMuteAction && isMuted is provided', async () => { - expect.assertions(1); - - const displayActions = [AvatarMeetingsListItemActions.mute]; - const isMuted = true; - - const element = ( - await mountAndWait( - <AvatarMeetingsListItem displayActions={displayActions} isMuted={isMuted} /> - ) - ) - .find('Icon[name="microphone-muted"]') - .getDOMNode(); - - expect(element).toBeDefined(); - }); - - it('should display correct icon when displayMuteAction && !isMuted is provided', async () => { - expect.assertions(1); - - const displayActions = [AvatarMeetingsListItemActions.mute]; - const isMuted = false; - - const element = ( - await mountAndWait( - <AvatarMeetingsListItem displayActions={displayActions} isMuted={isMuted} /> - ) - ) - .find('Icon[name="microphone-on"]') - .getDOMNode(); - - expect(element).toBeDefined(); - }); - - it('should display correct icon when displayMoreAction is provided', async () => { - expect.assertions(1); - - const displayActions = [AvatarMeetingsListItemActions.more]; - - const element = ( - await mountAndWait(<AvatarMeetingsListItem displayActions={displayActions} />) - ) - .find('Icon[name="more"]') - .getDOMNode(); - - expect(element).toBeDefined(); - }); - }); - - describe('actions', () => { - it('should handle mouse press events when onPressMuteAction is provided', async () => { - expect.assertions(1); - - const mockOnPressMuteAction = jest.fn(); - - const component = ( - await mountAndWait( - <AvatarMeetingsListItem - displayActions={[AvatarMeetingsListItemActions.mute]} - onPressMuteAction={mockOnPressMuteAction} - /> - ) - ).find(ButtonCircle); - - component.props().onPress({ - type: 'press', - pointerType: 'mouse', - altKey: false, - shiftKey: false, - ctrlKey: false, - metaKey: false, - target: component.getDOMNode(), - }); - - expect(mockOnPressMuteAction).toBeCalledTimes(1); - - jest.restoreAllMocks(); - }); - }); -}); diff --git a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx.snap b/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx.snap deleted file mode 100644 index 02d4c3b128..0000000000 --- a/src/components/AvatarMeetingsListItem/AvatarMeetingsListItem.unit.test.tsx.snap +++ /dev/null @@ -1,2197 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot 1`] = ` -<AvatarMeetingsListItem> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with avatarProps 1`] = ` -<AvatarMeetingsListItem - avatarProps={ - Object { - "presence": "active", - "title": "Cisco", - } - } -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - presence="active" - size={32} - title="Cisco" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - <Presence - isCircularWrapper={true} - presenceColor="var(--mds-color-theme-indicator-stable)" - presenceIcon="unread" - size={32} - > - <div - className="md-avatar-presence-icon-wrapper" - data-shape={true} - > - <Icon - fillColor="var(--mds-color-theme-indicator-stable)" - name="unread" - scale={14} - weight="filled" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={14} - data-test="unread" - name="unread-filled" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-indicator-stable)", - } - } - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={14} - data-test="unread" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-indicator-stable)", - } - } - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - </div> - </Presence> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with className 1`] = ` -<AvatarMeetingsListItem - className="example-class" -> - <ListItemBase - className="example-class md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="example-class md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayMoreAction 1`] = ` -<AvatarMeetingsListItem - displayActions={ - Array [ - "more", - ] - } -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - > - <ButtonCircle - ghost={true} - size={28} - > - <ButtonSimple - aria-disabled={false} - className="md-button-circle-wrapper" - data-color="primary" - data-disabled={false} - data-ghost={true} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={28} - > - <FocusRing> - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - > - <button - className="md-button-circle-wrapper md-button-simple-wrapper" - data-color="primary" - data-disabled={false} - data-ghost={true} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={28} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - type="button" - > - <Icon - name="more" - scale={16} - weight="bold" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="more" - name="more-bold" - style={Object {}} - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="more" - style={Object {}} - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - </button> - </FocusRing> - </FocusRing> - </ButtonSimple> - </ButtonCircle> - </div> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayMuteAction && !isMuted 1`] = ` -<AvatarMeetingsListItem - displayActions={ - Array [ - "mute", - ] - } - isMuted={false} -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - > - <ButtonCircle - ghost={true} - size={28} - > - <ButtonSimple - aria-disabled={false} - className="md-button-circle-wrapper" - data-color="primary" - data-disabled={false} - data-ghost={true} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={28} - > - <FocusRing> - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - > - <button - className="md-button-circle-wrapper md-button-simple-wrapper" - data-color="primary" - data-disabled={false} - data-ghost={true} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={28} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - type="button" - > - <Icon - fillColor={false} - name="microphone-on" - scale={16} - weight="bold" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="microphone-on" - name="microphone-on-bold" - style={Object {}} - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="microphone-on" - style={Object {}} - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - </button> - </FocusRing> - </FocusRing> - </ButtonSimple> - </ButtonCircle> - </div> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with displayMuteAction 1`] = ` -<AvatarMeetingsListItem - displayActions={ - Array [ - "mute", - ] - } -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - > - <ButtonCircle - ghost={true} - size={28} - > - <ButtonSimple - aria-disabled={false} - className="md-button-circle-wrapper" - data-color="primary" - data-disabled={false} - data-ghost={true} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={28} - > - <FocusRing> - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - > - <button - className="md-button-circle-wrapper md-button-simple-wrapper" - data-color="primary" - data-disabled={false} - data-ghost={true} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={28} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - type="button" - > - <Icon - fillColor="var(--mds-color-theme-text-error-normal)" - name="microphone-muted" - scale={16} - weight="bold" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="microphone-muted" - name="microphone-muted-bold" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-error-normal)", - } - } - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="microphone-muted" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-error-normal)", - } - } - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - </button> - </FocusRing> - </FocusRing> - </ButtonSimple> - </ButtonCircle> - </div> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with firstLine 1`] = ` -<AvatarMeetingsListItem - firstLine="firstLine" -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - > - firstLine - </mdc-text> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with id 1`] = ` -<AvatarMeetingsListItem - id="example-id" -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - id="example-id" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - id="example-id" - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with scheduler state = available 1`] = ` -<AvatarMeetingsListItem - schedulerState="available" -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <Icon - fillColor="var(--mds-color-theme-text-success-normal)" - name="scheduler-available" - scale={16} - strokeColor="none" - weight="bold" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="scheduler-available" - name="scheduler-available-bold" - strokeColor="none" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-success-normal)", - } - } - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="scheduler-available" - strokeColor="none" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-success-normal)", - } - } - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with scheduler state = quiet-hours 1`] = ` -<AvatarMeetingsListItem - schedulerState="quiet-hours" -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <Icon - fillColor="var(--mds-color-theme-text-secondary-normal)" - name="scheduler-not-working-hours" - scale={16} - strokeColor="none" - weight="bold" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="scheduler-not-working-hours" - name="scheduler-not-working-hours-bold" - strokeColor="none" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-secondary-normal)", - } - } - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="scheduler-not-working-hours" - strokeColor="none" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-secondary-normal)", - } - } - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with scheduler state = unavailable 1`] = ` -<AvatarMeetingsListItem - schedulerState="unavailable" -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <Icon - fillColor="var(--mds-color-theme-text-warning-normal)" - name="scheduler-unavailable" - scale={16} - strokeColor="none" - weight="bold" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="scheduler-unavailable" - name="scheduler-unavailable-bold" - strokeColor="none" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-warning-normal)", - } - } - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="scheduler-unavailable" - strokeColor="none" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-warning-normal)", - } - } - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with scheduler state = unknown 1`] = ` -<AvatarMeetingsListItem - schedulerState="unknown" -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <Icon - fillColor="var(--mds-color-theme-text-error-normal)" - name="scheduler-unknown" - scale={16} - strokeColor="none" - weight="bold" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="scheduler-unknown" - name="scheduler-unknown-bold" - strokeColor="none" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-error-normal)", - } - } - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={false} - data-scale={16} - data-test="scheduler-unknown" - strokeColor="none" - style={ - Object { - "--mdc-icon-fill-color": "var(--mds-color-theme-text-error-normal)", - } - } - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with secondLine 1`] = ` -<AvatarMeetingsListItem - secondLine="secondLine" -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - tagName="small" - type="body-secondary" - > - <Text - className="md-text-wrapper" - tagname="small" - type="body-midsize-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - > - secondLine - </mdc-text> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; - -exports[`<AvatarMeetingsListItem /> snapshot should match snapshot with style 1`] = ` -<AvatarMeetingsListItem - style={ - Object { - "color": "pink", - } - } -> - <ListItemBase - className="md-avatar-meetings-list-item-wrapper" - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onTouchStart={[Function]} - shape="isPilled" - size={50} - style={ - Object { - "color": "pink", - } - } - > - <FocusRing - isInset={false} - > - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - isInset={false} - > - <li - className="md-avatar-meetings-list-item-wrapper md-list-item-base-wrapper" - data-allow-text-select={false} - data-disabled={false} - data-interactive={true} - data-padded={false} - data-shape="isPilled" - data-size={50} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onPointerDown={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - role="listitem" - style={ - Object { - "color": "pink", - } - } - tabIndex={0} - > - <ListItemBaseSection - position="start" - > - <div - data-position="start" - > - <Avatar - size={32} - title="C" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={32} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="C" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - C - </span> - </Initials> - </div> - </Avatar> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-text-wrapper" - position="middle" - > - <div - className="md-avatar-meetings-list-item-text-wrapper" - data-position="middle" - > - <div> - <Text - tagName="p" - type="body-primary" - > - <Text - className="md-text-wrapper" - tagname="p" - type="body-large-regular" - > - <mdc-text - class="md-text-wrapper" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </div> - </ListItemBaseSection> - <ListItemBaseSection - className="md-avatar-meetings-list-item-actions-wrapper" - position="end" - > - <div - className="md-avatar-meetings-list-item-actions-wrapper" - data-position="end" - /> - </ListItemBaseSection> - </li> - </FocusRing> - </FocusRing> - </ListItemBase> -</AvatarMeetingsListItem> -`; diff --git a/src/components/AvatarMeetingsListItem/index.ts b/src/components/AvatarMeetingsListItem/index.ts deleted file mode 100644 index 3b4670b181..0000000000 --- a/src/components/AvatarMeetingsListItem/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { default as AvatarMeetingsListItem } from './AvatarMeetingsListItem'; -import * as CONSTANTS from './AvatarMeetingsListItem.constants'; -import { Props } from './AvatarMeetingsListItem.types'; - -export { CONSTANTS as AVATAR_MEETINGS_LIST_ITEM_CONSTANTS }; - -export type AvatarMeetingsListItemProps = Props; - -export default AvatarMeetingsListItem; diff --git a/src/components/Banner/Banner.constants.ts b/src/components/Banner/Banner.constants.ts deleted file mode 100644 index cda8f521c0..0000000000 --- a/src/components/Banner/Banner.constants.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { Shape } from './Banner.types'; - -const CLASS_PREFIX = 'md-banner'; - -const SHAPES: Record<string, Shape> = { - RECTANGLE: 'rectangle', - SQUARE: 'square', -}; - -const DEFAULTS = { - SHAPE: SHAPES.RECTANGLE, -}; - -const STYLE = { - description: `${CLASS_PREFIX}-description`, - details: `${CLASS_PREFIX}-details`, - title: `${CLASS_PREFIX}-title`, - wrapper: `${CLASS_PREFIX}-wrapper`, -}; - -export { CLASS_PREFIX, DEFAULTS, SHAPES, STYLE }; diff --git a/src/components/Banner/Banner.stories.args.ts b/src/components/Banner/Banner.stories.args.ts deleted file mode 100644 index bf1e054eae..0000000000 --- a/src/components/Banner/Banner.stories.args.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { commonStyles, extendArgTypes } from '../../storybook/helper.stories.argtypes'; - -import { modalContainerArgTypes } from '../ModalContainer/ModalContainer.stories.args'; - -import { BANNER_CONSTANTS as CONSTANTS } from '.'; - -const bannerArgTypes = { - actions: { - description: 'Provides the actions for this element.', - control: { type: 'none' }, - table: { - type: { - summary: '<ButtonGroup />', - }, - defaultValue: { - summary: 'undefined', - }, - }, - }, - description: { - description: 'Provides the description for this element.', - control: { type: 'text' }, - table: { - type: { - summary: 'string', - }, - defaultValue: { - summary: 'undefined', - }, - }, - }, - details: { - description: 'Provides the details for this element.', - control: { type: 'text' }, - table: { - type: { - summary: 'string', - }, - defaultValue: { - summary: 'undefined', - }, - }, - }, - image: { - description: 'Provides the image for this element.', - control: { type: 'none' }, - table: { - type: { - summary: '<Avatar />', - }, - defaultValue: { - summary: 'undefined', - }, - }, - }, - isAlert: { - description: 'Center this `<Banner />` when `true`.', - control: { type: 'boolean' }, - table: { - type: { - summary: 'boolean', - }, - defaultValue: { - summary: 'false', - }, - }, - }, - shape: { - description: 'Provides the shape for this element. the `rectangle` shape can grow vertically.', - control: { type: 'select' }, - options: [undefined, ...Object.values(CONSTANTS.SHAPES)], - table: { - type: { - summary: `${Object.values(CONSTANTS.SHAPES) - .map((shape) => `"${shape}"`) - .join(' | ')}`, - }, - defaultValue: { - summary: `"${CONSTANTS.DEFAULTS.SHAPE}"`, - }, - }, - }, - title: { - description: 'Provides the title for this element.', - control: { type: 'text' }, - table: { - type: { - summary: 'string', - }, - defaultValue: { - summary: 'undefined', - }, - }, - }, -}; - -export { bannerArgTypes }; - -export default { - ...commonStyles, - ...bannerArgTypes, - ...extendArgTypes('ModalContainer', modalContainerArgTypes, ['children', 'isPadded', 'round']), -}; diff --git a/src/components/Banner/Banner.stories.docs.mdx b/src/components/Banner/Banner.stories.docs.mdx deleted file mode 100644 index 5065f9e72e..0000000000 --- a/src/components/Banner/Banner.stories.docs.mdx +++ /dev/null @@ -1 +0,0 @@ -The `<Banner />` component. This component extends the `<ModalContainer />` component. diff --git a/src/components/Banner/Banner.stories.tsx b/src/components/Banner/Banner.stories.tsx deleted file mode 100644 index 8c7ea11af4..0000000000 --- a/src/components/Banner/Banner.stories.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import React from 'react'; - -import { MultiTemplate, Template } from '../../storybook/helper.stories.templates'; -import { DocumentationPage } from '../../storybook/helper.stories.docs'; -import StyleDocs from '../../storybook/docs.stories.style.mdx'; - -import Avatar from '../Avatar'; -import ButtonCircle from '../ButtonCircle'; -import ButtonGroup from '../ButtonGroup'; -import Icon from '../Icon'; - -import Banner, { BannerProps, BANNER_CONSTANTS as CONSTANTS } from './'; -import argTypes from './Banner.stories.args'; -import Documentation from './Banner.stories.docs.mdx'; - -export default { - title: 'Momentum UI/Banner', - component: Banner, - parameters: { - expanded: true, - docs: { - page: DocumentationPage(Documentation, StyleDocs), - }, - }, -}; - -const Example = Template<BannerProps>(Banner).bind({}); - -Example.argTypes = { ...argTypes }; - -Example.args = { - actions: ( - <ButtonGroup spaced> - <ButtonCircle color="join"> - <Icon name="camera" autoScale={125} /> - </ButtonCircle> - <ButtonCircle color="cancel"> - <Icon name="cancel" autoScale={125} /> - </ButtonCircle> - </ButtonGroup> - ), - color: 'tertiary', - description: 'Description', - details: '(Details)', - image: <Avatar initials="CW" size={88} />, - title: 'Title', -}; - -const Alerting = MultiTemplate<BannerProps>(Banner).bind({}); - -Alerting.argTypes = { ...argTypes }; -delete Alerting.argTypes.isAlert; - -Alerting.args = { - description: 'Description', - image: <Avatar initials="CW" size={88} />, -}; - -Alerting.parameters = { - variants: [false, true].map((val) => ({ - isAlert: val, - title: `${val}`, - })), -}; - -const Shapes = MultiTemplate<BannerProps>(Banner).bind({}); - -Shapes.argTypes = { ...argTypes }; -delete Shapes.argTypes.color; - -Shapes.args = { - description: 'Description', - image: <Avatar initials="CW" size={88} />, -}; - -Shapes.parameters = { - variants: Object.values(CONSTANTS.SHAPES).map((shape) => ({ - shape, - title: `"${shape}"`, - })), -}; - -const Common = MultiTemplate<BannerProps>(Banner).bind({}); - -Common.argTypes = { ...argTypes }; - -Common.args = {}; - -Common.parameters = { - variants: [ - { - actions: ( - <ButtonGroup spaced> - <ButtonCircle color="join"> - <Icon name="camera" autoScale={125} /> - </ButtonCircle> - <ButtonCircle color="cancel"> - <Icon name="cancel" autoScale={125} /> - </ButtonCircle> - </ButtonGroup> - ), - color: 'primary', - description: 'Lorem Ipsum', - details: '( lorem.ipsum@domain.com )', - image: <Avatar initials="LI" size={88} />, - title: 'Incoming Call', - }, - ], -}; - -export { Example, Alerting, Shapes, Common }; diff --git a/src/components/Banner/Banner.style.scss b/src/components/Banner/Banner.style.scss deleted file mode 100644 index 44ca19a8bc..0000000000 --- a/src/components/Banner/Banner.style.scss +++ /dev/null @@ -1,40 +0,0 @@ -.md-banner-wrapper { - &[data-alert='true'] { - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - } - - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - padding: 1rem; - width: 20rem; - - > *:not(:last-child) { - margin-bottom: 0.5rem; - } - - > .md-banner-actions { - margin-bottom: 0; - margin-top: 1rem; - } - - > .md-banner-title { - color: var(--mds-color-theme-text-primary-normal); - } - - > .md-banner-description { - color: var(--mds-color-theme-text-secondary-normal); - } - - > .md-banner-details { - color: var(--mds-color-theme-text-secondary-normal); - } - - &[data-shape='square'] { - height: 20rem; - } -} diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx deleted file mode 100644 index 6856587ef0..0000000000 --- a/src/components/Banner/Banner.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { FC } from 'react'; -import classnames from 'classnames'; - -import ModalContainer from '../ModalContainer'; -import Text, { TEXT_CONSTANTS } from '../Text'; - -import { STYLE } from './Banner.constants'; -import { Props } from './Banner.types'; -import './Banner.style.scss'; - -/** - * The Banner component. - */ -const Banner: FC<Props> = (props: Props) => { - const { - actions, - className, - description, - details, - id, - image, - isAlert, - shape, - title, - style, - ...otherProps - } = props; - - const mutatedOtherProps = { ...otherProps }; - - delete mutatedOtherProps.children; - delete mutatedOtherProps.isPadded; - delete mutatedOtherProps.round; - - return ( - <ModalContainer - className={classnames(className, STYLE.wrapper)} - data-alert={isAlert} - id={id} - round={75} - data-shape={shape} - style={style} - {...mutatedOtherProps} - > - {image} - <Text className={STYLE.title} type={TEXT_CONSTANTS.TYPES.BANNER_PRIMARY} tagName="h1"> - {title} - </Text> - <Text - className={STYLE.description} - type={TEXT_CONSTANTS.TYPES.SUBHEADER_SECONDARY} - tagName="h3" - > - {description} - </Text> - <Text className={STYLE.details} type={TEXT_CONSTANTS.TYPES.SUBHEADER_SECONDARY} tagName="h3"> - {details} - </Text> - {actions} - </ModalContainer> - ); -}; - -export default Banner; diff --git a/src/components/Banner/Banner.types.ts b/src/components/Banner/Banner.types.ts deleted file mode 100644 index 951fd06093..0000000000 --- a/src/components/Banner/Banner.types.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { CSSProperties, ReactElement } from 'react'; - -import { AvatarProps } from '../Avatar'; -import { ButtonGroupProps } from '../ButtonGroup'; -import { ModalContainerProps } from '../ModalContainer'; - -export type Shape = 'rectangle' | 'square'; - -export type SupportedImage = AvatarProps; -export type SupportedActions = ButtonGroupProps; - -export type Props = ModalContainerProps & { - /** - * Actions associated with this Banner. - */ - actions?: ReactElement<SupportedActions>; - - /** - * Custom class for overriding this component's CSS. - */ - className?: string; - - /** - * Description associated with this Banner. Appears below the title. - */ - description?: string; - - /** - * Details associated with this Banner. Appears below the description. - */ - details?: string; - - /** - * Custom id for overriding this component's CSS. - */ - id?: string; - - /** - * Image associated with this Banner. This appears at the top of the Banner. - */ - image?: ReactElement<SupportedImage>; - - /** - * If this Banner is an alert. In this case, it is centered with priority within the page. - */ - isAlert?: boolean; - - /** - * Shape to render this Banner as. - */ - shape?: Shape; - - /** - * Custom style for overriding this component's CSS. - */ - style?: CSSProperties; - - /** - * Title of this Banner. Appears below the Image. - */ - title?: string; -}; diff --git a/src/components/Banner/Banner.unit.test.tsx b/src/components/Banner/Banner.unit.test.tsx deleted file mode 100644 index ed8a56f0b1..0000000000 --- a/src/components/Banner/Banner.unit.test.tsx +++ /dev/null @@ -1,336 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { mountAndWait } from '../../../test/utils'; - -import Avatar from '../Avatar'; -import ButtonCircle from '../ButtonCircle'; -import ButtonGroup from '../ButtonGroup'; -import Icon from '../Icon'; - -import Banner, { BANNER_CONSTANTS as CONSTANTS } from './'; - -describe('<Banner />', () => { - describe('snapshot', () => { - it('should match snapshot', () => { - expect.assertions(1); - - const container = mount(<Banner aria-label="Some banner" />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with className', () => { - expect.assertions(1); - - const className = 'example-class'; - - const container = mount(<Banner aria-label="Some banner" className={className} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with aria-label', () => { - expect.assertions(1); - - const ariaLabel = 'Some banner'; - - const container = mount(<Banner aria-label={ariaLabel} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with aria-labelledby', () => { - expect.assertions(1); - - const ariaLabelledby = 'example-id'; - - const container = mount(<Banner aria-labelledby={ariaLabelledby} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with id', () => { - expect.assertions(1); - - const id = 'example-id'; - - const container = mount(<Banner aria-label="Some banner" id={id} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with style', () => { - expect.assertions(1); - - const style = { color: 'pink' }; - - const container = mount(<Banner aria-label="Some banner" style={style} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with actions', async () => { - expect.assertions(1); - - const actions = ( - <ButtonGroup spaced> - <ButtonCircle color="join"> - <Icon name="camera" autoScale={125} /> - </ButtonCircle> - <ButtonCircle color="cancel"> - <Icon name="cancel" autoScale={125} /> - </ButtonCircle> - </ButtonGroup> - ); - - const container = await mountAndWait(<Banner aria-label="Some banner" actions={actions} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with description', () => { - expect.assertions(1); - - const description = 'Description'; - - const container = mount(<Banner aria-label="Some banner" description={description} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with details', () => { - expect.assertions(1); - - const details = 'Details'; - - const container = mount(<Banner aria-label="Some banner" details={details} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with image', async () => { - expect.assertions(1); - - const image = <Avatar initials="CW" />; - - const container = await mountAndWait(<Banner aria-label="Some banner" image={image} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with isAlert', () => { - expect.assertions(1); - - const isAlert = true; - - const container = mount(<Banner aria-label="Some banner" isAlert={isAlert} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with shape', () => { - expect.assertions(1); - - const shape = Object.values(CONSTANTS.SHAPES).pop(); - - const container = mount(<Banner aria-label="Some banner" shape={shape} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match snapshot with title', () => { - expect.assertions(1); - - const title = 'Title'; - - const container = mount(<Banner aria-label="Some banner" title={title} />); - - expect(container).toMatchSnapshot(); - }); - - it('should match a complex snapshot', async () => { - expect.assertions(1); - - const props = { - actions: ( - <ButtonGroup spaced> - <ButtonCircle color="join"> - <Icon name="camera" autoScale={125} /> - </ButtonCircle> - <ButtonCircle color="cancel"> - <Icon name="cancel" autoScale={125} /> - </ButtonCircle> - </ButtonGroup> - ), - description: 'Description', - details: '(Details)', - image: <Avatar initials="CW" size={88} />, - isAlert: true, - shape: Object.values(CONSTANTS.SHAPES).pop(), - title: 'Title', - 'aria-label': 'Some banner', - }; - - const container = await mountAndWait(<Banner {...props} />); - - expect(container).toMatchSnapshot(); - }); - }); - - describe('attributes', () => { - it('should have its wrapper class', () => { - expect.assertions(1); - - const element = mount(<Banner aria-label="Some banner" />) - .find(Banner) - .getDOMNode(); - - expect(element.classList.contains(CONSTANTS.STYLE.wrapper)).toBe(true); - }); - - it('should have provided class when className is provided', () => { - expect.assertions(1); - - const className = 'example-class'; - - const element = mount(<Banner aria-label="Some banner" className={className} />) - .find(Banner) - .getDOMNode(); - - expect(element.classList.contains(className)).toBe(true); - }); - - it('should have provided aria-label when aria-label is provided', () => { - expect.assertions(1); - - const ariaLabel = 'Some banner'; - - const element = mount(<Banner aria-label={ariaLabel} />) - .find(Banner) - .getDOMNode(); - - expect(element.getAttribute('aria-label')).toBe(`${ariaLabel}`); - }); - - it('should have provided aria-labelledby when aria-labelledby is provided', () => { - expect.assertions(1); - - const ariaLabelledby = 'test-id'; - - const element = mount(<Banner aria-labelledby={ariaLabelledby} />) - .find(Banner) - .getDOMNode(); - - expect(element.getAttribute('aria-labelledby')).toBe(`${ariaLabelledby}`); - }); - - it('should have provided id when id is provided', () => { - expect.assertions(1); - - const id = 'example-id'; - - const element = mount(<Banner aria-label="Some banner" id={id} />) - .find(Banner) - .getDOMNode(); - - expect(element.id).toBe(id); - }); - - it('should have provided style when style is provided', () => { - expect.assertions(1); - - const style = { color: 'pink' }; - const styleString = 'color: pink;'; - - const element = mount(<Banner aria-label="Some banner" style={style} />) - .find(Banner) - .getDOMNode(); - - expect(element.getAttribute('style')).toBe(styleString); - }); - - it('should have provided actions when actions is provided', async () => { - expect.assertions(1); - - const actions = ( - <ButtonGroup spaced> - <ButtonCircle color="join"> - <Icon name="camera" autoScale={125} /> - </ButtonCircle> - <ButtonCircle color="cancel"> - <Icon name="cancel" autoScale={125} /> - </ButtonCircle> - </ButtonGroup> - ); - - const container = await mountAndWait(<Banner aria-label="Some banner" actions={actions} />); - - expect(container.contains(actions)).toBe(true); - }); - - it('should have provided description when description is provided', () => { - expect.assertions(1); - - const description = 'Description'; - - const container = mount(<Banner aria-label="Some banner" description={description} />); - const target = container.getDOMNode().getElementsByClassName(CONSTANTS.STYLE.description)[0]; - - expect(target.innerHTML).toBe(description); - }); - - it('should have provided details when details is provided', () => { - expect.assertions(1); - - const details = 'Details'; - - const container = mount(<Banner aria-label="Some banner" details={details} />); - const target = container.getDOMNode().getElementsByClassName(CONSTANTS.STYLE.details)[0]; - - expect(target.innerHTML).toBe(details); - }); - - it('should have provided image when image is provided', async () => { - expect.assertions(1); - - const image = <Avatar initials="CW" />; - - const container = await mountAndWait(<Banner aria-label="Some banner" image={image} />); - - expect(container.contains(image)).toBe(true); - }); - - it('should have provided data-alert when isAlert is provided', () => { - expect.assertions(1); - - const isAlert = true; - - const container = mount(<Banner aria-label="Some banner" isAlert={isAlert} />); - const target = container.find(Banner).getDOMNode(); - - expect(target.getAttribute('data-alert')).toBe(`${isAlert}`); - }); - - it('should have provided data-shape when shape is provided', () => { - expect.assertions(1); - - const shape = Object.values(CONSTANTS.SHAPES).pop(); - - const container = mount(<Banner aria-label="Some banner" shape={shape} />); - const target = container.find(Banner).getDOMNode(); - - expect(target.getAttribute('data-shape')).toBe(shape); - }); - - it('should have provided title when title is provided', () => { - expect.assertions(1); - - const title = 'Title'; - - const container = mount(<Banner aria-label="Some banner" title={title} />); - const target = container.getDOMNode().getElementsByClassName(CONSTANTS.STYLE.title)[0]; - - expect(target.innerHTML).toBe(title); - }); - }); -}); diff --git a/src/components/Banner/Banner.unit.test.tsx.snap b/src/components/Banner/Banner.unit.test.tsx.snap deleted file mode 100644 index 9aa0a01820..0000000000 --- a/src/components/Banner/Banner.unit.test.tsx.snap +++ /dev/null @@ -1,1510 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<Banner /> snapshot should match a complex snapshot 1`] = ` -<Banner - actions={ - <ButtonGroup - spaced={true} - > - <ButtonCircle - color="join" - > - <Icon - autoScale={125} - name="camera" - /> - </ButtonCircle> - <ButtonCircle - color="cancel" - > - <Icon - autoScale={125} - name="cancel" - /> - </ButtonCircle> - </ButtonGroup> - } - aria-label="Some banner" - description="Description" - details="(Details)" - image={ - <Avatar - initials="CW" - size={88} - /> - } - isAlert={true} - shape="square" - title="Title" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - data-alert={true} - data-shape="square" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-alert={true} - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - data-shape="square" - role="dialog" - tabIndex={-1} - > - <Avatar - initials="CW" - size={88} - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={88} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="CW" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - CW - </span> - </Initials> - </div> - </Avatar> - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - > - Title - </mdc-text> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - > - Description - </mdc-text> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - > - (Details) - </mdc-text> - </Text> - </Text> - <ButtonGroup - spaced={true} - > - <div - className="md-button-group-wrapper" - data-compressed={false} - data-orientation="horizontal" - data-round={false} - data-separator={false} - data-spaced={true} - > - <ButtonCircle - color="join" - > - <ButtonSimple - aria-disabled={false} - className="md-button-circle-wrapper" - data-color="join" - data-disabled={false} - data-ghost={false} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={40} - > - <FocusRing> - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - > - <button - className="md-button-circle-wrapper md-button-simple-wrapper" - data-color="join" - data-disabled={false} - data-ghost={false} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={40} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - type="button" - > - <Icon - autoScale={125} - name="camera" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={125} - data-scale={false} - data-test="camera" - name="camera-regular" - style={Object {}} - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={125} - data-scale={false} - data-test="camera" - style={Object {}} - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - </button> - </FocusRing> - </FocusRing> - </ButtonSimple> - </ButtonCircle> - <ButtonCircle - color="cancel" - > - <ButtonSimple - aria-disabled={false} - className="md-button-circle-wrapper" - data-color="cancel" - data-disabled={false} - data-ghost={false} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={40} - > - <FocusRing> - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - > - <button - className="md-button-circle-wrapper md-button-simple-wrapper" - data-color="cancel" - data-disabled={false} - data-ghost={false} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={40} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - type="button" - > - <Icon - autoScale={125} - name="cancel" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={125} - data-scale={false} - data-test="cancel" - name="cancel-regular" - style={Object {}} - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={125} - data-scale={false} - data-test="cancel" - style={Object {}} - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - </button> - </FocusRing> - </FocusRing> - </ButtonSimple> - </ButtonCircle> - </div> - </ButtonGroup> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot 1`] = ` -<Banner - aria-label="Some banner" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with actions 1`] = ` -<Banner - actions={ - <ButtonGroup - spaced={true} - > - <ButtonCircle - color="join" - > - <Icon - autoScale={125} - name="camera" - /> - </ButtonCircle> - <ButtonCircle - color="cancel" - > - <Icon - autoScale={125} - name="cancel" - /> - </ButtonCircle> - </ButtonGroup> - } - aria-label="Some banner" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <ButtonGroup - spaced={true} - > - <div - className="md-button-group-wrapper" - data-compressed={false} - data-orientation="horizontal" - data-round={false} - data-separator={false} - data-spaced={true} - > - <ButtonCircle - color="join" - > - <ButtonSimple - aria-disabled={false} - className="md-button-circle-wrapper" - data-color="join" - data-disabled={false} - data-ghost={false} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={40} - > - <FocusRing> - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - > - <button - className="md-button-circle-wrapper md-button-simple-wrapper" - data-color="join" - data-disabled={false} - data-ghost={false} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={40} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - type="button" - > - <Icon - autoScale={125} - name="camera" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={125} - data-scale={false} - data-test="camera" - name="camera-regular" - style={Object {}} - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={125} - data-scale={false} - data-test="camera" - style={Object {}} - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - </button> - </FocusRing> - </FocusRing> - </ButtonSimple> - </ButtonCircle> - <ButtonCircle - color="cancel" - > - <ButtonSimple - aria-disabled={false} - className="md-button-circle-wrapper" - data-color="cancel" - data-disabled={false} - data-ghost={false} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={40} - > - <FocusRing> - <FocusRing - focusClass="md-focus-ring-wrapper children" - focusRingClass="md-focus-ring-wrapper children" - > - <button - className="md-button-circle-wrapper md-button-simple-wrapper" - data-color="cancel" - data-disabled={false} - data-ghost={false} - data-inverted={false} - data-multiple-children={false} - data-outline={false} - data-shallow-disabled={false} - data-size={40} - onBlur={[Function]} - onClick={[Function]} - onDragStart={[Function]} - onFocus={[Function]} - onKeyDown={[Function]} - onKeyUp={[Function]} - onMouseDown={[Function]} - onMouseEnter={[Function]} - onMouseLeave={[Function]} - onMouseUp={[Function]} - onTouchCancel={[Function]} - onTouchEnd={[Function]} - onTouchMove={[Function]} - onTouchStart={[Function]} - type="button" - > - <Icon - autoScale={125} - name="cancel" - > - <Icon - className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={125} - data-scale={false} - data-test="cancel" - name="cancel-regular" - style={Object {}} - > - <mdc-icon - class="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink" - data-autoscale={125} - data-scale={false} - data-test="cancel" - style={Object {}} - suppressHydrationWarning={true} - /> - </Icon> - </Icon> - </button> - </FocusRing> - </FocusRing> - </ButtonSimple> - </ButtonCircle> - </div> - </ButtonGroup> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with aria-label 1`] = ` -<Banner - aria-label="Some banner" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with aria-labelledby 1`] = ` -<Banner - aria-labelledby="example-id" -> - <ModalContainer - aria-labelledby="example-id" - className="md-banner-wrapper" - round={75} - > - <div - aria-labelledby="example-id" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with className 1`] = ` -<Banner - aria-label="Some banner" - className="example-class" -> - <ModalContainer - aria-label="Some banner" - className="example-class md-banner-wrapper" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="example-class md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with description 1`] = ` -<Banner - aria-label="Some banner" - description="Description" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - > - Description - </mdc-text> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with details 1`] = ` -<Banner - aria-label="Some banner" - details="Details" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - > - Details - </mdc-text> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with id 1`] = ` -<Banner - aria-label="Some banner" - id="example-id" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - id="example-id" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - id="example-id" - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with image 1`] = ` -<Banner - aria-label="Some banner" - image={ - <Avatar - initials="CW" - /> - } -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Avatar - initials="CW" - > - <div - aria-hidden="false" - aria-label="" - className="md-avatar-wrapper" - data-color="default" - data-size={24} - role="img" - > - <Initials - className="md-avatar-wrapper-children" - initials="CW" - type="person" - > - <span - aria-hidden="true" - className="md-avatar-wrapper-children" - > - CW - </span> - </Initials> - </div> - </Avatar> - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with isAlert 1`] = ` -<Banner - aria-label="Some banner" - isAlert={true} -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - data-alert={true} - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-alert={true} - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with shape 1`] = ` -<Banner - aria-label="Some banner" - shape="square" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - data-shape="square" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - data-shape="square" - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with style 1`] = ` -<Banner - aria-label="Some banner" - style={ - Object { - "color": "pink", - } - } -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - round={75} - style={ - Object { - "color": "pink", - } - } - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - style={ - Object { - "color": "pink", - } - } - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; - -exports[`<Banner /> snapshot should match snapshot with title 1`] = ` -<Banner - aria-label="Some banner" - title="Title" -> - <ModalContainer - aria-label="Some banner" - className="md-banner-wrapper" - round={75} - > - <div - aria-label="Some banner" - aria-modal={true} - className="md-banner-wrapper md-modal-container-wrapper" - data-color="primary" - data-elevation={0} - data-exclude-focus={true} - data-padded={false} - data-round={75} - role="dialog" - tabIndex={-1} - > - <Text - className="md-banner-title" - tagName="h1" - type="banner-primary" - > - <Text - className="md-text-wrapper md-banner-title" - tagname="h1" - type="heading-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-title" - suppressHydrationWarning={true} - > - Title - </mdc-text> - </Text> - </Text> - <Text - className="md-banner-description" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-description" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-description" - suppressHydrationWarning={true} - /> - </Text> - </Text> - <Text - className="md-banner-details" - tagName="h3" - type="subheader-secondary" - > - <Text - className="md-text-wrapper md-banner-details" - tagname="h3" - type="body-midsize-medium" - > - <mdc-text - class="md-text-wrapper md-banner-details" - suppressHydrationWarning={true} - /> - </Text> - </Text> - </div> - </ModalContainer> -</Banner> -`; diff --git a/src/components/Banner/index.ts b/src/components/Banner/index.ts deleted file mode 100644 index ad2469ec97..0000000000 --- a/src/components/Banner/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { default as Banner } from './Banner'; -import * as CONSTANTS from './Banner.constants'; -import { Props } from './Banner.types'; - -export { CONSTANTS as BANNER_CONSTANTS }; - -export type BannerProps = Props; - -export default Banner; diff --git a/src/components/ExampleComponent/ExampleComponent.constants.ts b/src/components/ExampleComponent/ExampleComponent.constants.ts deleted file mode 100644 index 7270a2ab1b..0000000000 --- a/src/components/ExampleComponent/ExampleComponent.constants.ts +++ /dev/null @@ -1,5 +0,0 @@ -const MESSAGES = { - EXAMPLE_TEXT: 'Hello! This is a TypeScript React component', -}; - -export { MESSAGES }; diff --git a/src/components/ExampleComponent/ExampleComponent.stories.tsx b/src/components/ExampleComponent/ExampleComponent.stories.tsx deleted file mode 100644 index 326d283160..0000000000 --- a/src/components/ExampleComponent/ExampleComponent.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { Story } from '@storybook/react'; - -import ExampleComponent, { ExampleComponentProps as Props } from './'; - -export default { - title: 'Momentum UI/ExampleComponent', - component: ExampleComponent, - argTypes: { - param: { - description: 'The string to insert into this component.', - }, - }, -}; - -const Template: Story<Props> = (args) => <ExampleComponent {...args} />; - -const Demo = Template.bind({}); - -Demo.args = { - param: 'Demonstration Text', -}; - -export { Demo }; diff --git a/src/components/ExampleComponent/ExampleComponent.tsx b/src/components/ExampleComponent/ExampleComponent.tsx deleted file mode 100644 index 35ead66858..0000000000 --- a/src/components/ExampleComponent/ExampleComponent.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React, { FC } from 'react'; - -import { MESSAGES } from './ExampleComponent.constants'; -import { Props } from './ExampleComponent.types'; - -const ExampleComponent: FC<Props> = ({ param }: Props) => ( - <div>{`${MESSAGES.EXAMPLE_TEXT}: ${param}`}</div> -); - -export default ExampleComponent; diff --git a/src/components/ExampleComponent/ExampleComponent.types.ts b/src/components/ExampleComponent/ExampleComponent.types.ts deleted file mode 100644 index 169985f53c..0000000000 --- a/src/components/ExampleComponent/ExampleComponent.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -export interface Props { - param: string; -} diff --git a/src/components/ExampleComponent/ExampleComponent.unit.test.tsx b/src/components/ExampleComponent/ExampleComponent.unit.test.tsx deleted file mode 100644 index d7f5ad9a38..0000000000 --- a/src/components/ExampleComponent/ExampleComponent.unit.test.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import { ExampleComponent } from '@momentum-ui/react-collaboration'; - -describe('tests for <ExampleComponent />', () => { - it('should match SnapShot', () => { - const container = mount(<ExampleComponent param="test" />); - - expect(container).toMatchSnapshot(); - }); -}); diff --git a/src/components/ExampleComponent/ExampleComponent.unit.test.tsx.snap b/src/components/ExampleComponent/ExampleComponent.unit.test.tsx.snap deleted file mode 100644 index a875abe4d0..0000000000 --- a/src/components/ExampleComponent/ExampleComponent.unit.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`tests for <ExampleComponent /> should match SnapShot 1`] = ` -<ExampleComponent - param="test" -> - <div> - Hello! This is a TypeScript React component: test - </div> -</ExampleComponent> -`; diff --git a/src/components/ExampleComponent/index.ts b/src/components/ExampleComponent/index.ts deleted file mode 100644 index b2afffce98..0000000000 --- a/src/components/ExampleComponent/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { default as ExampleComponent } from './ExampleComponent'; -import * as CONSTANTS from './ExampleComponent.constants'; -import { Props } from './ExampleComponent.types'; - -export { CONSTANTS as EXAMPLE_COMPONENT_CONSTANTS }; - -export type ExampleComponentProps = Props; - -export default ExampleComponent; diff --git a/src/components/index.ts b/src/components/index.ts index 2affb97f87..4fc6308e62 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,9 +2,7 @@ export { default as Accordion } from './Accordion'; export { default as AlertBadge } from './AlertBadge'; export { default as AlertBanner } from './AlertBanner'; export { default as Avatar, PresenceType } from './Avatar'; -export { default as AvatarCompact } from './AvatarCompact'; export { default as Badge } from './Badge'; -export { default as Banner } from './Banner'; export { default as ButtonCircle } from './ButtonCircle'; export { default as ButtonCircleToggle } from './ButtonCircleToggle'; export { default as ButtonControl } from './ButtonControl'; @@ -27,7 +25,6 @@ export { default as ThemeProvider } from './ThemeProvider'; export { default as Toast } from './Toast'; export { default as ToastContent } from './ToastContent'; export { default as ToastDetails } from './ToastDetails'; -export { default as ExampleComponent } from './ExampleComponent'; export { default as CodeInput } from './CodeInput'; export { default as InputMessage } from './InputMessage'; export { default as Icon } from './Icon'; @@ -51,7 +48,6 @@ export { default as ReactionBadge } from './ReactionBadge'; export { default as ReactionButton } from './ReactionButton'; export { default as ReactionPicker } from './ReactionPicker'; export { default as AddReactionButton } from './AddReactionButton'; -export { default as AvatarMeetingsListItem } from './AvatarMeetingsListItem'; export { default as MenuTrigger } from './MenuTrigger'; export { default as Menu, SelectionGroup } from './Menu'; export { default as DividerDot } from './DividerDot'; diff --git a/src/index.js b/src/index.js index 985ceb16d7..d9043cfde9 100644 --- a/src/index.js +++ b/src/index.js @@ -104,12 +104,10 @@ export { AlertBadge, AlertBanner as AlertBannerNext, Badge as BadgeNext, - Banner, Avatar as AvatarNext, PresenceType, ButtonCircle, ButtonCircleToggle, - AvatarCompact as AvatarCompactNext, ButtonControl, ButtonDialpad, ButtonGroup as ButtonGroupNext, @@ -125,7 +123,6 @@ export { Card as CardNext, NavigationTab, InputMessage as InputMessageNew, - ExampleComponent, Icon as IconNext, Tab as TabNext, MeetingListItem, @@ -148,7 +145,6 @@ export { GlobalSearchInput, SearchInput, TextInput, - AvatarMeetingsListItem, SpaceListItem as SpaceListItemNext, SpaceTreeNode, List as ListNext,