feat: promoting search components to GA (#2909)

Promoting Search to GA
Updated stories for GA

---------

Co-authored-by: Gavin Barron <gavinbarron@microsoft.com>

packages/mgt-components/src/components/components.ts

@@ -24,6 +24,8 @@ import './mgt-contact/mgt-contact';
 import './mgt-messages/mgt-messages';
 import './mgt-organization/mgt-organization';
 import './mgt-profile/mgt-profile';
+import './mgt-search-box/mgt-search-box';
+import './mgt-search-results/mgt-search-results';
 import './mgt-theme-toggle/mgt-theme-toggle';
 import './sub-components/mgt-spinner/mgt-spinner';
 
@@ -49,7 +51,10 @@ export * from './mgt-contact/mgt-contact';
 export * from './mgt-messages/mgt-messages';
 export * from './mgt-organization/mgt-organization';
 export * from './mgt-profile/mgt-profile';
+export * from './mgt-search-box/mgt-search-box';
+export * from './mgt-search-results/mgt-search-results';
 export * from './mgt-theme-toggle/mgt-theme-toggle';
 export * from './sub-components/mgt-spinner/mgt-spinner';
 // include preview components here for ease of import into mgt-react
-export * from './preview';
+// There are no preview components in this package at this time
+// export * from './preview';

packages/mgt-components/src/components/mgt-search-box/mgt-search-box.scss

@@ -0,0 +1,5 @@
+@import '../../styles/shared-styles';
+
+:host fluent-search {
+  width: 100%;
+}

packages/mgt-components/src/components/preview/mgt-search-box/mgt-search-box.ts → packages/mgt-components/src/components/mgt-search-box/mgt-search-box.ts

@@ -9,10 +9,10 @@ import { CSSResult, html, TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { MgtBaseComponent } from '@microsoft/mgt-element';
 import { fluentSearch } from '@fluentui/web-components';
-import { registerFluentComponents } from '../../../utils/FluentComponents';
+import { registerFluentComponents } from '../../utils/FluentComponents';
 import { strings } from './strings';
 import { styles } from './mgt-search-box-css';
-import { debounce } from '../../../utils/Utils';
+import { debounce } from '../../utils/Utils';
 import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtSearchBoxComponent = () => {
@@ -96,9 +96,6 @@ export class MgtSearchBox extends MgtBaseComponent {
 
   constructor() {
     super();
-    console.warn(
-      '🦒: <mgt-search-box> is a preview component and may change prior to becoming generally available. See more information https://aka.ms/mgt/preview-components'
-    );
     this.debounceDelay = 300;
   }
 

packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.scss → packages/mgt-components/src/components/mgt-search-results/mgt-search-results.scss

@@ -5,7 +5,7 @@
  * -------------------------------------------------------------------------------------------
  */
 
-@import '../../../styles/shared-styles';
+@import '../../styles/shared-styles';
 
 $answer-border-radius: var(--answer-border-radius, 4px);
 $answer-box-shadow: var(--answer-box-shadow, 0 3.2px 7.2px rgb(0 0 0 / 13.2%), 0 0.6px 1.8px rgb(0 0 0 / 10.8%));

packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.ts → packages/mgt-components/src/components/mgt-search-results/mgt-search-results.ts

@@ -21,7 +21,7 @@ import {
   CollectionResponse
 } from '@microsoft/mgt-element';
 
-import { schemas } from '../../../graph/cacheStores';
+import { schemas } from '../../graph/cacheStores';
 import { strings } from './strings';
 import { styles } from './mgt-search-results-css';
 import {
@@ -46,14 +46,14 @@ import {
   getResponseInvalidationTime,
   sanitizeSummary,
   trimFileExtension
-} from '../../../utils/Utils';
-import { getSvg, SvgIcon } from '../../../utils/SvgHelper';
+} from '../../utils/Utils';
+import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { fluentSkeleton, fluentButton, fluentTooltip, fluentDivider } from '@fluentui/web-components';
-import { registerFluentComponents } from '../../../utils/FluentComponents';
-import { CacheResponse } from '../../CacheResponse';
+import { registerFluentComponents } from '../../utils/FluentComponents';
+import { CacheResponse } from '../CacheResponse';
 import { registerComponent } from '@microsoft/mgt-element';
-import { registerMgtFileComponent } from '../../mgt-file/mgt-file';
-import { registerMgtPersonComponent } from '../../mgt-person/mgt-person';
+import { registerMgtFileComponent } from '../mgt-file/mgt-file';
+import { registerMgtPersonComponent } from '../mgt-person/mgt-person';
 
 /**
  * Object representing a thumbnail
@@ -407,9 +407,6 @@ export class MgtSearchResults extends MgtTemplatedComponent {
 
   constructor() {
     super();
-    console.warn(
-      '🦒: <mgt-search-results> is a preview component and may change prior to becoming generally available. See more information https://aka.ms/mgt/preview-components'
-    );
   }
 
   /**

packages/mgt-components/src/components/preview/index.ts

@@ -1,2 +0,0 @@
-export * from './mgt-search-box/mgt-search-box';
-export * from './mgt-search-results/mgt-search-results';

packages/mgt-components/src/exports.ts

@@ -6,7 +6,8 @@
  */
 
 export * from './components/components';
-export * from './components/preview';
+// There are no preview components in this package at this time
+// export * from './components/preview';
 export * from './graph/types';
 export * from './styles/theme-manager';
 export * from './graph/entityType';

stories/components/preview/searchBox/searchBox.properties.stories.js → stories/components/searchBox/searchBox.properties.stories.js

@@ -6,10 +6,10 @@
  */
 
 import { html } from 'lit';
-import { withCodeEditor } from '../../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
 
 export default {
-  title: 'Preview / mgt-search-box / Properties',
+  title: 'Components / mgt-search-box / Properties',
   component: 'search-box',
   decorators: [withCodeEditor]
 };

stories/components/preview/searchBox/searchBox.stories.stories.js → stories/components/searchBox/searchBox.stories.stories.js

@@ -6,10 +6,10 @@
  */
 
 import { html } from 'lit';
-import { withCodeEditor } from '../../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
 
 export default {
-  title: 'Preview / mgt-search-box',
+  title: 'Components / mgt-search-box',
   component: 'search-box',
   decorators: [withCodeEditor],
   tags: ['autodocs'],

stories/components/preview/searchResults/searchResults.properties.stories.js → stories/components/searchResults/searchResults.properties.stories.js

@@ -6,10 +6,10 @@
  */
 
 import { html } from 'lit';
-import { withCodeEditor } from '../../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
 
 export default {
-  title: 'Preview / mgt-search-results / Properties',
+  title: 'Components / mgt-search-results / Properties',
   component: 'search-results',
   decorators: [withCodeEditor]
 };

stories/components/preview/searchResults/searchResults.stories.js → stories/components/searchResults/searchResults.stories.js

@@ -6,10 +6,10 @@
  */
 
 import { html } from 'lit';
-import { withCodeEditor } from '../../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
 
 export default {
-  title: 'Preview / mgt-search-results',
+  title: 'Components / mgt-search-results',
   component: 'search-results',
   decorators: [withCodeEditor],
   tags: ['autodocs'],

stories/components/preview/searchResults/searchResults.style.stories.js → stories/components/searchResults/searchResults.style.stories.js

@@ -6,10 +6,10 @@
  */
 
 import { html } from 'lit';
-import { withCodeEditor } from '../../../../.storybook/addons/codeEditorAddon/codeAddon';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
 
 export default {
-  title: 'Preview / mgt-search-results / Style',
+  title: 'Components / mgt-search-results / Style',
   component: 'search-results',
   decorators: [withCodeEditor]
 };