Merge branch 'release' of https://github.com/appsmithorg/appsmith into release

app/client/src/assets/icons/ads/down_arrow.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="4" viewBox="0 0 6 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L3 4L6 0L0 0Z" fill="#6D6D6D"/>
+</svg>

app/client/src/components/ads/Button.tsx

@@ -248,7 +248,7 @@ const StyledButton = styled("button")<ThemeProp & ButtonProps>`
   color: ${props => btnColorStyles(props, "main").txtColor};
   border: ${props => btnColorStyles(props, "main").border};
   border-radius: ${props => props.theme.radii[0]};
-  font-family: ${props => props.theme.fonts[3]};
+  font-family: ${props => props.theme.fonts[2]};
   ${props => btnFontStyles(props).buttonFont};
   padding: ${props => btnFontStyles(props).padding};
   .ads-icon {

app/client/src/components/ads/Icon.tsx

@@ -23,8 +23,25 @@ const IconWrapper = styled.div<IconProps>`
   svg {
     width: ${props => sizeHandler(props)}px;
     height: ${props => sizeHandler(props)}px;
+    path {
+      fill: ${props => props.theme.colors.blackShades[4]};
+    }
   }
   visibility: ${props => (props.invisible ? "hidden" : "visible")};
+
+  &:hover {
+    cursor: pointer;
+    path {
+      fill: ${props => props.theme.colors.blackShades[6]};
+    }
+  }
+
+  &:active {
+    cursor: pointer;
+    path {
+      fill: ${props => props.theme.colors.blackShades[7]};
+    }
+  }
 `;
 
 export type IconProps = {

app/client/src/components/ads/Table.tsx

@@ -0,0 +1,145 @@
+import { useTable, useSortBy } from "react-table";
+import React from "react";
+import styled from "styled-components";
+import { ReactComponent as DownArrow } from "../../assets/icons/ads/down_arrow.svg";
+
+const Styles = styled.div`
+  table {
+    border-spacing: 0;
+    width: 100%;
+
+    thead {
+      tr {
+        background-color: ${props => props.theme.colors.blackShades[2]};
+
+        th:first-child {
+          padding: 0 ${props => props.theme.spaces[9]}px;
+        }
+
+        th {
+          padding: ${props => props.theme.spaces[5]}px 0;
+          text-align: left;
+          color: ${props => props.theme.colors.blackShades[5]};
+          font-weight: ${props => props.theme.fontWeights[1]};
+          font-size: ${props => props.theme.typography.h6.fontSize}px;
+          line-height: ${props => props.theme.typography.h6.lineHeight}px;
+          letter-spacing: ${props => props.theme.typography.h6.letterSpacing}px;
+          font-family: ${props => props.theme.fonts[2]};
+
+          svg {
+            margin-left: ${props => props.theme.spaces[2]}px;
+            margin-bottom: ${props => props.theme.spaces[0] + 1}px;
+          }
+
+          &:hover {
+            color: ${props => props.theme.colors.blackShades[7]};
+            cursor: pointer;
+            svg {
+              path {
+                fill: ${props => props.theme.colors.blackShades[7]};
+              }
+            }
+          }
+        }
+      }
+    }
+
+    tbody {
+      tr {
+        td:first-child {
+          color: ${props => props.theme.colors.blackShades[7]};
+          padding: 0 ${props => props.theme.spaces[9]}px;
+          font-weight: ${props => props.theme.fontWeights[1]};
+        }
+
+        td {
+          padding: ${props => props.theme.spaces[4]}px 0;
+          color: ${props => props.theme.colors.blackShades[6]};
+          font-size: ${props => props.theme.typography.p1.fontSize}px;
+          line-height: ${props => props.theme.typography.p1.lineHeight}px;
+          letter-spacing: ${props => props.theme.typography.p1.letterSpacing}px;
+          font-weight: normal;
+          font-family: ${props => props.theme.fonts[2]};
+          border-bottom: 1px solid ${props => props.theme.colors.blackShades[3]};
+        }
+
+        &:hover {
+          background-color: ${props => props.theme.colors.blackShades[4]};
+          .ads-icon {
+            path {
+              fill: ${props => props.theme.colors.blackShades[9]};
+            }
+          }
+          td:first-child {
+            color: ${props => props.theme.colors.blackShades[9]};
+          }
+          td {
+            color: ${props => props.theme.colors.blackShades[7]};
+          }
+        }
+      }
+    }
+  }
+`;
+
+function Table(props: any) {
+  const data = React.useMemo(() => props.data, []);
+
+  const columns = React.useMemo(() => props.columns, []);
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+  } = useTable({ columns, data }, useSortBy);
+
+  return (
+    <Styles>
+      <table {...getTableProps()}>
+        <thead>
+          {headerGroups.map((headerGroup, index) => (
+            <tr {...headerGroup.getHeaderGroupProps()} key={index}>
+              {headerGroup.headers.map((column, index) => (
+                <th
+                  {...column.getHeaderProps(column.getSortByToggleProps())}
+                  key={index}
+                >
+                  {column.render("Header")}
+                  {column.isSorted ? (
+                    column.isSortedDesc ? (
+                      " 🔼"
+                    ) : (
+                      <DownArrow />
+                    )
+                  ) : (
+                    ""
+                  )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row, index) => {
+            prepareRow(row);
+            return (
+              <tr {...row.getRowProps()} key={index}>
+                {row.cells.map((cell, index) => {
+                  return (
+                    <td {...cell.getCellProps()} key={index}>
+                      {cell.render("Cell")}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </Styles>
+  );
+}
+
+export default Table;

app/client/src/components/stories/Icon.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Icon } from "../ads/Icon";
+import Button, { Size, Category, Variant } from "components/ads/Button";
+import { withKnobs, select, boolean } from "@storybook/addon-knobs";
+import { withDesign } from "storybook-addon-designs";
+
+export default {
+  title: "Icon",
+  component: Icon,
+  decorators: [withKnobs, withDesign],
+};
+
+export const ButtonIcon = () => (
+  <Button
+    size={select("size", [Size.small, Size.medium, Size.large], Size.large)}
+    category={select(
+      "category",
+      [Category.primary, Category.secondary, Category.tertiary],
+      Category.primary,
+    )}
+    variant={select(
+      "variant",
+      [Variant.info, Variant.success, Variant.danger, Variant.warning],
+      Variant.info,
+    )}
+    icon={select("iconName", ["delete", "user"], "delete")}
+    isLoading={boolean("Loading", false)}
+    disabled={boolean("Disabled", false)}
+  ></Button>
+);
+
+export const BordelessIcon = () => (
+  <div>
+    <Icon
+      size={select("size", [Size.small, Size.medium, Size.large], Size.large)}
+      name={select("iconName", ["delete", "user"], "delete")}
+    />
+  </div>
+);

app/client/src/components/stories/Table.stories.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import Table from "../ads/Table";
+import Button, { Category, Variant, Size } from "../ads/Button";
+import { Icon } from "../ads/Icon";
+
+export default {
+  title: "Table",
+  component: Table,
+};
+
+const columns = [
+  {
+    Header: "NAME",
+    accessor: "col1", // accessor is the "key" in the data
+  },
+  {
+    Header: "EMAIL ID",
+    accessor: "col2",
+  },
+  {
+    Header: "ROLE",
+    accessor: "col3",
+  },
+  {
+    Header: "ACCESS LEVEL",
+    accessor: "col4",
+  },
+  {
+    Header: "STATUS",
+    accessor: "col5",
+  },
+  {
+    Header: "DELETE",
+    accessor: "col6",
+  },
+];
+
+const data = [
+  {
+    col1: "Dustin Howard",
+    col2: "dustin_01@jlegue.com",
+    col3: "Developer",
+    col4: "App Access",
+    col5: (
+      <Button
+        category={Category.primary}
+        variant={Variant.info}
+        size={Size.small}
+        text={"approve"}
+      />
+    ),
+    col6: <Icon name={"delete"} size={Size.large} />,
+  },
+  {
+    col1: "Austin Howard",
+    col2: "dustin_02@jlegue.com",
+    col3: "User",
+    col4: "Map Access",
+    col5: (
+      <Button
+        category={Category.primary}
+        variant={Variant.success}
+        size={Size.small}
+        text={"accepted"}
+      />
+    ),
+    col6: <Icon name={"delete"} size={Size.large} />,
+  },
+  {
+    col1: "Justing Howard",
+    col2: "dustin_03@jlegue.com",
+    col3: "Admin",
+    col4: "Dm Access",
+    col5: (
+      <Button
+        category={Category.primary}
+        variant={Variant.warning}
+        size={Size.small}
+        text={"on hold"}
+      />
+    ),
+    col6: <Icon name={"delete"} size={Size.large} />,
+  },
+];
+
+export const AdsTable = () => (
+  <div style={{ background: "#131216", padding: "50px" }}>
+    <Table columns={columns} data={data}></Table>
+  </div>
+);