@indico-data/design-system 1.0.45 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "1.0.45",
+  "version": "1.0.46",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/Icon/indicons.tsx

@@ -251,6 +251,21 @@ const indicons = {
       <path d="M59 25H40c-.8 0-2-1-2-2s1-2 2-2h19c1 0 2 1 2 2s-1 2-2 2zm0 10H40c-.8 0-2-1-2-2s1-2 2-2h19c1 0 2 1 2 2s-1 2-2 2zm0 10H40c-.8 0-2-1-2-2s1-2 2-2h19c1 0 2 1 2 2s-1 2-2 2zm0 10H40c-.8 0-2-1-2-2s1-2 2-2h19c1 0 2 1 2 2s-1 2-2 2zm0 10H40c-.8 0-2-1-2-2s1-2 2-2h19c1 0 2 1 2 2s-1 2-2 2zm0 10H40c-.8 0-2-1-2-2s1-2 2-2h19c1 0 2 1 2 2s-1 2-2 2zm41 22.5c0 1.5-1 2.5-3 2.5H3c-2 0-3-1-3-2.5S1 95 3 95h4V38c0-1 1-2 2-2h5v-6c0-1 1-2 2-2h9V10c0-1 1-2 2-2h8V2c0-1 1-2 2-2h26c1 0 2 1 2 2v6h8c1 0 2 1 2 2v18h9c1 0 2 1 2 2v6h5c1 0 2 1 2 2v57h4c2 0 3 1 3 2.5zM75 38h7v-6h-7v6zM39 10h22V4H39v6zM19 38h6v-6h-6v6zm6 57V41H13v54h12zm45 0V13H30v82h40zm18 0V41H75v54h13z" />
     </svg>
   ),
