[teams-channel-picker] 2.2 stories structure update (#1159)

vogtn · nmetulev · web-flow · commit a23228488e2a · 2021-05-18T10:55:40.000-07:00
* updating teams-channel-pickers stories to new file structure

* cleanup

Co-authored-by: Nikola Metulev &lt;nmetulev@users.noreply.github.com&gt;
Co-authored-by: Nikola Metulev &lt;nikolame@microsoft.com&gt;
diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.a.js b/stories/components/teamsChannelPicker/teamsChannelPicker.a.js
@@ -6,7 +6,7 @@
  */
 
 import { html } from 'lit-element';
-import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
 
 export default {
   title: 'Components | mgt-teams-channel-picker',
@@ -76,11 +76,25 @@ export const selectChannel = () => html`
   </script>
 `;
 
-export const darkTheme = () => html`
-  <mgt-teams-channel-picker class="mgt-dark"></mgt-teams-channel-picker>
-  <style>
-    body {
-      background-color: black;
-    }
-  </style>
+export const RTL = () => html`
+  <body dir="rtl">
+    <mgt-teams-channel-picker></mgt-teams-channel-picker>
+  </body>
+`;
+
+
+export const Localization = () => html`
+  <mgt-teams-channel-picker></mgt-teams-channel-picker>
+  <script>
+  import { LocalizationHelper } from '@microsoft/mgt';
+    LocalizationHelper.strings = {
+        _components: {
+            "teams-channel-picker": {
+                inputPlaceholderText: "حدد قناة",
+                noResultsFound: "لم يتم العثور على نتائج",
+                loadingMessage: "جار التحميل..."
+            }
+        }
+    };
+  </script>
 `;
diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.style.js b/stories/components/teamsChannelPicker/teamsChannelPicker.style.js
@@ -0,0 +1,39 @@
+import { html } from 'lit-element';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
+
+export default {
+  title: 'Components / mgt-teams-channel-picker / Style',
+  component: 'mgt-teams-channel-picker',
+  decorators: [withCodeEditor]
+};
+
+export const darkTheme = () => html`
+  <mgt-teams-channel-picker class="mgt-dark"></mgt-teams-channel-picker>
+  <style>
+    body {
+      background-color: black;
+    }
+  </style>
+`;
+
+export const customCSSProperties = () => html`
+  <style>
+    mgt-teams-channel-picker {
+      --input-border: 2px rgb(255, 0, 0) solid;
+
+      --input-background-color: #fcc0e5; 
+      --input-border-color--hover: #008394; 
+      --input-border-color--focus: #0f78d4; 
+
+      --dropdown-background-color: #FF69B4; 
+      --dropdown-item-hover-background: #ff92e6; 
+      --dropdown-item-selected-background: #a10980; 
+
+      --color: blue; 
+      --arrow-fill: #ffffff;
+      --placeholder-color: blue; 
+      --placeholder-color--focus: rgba(255, 255, 255, 0.8); 
+    }
+  </style>
+  <mgt-teams-channel-picker person-query="me"></mgt-teams-channel-picker>
+`;
diff --git a/stories/components/teamsChannelPicker/teamsChannelPicker.templating.js b/stories/components/teamsChannelPicker/teamsChannelPicker.templating.js
@@ -0,0 +1,31 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+import { html } from 'lit-element';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
+
+export default {
+  title: 'Components / mgt-teams-channel-picker / Templating',
+  component: 'mgt-teams-channel-picker',
+  decorators: [withCodeEditor]
+};
+
+export const error = () => html`
+  <mgt-teams-channel-picker>
+    <template data-type="error">
+      <p>Sorry, no Teams or Channels were found</p>
+    </template>
+  </mgt-teams-channel-picker>
+ `;
+
+export const loading = () => html`
+<mgt-teams-channel-picker>
+  <template data-type="loading">
+    <p>Loading results....</p>
+  </template>
+</mgt-teams-channel-picker>
+`;
