Add new icons to examples

infor-design · Jul 21, 2023 · 2df3dcd · 2df3dcd
1 parent ab0d128
commit 2df3dcd
Show file tree

Hide file tree

Showing 6 changed files with 381 additions and 54 deletions.
diff --git a/app/views/components/module-nav/example-hidden.html b/app/views/components/module-nav/example-hidden.html
@@ -1,3 +1,59 @@
+<div class="svg hidden">
+  <div class="svg-icons">
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icons">
+      <symbol id="icon-app-ac" viewBox="0 0 32 32">
+        <rect width="32" height="32" rx="8" fill="#4DCC86" />
+        <path
+          d="M9.38583 20H7.69833L10.7708 11.2727H12.7225L15.7992 20H14.1117L11.7807 13.0625H11.7125L9.38583 20ZM9.44123 16.5781H14.0435V17.848H9.44123V16.5781ZM24.0087 14.2173H22.415C22.3695 13.956 22.2857 13.7244 22.1635 13.5227C22.0414 13.3182 21.8894 13.1449 21.7076 13.0028C21.5257 12.8608 21.3184 12.7543 21.0854 12.6832C20.8553 12.6094 20.6067 12.5724 20.3397 12.5724C19.8652 12.5724 19.4448 12.6918 19.0783 12.9304C18.7118 13.1662 18.4249 13.5128 18.2175 13.9702C18.0101 14.4247 17.9064 14.9801 17.9064 15.6364C17.9064 16.304 18.0101 16.8665 18.2175 17.3239C18.4277 17.7784 18.7147 18.1222 19.0783 18.3551C19.4448 18.5852 19.8638 18.7003 20.3354 18.7003C20.5968 18.7003 20.8411 18.6662 21.0684 18.598C21.2985 18.527 21.5044 18.4233 21.6863 18.2869C21.8709 18.1506 22.0257 17.983 22.1507 17.7841C22.2786 17.5852 22.3667 17.358 22.415 17.1023L24.0087 17.1108C23.949 17.5256 23.8198 17.9148 23.6209 18.2784C23.4249 18.642 23.1678 18.9631 22.8496 19.2415C22.5314 19.517 22.1593 19.733 21.7331 19.8892C21.307 20.0426 20.834 20.1193 20.3141 20.1193C19.5471 20.1193 18.8624 19.9418 18.2601 19.5866C17.6578 19.2315 17.1834 18.7188 16.8368 18.0483C16.4902 17.3778 16.3169 16.5739 16.3169 15.6364C16.3169 14.696 16.4917 13.892 16.8411 13.2244C17.1905 12.554 17.6664 12.0412 18.2686 11.6861C18.8709 11.331 19.5527 11.1534 20.3141 11.1534C20.7999 11.1534 21.2516 11.2216 21.6692 11.358C22.0868 11.4943 22.459 11.6946 22.7857 11.9588C23.1124 12.2202 23.3809 12.5412 23.5911 12.9219C23.8042 13.2997 23.9434 13.7315 24.0087 14.2173Z"
+          fill="white" />
+      </symbol>
+
+      <symbol id="icon-app-jo" viewBox="0 0 32 32">
+        <rect width="32" height="32" rx="8" fill="#5CC6C7" />
+        <path
+          d="M13.2903 11.2727H14.8585V17.4091C14.8556 17.9716 14.7363 18.456 14.5005 18.8622C14.2647 19.2656 13.9352 19.5767 13.5119 19.7955C13.0914 20.0114 12.6014 20.1193 12.0417 20.1193C11.5304 20.1193 11.0701 20.0284 10.661 19.8466C10.2548 19.6619 9.93235 19.3892 9.69371 19.0284C9.45508 18.6676 9.33576 18.2187 9.33576 17.6818H10.9082C10.911 17.9176 10.9622 18.1207 11.0616 18.2912C11.1639 18.4616 11.3045 18.5923 11.4835 18.6832C11.6625 18.7741 11.8684 18.8196 12.1014 18.8196C12.3542 18.8196 12.5687 18.767 12.7449 18.6619C12.921 18.554 13.0545 18.3949 13.1454 18.1847C13.2392 17.9744 13.2875 17.7159 13.2903 17.4091V11.2727ZM19.3606 20.1278C18.7214 20.1278 18.1674 19.9872 17.6987 19.706C17.2299 19.4247 16.8663 19.0312 16.6078 18.5256C16.3521 18.0199 16.2243 17.429 16.2243 16.7528C16.2243 16.0767 16.3521 15.4844 16.6078 14.9759C16.8663 14.4673 17.2299 14.0724 17.6987 13.7912C18.1674 13.5099 18.7214 13.3693 19.3606 13.3693C19.9998 13.3693 20.5538 13.5099 21.0225 13.7912C21.4913 14.0724 21.8535 14.4673 22.1092 14.9759C22.3677 15.4844 22.497 16.0767 22.497 16.7528C22.497 17.429 22.3677 18.0199 22.1092 18.5256C21.8535 19.0312 21.4913 19.4247 21.0225 19.706C20.5538 19.9872 19.9998 20.1278 19.3606 20.1278ZM19.3691 18.892C19.7157 18.892 20.0055 18.7969 20.2385 18.6065C20.4714 18.4134 20.6447 18.1548 20.7583 17.831C20.8748 17.5071 20.9331 17.1463 20.9331 16.7486C20.9331 16.348 20.8748 15.9858 20.7583 15.6619C20.6447 15.3352 20.4714 15.0753 20.2385 14.8821C20.0055 14.6889 19.7157 14.5923 19.3691 14.5923C19.014 14.5923 18.7186 14.6889 18.4828 14.8821C18.2498 15.0753 18.0751 15.3352 17.9586 15.6619C17.845 15.9858 17.7882 16.348 17.7882 16.7486C17.7882 17.1463 17.845 17.5071 17.9586 17.831C18.0751 18.1548 18.2498 18.4134 18.4828 18.6065C18.7186 18.7969 19.014 18.892 19.3691 18.892Z"
+          fill="white" />
+      </symbol>
+
+      <symbol id="icon-app-ssm" viewBox="0 0 32 32">
+        <rect width="32" height="32" rx="8" fill="#FA9601" />
+        <path
+          d="M8.37322 13.6719C8.33345 13.2997 8.16584 13.0099 7.87038 12.8026C7.57777 12.5952 7.19709 12.4915 6.72834 12.4915C6.39879 12.4915 6.11612 12.5412 5.88033 12.6406C5.64453 12.7401 5.46413 12.875 5.33913 13.0455C5.21413 13.2159 5.15021 13.4105 5.14737 13.6293C5.14737 13.8111 5.18857 13.9687 5.27095 14.1023C5.35618 14.2358 5.47124 14.3494 5.61612 14.4432C5.76101 14.5341 5.92152 14.6108 6.09766 14.6733C6.27379 14.7358 6.45135 14.7884 6.63033 14.831L7.44851 15.0355C7.77805 15.1122 8.09482 15.2159 8.39879 15.3466C8.70561 15.4773 8.97976 15.642 9.22124 15.8409C9.46555 16.0398 9.65874 16.2798 9.80078 16.5611C9.94283 16.8423 10.0138 17.1719 10.0138 17.5497C10.0138 18.0611 9.88317 18.5114 9.6218 18.9006C9.36044 19.2869 8.9826 19.5895 8.48828 19.8082C7.9968 20.0241 7.40163 20.1321 6.70277 20.1321C6.02379 20.1321 5.4343 20.027 4.9343 19.8168C4.43714 19.6065 4.04794 19.2997 3.76669 18.8963C3.48828 18.4929 3.33771 18.0014 3.31499 17.4219H4.87038C4.89311 17.7259 4.98686 17.9787 5.15163 18.1804C5.31641 18.3821 5.53089 18.5327 5.7951 18.6321C6.06214 18.7315 6.36044 18.7812 6.68999 18.7812C7.03374 18.7812 7.33487 18.7301 7.5934 18.6278C7.85476 18.5227 8.0593 18.3778 8.20703 18.1932C8.35476 18.0057 8.43004 17.7869 8.43288 17.5369C8.43004 17.3097 8.36328 17.1222 8.2326 16.9744C8.10192 16.8239 7.91868 16.6989 7.68288 16.5994C7.44993 16.4972 7.1772 16.4062 6.8647 16.3267L5.8718 16.071C5.15305 15.8864 4.58487 15.6065 4.16726 15.2315C3.75249 14.8537 3.5451 14.3523 3.5451 13.7273C3.5451 13.2131 3.6843 12.7628 3.96271 12.3764C4.24396 11.9901 4.62607 11.6903 5.10902 11.4773C5.59197 11.2614 6.13885 11.1534 6.74965 11.1534C7.36896 11.1534 7.91158 11.2614 8.37749 11.4773C8.84624 11.6903 9.21413 11.9872 9.48118 12.3679C9.74822 12.7457 9.88601 13.1804 9.89453 13.6719H8.37322ZM16.1662 13.6719C16.1264 13.2997 15.9588 13.0099 15.6634 12.8026C15.3707 12.5952 14.9901 12.4915 14.5213 12.4915C14.1918 12.4915 13.9091 12.5412 13.6733 12.6406C13.4375 12.7401 13.2571 12.875 13.1321 13.0455C13.0071 13.2159 12.9432 13.4105 12.9403 13.6293C12.9403 13.8111 12.9815 13.9687 13.0639 14.1023C13.1491 14.2358 13.2642 14.3494 13.4091 14.4432C13.554 14.5341 13.7145 14.6108 13.8906 14.6733C14.0668 14.7358 14.2443 14.7884 14.4233 14.831L15.2415 15.0355C15.571 15.1122 15.8878 15.2159 16.1918 15.3466C16.4986 15.4773 16.7727 15.642 17.0142 15.8409C17.2585 16.0398 17.4517 16.2798 17.5938 16.5611C17.7358 16.8423 17.8068 17.1719 17.8068 17.5497C17.8068 18.0611 17.6761 18.5114 17.4148 18.9006C17.1534 19.2869 16.7756 19.5895 16.2812 19.8082C15.7898 20.0241 15.1946 20.1321 14.4957 20.1321C13.8168 20.1321 13.2273 20.027 12.7273 19.8168C12.2301 19.6065 11.8409 19.2997 11.5597 18.8963C11.2813 18.4929 11.1307 18.0014 11.108 17.4219H12.6634C12.6861 17.7259 12.7798 17.9787 12.9446 18.1804C13.1094 18.3821 13.3239 18.5327 13.5881 18.6321C13.8551 18.7315 14.1534 18.7812 14.483 18.7812C14.8267 18.7812 15.1278 18.7301 15.3864 18.6278C15.6477 18.5227 15.8523 18.3778 16 18.1932C16.1477 18.0057 16.223 17.7869 16.2259 17.5369C16.223 17.3097 16.1563 17.1222 16.0256 16.9744C15.8949 16.8239 15.7116 16.6989 15.4759 16.5994C15.2429 16.4972 14.9702 16.4062 14.6577 16.3267L13.6648 16.071C12.946 15.8864 12.3778 15.6065 11.9602 15.2315C11.5455 14.8537 11.3381 14.3523 11.3381 13.7273C11.3381 13.2131 11.4773 12.7628 11.7557 12.3764C12.0369 11.9901 12.419 11.6903 12.902 11.4773C13.3849 11.2614 13.9318 11.1534 14.5426 11.1534C15.1619 11.1534 15.7045 11.2614 16.1705 11.4773C16.6392 11.6903 17.0071 11.9872 17.2741 12.3679C17.5412 12.7457 17.679 13.1804 17.6875 13.6719H16.1662ZM19.2163 11.2727H21.1509L23.7418 17.5966H23.8441L26.435 11.2727H28.3697V20H26.8526V14.0043H26.7717L24.3597 19.9744H23.2262L20.8143 13.9915H20.7333V20H19.2163V11.2727Z"
+          fill="white" />
+      </symbol>
+
+      <symbol id="icon-app-um" viewBox="0 0 32 32">
+        <rect width="32" height="32" rx="8" fill="#1C86EF" />
+        <path
+          d="M12.5243 11.2727H14.1053V16.9744C14.1053 17.5994 13.9576 18.1491 13.6621 18.6236C13.3695 19.098 12.9576 19.4687 12.4263 19.7358C11.8951 20 11.2743 20.1321 10.5641 20.1321C9.85103 20.1321 9.22887 20 8.69762 19.7358C8.16637 19.4687 7.75444 19.098 7.46183 18.6236C7.16921 18.1491 7.0229 17.5994 7.0229 16.9744V11.2727H8.60387V16.8423C8.60387 17.206 8.68342 17.5298 8.84251 17.8139C9.00444 18.098 9.23171 18.321 9.52433 18.483C9.81694 18.642 10.1635 18.7216 10.5641 18.7216C10.9647 18.7216 11.3113 18.642 11.6039 18.483C11.8993 18.321 12.1266 18.098 12.2857 17.8139C12.4448 17.5298 12.5243 17.206 12.5243 16.8423V11.2727ZM15.8237 11.2727H17.7583L20.3493 17.5966H20.4515L23.0424 11.2727H24.9771V20H23.4601V14.0043H23.3791L20.9672 19.9744H19.8336L17.4217 13.9915H17.3407V20H15.8237V11.2727Z"
+          fill="white" />
+      </symbol>
+
+      <symbol id="icon-app-pm" viewBox="0 0 32 32">
+        <rect width="32" height="32" rx="8" fill="#8D4BE5" />
+        <path
+          d="M7.56197 20V11.2727H10.8347C11.5051 11.2727 12.0676 11.3977 12.5222 11.6477C12.9796 11.8977 13.3248 12.2415 13.5577 12.679C13.7935 13.1136 13.9114 13.608 13.9114 14.1619C13.9114 14.7216 13.7935 15.2187 13.5577 15.6534C13.3219 16.0881 12.9739 16.4304 12.5137 16.6804C12.0534 16.9276 11.4867 17.0511 10.8134 17.0511H8.64435V15.7514H10.6003C10.9924 15.7514 11.3134 15.6832 11.5634 15.5469C11.8134 15.4105 11.998 15.223 12.1174 14.9844C12.2395 14.7457 12.3006 14.4716 12.3006 14.1619C12.3006 13.8523 12.2395 13.5795 12.1174 13.3438C11.998 13.108 11.812 12.9247 11.5591 12.794C11.3091 12.6605 10.9867 12.5938 10.5918 12.5938H9.14293V20H7.56197ZM15.2846 11.2727H17.2193L19.8102 17.5966H19.9125L22.5034 11.2727H24.438V20H22.921V14.0043H22.84L20.4281 19.9744H19.2946L16.8826 13.9915H16.8017V20H15.2846V11.2727Z"
+          fill="white" />
+      </symbol>
+
+      <symbol id="icon-app-psa" viewBox="0 0 32 32">
+        <rect width="32" height="32" rx="8" fill="#1C86EF" />
+        <path
+          d="M4.8315 20V11.2727H8.10423C8.77468 11.2727 9.33718 11.3977 9.79173 11.6477C10.2491 11.8977 10.5943 12.2415 10.8272 12.679C11.063 13.1136 11.1809 13.608 11.1809 14.1619C11.1809 14.7216 11.063 15.2187 10.8272 15.6534C10.5914 16.0881 10.2434 16.4304 9.7832 16.6804C9.32298 16.9276 8.75621 17.0511 8.08292 17.0511H5.91389V15.7514H7.86985C8.2619 15.7514 8.58292 15.6832 8.83292 15.5469C9.08292 15.4105 9.26758 15.223 9.3869 14.9844C9.50906 14.7457 9.57014 14.4716 9.57014 14.1619C9.57014 13.8523 9.50906 13.5795 9.3869 13.3438C9.26758 13.108 9.0815 12.9247 8.82866 12.794C8.57866 12.6605 8.25621 12.5938 7.86133 12.5938H6.41246V20H4.8315ZM17.2971 13.6719C17.2573 13.2997 17.0897 13.0099 16.7942 12.8026C16.5016 12.5952 16.1209 12.4915 15.6522 12.4915C15.3226 12.4915 15.04 12.5412 14.8042 12.6406C14.5684 12.7401 14.388 12.875 14.263 13.0455C14.138 13.2159 14.074 13.4105 14.0712 13.6293C14.0712 13.8111 14.1124 13.9687 14.1948 14.1023C14.28 14.2358 14.3951 14.3494 14.54 14.4432C14.6848 14.5341 14.8453 14.6108 15.0215 14.6733C15.1976 14.7358 15.3752 14.7884 15.5542 14.831L16.3723 15.0355C16.7019 15.1122 17.0186 15.2159 17.3226 15.3466C17.6294 15.4773 17.9036 15.642 18.1451 15.8409C18.3894 16.0398 18.5826 16.2798 18.7246 16.5611C18.8667 16.8423 18.9377 17.1719 18.9377 17.5497C18.9377 18.0611 18.807 18.5114 18.5456 18.9006C18.2843 19.2869 17.9064 19.5895 17.4121 19.8082C16.9206 20.0241 16.3255 20.1321 15.6266 20.1321C14.9476 20.1321 14.3581 20.027 13.8581 19.8168C13.361 19.6065 12.9718 19.2997 12.6905 18.8963C12.4121 18.4929 12.2615 18.0014 12.2388 17.4219H13.7942C13.8169 17.7259 13.9107 17.9787 14.0755 18.1804C14.2402 18.3821 14.4547 18.5327 14.7189 18.6321C14.986 18.7315 15.2843 18.7812 15.6138 18.7812C15.9576 18.7812 16.2587 18.7301 16.5172 18.6278C16.7786 18.5227 16.9831 18.3778 17.1309 18.1932C17.2786 18.0057 17.3539 17.7869 17.3567 17.5369C17.3539 17.3097 17.2871 17.1222 17.1564 16.9744C17.0257 16.8239 16.8425 16.6989 16.6067 16.5994C16.3738 16.4972 16.101 16.4062 15.7885 16.3267L14.7956 16.071C14.0769 15.8864 13.5087 15.6065 13.0911 15.2315C12.6763 14.8537 12.4689 14.3523 12.4689 13.7273C12.4689 13.2131 12.6081 12.7628 12.8865 12.3764C13.1678 11.9901 13.5499 11.6903 14.0328 11.4773C14.5158 11.2614 15.0627 11.1534 15.6735 11.1534C16.2928 11.1534 16.8354 11.2614 17.3013 11.4773C17.7701 11.6903 18.138 11.9872 18.405 12.3679C18.6721 12.7457 18.8098 13.1804 18.8184 13.6719H17.2971ZM21.3272 20H19.6397L22.7122 11.2727H24.6639L27.7406 20H26.0531L23.7221 13.0625H23.6539L21.3272 20ZM21.3826 16.5781H25.9849V17.848H21.3826V16.5781Z"
+          fill="white" />
+      </symbol>
+
+      <symbol id="icon-app-lmd" viewBox="0 0 32 32">
+        <rect width="32" height="32" rx="8" fill="#4DCC86" />
+        <path
+          d="M3.6772 20V11.2727H5.25817V18.6747H9.10192V20H3.6772ZM10.4741 11.2727H12.4087L14.9996 17.5966H15.1019L17.6928 11.2727H19.6275V20H18.1104V14.0043H18.0295L15.6175 19.9744H14.484L12.0721 13.9915H11.9911V20H10.4741V11.2727ZM24.3065 20H21.3491V11.2727H24.3661C25.2326 11.2727 25.9769 11.4474 26.5991 11.7969C27.2241 12.1435 27.7042 12.642 28.0394 13.2926C28.3746 13.9432 28.5423 14.7216 28.5423 15.6278C28.5423 16.5369 28.3732 17.3182 28.0352 17.9716C27.6999 18.625 27.2156 19.1264 26.582 19.4759C25.9513 19.8253 25.1928 20 24.3065 20ZM22.93 18.6321H24.2298C24.8377 18.6321 25.3448 18.5213 25.7511 18.2997C26.1573 18.0753 26.4627 17.7415 26.6673 17.2983C26.8718 16.8523 26.9741 16.2955 26.9741 15.6278C26.9741 14.9602 26.8718 14.4062 26.6673 13.9659C26.4627 13.5227 26.1602 13.1918 25.7596 12.973C25.3619 12.7514 24.8675 12.6406 24.2766 12.6406H22.93V18.6321Z"
+          fill="white" />
+      </symbol>
+
+    </svg>
+  </div>
+</div>
+
 <section class="module-nav-container">
   <aside id="nav" class="module-nav">
     <div class="module-nav-bar">
