From 548cff9ceedcb552bc8e771bee7459a69ec20eb0 Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 1 Dec 2023 09:58:31 +0530 Subject: [PATCH 1/7] add more colors in text component --- .../src/components/Text/Text.module.scss | 22 ++++++-- .../src/components/Text/Text.stories.tsx | 54 ++++++++++++++----- packages/opub-ui/src/types/text.ts | 14 +++-- 3 files changed, 66 insertions(+), 24 deletions(-) diff --git a/packages/opub-ui/src/components/Text/Text.module.scss b/packages/opub-ui/src/components/Text/Text.module.scss index f7b93283..96bbe3f4 100644 --- a/packages/opub-ui/src/components/Text/Text.module.scss +++ b/packages/opub-ui/src/components/Text/Text.module.scss @@ -36,14 +36,14 @@ text-align: justify; } -.default { - color: var(--text-default); -} - .inherit { color: inherit; } +.default { + color: var(--text-default); +} + .disabled { color: var(--text-disabled); } @@ -64,10 +64,22 @@ color: var(--text-subdued); } -.text-inverse { +.highlight { + color: var(--text-highlight); +} + +.interactive { + color: var(--text-interactive); +} + +.onBgDefault { color: var(--text-onbg-default); } +.onBgDisabled { + color: var(--text-onbg-disabled); +} + .regular { font-weight: 400; } diff --git a/packages/opub-ui/src/components/Text/Text.stories.tsx b/packages/opub-ui/src/components/Text/Text.stories.tsx index a3c1fadf..9ebcd904 100644 --- a/packages/opub-ui/src/components/Text/Text.stories.tsx +++ b/packages/opub-ui/src/components/Text/Text.stories.tsx @@ -40,6 +40,9 @@ export const Variants = () => ( Text with HeadingXs variant + + Text with headingSmSpaced variant + Text with BodyLg variant @@ -91,30 +94,53 @@ export const WithFontWeight = () => ( ); export const WithColor = () => ( - + + + Default Text is used to communicate the majority of information on the + - Use to de-emphasize a piece of text that is less important to merchants - than other nearby text. May also be used to indicate when normal content - is absent, for example, “No supplier listed”. Don’t use only for aesthetic - effect. + Subdued Text is used to create a hierarchy of information on the page. + + + Disabled Text is used to indicate that a field is disabled and cannot be + interacted with. - Use in combination with a symbol showing an increasing value to indicate - an upward trend. + Use to indicate that something was successful. - Use to denote something that needs attention, or that merchants need to - take action on. + Use to indicate that something needs attention. - Use in combination with a symbol showing a decreasing value to indicate a - downward trend. - -
- + Use to indicate that something has failed. + + + Highlight Text is used to highlight important information on the page. + + + Interactive Text is used to indicate that something can be interacted + with. + +
+ Use in situations where background is dark.
+
+ + This is the disabled version for dark background + +
); diff --git a/packages/opub-ui/src/types/text.ts b/packages/opub-ui/src/types/text.ts index 914c4a83..a3ac9b76 100644 --- a/packages/opub-ui/src/types/text.ts +++ b/packages/opub-ui/src/types/text.ts @@ -30,13 +30,17 @@ type Alignment = 'start' | 'center' | 'end' | 'justify'; type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold'; type Color = - | 'success' - | 'critical' - | 'warning' + | 'default' + | 'medium' | 'subdued' - | 'text-inverse' | 'disabled' - | 'default' + | 'critical' + | 'warning' + | 'success' + | 'highlight' + | 'interactive' + | 'onBgDefault' + | 'onBgDisabled' | 'inherit'; export const VariantFontWeightMapping: { [V in Variant]: FontWeight } = { From ad0923c693aa3f3fc4b226386b8538d339d25ddc Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 1 Dec 2023 10:33:32 +0530 Subject: [PATCH 2/7] add Selector Card component --- packages/opub-ui/src/components/Pill/Pill.tsx | 9 +++- .../SelectorCard/SelectorCard.module.scss | 19 +++++++ .../SelectorCard/SelectorCard.stories.tsx | 54 +++++++++++++++++++ .../SelectorCard/SelectorCard.test.tsx | 13 +++++ .../components/SelectorCard/SelectorCard.tsx | 43 +++++++++++++++ .../src/components/SelectorCard/index.ts | 1 + packages/opub-ui/src/components/index.ts | 1 + packages/opub-ui/src/types/pill.ts | 2 + 8 files changed, 140 insertions(+), 2 deletions(-) create mode 100644 packages/opub-ui/src/components/SelectorCard/SelectorCard.module.scss create mode 100644 packages/opub-ui/src/components/SelectorCard/SelectorCard.stories.tsx create mode 100644 packages/opub-ui/src/components/SelectorCard/SelectorCard.test.tsx create mode 100644 packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx create mode 100644 packages/opub-ui/src/components/SelectorCard/index.ts diff --git a/packages/opub-ui/src/components/Pill/Pill.tsx b/packages/opub-ui/src/components/Pill/Pill.tsx index 3991bac2..f6c32b87 100644 --- a/packages/opub-ui/src/components/Pill/Pill.tsx +++ b/packages/opub-ui/src/components/Pill/Pill.tsx @@ -18,6 +18,7 @@ export const Pill = React.forwardRef( url, returnValue = '', variant = 'neutral', + truncate, ...other }: PillProps, ref: React.LegacyRef @@ -54,10 +55,14 @@ export const Pill = React.forwardRef( const tagContent = url && !disabled ? ( - {children} + + {children} + ) : ( - {children} + + {children} + ); return ( diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.module.scss b/packages/opub-ui/src/components/SelectorCard/SelectorCard.module.scss new file mode 100644 index 00000000..43f7fb57 --- /dev/null +++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.module.scss @@ -0,0 +1,19 @@ +@import '../../../styles/common'; + +.SelectorCard { + display: flex; + flex-direction: column; + gap: var(--space-2); + padding: var(--space-3, 12px); + max-width: 480px; + width: 100%; + border-radius: var(--border-radius-05, 2px); + background: var(--surface-default, #fff); + box-shadow: var(--shadow-element-card); +} + +.PillWrapper { + display: flex; + flex-direction: column; + gap: var(--space-2); +} diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.stories.tsx b/packages/opub-ui/src/components/SelectorCard/SelectorCard.stories.tsx new file mode 100644 index 00000000..54d189c6 --- /dev/null +++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.stories.tsx @@ -0,0 +1,54 @@ +import { Pill } from '../Pill'; +import { SelectorCard } from './SelectorCard'; +import { Meta, StoryObj } from '@storybook/react'; + +/** + * Selector Card is a component that displays a title, a selected value, and a button. + */ +const meta = { + component: SelectorCard, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'SelectorCard', + selected: + 'Person Days Generated as a share of Cumulative Projection of Person Days', + buttonText: 'Switch Indicator', + onClick: () => {}, + }, +}; + +export const Pills: Story = { + args: { + title: 'SelectorCard', + selected: ( + <> + { + console.log(e); + }} + returnValue="1" + > + Person Days Generated as a share of Cumulative Projection of Person + Days + + {}} returnValue="2"> + Person Days Generated as a share of Cumulative Projection of Person + Days + + {}} returnValue="3"> + Person Days Generated as a share of Cumulative Projection of Person + Days + + + ), + buttonText: 'Edit Indicators', + onClick: () => {}, + }, +}; diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.test.tsx b/packages/opub-ui/src/components/SelectorCard/SelectorCard.test.tsx new file mode 100644 index 00000000..caceeedb --- /dev/null +++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.test.tsx @@ -0,0 +1,13 @@ +import "@testing-library/jest-dom"; +import { render, screen } from "@testing-library/react"; +import { SelectorCard } from "./SelectorCard"; + +describe("SelectorCard Tests", () => { + beforeEach(() => { + render(Component); + }); + + test("should show Component text all the time", () => { + expect(screen.getByText(/Component/i)).toBeInTheDocument(); + }); +}); diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx b/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx new file mode 100644 index 00000000..71743a3d --- /dev/null +++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx @@ -0,0 +1,43 @@ +import { cn } from '../../utils'; +import { Button } from '../Button'; +import { Divider } from '../Divider'; +import { Pill } from '../Pill'; +import { Text } from '../Text'; +import styles from './SelectorCard.module.scss'; +import React, { forwardRef } from 'react'; + +type Props = { + title: string; + selected: string | React.ReactNode; + buttonText: string; + onClick: () => void; +}; + +const SelectorCard = forwardRef((props: Props, ref: any) => { + const { title, selected, buttonText, onClick } = props; + const themeClass = cn(styles.SelectorCard); + + let content; + if (typeof selected === 'string') { + content = ( + + Person Days Generated as a share of Cumulative Projection of Person Days + + ); + } else { + content =
{selected}
; + } + + return ( +
+ {title} + {content} + + +
+ ); +}); + +export { SelectorCard }; diff --git a/packages/opub-ui/src/components/SelectorCard/index.ts b/packages/opub-ui/src/components/SelectorCard/index.ts new file mode 100644 index 00000000..7e0fda19 --- /dev/null +++ b/packages/opub-ui/src/components/SelectorCard/index.ts @@ -0,0 +1 @@ +export { SelectorCard } from "./SelectorCard"; diff --git a/packages/opub-ui/src/components/index.ts b/packages/opub-ui/src/components/index.ts index 8e904238..d4c3f475 100644 --- a/packages/opub-ui/src/components/index.ts +++ b/packages/opub-ui/src/components/index.ts @@ -60,3 +60,4 @@ export { Toast, Toaster, useToast } from './Toast'; export { Tooltip } from './Tooltip'; export { SearchInput } from "./SearchInput"; export { Tray } from "./Tray"; +export { SelectorCard } from "./SelectorCard"; diff --git a/packages/opub-ui/src/types/pill.ts b/packages/opub-ui/src/types/pill.ts index 453030a9..5f5b2213 100644 --- a/packages/opub-ui/src/types/pill.ts +++ b/packages/opub-ui/src/types/pill.ts @@ -11,6 +11,8 @@ interface NonMutuallyExclusiveProps { variant?: 'neutral' | 'info' | 'success' | 'warning' | 'critical'; /** Value that is returned on click of remove button */ returnValue?: string; + /** Truncate text to one line */ + truncate?: boolean; } export type PillProps = NonMutuallyExclusiveProps & From 809ab2ea3ba7f9b004c1c2f9ece32461c04182fa Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 1 Dec 2023 11:08:55 +0530 Subject: [PATCH 3/7] add district switcher for homepage --- .../components/district-selector-mobile.tsx | 126 ++++++++++++++++++ .../[locale]/components/district-selector.tsx | 4 +- .../district/app/[locale]/components/index.ts | 1 + .../app/[locale]/components/quick-links.tsx | 5 +- examples/district/app/[locale]/page.tsx | 2 + examples/district/components/icons.tsx | 3 +- .../components/SearchInput/SearchInput.tsx | 2 +- .../components/SelectorCard/SelectorCard.tsx | 1 - 8 files changed, 136 insertions(+), 8 deletions(-) create mode 100644 examples/district/app/[locale]/components/district-selector-mobile.tsx diff --git a/examples/district/app/[locale]/components/district-selector-mobile.tsx b/examples/district/app/[locale]/components/district-selector-mobile.tsx new file mode 100644 index 00000000..a1defe73 --- /dev/null +++ b/examples/district/app/[locale]/components/district-selector-mobile.tsx @@ -0,0 +1,126 @@ +import { Button, Divider, Icon, SearchInput, Text, Tray } from 'opub-ui'; +import { + assamDistrictCategory, + availableDistricts, + filterDistricts, +} from '../home.config'; +import { cn } from '@/lib/utils'; +import Link from 'next/link'; +import Icons from '@/components/icons'; +import React from 'react'; + +export const DistrictSelectorMobile = () => { + const [search, setSearch] = React.useState(''); + const [districtList, setDistrictList] = React.useState(assamDistrictCategory); + + // filter districtList based on search + React.useEffect(() => { + if (search) { + const filteredDistricts = filterDistricts(search.toLowerCase()); + setDistrictList(filteredDistricts); + } else { + setDistrictList(assamDistrictCategory); + } + }, [search]); + + return ( +
+
+ + Districts + + + Select district to view insights + + +
+
+ {availableDistricts.map((district) => ( + + + + {district.name} + + + ))} +
+ + View All Districts + + } + size="extended" + > +
+ + Districts + + + Select district to view insights + + +
+ {availableDistricts.map((district) => ( + + + + {district.name} + + + ))} +
+ + + +
+ {Object.values(districtList).map((category) => ( +
+
+ + {category.name} + +
+ +
+ {category.districts.map((district) => ( + + {district} + + ))} +
+
+ ))} +
+
+ +
+ ); +}; diff --git a/examples/district/app/[locale]/components/district-selector.tsx b/examples/district/app/[locale]/components/district-selector.tsx index da092456..cdd54317 100644 --- a/examples/district/app/[locale]/components/district-selector.tsx +++ b/examples/district/app/[locale]/components/district-selector.tsx @@ -59,8 +59,8 @@ export const DistrictSelector = () => { }; return ( -
-
+
+
{!mapLoading && ( { return ( -
+
Quick Links -
+
{content.map((item, index) => ( { > {item.district} - {/* TODO: change opub-ui variables to new one */}
diff --git a/examples/district/app/[locale]/page.tsx b/examples/district/app/[locale]/page.tsx index 7d8881d9..95dc3800 100644 --- a/examples/district/app/[locale]/page.tsx +++ b/examples/district/app/[locale]/page.tsx @@ -3,6 +3,7 @@ import { Header, KeyHighlights, QuickLinks, + DistrictSelectorMobile } from './components'; export default function Home() { @@ -14,6 +15,7 @@ export default function Home() {
+
diff --git a/examples/district/components/icons.tsx b/examples/district/components/icons.tsx index b9a0afa3..f65963ca 100644 --- a/examples/district/components/icons.tsx +++ b/examples/district/components/icons.tsx @@ -34,6 +34,7 @@ import { IconX, TablerIconsProps, IconChevronsRight, + IconCircleChevronRight, } from '@tabler/icons-react'; export const Icons: { @@ -48,7 +49,7 @@ export const Icons: { arrowRight: IconArrowRight, up: IconChevronUp, down: IconChevronDown, - right: IconChevronRight, + right: IconCircleChevronRight, left: IconChevronLeft, doubleLeft: IconChevronsLeft, doubleRight: IconChevronsRight, diff --git a/packages/opub-ui/src/components/SearchInput/SearchInput.tsx b/packages/opub-ui/src/components/SearchInput/SearchInput.tsx index 46acfb12..40ac693d 100644 --- a/packages/opub-ui/src/components/SearchInput/SearchInput.tsx +++ b/packages/opub-ui/src/components/SearchInput/SearchInput.tsx @@ -30,7 +30,7 @@ type Props = { const SearchInput = forwardRef((props: Props, ref: any) => { const [search, setSearch] = React.useState(props.defaultValue || ''); - const className = cn(styles.SearchInput, props.className); + const className = cn(props.withButton && styles.SearchInput, props.className); return (
Date: Fri, 1 Dec 2023 12:10:53 +0530 Subject: [PATCH 4/7] fix mobile spacing for explorer and source data --- .../[scheme]/components/Explorer.tsx | 12 +++++++++-- .../[scheme]/components/Overview.tsx | 4 ++-- .../[scheme]/components/SourceData.tsx | 7 ++++--- .../[scheme]/components/scheme-layout.tsx | 20 +++++++++++++------ .../[department]/components/Card.tsx | 6 +++--- .../components/Content.module.scss | 5 +++++ .../components/department-layout.tsx | 2 +- .../[locale]/[district]/components/Card.tsx | 2 +- .../[district]/components/Content.module.scss | 5 +++++ .../components/dashboard-layout.tsx | 1 - .../[district]/components/district-layout.tsx | 6 +++--- .../src/components/Select/Select.module.scss | 7 ------- .../opub-ui/src/components/Select/Select.tsx | 4 +++- .../src/components/Tabs/Tabs.module.scss | 8 +++++++- 14 files changed, 58 insertions(+), 31 deletions(-) diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx index 9100f670..7bf41204 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx @@ -20,6 +20,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import { useQueryState } from 'next-usequerystate'; import dynamic from 'next/dynamic'; import { BarView } from './BarView'; +import { useWindowSize } from '@/hooks/use-window-size'; const LeafletChoropleth = dynamic( () => import('opub-viz').then((mod) => mod.LeafletChoropleth), @@ -264,6 +265,9 @@ const Content = ({ }, ]; + const { width } = useWindowSize(); + const isMobile = width ? width < 768 : false; + return (
states.setTab(value as any)} value={states.selectedTab} > - + {[ { label: 'Bar View', @@ -298,6 +302,7 @@ const Content = ({ setSelectedBlocks={setSelectedBlocks} tab={states.selectedTab} selectedBlocks={selectedBlocks} + isMobile={isMobile} /> {tabs.map((tab) => ( @@ -343,6 +348,7 @@ const Filters = ({ setSelectedBlocks, tab, selectedBlocks, + isMobile, }: { states: any; chartData: IChartData; @@ -350,6 +356,7 @@ const Filters = ({ setSelectedBlocks: any; tab: 'map' | 'bar'; selectedBlocks: string[]; + isMobile: boolean; }) => { const options = Object.keys(Object.values(chartData)[0].years).map( (year) => ({ @@ -359,7 +366,7 @@ const Filters = ({ ); return ( -
+
{tab === 'bar' && (
diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx index 6d592acf..7a1aa46e 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx @@ -109,11 +109,11 @@ const Card = ({ children: React.ReactNode; }) => { return ( -
+
{heading} -
+
<>{children}
diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx index e11e726a..8997ffa3 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx @@ -94,7 +94,7 @@ export const SourceData = ({
@@ -129,14 +129,15 @@ export const SourceData = ({
{ - setIndicator(value); - }} - value={indicator} - options={ - indicatorData - ? indicatorData[scheme as string]['District Performance'].map( - (e: any) => ({ - label: e.label, - value: e.slug, - }) - ) - : [] - } +
+ setTrayOpen(true)} /> -
*/} + + { + setIndicator(e); + setTrayOpen(false); + }} + /> + +
) : (
Loading...
diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Indicators.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Indicators.tsx index dfd33eda..760da125 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Indicators.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Indicators.tsx @@ -2,7 +2,6 @@ import { indicatorFilter } from '../scheme.config'; import Icons from '@/components/icons'; import { Icon, - Input, RadioGroup, RadioItem, ScrollArea, diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx b/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx index 2ee992de..180a9561 100644 --- a/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx +++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx @@ -19,8 +19,8 @@ const SelectorCard = forwardRef((props: Props, ref: any) => { let content; if (typeof selected === 'string') { content = ( - - Person Days Generated as a share of Cumulative Projection of Person Days + + {selected} ); } else { From 21cab262a7d9fb84f734b1432d66d2c96706eed1 Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 1 Dec 2023 13:05:25 +0530 Subject: [PATCH 6/7] fix indicator crashing --- .../[scheme]/components/Explorer.tsx | 30 ++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx index 8dbb1903..136abf43 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx @@ -78,7 +78,7 @@ export const Explorer = React.forwardRef( } }); } - }, [indicator]); + }, [indicatorData, indicator]); return (
setTrayOpen(true)} /> - { - setIndicator(e); - setTrayOpen(false); - }} - /> + {isLoading ? ( +
+ Loading... +
+ ) : indicatorData ? ( + { + setIndicator(e); + setTrayOpen(false); + }} + /> + ) : ( +
+ No indicators available +
+ )}
From c51601d4be05e0d3f07e10d75f2b1d5713867d7e Mon Sep 17 00:00:00 2001 From: = <=> Date: Fri, 1 Dec 2023 14:27:30 +0530 Subject: [PATCH 7/7] add mobile indicator selector for source data --- .../components/IndicatorsCheckbox.tsx | 11 --- .../[scheme]/components/SourceData.tsx | 95 ++++++++++++++++++- .../src/components/Pill/Pill.module.scss | 37 +------- packages/opub-ui/src/components/Pill/Pill.tsx | 21 ++-- .../components/SelectorCard/SelectorCard.tsx | 2 +- packages/opub-ui/src/components/index.ts | 7 +- packages/opub-ui/src/types/pill.ts | 10 +- 7 files changed, 105 insertions(+), 78 deletions(-) diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/IndicatorsCheckbox.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/IndicatorsCheckbox.tsx index 237a6b81..6a1c9edf 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/IndicatorsCheckbox.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/IndicatorsCheckbox.tsx @@ -41,17 +41,6 @@ export const IndicatorsCheckbox = ({ const [search, setSearch] = React.useState(''); const [filtered, setFiltered] = React.useState(data ? data : null); - React.useEffect(() => { - // set first 5 District Performance indicators as selected by default - const firstFive = data['District Performance'].slice(0, 5); - setIndicators((prev: any) => { - return { - ...prev, - 'District Performance': firstFive.map((item: any) => item.value), - }; - }); - }, []); - React.useEffect(() => { // filter indicators based on search if (search === '') { diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx index 8997ffa3..954014a6 100644 --- a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx +++ b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx @@ -5,8 +5,16 @@ import { ckan } from '@/config/site'; import { useFetch } from '@/lib/api'; import { cn, copyURLToClipboard } from '@/lib/utils'; import { createColumnHelper } from '@tanstack/react-table'; -import { useToast } from 'opub-ui'; -import { Button, Select, Table, Text } from 'opub-ui'; +import { + Button, + Select, + Table, + Text, + Tray, + Pill, + SelectorCard, + useToast, +} from 'opub-ui'; import React from 'react'; import { ErrorBoundary } from 'react-error-boundary'; @@ -18,11 +26,12 @@ export const SourceData = ({ scheme?: string; }) => { const [selectedYear, setYear] = React.useState(Object.keys(tableData)[0]); - const [selectedIndicators, setIndicators] = React.useState({ + const [selectedIndicators, setSelectedIndicators] = React.useState({ 'District Performance': [], 'District Profile': [], Targets: [], }); + const [trayOpen, setTrayOpen] = React.useState(false); const { data: indicatorData, isLoading } = useFetch( 'indicators', @@ -71,6 +80,20 @@ export const SourceData = ({ return data; }, [indicatorData]); + React.useEffect(() => { + // set first 5 District Performance indicators as selected by default + const firstFive = indicatorDataWithValues['District Performance'].slice( + 0, + 5 + ); + setSelectedIndicators((prev: any) => { + return { + ...prev, + 'District Performance': firstFive.map((item: any) => item.value), + }; + }); + }, [indicatorDataWithValues]); + const columns: any = [ { header: 'Block', @@ -90,8 +113,72 @@ export const SourceData = ({ const { toast } = useToast(); + function removePill(str: string) { + let key: string, index: number; + // find the key (indicator category) and index of the pill + Object.keys(selectedIndicators).forEach((k: any) => { + const i = selectedIndicators[k].indexOf(str); + if (i !== -1) { + key = k; + index = i; + } + }); + + // remove the pill + setSelectedIndicators((prev: any) => { + const data = { ...prev }; + data[key].splice(index, 1); + return data; + }); + } + return (
+
+ + {allSelectedIndicators.length > 0 ? ( +
+ {allSelectedIndicators.map((item: any) => ( + + {item} + + ))} +
+ ) : ( + No indicator selected + )} + + } + buttonText="Edit Indicators" + onClick={() => setTrayOpen(true)} + /> + + {isLoading ? ( +
+ Loading... +
+ ) : indicatorData ? ( + + ) : ( +
+ No indicators available +
+ )} + +
) : (
diff --git a/packages/opub-ui/src/components/Pill/Pill.module.scss b/packages/opub-ui/src/components/Pill/Pill.module.scss index 54b5edc0..52a1de11 100644 --- a/packages/opub-ui/src/components/Pill/Pill.module.scss +++ b/packages/opub-ui/src/components/Pill/Pill.module.scss @@ -4,6 +4,7 @@ $height: 20px; .Pill { display: inline-flex; + justify-content: space-between; align-items: center; max-width: 100%; padding: var(--space-1, 4px) var(--space-2, 8px) var(--space-1, 4px) @@ -21,10 +22,6 @@ $height: 20px; pointer-events: none; } - &.linkable { - padding: 0; - } - &.variantInfo { background-color: var(--surface-highlight-subdued); border-color: var(--border-highlight-default); @@ -70,35 +67,3 @@ $height: 20px; pointer-events: none; } } - -.Link { - display: inline-grid; - color: var(--text-default); - outline: none; - border-radius: var(--border-radius-1); - text-decoration: none; - min-height: $height; - padding: 0 var(--space-2); - - @include focus-ring; - - &:focus-visible:not(:active) { - @include focus-ring($style: 'focused'); - text-decoration: underline; - } - - &:hover { - background: var(--surface-highlight-hovered); - text-decoration: underline; - } - - &.segmented { - &:hover { - background: none; - } - - &::after { - margin-right: var(--space-1); - } - } -} diff --git a/packages/opub-ui/src/components/Pill/Pill.tsx b/packages/opub-ui/src/components/Pill/Pill.tsx index f6c32b87..ad6bb950 100644 --- a/packages/opub-ui/src/components/Pill/Pill.tsx +++ b/packages/opub-ui/src/components/Pill/Pill.tsx @@ -15,7 +15,6 @@ export const Pill = React.forwardRef( disabled = false, onRemove = () => {}, accessibilityLabel, - url, returnValue = '', variant = 'neutral', truncate, @@ -27,8 +26,7 @@ export const Pill = React.forwardRef( styles.Pill, styles.removable, variant && styles[variationName('variant', variant)], - disabled && styles.disabled, - url && !disabled && styles.linkable + disabled && styles.disabled ); let tagTitle = accessibilityLabel; @@ -52,18 +50,11 @@ export const Pill = React.forwardRef( ); - const tagContent = - url && !disabled ? ( - - - {children} - - - ) : ( - - {children} - - ); + const tagContent = ( + + {children} + + ); return ( diff --git a/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx b/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx index 180a9561..b0095c84 100644 --- a/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx +++ b/packages/opub-ui/src/components/SelectorCard/SelectorCard.tsx @@ -28,7 +28,7 @@ const SelectorCard = forwardRef((props: Props, ref: any) => { } return ( -
+
{title} {content} diff --git a/packages/opub-ui/src/components/index.ts b/packages/opub-ui/src/components/index.ts index d4c3f475..af201bc9 100644 --- a/packages/opub-ui/src/components/index.ts +++ b/packages/opub-ui/src/components/index.ts @@ -58,6 +58,7 @@ export { TextField } from './TextField'; export { Thumbnail } from './Thumbnail'; export { Toast, Toaster, useToast } from './Toast'; export { Tooltip } from './Tooltip'; -export { SearchInput } from "./SearchInput"; -export { Tray } from "./Tray"; -export { SelectorCard } from "./SelectorCard"; +export { SearchInput } from './SearchInput'; +export { Tray } from './Tray'; +export { SelectorCard } from './SelectorCard'; +export { Pill } from './Pill'; diff --git a/packages/opub-ui/src/types/pill.ts b/packages/opub-ui/src/types/pill.ts index 5f5b2213..8d9b9365 100644 --- a/packages/opub-ui/src/types/pill.ts +++ b/packages/opub-ui/src/types/pill.ts @@ -1,4 +1,4 @@ -interface NonMutuallyExclusiveProps { +export type PillProps = { /** Content to display in the tag */ children?: React.ReactNode; /** Disables the tag */ @@ -13,10 +13,4 @@ interface NonMutuallyExclusiveProps { returnValue?: string; /** Truncate text to one line */ truncate?: boolean; -} - -export type PillProps = NonMutuallyExclusiveProps & - ( - | { onClick?(): void; onRemove?: undefined; url?: undefined } - | { onClick?: undefined; onRemove?(value: string): void; url?: string } - ); +};