@weni/unnnic-system 1.3.3 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "main": "./dist/unnnic.common.js",
   "files": [
     "dist/*",

package/src/assets/icons/arrow-redo.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.7188 3.4375C14.8438 3.4375 14.9619 3.48625 15.05 3.575L17.8625 6.3875C17.9063 6.43125 17.9406 6.48313 17.9644 6.54063C17.9663 6.545 17.9681 6.55063 17.97 6.55563C17.9894 6.60625 18 6.66188 18 6.71875C18 6.77438 17.99 6.82875 17.97 6.88188C17.9675 6.88875 17.965 6.89563 17.9625 6.90125C17.9406 6.95438 17.9063 7.00625 17.8625 7.05L15.05 9.8625C14.9613 9.95125 14.8438 10 14.7188 10C14.5938 10 14.4756 9.95125 14.3875 9.8625C14.2988 9.77438 14.25 9.65625 14.25 9.53125C14.25 9.40625 14.2988 9.28813 14.3875 9.2L16.4 7.1875L8.15625 7.1875C5.83 7.1875 3.9375 9.08 3.9375 11.4062C3.9375 13.7325 5.83 15.625 8.15625 15.625L11.9063 15.625C12.165 15.625 12.375 15.835 12.375 16.0937C12.375 16.3525 12.165 16.5625 11.9063 16.5625L8.15625 16.5625C5.31313 16.5625 3 14.2494 3 11.4062C3 8.56313 5.31313 6.25 8.15625 6.25L16.3994 6.25L14.3869 4.2375C14.2988 4.14938 14.25 4.03125 14.25 3.90625C14.25 3.78125 14.2988 3.66313 14.3875 3.575C14.4756 3.48625 14.5938 3.4375 14.7188 3.4375Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/arrow-undo.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.28125 3.4375C6.15625 3.4375 6.03812 3.48625 5.95 3.575L3.1375 6.3875C3.09375 6.43125 3.05937 6.48313 3.03562 6.54063C3.03375 6.545 3.03187 6.55063 3.03 6.55563C3.01062 6.60625 3 6.66188 3 6.71875C3 6.77438 3.01 6.82875 3.03 6.88188C3.0325 6.88875 3.035 6.89563 3.0375 6.90125C3.05937 6.95438 3.09375 7.00625 3.1375 7.05L5.95 9.8625C6.03875 9.95125 6.15625 10 6.28125 10C6.40625 10 6.52437 9.95125 6.6125 9.8625C6.70125 9.77438 6.75 9.65625 6.75 9.53125C6.75 9.40625 6.70125 9.28813 6.6125 9.2L4.6 7.1875L12.8437 7.1875C15.17 7.1875 17.0625 9.08 17.0625 11.4062C17.0625 13.7325 15.17 15.625 12.8437 15.625L9.09375 15.625C8.835 15.625 8.625 15.835 8.625 16.0937C8.625 16.3525 8.835 16.5625 9.09375 16.5625L12.8437 16.5625C15.6869 16.5625 18 14.2494 18 11.4062C18 8.56313 15.6869 6.25 12.8437 6.25L4.60062 6.25L6.61312 4.2375C6.70125 4.14938 6.75 4.03125 6.75 3.90625C6.75 3.78125 6.70125 3.66313 6.6125 3.575C6.52437 3.48625 6.40625 3.4375 6.28125 3.4375Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/email-action-unread-1.svg

@@ -1,6 +1,6 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0)">
-<path d="M8.00003 31.0002C7.20459 30.9995 6.44194 30.6832 5.87949 30.1208C5.31703 29.5583 5.00074 28.7957 5.00003 28.0002V12.0002C4.99699 11.3152 5.23166 10.6503 5.66403 10.1189L5.6947 10.0829C5.97527 9.74354 6.32748 9.47046 6.72605 9.28327C7.12462 9.09609 7.55969 8.99944 8.00003 9.00025H32C32.4501 8.99985 32.8944 9.10094 33.3 9.296C33.7056 9.49107 34.062 9.77508 34.3427 10.1269L34.3667 10.1616C34.7813 10.6936 35 11.3282 35 12.0002V28.0002C34.9993 28.7957 34.683 29.5583 34.1205 30.1208C33.5581 30.6832 32.7954 30.9995 32 31.0002H8.00003ZM7.00003 28.0002C7.00003 28.5522 7.44803 29.0002 8.00003 29.0002H32C32.2652 29.0002 32.5196 28.8949 32.7071 28.7073C32.8946 28.5198 33 28.2654 33 28.0002V12.4162L23.2987 19.8776C22.3519 20.6031 21.1928 20.9972 20 20.9989C18.812 20.9989 17.64 20.6002 16.7014 19.8776L7.00003 12.4162V28.0002ZM17.92 18.2922C18.512 18.7482 19.2507 18.9989 20 18.9989C20.7493 18.9989 21.4867 18.7482 22.0787 18.2922L31.56 10.9989H8.43869L17.92 18.2922Z" fill="#3B414D"/>
+<path d="M8.00003 31.0002C7.20459 30.9995 6.44194 30.6832 5.87949 30.1208C5.31703 29.5583 5.00074 28.7957 5.00003 28.0002V12.0002C4.99699 11.3152 5.23166 10.6503 5.66403 10.1189L5.6947 10.0829C5.97527 9.74354 6.32748 9.47046 6.72605 9.28327C7.12462 9.09609 7.55969 8.99944 8.00003 9.00025H32C32.4501 8.99985 32.8944 9.10094 33.3 9.296C33.7056 9.49107 34.062 9.77508 34.3427 10.1269L34.3667 10.1616C34.7813 10.6936 35 11.3282 35 12.0002V28.0002C34.9993 28.7957 34.683 29.5583 34.1205 30.1208C33.5581 30.6832 32.7954 30.9995 32 31.0002H8.00003ZM7.00003 28.0002C7.00003 28.5522 7.44803 29.0002 8.00003 29.0002H32C32.2652 29.0002 32.5196 28.8949 32.7071 28.7073C32.8946 28.5198 33 28.2654 33 28.0002V12.4162L23.2987 19.8776C22.3519 20.6031 21.1928 20.9972 20 20.9989C18.812 20.9989 17.64 20.6002 16.7014 19.8776L7.00003 12.4162V28.0002ZM17.92 18.2922C18.512 18.7482 19.2507 18.9989 20 18.9989C20.7493 18.9989 21.4867 18.7482 22.0787 18.2922L31.56 10.9989H8.43869L17.92 18.2922Z" fill="#3B414D" class="primary" />
 </g>
 <defs>
 <clipPath id="clip0">

