@infineon/design-system 0.0.0-stage → 41.11.0

package/dist/collection/components/link/link.css

@@ -0,0 +1,107 @@
+:host {
+  display: inline-flex;
+}
+
+.link {
+  display: inline-flex;
+  align-items: center;
+  font-weight: 400;
+  font-size: 1rem;
+  text-decoration: none;
+  color: #0a8276;
+  gap: 8px;
+  font-family: var(--ifx-font-family);
+}
+.link:visited {
+  color: #06534b;
+}
+.link:hover {
+  cursor: pointer;
+}
+.link:focus {
+  outline-width: 2px;
+  outline-style: solid;
+  outline-color: #0A8276;
+  outline-offset: 4px;
+  border-radius: 1px;
+}
+.link.bold {
+  font-weight: 600;
+}
+.link.bold:hover {
+  text-decoration: underline;
+}
+.link.bold:active {
+  color: #08665C;
+  font-style: normal;
+  font-weight: 600;
+  text-decoration: underline;
+}
+.link.underlined {
+  text-decoration: underline;
+  text-decoration-color: #0a8276;
+  color: #1D1D1D;
+  text-underline-offset: 8px;
+}
+.link.underlined:hover {
+  color: #0a8276;
+}
+.link.underlined:active {
+  color: #0A8276;
+}
+.link.underlined:disabled, .link.underlined.disabled {
+  text-decoration-color: #bfbbbb;
+}
+.link.title {
+  text-decoration: none;
+  font-weight: 600;
+  color: #1D1D1D;
+}
+.link.title:hover {
+  color: #0a8276;
+}
+.link.title:active {
+  color: #08665C;
+}
+.link.title:visited {
+  color: #06534b;
+}
+.link.menu {
+  font-weight: 400;
+  font-style: normal;
+  line-height: 26px;
+  color: #1D1D1D;
+}
+.link.menu:hover {
+  color: #0a8276;
+}
+.link.menu:active {
+  color: #08665C;
+}
+.link.menu:visited {
+  color: #06534b;
+}
+.link.small {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.link.medium {
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+.link.large {
+  font-size: 1.125rem;
+  line-height: 1.625rem;
+}
+.link.extraLarge {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.link.underline {
+  text-decoration: underline;
+}
+.link:disabled, .link.disabled {
+  color: #bfbbbb;
+  cursor: default;
+  pointer-events: none;
+}

package/dist/collection/components/link/link.js

@@ -0,0 +1,298 @@
+import { h } from "@stencil/core";
+import classNames from "classnames";
+import { isNestedInIfxComponent } from "../..//shared/utils/dom-utils";
+import { detectFramework } from "../..//shared/utils/framework-detection";
+import { trackComponent } from "../../shared/utils/tracking";
+import { sanitizeHref } from "../../shared/utils/url-utils";
+export class Link {
+    el;
+    /**
+     * URL the link navigates to.
+     * @default undefined
+     */
+    href = undefined;
+    /**
+     * Target window for the link.
+     * @default "_self"
+     */
+    target = "_self";
+    /**
+     * Visual style variant of the link.
+     * @default "bold"
+     */
+    variant = "bold";
+    /**
+     * Font size of the link.
+     * @default "m"
+     */
+    size = "m";
+    /**
+     * Disables interaction.
+     * @default false
+     */
+    disabled = false;
+    /**
+     * Optional filename or download hint for the linked resource.
+     * @default undefined
+     */
+    download;
+    /**
+     * Accessible label announced by assistive technologies.
+     * @default undefined
+     */
+    ariaLabelText;
+    internalHref = "";
+    internalTarget = "";
+    internalVariant = "";
+    setInternalStates() {
+        if (this.href) {
+            this.internalHref = this.href.trim();
+        }
+        else {
+            this.internalHref = undefined;
+        }
+        this.internalTarget = this.target.trim();
+        this.internalVariant = this.variant.trim().toLowerCase();
+    }
+    componentWillRender() {
+        this.setInternalStates();
+    }
+    async componentDidLoad() {
+        if (!isNestedInIfxComponent(this.el)) {
+            const framework = detectFramework();
+            trackComponent("ifx-link", await framework);
+        }
+    }
+    render() {
+        return (h("a", { key: 'c692c2dc355a47c3ddd712efb76a271c6bff0e39', tabindex: "0", "aria-label": this.ariaLabelText, "aria-disabled": this.disabled || !this.internalHref, href: this.disabled ? undefined : sanitizeHref(this.internalHref), download: this.download, target: this.internalTarget, class: this.linkClassNames() }, h("slot", { key: '8d36ec29095299c00ec3dd180c4f37b70149e624' })));
+    }
+    getSizeClass() {
+        const small = this.size === "s" ? "small" : null;
+        const medium = this.size === "m" ? "medium" : null;
+        const large = this.size === "l" ? "large" : null;
+        const extraLarge = this.size === "xl" ? "extraLarge" : null;
+        if (small) {
+            return small;
+        }
+        else if (medium) {
+            return medium;
+        }
+        else if (large) {
+            return large;
+        }
+        else if (extraLarge && this.internalVariant === "underlined") {
+            return "large";
+        }
+        else if (extraLarge && this.internalVariant !== "underlined") {
+            return extraLarge;
+        }
+        else
+            return "";
+    }
+    getVariantClass() {
+        const bold = this.internalVariant === "bold" ? "bold" : null;
+        const title = this.internalVariant === "title" ? "title" : null;
+        const underlined = this.internalVariant === "underlined" ? "underlined" : null;
+        const menu = this.internalVariant === "menu" ? "menu" : null;
+        if (bold) {
+            return bold;
+        }
+        else if (title) {
+            return title;
+        }
+        else if (underlined) {
+            return underlined;
+        }
+        else if (menu) {
+            return menu;
+        }
+        else
+            return bold;
+    }
+    linkClassNames() {
+        return classNames("link", "primary", this.getVariantClass(), this.getSizeClass(), this.disabled ? "disabled" : "");
+    }
+    static get is() { return "ifx-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "URL the link navigates to."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href",
+                "defaultValue": "undefined"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"_self\""
+                        }],
+                    "text": "Target window for the link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target",
+                "defaultValue": "\"_self\""
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"underlined\" | \"bold\" | \"title\" | \"menu\"",
+                    "resolved": "\"bold\" | \"menu\" | \"title\" | \"underlined\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"bold\""
+                        }],
+                    "text": "Visual style variant of the link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "\"bold\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"s\" | \"m\" | \"l\" | \"xl\"",
+                    "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"m\""
+                        }],
+                    "text": "Font size of the link."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"m\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Disables interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "download": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Optional filename or download hint for the linked resource."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "download"
+            },
+            "ariaLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "undefined"
+                        }],
+                    "text": "Accessible label announced by assistive technologies."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-text"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "internalHref": {},
+            "internalTarget": {},
+            "internalVariant": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/modal/modal.css

