Merge pull request #74 from FelipeZNascimento/newscard-component-fixe…

…s-on-sidenav-titlecontainer

Newscard component fixes on sidenav titlecontainer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omegafox/components",
-  "version": "2.14.3",
+  "version": "2.15.0",
   "description": "Omegafox component library using Rollup, TypeScript, Sass and Storybook",
   "main": "dist/index.js",
   "typings": "dist/src/index",

src/components/Match/Match.tsx

@@ -103,6 +103,7 @@ export const Match = ({
           return (
             <Team
               align={team.align}
+              abbreviationEn={team.abbreviationEn}
               key={team.id}
               bet={bet === undefined ? null : bet}
               betValue={betValue}

src/components/Match/mocks.tsx

@@ -4,6 +4,7 @@ import { FOOTBALL_MATCH_STATUS } from '../Clock/constants';
 const matchId = 0;
 export const teamLeft: ITeamProps = {
   id: 0,
+  abbreviationEn: 'Bra',
   align: 'left',
   bet: 3,
   colors: ['#FFDC02', '#19AE47'],
@@ -16,6 +17,7 @@ export const teamLeft: ITeamProps = {
 
 export const teamRight: ITeamProps = {
   id: 1,
+  abbreviationEn: 'Arg',
   align: 'right',
   bet: 0,
   colors: ['#FFFFFF', '#43A1D5'],

src/components/NewsCard/NewsCard.module.scss

@@ -0,0 +1,104 @@
+@import "../../styling/alignments.scss";
+@import "../../styling/colors.scss";
+@import "../../styling/font-sizes.scss";
+@import "../../styling/margins.scss";
+@import "../../styling/paddings.scss";
+
+.container {
+  @include marged(all, s);
+  @include shadowed($color-black, 0.4);
+
+  border-radius: 16px;
+  cursor: pointer;
+  height: 240px;
+  position: relative;
+  transition: transform $transition-time;
+  width: 160px;
+
+  &:hover {
+    transform: scale(1.2);
+    transition: transform $transition-time;
+    z-index: 99;
+  }
+
+  &:hover .resume {
+    display: -webkit-box;
+    opacity: 1;
+  }
+
+  &:hover .titleContainer {
+    height: 80%;
+  }
+
+  &:hover .date {
+    opacity: 1;
+  }
+
+  img {
+    border-radius: 16px;
+    height: 100%;
+    left: 0;
+    object-fit: cover;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+  }
+
+  .titleContainer {
+    @include bg-rgba-colored($color-grey5, 0.8);
+    @include padded(all, s2);
+    @include flex-aligned(center, center);
+
+    border-bottom-left-radius: 16px;
+    border-bottom-right-radius: 16px;
+    bottom: 0;
+    flex-direction: column;
+    height: 40%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    transition: height $transition-time;
+  }
+
+  .title {
+    @include flex-aligned(center, center);
+    @include font-colored($color-grey1);
+    @include font-sized(m);
+    @include marged(all, none);
+
+    display: -webkit-box;
+    font-weight: bold;
+    overflow: hidden;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+  }
+
+  .resume {
+    @include flex-aligned(center, center);
+    @include font-sized(s);
+    @include font-colored($color-grey2);
+    @include marged(all, none);
+    @include padded(top, s);
+
+    display: none;
+    opacity: 0;
+    overflow: hidden;
+    -webkit-line-clamp: 5;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+  }
+
+  .date {
+    @include aligned(center);
+    @include font-sized(s);
+    @include font-colored($color-grey2);
+
+    opacity: 0;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}

src/components/NewsCard/NewsCard.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { NewsCard } from './NewsCard';
+import { INewsCardProps } from './types';
+
+describe('<NewsCard />', () => {
+  const renderComponent = ({
+    title,
+    resume,
+    date,
+    link,
+    image
+  }: INewsCardProps) =>
+    render(
+      <NewsCard
+        title={title}
+        resume={resume}
+        date={date}
+        link={link}
+        image={image}
+      />
+    );
+
+  it('should render', () => {
+    const { container } = renderComponent({
+      title: 'title',
+      resume: 'resume',
+      date: 'date ago',
+      link: '#',
+      image:
+        'https://s2.glbimg.com/8_XbuLD2d1XCpSP9pUOw4sc7CdY=/540x304/top/smart/filters:max_age(3600)/https://s01.video.glbimg.com/deo/vi/27/10/10971027'
+    });
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/NewsCard/NewsCard.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { INewsCardProps } from './types';
+import styles from './NewsCard.module.scss';
+
+export const NewsCard = ({
+  title,
+  resume,
+  date,
+  link,
+  image
+}: INewsCardProps) => {
+  if (!image) {
+    return null;
+  }
+
+  return (
+    <a href={link} target="_blank" rel="noreferrer">
+      <div className={styles.container}>
+        <img src={image} />
+        <div className={styles.titleContainer}>
+          <p className={styles.title}>{title}</p>
+          <p className={styles.resume}>{resume}</p>
+          <div className={styles.date}>{date}</div>
+        </div>
+      </div>
+    </a>
+  );
+};

src/components/NewsCard/__snapshots__/NewsCard.test.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NewsCard /> should render 1`] = `
+<div>
+  <a
+    href="#"
+    rel="noreferrer"
+    target="_blank"
+  >
+    <div
+      class="container"
+    >
+      <img
+        src="https://s2.glbimg.com/8_XbuLD2d1XCpSP9pUOw4sc7CdY=/540x304/top/smart/filters:max_age(3600)/https://s01.video.glbimg.com/deo/vi/27/10/10971027"
+      />
+      <div
+        class="titleContainer"
+      >
+        <p
+          class="title"
+        >
+          title
+        </p>
+        <p
+          class="resume"
+        >
+          resume
+        </p>
+        <div
+          class="date"
+        >
+          date ago
+        </div>
+      </div>
+    </div>
+  </a>
+</div>
+`;

src/components/NewsCard/types.ts

@@ -0,0 +1,7 @@
+export interface INewsCardProps {
+  title: string;
+  resume: string;
+  link: string;
+  image: string;
+  date: string;
+}

src/components/Sidenav/Sidenav.module.scss

@@ -10,11 +10,12 @@
   @include font-sized(l2);
   @include flex-aligned(center, center);
 
-  flex: 1 0 auto;
   flex-direction: column;
-  height: 100%;
-  position: fixed;
+  height: 100vh;
+  left: 0;
+  position: sticky;
   top: 0;
+  max-width: 60vw;
   z-index: $always-on-top + 1;
 
   &Open {

src/components/Team/Team.module.scss

@@ -164,12 +164,12 @@
   z-index: $absolute-visible;
 
   &Clickable {
-    text-decoration: underline dotted transparent;
+    text-decoration: underline transparent;
     cursor: pointer;
     transition: text-decoration $transition-time;
 
     &:hover {
-      text-decoration: underline dotted;
+      text-decoration: underline;
     }
   }
 }

src/components/Team/Team.test.tsx

@@ -9,6 +9,7 @@ jest.mock('components/Tooltip/Tooltip');
 describe('TeamComponent', () => {
   const renderComponent = ({
     align,
+    abbreviationEn,
     colors,
     id,
     isEditable,
@@ -20,6 +21,7 @@ describe('TeamComponent', () => {
     render(
       <Team
         align={align}
+        abbreviationEn={abbreviationEn}
         colors={colors}
         id={id}
         isEditable={isEditable}
@@ -33,6 +35,7 @@ describe('TeamComponent', () => {
   it('should render', () => {
     const { container } = renderComponent({
       align: teamLeft.align,
+      abbreviationEn: teamLeft.abbreviationEn,
       colors: teamLeft.colors,
       id: teamLeft.id,
       isEditable: false,

src/components/Team/types.tsx

@@ -3,6 +3,7 @@ import { BET_VALUES } from '../Match/constants';
 export interface ITeamProps {
   id: number;
   align: 'right' | 'left';
+  abbreviationEn: string;
   bet?: number | null;
   betValue?: typeof BET_VALUES[keyof typeof BET_VALUES] | null;
   colors: string[];

src/components/TitleContainer/TitleContainer.module.scss

@@ -8,7 +8,7 @@
   @include flex-aligned(center, center);
   @include font-sized(l3);
   @include padded(all, l);
-  @include bg-rgba-colored($color-grey1, 0.7);
+  @include bg-colored($color-grey1);
   @include font-colored($color-qatar-red);
 
   -webkit-box-shadow: inset 0px 0px 0px 2px $color-qatar-red;

src/components/index.tsx

@@ -7,6 +7,7 @@ export { Loading } from './Loading/Loading';
 export { Modal } from './Modal/Modal';
 export { Match } from './Match/Match';
 export { Navbar } from './Navbar/Navbar';
+export { NewsCard } from './NewsCard/NewsCard';
 export { Ranking } from './Ranking/Ranking';
 export { Selector } from './Selector/Selector';
 export { Sidenav } from './Sidenav/Sidenav';
@@ -40,6 +41,7 @@ export type {
   IBetId
 } from './Match/types';
 export type { INavbarProps, TNavbarButton } from './Navbar/types';
+export type { INewsCardProps } from './NewsCard/types';
 export type {
   IRankingProps,
   TRankingColumn,

src/components/types.tsx

@@ -21,6 +21,7 @@ export type {
 } from './Match/types';
 export type { IModalProps } from './Modal/types';
 export type { INavbarProps, TNavbarButton } from './Navbar/types';
+export type { INewsCardProps } from './NewsCard/types';
 export type {
   IRankingProps,
   TRankingColumn,

src/stories/Card.stories.tsx

@@ -23,9 +23,8 @@ Card.args = {
         isHoverable={false}
         isBig={false}
         colors={teamLeft.colors}
-        logo={`https://assets.omegafox.me/img/countries_crests/${teamLeft.nameShort.toLowerCase()}.png`}
+        logo={`https://assets.omegafox.me/img/countries_crests/${teamLeft.abbreviationEn.toLowerCase()}.png`}
         name={teamLeft.name}
-        nameShort={teamLeft.nameShort}
       />
     </>
   )

src/stories/NewsCard.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Story } from '@storybook/react';
+import { NewsCard as Component } from '../components/';
+import { INewsCardProps } from '../components/types';
+
+export default {
+  props: '',
+  component: Component
+};
+
+const Template: Story<INewsCardProps> = (args) => <Component {...args} />;
+
+export const NewsCard = Template.bind({});
+
+NewsCard.args = {
+  title: 'title',
+  resume: 'resume',
+  date: 'date ago',
+  link: '#',
+  image:
+    'https://s2.glbimg.com/8_XbuLD2d1XCpSP9pUOw4sc7CdY=/540x304/top/smart/filters:max_age(3600)/https://s01.video.glbimg.com/deo/vi/27/10/10971027'
+};