From 4840f05275ab13aad78a75564059ad5c67ca7ab0 Mon Sep 17 00:00:00 2001
From: Stijn Van Asschodt <stijn.van.asschodt@gmail.com>
Date: Wed, 26 Feb 2020 15:06:48 +0100
Subject: [PATCH 1/2] docs: update ajax story (#595)

* docs: update ajax story

* docs: remove yarn install lines
---
 packages/ajax/stories/index.stories.mdx | 117 +++++++++++++++++++++++-
 1 file changed, 115 insertions(+), 2 deletions(-)

diff --git a/packages/ajax/stories/index.stories.mdx b/packages/ajax/stories/index.stories.mdx
index 53bee561f..61ecf62f0 100644
--- a/packages/ajax/stories/index.stories.mdx
+++ b/packages/ajax/stories/index.stories.mdx
@@ -56,7 +56,120 @@ npm i --save @lion/ajax
 import { ajax, AjaxClass } from '@lion/ajax';
 ```
 
-## Cancelable Request
+### Performing requests
+
+Performing a `GET` request:
+
+<Story name="GET">
+  {html`
+    <button
+      @click=${() => {
+        ajax
+          .get('./packages/ajax/stories/data.json')
+          .then(response => {
+            console.log(response.data);
+          })
+          .catch(error => {
+            console.log(error);
+          });
+      }}
+    >
+      Execute Request to Action Logger
+    </button>
+  `}
+</Story>
+
+```js
+ajax
+  .get('./packages/ajax/stories/data.json')
+  .then(response => {
+    console.log(response.data);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+```
+
+To post data to the server, pass the data as the second attribute in the `POST` request:
+
+```js
+const body = {
+  ant: {
+    type: "insect",
+    limbs: 6,
+  }
+};
+
+ajax
+  .post('zooApi/animals/addAnimal', body)
+  .then(response => {
+    console.log(`POST successful: ${response.status} ${response.statusText}`);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+```
+
+## Configuration
+
+### JSON prefix
+
+The called API might add a JSON prefix to the response in order to prevent hijacking.
+The prefix renders the string syntactically invalid as a script so that it cannot be hijacked.
+This prefix should be stripped before parsing the string as JSON.
+Pass the prefix with the `jsonPrefix` option.
+
+```js
+const myAjax = AjaxClass.getNewInstance({ jsonPrefix: ")]}'," });
+myAjax
+  .get('./packages/ajax/stories/data.json')
+  .then(response => {
+    console.log(response.data);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+```
+
+### Additional headers
+
+Add additional headers to the requests with the `headers` option.
+
+<Story name="Headers">
+  {html`
+    <button
+      @click=${() => {
+        const myAjax = AjaxClass.getNewInstance({ headers: { 'MY-HEADER': 'SOME-HEADER-VALUE' } });
+        myAjax
+          .get('./packages/ajax/stories/data.json')
+          .then(response => {
+            console.log(response);
+          })
+          .catch(error => {
+            console.log(error);
+          });
+      }}
+    >
+      Execute Request to Action Logger
+    </button>
+  `}
+</Story>
+
+```js
+const myAjax = AjaxClass.getNewInstance({ headers: { 'X-CUSTOM-HEADER': 'SOME-HEADER-VALUE' } });
+myAjax
+  .get('./packages/ajax/stories/data.json')
+  .then(response => {
+    console.log(response);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+```
+
+When executing the request above, check the Network tab in the Browser's dev tools and look for the Request Header on the GET call.
+
+### Cancelable Request
 
 It is possible to make an Ajax request cancelable, and then call `cancel()` to make the request provide a custom error once fired.
 
@@ -100,7 +213,7 @@ myAjax
   });
 ```
 
-## Cancel concurrent requests
+### Cancel concurrent requests
 
 You can cancel concurrent requests with the `cancelPreviousOnNewRequest` option.
 

From 476fef679b75cd5147db6a19425b52a6f12ff862 Mon Sep 17 00:00:00 2001
From: Stijn Van Asschodt <stijn.van.asschodt@gmail.com>
Date: Wed, 26 Feb 2020 15:13:50 +0100
Subject: [PATCH 2/2] chore(lion-switch): show info type validator (#598)

---
 packages/switch/stories/index.stories.mdx | 25 ++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/switch/stories/index.stories.mdx b/packages/switch/stories/index.stories.mdx
index 47c76b267..2ebe7c90d 100644
--- a/packages/switch/stories/index.stories.mdx
+++ b/packages/switch/stories/index.stories.mdx
@@ -1,6 +1,7 @@
 import { Story, Meta, html } from '@open-wc/demoing-storybook';
 import { Validator } from '@lion/validate';
 
+import { LionSwitch } from '../src/LionSwitch';
 import '../lion-switch.js';
 
 <Meta title="Buttons/Switch" />
@@ -75,19 +76,26 @@ Simple example that illustrates where validation feedback will be displayed.
         return "You won't get the latest news!";
       }
     };
+    class CustomSwitch extends LionSwitch {
+      static get validationTypes() {
+        return [...super.validationTypes, 'info'];
+      }
+    }
+    customElements.define('custom-switch', CustomSwitch)
     return html`
-      <lion-switch
+      <custom-switch
         id="newsletterCheck"
         name="newsletterCheck"
         label="Subscribe to newsletter"
         .validators="${[new IsTrue(null, {type: 'info'})]}"
-      ></lion-switch>
+      ></custom-switch>
     `;
   }}
 </Story>
 
 ```js
 import { Validator } from '@lion/validate';
+import { LionSwitch } from '@lion/switch/src/LionSwitch';
 
 const IsTrue = class extends Validator {
   constructor(...args) {
@@ -101,13 +109,20 @@ const IsTrue = class extends Validator {
     return "You won't get the latest news!";
   }
 };
+
+class CustomSwitch extends LionSwitch {
+  static get validationTypes() {
+    return [...super.validationTypes, 'info'];
+  }
+}
+customElements.define('custom-switch', CustomSwitch);
 ```
 
 ```html
-<lion-switch
+<custom-switch
   id="newsletterCheck"
   name="newsletterCheck"
   label="Subscribe to newsletter"
-  .validators="${[new IsTrue(null, {type: 'info'})]}"
-></lion-switch>
+  .validators="${[new IsTrue(null, {type: 'error'})]}"
+></custom-switch>
 ```