+  'exclamation-circle-stroke': (
+    <svg viewBox="0 0 100 100">
+      <path
+        fill="#FFFFFF"
+        d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0L50,0z"
+      />
+      <path
+        fill="#F95359"
+        d="M96,50c0,25.4-20.6,46-46,46S4,75.4,4,50
+	C4,24.6,24.6,4,50,4S96,24.6,96,50z M50,59.3c-4.7,0-8.5,3.8-8.5,8.5s3.8,8.5,8.5,8.5s8.5-3.8,8.5-8.5S54.7,59.3,50,59.3z
+	 M41.9,28.6l1.4,25.2c0.1,1.2,1,2.1,2.2,2.1h9c1.2,0,2.2-0.9,2.2-2.1l1.4-25.2c0.1-1.3-0.9-2.3-2.2-2.3H44.1
+	C42.8,26.3,41.8,27.3,41.9,28.6L41.9,28.6z"
+      />
+    </svg>
+  ),
   extraction: (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M66.7 26.7c0-1.1-.4-2.2-1.2-2.9l-17-17c-.8-.8-1.8-1.2-3-1.2h-1.1v22.2h22.2v-1.1zM99.1 59L82.5 42.3c-1.8-1.8-4.8-.5-4.8 2v11.3h-11v11.1h11.1V78c0 2.5 3 3.7 4.8 2l16.6-16.8c1.1-1.2 1.1-3-.1-4.2zm-65.8 4.9v-5.6c0-1.5 1.3-2.8 2.8-2.8h30.6V33.3H43.1c-2.3 0-4.2-1.9-4.2-4.2V5.6H4.2C1.9 5.6 0 7.4 0 9.7v80.6c0 2.3 1.9 4.2 4.2 4.2h58.3c2.3 0 4.2-1.9 4.2-4.2V66.7H36.1c-1.5 0-2.8-1.3-2.8-2.8z" />
@@ -599,11 +614,6 @@ const indicons = {
       />
     </svg>
   ),
-  swagger: (
-    <svg viewBox="0 0 102 102" fill="currentColor">
-      <path d="M50,0C22.4,0,0,22.4,0,50s22.4,50,50,50s50-22.4,50-50S77.6,0,50,0z M50,4.8C75,4.8,95.2,25,95.2,50S75,95.2,50,95.2  C25,95.2,4.8,75,4.8,50S25,4.8,50,4.8z M34.9,24.4c-0.6,0-1.2,0-1.8,0c-4.1,0.2-6.5,2.2-7.2,6.1c-0.5,2.8-0.4,5.6-0.6,8.4  c-0.1,1.5-0.2,2.9-0.5,4.3c-0.6,2.5-1.6,3.3-4.2,3.5c-0.3,0-0.7,0.1-1,0.2v6.1c4.7,0.2,5.3,1.9,5.7,6.8c0.1,1.8,0,3.6,0.1,5.4  c0.1,1.7,0.3,3.4,0.6,5c1.1,4.5,5.5,6,10.7,5.1v-5.4c-0.9,0-1.6,0-2.3,0c-1.8-0.1-2.5-0.5-2.6-2.2c-0.2-2.2-0.2-4.5-0.3-6.7  c-0.3-4.2-0.7-8.3-4.8-10.9c2.1-1.5,3.6-3.4,4.1-5.8c0.3-1.7,0.6-3.4,0.7-5.2c0.1-1.7-0.1-3.5,0.1-5.2c0.2-2.8,0.4-3.9,3.7-3.8  c0.5,0,1-0.1,1.5-0.1v-5.5C36.1,24.5,35.5,24.5,34.9,24.4z M66.5,24.5c-1.1,0-2.3,0-3.4,0.2V30c1,0,1.8,0,2.6,0  c1.4,0,2.4,0.6,2.5,2.1c0.1,1.4,0.1,2.8,0.3,4.2c0.3,2.8,0.4,5.6,0.9,8.4c0.4,2.3,2,4,3.9,5.4c-3.4,2.3-4.4,5.5-4.6,9.2  c-0.1,2.5-0.2,5-0.3,7.6c-0.1,2.3-0.9,3.1-3.3,3.1c-0.7,0-1.3,0.1-2,0.1v5.4c1.3,0,2.6,0.1,3.9,0c3.9-0.2,6.2-2.1,7-5.9  c0.3-2.1,0.5-4.2,0.6-6.3c0.1-1.9,0.1-3.9,0.3-5.8c0.3-3,1.7-4.2,4.6-4.4c0.3,0,0.6-0.1,0.8-0.2v-6.1c-0.5-0.1-0.8-0.1-1.2-0.1  c-2.2-0.1-3.3-0.9-3.9-3c-0.3-1.4-0.6-2.7-0.6-4.1c-0.2-2.6-0.1-5.2-0.3-7.7C74,27,71.1,24.6,66.5,24.5L66.5,24.5z M37.8,46.5  c-4.5,0-4.8,6.6-0.4,7h0.2c1.9,0.1,3.5-1.3,3.6-3.2v-0.2C41.4,48.1,39.8,46.5,37.8,46.5L37.8,46.5z M49.9,46.5  c-1.9-0.1-3.4,1.4-3.5,3.3c0,0.1,0,0.2,0,0.3c0,2.1,1.4,3.4,3.6,3.4c2.1,0,3.5-1.4,3.5-3.5C53.5,47.9,52.1,46.5,49.9,46.5L49.9,46.5  z M62.3,46.5c-2,0-3.6,1.5-3.6,3.5c0,2,1.6,3.5,3.5,3.5h0c1.8,0.3,3.5-1.4,3.7-3.4C66,48.2,64.2,46.5,62.3,46.5L62.3,46.5z" />
-    </svg>
-  ),
   text: (
     <svg viewBox="0 0 102 102" fill="currentColor">
       <g transform="translate(1 1)">
@@ -661,6 +671,25 @@ const indicons = {
       <path d="M83.9 95.3H16.1c-6.8 0-12-2.4-14.5-6.8s-2-10 1.4-16l33.9-58.7C40.3 7.9 45 4.6 50 4.6s9.7 3.3 13.1 9.2L97 72.6c3.4 5.9 3.9 11.6 1.4 16-2.5 4.3-7.7 6.7-14.5 6.7zm-27-19.7c0-3.5-2.9-6.4-6.4-6.4s-6.4 2.9-6.4 6.4c0 3.5 2.9 6.4 6.4 6.4s6.4-2.8 6.4-6.4zm.2-40.4c0-3.6-2.9-6.6-6.6-6.6s-6.5 3-6.5 6.6l1.5 23.3c.2 2.6 2.4 4.6 5 4.6 5 0 5-4.6 5-4.6l1.6-23.3z" />
     </svg>
   ),
+  'warning-stroke': (
+    <svg viewBox="0 0 100 100">
+      <path
+        fill="#FFFFFF"
+        d="M50,4.7c-6,0-11.6,3.8-15.4,10.4L3.8,68.5C0,75.2-0.5,81.8,2.5,87c3,5.3,8.9,8.2,16.7,8.2h61.7
+   c7.6,0,13.7-2.9,16.6-8.1c3-5.3,2.6-11.9-1.3-18.6L65.4,15.1C61.6,8.5,56,4.7,50,4.7L50,4.7z"
+      />
+      <path
+        fill="#FFCA28"
+        d="M80.8,91.2H19.2C13,91.2,8.3,89,6,85s-1.8-9.1,1.3-14.6L38.1,17c3.1-5.4,7.4-8.4,11.9-8.4
+   s8.8,3,11.9,8.4l30.8,53.5c3.1,5.4,3.5,10.6,1.3,14.6C91.7,89,87,91.2,80.8,91.2z"
+      />
+      <path
+        fill="#000"
+        d="M56.3,73.3c0-3.2-2.6-5.8-5.8-5.8s-5.8,2.6-5.8,5.8c0,3.2,2.6,5.8,5.8,5.8S56.3,76.6,56.3,73.3z M56.5,36.5
+   c0-3.3-2.6-6-6-6s-5.9,2.7-5.9,6L46,57.7l0,0c0.2,2.4,2.2,4.2,4.5,4.2c4.5,0,4.5-4.2,4.5-4.2L56.5,36.5z"
+      />
+    </svg>
+  ),
   workflows: (
     <svg viewBox="0 0 100 100" fill="currentColor">
       <path d="M99 74c0 7.7-6.3 14-14 14s-14-6.3-14-14c0-1.1.1-2.2.4-3.2L50 58.6 28.6 70.8c.2 1 .4 2.1.4 3.2 0 7.7-6.3 14-14 14S1 81.7 1 74s6.3-14 14-14c3.7 0 7.1 1.5 9.6 3.9L46 51.7V27.4c-5.8-1.7-10-7.1-10-13.4 0-7.7 6.3-14 14-14s14 6.3 14 14c0 6.3-4.2 11.7-10 13.4v24.3l21.4 12.2c2.5-2.4 5.9-3.9 9.6-3.9 7.7 0 14 6.3 14 14zM14.1 51.9c.7-11.7 6.9-22 16.2-28-1.5-3-2.3-6.3-2.3-9.9v-.4C13.7 21.4 4 36.6 4 54v.8c3-1.7 6.4-2.7 10.1-2.9zm58-37.9c0 3.6-.8 6.9-2.3 9.9 9.3 6.1 15.5 16.3 16.2 28 3.6.2 7.1 1.2 10 2.9V54c0-17.4-9.7-32.6-23.9-40.4v.4zm-5.6 72C61.6 88.5 56 90 50 90s-11.5-1.4-16.5-4c-1.9 3-4.5 5.4-7.6 7.2 7 4.3 15.3 6.8 24.1 6.8s17.1-2.5 24.1-6.8C71 91.4 68.4 89 66.5 86z" />

package/src/components/inputs/SearchInput/SearchInput.stories.tsx

@@ -24,6 +24,10 @@ export const SearchIcon: Story = {
   args: { showSearchIcon: true },
 };
 
+export const BorderAndSearchIcon: Story = {
+  args: { border: true, showSearchIcon: true },
+};
+
 export const ClearInputIcon: Story = {
   args: { showClearInputIcon: true },
 };

package/src/components/inputs/SearchInput/SearchInput.styles.ts

@@ -17,6 +17,14 @@ export const StyledSearchField = styled.div<{
     top: 4px;
     left: 0;
     font-size: ${TYPOGRAPHY.fontSize.subheadSmall};
+
+    ${(props) =>
+      props.border &&
+      props.showSearchIcon &&
+      css`
+        top: 7px;
+        left: 5px;
+      `}
   }
 
   input {