wini-web-components 2.8.2 → 2.8.4

package/src/component/toast-noti/toast-noti.tsx

@@ -0,0 +1,22 @@
+import { Slide, toast } from 'react-toastify';
+import './toast-noti.css';
+
+export class ToastMessage {
+    static success(message: string) {
+        toast.success(message, {
+            hideProgressBar: true,
+            transition: Slide,
+            autoClose: 800,
+            theme: "colored",
+        });
+    }
+    static errors(message: string) {
+        toast.error(message, {
+            theme: "colored",
+            pauseOnHover: false,
+            hideProgressBar: true,
+            transition: Slide,
+            autoClose: 800,
+        });
+    }
+}

package/src/component/wini-icon/winicon.module.css

@@ -0,0 +1,110 @@
+.wini-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: fit-content;
+    height: fit-content;
+    padding: 0.2rem;
+    --size: 1.6rem;
+    --color: var(--neutral-text-subtitle-color);
+}
+
+.wini-icon[class~="link-icon"] {
+    --size: 'undefined';
+}
+
+.wini-icon>svg {
+    width: var(--size, inherit) !important;
+    height: var(--size, inherit) !important;
+}
+
+.wini-icon[class*="fill-icon"]>svg>*[fill^="#"] {
+    fill: var(--color, "#61616B");
+}
+
+.wini-icon[class*="outline-icon"]>svg>*[stroke^="#"] {
+    stroke: var(--color, "#61616B");
+}
+
+.wini-icon.clickable {
+    cursor: pointer;
+}
+
+.wini-icon[class~="icon-button"] {
+    border-radius: 50%;
+    background-color: var(--neutral-main-background-color);
+}
+
+.wini-icon[class~="border"] {
+    border: var(--neutral-bolder-border);
+}
+
+.wini-icon[class~="dashed"] {
+    border-style: dashed;
+}
+
+.wini-icon[class~="size64"] {
+    width: 6.4rem;
+    height: 6.4rem;
+    --size: 1.6rem;
+}
+
+.wini-icon[class~="size56"] {
+    width: 5.6rem;
+    height: 5.6rem;
+    --size: 1.6rem;
+}
+
+.wini-icon[class~="size48"] {
+    width: 4.8rem;
+    height: 4.8rem;
+    --size: 1.6rem;
+}
+
+.wini-icon[class~="size40"] {
+    width: 4rem;
+    height: 4rem;
+    --size: 1.4rem;
+}
+
+.wini-icon[class~="size32"] {
+    width: 3.2rem;
+    height: 3.2rem;
+    --size: 1.4rem;
+}
+
+.wini-icon[class~="size24"] {
+    width: 2.4rem;
+    height: 2.4rem;
+    --size: 1rem;
+}
+
+@keyframes on-open-tooltip {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+.tooltip-container {
+    position: fixed;
+    z-index: 999;
+    animation: on-open-tooltip 0.2s ease-in-out;
+    animation-fill-mode: forwards;
+}
+
+.tooltip-container>.tooltip-message {
+    color: var(--neutral-text-body-reverse-color);
+    background-color: var(--neutral-main-reverse-background-color);
+    padding: 0.4rem 1.2rem;
+    border-radius: 0.8rem;
+    max-width: 21.2rem;
+    text-align: center;
+}
+
+.wini-icon[class~="icon-button"]:hover {
+    background-color: var(--neutral-hover-background-color);
+}