@@ -0,0 +1,196 @@
+:host {
+  display: block;
+}
+
+.modal-container {
+  display: none;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1060;
+  overflow-y: auto;
+  font-family: var(--ifx-font-family);
+}
+
+.modal-container.open {
+  display: flex;
+}
+
+.modal-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #1d1d1d;
+  opacity: 0.5;
+  z-index: 0;
+}
+
+.modal-content-container {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  width: 90%;
+  min-height: 218px;
+  background-color: #fff;
+  border-radius: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+  align-items: stretch;
+}
+
+.modal-content-container.no-overflow {
+  overflow: hidden;
+}
+.modal-content-container.no-overflow .modal-body {
+  overflow-y: auto;
+}
+
+/* Add desktop size here */
+@media screen and (min-width: 768px) {
+  .modal-content-container {
+    width: 540px;
+    min-height: 132px;
+  }
+  .modal-content-container.m, .modal-content-container.l, .modal-content-container.s {
+    width: 90%;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .modal-content-container.s {
+    width: 47vw;
+  }
+  .modal-content-container.m {
+    width: 63vw;
+  }
+  .modal-content-container.l {
+    width: 80%;
+  }
+}
+.modal-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: 90vh;
+}
+
+.modal-icon-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  background-color: #0a8276;
+  align-self: stretch;
+}
+.modal-icon-container.danger {
+  background-color: #cd002f;
+}
+.modal-icon-container ifx-icon {
+  color: #ffffff;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px;
+  min-height: 76px;
+  max-height: 105px;
+  box-sizing: border-box;
+  border-radius: 1px 1px 0px 0px;
+  border-bottom: 1px solid #eeeded;
+}
+
+.modal-caption {
+  max-height: 56px;
+  display: -webkit-box;
+  overflow: hidden;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.modal-header h2 {
+  margin: 0;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 28px;
+}
+
+.modal-header button {
+  background: none;
+  border: none;
+  font-size: 1.5em;
+  padding: 0;
+  cursor: pointer;
+}
+
+.modal-close-button {
+  align-self: flex-start;
+  margin-right: -8px;
+}
+
+.modal-body {
+  padding: 16px 24px;
+  min-height: 56px;
+  box-sizing: border-box;
+  flex: 1;
+}
+
+.modal-footer.buttons-present ::slotted(*) {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 16px 24px 32px 16px;
+}
+
+.modal-border {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: 1.5em;
+  flex-grow: 1;
+}
+.modal-border.primary {
+  background-color: #0a8276;
+}
+.modal-border.secondary {
+  background-color: #575352;
+}
+.modal-border.danger {
+  background-color: #cd002f;
+}
+.modal-border.success {
+  background-color: #4ca460;
+}
+.modal-border.warning {
+  background-color: #e16b25;
+}
+.modal-border.orange {
+  background-color: #e16b25;
+}
+.modal-border.ocean {
+  background-color: #0a8276;
+}
+.modal-border.grey {
+  background-color: #575352;
+}
+.modal-border.grey-200 {
+  background-color: #eeeded;
+}
+.modal-border.red {
+  background-color: #cd002f;
+}
+.modal-border.green {
+  background-color: #4ca460;
+}
+.modal-border.berry {
+  background-color: #9c216e;
+}