Kafetegia css modulesera pasatzen du (#13)

* feat: styled components hasieratik kentzen du

* refactor: extract component

* refactor: move to new file

* feat: kafetegia css modulesera pasatzen du

* feat: produktu zerrenda css modulesera pasatzen du

front/gatsby-config.js

@@ -59,7 +59,7 @@ module.exports = {
         fonts: {
           google: [
             {
-              family: 'Martel Sans',
+              family: 'Almarai',
               variants: ['300', '700'],
               fontDisplay: 'swap',
             },

front/src/pages/index.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { graphql, PageProps, useStaticQuery } from 'gatsby';
 
 import { SEO } from '../components/SEO';
-import { GlobalStyles } from '../ui/GlobalStyles';
 import { Hasiera } from '../views/Hasiera/Hasiera';
 import { HasieraContent } from '../views/Hasiera/HasieraContent';
 
@@ -30,8 +29,6 @@ const IndexPage: React.FC<PageProps> = ({ location }) => {
         location={location}
       />
 
-      <GlobalStyles />
-
       <Hasiera content={strapiHasiera} />
     </>
   );

front/src/pages/kafetegia.tsx

@@ -1,236 +1,25 @@
 import React from 'react';
 
 import { PageProps } from 'gatsby';
-import { rem } from 'polished';
-import styled from 'styled-components';
 
-import BeganoaLogo from '../assets/beganoa.svg';
-import EkologikoaLogo from '../assets/ekologikoa.svg';
-import { AlergenoLegenda } from '../components/AlergenoLegenda';
-import { Container } from '../components/Container';
-import { Gainburua } from '../components/Gainburua';
-import { Oina } from '../components/Oina';
 import { SEO } from '../components/SEO';
-import { produktuaFactory } from '../domain/factories/produktuaFactory';
-import { Produktua } from '../domain/models/Produktua';
-import { GlobalStyles } from '../ui/GlobalStyles';
-import { colors, font, fontWeight, media, size } from '../ui/theme';
 import { useKafetegiaData } from '../viewQueries/useKafetegiaData';
+import { Kafetegia } from '../views/Kafetegia';
 
-const Kafetegia: React.FC<PageProps> = ({ location }) => {
-  const { izenburua, deskribapena, menua } = useKafetegiaData();
-
-  // oraingoz menuak alergenorik ez duenez, ezkutatuko dugu
-  // TODO modu dinamikoan aldatu balio hau
-  const hasAlergenoak = false;
+const KafetegiaPage: React.FC<PageProps> = ({ location }) => {
+  const content = useKafetegiaData();
 
   return (
     <>
-      <SEO title={izenburua} description={deskribapena} location={location} />
-
-      <GlobalStyles />
-
-      <Gainburua
-        atala="kafetegia"
-        izenburua={izenburua}
-        deskribapena={deskribapena}
+      <SEO
+        title={content.izenburua}
+        description={content.deskribapena}
+        location={location}
       />
 
-      <ContentWrapper id="edukia">
-        <Container>
-          {menua.map(konponentea => {
-            if (
-              konponentea.konponentea ===
-              'StrapiComponentKafetegiaProduktuTaldea'
-            ) {
-              return (
-                <ZerrendaWrapper key={konponentea.id}>
-                  <ProduktuZerrenda
-                    izena={konponentea.izenburua}
-                    produktuZerrenda={konponentea.produktuak.map(
-                      produktuaFactory,
-                    )}
-                  />
-                </ZerrendaWrapper>
-              );
-            }
-
-            if (
-              konponentea.konponentea === 'StrapiComponentKafetegiaIzenburua'
-            ) {
-              return (
-                <IzenburuWrapper key={konponentea.id}>
-                  <Marra />
-                  <Izenburua>{konponentea.izenburuBalioa}</Izenburua>
-                </IzenburuWrapper>
-              );
-            }
-          })}
-
-          {hasAlergenoak && (
-            <TaldeWrapper>
-              <IzenburuWrapper>
-                <Marra />
-                <Izenburua>Alergenoak</Izenburua>
-              </IzenburuWrapper>
-
-              <AlergenoLegenda />
-            </TaldeWrapper>
-          )}
-
-          <OnEgin>
-            <p>On egin!</p>
-          </OnEgin>
-        </Container>
-      </ContentWrapper>
-
-      <Oina />
+      <Kafetegia content={content} />
     </>
   );
 };
 
-const OnEgin = styled.div`
-  text-align: center;
-  ${font.gargantuan()};
-`;
-
-const ContentWrapper = styled.div`
-  padding: ${size.huge}px 0;
-`;
-
-const TaldeWrapper = styled.section`
-  margin-bottom: ${size.large}px;
-`;
-
-const ZerrendaWrapper = styled.div`
-  &:not(:last-child) {
-    margin-bottom: ${size.base}px;
-  }
-`;
-
-const ProduktuZerrenda: React.FC<{
-  produktuZerrenda: Produktua[];
-  izena?: React.ReactNode;
-}> = ({ produktuZerrenda, izena }) => (
-  <ProduktuTaula>
-    {izena && <ProduktuMota>{izena}</ProduktuMota>}
-
-    <tbody>
-      {produktuZerrenda.map(produktua => (
-        <tr key={produktua.id}>
-          <Ezaugarria>
-            {produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
-          </Ezaugarria>
-          <Ezaugarria>
-            {produktua.ekologikoa && (
-              <EkologikoaLogo title="Produktu ekologikoa" />
-            )}
-          </Ezaugarria>
-          <Izena scope="row">
-            {produktua.izena}{' '}
-            {produktua.alergenoak.map(alergenoa => (
-              <Alergenoa>{alergenoa.zenbakia}</Alergenoa>
-            ))}
-          </Izena>
-          <Prezioa>
-            {new Intl.NumberFormat('eu-ES', {
-              style: 'currency',
-              currency: 'EUR',
-            }).format(produktua.prezioa)}
-          </Prezioa>
-        </tr>
-      ))}
-    </tbody>
-  </ProduktuTaula>
-);
-
-const Alergenoa = styled.span`
-  color: ${colors.morea};
-  font-weight: ${fontWeight.bold};
-
-  &:not(:last-child)::after {
-    content: ', ';
-  }
-`;
-
-const ProduktuTaula = styled.table`
-  width: 100%;
-  table-layout: fixed;
-  overflow-wrap: break-word;
-  border-collapse: separate;
-  border-spacing: 0 ${size.tiny}px;
-
-  ${media.tablet`
-    border-spacing: 0 ${size.xtiny}px;
-  `}
-`;
-
-const Ezaugarria = styled.td`
-  width: ${size.base}px;
-  height: ${size.base}px;
-  padding: 0 ${size.xtiny}px;
-  vertical-align: top;
-
-  ${media.tablet`
-    width: ${size.medium}px;
-    height: ${size.medium}px;
-  `}
-`;
-
-const Izena = styled.td`
-  text-align: left;
-  font-weight: ${fontWeight.regular};
-  padding: 0 ${size.xtiny}px;
-  vertical-align: top;
-`;
-
-const Prezioa = styled.td`
-  width: ${size.huge}px;
-  text-align: right;
-  font-weight: ${fontWeight.regular};
-  padding: 0 ${size.xtiny}px;
-  vertical-align: top;
-`;
-
-const ProduktuMota = styled.caption`
-  ${font.large()};
-  text-align: left;
-  padding-left: 52px;
-  margin-bottom: ${rem(size.mini)};
-
-  &::after {
-    content: '.';
-  }
-
-  ${media.tablet`
-    padding-left: 67px;
-  `}
-`;
-
-const IzenburuWrapper = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  margin-bottom: ${rem(size.medium)};
-`;
-
-const Marra = styled.div`
-  /* altuera erabiliko den letraren berdina da */
-  height: ${rem(41.83)};
-  flex-grow: 1;
-  box-shadow: inset 0px -3px 0px 0px ${colors.beltza};
-  margin-right: ${rem(size.tiny)};
-`;
-
-const Izenburua = styled.h1`
-  text-align: right;
-  vertical-align: bottom;
-
-  &:after {
-    content: '.';
-  }
-
-  ${font.gargantuan()};
-`;
-
-export default Kafetegia;
+export default KafetegiaPage;

front/src/styles/cssConfig.scss

@@ -2,3 +2,18 @@
 @import 'generic';
 @import 'tools';
 @import 'utilities';
+
+@import './tools/mixins/font.scss';
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: 'Almarai', sans-serif;
+
+  @include baseFont;
+  font-weight: 700;
+
+  color: var(--color-beltza);
+}

front/src/views/Kafetegia/Kafetegia.module.scss

@@ -0,0 +1,46 @@
+@import '../../styles/tools/mixins/font.scss';
+
+.contentWrapper {
+  padding: var(--size-huge) 0;
+}
+
+.onEgin {
+  text-align: center;
+  @include gargantuanFont;
+}
+
+.taldeWrapper {
+  margin-bottom: var(--size-large);
+}
+
+.izenburuWrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: var(--size-medium);
+}
+
+.marra {
+  /* altuera erabiliko den letraren berdina da */
+  height: #{toRem(41.83)};
+  flex-grow: 1;
+  box-shadow: inset 0px -3px 0px 0px var(--color-beltza);
+  margin-right: var(--size-tiny);
+}
+
+.izenburua {
+  text-align: right;
+  vertical-align: bottom;
+
+  @include gargantuanFont;
+
+  &:after {
+    content: '.';
+  }
+}
+
+.zerrendaWrapper {
+  &:not(:last-child) {
+    margin-bottom: var(--size-base);
+  }
+}

front/src/views/Kafetegia/Kafetegia.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { AlergenoLegenda } from '../../components/AlergenoLegenda';
+import { Container } from '../../components/Container';
+import { Gainburua } from '../../components/Gainburua';
+import { Oina } from '../../components/Oina';
+import { produktuaFactory } from '../../domain/factories/produktuaFactory';
+import { KafetegiaData } from '../../viewQueries/KafetegiaData';
+import { ProduktuZerrenda } from './components/ProduktuZerrenda';
+import * as styles from './Kafetegia.module.scss';
+
+export const Kafetegia: React.FC<{ content: KafetegiaData }> = ({
+  content,
+}) => {
+  const { izenburua, deskribapena, menua } = content;
+
+  // oraingoz menuak alergenorik ez duenez, ezkutatuko dugu
+  // TODO modu dinamikoan aldatu balio hau
+  const hasAlergenoak = false;
+
+  return (
+    <>
+      <Gainburua
+        atala="kafetegia"
+        izenburua={izenburua}
+        deskribapena={deskribapena}
+      />
+
+      <div className={styles.contentWrapper} id="edukia">
+        <Container>
+          {menua.map(konponentea => {
+            if (
+              konponentea.konponentea ===
+              'StrapiComponentKafetegiaProduktuTaldea'
+            ) {
+              return (
+                <div className={styles.zerrendaWrapper} key={konponentea.id}>
+                  <ProduktuZerrenda
+                    izena={konponentea.izenburua}
+                    produktuZerrenda={konponentea.produktuak.map(
+                      produktuaFactory,
+                    )}
+                  />
+                </div>
+              );
+            }
+
+            if (
+              konponentea.konponentea === 'StrapiComponentKafetegiaIzenburua'
+            ) {
+              return (
+                <div className={styles.izenburuWrapper} key={konponentea.id}>
+                  <div className={styles.marra} />
+                  <h1 className={styles.izenburua}>
+                    {konponentea.izenburuBalioa}
+                  </h1>
+                </div>
+              );
+            }
+          })}
+
+          {hasAlergenoak && (
+            <section className={styles.taldeWrapper}>
+              <div className={styles.izenburuWrapper}>
+                <div className={styles.marra} />
+                <h1 className={styles.izenburua}>Alergenoak</h1>
+              </div>
+
+              <AlergenoLegenda />
+            </section>
+          )}
+
+          <p className={styles.onEgin}>On egin!</p>
+        </Container>
+      </div>
+
+      <Oina />
+    </>
+  );
+};

front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.module.scss

@@ -0,0 +1,66 @@
+@import '../../../../styles/tools/mediaQueries.scss';
+@import '../../../../styles/tools/mixins/font.scss';
+
+.produktuTaula {
+  width: 100%;
+  table-layout: fixed;
+  overflow-wrap: break-word;
+  border-collapse: separate;
+  border-spacing: 0 var(--size-tiny);
+
+  @media #{$fromTablet} {
+    border-spacing: 0 var(--size-tiny);
+  }
+}
+
+.ezaugarria {
+  width: var(--size-base);
+  height: var(--size-base);
+  padding: 0 var(--size-xtiny);
+  vertical-align: top;
+
+  @media #{$fromTablet} {
+    width: var(--size-medium);
+    height: var(--size-medium);
+  }
+}
+
+.izena {
+  text-align: left;
+  font-weight: 300;
+  padding: 0 var(--size-xtiny);
+  vertical-align: top;
+}
+
+.prezioa {
+  width: var(--size-huge);
+  text-align: right;
+  font-weight: 300;
+  padding: 0 var(--size-xtiny);
+  vertical-align: top;
+}
+
+.mota {
+  text-align: left;
+  padding-left: 52px;
+  margin-bottom: var(--size-mini);
+
+  @include largeFont;
+
+  &::after {
+    content: '.';
+  }
+
+  @media #{$fromTablet} {
+    padding-left: 67px;
+  }
+}
+
+.alergenoa {
+  color: var(--color-morea);
+  font-weight: 700;
+
+  &:not(:last-child)::after {
+    content: ', ';
+  }
+}

front/src/views/Kafetegia/components/ProduktuZerrenda/ProduktuZerrenda.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import BeganoaLogo from '../../../../assets/beganoa.svg';
+import EkologikoaLogo from '../../../../assets/ekologikoa.svg';
+import { Produktua } from '../../../../domain/models/Produktua';
+import * as styles from './ProduktuZerrenda.module.scss';
+
+interface Props {
+  produktuZerrenda: Produktua[];
+  izena?: React.ReactNode;
+}
+
+export const ProduktuZerrenda: React.FC<Props> = ({
+  produktuZerrenda,
+  izena,
+}) => (
+  <table className={styles.produktuTaula}>
+    {izena && <caption className={styles.mota}>{izena}</caption>}
+
+    <tbody>
+      {produktuZerrenda.map(produktua => (
+        <tr key={produktua.id}>
+          <td className={styles.ezaugarria}>
+            {produktua.beganoa && <BeganoaLogo title="Produktu beganoa" />}
+          </td>
+          <td className={styles.ezaugarria}>
+            {produktua.ekologikoa && (
+              <EkologikoaLogo title="Produktu ekologikoa" />
+            )}
+          </td>
+          <td className={styles.izena} scope="row">
+            {produktua.izena}{' '}
+            {produktua.alergenoak.map(alergenoa => (
+              <span className={styles.alergenoa}>{alergenoa.zenbakia}</span>
+            ))}
+          </td>
+          <td className={styles.prezioa}>
+            {new Intl.NumberFormat('eu-ES', {
+              style: 'currency',
+              currency: 'EUR',
+            }).format(produktua.prezioa)}
+          </td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);

front/src/views/Kafetegia/components/ProduktuZerrenda/index.ts

@@ -0,0 +1 @@
+export { ProduktuZerrenda } from './ProduktuZerrenda';

front/src/views/Kafetegia/index.ts

@@ -0,0 +1 @@
+export { Kafetegia } from './Kafetegia';