add component formilk

Author: MatiasWorker

package.json

@@ -1,7 +1,7 @@
 {
     "name": "formilk",
     "description": "Formilk is a system of configurable components created with Atomicojs",
-    "version": "0.19.1",
+    "version": "0.20.0",
     "scripts": {
         "start": "vite --force",
         "build": "vite build --outDir docs",

src/components.ts

@@ -1,3 +1,5 @@
+export * from "./formilk/formilk";
+
 export * from "./theme/theme";
 
 export * from "./input/input";

src/formilk/formilk.tsx

@@ -0,0 +1,66 @@
+import { Props, css, c } from "atomico";
+import customElements from "../custom-elements";
+
+function formilk({ width, color1, color2, contrast }: Props<typeof formilk>) {
+    color1 = contrast ? "#fff" : color1;
+    return (
+        <host shadowDom>
+            <svg viewBox="0 0  220 70.841" width={width}>
+                <path
+                    d="M61.111 70.841a15.678 15.678 0 0 1-7.859-1.994 14.053 14.053 0 0 1-5.515-5.538 16.957 16.957 0 0 1-1.969-8.308 16.977 16.977 0 0 1 2.02-8.31 15.235 15.235 0 0 1 5.624-5.594 16.449 16.449 0 0 1 7.917-1.938 16.449 16.449 0 0 1 7.917 1.938 14.842 14.842 0 0 1 5.624 5.594 16.4 16.4 0 0 1 2.02 8.307 16.423 16.423 0 0 1-2.075 8.307 14.822 14.822 0 0 1-5.678 5.538 16.3 16.3 0 0 1-8.026 1.998Zm0-6.757a7.762 7.762 0 0 0 3.931-1.052 7.058 7.058 0 0 0 2.894-3.046 10.808 10.808 0 0 0 1.092-4.984 9.572 9.572 0 0 0-2.239-6.757 7.529 7.529 0 0 0-5.569-2.326 7.206 7.206 0 0 0-5.46 2.326 9.572 9.572 0 0 0-2.239 6.757c0 2.935.71 5.151 2.184 6.7a6.874 6.874 0 0 0 5.406 2.382ZM90.158 44.423a11.2 11.2 0 0 1 3.877-3.821 10.356 10.356 0 0 1 5.405-1.385v8.141h-2.02c-2.4 0-4.2.554-5.405 1.717-1.256 1.163-1.856 3.157-1.856 5.981v15.286h-7.645V39.66h7.644ZM142.138 39.217a12.268 12.268 0 0 1 9.009 3.434c2.239 2.326 3.385 5.538 3.385 9.692v18h-7.648V53.395a7.838 7.838 0 0 0-1.8-5.538 6.413 6.413 0 0 0-4.914-1.883 6.619 6.619 0 0 0-4.969 1.883 7.838 7.838 0 0 0-1.8 5.538v16.947h-7.643V53.395a7.838 7.838 0 0 0-1.8-5.538 6.413 6.413 0 0 0-4.914-1.883 6.457 6.457 0 0 0-4.969 1.883 7.614 7.614 0 0 0-1.856 5.538v16.947h-7.646V39.66h7.644v3.711a10.009 10.009 0 0 1 3.822-3.046 11.783 11.783 0 0 1 5.078-1.108 13.226 13.226 0 0 1 6.334 1.5 11.006 11.006 0 0 1 4.313 4.373 10.745 10.745 0 0 1 4.313-4.264 12.107 12.107 0 0 1 6.061-1.609ZM165.672 36.006a4.45 4.45 0 0 1-3.331-1.329 4.144 4.144 0 0 1-1.365-3.212 4.144 4.144 0 0 1 1.365-3.212 4.45 4.45 0 0 1 3.331-1.329 4.662 4.662 0 0 1 3.385 1.329 4.291 4.291 0 0 1 1.31 3.212 4.291 4.291 0 0 1-1.31 3.212 4.662 4.662 0 0 1-3.385 1.329Zm3.767 3.655v30.682h-7.644V39.661ZM176.974 29.359h7.644v40.983h-7.644zM210.064 70.342l-10.267-13.07v13.07h-7.644V29.363h7.644v23.316l10.156-13.016h9.937l-13.326 15.393 13.435 15.286Z"
+                    fill={color1}
+                />
+                <path
+                    d="M3.492 69.842a17.461 17.461 0 0 0 12.346-5.114 17.459 17.459 0 0 0 5.114-12.346v17.46Zm17.46-33.175h13.967v19.207a13.967 13.967 0 0 1-4.091 9.876 13.966 13.966 0 0 1-9.876 4.091Z"
+                    fill={color2}
+                />
+                <circle
+                    cx="6.984"
+                    cy="6.984"
+                    r="6.984"
+                    transform="translate(0 48.889)"
+                    fill={color2}
+                />
+                <path
+                    d="M36.666 36.667H20.952v15.714a15.713 15.713 0 0 1 15.714-15.714Zm15.715-15.715H36.666a15.713 15.713 0 0 0-15.714 15.714h15.715a15.713 15.713 0 0 0 15.714-15.714Z"
+                    fill={color1}
+                    fill-rule="evenodd"
+                />
+                <path
+                    d="M17.46 17.46v17.46a17.46 17.46 0 0 1 17.46-17.46A17.46 17.46 0 0 0 52.381 0H34.92a17.46 17.46 0 0 0-17.46 17.46Z"
+                    fill={color1}
+                    fill-rule="evenodd"
+                />
+            </svg>
+        </host>
+    );
+}
+
+formilk.props = {
+    width: {
+        type: String,
+        value: "220px",
+    },
+    color1: {
+        type: String,
+        value: "#333",
+    },
+    color2: {
+        type: String,
+        value: "#02d365",
+    },
+    contrast: {
+        type: Boolean,
+    },
+};
+
+formilk.styles = css`
+    svg {
+        max-width: 100%;
+        display: block;
+    }
+`;
+
+export const Formilk = c(formilk);
+
+customElements.define("formilk", Formilk);

src/logo.svg

@@ -1,5 +1,13 @@
 import { md } from "@atomico/stories";
-import { Button, Input, Icon, InputSwitch, Label, Theme } from "./components";
+import {
+    Formilk,
+    Button,
+    Input,
+    Icon,
+    InputSwitch,
+    Label,
+    Theme,
+} from "./components";
 
 export const meta = {
     title: "👋 Welcome",