Feature: Cookies Landing Page - Part-2

packages/extension/package.json

@@ -13,6 +13,7 @@
   "homepage": "https://github.com/GoogleChromeLabs/ps-analysis-tool#readme",
   "dependencies": {
     "@tanstack/react-table": "^8.9.3",
+    "classnames": "^2.3.2",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/extension/src/view/design-system/components/circle/circleEmpty.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import { COLOR_MAP } from '../../theme/colors';
+
+interface CircleEmptyProps {
+  color: string;
+}
+
+const CircleEmpty = ({ color = COLOR_MAP.mediumGray }: CircleEmptyProps) => (
+  <div
+    className="w-2.5 h-2.5 rounded-full flex items-center justify-center"
+    style={{ backgroundColor: color }}
+  >
+    <div className="w-1.5 h-1.5 rounded-full flex items-center justify-center bg-white" />
+  </div>
+);
+
+export default CircleEmpty;

packages/extension/src/view/design-system/components/circle/index.tsx

@@ -24,11 +24,9 @@ interface CircleProps {
 
 const Circle = ({ color }: CircleProps) => (
   <div
-    className="w-4 h-4 rounded-full flex items-center justify-center mr-2"
+    className="w-2.5 h-2.5 rounded-full flex items-center justify-center"
     style={{ backgroundColor: color }}
-  >
-    <div className="w-2 h-2 rounded-full flex items-center justify-center bg-white" />
-  </div>
+  />
 );
 
 export default Circle;

packages/extension/src/view/design-system/components/circle/stories/circleEmpty.stories.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+
+/**
+ * Internal dependencies.
+ */
+import CircleEmpty from '../circleEmpty';
+
+const meta: Meta<typeof CircleEmpty> = {
+  title: 'Extension/DesignSystem/CircleEmpty',
+  component: CircleEmpty,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const Primary: StoryObj<typeof meta> = {};

packages/extension/src/view/design-system/components/circle/tests/circle.tsx

@@ -28,7 +28,7 @@ describe('Circle', () => {
     const { container } = render(<Circle color={COLOR_MAP.functional} />);
 
     // Check if the Circle div has the correct background color style
-    const circleDiv = container.querySelector('.rounded-full');
+    const circleDiv = container.querySelector('div');
     expect(circleDiv).toHaveStyle(`background-color: ${COLOR_MAP.functional}`);
   });
 });

packages/extension/src/view/design-system/components/circle/tests/circleEmpty.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+/**
+ * Internal dependencies.
+ */
+import CircleEmpty from '../circleEmpty';
+
+describe('CircleEmpty', () => {
+  const testColor = 'red';
+
+  it('renders the CircleEmpty with the correct background color', () => {
+    const { container } = render(<CircleEmpty color={testColor} />);
+
+    // Check if the CircleEmpty div has the correct background color style
+    const circleEmptyDiv = container.querySelector('div');
+    expect(circleEmptyDiv).toHaveStyle(`background-color: ${testColor}`);
+  });
+});

packages/extension/src/view/design-system/components/circlePieChart/emptyCirclePieChart.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { VictoryPie } from 'victory';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import { COLOR_MAP } from '../../theme/colors';
+
+interface EmptyCirclePieChartProps {
+  fallbackText?: string;
+  title?: string;
+  isPrimary?: boolean;
+}
+
+const EmptyCirclePieChart = ({
+  fallbackText,
+  title,
+  isPrimary = true,
+}: EmptyCirclePieChartProps) => {
+  const containerWidthClass = isPrimary ? 'w-16' : 'w-8';
+  const centerTitleClasses = isPrimary
+    ? 'text-xs leading-4'
+    : 'text-[7px] leading-[7px]'; // Font size and line height are added as an exception to handle edge case.
+
+  return (
+    <>
+      <div
+        className={classNames(
+          'h-full max-w-xs inline-block align-bottom',
+          containerWidthClass
+        )}
+      >
+        <div className="w-full h-full relative">
+          <VictoryPie
+            padding={0}
+            innerRadius={0}
+            colorScale={[COLOR_MAP.brightGray]}
+          />
+          <p
+            className={classNames(
+              'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-raisin-black opacity-40',
+              centerTitleClasses
+            )}
+          >
+            {fallbackText || 'Not Found'}
+          </p>
+        </div>
+      </div>
+      {title && (
+        <p className="text-xs text-center font-semibold mt-2">{title}</p>
+      )}
+    </>
+  );
+};
+
+export default EmptyCirclePieChart;

packages/extension/src/view/design-system/components/circlePieChart/index.tsx

@@ -18,28 +18,78 @@
  */
 import React from 'react';
 import { VictoryPie } from 'victory';
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies.
+ */
+import EmptyCirclePieChart from './emptyCirclePieChart';
 
 interface CirclePieChartProps {
   centerCount: number;
   data: { count: number; color: string }[];
+  title?: string;
+  isPrimary?: boolean;
+  fallbackText?: string;
 }
-const CirclePieChart = ({ centerCount, data }: CirclePieChartProps) => {
+
+export const MAX_COUNT = 999;
+
+const CirclePieChart = ({
+  centerCount,
+  data,
+  title,
+  isPrimary = true,
+  fallbackText,
+}: CirclePieChartProps) => {
+  let centerTitleClasses = centerCount <= MAX_COUNT ? 'text-2xl' : 'text-l';
+  const containerWidthClass = isPrimary ? 'w-16' : 'w-8';
+
+  if (!isPrimary) {
+    centerTitleClasses = centerCount <= MAX_COUNT ? 'text-xs' : 'text-xxxs';
+  }
+
+  if (centerCount <= 0) {
+    return (
+      <EmptyCirclePieChart
+        title={title}
+        isPrimary={isPrimary}
+        fallbackText={fallbackText}
+      />
+    );
+  }
+
   return (
-    <div className="w-full h-full max-w-xs">
-      <div className="w-full h-full relative">
-        <VictoryPie
-          padding={0}
-          innerRadius={140}
-          animate={{ duration: 400 }}
-          data={data.map(({ count }) => ({ x: '', y: count }))}
-          labels={() => ''}
-          colorScale={data.map(({ color }) => color)}
-        />
-        <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-medium text-lg">
-          {centerCount}
-        </p>
+    <>
+      <div
+        className={classNames(
+          'h-full inline-block align-bottom',
+          containerWidthClass
+        )}
+      >
+        <div className="w-full h-full relative">
+          <VictoryPie
+            padding={0}
+            innerRadius={175}
+            animate={{ duration: 400 }}
+            data={data.map(({ count }) => ({ x: '', y: count }))}
+            labels={() => ''}
+            colorScale={data.map(({ color }) => color)}
+          />
+          <p
+            className={classNames(
+              'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-medium',
+              centerTitleClasses
+            )}
+          >
+            {centerCount <= MAX_COUNT ? centerCount : MAX_COUNT + '+'}
+          </p>
+        </div>
       </div>
-    </div>
+      {title && (
+        <p className="text-xs text-center font-semibold mt-2">{title}</p>
+      )}
+    </>
   );
 };