Add additional icons and updates some styles (#565)

nordcloud · Mar 7, 2023 · ee02e52 · ee02e52
1 parent f587f2e
commit ee02e52
Show file tree

Hide file tree

Showing 10 changed files with 80 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/src/components/extendedTooltip/ExtendedTooltip.tsx b/src/components/extendedTooltip/ExtendedTooltip.tsx
@@ -172,7 +172,7 @@ const TooltipWrapper = styled.div<TooltipWrapperProps>`
 function getColor(status: Status) {
   return css`
     background-color: ${setColor(status)};
-    color: ${theme.color.text.text01};
+    color: ${theme.color.text.text04};
     &:after {
       border-top-color: ${setColor(status)};
     }

diff --git a/src/components/svgicon/SVGIcon.stories.mdx b/src/components/svgicon/SVGIcon.stories.mdx
@@ -968,6 +968,24 @@ import { Text } from "../text";
           </Text>
         </FlexContainer>
       </CopyToClipboard>
+      <CopyToClipboard text="refreshSuccess">
+        <FlexContainer direction="column">
+          <SVGIcon name="refreshSuccess" />
+          <Text size="xs" mt=".25rem">
+            refreshSuccess
+          </Text>
+        </FlexContainer>
+      </CopyToClipboard>
+    </FlexContainer>
+    <FlexContainer justifyContent="space-evenly">
+      <CopyToClipboard text="refreshWarning">
+        <FlexContainer direction="column">
+          <SVGIcon name="refreshWarning" />
+          <Text size="xs" mt=".25rem">
+            refreshWarning
+          </Text>
+        </FlexContainer>
+      </CopyToClipboard>
     </FlexContainer>
   </Story>
 </Canvas>
@@ -1498,6 +1516,14 @@ import { Text } from "../text";
           </Text>
         </FlexContainer>
       </CopyToClipboard>
+      <CopyToClipboard text="benefit">
+        <FlexContainer direction="column">
+          <SVGIcon name="benefit" />
+          <Text size="xs" mt=".25rem">
+            benefit
+          </Text>
+        </FlexContainer>
+      </CopyToClipboard>
     </FlexContainer>
   </Story>
 </Canvas>

diff --git a/src/components/svgicon/SVGIcon.tsx b/src/components/svgicon/SVGIcon.tsx
@@ -8,6 +8,7 @@ const StyledSVGIcon = styled.svg<Pick<SVGIconProps, "color" | "size">>`
   fill: ${theme.color.text.text01};
   width: ${theme.iconSize.md};
   height: ${theme.iconSize.md};
+  vertical-align: middle;
 
   ${({ color }) =>
     color &&

diff --git a/src/components/svgicon/icons/resource-categories.tsx b/src/components/svgicon/icons/resource-categories.tsx
@@ -325,4 +325,20 @@ export const resourceCategories = {
       />
     </>
   ),
+  benefit: (
+    <>
+      <path
+        d="m2,23.25c-.38-.16-.5-.44-.5-.85.02-1.6,0-3.2,0-4.8,0-.57.24-.8.81-.8.57,0,1.14,0,1.7,0h.24c.04-.17.07-.32.12-.46.3-.85.94-1.27,1.8-1.47,1.56-.36,3.03-.13,4.44.61.38.2.78.38,1.18.5.36.11.74.17,1.11.18.65.03,1.3,0,1.94,0,.5,0,.75.26.74.76-.01.58-.19,1.11-.49,1.61-.03.05-.07.11-.13.2.31,0,.59,0,.87,0,.07,0,.13-.08.19-.13.61-.61,1.21-1.22,1.82-1.82,1.19-1.17,3.02-1.25,4.28-.17.48.41.49.77.05,1.21-1.48,1.48-2.97,2.96-4.44,4.45-.5.51-1.08.86-1.79.96-.02,0-.04.02-.06.03H2Zm3.58-1.31c.1,0,.18,0,.26,0,3.18,0,6.36,0,9.54,0,.56,0,1.01-.18,1.4-.58,1.28-1.3,2.58-2.59,3.87-3.88.05-.05.1-.1.15-.16-.03-.02-.04-.04-.06-.05-.05-.02-.11-.04-.16-.06-.71-.18-1.32,0-1.84.51-.66.66-1.32,1.31-1.97,1.98-.23.24-.48.34-.81.34-2.25-.01-4.5-.01-6.75-.01-.07,0-.15,0-.22,0-.33-.04-.57-.31-.57-.64,0-.4.3-.67.75-.67,1.07,0,2.14.01,3.21,0,.79,0,1.35-.39,1.71-1.08.02-.05.03-.1.05-.17-.42,0-.81,0-1.2,0-.6,0-1.19-.09-1.75-.32-.53-.22-1.06-.44-1.57-.7-1.11-.55-2.25-.57-3.42-.24-.38.11-.61.38-.61.75,0,1.64,0,3.29,0,4.97Zm-2.75-3.82v3.81h1.42v-3.81h-1.42Z"
+        fill="#5ea136"
+      />
+      <path
+        d="m12,14.47c-3.72,0-6.75-3.03-6.75-6.75S8.28.97,12,.97s6.75,3.03,6.75,6.75-3.03,6.75-6.75,6.75Zm0-11.75c-2.76,0-5,2.24-5,5s2.24,5,5,5,5-2.24,5-5-2.24-5-5-5Z"
+        fill="#5ea136"
+      />
+      <path
+        d="m11.51,11.59c-.06,0-.11-.02-.15-.06-.04-.04-.06-.09-.06-.15v-.6c-.44-.05-.8-.16-1.1-.33s-.51-.37-.66-.6-.23-.48-.24-.74c0-.05.02-.09.06-.12s.08-.06.13-.06h1.08c.08,0,.14.01.18.04s.08.07.12.11c.05.08.11.17.19.25.08.08.19.14.32.19.13.05.3.07.5.07.33,0,.58-.05.75-.15s.25-.24.25-.42c0-.13-.05-.24-.14-.32-.09-.08-.24-.15-.44-.22s-.47-.13-.81-.2c-.43-.09-.8-.21-1.11-.35s-.54-.34-.7-.57c-.16-.24-.24-.53-.24-.88,0-.46.16-.84.49-1.16.33-.32.78-.52,1.35-.6v-.6c0-.06.02-.11.06-.15.04-.04.09-.06.15-.06h.71c.06,0,.11.02.15.06s.06.09.06.15v.62c.39.07.72.19.99.37.27.18.47.38.61.6.14.22.21.44.22.64,0,.05-.02.09-.05.12s-.08.06-.13.06h-1.13c-.06,0-.12-.01-.16-.03-.05-.02-.09-.06-.12-.11-.03-.12-.12-.23-.27-.33-.15-.09-.34-.14-.56-.14-.25,0-.45.04-.59.13-.14.09-.21.22-.21.41,0,.11.04.21.12.3.08.08.21.16.38.22s.43.13.74.2c.52.1.94.22,1.26.36.32.15.55.33.7.56.15.23.22.52.22.87s-.08.63-.25.89c-.17.26-.4.46-.7.62-.3.16-.66.26-1.06.32v.6c0,.06-.02.11-.06.15-.04.04-.09.06-.15.06h-.71Z"
+        fill="#5ea136"
+      />
+    </>
+  ),
 };
diff --git a/src/components/svgicon/icons/ui.tsx b/src/components/svgicon/icons/ui.tsx
@@ -1248,4 +1248,18 @@ export const uiIcons = {
       <path d="M10.75,14.78c-.82-.03-1.46-.64-1.52-1.47-.06-.78,.49-1.5,1.28-1.62,.4-.06,.7-.24,.98-.52,1.65-1.66,3.31-3.32,4.97-4.98,.33-.32,.52-.67,.51-1.14,0-.44,.18-.83,.5-1.14,.67-.67,1.34-1.35,2.02-2.01,.07-.07,.24-.15,.3-.12,.09,.05,.15,.2,.16,.31,.03,.47,.04,.94,.05,1.41,.01,.34,.16,.49,.49,.5,.48,.02,.96,.02,1.44,.05,.1,0,.24,.07,.28,.15,.03,.06-.03,.22-.09,.28-.7,.71-1.4,1.42-2.12,2.11-.31,.3-.71,.44-1.14,.43-.39,0-.69,.14-.96,.41-1.73,1.73-3.46,3.46-5.19,5.19-.22,.22-.34,.47-.38,.77-.12,.83-.79,1.4-1.58,1.38Z" />
     </>
   ),
+  refreshSuccess: (
+    <>
+      <path d="m21.28,13.3c-.47-.11-.94.18-1.05.65-.9,3.76-4.23,6.38-8.1,6.38-3.49,0-6.53-2.13-7.76-5.31l1.46.29c.48.09.94-.21,1.03-.69.09-.47-.21-.93-.69-1.03l-2.52-.5c-.93-.19-1.82.42-2.01,1.34l-.5,2.52c-.09.47.21.93.69,1.03.06.01.12.02.17.02.41,0,.77-.29.86-.7l.17-.95c1.64,3.45,5.12,5.73,9.09,5.73,4.68,0,8.71-3.18,9.8-7.73.11-.47-.18-.94-.65-1.05Z" />
+      <path d="m22.17,5.95c-.48-.08-.93.21-1.03.69l-.12.63c-1.71-3.24-5.09-5.35-8.91-5.35C7.44,1.92,3.41,5.09,2.32,9.64c-.11.47.18.94.65,1.05.07.02.14.02.21.02.39,0,.75-.27.85-.67.9-3.75,4.23-6.37,8.1-6.37,3.48,0,6.51,2.12,7.75,5.28l-1.7-.34c-.47-.09-.93.21-1.03.69-.09.47.21.93.69,1.03l2.52.5c.11.02.22.03.33.03.8,0,1.51-.56,1.67-1.37l.5-2.52c.09-.47-.21-.94-.69-1.03Z" />
+      <path d="m10.97,14.96c.22,0,.45-.08.62-.26l4.17-4.17c.34-.34.34-.9,0-1.24-.34-.34-.9-.34-1.24,0l-3.55,3.55-1.24-1.24c-.34-.34-.9-.34-1.24,0-.34.34-.34.9,0,1.24l1.86,1.86c.17.17.4.26.62.26Z" />
+    </>
+  ),
+  refreshWarning: (
+    <>
+      <path d="m21.28,13.3c-.47-.11-.94.18-1.05.65-.9,3.76-4.23,6.38-8.1,6.38-3.49,0-6.53-2.13-7.76-5.31l1.46.29c.47.09.94-.21,1.03-.69.09-.47-.21-.93-.69-1.03l-2.52-.5c-.93-.19-1.82.42-2.01,1.34l-.5,2.52c-.09.47.21.93.69,1.03.06.01.12.02.17.02.41,0,.77-.29.86-.7l.17-.95c1.64,3.45,5.12,5.73,9.09,5.73,4.68,0,8.71-3.18,9.8-7.73.11-.47-.18-.94-.65-1.05Z" />
+      <path d="m22.17,5.95c-.48-.08-.93.21-1.03.69l-.12.63c-1.71-3.24-5.09-5.35-8.91-5.35C7.44,1.92,3.41,5.09,2.32,9.64c-.11.47.18.94.65,1.05.07.02.14.02.21.02.39,0,.75-.27.85-.67.9-3.75,4.23-6.37,8.1-6.37,3.48,0,6.51,2.12,7.75,5.28l-1.7-.34c-.47-.09-.93.21-1.03.69-.09.47.21.93.69,1.03l2.52.5c.11.02.22.03.33.03.8,0,1.51-.56,1.67-1.37l.5-2.52c.09-.47-.21-.94-.69-1.03Z" />
+      <path d="m11.19,16.88c-.1,0-.18-.03-.24-.1-.06-.07-.09-.14-.09-.23v-1.63c0-.1.03-.18.09-.25.06-.07.14-.1.24-.1h1.63c.09,0,.17.03.23.1s.1.15.1.25v1.63c0,.09-.03.17-.1.23s-.14.1-.23.1h-1.63Zm.05-2.93c-.1,0-.18-.03-.24-.1s-.09-.14-.09-.23v-5.68c0-.1.03-.18.09-.24s.14-.09.24-.09h1.52c.1,0,.18.03.24.09s.09.14.09.24v5.68c0,.09-.03.17-.09.23s-.14.1-.24.1h-1.52Z" />
+    </>
+  ),
 };
diff --git a/src/components/table/Table.stories.mdx b/src/components/table/Table.stories.mdx
@@ -3,6 +3,7 @@ import { Table } from ".";
 import { Box } from "../box";
 import { Input } from "../input";
 import { Button } from "../button";
+import { SVGIcon } from "../svgicon";
 import { FlexContainer } from "../container";
 
 <Meta title="Components/Table" component={Table} />
@@ -25,23 +26,33 @@ import { FlexContainer } from "../container";
     <Table>
       <Table.thead>
         <Table.tr>
+          <Table.th></Table.th>
           <Table.th>Name</Table.th>
           <Table.th>Title</Table.th>
           <Table.th>Phone</Table.th>
         </Table.tr>
       </Table.thead>
       <Table.tbody>
         <Table.tr>
+          <Table.td>
+            <SVGIcon name="user" />
+          </Table.td>
           <Table.td>Kathy C. Do</Table.td>
           <Table.td>Director</Table.td>
           <Table.td>+48 XXX-XXX-XXX</Table.td>
         </Table.tr>
         <Table.tr>
+          <Table.td>
+            <SVGIcon name="user" />
+          </Table.td>
           <Table.td>James D. Washington</Table.td>
           <Table.td>Developer</Table.td>
           <Table.td>+48 XXX-XXX-XXX</Table.td>
         </Table.tr>
         <Table.tr>
+          <Table.td>
+            <SVGIcon name="user" />
+          </Table.td>
           <Table.td>Elaine R. Bean</Table.td>
           <Table.td>Product Owner</Table.td>
           <Table.td>+48 XXX-XXX-XXX</Table.td>

diff --git a/src/theme/dark.ts b/src/theme/dark.ts
@@ -47,22 +47,22 @@ const DARK_COLORS = [
   ["--interactive-infoActive", palette.blue.blue600],
   ["--interactive-disabled", palette.darkGrey.darkGrey200],
   ["--support-red", palette.red.red400],
-  ["--support-redInverse", palette.darkGrey.darkGrey100],
+  ["--support-redInverse", palette.red.redTransparent],
   ["--support-pink", palette.pink.pink400],
   ["--support-purple", palette.purple.purple400],
   ["--support-indigo", palette.indigo.indigo300],
   ["--support-blue", palette.blue.blue400],
-  ["--support-blueInverse", palette.darkGrey.darkGrey100],
+  ["--support-blueInverse", palette.blue.blueTransparent],
   ["--support-grey", palette.grey.grey800],
   ["--support-greyInverse", palette.grey.grey300],
   ["--support-cyan", palette.cyan.cyan400],
   ["--support-teal", palette.teal.teal400],
   ["--support-green", palette.lightGreen.lightGreen400],
-  ["--support-greenInverse", palette.darkGrey.darkGrey100],
+  ["--support-greenInverse", palette.green.greenTransparent],
   ["--support-lightGreen", palette.lightGreen.lightGreen400],
   ["--support-yellow", palette.yellow.yellow400],
   ["--support-orange", palette.orange.orange400],
-  ["--support-orangeInverse", palette.darkGrey.darkGrey100],
+  ["--support-orangeInverse", palette.orange.orangeTransparent],
 ];
 
 export default DARK_COLORS;
diff --git a/src/theme/palette.ts b/src/theme/palette.ts
@@ -40,6 +40,7 @@ export const palette = {
     red600: "#e53935",
     red700: "#d32f2f",
     red800: "#c62828",
+    redTransparent: "#c6282880",
   },
   pink: {
     pink100: "#f8bbd0",
@@ -80,6 +81,7 @@ export const palette = {
     blue600: "#1e88e5",
     blue700: "#1976d2",
     blue800: "#1565c0",
+    blueTransparent: "#1565c080",
   },
   deepBlue: {
     deepBlue100: "#c0daf8",
@@ -120,6 +122,7 @@ export const palette = {
     green600: "#43a047",
     green700: "#388e3c",
     green800: "#1b5e20",
+    greenTransparent: "#1b5e2080",
   },
   lightGreen: {
     lightGreen100: "#dcedc8",
@@ -150,5 +153,6 @@ export const palette = {
     orange600: "#fb8c00",
     orange700: "#f57c00",
     orange800: "#ef6c00",
+    orangeTransparent: "#ef6c0080",
   },
 } as const;