✨ feat: added breadcrumbs, padding to searchlist, accessibility featu…

…res, fallbackElement
Ayngie · Jan 19, 2024 · c99cd59 · c99cd59
1 parent 1eacbf0
commit c99cd59
Show file tree

Hide file tree

Showing 15 changed files with 205 additions and 79 deletions.
diff --git a/src/components/ForwardSlash.tsx b/src/components/ForwardSlash.tsx
@@ -0,0 +1,7 @@
+import { StyledForwardSlash } from "./styles/StyledTexts";
+
+export const ForwardSlash = () => {
+  return (
+    <StyledForwardSlash>/</StyledForwardSlash>
+    );
+};
diff --git a/src/components/LinkToTop.tsx b/src/components/LinkToTop.tsx
@@ -3,6 +3,6 @@ import { UpSymbol } from "./styles/StyledTexts";
 
 export const LinkToTop = () => {
   return (
-    <UpSymbol><AnchorLink href="#/naturlig-guide-till-graviditetsdiabetes/">^</AnchorLink></UpSymbol>
+    <UpSymbol><AnchorLink href="#/naturlig-guide-till-graviditetsdiabetes/" aria-label="Link to top of page">^</AnchorLink></UpSymbol>
     );
 };
diff --git a/src/components/pages/AboutProject.tsx b/src/components/pages/AboutProject.tsx
@@ -2,9 +2,10 @@ import { useEffect } from "react";
 import envelopeIcon from "/envelope-heart-fill.svg";
 import linkedInIcon from "/linkedin.svg";
 import gitHubIcon from "/github.svg";
+import { ForwardSlash } from "../ForwardSlash";
 import { LinkToTop } from "../LinkToTop";
