Fix css variables and button.spec.ts

Author: Templarian

src/pg/button/README.md

@@ -38,6 +38,9 @@ import PgButton from '@pictogrammers/components/pg/button';
 | `--pg-button-active-color` | `#fff`  | `active` Text color      |
 | `--pg-button-active-background-color` | `#453C4F`  | `active` Background color      |
 | `--pg-button-active-border-color` | `#453C4F`  | `active` Border color      |
+| `--pg-button-padding` | `0.25rem 0.5rem` | Padding. |
+| `--pg-button-font-size` | `1rem` | Font size. |
+| `--pg-button-line-height` | `1.5rem` | Line height. |
 
 ### Slots
 

src/pg/button/button.css

@@ -7,8 +7,8 @@
   align-items: center;
   align-content: center;
   font-family: var(--pg-font-family);
-  font-size: 1rem;
-  line-height: 1.5rem;
+  font-size: var(--pg-button-font-size, 1rem);
+  line-height: var(--pg-button-line-height, 1.5rem);
   border: 1px solid var(--pg-button-border-color, #453C4F);
   background-color: var(--pg-button-background-color, #fff);
   color: var(--pg-button-color, #453C4F);

src/pg/button/button.spec.ts

@@ -0,0 +1,35 @@
+import { selectComponent, getProps } from '@pictogrammers/element';
+
+import './button';
+import PgButton from './button';
+
+const PG_BUTTON = 'pg-button';
+
+describe('pg-button', () => {
+
+  beforeEach(() => {
+    var c = document.createElement(PG_BUTTON);
+    document.body.appendChild(c);
+  });
+
+  afterEach(() => {
+    while (document.body.firstChild) {
+      document.body.removeChild(document.body.firstChild);
+    }
+  });
+
+  it('should be registered', () => {
+    expect(customElements.get(PG_BUTTON)).toBeDefined();
+  });
+
+  it('should only expose known props', () => {
+    const props = getProps(PG_BUTTON);
+    expect(props.length).toBe(5);
+    expect(props).toContain('active');
+    expect(props).toContain('block');
+    expect(props).toContain('start');
+    expect(props).toContain('center');
+    expect(props).toContain('end');
+  });
+
+});