@@ -9,14 +65,14 @@
             <div class="module-nav-section role-dropdown">
               <label for="module-nav-role-switcher" class="label audible">Roles</label>
               <select id="module-nav-role-switcher" name="module-nav-role-switcher" class="dropdown" data-automation-id="custom-automation-dropdown-id">
-                <option value="admin" data-icon="{icon: 'database'}">Admin</option>
-                <option value="job-console" data-icon="{icon: 'database'}">Job Console</option>
-                <option value="landing-page-designer" data-icon="{icon: 'database'}">Landing Page Designer</option>
-                <option value="process-server-admin" data-icon="{icon: 'database'}">Process Server Administrator</option>
-                <option value="proxy-management" data-icon="{icon: 'database'}">Proxy Management</option>
-                <option value="security-system-management" data-icon="{icon: 'database'}">Security System Management</option>
-                <option value="user-management" data-icon="{icon: 'database'}">User Management</option>
-              </select>
+                <option value="admin" data-icon="{icon: 'app-ac'}">Admin Console</option>
+                <option value="job-console" data-icon="{icon: 'app-jo'}">Job Console</option>
+                <option value="landing-page-designer" data-icon="{icon: 'app-lmd'}">Landing Page Designer</option>
+                <option value="process-server-admin" data-icon="{icon: 'app-psa'}">Process Server Administrator</option>
+                <option value="proxy-management" data-icon="{icon: 'app-pm'}">Proxy Management</option>
+                <option value="security-system-management" data-icon="{icon: 'app-ssm'}">Security System Management</option>
+                <option value="user-management" data-icon="{icon: 'app-um'}">User Management</option>
+                </select>
             </div>
           </div>
         </div>