docs(atomic): Migrating atomic-did-you-mean doc to storybook

packages/atomic/src/components/search/atomic-did-you-mean/atomic-did-you-mean.mdx

@@ -0,0 +1,51 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as AtomicDidYouMeanStories from './atomic-did-you-mean.new.stories';
+import { AtomicDocTemplate } from '../../../../storybook-utils/documentation/atomic-doc-template';
+
+<Meta of={AtomicDidYouMeanStories} />
+
+<AtomicDocTemplate
+  stories={AtomicDidYouMeanStories}
+  githubPath="search/atomic-did-you-mean/atomic-did-you-mean.ts"
+  tagName="atomic-did-you-mean"
+  className="AtomicDidYouMean"
+>
+This component is typically placed within the "status" section of the layout.
+
+```html
+<atomic-search-interface>
+  ...
+  <atomic-search-layout>
+    ...
+    <atomic-layout-section section="main">
+      ...
+      <atomic-layout-section section="status">
+
+        <atomic-did-you-mean></atomic-did-you-mean>
+
+      </atomic-layout-section>
+    </atomic-layout-section>
+  </atomic-search-layout>
+</atomic-search-interface>
+```
+
+Using the _Did You Mean_ component with your search page is a best practice, especially if your index has search terms that can be misinterpreted as an error.
+The relevance of the corrections improves with the size of the index, as more terms become available for comparison.
+
+It's possible to define certain phrases or terms in an organization’s thesaurus, which will expand or replace the query expression before executing the query.
+However, the _Did You Mean_ component won’t process queries expanded by the thesaurus.
+
+
+### Common Use Cases
+* When a query returns no results but finds a possible query correction, the component automatically triggers a new query with the suggested term. This prevents the user having to rewrite their query, which saves them time.
+* When the current query returns results, but the index has more frequently occurring terms with similar spelling, the component presents a link containing the new terms.
+When clicked, the link triggers a new query using the corrected keywords.
+* A soft nudge asking users if that's what they meant can direct them to the most relevant results.
+
+## Reference
+
+<a href="https://uxmag.com/articles/designing-search-staying-on-track" target="_blank">Designing Search: Staying on Track</a>
+<br/>
+<a href="https://www.google.com/search?q=guitr&oq=guitr&aqs=chrome..69i57j0i10i433l3j69i60j69i65j69i60l2.538j0j7&sourceid=chrome&ie=UTF-8" target="_blank">Searching "guitr" with Google</a>
+
+</AtomicDocTemplate>