package/src/assets/icons/text-bold.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.34375 17.5C5.085 17.5 4.875 17.29 4.875 17.0312C4.875 16.7725 5.085 16.5625 5.34375 16.5625H6.75V3.4375H5.34375C5.085 3.4375 4.875 3.2275 4.875 2.96875C4.875 2.71 5.085 2.5 5.34375 2.5H11.9062C13.7156 2.5 15.1875 3.97187 15.1875 5.78125C15.1875 6.95937 14.5438 8.045 13.5419 8.62437C15.1063 9.41437 16.125 11.0369 16.125 12.8125C16.125 15.3969 14.0219 17.5 11.4375 17.5H5.34375ZM11.4375 16.5625C13.505 16.5625 15.1875 14.88 15.1875 12.8125C15.1875 10.745 13.505 9.0625 11.4375 9.0625H7.6875V16.5625H11.4375ZM11.9062 8.125C13.1988 8.125 14.25 7.07375 14.25 5.78125C14.25 4.48875 13.1988 3.4375 11.9062 3.4375H7.6875V8.125H11.9062Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/text-center.svg

@@ -0,0 +1,7 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.40625 4.84375C4.1475 4.84375 3.9375 4.63375 3.9375 4.375C3.9375 4.11625 4.1475 3.90625 4.40625 3.90625H16.5938C16.8525 3.90625 17.0625 4.11625 17.0625 4.375C17.0625 4.63375 16.8525 4.84375 16.5938 4.84375H4.40625Z" fill="#9CACCC"/>
+<path d="M6.28125 7.65625C6.0225 7.65625 5.8125 7.44625 5.8125 7.1875C5.8125 6.92875 6.0225 6.71875 6.28125 6.71875H14.7188C14.9775 6.71875 15.1875 6.92875 15.1875 7.1875C15.1875 7.44625 14.9775 7.65625 14.7188 7.65625H6.28125Z" fill="#9CACCC"/>
+<path d="M3.46875 10.4688C3.21 10.4688 3 10.2588 3 10C3 9.74125 3.21 9.53125 3.46875 9.53125H17.5312C17.79 9.53125 18 9.74125 18 10C18 10.2588 17.79 10.4688 17.5312 10.4688H3.46875Z" fill="#9CACCC"/>
+<path d="M6.28125 13.2812C6.0225 13.2812 5.8125 13.0712 5.8125 12.8125C5.8125 12.5537 6.0225 12.3438 6.28125 12.3438H14.7188C14.9775 12.3438 15.1875 12.5537 15.1875 12.8125C15.1875 13.0712 14.9775 13.2812 14.7188 13.2812H6.28125Z" fill="#9CACCC"/>
+<path d="M4.40625 16.0938C4.1475 16.0938 3.9375 15.8838 3.9375 15.625C3.9375 15.3662 4.1475 15.1562 4.40625 15.1562H16.5938C16.8525 15.1562 17.0625 15.3662 17.0625 15.625C17.0625 15.8838 16.8525 16.0938 16.5938 16.0938H4.40625Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/text-italic.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.46875 17.5C3.21 17.5 3 17.29 3 17.0312C3 16.7725 3.21 16.5625 3.46875 16.5625H6.46875L13.4688 3.4375H10.9688C10.71 3.4375 10.5 3.2275 10.5 2.96875C10.5 2.71 10.71 2.5 10.9688 2.5H17.5312C17.79 2.5 18 2.71 18 2.96875C18 3.2275 17.79 3.4375 17.5312 3.4375H14.5312L7.53125 16.5625H10.0312C10.29 16.5625 10.5 16.7725 10.5 17.0312C10.5 17.29 10.29 17.5 10.0312 17.5H3.46875Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/text-justified.svg

