From db0c164174999d355a72c8bd8ff2c2490479a8a2 Mon Sep 17 00:00:00 2001
From: Marcin Maciaszczyk <marcin@plural.sh>
Date: Mon, 27 May 2024 14:43:46 +0200
Subject: [PATCH] feat: Add icons for stacks and allow using multi-line table
 headers (#597)

---
 package.json                           |  2 +-
 src/components/Table.tsx               |  4 +++-
 src/components/icons/AnsibleIcon.tsx   | 14 ++++++++++++++
 src/components/icons/TerraformIcon.tsx | 17 +++++++++++++++++
 src/icons.ts                           |  2 ++
 src/stories/Table.stories.tsx          |  7 ++++++-
 6 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 src/components/icons/AnsibleIcon.tsx
 create mode 100644 src/components/icons/TerraformIcon.tsx

diff --git a/package.json b/package.json
index 0ae1f461..24011ddd 100644
--- a/package.json
+++ b/package.json
@@ -143,4 +143,4 @@
   "lint-staged": {
     "./src/**/*.{js,jsx,ts,tsx}": "prettier --write"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index 6a9ce00a..e82789d2 100644
--- a/src/components/Table.tsx
+++ b/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': {
diff --git a/src/components/icons/AnsibleIcon.tsx b/src/components/icons/AnsibleIcon.tsx
new file mode 100644
index 00000000..9215baf2
--- /dev/null
+++ b/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>
+))
diff --git a/src/components/icons/TerraformIcon.tsx b/src/components/icons/TerraformIcon.tsx
new file mode 100644
index 00000000..03f03185
--- /dev/null
+++ b/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>
+))
diff --git a/src/icons.ts b/src/icons.ts
index 60517829..79667fa2 100644
--- a/src/icons.ts
+++ b/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'
diff --git a/src/stories/Table.stories.tsx b/src/stories/Table.stories.tsx
index 13a31650..9af69fcb 100644
--- a/src/stories/Table.stories.tsx
+++ b/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',