Combine all separate TwitterPreview components to have a working preview

[andizer]

When resolving this issue we should have the following components:

• TwitterTextContainer Create a TwitterTextContainer component #51
• TwitterImage Create a TwitterImage component #50

These components should be combined in the TwitterPreview component something like:

    return ( <div>
          <TwitterImage src={ props.image } />
          <TwitterTextContainer
            ...
           />
       </div>
    );

Reference:
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image

Parent of #51
Parent of #50
Parent of #209

[dariaknl]

QA feedback:

The following use cases should be tested:
— Title —

1. Create new post with title “Test post”,
   check Twitter title preview is set to “Test post”,
   publish post,
   check meta settings twitter:title is set to “Test post”
2. Given SEO title is set to default value in Content optimization tab - "Edit Snippet" of post,
   and Twitter title is not changed,
   change Twitter title to "Happy life - %%sitename%%" in Social tab of post,
   publish post,
   check meta settings of post is set to meta property="twitter:title" content="Happy life - WordPress Dev"
3. Given SEO - Search Appearance for Posts - Content types is configured with SEO Title "%%title%% %%sep%% %%sitename%% test",
   create and publish new post with title "Little post”,
   check Twitter title is set to "Little post”,
   check meta settings of post are set to:
   meta property="og:title" content="Little post - Local WordPress Dev test"
   meta name="twitter:title" content="Little post - Local WordPress Dev test"

Repeat the steps above for Page, Category and Tag
Perform all these tests in Premium plugin as well.

— Description —

1. Create new post with the content which starts with “This is the beginning”,
   and Meta description is left empty in Content optimization tab - "Edit Snippet" of the post,
   and Twitter description is left empty,
   publish the post,
   check meta settings twitter:description is set to "This is the beginning”
2. Given Meta description is left empty in Content optimization tab - "Edit Snippet" of post,
   and content of post is empty,
   and Twitter description is left empty,
   and Facebook description is left empty,
   check meta settings do not include “twitter:description"
3. Create new post with Meta description “Description”,
   and Twitter description is left empty,
   publish the post,
   check Twitter description preview is set to “Description”,
   check meta settings twitter:description is set to "Description”
4. Create new post with Meta description “Description”,
   And Facebook description is filled with “Facebook description”
   and Twitter description is filled with “Twitter description”,
   publish the post,
   check meta settings twitter:description is set to “Twitter description”
5. Create new post with Meta description “Description”,
   And Facebook description is filled with “New one description”
   and Twitter description is empty,
   publish the post,
   check meta settings twitter:description is set to “New one description”
6. Go to SEO - Search Appearance for Posts - Content types,
   set Meta description to “Default test”,
   create new post with title “Test post”,
   check Twitter title preview is set to “Default test”,
   publish post,
   check meta settings twitter:description is set to “Default test”

Repeat the steps above for Page, Category and Tag
Perform all these tests in Premium plugin as well.

— Image —

1. Given Image URL is empty in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook page of post,
   and Twitter image is empty in Social - Facebook page of post,
   and no image is presented within post
   upload image to Image URL in "SEO" - "Social" Facebook page
   publish post,
   check meta settings of post contain:
   meta property="twitter:image" content=<link_to_pic>
2. Given Image URL is empty in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook page of post,
   and no image is presented within post,
   upload image to Facebook image in Social - Facebook page of post,
   publish post,
   check meta settings of post contain:
   meta property="twitter:image" content=<link_to_pic>
3. Given Image URL is empty in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook page of post,
   and no image is presented within post,
   upload image to the content of post,
   publish post,
   check meta settings of post contain:
   meta property="twitter:image" content=<link_to_pic>
4. Given Image URL is set to <path_to_my_image1> in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook tab of post,
   and Twitter image is empty in Social - Twitter tab of post,
   and no image is presented within post,
   upload image <path_to_my_image2> to Twitter image in Social - Twitter tab of post,
   update post,
   check meta settings of post contain:
   meta name="twitter:image" content=<path_to_my_image2>
5. Given Image URL is set to <path_to_my_image1> in "SEO" - "Social" Facebook page,
   and Twitter image is empty in Social - Facebook page of post,
   and Homepage is set to Static,
   and Facebook image is empty in Social - Facebook page of post,
   no image is presented within Homepage,
   upload an image <path_to_my_image2> in Social - Facebook page of Homepage,
   update post,
   check meta settings of my Homepage contain:
   meta property="twitter:image" content=<path_to_my_image2>
6. Given Facebook image in Social - Facebook page of post is uploaded,
   and Twitter image is empty in Social - Facebook page of post,
   protect post with password,
   check meta settings of post do not contain contain:
   meta property="twitter:image" content=<link_to_pic>
7. Given Image URL is empty in "SEO" - "Social" Facebook page,
   and Facebook image is empty in Social - Facebook page of post,
   and Twitter image is empty in Social - Facebook page of post,
   and no image is presented within post,
   and no image is presented in Featured Image of post,
   upload image in Featured Image of post,
   update post,
   check meta settings of post contain:
   meta property="twitter:image" content=<path_to_my_image>
8. Given Frontpage Image URL is empty in "SEO" - "Social" Facebook page,
   upload image to Frontpage settings in "SEO" - "Social" Facebook page,
   and click "Save changes”,
   check meta settings of Frontpage contain:
   meta property="twitter:image" content=<path_to_my_image>

Repeat tests 1-4 and 6-7 for Pages.
Repeat tests 1-2 for Categories.
Repeat tests 1-2 for Tags.

Perform all these tests in Premium plugin as well.
Make additional checks for image within Premium preview in Premium plugin (and Free if it is included).

— Author name —
Check that Author name is parsed correctly in Twitter Preview.
Perform all these tests in Premium plugin as well.

— Site name —
Check that Site name is parsed correctly in Twitter Preview.
Perform all these tests in Premium plugin as well.

— Upgrade routine —

1. Install last released plugin version,
   fill in the whole information for Social preview for post,
   publish post,
   upgrade to new plugin version,
   check Twitter title, description, image etc are still filled in correctly

Repeat the steps above for Page, Category and Tag
Perform all these tests in Premium plugin as well.

[dariaknl]

QA feedback:
there is one issue for Twitter, probably it can be fixed within this epic - Yoast/wordpress-seo#10839

[omarreiss]

Fixed elsewhere.