@politiet/sheriff-web-components 0.0.1

package/README.md

@@ -0,0 +1,53 @@
+# Sheriff Design System Web Component Library
+
+## Alpha Release
+
+This library is currently in an early alpha stage and should be considered highly experimental and unstable. It's under active development, and we're working to add more components and improve stability.
+
+## ⚠️ Disclaimer
+
+This version is intended for testing and feedback purposes only. It is not suitable for production use at this stage. Features and components may change significantly. We appreciate your interest and contributions, but please use it with caution.
+
+### Prerequisites
+
+To visually adhere to the Sheriff design system you need to include the Roboto font in your application.
+
+### Installation
+
+```bash
+# Using npm
+npm install @politiet/sheriff-web-components --save
+
+# Using yarn
+yarn add @politiet/sheriff-web-components
+```
+
+Note: As this is an alpha release, expect frequent updates and breaking changes. We recommend using it for experimental projects only.
+
+### Usage
+
+To start using the components in your project, import them as follows:
+
+All components:
+
+```javascript
+import '@politiet/sheriff-web-components';
+```
+
+Spesific components:
+
+```javascript
+import '@politiet/sheriff-web-components/dist/s-button';
+```
+
+## Contributing
+
+We welcome contributions! Whether it's reporting bugs, feature requests, or contributing code, please feel free to reach out.
+
+## Feedback
+
+Your feedback is invaluable to us. Please submit any feedback or issues you encounter through our GitHub issue tracker.
+
+## License
+
+This project is licensed under the ISC License.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './s-button/s-button';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from './s-button/s-button';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './s-button/s-button';\n"]}

package/dist/s-button/s-button.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class SButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name: string;
+    type: 'button' | 'submit' | 'reset';
+    variant: 'primary' | 'secondary' | 'tertiary';
+    size: 'large' | 'medium' | 'small';
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        's-button': SButton;
+    }
+}
+//# sourceMappingURL=s-button.d.ts.map

package/dist/s-button/s-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-button.d.ts","sourceRoot":"","sources":["../../src/s-button/s-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG/C,OAAO,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAa;IAG1D,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAG7C,QAAQ,UAAS;IAER,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/s-button/s-button.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './s-button.styles';
+let SButton = class SButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'button';
+        this.variant = 'primary';
+        this.size = 'large';
+        this.disabled = false;
+    }
+    render() {
+        const buttonClasses = {
+            's-button--secondary': this.variant === 'secondary',
+            's-button--tertiary': this.variant === 'tertiary',
+            's-button--medium': this.size === 'medium',
+            's-button--small': this.size === 'small',
+        };
+        return html `
+			<button
+				class="s-button${classMap(buttonClasses)}"
+				type="${this.type}"
+				name="${this.name}"
+				?disabled="${this.disabled}"
+			>
+				<slot></slot>
+			</button>
+		`;
+    }
+};
+// Styling
+SButton.styles = [styles];
+__decorate([
+    property({ type: String })
+], SButton.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], SButton.prototype, "type", void 0);
+__decorate([
+    property({ type: String })
+], SButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], SButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], SButton.prototype, "disabled", void 0);
+SButton = __decorate([
+    customElement('s-button')
+], SButton);
+export { SButton };
+//# sourceMappingURL=s-button.js.map

