@amiceli/papierjs 0.2.0 → 0.4.0

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,76 @@
+import { Host, h } from "@stencil/core";
+import feather from "feather-icons";
+/**
+ * @slot - accordion content
+ */
+export class PAccordion {
+    constructor() {
+        this.open = false;
+    }
+    render() {
+        const icon = feather.icons['chevron-down'].toSvg();
+        const openIcon = feather.icons['chevron-up'].toSvg();
+        return (h(Host, { key: 'b0deb772470e3a26deea430be79bd8b3d245205b' }, h("div", { key: '9b14d7df7498285ae1587ec50e6b40ffa9081973', class: "papier" }, h("div", { key: '7ca86fce3c6150d8e42440cb834b34af013c11b0', class: "p-accordion is--block border" }, h("div", { key: 'b04c66e4c63b6216ffb6ab1277d7cc68e056c8b1', class: "p-accordion__summary", onClick: () => {
+                this.open = !this.open;
+            } }, h("span", { key: '79cc5ae2232d7613471d23d3d962d695bfa5eaec' }, this.title), h("span", { key: '8bae09ef9a9a075d4a13c0ecfb2f7f1695694801' }, h("span", { key: 'a6d1920927eb8360c19b93fe2a854e052b8733f5', class: "for--icon", innerHTML: this.open ? openIcon : icon }))), h("div", { key: '84ac942abb97d143725b7f6fa8494a47721ee2a1', class: {
+                'p-accordion__content': true,
+                'is--open': this.open,
+            } }, h("slot", { key: '4e3123ec9d77d1c45870be854e4263c4807b6221' }))))));
+    }
+    static get is() { return "p-accordion"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "title",
+                "reflect": false
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=accordion.js.map

package/dist/collection/components/accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,OAAO,MAAM,eAAe,CAAA;AAEnC;;GAEG;AAMH,MAAM,OAAO,UAAU;IALvB;QASI,SAAI,GAAY,KAAK,CAAA;KAqCxB;IAnCG,MAAM;QACF,MAAM,IAAI,GAAG,OAAO,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,EAAE,CAAA;QAClD,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,KAAK,EAAE,CAAA;QAEpD,OAAO,CACH,EAAC,IAAI;YACD,4DAAK,KAAK,EAAC,QAAQ;gBACf,4DAAK,KAAK,EAAC,8BAA8B;oBACrC,4DACI,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,GAAG,EAAE;4BACV,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAA;wBAC1B,CAAC;wBAED,+DAAO,IAAI,CAAC,KAAK,CAAQ;wBACzB;4BACI,6DACI,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,GACxC,CACC,CACL;oBACN,4DACI,KAAK,EAAE;4BACH,sBAAsB,EAAE,IAAI;4BAC5B,UAAU,EAAE,IAAI,CAAC,IAAI;yBACxB;wBAED,8DAAQ,CACN,CACJ,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core'\nimport feather from 'feather-icons'\n\n/**\n * @slot - accordion content\n */\n@Component({\n    tag: 'p-accordion',\n    styleUrl: 'accordion.scss',\n    shadow: true,\n})\nexport class PAccordion {\n    @Prop()\n    title: string\n    @Prop({ mutable: true })\n    open: boolean = false\n\n    render() {\n        const icon = feather.icons['chevron-down'].toSvg()\n        const openIcon = feather.icons['chevron-up'].toSvg()\n\n        return (\n            <Host>\n                <div class=\"papier\">\n                    <div class=\"p-accordion is--block border\">\n                        <div\n                            class=\"p-accordion__summary\"\n                            onClick={() => {\n                                this.open = !this.open\n                            }}\n                        >\n                            <span>{this.title}</span>\n                            <span>\n                                <span\n                                    class=\"for--icon\"\n                                    innerHTML={this.open ? openIcon : icon}\n                                />\n                            </span>\n                        </div>\n                        <div\n                            class={{\n                                'p-accordion__content': true,\n                                'is--open': this.open,\n                            }}\n                        >\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/alert/alert.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 export class Alert {
     constructor() {
         this.type = 'primary';
+        /** Show close icon */
         this.closable = false;
         this.dark = false;
     }
@@ -30,7 +31,7 @@ export class Alert {
         this.close.emit(null);
     }
     render() {
-        return (h("div", { key: '47023968aab603c5f3cc8c4c104531fccfda18c5', class: this.getParentClass() }, h("div", { key: '9493fbb5effde0c373150a46f92e080a043641c0', class: this.getClass() }, h("slot", { key: '5cca2a145a4b287d6c3947afdcab64c0439b2e36' }), this.closable && (h("span", { key: '7682a194126fd1672f4243a897eecb43926aceee', class: "btn-close", onClick: () => this.closeAlert() }, "X")))));
+        return (h("div", { key: '8bd3d21315cff40886e9e45ba82251dcc932ea67', class: this.getParentClass() }, h("div", { key: '3d3124b7082f07bf450693a68ef7856ab3568981', class: this.getClass() }, h("slot", { key: 'aa07a9c9a12603de6136867e6c52f1610f4393c8' }), this.closable && (h("span", { key: 'cae998e950faac1bd144a8395feb3af09038ddf5', class: "btn-close", onClick: () => this.closeAlert() }, "X")))));
     }
     static get is() { return "p-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -83,7 +84,7 @@ export class Alert {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Show close icon"
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAS5E,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAE7B,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;KAqDzB;IAhDU,QAAQ;QACX,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAA;QACtE,IAAI,QAAQ,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,GAAG,QAAQ,gBAAgB,CAAA;QAC1C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,GAAG,QAAQ,UAAU,IAAI,CAAC,IAAI,EAAE,CAAA;QAC/C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,GAAG,QAAQ,cAAc,CAAA;QACxC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,kBAAkB,CAAA;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,UAAU;QACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACvB,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,CACd,6DACI,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,QAG7B,CACV,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Prop, h } from '@stencil/core'\n\ntype AlertColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    type?: AlertColor = 'primary'\n    @Prop()\n    closable?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    @Event({ eventName: 'close' })\n    public close: EventEmitter\n\n    public getClass(): string {\n        const types = ['primary', 'secondary', 'success', 'warning', 'danger']\n        let cssClass = 'alert'\n\n        if (!types.includes(this.type)) {\n            cssClass = `${cssClass} alert-primary`\n        } else {\n            cssClass = `${cssClass} alert-${this.type}`\n        }\n\n        if (this.closable) {\n            cssClass = `${cssClass} dismissible`\n        }\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier is--block'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public closeAlert() {\n        this.close.emit(null)\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class={this.getClass()}>\n                    <slot />\n                    {this.closable && (\n                        <span\n                            class=\"btn-close\"\n                            onClick={() => this.closeAlert()}\n                        >\n                            X\n                        </span>\n                    )}\n                </div>\n            </div>\n        )\n    }\n}\n"]}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAqB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAS5E,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAC7B,sBAAsB;QACd,aAAQ,GAAa,KAAK,CAAA;QAElC,SAAI,GAAa,KAAK,CAAA;KAqDzB;IAhDU,QAAQ;QACX,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAA;QACtE,IAAI,QAAQ,GAAG,OAAO,CAAA;QAEtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;YAC7B,QAAQ,GAAG,GAAG,QAAQ,gBAAgB,CAAA;QAC1C,CAAC;aAAM,CAAC;YACJ,QAAQ,GAAG,GAAG,QAAQ,UAAU,IAAI,CAAC,IAAI,EAAE,CAAA;QAC/C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,QAAQ,GAAG,GAAG,QAAQ,cAAc,CAAA;QACxC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,kBAAkB,CAAA;QAEjC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,UAAU;QACb,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IACzB,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC7B,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACvB,8DAAQ;gBACP,IAAI,CAAC,QAAQ,IAAI,CACd,6DACI,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,QAG7B,CACV,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Event, type EventEmitter, Prop, h } from '@stencil/core'\n\ntype AlertColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-alert',\n    styleUrl: 'alert.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    type?: AlertColor = 'primary'\n    /** Show close icon */\n    @Prop() closable?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    @Event({ eventName: 'close' })\n    public close: EventEmitter\n\n    public getClass(): string {\n        const types = ['primary', 'secondary', 'success', 'warning', 'danger']\n        let cssClass = 'alert'\n\n        if (!types.includes(this.type)) {\n            cssClass = `${cssClass} alert-primary`\n        } else {\n            cssClass = `${cssClass} alert-${this.type}`\n        }\n\n        if (this.closable) {\n            cssClass = `${cssClass} dismissible`\n        }\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier is--block'\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public closeAlert() {\n        this.close.emit(null)\n    }\n\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <div class={this.getClass()}>\n                    <slot />\n                    {this.closable && (\n                        <span\n                            class=\"btn-close\"\n                            onClick={() => this.closeAlert()}\n                        >\n                            X\n                        </span>\n                    )}\n                </div>\n            </div>\n        )\n    }\n}\n"]}

package/dist/collection/components/alert/stories/alert.stories.js

@@ -0,0 +1,46 @@
+export default {
+    title: 'Components/Alert/Playground',
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'warning', 'danger', 'noted'],
+            name: 'checked-background',
+        },
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+        closable: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+}
+
+const Template = (args) => {
+    const content = `
+        <p-alert
+            type="${args.type}"
+            ${args.darkMode ? 'dark' : ''}
+            ${args.closable ? 'closable' : ''}
+        >
+            ${args.contenr}
+        </p-alert>`
+
+    return args.darkMode
+        ? `
+        <div style="padding: 10px; box-sizing: border-box; width: 100%; background: #41403e">
+            ${content}
+        </div>
+    `
+        : content
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    contenr: 'Alert',
+    type: 'primary',
+    closable: false,
+    darkMode: false,
+}

package/dist/collection/components/badge/badge.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-export class Alert {
+export class Badge {
     constructor() {
         this.type = undefined;
         this.dark = false;
@@ -15,7 +15,7 @@ export class Alert {
         return `badge ${this.type || ''}`;
     }
     render() {
-        return (h("span", { key: '8947da087996ec478bcc59b0c878c203cbe4ff10', class: this.getParentClass() }, h("span", { key: 'fc50c11ce3ed7c7ffe89c386f13f8a5613ead19f', class: this.getClass() }, h("slot", { key: '3b4f74d27a93595c92acec9522e963f5fbd9af01' }))));
+        return (h("span", { key: '52a7bbad09e315c5d62a0db2d126bf0eccbf4853', class: this.getParentClass() }, h("span", { key: '677be8262e1712ff8f9f9b030b427168976d785b', class: this.getClass() }, h("slot", { key: '94dfa4f2f13463c15352139445e84757a8d38229' }))));
     }
     static get is() { return "p-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AASlD,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAE7B,SAAI,GAAa,KAAK,CAAA;KAyBzB;IAvBU,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,QAAQ;QACX,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,CAAA;IACrC,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC9B,6DAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACxB,8DAAQ,CACL,CACJ,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\ntype BadgeColor = 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Alert {\n    @Prop()\n    type?: BadgeColor = undefined\n    @Prop()\n    dark?: boolean = false\n\n    public getParentClass() {\n        let cssClass = `papier`\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public getClass() {\n        return `badge ${this.type || ''}`\n    }\n\n    render() {\n        return (\n            <span class={this.getParentClass()}>\n                <span class={this.getClass()}>\n                    <slot />\n                </span>\n            </span>\n        )\n    }\n}\n"]}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AASlD,MAAM,OAAO,KAAK;IALlB;QAOI,SAAI,GAAgB,SAAS,CAAA;QAE7B,SAAI,GAAa,KAAK,CAAA;KAyBzB;IAvBU,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;QACrC,CAAC;QAED,OAAO,QAAQ,CAAA;IACnB,CAAC;IAEM,QAAQ;QACX,OAAO,SAAS,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,CAAA;IACrC,CAAC;IAED,MAAM;QACF,OAAO,CACH,6DAAM,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE;YAC9B,6DAAM,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;gBACxB,8DAAQ,CACL,CACJ,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core'\n\ntype BadgeColor = 'secondary' | 'success' | 'warning' | 'danger'\n\n@Component({\n    tag: 'p-badge',\n    styleUrl: 'badge.scss',\n    shadow: true,\n})\nexport class Badge {\n    @Prop()\n    type?: BadgeColor = undefined\n    @Prop()\n    dark?: boolean = false\n\n    public getParentClass() {\n        let cssClass = `papier`\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n\n    public getClass() {\n        return `badge ${this.type || ''}`\n    }\n\n    render() {\n        return (\n            <span class={this.getParentClass()}>\n                <span class={this.getClass()}>\n                    <slot />\n                </span>\n            </span>\n        )\n    }\n}\n"]}

package/dist/collection/components/badge/stories/badge.stories.js

@@ -0,0 +1,45 @@
+export default {
+    title: 'Components/Badge/Playground',
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['success', 'secondary', 'warning', 'danger'],
+            name: 'checked-background',
+        },
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+}
+
+const Template = (args) => {
+    const content = `
+        <h3 
+            style="font-size : 40px; color: ${args.darkMode ? 'white' : 'black'}"
+        >
+            PapierJS : <p-badge
+                type="${args.type}"
+                ${args.darkMode ? 'dark' : ''}
+            >
+                ${args.contenr}
+            </p-badge>
+        </h3>
+    `
+
+    return args.darkMode
+        ? `
+        <div style="padding: 10px; box-sizing: border-box; width: 100%; background: #41403e">
+            ${content}
+        </div>
+    `
+        : content
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    contenr: 'Alert',
+    type: 'success',
+    darkMode: false,
+}