Added additional agenda stories (#1129)

Author: nmetulev

.storybook/main.js

@@ -16,7 +16,7 @@ module.exports = {
       }
     }
   ],
-  stories: ['../stories/**/*.stories.(js|mdx)'],
+  stories: ['../stories/**/*.(js|mdx)'],
   addons: [
     // '@storybook/addon-a11y/register',
     // '@storybook/addon-actions/register',

.storybook/preview.js

@@ -27,7 +27,7 @@ addParameters({
 });
 
 // force full reload to not reregister web components
-const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
+const req = require.context('../stories', true, /\.(js|mdx)$/);
 configure(req, module);
 if (module.hot) {
   module.hot.accept(req.id, () => {

stories/components/agenda/agenda.a.js

@@ -0,0 +1,37 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * 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-agenda',
+  component: 'mgt-agenda',
+  decorators: [withCodeEditor]
+};
+
+export const simple = () => html`
+  <mgt-agenda></mgt-agenda>
+`;
+
+export const events = () => html`
+  <!-- Open dev console and click on an event -->
+  <!-- See js tab for event subscription -->
+
+  <mgt-agenda></mgt-agenda>
+  <script>
+    const agenda = document.querySelector('mgt-agenda');
+    agenda.addEventListener('eventClick', (e) => {
+      console.log(e.detail.event);
+    })
+  </script>
+`;
+
+export const RTL = () => html`
+  <mgt-agenda dir="rtl"></mgt-agenda>
+`;
+

stories/components/agenda.stories.js renamed to stories/components/agenda/agenda.properties.js

@@ -6,22 +6,26 @@
  */
 
 import { html } from 'lit-element';
-import { withCodeEditor } from '../../.storybook/addons/codeEditorAddon/codeAddon';
+import { withCodeEditor } from '../../../.storybook/addons/codeEditorAddon/codeAddon';
 
 export default {
-  title: 'Components | mgt-agenda',
+  title: 'Components / mgt-agenda / Properties',
   component: 'mgt-agenda',
   decorators: [withCodeEditor]
 };
 
-export const simple = () => html`
-  <mgt-agenda></mgt-agenda>
-`;
-
 export const getByEventQuery = () => html`
   <mgt-agenda event-query="/me/events?orderby=start/dateTime"></mgt-agenda>
 `;
 
+export const groupByDay = () => html`
+  <mgt-agenda group-by-day></mgt-agenda>
+`;
+
+export const showMax = () => html`
+  <mgt-agenda show-max="4"></mgt-agenda>
+`;
+
 export const getByDate = () => html`
   <mgt-agenda group-by-day date="May 7, 2019" days="3"></mgt-agenda>
 `;
@@ -30,11 +34,7 @@ export const getEventsForNextWeek = () => html`
   <mgt-agenda group-by-day days="7"></mgt-agenda>
 `;
 
-export const darkTheme = () => html`
-  <mgt-agenda group-by-day days="7" class="mgt-dark"></mgt-agenda>
-  <style>
-    body {
-      background-color: black;
-    }
-  </style>
+export const preferredTimezone = () => html`
+  <mgt-agenda preferred-timezone="Europe/Paris"></mgt-agenda>
 `;
+

stories/components/agenda/agenda.style.js

@@ -0,0 +1,50 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * 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-agenda / Style',
+  component: 'mgt-agenda',
+  decorators: [withCodeEditor]
+};
+
+export const darkTheme = () => html`
+  <mgt-agenda class="mgt-dark"></mgt-agenda>
+  <style>
+    body {
+      background-color: black;
+    }
+  </style>
+`;
+
+export const customProperties = () => html`
+  <mgt-agenda group-by-day></mgt-agenda>
+  <style>
+    mgt-agenda {
+      --event-box-shadow: 0px 2px 30px pink;
+      --event-margin: 0px 10px 40px 10px;
+      --event-padding: 8px 0px;
+      --event-background-color: pink;
+      --event-border: dotted 2px white;
+
+      --agenda-header-margin: 3px;
+      --agenda-header-font-size: 20px;
+      --agenda-header-color: pink;
+
+      --event-time-font-size: 20px;
+      --event-time-color: white;
+
+      --event-subject-font-size: 12px;
+      --event-subject-color: white;
+
+      --event-location-font-size: 20px;
+      --event-location-color: white;
+    }
+  </style>
+`;