From ac91bedb984cc1c6d27c73b785be8bd7328b9c04 Mon Sep 17 00:00:00 2001 From: satbir121 <39981226+satbir121@users.noreply.github.com> Date: Mon, 17 Aug 2020 08:55:35 +0530 Subject: [PATCH 1/2] Table component ads (#251) * Adding blank components. * Adding Todo note for tree * Adding todo note for LighteningMenu * ads button component * Adding storybook support. * storybook integrated with button component * ads button component props completed * button component icon and loading logic implemented * button component completed * Added a text knob. * Adding default text for button. * Merging theme and other fixes. * Fixed info button. * Better types. * Adding background param to components. * Re-using vsariant for callount. * Added props for Text input. * Adding text component. * feedback changes added in button and icon component * type any removed in button component * function naming corrected * table component ui and sorting implemented * table component default sorting implemented * Fixing spinner issues * Fixing bad merge * table feedback implemented * merge conflict resolved Co-authored-by: Rohit Kumawat --- .../src/assets/icons/ads/down_arrow.svg | 3 + app/client/src/components/ads/Button.tsx | 2 +- app/client/src/components/ads/Icon.tsx | 17 ++ app/client/src/components/ads/Table.tsx | 145 ++++++++++++++++++ .../src/components/stories/Icon.stories.tsx | 39 +++++ .../src/components/stories/Table.stories.tsx | 90 +++++++++++ 6 files changed, 295 insertions(+), 1 deletion(-) create mode 100644 app/client/src/assets/icons/ads/down_arrow.svg create mode 100644 app/client/src/components/ads/Table.tsx create mode 100644 app/client/src/components/stories/Icon.stories.tsx create mode 100644 app/client/src/components/stories/Table.stories.tsx 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..1ae1834b97 --- /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: ( + );