#140 Fix Globals, Home, Dataset, Dataset Detail, Build Data

FCSCOpendata · Dec 14, 2023 · 132ad90 · 132ad90
1 parent f892673
commit 132ad90
Show file tree

Hide file tree

Showing 16 changed files with 99 additions and 51 deletions.
diff --git a/components/_shared/ScrollIndicator.tsx b/components/_shared/ScrollIndicator.tsx
@@ -64,6 +64,7 @@ const ScrollIndicator: React.FC<{
               <div className="h-full absolute flex flex-col justify-evenly w-full items-center border-[#333333] border-t-[1px] border-b-[1px] w-1">
                 {stops.map((stop, index) => (
                   <button
+                    aria-label={`Section ${index + 1}`}
                     className={`transition-all ease-in-out origin-center duration-100 rounded-full border-[1px] border-[#333333] w-[10px] h-[10px] bg-[#fff] ${
                       active == index ? 'scale-150' : ''
                     } flex justify-center items-center`}

diff --git a/components/_shared/developer_experience/Code.tsx b/components/_shared/developer_experience/Code.tsx
@@ -1,5 +1,8 @@
 import SyntaxHighlighter from 'react-syntax-highlighter';
-import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import {
+  docco,
+  githubGist,
+} from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import { AR } from '../../../hooks/locale';
 import CopyIconButton from '../CopyIconButton';
 import useTranslation from 'next-translate/useTranslation';
@@ -24,7 +27,7 @@ const Code: React.FC<any> = ({ language, children }) => {
           <SyntaxHighlighter
             language={language}
             className="syntax"
-            style={docco}
+            style={githubGist}
             customStyle={{
               backgroundColor: '#FEFEFE',
               borderRadius: '25px',

diff --git a/components/dataset/About.tsx b/components/dataset/About.tsx
@@ -34,33 +34,49 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           />
         </h1>
       </div>
-      <div className="flex flex-col lg:flex-row justify-start gap-x-8 mb-4 text-[#787878] text-[20px] font-normal">
+      <div className="flex flex-col lg:flex-row justify-start gap-x-8 mb-4 text-[#595959] text-[20px] font-normal">
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/library-icon.svg" alt="orgs" className="w-5 h-3" />
+          <img
+            src="/images/library-icon.svg"
+            alt="organization"
+            className="w-5 h-3"
+          />
           <Link href={`/@${result.organization.name}`}>
             <a href={`/@${result.organization.name}`}>
               {result.organization.title}
             </a>
           </Link>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/print-icon.svg" alt="orgs" className="w-5 h-3 " />
+          <img
+            src="/images/print-icon.svg"
+            alt="date created"
+            className="w-5 h-3 "
+          />
           <span>
             {t('created') +
               ' ' +
               new Date(result.created).toLocaleDateString('en-GB')}
           </span>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/clock-icon.svg" alt="orgs" className="w-5 h-3" />
+          <img
+            src="/images/clock-icon.svg"
+            alt="date updated"
+            className="w-5 h-3"
+          />
           <span>
             {t('updated') +
               ' ' +
               new Date(result.updated).toLocaleDateString('en-GB')}
           </span>
         </div>
         <div className="font-avenir flex text-sm py-2 items-baseline">
-          <img src="/images/book-icon.svg" alt="orgs" className="w-5  h-3" />
+          <img
+            src="/images/book-icon.svg"
+            alt="license"
+            className="w-5  h-3"
+          />
           <span>{result.license_title}</span>
         </div>
         {result.total_downloads > 0 ? (
@@ -75,7 +91,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           ''
         )}
       </div>
-      <div className="flex justify-start gap-x-4 md:gap-x-8 mb-4 text-[#787878] text-[20px] font-normal items-baseline">
+      <div className="flex justify-start gap-x-4 md:gap-x-8 mb-4 text-[#595959] text-[20px] font-normal items-baseline">
         <div className="font-avenir flex text-sm py-2 items-baseline">
           <span>{t('share')}: </span>
           <Share title={result.title} />
@@ -89,10 +105,10 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           <Rate title={result.title} id={result.id} />
         </div>
       </div>
-      <article className="font-avenir text-[#7C7C7C] text-[20px] font-normal  mb-4">
+      <article className="font-avenir text-[#595959] text-[20px] font-normal  mb-4">
         {result.description?.replace(/<[^>]*>?/gm, '') || ''}
       </article>
-      <div className="flex flex-row font-avenir font-normal text-[15px] text-[#086F06]">
+      <div className="flex flex-row font-avenir font-normal text-[15px] text-[#074106]">
         <Tags
           tags={result.tags}
           style={`rounded-full bg-[#80E47E] py-2 px-4 ${AR('', 'mr-4')}`}

diff --git a/components/dataset/DataExplorer.tsx b/components/dataset/DataExplorer.tsx
@@ -159,7 +159,7 @@ const DataExplorer: React.FC<{
                   {i === activeTable ? (
                     <img
                       src="/images/checked-icon.svg"
-                      alt="orgs"
+                      alt="org checked"
                       className={`w-5 h-4 mb-4 absolute -top-2 ${AR(
                         'right-2',
                         '-right-2'
@@ -175,7 +175,7 @@ const DataExplorer: React.FC<{
                         ? `/images/${resource.format.toLowerCase()}-icon.svg`
                         : '/images/resources/unknown.svg'
                     }
-                    alt="orgs"
+                    alt={`resource ${i}`}
                     className="w-10 mb-4"
                   />
 
@@ -191,9 +191,9 @@ const DataExplorer: React.FC<{
       <div className="lg:col-span-9 p-6 lg:p-10 bg-[#F7FAFC] rounded-2xl">
         <div className="flex flex-col md:flex-row justify-between mb-4">
           <div className="md:w-2/3">
-            <p className="font-medium font-avenir text-2xl mb-5 text-[#4D4D4D]">
+            <h2 className="font-medium font-avenir text-2xl mb-5 text-[#4D4D4D]">
               {resources[activeTable].title || resources[activeTable].name}
-            </p>
+            </h2>
           </div>
           <div className="grid xl:justify-items-end align-middle justify-items-start ">
             <Link
@@ -217,7 +217,7 @@ const DataExplorer: React.FC<{
         </div>
 
         <div
-          className={`flex font-avenir text-[20px] text-[#808080] font-normal ${AR(
+          className={`flex font-avenir text-[20px] text-[#545454] font-normal ${AR(
             'pr-4',
             'pl-4'
           )} flex-col sm:flex-row`}
@@ -237,7 +237,7 @@ const DataExplorer: React.FC<{
             className={`${AR(
               'ml-3',
               'mr-3'
-            )} text-[#C4C4C4] text-1 hidden sm:block`}
+            )} text-[#545454] text-1 hidden sm:block`}
           >
             |
           </div>
@@ -250,7 +250,7 @@ const DataExplorer: React.FC<{
             className={`${AR(
               'ml-3',
               'mr-3'
-            )} text-[#C4C4C4] text-1 hidden sm:block`}
+            )} text-[#545454] text-1 hidden sm:block`}
           >
             |
           </div>

diff --git a/components/dataset/Share.tsx b/components/dataset/Share.tsx
@@ -8,6 +8,7 @@ const Share: React.FC<{ title: string }> = ({ title }) => {
   return (
     <span className={`text-[#1F356C] ${AR('ml-2', 'mr-2')}}`}>
       <a
+        aria-label="Share"
         href={`mailto:?subject=${subject}&body=${title} - ${
           typeof window !== 'undefined' ? window.location.href : ''
         }  %0d%0a %0d%0a ${t('goto-site', {

diff --git a/components/dataset/SimilarDatasets.tsx b/components/dataset/SimilarDatasets.tsx
@@ -49,7 +49,7 @@ export default function SimilarDatasets({ variables }) {
       <div className="flex justify-center w-full xl:p-10">
         <div className="flex flex-col items-between h-full xl:w-2/3 mb-10 w-full">
           <div className="self-center mb-4 font-avenir text-[30px] font-extrabold text-[#4D4D4D]">
-            <p>{t('explore-s-datasets')}</p>
+            <h2>{t('explore-s-datasets')}</h2>
           </div>
           <div className="flex xl:flex-row flex-col justify-between bg-[#F7FAFC] p-2 rounded-xl">
             <button
@@ -58,7 +58,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/edu-icon.svg"
-                alt="orgs"
+                alt="topic icon"
                 className={`w-4 h-4 ${AR('ml-2', 'mr-2')}`}
               />
               {result.groups[0]?.title} {t('topic')}
@@ -69,7 +69,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/ball-icon.svg"
-                alt="orgs"
+                alt="keywork icon"
                 className={`w-4 h-4 text-white ${AR('ml-2', 'mr-2')}`}
               />
               {result.tags[0]?.title} {t('keyword')}
@@ -80,7 +80,7 @@ export default function SimilarDatasets({ variables }) {
             >
               <img
                 src="/images/library-icon.svg"
-                alt="orgs"
+                alt="org icon"
                 className={`w-4 h-4 text-white ${AR('ml-2', 'mr-2')}`}
               />
               {result.organization.title}

diff --git a/components/home/main/OpenData101.tsx b/components/home/main/OpenData101.tsx
@@ -10,14 +10,16 @@ export default function OpenData101(props) {
   }
 
   return (
-    <div className="relative h-fit mb-[70px] sm:mb-10 container mx-auto ">
+    <div className="relative h-fit mb-[70px] sm:mb-10 container mx-auto">
       <img
         src="/images/open-data-101.svg"
-        alt="Open Data 101"
+        alt="Open Data 101 Background"
         className="w-full"
       />
       <div className="absolute w-full lg:w-1/2  lg:inset-x-1/4 top-0 sm:top-auto sm:bottom-1/2 text-center">
-        <p className="text-[#54CA59] font-semibold">- {t('hm-p-next')} -</p>
+        <p className="text-[#0E5D15] text-[18px] font-semibold">
+          - {t('hm-p-next')} -
+        </p>
         <a href={`${AR('/ar')}/p/open-data-101`}>
           <h2 className="font-avenir font-extrabold text-2xl lg:text-4xl mb-2">
             {text}
@@ -28,7 +30,7 @@ export default function OpenData101(props) {
         </p>
         <a
           href="#"
-          className="text-[#54CA59] font-medium"
+          className="text-[#0E5D15] font-medium text-[18px]"
           onClick={scrollToTop}
         >
           {t('opendata-a')}

diff --git a/components/home/main/Topics.tsx b/components/home/main/Topics.tsx
@@ -46,8 +46,8 @@ export default function Topics() {
                   href={`${AR('/ar')}/topic/${topic.name}`}
                   className="group h-full w-full flex flex-stretch"
                 >
-                  <div className="relative bg-gray-200 w-full rounded-lg overflow-hidden">
-                    <span className="absolute left-0 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l z-10" />
+                  <div className="relative bg-gray w-full rounded-lg overflow-hidden topic-item">
+                    <span className="absolute left-0 z-20 bottom-0 w-full h-full group-hover:border-b-4 border-[#22B373] rounded-b-l " />
                     <Image
                       src={topic.image_display_url}
                       priority={false}
@@ -57,7 +57,7 @@ export default function Topics() {
                       alt={topic.title}
                       className="w-full h-full object-center object-contain"
                     />
-                    <p className="absolute py-4 bottom-0 inset-x-0 text-white text-sm text-center leading-4 font-poppins font-semibold group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all">
+                    <p className="absolute z-10 py-4 bottom-0 inset-x-0 text-white text-sm text-center leading-4 font-poppins font-semibold group-hover:bg-slate-200 group-hover:opacity-75 group-hover:text-black transition-all">
                       {topic.title}
                     </p>
                   </div>

diff --git a/components/resource/About.tsx b/components/resource/About.tsx
@@ -42,13 +42,13 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
           {resource.format === 'CSV' ? (
             <img
               src="/images/csv-icon.svg"
-              alt="Dataset title"
+              alt="CSV"
               className="inline w-6 xl:mr-2"
             />
           ) : (
             <img
               src="/images/excel-icon.svg"
-              alt="Dataset title"
+              alt="Excel"
               className="inline w-6 xl:mr-2"
             />
           )}
@@ -62,7 +62,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
             />
           </h1>
         </div>
-        <article className="font-avenir text-[#7C7C7C] text-[20px] font-normal mb-4">
+        <article className="font-avenir text-[#545454] text-[20px] font-normal mb-4">
           {resource.description?.replace(/<[^>]*>?/gm, '') || ''}
         </article>
       </div>

diff --git a/components/resource/ChartBuilder.tsx b/components/resource/ChartBuilder.tsx
@@ -72,7 +72,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
       <div className="flex  justify-start w-full py-10 pl-0">
         <div className="flex flex-col items-between h-full w-1/2 mb-10">
           <div className="self-start mb-4 font-avenir text-[30px] font-extrabold text-[#4D4D4D]">
-            <p>{t('create-viz')}</p>
+            <h2>{t('create-viz')}</h2>
           </div>
           <div className="flex xl:flex-row flex-col bg-[#F7FAFC] justify-between p-2 rounded-xl xl:w-4/6">
             <button
@@ -85,7 +85,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
             >
               <img
                 src="/images/pie-icon.svg"
-                alt="orgs"
+                alt="build chart icon"
                 className="w-4  h-4 mr-2"
               />
               {t('build-chart')}
@@ -100,7 +100,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
             >
               <img
                 src="/images/app-icon.svg"
-                alt="orgs"
+                alt="build dashboard icon"
                 className="w-4  h-4 mr-4 text-white"
               />
               {t('build-dashboard')}
@@ -122,6 +122,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
                 {t('chart-type')}
               </span>
               <select
+                aria-label="Chart type"
                 value={view.spec.type}
                 onChange={handleChartTypeChange}
                 className="rounded-xl outline-none border-none font-avenir font-medium text-[16px] p-4"
@@ -138,6 +139,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
                 {t('dimension')}
               </span>
               <select
+                aria-label="Dimension"
                 value={view.spec.group}
                 onChange={handleDimensionChange}
                 disabled={!view.spec.type}
@@ -158,6 +160,7 @@ const ChartBuilder: React.FC<{ resources: any }> = ({ resources }) => {
                 {t('measure')}
               </span>
               <select
+                aria-label="Measure"
                 value={view.spec.series[0] || ''}
                 onChange={handleMeasureChange}
                 disabled={!view.spec.type || !view.spec.group}

diff --git a/components/resource/ResourceExplorer.tsx b/components/resource/ResourceExplorer.tsx
@@ -111,7 +111,7 @@ const DataExplorer: React.FC<{ dataset: any; columnHeaderStyle: any }> = ({
       {/* Preview: show Data Explorer if tabular data + datastore active */}
       <div className="col-span-12 p-10 bg-[#F7FAFC] rounded-2xl">
         <div className="flex xl:flex-row flex-col justify-between mb-4">
-          <div className="flex font-avenir text-[20px] text-[#808080] font-normal pl-4 w-2/3 xl:flex-row flex-col">
+          <div className="flex font-avenir text-[20px] text-[#545454] font-normal pl-4 w-2/3 xl:flex-row flex-col">
             <div className="flex xl:mr-3 items-baseline mb-2">
               <button
                 onClick={() => download(resources[activeTable].path)}
@@ -121,15 +121,15 @@ const DataExplorer: React.FC<{ dataset: any; columnHeaderStyle: any }> = ({
                 {t('download')}
               </button>
             </div>
-            <div className="mr-3 text-[#C4C4C4] text-1 hidden xl:inline">
+            <div className="mr-3 text-[#545454] text-1 hidden xl:inline">
               |
             </div>
             <div className="flex xl:mr-3 mb-2">
               <span>
                 {resources[activeTable].count || 'N/A'} {t('rows')}
               </span>
             </div>
-            <div className="mr-3 text-[#C4C4C4] text-1 hidden xl:inline">
+            <div className="mr-3 text-[#545454] text-1 hidden xl:inline">
               |
             </div>
             <div className="flex mr-3">

diff --git a/components/search/List.tsx b/components/search/List.tsx
@@ -78,7 +78,7 @@ const List: React.FC<{
           )}
           {!loadSearch &&
             searchResults?.results.map((dataset, index) => (
-              <ListCard key={index} dataset={dataset} />
+              <ListCard key={index} index={index} dataset={dataset} />
             ))}
         </ul>
         <div className="flex justify-center overflow-auto hoverable-scroll">