feat: Add icons for stacks and allow using multi-line table headers (#…

…597)

package.json

@@ -143,4 +143,4 @@
   "lint-staged": {
     "./src/**/*.{js,jsx,ts,tsx}": "prettier --write"
   }
-}
+}

src/components/Table.tsx

@@ -204,6 +204,8 @@ const Th = styled.th<{
   top: 0,
   zIndex: 4,
   '.thOuterWrap': {
+    alignItems: 'center',
+    display: 'flex',
     position: 'relative',
     backgroundColor: theme.colors['fill-two'],
     zIndex: 4,
@@ -212,7 +214,7 @@ const Th = styled.th<{
     height: 48,
     minHeight: 48,
     whiteSpace: 'nowrap',
-    padding: '14px 12px',
+    padding: '0 12px',
     textAlign: 'left',
     ...(cursor ? { cursor } : {}),
     '.thSortIndicatorWrap': {

src/components/icons/AnsibleIcon.tsx

@@ -0,0 +1,14 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    viewBox="0 0 512 512"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill={color}>
+      <path d="m260.8456726 115.0143204 89.6253662 221.2051086-135.3775177-106.6378097zm251.1543274 140.9856796c0 196.3383179-214.0074463 319.7159424-384.2888794 221.546814s-170.2814941-344.9244995-.000061-443.093689 384.2889404 25.2085571 384.2889404 221.546875zm-91.9366455 131.1765747-137.861969-331.7742691c-7.2346802-19.6264496-35.9119873-19.2634583-43.3018036 0l-151.3127746 363.9148026h51.7616882l59.8983765-150.0432129 178.7501678 144.4087219c21.8892822 20.6537475 53.0055542-.0903931 42.0663147-26.5060425z" />
+    </g>
+  </svg>
+))

src/components/icons/TerraformIcon.tsx

@@ -0,0 +1,17 @@
+import createIcon from './createIcon'
+
+export default createIcon(({ size, color }) => (
+  <svg
+    width={size}
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g fill={color}>
+      <path d="m12.042 6.858 8.029 4.59v9.014l-8.029-4.594z" />
+      <path d="m20.5 20.415 7.959-4.575v-8.953l-7.959 4.542z" />
+      <path d="m3.541 11.01 8.03 4.589v-9.009l-8.03-4.59z" />
+      <path d="m12.042 25.41 8.029 4.59v-9.043l-8.029-4.589z" />
+    </g>
+  </svg>
+))

src/icons.ts

@@ -1,4 +1,5 @@
 export { default as AmazonLogoIcon } from './components/icons/AmazonLogoIcon'
+export { default as AnsibleIcon } from './components/icons/AnsibleIcon'
 export { default as ApiIcon } from './components/icons/ApiIcon'
 export { default as AppleLogoIcon } from './components/icons/AppleLogoIcon'
 export { default as AppsIcon } from './components/icons/AppsIcon'
@@ -175,6 +176,7 @@ export { default as SuitcaseIcon } from './components/icons/SuitcaseIcon'
 export { default as TableIcon } from './components/icons/TableIcon'
 export { default as TagIcon } from './components/icons/TagIcon'
 export { default as TerminalIcon } from './components/icons/TerminalIcon'
+export { default as TerraformIcon } from './components/icons/TerraformIcon'
 export { default as TestTubeIcon } from './components/icons/TestTubeIcon'
 export { default as ThumbsDownIcon } from './components/icons/ThumbsDownIcon'
 export { default as ThumbsUpFilledIcon } from './components/icons/ThumbsUpFilledIcon'

src/stories/Table.stories.tsx

@@ -105,7 +105,12 @@ const columns = [
     enableGlobalFilter: true,
     enableSorting: true,
     cell: (info: any) => info.getValue(),
-    header: () => <span>Function</span>,
+    header: () => (
+      <div css={{ display: 'flex', flexDirection: 'column' }}>
+        <div>Function</div>
+        <div css={{ fontSize: 12, fontWeight: 400 }}>Caption</div>
+      </div>
+    ),
   }),
   columnHelper.accessor((row) => row.id, {
     id: 'id',