@@ -0,0 +1,7 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.46875 4.84375C3.21 4.84375 3 4.63375 3 4.375C3 4.11625 3.21 3.90625 3.46875 3.90625H17.5312C17.79 3.90625 18 4.11625 18 4.375C18 4.63375 17.79 4.84375 17.5312 4.84375H3.46875Z" fill="#9CACCC"/>
+<path d="M3.46875 7.65625C3.21 7.65625 3 7.44625 3 7.1875C3 6.92875 3.21 6.71875 3.46875 6.71875H17.5312C17.79 6.71875 18 6.92875 18 7.1875C18 7.44625 17.79 7.65625 17.5312 7.65625H3.46875Z" fill="#9CACCC"/>
+<path d="M3.46875 10.4688C3.21 10.4688 3 10.2588 3 10C3 9.74125 3.21 9.53125 3.46875 9.53125H17.5312C17.79 9.53125 18 9.74125 18 10C18 10.2588 17.79 10.4688 17.5312 10.4688H3.46875Z" fill="#9CACCC"/>
+<path d="M3.46875 13.2812C3.21 13.2812 3 13.0713 3 12.8125C3 12.5538 3.21 12.3438 3.46875 12.3438H17.5312C17.79 12.3438 18 12.5538 18 12.8125C18 13.0713 17.79 13.2812 17.5312 13.2812H3.46875Z" fill="#9CACCC"/>
+<path d="M3.46875 16.0938C3.21 16.0938 3 15.8838 3 15.625C3 15.3662 3.21 15.1562 3.46875 15.1562H14.7188C14.9775 15.1562 15.1875 15.3662 15.1875 15.625C15.1875 15.8838 14.9775 16.0938 14.7188 16.0938H3.46875Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/text-left.svg

