Merge pull request #266 from CivicDataLab/d4d

D4d
CivicDataLab · Dec 1, 2023 · 3f6f904 · 3f6f904
2 parents dfe1327 + a365b89
commit 3f6f904
Show file tree

Hide file tree

Showing 34 changed files with 783 additions and 519 deletions.
diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Indicators.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Indicators.tsx
@@ -8,6 +8,7 @@ import {
   ScrollArea,
   Divider,
   Text,
+  SearchInput,
 } from 'opub-ui';
 import React from 'react';
 
@@ -62,14 +63,12 @@ export const Indicators = ({
         Select indicator to view insights
       </Text>
       <Divider className="my-4" />
-      <Input
+      <SearchInput
         name="indicator-search"
         label="Indicator Search"
-        labelHidden
-        prefix={<Icon source={Icons.search} />}
-        placeholder="Search"
         onChange={setSearch}
       />
+
       <div className="mt-4">
         {filtered ? (
           <RadioGroup

diff --git a/.../district/app/[locale]/[district]/[department]/[scheme]/components/IndicatorsCheckbox.tsx b/.../district/app/[locale]/[district]/[department]/[scheme]/components/IndicatorsCheckbox.tsx
@@ -8,6 +8,7 @@ import {
   ScrollArea,
   Divider,
   Text,
+  SearchInput,
 } from 'opub-ui';
 import React from 'react';
 
@@ -99,14 +100,12 @@ export const IndicatorsCheckbox = ({
         Select indicators to download data
       </Text>
       <Divider className="my-4" />
-      <Input
+      <SearchInput
         name="indicator-search"
         label="Indicator Search"
-        labelHidden
-        prefix={<Icon source={Icons.search} />}
-        placeholder="Search"
         onChange={setSearch}
       />
+
       <div className="mt-4">
         <Checkbox onChange={onSelectAll} name="all-indicators">
           Select all indicators

diff --git a/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx b/examples/district/app/[locale]/[district]/[department]/components/department-layout.tsx
@@ -1,16 +1,15 @@
 'use client';
 
-import { ContentCard, SchemeCard } from './Card';
-import styles from './Content.module.scss';
 import { Icons } from '@/components/icons';
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@radix-ui/react-collapsible';
-import Link from 'next/link';
-import { Breadcrumbs, Icon, Input, Divider, Text } from 'opub-ui';
-import { BreadCrumb, Search } from '../../components';
+import { Divider, Icon, SearchInput, Text } from 'opub-ui';
+import { BreadCrumb } from '../../components';
+import { ContentCard, SchemeCard } from './Card';
+import styles from './Content.module.scss';
 
 export interface IProps {
   district: string;
@@ -107,7 +106,11 @@ export function Content({ data }: { data: IProps }) {
             <Text variant="headingLg" as="h3">
               {departmentData.listTitle}
             </Text>
-            <Search />
+            <SearchInput
+              name="department-search"
+              label="Department Search"
+              withButton
+            />
           </div>
           <Divider className="mt-3 mb-4" />
           <div className="grid gap-4 lg:grid-cols-2">

diff --git a/examples/district/app/[locale]/[district]/components/district-layout.tsx b/examples/district/app/[locale]/[district]/components/district-layout.tsx
@@ -6,8 +6,8 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@radix-ui/react-collapsible';
-import { Icon, Divider, Text } from 'opub-ui';
-import { BreadCrumb, Search } from '.';
+import { Icon, Divider, Text, SearchInput } from 'opub-ui';
+import { BreadCrumb } from '.';
 import { ContentCard, DepartmentCard } from './Card';
 import styles from './Content.module.scss';
 import Link from 'next/link';
@@ -123,7 +123,11 @@ export function Content({ data }: { data: IProps }) {
             <Text variant="headingLg" as="h2">
               {data.listTitle}
             </Text>
-            <Search />
+            <SearchInput
+              name="district-search"
+              label="district Search"
+              withButton
+            />
           </div>
           <Divider />
         </div>

diff --git a/examples/district/app/[locale]/[district]/components/index.tsx b/examples/district/app/[locale]/[district]/components/index.tsx
@@ -1,31 +1,8 @@
 import Icons from '@/components/icons';
 import Link from 'next/link';
-import { Breadcrumbs, Icon, IconButton, Input, Text } from 'opub-ui';
+import { Breadcrumbs, Icon, Text } from 'opub-ui';
 import React from 'react';
 
-export const Search = () => {
-  const [search, setSearch] = React.useState('');
-  return (
-    <div className="flex items-center gap-2">
-      <Input
-        name="department-search"
-        label="Department Search"
-        labelHidden
-        placeholder="Search"
-        value={search}
-        onChange={setSearch}
-      />
-      <IconButton
-        color="highlight"
-        icon={Icons.search}
-        className="bg-surfaceHighlightDefault p-2 rounded-full hover:bg-surfaceHighlightHovered"
-      >
-        Search
-      </IconButton>
-    </div>
-  );
-};
-
 export const BreadCrumb = ({
   crumbs,
   backUrl,

diff --git a/examples/district/app/[locale]/components/district-selector.tsx b/examples/district/app/[locale]/components/district-selector.tsx
@@ -9,7 +9,7 @@ import { useFetch } from '@/lib/api';
 import { cn } from '@/lib/utils';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
-import { Icon, Input, Divider, Text } from 'opub-ui';
+import { Icon, Input, Divider, Text, SearchInput } from 'opub-ui';
 import React from 'react';
 
 const LeafletChoropleth = dynamic(
@@ -121,15 +121,12 @@ export const DistrictSelector = () => {
           ))}
         </div>
         <Divider className="my-4" />
-        <Input
+        <SearchInput
           name="district-search"
-          placeholder="Search"
-          label="Search District"
-          labelHidden
-          prefix={<Icon source={Icons.search} />}
+          label="Search Search"
           onChange={setSearch}
-          value={search}
         />
+
         <div className="mt-8 flex flex-col gap-4">
           {Object.values(districtList).map((category) => (
             <div key={category.name}>

diff --git a/examples/district/app/[locale]/dashboard/components/dashboard-nav.tsx b/examples/district/app/[locale]/dashboard/components/dashboard-nav.tsx
@@ -3,7 +3,7 @@
 import { Icons } from '@/components/icons';
 import { useKeyDetect } from '@/hooks/use-key-detect';
 import Link from 'next/link';
-import { Avatar, Box, Icon, Text, TextField } from 'opub-ui';
+import { Avatar, Box, Icon, SearchInput, Text, TextField } from 'opub-ui';
 import React from 'react';
 
 export function DashboardNav() {
@@ -28,14 +28,7 @@ export function DashboardNav() {
           </Box>
         </Link>
         <div className="hidden w-full max-w-[578px] md:block">
-          <TextField
-            prefix={<Icon source={Icons.search} />}
-            placeholder="Search"
-            name="Search"
-            label="Search"
-            labelHidden
-            ref={searchRef}
-          />
+          <SearchInput name="Search" label="Search" ref={searchRef} />
         </div>
         <div className="flex items-center shrink-0 gap-4">
           <Icon color="default" source={Icons.notification} />

diff --git a/examples/district/components/mobile-nav.tsx b/examples/district/components/mobile-nav.tsx
@@ -93,7 +93,7 @@ export const MobileNav = () => {
               )}
             />
             <div className="p-3 pr-5 flex items-center gap-3 ">
-              <Icon source={Icons.home} />
+              <Icon source={Icons.home} color="onBgDefault" />
               <Text variant="headingSmSpaced" color="inherit">
                 Home (District List)
               </Text>
@@ -145,14 +145,16 @@ const NavItem = ({
           />
           <div className="flex items-center justify-between gap-3 w-full p-3 pr-5">
             <div className="flex items-center gap-3 ">
-              <Icon source={Icons.diamond} />
+              <Icon source={Icons.diamond} color="onBgDefault" />
               <Text variant="headingSmSpaced" color="inherit">
                 {district.title}
               </Text>
             </div>
-            <div className={cn('transform', open && ' rotate-90')}>
-              <Icon source={Icons.doubleRight} />
-            </div>
+            <Icon
+              source={Icons.doubleRight}
+              color="onBgDefault"
+              className={cn('transform', open && ' rotate-90')}
+            />
           </div>
         </button>
       </Collapsible.Trigger>

diff --git a/examples/district/styles/globals.css b/examples/district/styles/globals.css
@@ -1,4 +1,4 @@
-/* @tailwind base; */
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 

diff --git a/examples/district/tailwind.config.js b/examples/district/tailwind.config.js
@@ -13,6 +13,9 @@ const transitionDuration = require('./styles/tokens/tailwind/duration');
 const zIndex = require('./styles/tokens/tailwind/z-index');
 
 module.exports = {
+  corePlugins: {
+    preflight: false,
+  },
   darkMode: ['class', '[data-mode="dark"]'],
   content: [
     './app/**/*.{js,ts,jsx,tsx,mdx}',

diff --git a/packages/opub-ui/assets/base.css b/packages/opub-ui/assets/base.css
@@ -1,5 +1,5 @@
 body {
-  color: var(--text);
+  color: var(--text-default);
   line-height: 150%;
   box-sizing: border-box;
   font-family: var(--primary-font);