@dktunited-techoff/techoff-suite-ui 0.8.4 → 0.8.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/Icon/__stories__/Icon.stories.mdx

@@ -75,12 +75,14 @@ Icons are visual symbols used to represent ideas, objects or actions. They commu
 ## Icons
 
 <div className="icons">
-  {Object.keys(icons).map(icon => (
-    <div className="icon-container" key={icon}>
-      <div className="icon">
-        <Icon name={icon} />
+  {Object.keys(icons)
+    .filter(icon => !icon.startsWith('header-'))
+    .map(icon => (
+      <div className="icon-container" key={icon}>
+        <div className="icon">
+          <Icon name={icon} />
+        </div>
+        <div className="icon-label">{icon}</div>
       </div>
-      <div className="icon-label">{icon}</div>
-    </div>
-  ))}
+    ))}
 </div>

package/src/components/Icon/icons/header-bikestudio.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 238.9 17.2" style="enable-background:new 0 0 238.9 17.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#152C47;}
+	.st1{font-family:'Montserrat-Medium';}
+	.st2{font-size:24px;}
+	.st3{font-family:'Roboto-Light';}
+	.st4{font-size:11px;}
+	.st5{fill:#020203;}
+	.st6{fill:#0D84C5;}
+	.st7{fill:#FFFFFF;}
+</style>
+<text transform="matrix(1 0 0 1 -2.52 16.9922)" class="st0 st1 st2">BIKESTUDIO</text>
+<text transform="matrix(1 0 0 1 165.1359 17.0155)" class="st3 st4">BY</text>
+<path class="st5" d="M202.2,10.3c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3
+	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L202.2,10.3z"/>
+<polygon class="st5" points="188.2,7.7 194.1,7.7 194.1,9.5 190.2,9.5 190.2,11.4 193.6,11.4 193.6,13.2 190.2,13.2 190.2,15.2 
+	194.1,15.2 194.1,17 188.2,17 "/>
+<polygon class="st5" points="226.7,7.5 232.2,7.5 232.2,9.4 228.6,9.4 228.6,11.7 231.7,11.7 231.7,13.5 228.6,13.5 228.6,16.9 
+	226.7,16.9 "/>
+<polygon class="st5" points="233.3,7.5 238.9,7.5 238.9,9.4 235.3,9.4 235.3,11.7 238.4,11.7 238.4,13.5 235.3,13.5 235.3,16.9 
+	233.3,16.9 "/>
+<polygon class="st5" points="210.7,13 206.7,13 206.7,16.9 204.8,16.9 204.8,7.5 206.7,7.5 206.7,11.1 210.7,11.1 210.7,7.5 
+	212.7,7.5 212.7,16.9 210.7,16.9 "/>
+<polygon class="st5" points="180,7.7 187.1,7.7 187.1,9.6 184.6,9.6 184.6,17 182.6,17 182.6,9.6 180,9.6 "/>
+<polyline class="st5" points="213.1,8.8 214.9,6 216.9,6 215.1,8.8 213.1,8.8 "/>
+<path class="st5" d="M220.7,7.4c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S223.5,7.4,220.7,7.4z"/>
+<polygon class="st6" points="216.6,12.4 222.7,8.8 222.7,15.9 "/>
+<polygon class="st7" points="220.6,17 220.5,13.6 217.7,15.4 "/>
+</svg>

package/src/components/Icon/icons/header-nsc-helmet.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 247.3 17" style="enable-background:new 0 0 247.3 17;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#152C47;}
+	.st1{font-family:'Montserrat-Medium';}
+	.st2{font-size:24px;}
+	.st3{font-family:'Roboto-Light';}
+	.st4{font-size:11px;}
+	.st5{fill:#020203;}
+	.st6{fill:#0D84C5;}
+	.st7{fill:#FFFFFF;}
+</style>
+<text transform="matrix(1 0 0 1 -2.52 16.8017)" class="st0 st1 st2">NSC HELMET</text>
+<text transform="matrix(1 0 0 1 173.496 16.8009)" class="st3 st4">BY</text>
+<path class="st5" d="M210.6,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1L212,15
+	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L210.6,10.1z"/>
+<polygon class="st5" points="196.6,7.5 202.5,7.5 202.5,9.3 198.6,9.3 198.6,11.2 202,11.2 202,13 198.6,13 198.6,15 202.5,15 
+	202.5,16.8 196.6,16.8 "/>
+<polygon class="st5" points="235.1,7.3 240.6,7.3 240.6,9.2 237,9.2 237,11.5 240.1,11.5 240.1,13.3 237,13.3 237,16.7 235.1,16.7 
+	"/>
+<polygon class="st5" points="241.7,7.3 247.3,7.3 247.3,9.2 243.7,9.2 243.7,11.5 246.8,11.5 246.8,13.3 243.7,13.3 243.7,16.7 
+	241.7,16.7 "/>
+<polygon class="st5" points="219.1,12.8 215.1,12.8 215.1,16.7 213.2,16.7 213.2,7.3 215.1,7.3 215.1,10.9 219.1,10.9 219.1,7.3 
+	221.1,7.3 221.1,16.7 219.1,16.7 "/>
+<polygon class="st5" points="188.4,7.5 195.5,7.5 195.5,9.4 193,9.4 193,16.8 191,16.8 191,9.4 188.4,9.4 "/>
+<polyline class="st5" points="221.5,8.6 223.3,5.8 225.3,5.8 223.5,8.6 221.5,8.6 "/>
+<path class="st5" d="M229.1,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S231.9,7.2,229.1,7.2z"/>
+<polygon class="st6" points="225,12.2 231.1,8.6 231.1,15.7 "/>
+<polygon class="st7" points="229,16.8 228.9,13.4 226.1,15.2 "/>
+</svg>

package/src/components/Icon/icons/header-opticost.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 211.7 17.2" style="enable-background:new 0 0 211.7 17.2;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#152C47;}
+	.st1{font-family:'Montserrat-Medium';}
+	.st2{font-size:24px;}
+	.st3{font-family:'Roboto-Light';}
+	.st4{font-size:11px;}
+	.st5{fill:#020203;}
+	.st6{fill:#0D84C5;}
+	.st7{fill:#FFFFFF;}
+</style>
+<text transform="matrix(1 0 0 1 -1.1519 16.9922)" class="st0 st1 st2">OPTICOST</text>
+<text transform="matrix(1 0 0 1 137.907 16.9861)" class="st3 st4">BY</text>
+<path class="st5" d="M175,10.3c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3
+	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L175,10.3z"/>
+<polygon class="st5" points="161,7.7 166.9,7.7 166.9,9.5 163,9.5 163,11.4 166.4,11.4 166.4,13.2 163,13.2 163,15.2 166.9,15.2 
+	166.9,17 161,17 "/>
+<polygon class="st5" points="199.5,7.5 205,7.5 205,9.4 201.4,9.4 201.4,11.7 204.5,11.7 204.5,13.5 201.4,13.5 201.4,16.9 
+	199.5,16.9 "/>
+<polygon class="st5" points="206.1,7.5 211.7,7.5 211.7,9.4 208.1,9.4 208.1,11.7 211.2,11.7 211.2,13.5 208.1,13.5 208.1,16.9 
+	206.1,16.9 "/>
+<polygon class="st5" points="183.5,13 179.5,13 179.5,16.9 177.6,16.9 177.6,7.5 179.5,7.5 179.5,11.1 183.5,11.1 183.5,7.5 
+	185.5,7.5 185.5,16.9 183.5,16.9 "/>
+<polygon class="st5" points="152.8,7.7 159.9,7.7 159.9,9.6 157.4,9.6 157.4,17 155.4,17 155.4,9.6 152.8,9.6 "/>
+<polyline class="st5" points="185.9,8.8 187.7,6 189.7,6 187.9,8.8 185.9,8.8 "/>
+<path class="st5" d="M193.5,7.4c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S196.3,7.4,193.5,7.4z"/>
+<polygon class="st6" points="189.4,12.4 195.5,8.8 195.5,15.9 "/>
+<polygon class="st7" points="193.4,17 193.3,13.6 190.5,15.4 "/>
+</svg>

package/src/components/Icon/icons/header-repairability.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#152C47 !important;}
+	.st1{font-family:'Montserrat-Medium' !important;}
+	.st2{font-size:24px !important;}
+	.st3{font-family:'Roboto-Light' !important;}
+	.st4{font-size:11px !important;}
+	.st5{fill:#020203 !important;}
+	.st6{fill:#0D84C5 !important;}
+	.st7{fill:#FFFFFF !important;}
+</style>
+<text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text>
+<text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text>
+<path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3
+	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/>
+<polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 
+	307,16.8 "/>
+<polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 
+	345.5,16.7 "/>
+<polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 
+	352.1,16.7 "/>
+<polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 
+	331.5,7.3 331.5,16.7 329.5,16.7 "/>
+<polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/>
+<polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/>
+<path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/>
+<polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/>
+<polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/>
+</svg>

package/src/components/Icon/icons/in-progress.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#4D6F56;stroke-width:2;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#B3BAC3;stroke-width:2;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#B3BAC3;stroke-width:1.7;stroke-miterlimit:10;}
+</style>
+<g>
+	<g id="XMLID_00000061439617207973343430000008849834053897756088_">
+		<path class="st0" d="M1.8,5.7C2.2,4.7,4.8,1,9,1c4,0,8,3.4,8,8c0,4.4-3.6,8-8,8c-4.4,0-8-3.6-8-8"/>
+		<path class="st1" d="M1.8,5.7C2.2,4.7,4.8,1,9,1c4,0,8,3.4,8,8c0,4.4-3.6,8-8,8c-4.4,0-8-3.6-8-8"/>
+	</g>
+	<polyline class="st1" points="5.5,5.8 1.1,5.8 1.1,1.4 	"/>
+	<polyline class="st2" points="12.2,12.2 9,9 9,4.6 	"/>
+</g>
+</svg>