@@ -0,0 +1,7 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.46875 4.84375C3.21 4.84375 3 4.63375 3 4.375C3 4.11625 3.21 3.90625 3.46875 3.90625H16.5938C16.8525 3.90625 17.0625 4.11625 17.0625 4.375C17.0625 4.63375 16.8525 4.84375 16.5938 4.84375H3.46875Z" fill="#9CACCC"/>
+<path d="M3.46875 7.65625C3.21 7.65625 3 7.44625 3 7.1875C3 6.92875 3.21 6.71875 3.46875 6.71875H14.7188C14.9775 6.71875 15.1875 6.92875 15.1875 7.1875C15.1875 7.44625 14.9775 7.65625 14.7188 7.65625H3.46875Z" fill="#9CACCC"/>
+<path d="M3.46875 10.4688C3.21 10.4688 3 10.2588 3 10C3 9.74125 3.21 9.53125 3.46875 9.53125H17.5312C17.79 9.53125 18 9.74125 18 10C18 10.2588 17.79 10.4688 17.5312 10.4688H3.46875Z" fill="#9CACCC"/>
+<path d="M3.46875 13.2812C3.21 13.2812 3 13.0712 3 12.8125C3 12.5537 3.21 12.3438 3.46875 12.3438H14.7188C14.9775 12.3438 15.1875 12.5537 15.1875 12.8125C15.1875 13.0712 14.9775 13.2812 14.7188 13.2812H3.46875Z" fill="#9CACCC"/>
+<path d="M3.46875 16.0938C3.21 16.0938 3 15.8838 3 15.625C3 15.3662 3.21 15.1562 3.46875 15.1562H16.5938C16.8525 15.1562 17.0625 15.3662 17.0625 15.625C17.0625 15.8838 16.8525 16.0938 16.5938 16.0938H3.46875Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/text-right.svg

@@ -0,0 +1,7 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.40625 4.84375C4.1475 4.84375 3.9375 4.63375 3.9375 4.375C3.9375 4.11625 4.1475 3.90625 4.40625 3.90625H17.5312C17.79 3.90625 18 4.11625 18 4.375C18 4.63375 17.79 4.84375 17.5312 4.84375H4.40625Z" fill="#9CACCC"/>
+<path d="M6.28125 7.65625C6.0225 7.65625 5.8125 7.44625 5.8125 7.1875C5.8125 6.92875 6.0225 6.71875 6.28125 6.71875H17.5312C17.79 6.71875 18 6.92875 18 7.1875C18 7.44625 17.79 7.65625 17.5312 7.65625H6.28125Z" fill="#9CACCC"/>
+<path d="M3.46875 10.4688C3.21 10.4688 3 10.2588 3 10C3 9.74125 3.21 9.53125 3.46875 9.53125H17.5312C17.79 9.53125 18 9.74125 18 10C18 10.2588 17.79 10.4688 17.5312 10.4688H3.46875Z" fill="#9CACCC"/>
+<path d="M6.28125 13.2812C6.0225 13.2812 5.8125 13.0712 5.8125 12.8125C5.8125 12.5537 6.0225 12.3438 6.28125 12.3438H17.5312C17.79 12.3438 18 12.5537 18 12.8125C18 13.0712 17.79 13.2812 17.5312 13.2812H6.28125Z" fill="#9CACCC"/>
+<path d="M4.40625 16.0938C4.1475 16.0938 3.9375 15.8838 3.9375 15.625C3.9375 15.3662 4.1475 15.1562 4.40625 15.1562H17.5312C17.79 15.1562 18 15.3662 18 15.625C18 15.8838 17.79 16.0938 17.5312 16.0938H4.40625Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/text-underline.svg

@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.46875 17.5C3.21 17.5 3 17.29 3 17.0312C3 16.7725 3.21 16.5625 3.46875 16.5625H17.5312C17.79 16.5625 18 16.7725 18 17.0312C18 17.29 17.79 17.5 17.5312 17.5H3.46875Z" fill="#9CACCC"/>
+<path d="M10.5 14.6888C7.91562 14.6888 5.8125 12.5856 5.8125 10.0012V3.4375H5.34375C5.085 3.4375 4.875 3.2275 4.875 2.96875C4.875 2.71 5.085 2.5 5.34375 2.5H7.21875C7.4775 2.5 7.6875 2.71 7.6875 2.96875C7.6875 3.2275 7.4775 3.4375 7.21875 3.4375H6.75V10.0012C6.75 12.0688 8.4325 13.7513 10.5 13.7513C12.5675 13.7513 14.25 12.0688 14.25 10.0012V3.4375H13.7812C13.5225 3.4375 13.3125 3.2275 13.3125 2.96875C13.3125 2.71 13.5225 2.5 13.7812 2.5H15.6562C15.915 2.5 16.125 2.71 16.125 2.96875C16.125 3.2275 15.915 3.4375 15.6562 3.4375H15.1875V10.0012C15.1875 12.5856 13.0844 14.6888 10.5 14.6888Z" fill="#9CACCC"/>
+</svg>

