From 43622c088e35fe4bc565053879aee826f55cc54d Mon Sep 17 00:00:00 2001
From: Yury Shapkarin <yury@shapkarin.me>
Date: Tue, 1 Dec 2020 18:35:58 +0300
Subject: [PATCH 1/3] add develop section to the README.md

---
 README.md | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1e6799d4..5fc13895 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,6 @@
 # Superhero Utils
 
 ## Installation
-
 You can get it as npm package or from the unpkg.com.
 
 ### With npm
@@ -26,6 +25,20 @@ version for React or Vue by importing `dist/react-without-styles.js` or
 `dist/vue-without-styles.js` accordingly. The framework-specific version contains
 all features available in the default one plus specific for particular framework wrappers.
 
+### Develop
+Install:
+```
+npm i
+npm i --prefix examples/react-webpack
+npm i --prefix examples/vue-webpack
+```
+
+Build scripts:
+```
+npm run build
+npm run build:examples
+```
+
 ## Usage
 
 ### Button

From c87d8bc3fcac8d333c349373d6bfd8b49f8074e9 Mon Sep 17 00:00:00 2001
From: Yury Shapkarin <yury@shapkarin.me>
Date: Tue, 1 Dec 2020 20:51:31 +0300
Subject: [PATCH 2/3] add all button sizes for the react example

---
 examples/react-webpack/src/App.js    | 12 +++++++++++-
 examples/react-webpack/src/style.css | 24 ++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 examples/react-webpack/src/style.css

diff --git a/examples/react-webpack/src/App.js b/examples/react-webpack/src/App.js
index f3e0f817..8664bc2c 100644
--- a/examples/react-webpack/src/App.js
+++ b/examples/react-webpack/src/App.js
@@ -1,11 +1,21 @@
 import './superhero-utils/index.css';
 import { Button as SuperheroButton } from './superhero-utils/react-without-styles.js';
 
+import './style.css';
+
 function App() {
   return (
-    <div>
+    <div className="Example-List">
       <h3>superhero-utils example using react, webpack</h3>
+      medium:
       <SuperheroButton size="medium" account="ak_... or .chain name" />
+
+      {['large', 'small', 'icon'].map(size =>
+        <>
+          {size}:
+          <SuperheroButton size={size} account="ak_... or .chain name" />
+        </>
+      )}
     </div>
   );
 }
diff --git a/examples/react-webpack/src/style.css b/examples/react-webpack/src/style.css
new file mode 100644
index 00000000..952299ff
--- /dev/null
+++ b/examples/react-webpack/src/style.css
@@ -0,0 +1,24 @@
+.Example-List {
+  width: 235px;
+  outline: 1px #1162fe solid;
+  padding: 20px;
+  height: 400px;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}

From f6b0b5eb5b39ccf8bebafc03ff3bf295b6116e61 Mon Sep 17 00:00:00 2001
From: Yury Shapkarin <yury@shapkarin.me>
Date: Tue, 1 Dec 2020 21:14:44 +0300
Subject: [PATCH 3/3] add all button sizes for the vue example

---
 examples/vue-webpack/src/App.vue | 34 +++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/examples/vue-webpack/src/App.vue b/examples/vue-webpack/src/App.vue
index 76143a23..91a78e7f 100644
--- a/examples/vue-webpack/src/App.vue
+++ b/examples/vue-webpack/src/App.vue
@@ -1,7 +1,12 @@
 <template>
-  <div>
+  <div class="Example-List">
     <h3>superhero-utils example using vue, webpack</h3>
+    medium:
     <SuperheroButton size="medium" account="ak_... or .chain name" />
+    <template v-for="size in ['large', 'small', 'icon']">
+      {{size}}:
+      <SuperheroButton :size="size" account="ak_... or .chain name" :key="size" />
+    </template>
   </div>
 </template>
 
@@ -15,3 +20,30 @@ export default {
   },
 }
 </script>
+
+<style>
+.Example-List {
+  width: 235px;
+  outline: 1px #1162fe solid;
+  padding: 20px;
+  height: 400px;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-content: stretch;
+  -ms-flex-line-pack: stretch;
+  align-content: stretch;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+</style>