diff --git a/app/client/src/assets/icons/ads/down_arrow.svg b/app/client/src/assets/icons/ads/down_arrow.svg new file mode 100644 index 0000000000..bf868b04ee --- /dev/null +++ b/app/client/src/assets/icons/ads/down_arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/client/src/components/ads/Button.tsx b/app/client/src/components/ads/Button.tsx index 9713ee73c6..6816609157 100644 --- a/app/client/src/components/ads/Button.tsx +++ b/app/client/src/components/ads/Button.tsx @@ -248,7 +248,7 @@ const StyledButton = styled("button")` 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 { diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index 76071088e2..8cb876cb1a 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -23,8 +23,25 @@ const IconWrapper = styled.div` 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 = { diff --git a/app/client/src/components/ads/Table.tsx b/app/client/src/components/ads/Table.tsx new file mode 100644 index 0000000000..87c6128ffa --- /dev/null +++ b/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 ( + + + + {headerGroups.map((headerGroup, index) => ( + + {headerGroup.headers.map((column, index) => ( + + ))} + + ))} + + + {rows.map((row, index) => { + prepareRow(row); + return ( + + {row.cells.map((cell, index) => { + return ( + + ); + })} + + ); + })} + +
+ {column.render("Header")} + {column.isSorted ? ( + column.isSortedDesc ? ( + " 🔼" + ) : ( + + ) + ) : ( + "" + )} +
+ {cell.render("Cell")} +
+ + ); +} + +export default Table; diff --git a/app/client/src/components/stories/Icon.stories.tsx b/app/client/src/components/stories/Icon.stories.tsx new file mode 100644 index 0000000000..abe8509877 --- /dev/null +++ b/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 = () => ( + +); + +export const BordelessIcon = () => ( +
+ +
+); diff --git a/app/client/src/components/stories/Table.stories.tsx b/app/client/src/components/stories/Table.stories.tsx new file mode 100644 index 0000000000..5144f8ae7f --- /dev/null +++ b/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: ( +