package/src/assets/icons/unordered-list.svg

@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.875 6.25C3.84125 6.25 3 5.40875 3 4.375C3 3.34125 3.84125 2.5 4.875 2.5C5.90875 2.5 6.75 3.34125 6.75 4.375C6.75 5.40875 5.90875 6.25 4.875 6.25ZM4.875 3.4375C4.35812 3.4375 3.9375 3.85812 3.9375 4.375C3.9375 4.89188 4.35812 5.3125 4.875 5.3125C5.39188 5.3125 5.8125 4.89188 5.8125 4.375C5.8125 3.85812 5.39188 3.4375 4.875 3.4375Z" fill="#9CACCC"/>
+<path d="M4.875 11.875C3.84125 11.875 3 11.0338 3 10C3 8.96625 3.84125 8.125 4.875 8.125C5.90875 8.125 6.75 8.96625 6.75 10C6.75 11.0338 5.90875 11.875 4.875 11.875ZM4.875 9.0625C4.35812 9.0625 3.9375 9.48312 3.9375 10C3.9375 10.5169 4.35812 10.9375 4.875 10.9375C5.39188 10.9375 5.8125 10.5169 5.8125 10C5.8125 9.48312 5.39188 9.0625 4.875 9.0625Z" fill="#9CACCC"/>
+<path d="M4.875 17.5C3.84125 17.5 3 16.6588 3 15.625C3 14.5912 3.84125 13.75 4.875 13.75C5.90875 13.75 6.75 14.5912 6.75 15.625C6.75 16.6588 5.90875 17.5 4.875 17.5ZM4.875 14.6875C4.35812 14.6875 3.9375 15.1081 3.9375 15.625C3.9375 16.1419 4.35812 16.5625 4.875 16.5625C5.39188 16.5625 5.8125 16.1419 5.8125 15.625C5.8125 15.1081 5.39188 14.6875 4.875 14.6875Z" fill="#9CACCC"/>
+<path d="M8.15625 5.3125C7.8975 5.3125 7.6875 5.1025 7.6875 4.84375C7.6875 4.585 7.8975 4.375 8.15625 4.375H17.5312C17.79 4.375 18 4.585 18 4.84375C18 5.1025 17.79 5.3125 17.5312 5.3125H8.15625Z" fill="#9CACCC"/>
+<path d="M8.15625 10.9375C7.8975 10.9375 7.6875 10.7275 7.6875 10.4688C7.6875 10.21 7.8975 10 8.15625 10H17.5312C17.79 10 18 10.21 18 10.4688C18 10.7275 17.79 10.9375 17.5312 10.9375H8.15625Z" fill="#9CACCC"/>
+<path d="M8.15625 16.5625C7.8975 16.5625 7.6875 16.3525 7.6875 16.0938C7.6875 15.835 7.8975 15.625 8.15625 15.625H17.5312C17.79 15.625 18 15.835 18 16.0938C18 16.3525 17.79 16.5625 17.5312 16.5625H8.15625Z" fill="#9CACCC"/>
+</svg>

package/src/components/Button/ButtonIcon.vue

@@ -1,11 +1,11 @@
 <template>
   <button
-    :class="['button-icon', size]"
+    :class="['button-icon', size, type]"
     v-on="$listeners"
   >
     <unnnic-icon
       :icon="icon"
-      scheme="neutral-darkest"
+      :scheme="iconScheme"
       size="ant"
     ></unnnic-icon>
   </button>
@@ -20,6 +20,11 @@ export default {
   },
 
   props: {
+    type: {
+      type: String,
+      default: 'secondary',
+    },
+
     size: {
       type: String,
       required: true,
@@ -33,6 +38,16 @@ export default {
       required: true,
     },
   },
+
+  computed: {
+    iconScheme() {
+      if (this.type === 'primary') {
+        return 'neutral-snow';
+      }
+
+      return 'neutral-darkest';
+    },
+  },
 };
 </script>
 
