From a022a810598f39a417ac1f595d5fb229ab645aec Mon Sep 17 00:00:00 2001 From: Fran McDade Date: Thu, 26 Oct 2023 17:30:32 +1000 Subject: [PATCH] feat: update summary and export ui (#428) --- .../components/Summaries/summaries.styles.ts | 31 ++++++++++++++ .../Hero/components/Summaries/summaries.tsx | 19 +++++---- .../Index/components/Hero/hero.styles.ts | 42 +++++++++++++++---- .../src/components/Index/index.styles.ts | 7 +++- .../src/components/Table/table.tsx | 7 ++-- .../src/components/common/Dot/dot.tsx | 8 +++- 6 files changed, 90 insertions(+), 24 deletions(-) create mode 100644 packages/data-explorer-ui/src/components/Index/components/Hero/components/Summaries/summaries.styles.ts diff --git a/packages/data-explorer-ui/src/components/Index/components/Hero/components/Summaries/summaries.styles.ts b/packages/data-explorer-ui/src/components/Index/components/Hero/components/Summaries/summaries.styles.ts new file mode 100644 index 00000000..f9383ffd --- /dev/null +++ b/packages/data-explorer-ui/src/components/Index/components/Hero/components/Summaries/summaries.styles.ts @@ -0,0 +1,31 @@ +import styled from "@emotion/styled"; +import { + mediaTabletDown, + mediaTabletUp, +} from "../../../../../../styles/common/mixins/breakpoints"; +import { Dot as DXDot } from "../../../../../common/Dot/dot"; + +export const Summary = styled.div` + display: flex; + flex: 1; + flex-direction: column; + gap: 4px; + + .MuiTypography-text-body-small-400 { + -webkit-box-orient: vertical; + display: -webkit-box; + -webkit-line-clamp: 1; + overflow: hidden; + } + + ${mediaTabletUp} { + flex: none; + flex-direction: row; + } +`; + +export const Dot = styled(DXDot)` + ${mediaTabletDown} { + display: none; + } +`; diff --git a/packages/data-explorer-ui/src/components/Index/components/Hero/components/Summaries/summaries.tsx b/packages/data-explorer-ui/src/components/Index/components/Hero/components/Summaries/summaries.tsx index d09ae4cf..60738ef2 100644 --- a/packages/data-explorer-ui/src/components/Index/components/Hero/components/Summaries/summaries.tsx +++ b/packages/data-explorer-ui/src/components/Index/components/Hero/components/Summaries/summaries.tsx @@ -1,11 +1,14 @@ import { Typography } from "@mui/material"; -import React, { Fragment } from "react"; -import { Dot } from "../../../../../common/Dot/dot"; -import { Stack } from "../../../../../common/Stack/stack"; +import React, { Fragment, ReactNode } from "react"; +import { + TEXT_BODY_SMALL_400, + TEXT_BODY_SMALL_500, +} from "../../../../../../theme/common/typography"; +import { Dot, Summary } from "./summaries.styles"; export interface Summary { count: string; - label: string; + label: ReactNode; } export interface SummariesProps { @@ -19,12 +22,12 @@ export const Summaries = ({ summaries }: SummariesProps): JSX.Element => { summaries.map(({ count, label }, c) => ( {c !== 0 && } - - {count} - + + {count} + {label} - + ))} diff --git a/packages/data-explorer-ui/src/components/Index/components/Hero/hero.styles.ts b/packages/data-explorer-ui/src/components/Index/components/Hero/hero.styles.ts index a2d7aef7..ee1577b4 100644 --- a/packages/data-explorer-ui/src/components/Index/components/Hero/hero.styles.ts +++ b/packages/data-explorer-ui/src/components/Index/components/Hero/hero.styles.ts @@ -1,5 +1,8 @@ import styled from "@emotion/styled"; -import { mediaDesktopSmallUp } from "../../../../styles/common/mixins/breakpoints"; +import { + mediaDesktopSmallUp, + mediaTabletUp, +} from "../../../../styles/common/mixins/breakpoints"; import { ButtonPrimary } from "../../../common/Button/components/ButtonPrimary/buttonPrimary"; interface Props { @@ -9,17 +12,28 @@ interface Props { export const HeroLayout = styled.div` align-items: center; display: grid; - grid-template-columns: 1fr auto; gap: 16px; + grid-template-columns: 1fr; + padding: 0 16px; + + ${mediaTabletUp} { + grid-template-columns: 1fr auto; + padding: 0; + } `; export const Widgets = styled.div` align-items: center; display: flex; - height: 40px; - justify-self: flex-start; + height: 60px; + + ${mediaTabletUp} { + height: 40px; + justify-self: flex-start; + } ${mediaDesktopSmallUp} { + grid-column: 2; justify-self: flex-end; } `; @@ -27,17 +41,27 @@ export const Widgets = styled.div` export const SummaryWidget = styled.div` align-items: center; border: 1px solid ${({ theme }) => theme.palette.smoke.main}; - border-radius: ${({ buttonWidget }) => - buttonWidget ? "4px 0 0 4px" : "4px"}; - display: grid; + border-radius: 4px; + display: flex; gap: 0 8px; - grid-auto-flow: column; + flex: 1; height: inherit; - padding: 0 16px; + padding: 12px 16px; + + ${mediaTabletUp} { + border-radius: ${({ buttonWidget }) => + buttonWidget ? "4px 0 0 4px" : "4px"}; + flex: none; + } `; export const ExportButton = styled(ButtonPrimary)` border-bottom-left-radius: 0; border-top-left-radius: 0; + display: none; margin-left: -1px; + + ${mediaTabletUp} { + display: block; + } `; diff --git a/packages/data-explorer-ui/src/components/Index/index.styles.ts b/packages/data-explorer-ui/src/components/Index/index.styles.ts index fac81a49..8df55255 100644 --- a/packages/data-explorer-ui/src/components/Index/index.styles.ts +++ b/packages/data-explorer-ui/src/components/Index/index.styles.ts @@ -1,8 +1,13 @@ import styled from "@emotion/styled"; +import { mediaTabletUp } from "../../styles/common/mixins/breakpoints"; export const Index = styled.div` display: grid; flex: 1; gap: 16px; - padding: 24px; + padding: 24px 0; + + ${mediaTabletUp} { + padding: 24px; + } `; diff --git a/packages/data-explorer-ui/src/components/Table/table.tsx b/packages/data-explorer-ui/src/components/Table/table.tsx index 96ed0d45..7911ec98 100644 --- a/packages/data-explorer-ui/src/components/Table/table.tsx +++ b/packages/data-explorer-ui/src/components/Table/table.tsx @@ -36,7 +36,7 @@ import { ListViewConfig } from "../../config/entities"; import { useExploreState } from "../../hooks/useExploreState"; import { useScroll } from "../../hooks/useScroll"; import { EntityView, ExploreActionKind } from "../../providers/exploreState"; -import { GridPaper, RoundedPaper } from "../common/Paper/paper.styles"; +import { FluidPaper, GridPaper } from "../common/Paper/paper.styles"; import { NoResults } from "../NoResults/noResults"; import { buildCategoryViews, @@ -315,7 +315,7 @@ TableProps): JSX.Element => { return noResults ? ( ) : ( - + {editColumnOptions && ( @@ -427,10 +427,9 @@ TableProps): JSX.Element => { /> )} - + ); }; // TODO(Dave) review whether memo is necessary - flash between tabs / loading state. export const Table = React.memo(TableComponent) as typeof TableComponent; -//export const Table = TableComponent as typeof TableComponent; diff --git a/packages/data-explorer-ui/src/components/common/Dot/dot.tsx b/packages/data-explorer-ui/src/components/common/Dot/dot.tsx index f2b73420..636bfb15 100644 --- a/packages/data-explorer-ui/src/components/common/Dot/dot.tsx +++ b/packages/data-explorer-ui/src/components/common/Dot/dot.tsx @@ -1,6 +1,10 @@ import React from "react"; import { DotSeparator } from "./dot.styles"; -export const Dot = (): JSX.Element => { - return ; +export interface DotProps { + className?: string; +} + +export const Dot = ({ className }: DotProps): JSX.Element => { + return ; };