= (args) => (
18 |
23 | );
24 |
25 | export const DirectMessageButton = Template.bind({});
26 | DirectMessageButton.args = {
27 | id: 1364031673
28 | };
29 |
30 | export const DirectMessageButtonLarge = Template.bind({});
31 | DirectMessageButtonLarge.args = {
32 | id: 1364031673,
33 | options: { size: 'large' }
34 | };
35 |
36 | export const DirectMessageButtonWithTextPlaceholder = Template.bind({});
37 | DirectMessageButtonWithTextPlaceholder.args = {
38 | id: 1364031673,
39 | options: { size: 'large' },
40 | placeholder: 'Loading'
41 | };
42 |
43 | export const DirectMessageButtonWithCustomPlaceholder = Template.bind({});
44 | DirectMessageButtonWithCustomPlaceholder.args = {
45 | id: 1364031673,
46 | options: { size: 'large' },
47 | placeholder: (
48 |
56 | Hello I am custom placeholder
57 |
58 | )
59 | };
60 |
61 | export const DirectMessageButtonWithOnLoadAction = Template.bind({});
62 | DirectMessageButtonWithOnLoadAction.args = {
63 | id: 1364031673,
64 | options: { size: 'large' },
65 | placeholder: (
66 |
74 | Hello I am custom placeholder
75 |
76 | ),
77 | onLoad: action('Loaded successfully')
78 | };
79 |
--------------------------------------------------------------------------------
/src/stories/TwitterFollowButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterFollowButton, {
4 | TwitterFollowButtonProps
5 | } from './../components/TwitterFollowButton';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter Follow Button',
11 | component: TwitterFollowButton,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const FollowButtonSimple = Template.bind({});
26 | FollowButtonSimple.args = {
27 | screenName: 'saurabhnemade'
28 | };
29 |
30 | export const FollowButtonLarge = Template.bind({});
31 | FollowButtonLarge.args = {
32 | screenName: 'saurabhnemade',
33 | options: { size: 'large' }
34 | };
35 |
36 | export const FollowButtonWithTextPlaceholder = Template.bind({});
37 | FollowButtonWithTextPlaceholder.args = {
38 | screenName: 'saurabhnemade',
39 | options: { size: 'large' },
40 | placeholder: 'Loading'
41 | };
42 |
43 | export const FollowButtonWithCustomPlaceholder = Template.bind({});
44 | FollowButtonWithCustomPlaceholder.args = {
45 | screenName: 'saurabhnemade',
46 | options: { size: 'large' },
47 | placeholder: (
48 |
56 | Hello I am custom placeholder
57 |
58 | )
59 | };
60 |
61 | export const FollowButtonWithOnLoad = Template.bind({});
62 | FollowButtonWithOnLoad.args = {
63 | screenName: 'saurabhnemade',
64 | options: { size: 'large' },
65 | onLoad: action('Loaded successfully')
66 | };
67 |
--------------------------------------------------------------------------------
/src/stories/TwitterHashtagButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterHashtagButton, {
4 | TwitterHashtagButtonProps
5 | } from './../components/TwitterHashtagButton';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter Hashtag Button',
11 | component: TwitterHashtagButton,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const HashtagButton = Template.bind({});
26 | HashtagButton.args = {
27 | tag: 'cybersecurity'
28 | };
29 |
30 | export const HashtagButtonLarge = Template.bind({});
31 | HashtagButtonLarge.args = {
32 | tag: 'cybersecurity',
33 | options: { size: 'large' }
34 | };
35 |
36 | export const HashtagButtonWithTextPlaceholder = Template.bind({});
37 | HashtagButtonWithTextPlaceholder.args = {
38 | tag: 'cybersecurity',
39 | options: { size: 'large' },
40 | placeholder: 'Loading'
41 | };
42 |
43 | export const HashtagButtonWithCustomPlaceholder = Template.bind({});
44 | HashtagButtonWithCustomPlaceholder.args = {
45 | tag: 'cybersecurity',
46 | options: { size: 'large' },
47 | placeholder: (
48 |
56 | Hello I am custom placeholder
57 |
58 | )
59 | };
60 |
61 | export const HashtagButtonWithOnLoad = Template.bind({});
62 | HashtagButtonWithOnLoad.args = {
63 | tag: 'cybersecurity',
64 | options: { size: 'large' },
65 | onLoad: action('Loaded successfully')
66 | };
67 |
--------------------------------------------------------------------------------
/src/stories/TwitterMentionButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterMentionButton, {
4 | TwitterMentionButtonProps
5 | } from './../components/TwitterMentionButton';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter Mention Button',
11 | component: TwitterMentionButton,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const MentionButton = Template.bind({});
26 | MentionButton.args = {
27 | screenName: 'saurabhnemade'
28 | };
29 |
30 | export const MentionButtonLarge = Template.bind({});
31 | MentionButtonLarge.args = {
32 | screenName: 'saurabhnemade',
33 | options: { size: 'large' }
34 | };
35 |
36 | export const MentionButtonWithTextPlaceholder = Template.bind({});
37 | MentionButtonWithTextPlaceholder.args = {
38 | screenName: 'saurabhnemade',
39 | options: { size: 'large' },
40 | placeholder: 'Loading'
41 | };
42 |
43 | export const MentionButtonWithCustomPlaceholder = Template.bind({});
44 | MentionButtonWithCustomPlaceholder.args = {
45 | screenName: 'saurabhnemade',
46 | options: { size: 'large' },
47 | placeholder: (
48 |
56 | Hello I am custom placeholder
57 |
58 | )
59 | };
60 |
61 | export const MentionButtonWithOnLoad = Template.bind({});
62 | MentionButtonWithOnLoad.args = {
63 | screenName: 'saurabhnemade',
64 | options: { size: 'large' },
65 | onLoad: action('Loaded successfully')
66 | };
67 |
--------------------------------------------------------------------------------
/src/stories/TwitterMomentShare.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterMomentShare, {
4 | TwitterMomentShareProps
5 | } from './../components/TwitterMomentShare';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter Moment Share',
11 | component: TwitterMomentShare,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const MomentShare = Template.bind({});
26 | MomentShare.args = {
27 | momentId: '650667182356082688'
28 | };
29 |
30 | export const MomentShareWithTextPlaceholder = Template.bind({});
31 | MomentShareWithTextPlaceholder.args = {
32 | momentId: '650667182356082688',
33 | placeholder: 'Loading'
34 | };
35 |
36 | export const MomentShareWithCustomPlaceholder = Template.bind({});
37 | MomentShareWithCustomPlaceholder.args = {
38 | momentId: '650667182356082688',
39 | placeholder: (
40 |
48 | Hello I am custom placeholder
49 |
50 | )
51 | };
52 |
53 | export const MomentShareWithOnLoad = Template.bind({});
54 | MomentShareWithOnLoad.args = {
55 | momentId: '650667182356082688',
56 | onLoad: action('Loaded successfully')
57 | };
58 |
--------------------------------------------------------------------------------
/src/stories/TwitterOnAirButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterOnAirButton, {
4 | TwitterOnAirButtonProps
5 | } from './../components/TwitterOnAirButton';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter On Air Button',
11 | component: TwitterOnAirButton,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const OnAirButton = Template.bind({});
26 | OnAirButton.args = {
27 | username: 'KatmaiNPS'
28 | };
29 |
30 | export const OnAirButtonLarge = Template.bind({});
31 | OnAirButtonLarge.args = {
32 | username: 'KatmaiNPS',
33 | options: { size: 'large' }
34 | };
35 |
36 | export const OnAirButtonWithTextPlaceholder = Template.bind({});
37 | OnAirButtonWithTextPlaceholder.args = {
38 | username: 'KatmaiNPS',
39 | placeholder: 'Loading'
40 | };
41 |
42 | export const OnAirButtonWithCustomPlaceholder = Template.bind({});
43 | OnAirButtonWithCustomPlaceholder.args = {
44 | username: 'KatmaiNPS',
45 | placeholder: (
46 |
54 | Hello I am custom placeholder
55 |
56 | )
57 | };
58 |
59 | export const OnAirButtonWithOnLoad = Template.bind({});
60 | OnAirButtonWithOnLoad.args = {
61 | username: 'KatmaiNPS',
62 | options: { size: 'large' },
63 | onLoad: action('Loaded successfully')
64 | };
65 |
--------------------------------------------------------------------------------
/src/stories/TwitterShareButtton.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterShareButton, {
4 | TwitterShareButtonProps
5 | } from './../components/TwitterShareButton';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter Share Button',
11 | component: TwitterShareButton,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const ShareButton = Template.bind({});
26 | ShareButton.args = {
27 | url: 'https://facebook.com/saurabhnemade',
28 | options: { text: '#reactjs is awesome', via: 'saurabhnemade' }
29 | };
30 |
31 | export const ShareButtonLarge = Template.bind({});
32 | ShareButtonLarge.args = {
33 | url: 'https://facebook.com/saurabhnemade',
34 | options: {
35 | text: '#reactjs is awesome',
36 | via: 'saurabhnemade',
37 | size: 'large'
38 | }
39 | };
40 |
41 | export const ShareButtonWithTextPlaceholder = Template.bind({});
42 | ShareButtonWithTextPlaceholder.args = {
43 | url: 'https://facebook.com/saurabhnemade',
44 | options: {
45 | text: '#reactjs is awesome',
46 | via: 'saurabhnemade',
47 | size: 'large'
48 | },
49 | placeholder: 'Loading'
50 | };
51 |
52 | export const ShareButtonWithCustomPlaceholder = Template.bind({});
53 | ShareButtonWithCustomPlaceholder.args = {
54 | url: 'https://facebook.com/saurabhnemade',
55 | options: {
56 | text: '#reactjs is awesome',
57 | via: 'saurabhnemade',
58 | size: 'large'
59 | },
60 | placeholder: (
61 |
69 | Hello I am custom placeholder
70 |
71 | )
72 | };
73 |
74 | export const ShareButtonWithOnLoad = Template.bind({});
75 | ShareButtonWithOnLoad.args = {
76 | url: 'https://facebook.com/saurabhnemade',
77 | options: {
78 | text: '#reactjs is awesome',
79 | via: 'saurabhnemade',
80 | size: 'large'
81 | },
82 | onLoad: action('Loaded successfully')
83 | };
84 |
--------------------------------------------------------------------------------
/src/stories/TwitterTimelineEmbed.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterTimelineEmbed, {
4 | TwitterTimelineEmbedPropsType
5 | } from './../components/TwitterTimelineEmbed';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter Timeline Embed',
11 | component: TwitterTimelineEmbed,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const TimelineProfileWithScreenName = Template.bind({});
26 | TimelineProfileWithScreenName.args = {
27 | sourceType: 'profile',
28 | screenName: 'saurabhnemade',
29 | options: { height: 400 },
30 | onLoad: action('sample action')
31 | };
32 |
33 | export const TimelineProfileWithUserId = Template.bind({});
34 | TimelineProfileWithUserId.args = {
35 | sourceType: 'profile',
36 | userId: 1934309676,
37 | options: { height: 400 }
38 | };
39 |
40 | export const TimelineLikesWithScreenName = Template.bind({});
41 | TimelineLikesWithScreenName.args = {
42 | sourceType: 'likes',
43 | screenName: 'saurabhnemade',
44 | options: { height: 400 }
45 | };
46 |
47 | export const TimelineLikesWithUserId = Template.bind({});
48 | TimelineLikesWithUserId.args = {
49 | sourceType: 'likes',
50 | userId: 1934309676,
51 | options: { height: 400 }
52 | };
53 |
54 | export const TimelineListWithOwnerScreenNameSlug = Template.bind({});
55 | TimelineListWithOwnerScreenNameSlug.args = {
56 | sourceType: 'list',
57 | ownerScreenName: 'palafo',
58 | slug: 'breakingnews',
59 | options: { height: 400 }
60 | };
61 |
62 | export const TimelineListWithListId = Template.bind({});
63 | TimelineListWithListId.args = {
64 | sourceType: 'list',
65 | id: 8044403,
66 | options: { height: 400 }
67 | };
68 |
69 | export const TimelineCollection = Template.bind({});
70 | TimelineCollection.args = {
71 | sourceType: 'collection',
72 | id: '576828964162965504',
73 | options: { height: 400 }
74 | };
75 |
76 | export const TimelineCollectionWithUrl = Template.bind({});
77 | TimelineCollectionWithUrl.args = {
78 | sourceType: 'collection',
79 | url: 'https://twitter.com/NYTNow/timelines/576828964162965504',
80 | options: { height: 400 }
81 | };
82 |
83 | export const TimelineUrlWithProfileUrl = Template.bind({});
84 | TimelineUrlWithProfileUrl.args = {
85 | sourceType: 'url',
86 | url: 'https://twitter.com/rahul581',
87 | options: { height: 400 }
88 | };
89 |
90 | export const TimelineUrlWithListUrl = Template.bind({});
91 | TimelineUrlWithListUrl.args = {
92 | sourceType: 'url',
93 | url: 'https://twitter.com/mashable/lists/social-media',
94 | options: { height: 400 }
95 | };
96 |
97 | export const TimelineUrlWithLikesUrl = Template.bind({});
98 | TimelineUrlWithLikesUrl.args = {
99 | sourceType: 'url',
100 | url: 'https://twitter.com/ladygaga/likes',
101 | options: { height: 400 }
102 | };
103 |
104 | export const TimelineWidget = Template.bind({});
105 | TimelineWidget.args = {
106 | sourceType: 'widget',
107 | widgetId: '539487832448843776',
108 | options: { height: 400 }
109 | };
110 |
111 | export const TimelineAutoheight = ({
112 | sourceType,
113 | widgetId,
114 | autoHeight
115 | }: {
116 | sourceType: 'widget';
117 | widgetId: string;
118 | autoHeight: boolean;
119 | }) => (
120 |
121 |
122 |
127 |
128 |
129 |
134 |
135 |
136 |
141 |
142 |
169 | //
170 | //
177 | //
178 | //
179 | //
186 | //
187 | //
188 | //
195 | //
196 | //
205 |
206 |
213 |
214 |
215 |
222 |
223 |
224 |
231 |
232 |
274 |
275 |
281 |
282 |
283 |
291 |
292 |
297 |
298 |
304 |
305 |
306 |
313 |
314 |
319 |
320 |
326 |
327 |
328 |
335 |
336 |
341 |
342 |
348 |
349 |
350 |
357 |
358 |
363 |
364 |
371 |
372 |
373 |
380 |
381 |
382 |
389 |
390 |
418 | Hello I am custom placeholder
419 |
420 | ),
421 | options: { height: 400 }
422 | };
423 |
424 | export const TimelineWithOnload = Template.bind({});
425 | TimelineWithOnload.args = {
426 | sourceType: 'timeline',
427 | widgetId: '539487832448843776',
428 | theme: 'dark',
429 | lang: 'hi',
430 | onLoad: action('Timeline loaded'),
431 | options: { height: 400 }
432 | };
433 |
--------------------------------------------------------------------------------
/src/stories/TwitterTweetEmbed.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterTweetEmbed, {
4 | TwitterTweetEmbedProps
5 | } from './../components/TwitterTweetEmbed';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter Tweet Embed',
11 | component: TwitterTweetEmbed,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const TweetEmbed = Template.bind({});
26 | TweetEmbed.args = {
27 | tweetId: '933354946111705097'
28 | };
29 |
30 | export const TweetEmbedMedia = Template.bind({});
31 | TweetEmbedMedia.args = {
32 | tweetId: '1083592734038929408'
33 | };
34 |
35 | export const TweetWithMediaEmbedWithTextPlaceholder = Template.bind({});
36 | TweetWithMediaEmbedWithTextPlaceholder.args = {
37 | tweetId: '1083592734038929408',
38 | placeholder: 'Loading'
39 | };
40 |
41 | export const TweetWithMediaEmbedWithCustomPlaceholder = Template.bind({});
42 | TweetWithMediaEmbedWithCustomPlaceholder.args = {
43 | tweetId: '1083592734038929408',
44 | placeholder: (
45 |
53 | Hello I am custom placeholder
54 |
55 | )
56 | };
57 |
58 | export const TweetWithMediaEmbedWithOnloadFunction = Template.bind({});
59 | TweetWithMediaEmbedWithOnloadFunction.args = {
60 | tweetId: '1083592734038929408',
61 | options: { cards: 'hidden', width: 300, maxWidth: 800 },
62 | onLoad: action('Loaded successfully')
63 | };
64 |
65 | export const TweetWithMediaEmbedHideMedia = Template.bind({});
66 | TweetWithMediaEmbedHideMedia.args = {
67 | tweetId: '1083592734038929408',
68 | options: { cards: 'hidden', width: 300, maxWidth: 800 },
69 | onLoad: (tweetWidgetEl: HTMLDivElement) => {
70 | if (tweetWidgetEl.shadowRoot) {
71 | const tweetEl: HTMLDivElement | null =
72 | tweetWidgetEl.shadowRoot.querySelector('.EmbeddedTweet');
73 | if (tweetEl) {
74 | tweetEl.style.width = '800px';
75 | tweetEl.style.maxWidth = '800px';
76 | }
77 | }
78 | }
79 | };
80 |
81 | // export const TweetWithCustomCss = Template.bind({});
82 | // TweetWithMediaEmbedHideMedia.args = {
83 | // tweetId: '1083592734038929408',
84 | // onLoad: (tweetWidgetEl: HTMLDivElement) => {
85 | // if (tweetWidgetEl.shadowRoot) {
86 | // const tweetEl: HTMLDivElement | null = tweetWidgetEl.shadowRoot.querySelector('.EmbeddedTweet')
87 | // if (tweetEl) {
88 | // tweetEl.style.border = '5px solid red'
89 | // }
90 | // }
91 | // }
92 | // }
93 |
--------------------------------------------------------------------------------
/src/stories/TwitterVideoEmbed.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Story, Meta } from '@storybook/react';
3 | import TwitterVideoEmbed, {
4 | TwitterVideoEmbedProps
5 | } from './../components/TwitterVideoEmbed';
6 | import { action } from '@storybook/addon-actions';
7 | import './story.css';
8 |
9 | export default {
10 | title: 'Twitter Video Embed',
11 | component: TwitterVideoEmbed,
12 | argTypes: {
13 | backgroundColor: { control: 'color' }
14 | }
15 | } as Meta;
16 |
17 | const Template: Story = (args) => (
18 |
23 | );
24 |
25 | export const TwitterVideoEmbedSimple = Template.bind({});
26 | TwitterVideoEmbedSimple.args = {
27 | id: '560070183650213889'
28 | };
29 |
30 | export const TwitterVideoEmbedWithTextPlaceholder = Template.bind({});
31 | TwitterVideoEmbedWithTextPlaceholder.args = {
32 | id: '560070183650213889',
33 | placeholder: 'Loading'
34 | };
35 |
36 | export const TwitterVideoEmbedWithCustomPlaceholder = Template.bind({});
37 | TwitterVideoEmbedWithCustomPlaceholder.args = {
38 | id: '560070183650213889',
39 | placeholder: (
40 |
48 | Hello I am custom placeholder
49 |
50 | )
51 | };
52 |
53 | export const TwitterVideoEmbedWithOnloadFunction = Template.bind({});
54 | TwitterVideoEmbedWithOnloadFunction.args = {
55 | id: '560070183650213889',
56 | onLoad: action('Loaded successfully')
57 | };
58 |
--------------------------------------------------------------------------------
/src/stories/story.css:
--------------------------------------------------------------------------------
1 | .centerContent {
2 | display: flex;
3 | justify-content: center;
4 | align-content: center;
5 | height: stretch;
6 | }
7 |
8 | .selfCenter {
9 | align-self: center;
10 | }
11 |
12 | .selfCenter::-webkit-scrollbar {
13 | display: none;
14 | }
15 |
16 | .standardWidth {
17 | width: 250px;
18 | }
19 |
20 | .spaceBetween {
21 | padding: 10px;
22 | }
23 |
--------------------------------------------------------------------------------
/src/styles.module.css:
--------------------------------------------------------------------------------
1 | /* add css module styles here (optional) */
2 |
3 | .test {
4 | margin: 2em;
5 | padding: 0.5em;
6 | border: 2px solid #000;
7 | font-size: 2em;
8 | text-align: center;
9 | }
10 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterDMButton.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterDMButton from '../../../components/TwitterDMButton';
4 |
5 | describe('Twitter DM Button', () => {
6 | it('should render direct message button with id', () => {
7 | mount();
8 | cy.wait(1500);
9 | cy.getIframeBody().contains('Message');
10 | });
11 |
12 | it('should render direct message button with id and options', () => {
13 | mount();
14 | cy.wait(1500);
15 | cy.getIframeBody().contains('Message');
16 | });
17 |
18 | it('should render direct message button with id and options', () => {
19 | mount(
20 |
25 | );
26 | cy.wait(1500);
27 | cy.getIframeBody().contains('Message');
28 | });
29 |
30 | it('should render direct message button with custom placeholder', () => {
31 | mount(
32 |
43 | Hello I am custom placeholder
44 |
45 | }
46 | options={{ size: 'large' }}
47 | />
48 | );
49 | cy.contains('Hello I am custom placeholder');
50 | cy.wait(1500);
51 | cy.getIframeBody().contains('Message');
52 | });
53 |
54 | it('should render direct message button with onLoad action', () => {
55 | const callback = cy.stub();
56 | mount();
57 | cy.wait(1500);
58 | cy.getIframeBody().contains('Message');
59 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
60 | });
61 | });
62 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterFollowButton.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterFollowButton from '../../../components/TwitterFollowButton';
4 |
5 | describe('Twitter Follow Button', () => {
6 | it('should render follow button with screenName', () => {
7 | mount();
8 | cy.wait(3000);
9 | cy.getIframeBody().contains('Follow');
10 | });
11 |
12 | it('should render follow button with screenName and options', () => {
13 | mount(
14 |
18 | );
19 | cy.wait(1500);
20 | cy.getIframeBody().contains('Follow');
21 | });
22 |
23 | it('should render follow button with placeholder', () => {
24 | mount(
25 |
30 | );
31 | cy.contains('Loading');
32 | cy.wait(1500);
33 | cy.getIframeBody().contains('Follow');
34 | });
35 |
36 | it('should render follow button with custom placeholder', () => {
37 | mount(
38 |
50 | Hello I am custom placeholder
51 |
52 | }
53 | />
54 | );
55 | cy.contains('Hello I am custom placeholder');
56 | cy.wait(1500);
57 | cy.getIframeBody().contains('Follow');
58 | });
59 |
60 | it('should render follow button with onLoad', () => {
61 | const callback = cy.stub();
62 | mount(
63 |
64 | );
65 | cy.wait(1500);
66 | cy.getIframeBody().contains('Follow');
67 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
68 | });
69 | });
70 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterHashtagButton.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterHashtagButton from '../../../components/TwitterHashtagButton';
4 |
5 | describe('Twitter Hashtag Button', () => {
6 | it('should render hashtag button with tag', () => {
7 | mount();
8 | cy.wait(4000);
9 | cy.getIframeBody().contains('cybersecurity');
10 | });
11 |
12 | it('should render hashtag button with options', () => {
13 | mount(
14 |
15 | );
16 | cy.wait(1500);
17 | cy.getIframeBody().contains('cybersecurity');
18 | });
19 |
20 | it('should render hashtag button with placeholder', () => {
21 | mount(
22 |
27 | );
28 | cy.contains('Loading');
29 | cy.wait(1500);
30 | cy.getIframeBody().contains('cybersecurity');
31 | });
32 |
33 | it('should render hashtag button with custom placeholder', () => {
34 | mount(
35 |
47 | Hello I am custom placeholder
48 |
49 | }
50 | />
51 | );
52 | cy.contains('Hello I am custom placeholder');
53 | cy.wait(1500);
54 | cy.getIframeBody().contains('cybersecurity');
55 | });
56 |
57 | it('should render hashtag button with onLoad', () => {
58 | const callback = cy.stub();
59 | mount(
60 |
65 | );
66 | cy.wait(1500);
67 | cy.getIframeBody().contains('cybersecurity');
68 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
69 | });
70 | });
71 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterMentionButton.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterMentionButton from '../../../components/TwitterMentionButton';
4 |
5 | describe('Twitter Mention Button', () => {
6 | it('should render mention button with screenName', () => {
7 | mount();
8 | cy.wait(4000);
9 | cy.getIframeBody().contains('Tweet to');
10 | });
11 |
12 | it('should render mention button with option', () => {
13 | mount(
14 |
18 | );
19 | cy.wait(1500);
20 | cy.getIframeBody().contains('Tweet to');
21 | });
22 |
23 | it('should render mention button with placeholder', () => {
24 | mount(
25 |
30 | );
31 | cy.contains('Loading');
32 | cy.wait(1500);
33 | cy.getIframeBody().contains('Tweet to');
34 | });
35 |
36 | it('should render mention button with custom placeholder', () => {
37 | mount(
38 |
50 | Hello I am custom placeholder
51 |
52 | }
53 | />
54 | );
55 | cy.contains('Hello I am custom placeholder');
56 | cy.wait(1500);
57 | cy.getIframeBody().contains('Tweet to');
58 | });
59 |
60 | it('should render mention button with onLoad', () => {
61 | const callback = cy.stub();
62 | mount(
63 |
68 | );
69 | cy.wait(1500);
70 | cy.getIframeBody().contains('Tweet to');
71 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterOnAirButton.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterOnAirButton from '../../../components/TwitterOnAirButton';
4 |
5 | describe('Twitter On Air Button', () => {
6 | it('should render onAir button with username', () => {
7 | mount();
8 | cy.wait(4000);
9 | cy.getIframeBody().contains('KatmaiNPS');
10 | });
11 |
12 | it('should render onAir button with options', () => {
13 | mount(
14 |
15 | );
16 | cy.wait(1500);
17 | cy.getIframeBody().contains('KatmaiNPS');
18 | });
19 |
20 | it('should render onAir button with placeholder', () => {
21 | mount(
22 |
27 | );
28 | cy.contains('Loading');
29 | cy.wait(1500);
30 | cy.getIframeBody().contains('KatmaiNPS');
31 | });
32 |
33 | it('should render onAir button with custom placeholder', () => {
34 | mount(
35 |
47 | Hello I am custom placeholder
48 |
49 | }
50 | />
51 | );
52 | cy.contains('Hello I am custom placeholder');
53 | cy.wait(1500);
54 | cy.getIframeBody().contains('KatmaiNPS');
55 | });
56 |
57 | it('should render onAir button with onLoad', () => {
58 | const callback = cy.stub();
59 | mount();
60 | cy.wait(1500);
61 | cy.getIframeBody().contains('KatmaiNPS');
62 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
63 | });
64 | });
65 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterShareButton.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterShareButton from '../../../components/TwitterShareButton';
4 |
5 | describe('Twitter Share Button', () => {
6 | it('should render Share button with url', () => {
7 | mount(
8 |
12 | );
13 | cy.wait(4000);
14 | cy.getIframeBody().contains('Tweet');
15 | });
16 |
17 | it('should render Share button with large', () => {
18 | mount(
19 |
27 | );
28 | cy.wait(1500);
29 | cy.getIframeBody().contains('Tweet');
30 | });
31 |
32 | it('should render Share button with placeholder', () => {
33 | mount(
34 |
43 | );
44 | cy.contains('Loading');
45 | cy.wait(1500);
46 | cy.getIframeBody().contains('Tweet');
47 | });
48 |
49 | it('should render Share button with placeholder', () => {
50 | mount(
51 |
67 | Hello I am custom placeholder
68 |
69 | }
70 | />
71 | );
72 | cy.contains('Hello I am custom placeholder');
73 | cy.wait(1500);
74 | cy.getIframeBody().contains('Tweet');
75 | });
76 |
77 | it('should render Share button with onLoad', () => {
78 | const callback = cy.stub();
79 | mount(
80 |
89 | );
90 | cy.wait(1500);
91 | cy.getIframeBody().contains('Tweet');
92 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
93 | });
94 | });
95 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterTimelineEmbed.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterTimelineEmbed from '../../../components/TwitterTimelineEmbed';
4 |
5 | describe('Twitter Timeline', () => {
6 | it('should render timeline with screenName', () => {
7 | mount(
8 |
13 | );
14 | cy.wait(4000);
15 | cy.getIframeBody().contains('Twitter');
16 | cy.getIframeBody().contains('Tweets by ');
17 | });
18 |
19 | it('should render timeline with userId', () => {
20 | mount(
21 |
26 | );
27 | cy.wait(4000);
28 | cy.getIframeBody().contains('Twitter');
29 | cy.getIframeBody().contains('Tweets by ');
30 | });
31 |
32 | it('should render timeline likes with screenName', () => {
33 | mount(
34 |
39 | );
40 | cy.wait(4000);
41 | cy.getIframeBody().contains('Twitter');
42 | cy.getIframeBody().contains('liked by');
43 | });
44 |
45 | it('should render timeline likes with userId', () => {
46 | mount(
47 |
52 | );
53 | cy.wait(4000);
54 | cy.getIframeBody().contains('Twitter');
55 | cy.getIframeBody().contains('liked by');
56 | });
57 |
58 | it('should render timeline list with owner screen name slug', () => {
59 | mount(
60 |
66 | );
67 | cy.wait(4000);
68 | cy.getIframeBody().contains('Twitter');
69 | cy.getIframeBody().contains('BreakingNews');
70 | cy.getIframeBody().contains('A Twitter list by');
71 | });
72 |
73 | it('should render timeline list with list id', () => {
74 | mount(
75 |
80 | );
81 | cy.wait(4000);
82 | cy.getIframeBody().contains('Twitter');
83 | cy.getIframeBody().contains('meetup-20100301');
84 | cy.getIframeBody().contains('A Twitter list by');
85 | });
86 |
87 | it('should render timeline collection with id', () => {
88 | mount(
89 |
94 | );
95 | cy.wait(4000);
96 | cy.getIframeBody().contains('Twitter');
97 | cy.getIframeBody().contains('Dyeing the Chicago River');
98 | cy.getIframeBody().contains('Curated Tweets by');
99 | });
100 |
101 | it('should render timeline collection with url', () => {
102 | mount(
103 |
108 | );
109 | cy.wait(4000);
110 | cy.getIframeBody().contains('Twitter');
111 | cy.getIframeBody().contains('Dyeing the Chicago River');
112 | cy.getIframeBody().contains('Curated Tweets by');
113 | });
114 |
115 | it('should render timeline collection with profile url', () => {
116 | mount(
117 |
122 | );
123 | cy.wait(4000);
124 | cy.getIframeBody().contains('Twitter');
125 | cy.getIframeBody().contains('Rahul Kadam');
126 | });
127 |
128 | it('should render timeline collection with list url', () => {
129 | mount(
130 |
135 | );
136 | cy.wait(4000);
137 | cy.getIframeBody().contains('Twitter');
138 | cy.getIframeBody().contains('Social Media');
139 | cy.getIframeBody().contains('A Twitter list by');
140 | });
141 |
142 | it('should render timeline collection with Likes url', () => {
143 | mount(
144 |
149 | );
150 | cy.wait(4000);
151 | cy.getIframeBody().contains('Twitter');
152 | cy.getIframeBody().contains('liked by');
153 | });
154 |
155 | it('should render timeline widget id', () => {
156 | mount(
157 |
162 | );
163 | cy.wait(4000);
164 | cy.getIframeBody().contains('National Park Tweets');
165 | cy.getIframeBody().contains('Curated Tweets by');
166 | });
167 |
168 | it('should render timeline widget with auto height', () => {
169 | mount(
170 |
171 |
176 |
177 | );
178 | cy.wait(4000);
179 | cy.getIframeBody().contains('National Park Tweets');
180 | cy.getIframeBody().contains('Curated Tweets by');
181 | });
182 |
183 | it('should render timeline widget with dark theme', () => {
184 | mount(
185 |
190 | );
191 | cy.wait(4000);
192 | cy.getIframeBody().contains('National Park Tweets');
193 | cy.getIframeBody().contains('Curated Tweets by');
194 | });
195 |
196 | it('should render timeline widget with light theme', () => {
197 | mount(
198 |
203 | );
204 | cy.wait(4000);
205 | cy.getIframeBody().contains('National Park Tweets');
206 | cy.getIframeBody().contains('Curated Tweets by');
207 | });
208 |
209 | it('should render timeline widget with custom border', () => {
210 | mount(
211 |
217 | );
218 | cy.wait(4000);
219 | cy.getIframeBody().contains('National Park Tweets');
220 | cy.getIframeBody().contains('Curated Tweets by');
221 | });
222 |
223 | it('should render timeline widget with no header', () => {
224 | mount(
225 |
232 | );
233 | cy.wait(4000);
234 | cy.getIframeBody().contains('National Park Tweets');
235 | cy.getIframeBody().contains('Curated Tweets by');
236 | });
237 |
238 | it('should render timeline widget with no footer', () => {
239 | mount(
240 |
247 | );
248 | cy.wait(4000);
249 | cy.getIframeBody().contains('National Park Tweets');
250 | cy.getIframeBody().contains('Curated Tweets by');
251 | });
252 |
253 | it('should render timeline widget with no header and no footer', () => {
254 | mount(
255 |
263 | );
264 | cy.wait(4000);
265 | cy.getIframeBody().contains('National Park Tweets');
266 | cy.getIframeBody().contains('Curated Tweets by');
267 | });
268 |
269 | it('should render timeline widget with no border', () => {
270 | mount(
271 |
278 | );
279 | cy.wait(4000);
280 | cy.getIframeBody().contains('National Park Tweets');
281 | cy.getIframeBody().contains('Curated Tweets by');
282 | });
283 |
284 | it('should render timeline widget with no scrollbar', () => {
285 | mount(
286 |
293 | );
294 | cy.wait(4000);
295 | cy.getIframeBody().contains('National Park Tweets');
296 | cy.getIframeBody().contains('Curated Tweets by');
297 | });
298 |
299 | it('should render timeline transparent background', () => {
300 | mount(
301 |
308 | );
309 | cy.wait(4000);
310 | cy.getIframeBody().contains('National Park Tweets');
311 | cy.getIframeBody().contains('Curated Tweets by');
312 | });
313 |
314 | it('should render timeline with custom language', () => {
315 | mount(
316 |
322 | );
323 | cy.wait(4000);
324 | cy.getIframeBody().contains('National Park Tweets');
325 | cy.getIframeBody().contains('द्वारा संजोए गए ट्वीट');
326 | });
327 |
328 | it('should render timeline with placeholder', () => {
329 | mount(
330 |
337 | );
338 | cy.contains('Loading');
339 | cy.wait(4000);
340 | cy.getIframeBody().contains('National Park Tweets');
341 | cy.getIframeBody().contains('द्वारा संजोए गए ट्वीट');
342 | });
343 |
344 | it('should render timeline with custom placeholder', () => {
345 | mount(
346 |
360 | Hello I am custom placeholder
361 |
362 | }
363 | />
364 | );
365 | cy.contains('Hello I am custom placeholder');
366 | cy.wait(4000);
367 | cy.getIframeBody().contains('National Park Tweets');
368 | cy.getIframeBody().contains('द्वारा संजोए गए ट्वीट');
369 | });
370 |
371 | it('should render timeline with onLoadd', () => {
372 | const callback = cy.stub();
373 | mount(
374 |
381 | );
382 | cy.wait(4000);
383 | cy.getIframeBody().contains('National Park Tweets');
384 | cy.getIframeBody().contains('द्वारा संजोए गए ट्वीट');
385 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
386 | });
387 | });
388 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterTweetEmbed.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterTweetEmbed from '../../../components/TwitterTweetEmbed';
4 |
5 | describe('Twitter Tweet Embed', () => {
6 | it('should render tweet embed with tweetId 1', () => {
7 | mount();
8 | cy.wait(10000);
9 | cy.getIframeBody().contains('Joe Wright');
10 | });
11 |
12 | it('should render tweet embed with tweetId 2', () => {
13 | mount();
14 | cy.wait(5000);
15 | cy.getIframeBody().contains('Cassidy');
16 | });
17 |
18 | it('should render tweet embed with placeholder', () => {
19 | mount(
20 |
21 | );
22 | cy.contains('Loading');
23 | cy.wait(5000);
24 | cy.getIframeBody().contains('Cassidy');
25 | });
26 |
27 | it('should render tweet embed with custom placeholder', () => {
28 | mount(
29 |
40 | Hello I am custom placeholder
41 |
42 | }
43 | />
44 | );
45 | cy.contains('Hello I am custom placeholder');
46 | cy.wait(5000);
47 | cy.getIframeBody().contains('Cassidy');
48 | });
49 |
50 | it('should render tweet embed with onLoad', () => {
51 | const callback = cy.stub();
52 | mount(
53 |
54 | );
55 | cy.wait(5000);
56 | cy.getIframeBody().contains('Cassidy');
57 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
58 | });
59 | });
60 |
--------------------------------------------------------------------------------
/src/tests/cypress/components/TwitterVideoEmbed.spec.tsx:
--------------------------------------------------------------------------------
1 | import { mount } from '@cypress/react';
2 | import React from 'react';
3 | import TwitterVideoEmbed from '../../../components/TwitterVideoEmbed';
4 |
5 | describe('Twitter Video Embed', () => {
6 | it('should render video embed with id', () => {
7 | mount();
8 | cy.wait(4000);
9 | cy.getIframeBody().contains('Twitter');
10 | cy.getIframeBody().contains(
11 | "You can now shoot, edit and share video on Twitter. Capture life's most moving moments from your perspective."
12 | );
13 | });
14 |
15 | it('should render video embed with placeholder', () => {
16 | mount();
17 | cy.contains('Loading');
18 | cy.wait(4000);
19 | cy.getIframeBody().contains('Twitter');
20 | cy.getIframeBody().contains(
21 | "You can now shoot, edit and share video on Twitter. Capture life's most moving moments from your perspective."
22 | );
23 | });
24 |
25 | it('should render video embed with custom placeholder', () => {
26 | mount(
27 |
38 | Hello I am custom placeholder
39 |
40 | }
41 | />
42 | );
43 | cy.contains('Hello I am custom placeholder');
44 | cy.wait(4000);
45 | cy.getIframeBody().contains('Twitter');
46 | cy.getIframeBody().contains(
47 | "You can now shoot, edit and share video on Twitter. Capture life's most moving moments from your perspective."
48 | );
49 | });
50 |
51 | it('should render video embed with onLoad', () => {
52 | const callback = cy.stub();
53 | mount();
54 | cy.wait(4000);
55 | cy.getIframeBody().contains('Twitter');
56 | cy.getIframeBody().contains(
57 | "You can now shoot, edit and share video on Twitter. Capture life's most moving moments from your perspective."
58 | );
59 | cy.waitUntil(() => expect(callback.callCount).to.eq(1));
60 | });
61 | });
62 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Default CSS definition for typescript,
3 | * will be overridden with file-specific definitions by rollup
4 | */
5 | declare module '*.css' {
6 | const content: { [className: string]: string };
7 | export default content;
8 | }
9 |
10 | type SvgrComponent = React.StatelessComponent>;
11 |
12 | declare module '*.svg' {
13 | const svgUrl: string;
14 | const svgComponent: SvgrComponent;
15 | export default svgUrl;
16 | export { svgComponent as ReactComponent };
17 | }
18 |
19 | declare namespace Cypress {
20 | interface Chainable {
21 | getIframeBody(): Chainable;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "dist",
4 | "module": "esnext",
5 | "lib": ["dom", "esnext"],
6 | "moduleResolution": "node",
7 | "jsx": "react",
8 | "sourceMap": true,
9 | "declaration": true,
10 | "esModuleInterop": true,
11 | "noImplicitReturns": true,
12 | "noImplicitThis": true,
13 | "noImplicitAny": true,
14 | "strictNullChecks": true,
15 | "suppressImplicitAnyIndexErrors": true,
16 | "noUnusedLocals": true,
17 | "noUnusedParameters": true,
18 | "allowSyntheticDefaultImports": true,
19 | "types": ["cypress", "cypress-wait-until"]
20 | },
21 | "include": ["src"],
22 | "exclude": ["node_modules", "dist", "example"]
23 | }
24 |
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "module": "commonjs"
5 | }
6 | }
--------------------------------------------------------------------------------