feat: update headlines component (#71)

- Add news story - Support cards as config
Circle-Back · Nov 19, 2019 · 0e9b130 · 0e9b130 · vercel · Nov 19, 2019
1 parent 306b723
commit 0e9b130
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 36 deletions.
diff --git a/public/displays.png b/public/displays.png
diff --git a/public/electronics.png b/public/electronics.png
diff --git a/public/game.png b/public/game.png
diff --git a/public/games.png b/public/games.png
diff --git a/public/mac.png b/public/mac.png
diff --git a/public/mobile.png b/public/mobile.png
diff --git a/public/playstation.png b/public/playstation.png
diff --git a/public/tabletHeadlineCard.png → public/tablets.png b/public/tabletHeadlineCard.png → public/tablets.png
diff --git a/src/components/Headlines.stories.tsx b/src/components/Headlines.stories.tsx
@@ -5,4 +5,64 @@ export default {
   title: "Headlines",
 };
 
-export const Default: React.FC = () => <Headlines>Top Categories</Headlines>;
+const cardsCategories = {
+  data: [
+    {
+      title: "Tablets",
+      subtitle: "Subtitle",
+      image: "./tablets.png",
+    },
+    {
+      title: "Electronics",
+      subtitle: "Subtitle",
+      image: "./electronics.png",
+    },
+    {
+      title: "Displays",
+      subtitle: "Subtitle",
+      image: "./displays.png",
+    },
+    {
+      title: "Games",
+      subtitle: "Subtitle",
+      image: "./games.png",
+    },
+  ],
+};
+
+const cardsNews = {
+  data: [
+    {
+      title: "Mobile",
+      subtitle: "Subtitle",
+      image: "./mobile.png",
+    },
+    {
+      title: "New Mac",
+      subtitle: "Subtitle",
+      image: "./mac.png",
+    },
+    {
+      title: "New Game",
+      subtitle: "Subtitle",
+      image: "./game.png",
+    },
+    {
+      title: "Playstation",
+      subtitle: "Subtitle",
+      image: "./playstation.png",
+    },
+  ],
+};
+
+export const Categories: React.FC = () => (
+  <Headlines
+    title="Top categories"
+    linkName="See all categories"
+    cards={cardsCategories}
+  />
+);
+
+export const News: React.FC = () => (
+  <Headlines title="News" linkName="See all news" cards={cardsNews} />
+);
diff --git a/src/components/Headlines.styles.ts b/src/components/Headlines.styles.ts
@@ -6,6 +6,10 @@ export interface PaperStyledProps {
   padding?: string | number | undefined;
 }
 
+export interface HeadlineCardImageProps {
+  image: string;
+}
+
 export const HeadlineCard = styled(Paper)`
   width: 76px;
   height: 115px;
@@ -46,11 +50,11 @@ export const HeadlineCardSubtitle = styled(Typography)`
   font-weight: 400;
 `;
 
-export const HeadlineCardImage = styled.div`
+export const HeadlineCardImage = styled.div<HeadlineCardImageProps>`
   margin: auto;
   width: 70px;
   height: 70px;
-  background-image: url("./tabletHeadlineCard.png");
+  background-image: url(${({ image }): string => image});
   background-position: center;
   background-size: cover;
 `;

diff --git a/src/components/Headlines.tsx b/src/components/Headlines.tsx
@@ -14,59 +14,48 @@ import {
 import { Icon } from "./Icon";
 
 export interface HeadlineProps {
-  children: React.ReactNode;
+  title: string;
+  linkName: string;
+  cards: Record<string, any>;
 }
 
 export const Headlines: React.FC<HeadlineProps> = ({
-  children,
+  title,
+  linkName,
+  cards,
 }: HeadlineProps) => {
   const theme = useTheme();
   return (
     <StylesProvider injectFirst>
-      <Box width="344px" height="207px">
+      <Box height="207px">
         <PaperStyled padding={theme.spacing(1)}>
           <Grid spacing={2} container direction="column">
             <Grid item>
               <Grid justify="space-between" container>
-                <Title color="primary">{children}</Title>
+                <Title color="primary">{title}</Title>
                 <Icon color="rgba(0, 0, 0, 0.6)" icon="share" />
               </Grid>
             </Grid>
             <Grid item>
               <Grid spacing={1} justify="center" container>
-                <Grid item>
-                  <HeadlineCard>
-                    <HeadlineCardImage />
-                    <HeadlineCardTitle>Tablets</HeadlineCardTitle>
-                    <HeadlineCardSubtitle>Subtitle</HeadlineCardSubtitle>
-                  </HeadlineCard>
-                </Grid>
-                <Grid item>
-                  <HeadlineCard>
-                    <HeadlineCardImage />
-                    <HeadlineCardTitle>Tablets</HeadlineCardTitle>
-                    <HeadlineCardSubtitle>Subtitle</HeadlineCardSubtitle>
-                  </HeadlineCard>
-                </Grid>
-                <Grid item>
-                  <HeadlineCard>
-                    <HeadlineCardImage />
-                    <HeadlineCardTitle>Tablets</HeadlineCardTitle>
-                    <HeadlineCardSubtitle>Subtitle</HeadlineCardSubtitle>
-                  </HeadlineCard>
-                </Grid>
-                <Grid item>
-                  <HeadlineCard>
-                    <HeadlineCardImage />
-                    <HeadlineCardTitle>Tablets</HeadlineCardTitle>
-                    <HeadlineCardSubtitle>Subtitle</HeadlineCardSubtitle>
-                  </HeadlineCard>
-                </Grid>
+                {cards.data.map((card: any) => (
+                  <React.Fragment key={card.title}>
+                    <Grid item>
+                      <HeadlineCard>
+                        <HeadlineCardImage image={card.image} />
+                        <HeadlineCardTitle>{card.title}</HeadlineCardTitle>
+                        <HeadlineCardSubtitle>
+                          {card.subtitle}
+                        </HeadlineCardSubtitle>
+                      </HeadlineCard>
+                    </Grid>
+                  </React.Fragment>
+                ))}
               </Grid>
             </Grid>
             <Grid item>
               <Grid container justify="flex-end">
-                <HeadlineCardLink>See all categories</HeadlineCardLink>
+                <HeadlineCardLink>{linkName}</HeadlineCardLink>
               </Grid>
             </Grid>
           </Grid>