@@ -40,23 +55,9 @@ export default {
 @import "../../assets/scss/unnnic.scss";
 
 .button-icon {
-  background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
-  border-radius: $unnnic-border-radius-sm;
-  position: relative;
   border: 0;
   cursor: pointer;
-
-  &:before {
-    content: " ";
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
-    border-radius: inherit;
-    pointer-events: none;
-  }
+  border-radius: $unnnic-border-radius-sm;
 
   &.small {
     padding: $unnnic-spacing-inset-nano;
@@ -66,11 +67,36 @@ export default {
     padding: $unnnic-spacing-inset-xs;
   }
 
-  &:hover {
-    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
+  &.primary {
+    background-color: $unnnic-color-neutral-darkest;
+
+    &:hover {
+      opacity: $unnnic-opacity-level-clear;
+    }
+  }
+
+  &.secondary {
+    background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-light);
+    position: relative;
 
     &:before {
-      border: 0;
+      content: " ";
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+      border-radius: inherit;
+      pointer-events: none;
+    }
+
+    &:hover {
+      background-color: rgba($unnnic-color-neutral-soft, $unnnic-opacity-level-overlay);
+
+      &:before {
+        border: 0;
+      }
     }
   }
 }

package/src/components/TextEditor/TextEditor.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="unnnic-text-editor">
+    <div
+      class="text-editor"
+      contenteditable="true"
+      ref="oDoc"
+      v-html="initialContent"
+      @input="onInput"
+    ></div>
+
+    <div class="actions">
+      <unnnic-button-icon
+        @click="$emit('action')"
+        type="secondary"
+        size="small"
+        icon="flash-1-3"
+      />
+
+      <unnnic-button-icon
+        @click="$emit('send')"
+        type="primary"
+        size="small"
+        icon="send-email-3-1"
+      />
+    </div>
+
+    <div class="format">
+      <unnnic-icon
+        icon="arrow-undo"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('undo')"
+      />
+      <unnnic-icon
+        icon="arrow-redo"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('redo')"
+      />
+      <!-- <unnnic-icon
+        icon="email-action-unread-1"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+      /> -->
+      <unnnic-icon
+        :style="{ marginLeft: '1rem', }"
+        icon="text-bold"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('bold')"
+      />
+      <unnnic-icon
+        icon="text-italic"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('italic')"
+      />
+      <unnnic-icon
+        icon="text-underline"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('underline')"
+      />
+      <unnnic-icon
+        icon="unordered-list"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('insertunorderedlist')"
+      />
+      <unnnic-icon
+        icon="text-left"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('justifyleft')"
+      />
+      <unnnic-icon
+        icon="text-center"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('justifycenter')"
+      />
+      <unnnic-icon
+        icon="text-right"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('justifyright')"
+      />
+      <unnnic-icon
+        icon="text-justified"
+        size="ant"
+        clickable
+        scheme="neutral-cleanest"
+        @click="formatDoc('justifyFull')"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import UnnnicButtonIcon from '../Button/ButtonIcon.vue';
+import UnnnicIcon from '../Icon.vue';
+
+export default {
+  components: {
+    UnnnicButtonIcon,
+    UnnnicIcon,
+  },
+
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      initialContent: '',
+    };
+  },
+
+  created() {
+    this.initialContent = this.value;
+  },
+
+  methods: {
+    formatDoc(sCmd, sValue) {
+      this.$refs.oDoc.focus();
+      document.execCommand(sCmd, false, sValue);
+      this.$refs.oDoc.focus();
+    },
+
+    validateMode() {
+      return this.$refs.oDoc.focus();
+    },
+
+    onInput(event) {
+      this.$emit('input', event.srcElement.innerHTML);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/scss/unnnic.scss";
+
+.unnnic-text-editor {
+  display: grid;
+  grid-template-areas:
+    "text-editor actions"
+    "format empty";
+  grid-template-columns: 1fr auto;
+  grid-column-gap: $unnnic-spacing-inline-xs;
+
+  .text-editor {
+    grid-area: text-editor;
+    height: 7.25rem;
+    box-sizing: border-box;
+    overflow: auto;
+    background-color: $unnnic-color-neutral-snow;
+    border-radius: $unnnic-border-radius-sm;
+    padding: $unnnic-spacing-inset-sm;
+    border: $unnnic-border-width-thinner solid $unnnic-color-neutral-clean;
+    outline: none;
+    color: $unnnic-color-neutral-cloudy;
+    font-family: $unnnic-font-family-secondary;
+    font-size: $unnnic-font-size-body-gt;
+    line-height: $unnnic-font-size-body-gt + $unnnic-line-height-md;
+    font-weight: $unnnic-font-weight-regular;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .actions {
+    grid-area: actions;
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-stack-xs;
+    place-self: center;
+  }
+
+  .format {
+    grid-area: format;
+    place-self: center;
+    padding: $unnnic-spacing-inset-nano;
+    user-select: none;
+    display: flex;
+    gap: $unnnic-spacing-inline-xs;
+  }
+}
+</style>

package/src/components/index.js

@@ -50,6 +50,7 @@ import ChatText from './ChatText/ChatText.vue';
 import TextArea from './TextArea/TextArea.vue';
 import CardNumber from './CardNumber/CardNumber.vue';
 import chartRainbow from './ChartRainbow/ChartRainbow.vue';
+import textEditor from './TextEditor/TextEditor.vue';
 
 const components = {
   unnnicInput: input,
@@ -103,6 +104,7 @@ const components = {
   unnnicTextArea: TextArea,
   unnnicCardNumber: CardNumber,
   unnnicChartRainbow: chartRainbow,
+  unnnicTextEditor: textEditor,
 };
 
 Object.keys(components).forEach((name) => {
@@ -162,3 +164,4 @@ export const unnnicChatText = ChatText;
 export const unnnicTextArea = TextArea;
 export const unnnicCardNumber = CardNumber;
 export const unnnicChartRainbow = chartRainbow;
+export const unnnicTextEditor = textEditor;

package/src/stories/TextEditor.stories.js

@@ -0,0 +1,33 @@
+import unnnicTextEditor from '../components/TextEditor/TextEditor.vue';
+
+export default {
+  title: 'Form/TextEditor',
+  component: unnnicTextEditor,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+
+  components: {
+    unnnicTextEditor,
+  },
+
+  data() {
+    return {
+      content: '',
+    };
+  },
+
+  template: `
+    <div>
+      <unnnic-text-editor v-bind="$props" v-model="content" />
+    </div>
+  `,
+
+  methods: {},
+});
+
+export const Default = Template.bind({});
+
+Default.args = {};

package/src/utils/icons.js

@@ -138,6 +138,16 @@ import videoFileMp41 from '!!svg-inline-loader!../assets/icons/video-file-mp4-1.
 import officeFilePdf11 from '!!svg-inline-loader!../assets/icons/office-file-pdf-1-1.svg';
 import fitnessBiceps1 from '!!svg-inline-loader!../assets/icons/fitness-biceps-1.svg';
 import studyLightIdea1 from '!!svg-inline-loader!../assets/icons/study-light-idea-1.svg';
+import textJustified from '!!svg-inline-loader!../assets/icons/text-justified.svg';
+import arrowUndo from '!!svg-inline-loader!../assets/icons/arrow-undo.svg';
+import arrowRedo from '!!svg-inline-loader!../assets/icons/arrow-redo.svg';
+import textBold from '!!svg-inline-loader!../assets/icons/text-bold.svg';
+import textItalic from '!!svg-inline-loader!../assets/icons/text-italic.svg';
+import textUnderline from '!!svg-inline-loader!../assets/icons/text-underline.svg';
+import unorderedList from '!!svg-inline-loader!../assets/icons/unordered-list.svg';
+import textLeft from '!!svg-inline-loader!../assets/icons/text-left.svg';
+import textCenter from '!!svg-inline-loader!../assets/icons/text-center.svg';
+import textRight from '!!svg-inline-loader!../assets/icons/text-right.svg';
 
 export default {
   'app-window-edit-1': appWindowEdit1,
@@ -278,4 +288,14 @@ export default {
   'office-file-pdf-1-1': officeFilePdf11,
   'fitness-biceps-1': fitnessBiceps1,
   'study-light-idea-1': studyLightIdea1,
+  'text-justified': textJustified,
+  'arrow-undo': arrowUndo,
+  'arrow-redo': arrowRedo,
+  'text-bold': textBold,
+  'text-italic': textItalic,
+  'text-underline': textUnderline,
+  'unordered-list': unorderedList,
+  'text-left': textLeft,
+  'text-center': textCenter,
+  'text-right': textRight,
 };