diff --git a/CHANGELOG.md b/CHANGELOG.md index 0cb7b570fc2..ce243b415ac 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ - Added `showCloseButton` and `dockedBreakpoint` flexibility to `EuiCollapsibleNav` ([#3330](https://github.com/elastic/eui/pull/3330)) - Added `panelStyle` prop to `EuiPopover` to distinguish style object configuration ([#3329](https://github.com/elastic/eui/pull/3329)) - Extended `EuiDatePicker`'s `startDate` and `endDate` types to accept `null` values for better interoperability ([#3343](https://github.com/elastic/eui/pull/3343)) +- Added `EuiCommentList` component ([#3344](https://github.com/elastic/eui/pull/3344)) **Bug Fixes** diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 078934a7c40..f1847c72ef3 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -71,7 +71,7 @@ import { ColorPickerExample } from './views/color_picker/color_picker_example'; import { ComboBoxExample } from './views/combo_box/combo_box_example'; -import { CommentExample } from './views/comment/comment_example'; +import { CommentListExample } from './views/comment/comment_example'; import { ContextMenuExample } from './views/context_menu/context_menu_example'; @@ -371,7 +371,7 @@ const navigation = [ CallOutExample, CardExample, CodeExample, - CommentExample, + CommentListExample, DescriptionListExample, DragAndDropExample, EmptyPromptExample, diff --git a/src-docs/src/views/comment/comment.tsx b/src-docs/src/views/comment/comment.tsx index e4260300150..c1fe1ffdcc2 100644 --- a/src-docs/src/views/comment/comment.tsx +++ b/src-docs/src/views/comment/comment.tsx @@ -1,8 +1,5 @@ import React from 'react'; -import { EuiComment } from '../../../../src/components/comment'; -import { EuiAvatar } from '../../../../src/components/avatar'; -import { EuiBadge } from '../../../../src/components/badge'; -import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; +import { EuiComment } from '../../../../src/components/comment_list'; import { EuiButtonIcon } from '../../../../src/components/button'; import { EuiText } from '../../../../src/components/text'; @@ -15,19 +12,6 @@ const body = ( ); -const longBody = ( - -

- This planet has - or rather had - a problem, which was this: most of the - people living on it were unhappy for pretty much of the time. Many - solutions were suggested for this problem, but most of these were largely - concerned with the movements of small green pieces of paper, which is odd - because on the whole it was not the small green pieces of paper that were - unhappy. -

- -); - const copyAction = ( ( timestamp="on Jan 1, 2020"> {body} - - } - /> - - - - - - pedror - - } - type="update" - event={ - - added tags - - sample - - - review - - - } - timestamp="on Jan 11, 2020" - timelineIcon="tag" - /> - }> - {longBody} - ); diff --git a/src-docs/src/views/comment/comment_actions.tsx b/src-docs/src/views/comment/comment_actions.tsx index 5ebf1cb178d..1a31073d6a6 100644 --- a/src-docs/src/views/comment/comment_actions.tsx +++ b/src-docs/src/views/comment/comment_actions.tsx @@ -1,5 +1,5 @@ import React, { Component, HTMLAttributes } from 'react'; -import { EuiComment } from '../../../../src/components/comment'; +import { EuiComment } from '../../../../src/components/comment_list'; import { EuiButtonIcon } from '../../../../src/components/button'; import { EuiText } from '../../../../src/components/text'; import { EuiPopover } from '../../../../src/components/popover'; diff --git a/src-docs/src/views/comment/comment_example.js b/src-docs/src/views/comment/comment_example.js index e0adc1e990d..992c1f85d04 100644 --- a/src-docs/src/views/comment/comment_example.js +++ b/src-docs/src/views/comment/comment_example.js @@ -6,7 +6,11 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiComment } from '../../../../src/components'; +import { + EuiCode, + EuiComment, + EuiCommentList, +} from '../../../../src/components'; import Comment from './comment'; const commentSource = require('!!raw-loader!./comment'); @@ -24,6 +28,10 @@ import CommentActions from './comment_actions'; const commentActionsSource = require('!!raw-loader!./comment_actions'); const commentActionsHtml = renderToHtml(CommentActions); +import CommentList from './comment_list'; +const commentListSource = require('!!raw-loader!./comment_list'); +const commentListHtml = renderToHtml(CommentList); + const commentSnippet = ` {body} `; @@ -63,11 +71,46 @@ const commentActionsSnippet = ``; -export const CommentExample = { - title: 'Comment', +const commentListSnippet = ``; + +export const CommentListExample = { + title: 'Comment list', isNew: true, sections: [ { + source: [ + { + type: GuideSectionTypes.JS, + code: commentListSource, + }, + { + type: GuideSectionTypes.HTML, + code: commentListHtml, + }, + ], + text: ( +
+ Use EuiCommentList to display a list of{' '} + EuiComments. Pass an array of{' '} + EuiComment objects and{' '} + EuiCommentList will generate a comment thread. +
+ ), + props: { EuiCommentList, EuiComment }, + snippet: commentListSnippet, + demo: , + }, + { + title: 'Comment', source: [ { type: GuideSectionTypes.JS, diff --git a/src-docs/src/views/comment/comment_list.tsx b/src-docs/src/views/comment/comment_list.tsx new file mode 100644 index 00000000000..6ddaf06a36d --- /dev/null +++ b/src-docs/src/views/comment/comment_list.tsx @@ -0,0 +1,112 @@ +import React from 'react'; +import { + EuiCommentList, + EuiCommentProps, +} from '../../../../src/components/comment_list'; +import { EuiAvatar } from '../../../../src/components/avatar'; +import { EuiButtonIcon } from '../../../../src/components/button'; +import { EuiText } from '../../../../src/components/text'; +import { EuiBadge } from '../../../../src/components/badge'; +import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex'; + +const body = ( + +

+ Far out in the uncharted backwaters of the unfashionable end of the + western spiral arm of the Galaxy lies a small unregarded yellow sun. +

+ +); + +const copyAction = ( + +); + +const complexEvent = ( + + added tags + + sample + + + review + + +); + +const complexUsername = ( + + + + + pedror + +); + +const longBody = ( + +

+ This planet has - or rather had - a problem, which was this: most of the + people living on it were unhappy for pretty much of the time. Many + solutions were suggested for this problem, but most of these were largely + concerned with the movements of small green pieces of paper, which is odd + because on the whole it was not the small green pieces of paper that were + unhappy. +

+ +); + +const avatar = ( + +); + +const comments: EuiCommentProps[] = [ + { + username: 'janed', + event: 'added a comment', + timestamp: 'on Jan 1, 2020', + children: body, + actions: copyAction, + }, + { + username: 'juanab', + type: 'update', + actions: copyAction, + event: 'pushed incident X0Z235', + timestamp: 'on Jan 3, 2020', + timelineIcon: avatar, + }, + { + username: 'pancho1', + type: 'update', + event: 'edited case', + timestamp: 'on Jan 9, 2020', + }, + { + username: complexUsername, + type: 'update', + actions: copyAction, + event: complexEvent, + timestamp: 'on Jan 11, 2020', + timelineIcon: 'tag', + }, + { + username: 'elohar', + event: 'added a comment', + timestamp: 'on Jan 14, 2020', + timelineIcon: , + children: longBody, + actions: copyAction, + }, +]; + +export default () => ; diff --git a/src-docs/src/views/comment/comment_timelineIcons.tsx b/src-docs/src/views/comment/comment_timelineIcons.tsx index 99ce2e0c4e6..3a4c44c8842 100644 --- a/src-docs/src/views/comment/comment_timelineIcons.tsx +++ b/src-docs/src/views/comment/comment_timelineIcons.tsx @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { EuiComment } from '../../../../src/components/comment'; +import { EuiComment } from '../../../../src/components/comment_list'; import { EuiText } from '../../../../src/components/text'; import { EuiAvatar } from '../../../../src/components/avatar'; import { EuiCode } from '../../../../src/components/code'; diff --git a/src-docs/src/views/comment/comment_types.tsx b/src-docs/src/views/comment/comment_types.tsx index 1ebd29824e6..ef6622f1868 100644 --- a/src-docs/src/views/comment/comment_types.tsx +++ b/src-docs/src/views/comment/comment_types.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { EuiComment } from '../../../../src/components/comment'; +import { EuiComment } from '../../../../src/components/comment_list'; import { EuiText } from '../../../../src/components/text'; import { EuiCode } from '../../../../src/components/code'; diff --git a/src/components/comment/__snapshots__/comment.test.tsx.snap b/src/components/comment_list/__snapshots__/comment.test.tsx.snap similarity index 100% rename from src/components/comment/__snapshots__/comment.test.tsx.snap rename to src/components/comment_list/__snapshots__/comment.test.tsx.snap diff --git a/src/components/comment/__snapshots__/comment_event.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_event.test.tsx.snap similarity index 100% rename from src/components/comment/__snapshots__/comment_event.test.tsx.snap rename to src/components/comment_list/__snapshots__/comment_event.test.tsx.snap diff --git a/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap new file mode 100644 index 00000000000..e341916f82f --- /dev/null +++ b/src/components/comment_list/__snapshots__/comment_list.test.tsx.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiCommentList is rendered 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+ janed +
+
+
+
+
+
+
+`; diff --git a/src/components/comment/__snapshots__/comment_timeline.test.tsx.snap b/src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap similarity index 100% rename from src/components/comment/__snapshots__/comment_timeline.test.tsx.snap rename to src/components/comment_list/__snapshots__/comment_timeline.test.tsx.snap diff --git a/src/components/comment/_comment.scss b/src/components/comment_list/_comment.scss similarity index 100% rename from src/components/comment/_comment.scss rename to src/components/comment_list/_comment.scss diff --git a/src/components/comment/_comment_event.scss b/src/components/comment_list/_comment_event.scss similarity index 100% rename from src/components/comment/_comment_event.scss rename to src/components/comment_list/_comment_event.scss diff --git a/src/components/comment/_comment_timeline.scss b/src/components/comment_list/_comment_timeline.scss similarity index 100% rename from src/components/comment/_comment_timeline.scss rename to src/components/comment_list/_comment_timeline.scss diff --git a/src/components/comment/_index.scss b/src/components/comment_list/_index.scss similarity index 100% rename from src/components/comment/_index.scss rename to src/components/comment_list/_index.scss diff --git a/src/components/comment/comment.test.tsx b/src/components/comment_list/comment.test.tsx similarity index 100% rename from src/components/comment/comment.test.tsx rename to src/components/comment_list/comment.test.tsx diff --git a/src/components/comment/comment.tsx b/src/components/comment_list/comment.tsx similarity index 100% rename from src/components/comment/comment.tsx rename to src/components/comment_list/comment.tsx diff --git a/src/components/comment/comment_event.test.tsx b/src/components/comment_list/comment_event.test.tsx similarity index 100% rename from src/components/comment/comment_event.test.tsx rename to src/components/comment_list/comment_event.test.tsx diff --git a/src/components/comment/comment_event.tsx b/src/components/comment_list/comment_event.tsx similarity index 100% rename from src/components/comment/comment_event.tsx rename to src/components/comment_list/comment_event.tsx diff --git a/src/components/comment_list/comment_list.test.tsx b/src/components/comment_list/comment_list.test.tsx new file mode 100644 index 00000000000..049d8ea5471 --- /dev/null +++ b/src/components/comment_list/comment_list.test.tsx @@ -0,0 +1,40 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test/required_props'; + +import { EuiCommentList } from './comment_list'; + +const comments = [ + { + username: 'janed', + }, +]; + +describe('EuiCommentList', () => { + test('is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); +}); diff --git a/src/components/comment_list/comment_list.tsx b/src/components/comment_list/comment_list.tsx new file mode 100644 index 00000000000..bb2c6fdfa70 --- /dev/null +++ b/src/components/comment_list/comment_list.tsx @@ -0,0 +1,55 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import React, { HTMLAttributes, FunctionComponent } from 'react'; +import { CommonProps } from '../common'; +import classNames from 'classnames'; +import { EuiComment, EuiCommentProps } from './comment'; + +export type EuiCommentListProps = HTMLAttributes & + CommonProps & { + /** + * List of comments to render. See #EuiComment + */ + comments?: EuiCommentProps[]; + }; + +export const EuiCommentList: FunctionComponent = ({ + children, + className, + comments, + ...rest +}) => { + const classes = classNames('euiCommentList', className); + + let commentElements = null; + + if (comments) { + commentElements = comments.map((item, index) => ( + + )); + } + + return ( +
+ {commentElements} + {children} +
+ ); +}; diff --git a/src/components/comment/comment_timeline.test.tsx b/src/components/comment_list/comment_timeline.test.tsx similarity index 100% rename from src/components/comment/comment_timeline.test.tsx rename to src/components/comment_list/comment_timeline.test.tsx diff --git a/src/components/comment/comment_timeline.tsx b/src/components/comment_list/comment_timeline.tsx similarity index 100% rename from src/components/comment/comment_timeline.tsx rename to src/components/comment_list/comment_timeline.tsx diff --git a/src/components/comment/index.ts b/src/components/comment_list/index.ts similarity index 93% rename from src/components/comment/index.ts rename to src/components/comment_list/index.ts index 280dee639b5..b709bce4ca3 100644 --- a/src/components/comment/index.ts +++ b/src/components/comment_list/index.ts @@ -22,3 +22,5 @@ export { EuiComment, EuiCommentProps } from './comment'; export { EuiCommentEvent, EuiCommentType } from './comment_event'; export { EuiCommentTimeline } from './comment_timeline'; + +export { EuiCommentList, EuiCommentListProps } from './comment_list'; diff --git a/src/components/index.js b/src/components/index.js index 0604bd704f8..eee547ec536 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -70,7 +70,7 @@ export { export { EuiComboBox } from './combo_box'; -export { EuiComment } from './comment'; +export { EuiComment, EuiCommentList } from './comment_list'; export { EuiContext, EuiI18nConsumer } from './context'; diff --git a/src/components/index.scss b/src/components/index.scss index e90deb3cb85..3045ea6286c 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -18,7 +18,7 @@ @import 'collapsible_nav/index'; @import 'color_picker/index'; @import 'combo_box/index'; -@import 'comment/index'; +@import 'comment_list/index'; @import 'context_menu/index'; @import 'control_bar/index'; @import 'date_picker/index';