-import { StyledAboutSection, ParagraphWrapper } from "../styles/StyledWrappers";
-import { StyledHeading, Paragraph, BoldText, TextLink, MySignature } from "../styles/StyledTexts";
+import { StyledAboutSection, ParagraphWrapper, Breadcrumbs } from "../styles/StyledWrappers";
+import { StyledHeading, Paragraph, BoldText, TextLink, MySignature, StyledBreadcrumb } from "../styles/StyledTexts";
 import { StyledIcon } from "../styles/StyledIcon";
 
 export const AboutProject = () => {
@@ -24,69 +25,76 @@ export const AboutProject = () => {
   }, []);
 
   return (
-    <StyledAboutSection>
-      <StyledHeading>Om detta projekt</StyledHeading>
-      <ParagraphWrapper>
-        <Paragraph>
-          Denna webbplats är ett examensarbete gjort av frontendutvecklare <BoldText>Angelica Reuterswärd</BoldText>, på 
-          utbildningen <TextLink href="https://medieinstitutet.se/utbildningar/front-end-developer/"> Frontend Developer på Medieinstitutet i Stockholm</TextLink>. &#128187;
-        </Paragraph>
+    <>
+      <Breadcrumbs>
+        <StyledBreadcrumb href="/naturlig-guide-till-graviditetsdiabetes/" aria-label="Link to Home">Start</StyledBreadcrumb> <ForwardSlash/>
+        <p>Om detta projekt</p> 
+      </Breadcrumbs>
 
-        <Paragraph>
-          <BoldText>Inspirationen</BoldText> kommer från att jag själv haft graviditetsdiabetes - kanske vid min första 
-          graviditet, och definitivt vid min andra. Jag vet vilken djungel det är att försöka hitta bra 
-          information för att hålla sitt blodsocker i schack. Jag har själv känt stressen av ett ständigt 
-          stigande blodsocker, och själv velat undvika att ta insulinsprutor (om möjligt) och istället lyckas 
-          hantera jämnt blodsocker på naturlig väg. 
-        </Paragraph>
-
-        <Paragraph>
-          Tack vare mycket efterforskningar och hårt arbete lyckades jag slippa insulinet, ha en hälsosam graviditet, 
-          och fick en fantastiskt hälsosam och fin bebis (som var aldeles lagom stor :). &#129328;  
-        </Paragraph>
+      <StyledAboutSection>
+        <StyledHeading>Om detta projekt</StyledHeading>
+        <ParagraphWrapper>
+          <Paragraph>
+            Denna webbplats är ett examensarbete gjort av frontendutvecklare <BoldText>Angelica Reuterswärd</BoldText>, på 
+            utbildningen <TextLink href="https://medieinstitutet.se/utbildningar/front-end-developer/"> Frontend Developer på Medieinstitutet i Stockholm</TextLink>. &#128187;
+          </Paragraph>
 
-        <Paragraph>
-          Då jag har jobbat som osteopat med egen klinik i 10 år, har jag en del tidigare allmänna kunskaper inom medicin och hälsa, samt även ett stort intresse för att förebygga problem på naturlig väg. 
-        </Paragraph>
+          <Paragraph>
+            <BoldText>Inspirationen</BoldText> kommer från att jag själv haft graviditetsdiabetes - kanske vid min första 
+            graviditet, och definitivt vid min andra. Jag vet vilken djungel det är att försöka hitta bra 
+            information för att hålla sitt blodsocker i schack. Jag har själv känt stressen av ett ständigt 
+            stigande blodsocker, och själv velat undvika att ta insulinsprutor (om möjligt) och istället lyckas 
+            hantera jämnt blodsocker på naturlig väg. 
+          </Paragraph>
+
+          <Paragraph>
+            Tack vare mycket efterforskningar och hårt arbete lyckades jag slippa insulinet, ha en hälsosam graviditet, 
+            och fick en fantastiskt hälsosam och fin bebis (som var aldeles lagom stor :). &#129328;  
+          </Paragraph>
 
-        <Paragraph>
-          <BoldText>Målet med detta projekt</BoldText> var att försöka skapa en tydlig och strukturerad webbplats som 
-          erbjuder naturliga tips och info för att hjälpa hålla jämnare blodsocker och bättre hantera sin 
-          graviditetsdiabetes.            
-        </Paragraph>
+          <Paragraph>
+            Då jag har jobbat som osteopat med egen klinik i 10 år, har jag en del tidigare allmänna kunskaper inom medicin och hälsa, samt även ett stort intresse för att förebygga problem på naturlig väg. 
+          </Paragraph>
 
-        <Paragraph> Jag har utgått från de kunskaper och tips som hjälpte mig med min GDM.</Paragraph>
+          <Paragraph>
+            <BoldText>Målet med detta projekt</BoldText> var att försöka skapa en tydlig och strukturerad webbplats som 
+            erbjuder naturliga tips och info för att hjälpa hålla jämnare blodsocker och bättre hantera sin 
+            graviditetsdiabetes.            
+          </Paragraph>
 
-        <Paragraph>
-          <BoldText>Obs!</BoldText> Att denna webbplats EJ erbjuder medicinsk rådgivning, utan du som läsare är 
-          ansvarig för din egen vård och dina egna beslut. Har du en mer komplicerad sjukdomshistorik, 
-          eller kanske en historik av ätstörningar, rekommenderas du att fatta beslut i samråd med din 
-          vårdpersonal. &#9888;&#65039; 
-        </Paragraph>
+          <Paragraph> Jag har utgått från de kunskaper och tips som hjälpte mig med min GDM.</Paragraph>
 
-        <Paragraph>
-          <BoldText>Jag hoppas</BoldText> att mina tips kan ge någon annan en skjuts på vägen för att hålla sin 
-          graviditetsdiabetes under kontrol och må så bra som möjligt under sin gravidresa! &#129336; &#8205; 
-        </Paragraph>
+          <Paragraph>
+            <BoldText>Obs!</BoldText> Att denna webbplats EJ erbjuder medicinsk rådgivning, utan du som läsare är 
+            ansvarig för din egen vård och dina egna beslut. Har du en mer komplicerad sjukdomshistorik, 
+            eller kanske en historik av ätstörningar, rekommenderas du att fatta beslut i samråd med din 
+            vårdpersonal. &#9888;&#65039; 
+          </Paragraph>
 
-        <Paragraph>Vill du komma i kontakt med mig kan du prova att 
-          <TextLink href="mailto:angelica.reutersward@medieinstitutet.se?subject=Angående ditt examensarbete om graviditetsdiabetes&body=Hej Angelica! Jag heter..."> maila mig <StyledIcon src={envelopeIcon} alt="Envelope Icon"></StyledIcon> ! </TextLink>
-        </Paragraph>
+          <Paragraph>
+            <BoldText>Jag hoppas</BoldText> att mina tips kan ge någon annan en skjuts på vägen för att hålla sin 
+            graviditetsdiabetes under kontrol och må så bra som möjligt under sin gravidresa! &#129336; &#8205; 
+          </Paragraph>
 
-        <Paragraph>Med det sagt, önskar jag trevlig läsning & må så gott! &#128149;</Paragraph>
-        <Paragraph>Bästa hälsningar, </Paragraph>
-        <Paragraph><MySignature>Angelica </MySignature> &#128075;</Paragraph>
+          <Paragraph>Vill du komma i kontakt med mig kan du prova att 
+            <TextLink href="mailto:angelica.reutersward@medieinstitutet.se?subject=Angående ditt examensarbete om graviditetsdiabetes&body=Hej Angelica! Jag heter..."> maila mig <StyledIcon src={envelopeIcon} alt="Envelope Icon"></StyledIcon> ! </TextLink>
+          </Paragraph>
 
-        <Paragraph>P.s. Jag finns även på 
-          <TextLink href="https://www.linkedin.com/in/angelicareutersward/" target="_blank" aria-label="Link to go to LinkedIn profile page."> LinkedIn <StyledIcon src={linkedInIcon} alt="LinkedIn Icon"></StyledIcon> </TextLink>
-          , och på
-          <TextLink href="https://github.com/Ayngie" target="_blank" aria-label="Link to go to GitHub page."> GitHub <StyledIcon src={gitHubIcon} alt="GitHub Icon"></StyledIcon> </TextLink>
-          !
-        </Paragraph>
+          <Paragraph>Med det sagt, önskar jag trevlig läsning & må så gott! &#128149;</Paragraph>
+          <Paragraph>Bästa hälsningar, </Paragraph>
+          <Paragraph><MySignature>Angelica </MySignature> &#128075;</Paragraph>
 
-        <LinkToTop/>
-
-      </ParagraphWrapper>
-    </StyledAboutSection>
+          <Paragraph>P.s. Jag finns även på 
+            <TextLink href="https://www.linkedin.com/in/angelicareutersward/" target="_blank" aria-label="Link to go to LinkedIn profile page."> LinkedIn <StyledIcon src={linkedInIcon} alt="LinkedIn Icon"></StyledIcon> </TextLink>
+            , och på
+            <TextLink href="https://github.com/Ayngie" target="_blank" aria-label="Link to go to GitHub page."> GitHub <StyledIcon src={gitHubIcon} alt="GitHub Icon"></StyledIcon> </TextLink>
+            !
+          </Paragraph>
+
+          <LinkToTop/>
+
+        </ParagraphWrapper>
+      </StyledAboutSection>
+    </>
   );
 };
