From ae15940e5ed207422b75fbb5c2dd79634ab0c1ab Mon Sep 17 00:00:00 2001
From: BcRikko <s.shin1106@gmail.com>
Date: Thu, 21 Feb 2019 18:53:01 +0900
Subject: [PATCH] docs: add dialog samples

---
 docs/index.html |  1 +
 docs/script.js  | 79 +++++++++++++++++++++++++++++++++++++++++++++++--
 docs/style.css  |  4 +++
 3 files changed, 81 insertions(+), 3 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index d22f869..474c24d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -76,6 +76,7 @@
                 class="item"
                 v-html="sample.code">
               </div>
+              <p v-if="sample.note" class="note nes-text is-error">{{ sample.note }}</p>
               <button type="button" class="nes-btn is-primary showcode" @click="sample.showCode = !sample.showCode">&lt;&gt;</button>
             </section>
             <section class="samplecode" v-show="sample.showCode">
diff --git a/docs/script.js b/docs/script.js
index 1ba6442..98544f7 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -39,7 +39,7 @@ const sampleCollection = [
 </div>`,
   },
   {
-    title: 'Inputs',
+    title: 'inputs',
     showCode: false,
     code: `<div class="nes-field">
   <label for="name_field">Your name</label>
@@ -62,13 +62,13 @@ const sampleCollection = [
 </div>`,
   },
   {
-    title: 'Textarea',
+    title: 'textarea',
     showCode: false,
     code: `<label for="textarea_field">Textarea</label>
 <textarea id="textarea_field" class="nes-textarea"></textarea>`,
   },
   {
-    title: 'Selects',
+    title: 'selects',
     showCode: false,
     code: `<div class="nes-select">
   <select required>
@@ -123,6 +123,79 @@ const sampleCollection = [
   <p>Good morning. Thou hast had a good night's sleep, I hope.</p>
 </div>`,
   },
+  {
+    title: 'dialogs',
+    note:
+      'NES.css does not include any JavaScript. If you want to use dialog element other than Chrome, you need polyfill.',
+    showCode: false,
+    code: `<!-- Dialog -->
+<section>
+  <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-default').showModal();">
+    Open dialog
+  </button>
+  <dialog class="nes-dialog" id="dialog-default">
+    <form method="dialog">
+      <p class="title">Dialog</p>
+      <p>Alert: this is a dialog.</p>
+      <menu class="dialog-menu">
+        <button class="nes-btn">Cancel</button>
+        <button class="nes-btn is-primary">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
+</section>
+
+<!-- Dark dialog -->
+<section>
+  <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark').showModal();">
+    Open dark dialog
+  </button>
+  <dialog class="nes-dialog is-dark" id="dialog-dark">
+    <form method="dialog">
+      <p class="title">Dark dialog</p>
+      <p>Alert: this is a dialog.</p>
+      <menu class="dialog-menu">
+        <button class="nes-btn">Cancel</button>
+        <button class="nes-btn is-primary">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
+</section>
+
+<!-- Rounded dialog -->
+<section>
+  <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-rounded').showModal();">
+    Open rounded dialog
+  </button>
+  <dialog class="nes-dialog is-rounded" id="dialog-rounded">
+    <form method="dialog">
+      <p class="title">Rounded dialog</p>
+      <p>Alert: this is a dialog.</p>
+      <menu class="dialog-menu">
+        <button class="nes-btn">Cancel</button>
+        <button class="nes-btn is-primary">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
+</section>
+
+<!-- Dark and Rounded dialog -->
+<section>
+  <button type="button" class="nes-btn is-primary" onclick="document.getElementById('dialog-dark-rounded').showModal();">
+    Open dark and rounded dialog
+  </button>
+  <dialog class="nes-dialog is-dark is-rounded" id="dialog-dark-rounded">
+    <form method="dialog">
+      <p class="title">Dark and Rounded dialog</p>
+      <p>Alert: this is a dialog.</p>
+      <menu class="dialog-menu">
+        <button class="nes-btn">Cancel</button>
+        <button class="nes-btn is-primary">Confirm</button>
+      </menu>
+    </form>
+  </dialog>
+</section>`,
+  },
 ];
 
 const coreteam = [
diff --git a/docs/style.css b/docs/style.css
index 2d2265b..135127b 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -77,6 +77,10 @@ section.showcase > section.samplecode {
   right: 0px;
 }
 
+section.showcase > section.nes-container > p.note {
+  margin-top: 2.5rem;
+}
+
 section.showcase > section.samplecode > pre code {
   font-size: 13px;
   line-height: 1.5;