Merge pull request #5 from jseltzer7/buttonFunction

Button function

package.json

@@ -1,6 +1,6 @@
 {
   "name": "encova-button-stencil-component",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Component Library being developed for testing using StencilJS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

readme.md

@@ -1,15 +1,17 @@
-# Encova-button
-Rebuild of the button. Given the tag `<encova-button>`
+# Component Library
+Building of component library. Given the tag `<encova-button>`
 
-# Using the tag
-Has text attribute to fill for the button's text
+## List of Components enclosed
+`<encova-button>` Green rounded button. Attributes: text - Text to go on the button
+
+`<encova-form>` Basic form with label, text field and submit button. On submit, text will clear and print to console.
 
 # Versioning
 0.0.1 - 7/7/20 2:40 CST - Built basic encova styled button, pushed to github repo, builds correctly in stencil
 
 0.0.2 - 7/7/20 2:45 CST - Forgot to run `npm run build`, commit and push then published to NPM
 
-0.0.3 - Minor update - 7/7/20 3:11 CST - Working correctly! Imported well into the React Application - needed the customElements polyfills added to index.js in order to run. Polyfill imported from loader folder in index.js, component imported from component name in any file it is used in.
+0.0.3 - Minor update - 7/7/20 3:10 CST - Working correctly! Imported well into the React Application - needed the customElements polyfills added to index.js in order to run. Polyfill imported from loader folder in index.js, component imported from component name in any file it is used in.
 
 0.0.4 - Minor Update - 7/7/20 3:30 CST - Minor readme updates to make sure they appear on NPM
 
@@ -23,15 +25,22 @@ Has text attribute to fill for the button's text
 
 0.0.9 - 7/8/20 1:30 CST - Added chromatic for static storybook generation hosting. Attempted deploying on multiple services, but all failed except chromatic. Link is located in links section.
 
+0.0.10 - 7/9/20 8:00 CST - unpkg.com link works, script tag is below. Adding functionality to the encova-button for onClick. On click, alert window will display with given text. Wrote story with and without knobs for the alert.
+
 # Runtime
 Runs through stencil `npm run start`
 
 # Storybook Installation Steps
 To install Storybook: `npx -p @storybook/cli sb init --type html`
 
 # Running Storybook
+Run `npm run build` before storybook can be loaded
+
 Run `npm run storybook`
 
+# unpkg
+`<script src="https://unpkg.com/encova-button-stencil-component@0.0.9/dist/encova-button-stencil-component/encova-button-stencil-component.js"></script>` - This script tag can be place in any HTML file to load the component library for use without node/NPM. Version number can be changed to the most recent version, but rest of link stays the same.
+
 # Using Stories
 Keep all stories in the ./stories folder. Main.js knows to look there for all Storybook files
 

src/components.d.ts

@@ -7,6 +7,9 @@
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface EncovaButton {
+        "buttonClicked": (message: string) => Promise<void>;
+        "color": string;
+        "message": string;
         "text": string;
     }
     interface EncovaForm {
@@ -33,6 +36,8 @@ declare global {
 }
 declare namespace LocalJSX {
     interface EncovaButton {
+        "color"?: string;
+        "message"?: string;
         "text"?: string;
     }
     interface EncovaForm {

src/components/encova-button/encova-button.tsx

@@ -1,4 +1,4 @@
-import { Component, ComponentInterface, Host, h, Prop } from '@stencil/core';
+import { Component, ComponentInterface, Host, h, Prop, Method } from '@stencil/core';
 
 @Component({
   tag: 'encova-button',
@@ -7,12 +7,22 @@ import { Component, ComponentInterface, Host, h, Prop } from '@stencil/core';
 })
 export class EncovaButton implements ComponentInterface {
 
-  @Prop({mutable: true}) text: string;
+  @Prop() text: string;
+  @Prop() message: string;
+  @Prop() color: string;
+
+  @Method()
+  async buttonClicked(message: string) {
+    if (message !== undefined) {
+      alert(message);
+    }
+
+  }
 
   render() {
     return (
       <Host>
-        <button>{this.text}</button>
+        <button onClick={() => this.buttonClicked(this.message)}>{this.text}</button>
       </Host>
 
     );

src/components/encova-button/readme.md

@@ -7,9 +7,24 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type     | Default     |
-| -------- | --------- | ----------- | -------- | ----------- |
-| `text`   | `text`    |             | `string` | `undefined` |
+| Property  | Attribute | Description | Type     | Default     |
+| --------- | --------- | ----------- | -------- | ----------- |
+| `color`   | `color`   |             | `string` | `undefined` |
+| `message` | `message` |             | `string` | `undefined` |
+| `text`    | `text`    |             | `string` | `undefined` |
+
+
+## Methods
+
+### `buttonClicked(message: string) => Promise<void>`
+
+
+
+#### Returns
+
+Type: `Promise<void>`
+
+
 
 
 ----------------------------------------------

src/index.html

@@ -11,7 +11,7 @@
 </head>
 <body>
 
-  <encova-button text="This is text"></encova-button>
+  <encova-button text="This is text" message="Alert Window"></encova-button>
   <br>
   <hr>
   <encova-form></encova-form>

stories/encova-button.stories.js

@@ -12,30 +12,9 @@ export const SampleText = () => `
     <encova-button text="Sample Text"></encova-button>
 `;
 
-// storiesOf('encova-button', module)
-//   .addDecorator(withKnobs)
-//   .add('Simple', () => `
-//     <encova-button text="${text}"></encova-button>
-//   `);
-
-// const label = 'Button Text';
-// const defaultValue = 'Sample Text';
-// const groupId = 'GROUP-ID1';
-
-// const value = text(label, defaultValue, groupId);
-
-// export const Change = () => `
-//     <encova-button text="${text('Button Text', "Enter text")}"></encova-button>
-// `;
-
-// storiesOf('Encova-Button', module)
-//   .addDecorator(withKnobs)
-//   .add(
-//     'Change Text',
-//     () => `
-//       <encova-button text="{value = text('Click Me!', 'Label')}"></encova-button>
-//     ` 
-//   );
+export const AlertText = () => `
+    <encova-button text="Text" message="Alert Text"></encova-button>
+`;
 
 storiesOf('Encova-Button', module)
   .addDecorator(withKnobs)
@@ -46,7 +25,19 @@ storiesOf('Encova-Button', module)
         el.text = text('Button Text', 'Enter text');
         return el;
     }
-  );
+);
+
+storiesOf('Encova-Button', module)
+  .addDecorator(withKnobs)
+  .add(
+    'Knob Button and Alert',
+    () => {
+        const el = document.createElement('encova-button');
+        el.text = text('Button Text', 'Enter text');
+        el.message = text("Alert Text", "Enter Text");
+        return el;
+    }
+);