Update yeoman docs generator

[cchaos]

• Removes HTML source tab
• Aligns both sets to spit out the same content
• Wraps text in fragment (we do this manually a lot)
• Changes the existing doc output to be the object method not component
• Reduces import path to just /src since further folders are no longer necessary
• Moved order of text to just after title since source it's more related to the demo
• Added intro section to the new page with required <EuiText>

---

Running the following commands:

1. yarn run yo-doc option 1 for component called test

? What do you want to do? Create a new component documentation page
? What's the name of the component you're documenting? Use snake_case, please. test

2. yarn run yo-doc option 2 for the same named component test

? What do you want to do? Add an example to an existing component documentation page
? What's the name of the component you're documenting? Use snake_case, please. test
? What's the name of the directory this demo should go in? (Within src-docs/src/views). Use snake_case, please. test
? What would you like to name this demo? Use snake_case, please. test_existing

Results in:

test/test_example.tsx

import React from 'react';

import { GuideSectionTypes } from '../../components';

import { EuiTest } from '../../../../src';

import Test from './test';
const testSource = require('!!raw-loader!./test');

import TestExisting from './test_existing';
const testExistingSource = require('!!raw-loader!./test_existing');

export const TestExample = {
  title: 'Test',
  intro: (
    <>
      <EuiText />
    </>
  ),
  sections: [
    {
      title: 'Test',
      text: (
        <>
          <p>
            Description needed: how to use the <strong>EuiTest</strong>{' '}
            component.
          </p>
        </>
      ),
      source: [
        {
          type: GuideSectionTypes.JS,
          code: testSource,
        },
      ],
      demo: <Test />,
      props: { EuiTest },
    },
    {
      title: 'TestExisting',
      text: (
        <>
          <p>
            Description needed: how to use the <strong>TestExisting</strong>{' '}
            component.
          </p>
        </>
      ),
      source: [
        {
          type: GuideSectionTypes.JS,
          code: testExistingSource,
        },
      ],
      demo: <TestExisting />,
      props: { EuiTest },
    },
  ],
};

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5401/

[chandlerprall]

❤️