new build ui 1.36.0 + added new icons

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerberos-io/ui",
-  "version": "1.35.0",
+  "version": "1.36.0",
   "main": "lib/index.js",
   "repository": "https://github.com/kerberos-io/ui",
   "author": "cedricve <[email protected]>",
@@ -29,7 +29,7 @@
   "scripts": {
     "storybook": "start-storybook --no-manager-cache -s ./public -p 9001",
     "build-storybook": "build-storybook -s ./public -o docs-build",
-    "build": "rollup -c && ls -al"
+    "build": "rollup -c && cp -r lib/* /Users/I353408/Projects/go/src/gitlab.com/kerberos-io/vault/frontend/node_modules/@kerberos-io/ui/lib/"
   },
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

src/components/Breadcrumb/breadcrumb.scss

@@ -68,7 +68,7 @@ header.breadcrumb {
     flex: auto;
     margin-top: size(2);
 
-    Button {
+    > * {
       margin-right: size(1);
 
       &:last-child {

src/components/Icon/Icon.stories.tsx

@@ -16,13 +16,17 @@ export const Activity = () => <Icon label={"activity"}/>
 export const Alerts = () => <Icon label={"alerts"}/>
 export const Camera = () => <Icon label={"cameras"}/>
 export const Channels = () => <Icon label={"channels"}/>
+export const Cloud = () => <Icon label={"cloud"}/>
 export const Counting = () => <Icon label={"counting"}/>
 export const Dashboard = () => <Icon label={"dashboard"}/>
+export const Forward = () => <Icon label={"forward"}/>
 export const Logout = () => <Icon label={"logout"}/>
 export const Media = () => <Icon label={"media"}/>
 export const Livestream = () => <Icon label={"livestream"}/>
+export const Refresh = () => <Icon label={"refresh"}/>
 export const Share = () => <Icon label={"share"}/>
 export const Sites = () => <Icon label={"sites"}/>
 export const Subscription = () => <Icon label={"subscription"}/>
 export const Tasks = () => <Icon label={"tasks"}/>
+export const User = () => <Icon label={"user"}/>
 export const Watch = () => <Icon label={"watch"}/>

src/components/Icon/Icon.tsx

@@ -167,8 +167,40 @@ export function Watch(){
     )
 }
 
+export function Cloud(){
+    return (<svg className={"icon"} width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.8843 5C5.81855 5 4.12306 6.61291 3.95576 8.66459L3.89801 9.37283L3.21984 9.55041C2.52063 9.7335 1.97107 10.4101 1.97107 11.25C1.97107 12.2457 2.73484 13 3.61364 13L3.62312 13L3.6288 12.9999L7.8673 13L7.8843 13L7.9013 13L7.90539 12.9999L13.2412 13L13.25 13C14.6126 13 15.7686 11.8353 15.7686 10.3333C15.7686 8.83132 14.6126 7.66664 13.25 7.66664C13.0174 7.66664 12.7936 7.69976 12.5818 7.7613L11.7891 7.99158L11.4258 7.24051C10.783 5.91143 9.4376 5 7.8843 5ZM2.07896 7.854C2.60645 5.08806 5.00462 3 7.8843 3C9.94489 3 11.7579 4.06955 12.8157 5.68827C12.9588 5.67396 13.1037 5.66664 13.25 5.66664C15.758 5.66664 17.7397 7.78521 17.7397 10.3333C17.7397 12.8814 15.758 15 13.25 15L13.2378 15H7.90543L7.8843 15L7.86321 15H3.62895L3.61364 15C1.58951 15 0 13.2918 0 11.25C0 9.76155 0.840048 8.45714 2.07896 7.854Z" fill="currentColor"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.54775 4.04634C5.73804 3.22094 7.1845 2.86521 8.61514 3.04603C10.0458 3.22685 11.362 3.93177 12.3164 5.02823C13.2707 6.1247 13.7974 7.53716 13.7974 9.00001C13.7974 9.5523 13.3562 10 12.8119 10C12.2676 10 11.8264 9.5523 11.8264 9.00001C11.8264 8.02478 11.4752 7.08314 10.839 6.35216C10.2028 5.62119 9.32526 5.15124 8.3715 5.03069C7.41774 4.91014 6.45343 5.1473 5.65991 5.69756C4.86638 6.24783 4.29832 7.07329 4.06253 8.01873C3.929 8.55414 3.393 8.87834 2.86534 8.74285C2.33767 8.60736 2.01816 8.06349 2.15169 7.52808C2.50537 6.10993 3.35747 4.87174 4.54775 4.04634Z" fill="currentColor"/>
+    </svg>)
+}
+
+export function Refresh(){
+    return (<svg className={"icon"} width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M17 0C17.5523 0 18 0.447715 18 1V6C18 6.55228 17.5523 7 17 7H12C11.4477 7 11 6.55228 11 6C11 5.44772 11.4477 5 12 5H16V1C16 0.447715 16.4477 0 17 0Z" fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.32589 0.406451C8.21762 -0.182214 10.2507 -0.130216 12.1099 0.55438C13.9691 1.23898 15.5504 2.51791 16.6086 4.19283C16.9036 4.65973 16.7643 5.27737 16.2973 5.57236C15.8304 5.86735 15.2128 5.72799 14.9178 5.26109C14.0948 3.95837 12.8648 2.96365 11.4188 2.43118C9.97279 1.89872 8.39148 1.85828 6.92013 2.31613C5.44879 2.77398 4.16963 3.70453 3.28105 4.96347C2.39247 6.22241 1.94413 7.73937 2.00557 9.27909C2.06701 10.8188 2.63478 12.2952 3.62084 13.4794C4.6069 14.6635 5.95614 15.4892 7.45929 15.8283C8.96244 16.1675 10.5355 16.0012 11.9345 15.3552C13.3335 14.7092 14.4803 13.6197 15.1969 12.2555C15.4538 11.7666 16.0583 11.5785 16.5473 11.8353C17.0362 12.0922 17.2243 12.6968 16.9674 13.1857C16.046 14.9396 14.5716 16.3404 12.7729 17.171C10.9742 18.0015 8.9517 18.2154 7.01908 17.7793C5.08646 17.3432 3.35173 16.2816 2.08394 14.7592C0.816148 13.2367 0.0861489 11.3385 0.00715934 9.35883C-0.0718302 7.37919 0.504605 5.42881 1.64706 3.81018C2.78952 2.19154 4.43415 0.995116 6.32589 0.406451Z" fill="currentColor"/>
+        </svg>
+    )
+}
+
+export function User(){
+    return (<svg className={"icon"} width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 2C7.89543 2 7 2.89543 7 4C7 5.10457 7.89543 6 9 6C10.1046 6 11 5.10457 11 4C11 2.89543 10.1046 2 9 2ZM5 4C5 1.79086 6.79086 0 9 0C11.2091 0 13 1.79086 13 4C13 6.20914 11.2091 8 9 8C6.79086 8 5 6.20914 5 4Z" fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.9981 11.3995C5.29471 9.88675 7.08937 9 9 9C10.9106 9 12.7053 9.88675 14.0019 11.3995C15.2944 12.9074 16 14.9238 16 17C16 17.5523 15.5523 18 15 18L3 18C2.44772 18 2 17.5523 2 17C2 14.9238 2.70558 12.9074 3.9981 11.3995ZM9 11C7.72803 11 6.47044 11.5882 5.51662 12.701C4.75666 13.5877 4.24797 14.743 4.07017 16L13.9298 16C13.752 14.743 13.2433 13.5877 12.4834 12.701C11.5296 11.5882 10.272 11 9 11Z" fill="currentColor"/>
+        </svg>
+    )
+}
+
+export function Forward(){
+    return (<svg className={"icon"} width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 3.29289C5.68342 2.90237 6.31658 2.90237 6.70711 3.29289L11.7071 8.29289C12.0976 8.68342 12.0976 9.31658 11.7071 9.70711L6.70711 14.7071C6.31658 15.0976 5.68342 15.0976 5.29289 14.7071C4.90237 14.3166 4.90237 13.6834 5.29289 13.2929L9.58579 9L5.29289 4.70711C4.90237 4.31658 4.90237 3.68342 5.29289 3.29289Z" fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2929 3.29289C11.6834 2.90237 12.3166 2.90237 12.7071 3.29289L17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071C10.9024 14.3166 10.9024 13.6834 11.2929 13.2929L15.5858 9L11.2929 4.70711C10.9024 4.31658 10.9024 3.68342 11.2929 3.29289Z" fill="currentColor"/>
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9C12 8.44772 11.5523 8 11 8H1C0.447715 8 0 8.44772 0 9C0 9.55228 0.447715 10 1 10H11C11.5523 10 12 9.55228 12 9Z" fill="currentColor"/>
+        </svg>
+    )
+}
+
 const Icon = ({
-                    label,
+                  label,
               }: IconProps) => {
     switch (label){
         case "accounts":
@@ -183,14 +215,20 @@ const Icon = ({
             return <Channels />
         case "counting":
             return <Counting />
+        case "cloud":
+            return <Cloud />
         case "dashboard":
             return <Dashboard />
+        case "forward":
+            return <Forward />
         case "logout":
             return <Logout />
         case "media":
             return <Media />
         case "livestream":
             return <Livestream />
+        case "refresh":
+            return <Refresh />
         case "share":
             return <Share />
         case "sites":
@@ -199,6 +237,8 @@ const Icon = ({
             return <Subscription />
         case "tasks":
             return <Tasks />
+        case "user":
+            return <User />
         case "watch":
             return <Watch />
     }