Merge pull request #264 from CivicDataLab/dev

Dev
CivicDataLab · Nov 29, 2023 · a7cbbc0 · a7cbbc0
2 parents 7b1b98c + dfe1327
commit a7cbbc0
Show file tree

Hide file tree

Showing 31 changed files with 108 additions and 105 deletions.
diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/BarView.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/BarView.tsx
@@ -1,4 +1,4 @@
-import { BarChart } from 'opub-viz/src';
+import { BarChart } from 'opub-viz';
 import React from 'react';
 
 export const BarView = React.forwardRef(({ data }: { data: any }, ref: any) => {

diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Explorer.tsx
@@ -61,7 +61,7 @@ export const Explorer = React.forwardRef(
     return (
       <div
         className={cn(
-          'md:grid grid-cols-[242px_1fr] gap-4 rounded-05 bg-surfaceDefault shadow-elementCard p-6'
+          'md:grid grid-cols-[242px_1fr] gap-4 rounded-05 md:bg-surfaceDefault md:shadow-elementCard md:p-6'
         )}
       >
         <div className="hidden md:block">
@@ -283,11 +283,7 @@ const Content = ({
             },
           ].map((tab) => (
             <Tab value={tab.value} key={tab.value}>
-              <div className="flex items-center gap-3">
-                <Text variant="bodyMd" fontWeight="medium">
-                  {tab.label}
-                </Text>
-              </div>
+              {tab.label}
             </Tab>
           ))}
         </TabList>
@@ -327,7 +323,7 @@ const Content = ({
           Copy Link
         </Button>
         <Button
-          kind="secondary"
+          kind="primary"
           variant="interactive"
           onClick={() => {
             exportAsImage(contentRef.current, 'explorer');

diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/Overview.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { ContentCard, ProgressCard } from '../../components/Card';
 import { IOverview } from './scheme-layout';
 import { Icon, Text } from 'opub-ui';
-import { BarChart } from 'opub-viz/src';
+import { BarChart } from 'opub-viz';
 import Link from 'next/link';
 import Icons from '@/components/icons';
 

diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/SourceData.tsx
@@ -162,7 +162,7 @@ export const SourceData = ({
                 Copy Link
               </Button>
               <Button
-                kind="secondary"
+                kind="primary"
                 variant="interactive"
                 onClick={() => {
                   downloadTable(

diff --git a/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx b/examples/district/app/[locale]/[district]/[department]/[scheme]/components/scheme-layout.tsx
@@ -120,7 +120,7 @@ export const Content = ({ data }: { data: IProps }) => {
 
       <div className="mt-4 px-2 md:container py-1 lg:py-2">
         <div className="flex gap-4 flex-wrap justify-start md:flex-nowrap">
-          <div className="flex">
+          <div className="hidden md:flex">
             <Image
               src={schemes[data.scheme].logo}
               alt=""
@@ -228,7 +228,7 @@ const TabLayout = ({
           </Tab>
         ))}
       </TabList>
-      <div className="mt-6 px-3 py-4 bg-surfaceDefault">
+      <div className="mt-6 md:px-3 md:py-4 md:bg-surfaceDefault">
         {tabValue === 'overview' && (
           <div className="mb-3 flex items-center justify-end gap-4 flex-wrap">
             <Button
@@ -244,7 +244,7 @@ const TabLayout = ({
               Copy Link
             </Button>
             <Button
-              kind="secondary"
+              kind="primary"
               variant="interactive"
               onClick={() => {
                 exportAsImage(overviewRef.current, 'overview');

diff --git a/examples/district/app/[locale]/[district]/components/district-layout.tsx b/examples/district/app/[locale]/[district]/components/district-layout.tsx
@@ -96,7 +96,10 @@ export function Content({ data }: { data: IProps }) {
                         <Link href={data.link} target="_blank">
                           <span className="flex items-center gap-2">
                             Go to District Website
-                            <Icon source={Icons.externalLink} />
+                            <Icon
+                              color="interactive"
+                              source={Icons.externalLink}
+                            />
                           </span>
                         </Link>
                       </Text>

diff --git a/examples/district/app/[locale]/[district]/components/index.tsx b/examples/district/app/[locale]/[district]/components/index.tsx
@@ -40,7 +40,7 @@ export const BreadCrumb = ({
     <div className="md:container flex items-center gap-2 md:gap-4 bg-backgroundSolidDefault md:bg-transparent">
       <Link href={backUrl} className="mt-5 hidden md:block">
         <Text visuallyHidden>Go to State Page</Text>
-        <Icon source={Icons.leftFilled} size={24} color="default" />
+        <Icon source={Icons.leftFilled} size={24} />
       </Link>
       <div className="hidden md:block mt-4">
         <Breadcrumbs crumbs={crumbs} />

diff --git a/examples/district/app/[locale]/components/key-highlights.tsx b/examples/district/app/[locale]/components/key-highlights.tsx
@@ -24,7 +24,7 @@ const content = [
 
 export const KeyHighlights = () => {
   return (
-    <section className="mt-10">
+    <section className="pt-4 md:pt-10">
       <Text variant="headingLg" fontWeight="semibold" color="subdued">
         Key Highlights of Assam
       </Text>

diff --git a/examples/district/app/[locale]/dashboard/components/dashboard-nav.tsx b/examples/district/app/[locale]/dashboard/components/dashboard-nav.tsx
@@ -21,7 +21,7 @@ export function DashboardNav() {
       <Box flex justifyContent="space-between" gap="4" alignItems="center">
         <Link href="/">
           <Box flex alignItems="center" gap="2">
-            <Icon source={Icons.logo} size="6" />
+            <Icon source={Icons.logo} size={24} />
             <Text variant="headingLg" as="h1">
               OPub
             </Text>

diff --git a/examples/district/app/[locale]/dashboard/components/in-progress.tsx b/examples/district/app/[locale]/dashboard/components/in-progress.tsx
@@ -6,7 +6,7 @@ import { Icon, Text } from 'opub-ui';
 export function InProgress() {
   return (
     <div className="flex flex-col h-full items-center justify-center gap-4">
-      <Icon source={Icons.construction} color="default" size="20" />
+      <Icon source={Icons.construction} color="default" size={80} />
       <Text variant="headingSm" color="subdued">
         This page is currently under construction.
       </Text>

diff --git a/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/DistributionList.tsx
@@ -30,7 +30,7 @@ const NoList = ({
     <div className="flex flex-col items-center justify-center p-6">
       <Icon
         source={Icons.distribution}
-        size="16"
+        size={64}
         stroke={1}
         color="interactive"
       />

diff --git a/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditDistribution.tsx
@@ -225,7 +225,7 @@ const FileUpload = ({
   const uploadedFile = file && (
     <div className="flex items-center justify-center h-full py-16">
       <div className="flex gap-3 items-center py-2 px-3 rounded-05 border-borderSubdued border-1 border-solid bg-surface">
-        <Icon source={Icons.check} size="6" color="success" />
+        <Icon source={Icons.check} size={24} color="success" />
 
         <div className="flex flex-col">
           <div className="max-w-[180px]">
@@ -239,7 +239,7 @@ const FileUpload = ({
         </div>
         <Button
           size="slim"
-          icon={<Icon source={Icons.delete} size="6" />}
+          icon={<Icon source={Icons.delete} size={24} />}
           plain
           accessibilityLabel="delete resource"
           onClick={handleFileDelete}

diff --git a/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx b/examples/district/app/[locale]/dashboard/dataset/[id]/edit/components/EditLayout.tsx
@@ -62,7 +62,7 @@ const Header = ({ id, title }: { id: string; title?: string }) => {
     <div className="flex gap-4 flex-wrap items-center justify-between">
       <div className="flex flex-wrap gap-4 items-center">
         <Link href="/dashboard/dataset">
-          <Icon source={Icons.back} color="default" size="8" />
+          <Icon source={Icons.back} color="default" size={32} />
           <Text visuallyHidden>Go to dataset listing page</Text>
         </Link>
 

diff --git a/examples/district/app/[locale]/dashboard/dataset/components/action-bar.tsx b/examples/district/app/[locale]/dashboard/dataset/components/action-bar.tsx
@@ -32,7 +32,7 @@ export function ActionBar(props: Props) {
   const isNavigating = useIsNavigating().isNavigating;
 
   const { width }: Size = useWindowSize();
-  const iconSize = width && width < 480 ? '5' : '8';
+  const iconSize = width && width < 480 ? 20 : 32;
 
   const backButton = props.previousPage && props.previousPage?.link && (
     <Link href={props.previousPage?.link} className={styles.BackButton}>

diff --git a/examples/district/app/[locale]/dashboard/dataset/components/content.tsx b/examples/district/app/[locale]/dashboard/dataset/components/content.tsx
@@ -13,7 +13,7 @@ export function Content({ data }: { data?: any }) {
           source={Icons.addDataset}
           color="interactive"
           stroke={1}
-          size="20"
+          size={80}
         />
         <Text variant="headingSm" color="subdued">
           You have not added any datasets yet.

diff --git a/examples/district/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx b/examples/district/app/[locale]/dashboard/dataset/new/components/new-dataset.tsx
@@ -151,7 +151,7 @@ const RadioItem = ({
   return (
     <RadioCard {...props}>
       <div className={styles.RadioItem}>
-        <Icon source={icon} size="8" />
+        <Icon source={icon} size={32} />
         <div className={styles.RadioContent}>
           <Text
             variant="headingSm"

diff --git a/examples/district/components/mobile-nav.tsx b/examples/district/components/mobile-nav.tsx
@@ -6,7 +6,7 @@ import * as Collapsible from '@radix-ui/react-collapsible';
 import { cn } from '@/lib/utils';
 import Link from 'next/link';
 import { mainConfig } from '@/config/site';
-import { useParams, usePathname } from 'next/navigation';
+import { usePathname } from 'next/navigation';
 
 const districts = [
   {
@@ -28,52 +28,54 @@ export const MobileNav = () => {
     if (open) {
       document.body.style.overflow = 'hidden';
     } else {
-      document.body.style.overflow = 'auto';
+      document.body.style.overflow = 'initial';
     }
 
     return () => {
-      document.body.style.overflow = 'auto';
+      document.body.style.overflow = 'initial';
     };
   }, [open]);
 
   return (
-    <header>
-      <div className="px-5 py-3 bg-backgroundSolidDark text-textOnBGDefault flex items-center justify-between">
-        <Link href="/" className="flex items-center gap-2">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            fill="none"
-          >
-            <g
-              stroke="#fff"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="1.5"
-              clip-path="url(#a)"
+    <>
+      <header>
+        <div className="px-5 py-3 bg-backgroundSolidDark text-textOnBGDefault flex items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              fill="none"
             >
-              <path d="M8 4 4 6v5l4 2 4-2V6L8 4ZM12 11l4 2 4-2V6l-4-2-4 2M8 13v5l4 2 4-2v-5" />
-            </g>
-            <defs>
-              <clipPath id="a">
-                <path fill="#fff" d="M0 0h24v24H0z" />
-              </clipPath>
-            </defs>
-          </svg>
-          <Text variant="headingSmSpaced" color="inherit">
-            D4D ASSAM
-          </Text>
-        </Link>
+              <g
+                stroke="#fff"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.5"
+                clipPath="url(#a)"
+              >
+                <path d="M8 4 4 6v5l4 2 4-2V6L8 4ZM12 11l4 2 4-2V6l-4-2-4 2M8 13v5l4 2 4-2v-5" />
+              </g>
+              <defs>
+                <clipPath id="a">
+                  <path fill="#fff" d="M0 0h24v24H0z" />
+                </clipPath>
+              </defs>
+            </svg>
+            <Text variant="headingSmSpaced" color="inherit">
+              D4D ASSAM
+            </Text>
+          </Link>
 
-        <IconButton
-          icon={open ? Icons.cross : Icons.menu}
-          onClick={() => setOpen((e) => !e)}
-          className="text-textOnBGDefault"
-        >
-          Menu
-        </IconButton>
-      </div>
+          <IconButton
+            icon={open ? Icons.cross : Icons.menu}
+            onClick={() => setOpen((e) => !e)}
+            color="onBgDefault"
+          >
+            Menu
+          </IconButton>
+        </div>
+      </header>
       {open && (
         <div className="h-screen overflow-y-auto bg-backgroundSolidDark text-textOnBGDefault border-t-1 border-solid border-baseGraySlateSolid11">
           <Link
@@ -108,7 +110,7 @@ export const MobileNav = () => {
           ))}
         </div>
       )}
-    </header>
+    </>
   );
 };
 

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;
 
@@ -18,19 +18,19 @@
   --card-border-rgb: 131, 134, 135;
 }
 
-html {
+/* html {
   overflow-y: scroll;
-}
+} */
 
 body {
   background-color: var(--background-solid-subdued);
 }
 
-html,
+/* html,
 body,
 body > .opub-Tooltip {
   height: 100%;
-}
+} */
 
 a {
   color: inherit;

diff --git a/examples/district/types/index.d.ts b/examples/district/types/index.d.ts
@@ -1,5 +1,5 @@
 import { Icons } from '@/components/icons';
-import { IconSource } from 'opub-ui/src/types/icon';
+import { IconSource } from '/types/icon';
 
 export type SiteConfig = {
   name: string;

diff --git a/packages/opub-ui/assets/base.css b/packages/opub-ui/assets/base.css
@@ -3,7 +3,7 @@ body {
   line-height: 150%;
   box-sizing: border-box;
   font-family: var(--primary-font);
-  --outline: 2px solid var(--focused);
+  --outline: 2px solid var(--text-interactive);
   --outline-offset: 2px;
 }
 

diff --git a/packages/opub-ui/package.json b/packages/opub-ui/package.json
@@ -74,7 +74,6 @@
     "@react-types/calendar": "^3.2.0",
     "@react-types/datepicker": "^3.3.0",
     "@react-types/shared": "^3.18.0",
-    "@shopify/polaris-icons": "^6.12.0",
     "@tabler/icons-react": "^2.17.0",
     "@tanstack/react-table": "^8.9.1",
     "ariakit": "^2.0.0-next.43",

diff --git a/packages/opub-ui/src/components/Checkbox/Checkbox.tsx b/packages/opub-ui/src/components/Checkbox/Checkbox.tsx
@@ -46,7 +46,7 @@ const Checkbox = forwardRef(
             <CheckboxRadix.Indicator>
               <Icon
                 source={iconSource}
-                size="4"
+                size={16}
                 color="onBgDefault"
                 stroke={3}
               />

diff --git a/packages/opub-ui/src/components/Collapsible/Collapsible.tsx b/packages/opub-ui/src/components/Collapsible/Collapsible.tsx
@@ -24,7 +24,7 @@ export const Collapsible = ({
         <span className={styles.Text}>{collapsibleHeading}</span>
         <CollapsibleDemo.Trigger asChild>
           <button className={styles.IconButton}>
-            <Icon source={iconSource} size="6" />
+            <Icon source={iconSource} size={24} />
           </button>
         </CollapsibleDemo.Trigger>
       </div>

diff --git a/packages/opub-ui/src/components/DataTable/components/Toolbar/Toolbar.tsx b/packages/opub-ui/src/components/DataTable/components/Toolbar/Toolbar.tsx
@@ -47,7 +47,7 @@ export function Toolbar<TData>({
             <Button
               size="slim"
               onClick={() => table.resetColumnFilters()}
-              icon={<Icon source={IconX} size="4" color="highlight" />}
+              icon={<Icon source={IconX} size={16} color="highlight" />}
               kind="tertiary"
             >
               Reset