package/dist/s-button/s-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-button.js","sourceRoot":"","sources":["../../src/s-button/s-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAGpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QASN,SAAI,GAAkC,QAAQ,CAAC;QAG/C,YAAO,GAAyC,SAAS,CAAC;QAG1D,SAAI,GAAiC,OAAO,CAAC;QAG7C,aAAQ,GAAG,KAAK,CAAC;IAqBlB,CAAC;IAnBS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,qBAAqB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YACnD,oBAAoB,EAAE,IAAI,CAAC,OAAO,KAAK,UAAU;YACjD,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC1C,iBAAiB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SACxC,CAAC;QAEF,OAAO,IAAI,CAAA;;qBAEQ,QAAQ,CAAC,aAAa,CAAC;YAChC,IAAI,CAAC,IAAI;YACT,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;;;;GAI3B,CAAC;IACH,CAAC;;AArCD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACoB;AAG/C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAC+B;AAG1D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACkB;AAG7C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;yCACX;AAlBL,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAuCnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './s-button.styles';\n\n@customElement('s-button')\nexport class SButton extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tname!: string;\n\n\t@property({ type: String })\n\ttype: 'button' | 'submit' | 'reset' = 'button';\n\n\t@property({ type: String })\n\tvariant: 'primary' | 'secondary' | 'tertiary' = 'primary';\n\n\t@property({ type: String })\n\tsize: 'large' | 'medium' | 'small' = 'large';\n\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\toverride render() {\n\t\tconst buttonClasses = {\n\t\t\t's-button--secondary': this.variant === 'secondary',\n\t\t\t's-button--tertiary': this.variant === 'tertiary',\n\t\t\t's-button--medium': this.size === 'medium',\n\t\t\t's-button--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`\n\t\t\t<button\n\t\t\t\tclass=\"s-button${classMap(buttonClasses)}\"\n\t\t\t\ttype=\"${this.type}\"\n\t\t\t\tname=\"${this.name}\"\n\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t>\n\t\t\t\t<slot></slot>\n\t\t\t</button>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t's-button': SButton;\n\t}\n}\n"]}

package/dist/s-button/s-button.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=s-button.styles.d.ts.map

package/dist/s-button/s-button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-button.styles.d.ts","sourceRoot":"","sources":["../../src/s-button/s-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgHlB,CAAC"}

package/dist/s-button/s-button.styles.js

@@ -0,0 +1,115 @@
+import { css } from 'lit';
+export const styles = css `
+	.s-button {
+		align-items: center;
+		display: inline-flex;
+		gap: var(--sds-spacing-3, 8px);
+		justify-content: center;
+		padding: var(--sds-spacing-3) var(--sds-spacing-4);
+
+		background-color: var(--sds-color-semantic-surface-action-default);
+		border: 2px solid var(--sds-color-semantic-border-action);
+		border-radius: var(--sds-radius-4);
+		cursor: pointer;
+
+		color: var(--sds-color-semantic-text-on-action);
+		font-family: 'Roboto';
+		font-size: 1rem;
+		font-weight: 500;
+		line-height: 1.5;
+		text-align: center;
+
+		&:focus {
+			background-color: var(--sds-color-semantic-surface-action-default);
+			outline: 2px solid var(--sds-color-semantic-surface-action-default);
+			outline-offset: 1px;
+		}
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-hover);
+			border: 2px solid var(--sds-color-semantic-surface-action-hover);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+			outline: 0;
+		}
+
+		&:disabled {
+			background-color: var(--sds-color-semantic-surface-disabled);
+			border: 2px solid var(--sds-color-semantic-surface-disabled);
+			cursor: not-allowed;
+		}
+	}
+
+	.s-button--secondary {
+		background-color: var(--sds-color-semantic-surface-action-inverted);
+		border: 2px solid var(--sds-color-semantic-border-action);
+		color: var(--sds-color-semantic-text-default);
+
+		&:focus {
+			background-color: var(--sds-color-semantic-surface-action-inverted);
+			border: 2px solid var(--sds-color-semantic-border-action);
+		}
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-subtle);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+			color: var(--sds-color-semantic-text-on-action);
+			outline: 0;
+		}
+
+		&:disabled {
+			border: 2px solid var(--sds-color-semantic-border-disabled);
+			background: var(--sds-color-semantic-surface-action-inverted);
+			color: var(--sds-color-semantic-text-disabled);
+		}
+	}
+
+	.s-button--tertiary {
+		background-color: transparent;
+		border: 2px solid transparent;
+		color: var(--sds-color-semantic-text-action-default);
+
+		&:focus {
+			background-color: transparent;
+			border: 2px solid transparent;
+			text-decoration: underline;
+		}
+
+		&:hover {
+			background-color: var(--sds-color-semantic-surface-action-subtle);
+		}
+
+		&:active {
+			background-color: var(--sds-color-semantic-surface-action-active);
+			border: 2px solid var(--sds-color-semantic-surface-action-active);
+			color: var(--sds-color-semantic-text-on-action);
+			outline: 0;
+			position: relative;
+			text-decoration: underline;
+		}
+
+		&:disabled {
+			border: 2px solid transparent;
+			background: transparent;
+			color: var(--sds-color-semantic-text-disabled);
+			text-decoration: underline;
+		}
+	}
+
+	.s-button--medium {
+		padding: var(--sds-spacing-1) var(--sds-spacing-3);
+	}
+
+	.s-button--small {
+		font-size: 0.875rem;
+		padding: 0 var(--sds-spacing-3);
+	}
+`;
+//# sourceMappingURL=s-button.styles.js.map

package/dist/s-button/s-button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"s-button.styles.js","sourceRoot":"","sources":["../../src/s-button/s-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgHxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.s-button {\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tgap: var(--sds-spacing-3, 8px);\n\t\tjustify-content: center;\n\t\tpadding: var(--sds-spacing-3) var(--sds-spacing-4);\n\n\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tborder-radius: var(--sds-radius-4);\n\t\tcursor: pointer;\n\n\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\tfont-family: 'Roboto';\n\t\tfont-size: 1rem;\n\t\tfont-weight: 500;\n\t\tline-height: 1.5;\n\t\ttext-align: center;\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-default);\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-hover);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-hover);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-disabled);\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n\n\t.s-button--secondary {\n\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\tcolor: var(--sds-color-semantic-text-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-action);\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid var(--sds-color-semantic-border-disabled);\n\t\t\tbackground: var(--sds-color-semantic-surface-action-inverted);\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t}\n\t}\n\n\t.s-button--tertiary {\n\t\tbackground-color: transparent;\n\t\tborder: 2px solid transparent;\n\t\tcolor: var(--sds-color-semantic-text-action-default);\n\n\t\t&:focus {\n\t\t\tbackground-color: transparent;\n\t\t\tborder: 2px solid transparent;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-subtle);\n\t\t}\n\n\t\t&:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-active);\n\t\t\tborder: 2px solid var(--sds-color-semantic-surface-action-active);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\t\t\toutline: 0;\n\t\t\tposition: relative;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tborder: 2px solid transparent;\n\t\t\tbackground: transparent;\n\t\t\tcolor: var(--sds-color-semantic-text-disabled);\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n\n\t.s-button--medium {\n\t\tpadding: var(--sds-spacing-1) var(--sds-spacing-3);\n\t}\n\n\t.s-button--small {\n\t\tfont-size: 0.875rem;\n\t\tpadding: 0 var(--sds-spacing-3);\n\t}\n`;\n"]}

package/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@politiet/sheriff-web-components",
+	"version": "0.0.1",
+	"description": "Sheriff Design System Web Components Library",
+	"main": "dist/sheriff.js",
+	"module": "dist/sheriff.js",
+	"type": "module",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"author": "Politiets IT-enhet",
+	"license": "ISC"
+}