diff --git a/src/components/pages/FoodAdvice.tsx b/src/components/pages/FoodAdvice.tsx
@@ -3,8 +3,9 @@ import AnchorLink from "react-anchor-link-smooth-scroll";
 import articles from "../../data/articles.json";
 import { IArticlesData } from "../../models/IArticlesData";
 import { LinkToTop } from "../LinkToTop";
-import { StyledGrid, StyledAside, StyledSideNav, StyledSplitSection, StyledArticle, ParagraphWrapper } from "../styles/StyledWrappers";
-import { StyledHeadingMobile, StyledHeadingDesktop, Paragraph, StyledSideNavLink, TextLink } from "../styles/StyledTexts";
+import { StyledGrid, StyledAside, StyledSideNav, StyledSplitSection, StyledArticle, ParagraphWrapper, Breadcrumbs } from "../styles/StyledWrappers";
+import { StyledHeadingMobile, StyledHeadingDesktop, Paragraph, StyledSideNavLink, TextLink, StyledBreadcrumb } from "../styles/StyledTexts";
+import { ForwardSlash } from '../ForwardSlash';
 
 export const FoodAdvice = () => {
   useEffect(() => {
@@ -46,6 +47,11 @@ export const FoodAdvice = () => {
 
   return (
     <section>
+      <Breadcrumbs>
+        <StyledBreadcrumb href="/naturlig-guide-till-graviditetsdiabetes/" aria-label="Link to Home">Start</StyledBreadcrumb> <ForwardSlash/>
+        <p>Kost</p> 
+      </Breadcrumbs>
+
       <StyledHeadingMobile>Kostråd för ett stabilare blodsocker</StyledHeadingMobile>
       <StyledGrid>
         <StyledAside>

diff --git a/src/components/pages/LifeAdvice.tsx b/src/components/pages/LifeAdvice.tsx
@@ -2,9 +2,10 @@ import React, { useEffect } from 'react';
 import AnchorLink from "react-anchor-link-smooth-scroll";
 import articles from "../../data/articles.json";
 import { IArticlesData } from "../../models/IArticlesData";
+import { ForwardSlash } from '../ForwardSlash';
 import { LinkToTop } from "../LinkToTop";
-import { StyledGrid, StyledAside, StyledSideNav, StyledSplitSection, StyledArticle, ParagraphWrapper } from "../styles/StyledWrappers";
-import { StyledHeadingMobile, StyledHeadingDesktop, Paragraph, StyledSideNavLink, TextLink } from "../styles/StyledTexts";
+import { StyledGrid, StyledAside, StyledSideNav, StyledSplitSection, StyledArticle, ParagraphWrapper, Breadcrumbs } from "../styles/StyledWrappers";
+import { StyledHeadingMobile, StyledHeadingDesktop, Paragraph, StyledSideNavLink, TextLink, StyledBreadcrumb } from "../styles/StyledTexts";
 
 export const LifeAdvice = () => {
   useEffect(() => {
@@ -46,6 +47,11 @@ export const LifeAdvice = () => {
 
   return (
     <section>
+      <Breadcrumbs>
+        <StyledBreadcrumb href="/naturlig-guide-till-graviditetsdiabetes/" aria-label="Link to Home">Start</StyledBreadcrumb> <ForwardSlash/>
+        <p>Levnadsråd</p> 
+      </Breadcrumbs>
+
       <StyledHeadingMobile>Levnadsråd för ett stabilare blodsocker</StyledHeadingMobile>
       <StyledGrid>
         <StyledAside>

diff --git a/src/components/pages/RecipeTips.tsx b/src/components/pages/RecipeTips.tsx
@@ -2,9 +2,10 @@ import React, { useEffect } from 'react';
 import AnchorLink from "react-anchor-link-smooth-scroll";
 import articles from "../../data/articles.json";
 import { IArticlesData } from "../../models/IArticlesData";
+import { ForwardSlash } from '../ForwardSlash';
 import { LinkToTop } from "../LinkToTop";
-import { StyledGrid, StyledAside, StyledSideNav, StyledSplitSection, StyledRecipeArticle, IngredientsWrapper, ParagraphWrapper } from "../styles/StyledWrappers";
-import { StyledHeadingMobile, StyledHeadingDesktop, Paragraph, StyledSideNavLink } from "../styles/StyledTexts";
+import { StyledGrid, StyledAside, StyledSideNav, StyledSplitSection, StyledRecipeArticle, IngredientsWrapper, ParagraphWrapper, Breadcrumbs } from "../styles/StyledWrappers";
+import { StyledHeadingMobile, StyledHeadingDesktop, Paragraph, StyledSideNavLink, StyledBreadcrumb } from "../styles/StyledTexts";
 import { StyledInput } from '../styles/StyledInput';
 
 export const RecipeTips = () => {
@@ -62,6 +63,11 @@ export const RecipeTips = () => {
 
   return (
     <section>
+      <Breadcrumbs>
+        <StyledBreadcrumb href="/naturlig-guide-till-graviditetsdiabetes/" aria-label="Link to Home">Start</StyledBreadcrumb> <ForwardSlash/>
+        <p>Recept</p> 
+      </Breadcrumbs>
+
       <StyledHeadingMobile>Recepttips för ett stabilare blodsocker</StyledHeadingMobile>
 
       <StyledGrid>

diff --git a/src/components/pages/SearchFood.tsx b/src/components/pages/SearchFood.tsx
@@ -2,7 +2,9 @@ import { useEffect, useState } from "react";
 import { LocalJSONSearch } from "../search/searchMethods/LocalJSONSearch";
 // import { SwedishSearch } from "../search/searchMethods/SwedishSearch";
 // import { EnglishSearch } from "../search/EnglishSearch";
-import { StyledFullSection } from "../styles/StyledWrappers";
+import { ForwardSlash } from "../ForwardSlash";
+import { Breadcrumbs, StyledFullSection } from "../styles/StyledWrappers";
+import { StyledBreadcrumb } from "../styles/StyledTexts";
 
 export const SearchFood = () => {
   useEffect(() => {
@@ -23,10 +25,17 @@ export const SearchFood = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   return (
-    <StyledFullSection>
-      <LocalJSONSearch isLoading={isLoading} setIsLoading={setIsLoading}></LocalJSONSearch>
-      {/* <SwedishSearch isLoading={isLoading} setIsLoading={setIsLoading}></SwedishSearch> */}
-      {/* <EnglishSearch isLoading={isLoading} setIsLoading={setIsLoading}></EnglishSearch> */}
-    </StyledFullSection>
+    <>
+      <Breadcrumbs>
+        <StyledBreadcrumb href="/naturlig-guide-till-graviditetsdiabetes/" aria-label="Link to Home">Start</StyledBreadcrumb> <ForwardSlash/>
+        <p>Sök livsmedel</p> 
+      </Breadcrumbs>
+
+      <StyledFullSection>
+        <LocalJSONSearch isLoading={isLoading} setIsLoading={setIsLoading}></LocalJSONSearch>
+        {/* <SwedishSearch isLoading={isLoading} setIsLoading={setIsLoading}></SwedishSearch> */}
+        {/* <EnglishSearch isLoading={isLoading} setIsLoading={setIsLoading}></EnglishSearch> */}
+      </StyledFullSection>
+    </>
   );
 };
diff --git a/src/components/pages/TrainingAdvice.tsx b/src/components/pages/TrainingAdvice.tsx
@@ -2,9 +2,10 @@ import React, { useEffect } from 'react';
 import AnchorLink from "react-anchor-link-smooth-scroll";
 import articles from "../../data/articles.json";
 import { IArticlesData } from "../../models/IArticlesData";
+import { ForwardSlash } from '../ForwardSlash';
 import { LinkToTop } from "../LinkToTop";
-import { StyledGrid, StyledAside, StyledSideNav, StyledSplitSection, StyledArticle, ParagraphWrapper } from "../styles/StyledWrappers";
-import { StyledHeadingMobile, StyledHeadingDesktop, Paragraph, StyledSideNavLink, TextLink } from "../styles/StyledTexts";
+import { StyledGrid, StyledAside, StyledSideNav, StyledSplitSection, StyledArticle, ParagraphWrapper, Breadcrumbs } from "../styles/StyledWrappers";
+import { StyledHeadingMobile, StyledHeadingDesktop, Paragraph, StyledSideNavLink, TextLink, StyledBreadcrumb } from "../styles/StyledTexts";
 
 export const TrainingAdvice = () => {
   useEffect(() => {
@@ -46,6 +47,11 @@ export const TrainingAdvice = () => {
 
   return (
     <section>
+      <Breadcrumbs>
+        <StyledBreadcrumb href="/naturlig-guide-till-graviditetsdiabetes/" aria-label="Link to Home">Start</StyledBreadcrumb> <ForwardSlash/>
+        <p>Träning</p> 
+      </Breadcrumbs>
+
       <StyledHeadingMobile>Träningstips för ett stabilare blodsocker</StyledHeadingMobile>
       <StyledGrid>
         <StyledAside>

diff --git a/src/components/search/FullSearchResult.tsx b/src/components/search/FullSearchResult.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { IFoodItem } from "../../models/IFoodItem";
 import { SingleSearchResult } from "./SingleSearchResult";
-import { BoldText, ItalicText } from "../styles/StyledTexts";
+import { BoldText, ItalicText, RightCenteredText } from "../styles/StyledTexts";
 import { ClickableWrapper, ParagraphWrapper } from "../styles/StyledWrappers";
 import { LinkToTop } from "../LinkToTop";
 
@@ -32,7 +32,8 @@ export const FullSearchResult = ({foodData, showSingleFood, setShowSingleFood}:
                 <p data-cy="searched-food-results-listitem"><BoldText>{foodItem.Livsmedelsnamn} </BoldText> </p>
                 <p>Kolhydrater (g): {foodItem["Kolhydrater, tillgängliga (g)"]}</p>
                 <p>Varav sockerarter, totalt (g): {foodItem["Sockerarter, totalt (g)"]}</p>
-                <ItalicText>(Vikt/Portion = per 100 g)</ItalicText>
+                <p><ItalicText>(Vikt/Portion = per 100 g)</ItalicText></p>
+                <RightCenteredText>Läs mer...</RightCenteredText>
               </ClickableWrapper>
             ))}
 

diff --git a/src/components/search/searchMethods/LocalJSONSearch.tsx b/src/components/search/searchMethods/LocalJSONSearch.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { getJSONData } from "../../../services/getJSONData";
 import { SearchField } from "../searchField/SearchField";
 import { FullSearchResult } from "../FullSearchResult";
-import { StyledSearchSection, StyledArticle } from "../../styles/StyledWrappers";
+import { StyledSearchSection, StyledFullSearchResults } from "../../styles/StyledWrappers";
 import { StyledHeading, Paragraph } from "../../styles/StyledTexts";
 import { StyledLoader } from "../../styles/search/StyledLoader";
 import { IFoodItem } from "../../../models/IFoodItem";
@@ -89,7 +89,7 @@ export const LocalJSONSearch = ({ isLoading, setIsLoading}:IJSONSearchProps) =>
         { isLoading && <StyledLoader></StyledLoader> }
 
         { jsonSearchHasBeenDone && 
-          <StyledArticle> 
+          <StyledFullSearchResults> 
 
             {!showSingleFood && <p>Du sökte på: {jsonFood}</p>} 
 
@@ -103,7 +103,7 @@ export const LocalJSONSearch = ({ isLoading, setIsLoading}:IJSONSearchProps) =>
 
             { jsonSuccessFetching && <FullSearchResult foodData={jsonFoodData} showSingleFood={showSingleFood} setShowSingleFood={setShowSingleFood}></FullSearchResult> }
 
-          </StyledArticle>
+          </StyledFullSearchResults>
         }
         <Paragraph>Källa: Livsmedelsverkets livsmedelsdatabas version 2023-06-13</Paragraph>        
       </StyledSearchSection>

diff --git a/src/components/styles/StyledTexts.ts b/src/components/styles/StyledTexts.ts
@@ -37,6 +37,15 @@ export const Paragraph = styled.p `
     }
 `;
 
+export const RightCenteredText = styled.p `
+text-align: right;
+text-decoration: underline;
+font-size: smaller;
+color: rebeccapurple;
+padding-right: 20px;
+`;
+
+
 export const BoldText = styled.span `
     font-weight: 800;
 `;
@@ -81,6 +90,15 @@ export const StyledLinks = styled.span `
 
 export const TextLink = styled.a `
     color: rebeccapurple;
+`;
+
+export const StyledBreadcrumb = styled(TextLink) `
+    color: rebeccapurple;
+    padding: 10px;
+`;
+
+export const IconLink = styled.a `
+    color: rebeccapurple;
     text-decoration: none;
 `;
 
@@ -96,4 +114,9 @@ export const UpSymbol = styled.p `
         color: rebeccapurple;
         text-decoration: none;
     }
+`;
+
+export const StyledForwardSlash = styled.span `
+    padding-left: 10px;
+    padding-right: 10px;
 `;