6293639419

Committed 25 Sep 2023 01:11AM UTC coverage: 96.591% (+2.1%) from 94.495%

Build # 6293639419

Build Type

Pull #29

github

Committed by

mohsen-deriv

Commit Message

ci: replaced jest with vitest

Pull Request Pull Request #29: Michio/setup image optimization

Run Details

21 of 26 branches covered (0.0%)

Branch coverage included in aggregate %.

35 of 35 new or added lines in 3 files covered. (100.0%)

574 of 590 relevant lines covered (97.29%)

1.94 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

99.29

/libs/templates/src/lib/home/index.tsx

import { Hero, Features } from '@deriv-com/blocks';
import { OptimizedImage } from '@deriv-com/components';
import {
  Button,
  Text,
  FluidContainer,
  Heading,
  useTheme,
} from '@deriv/quill-design';
import { useCallback } from 'react';

export interface HomeTemplateProps {
  title: string;
}

export function HomeTemplate({ title }: HomeTemplateProps) {
  const { theme, toggleTheme } = useTheme();

  const changeTheme = useCallback(() => {
    toggleTheme(theme === 'light' ? 'dark' : 'light');
  }, [theme, toggleTheme]);

  return (
    <FluidContainer>
      <Hero.ContentLimitless
        title="Title goes here"
        description={`Description goes here description goes here
          description goes here description goes here`}
        content={
          <OptimizedImage
            imageName={'home/features/hk_home_hero_1.png'}
            alt="hero"
            width={712}
            height={800}
            priority
          />
        }
        className="mb-2000"
      >
        <p> This is a content limitless hero</p>
      </Hero.ContentLimitless>
      <Hero.ContentLimit
        title="Title goes here"
        description={`Description goes here description goes here
          description goes here description goes here`}
        content={
          <div className="flex py-2000 pr-50 lg:py-4000 lg:pr-4800">
            <OptimizedImage
              imageName="home/hero/hk_homepage_feature.png"
              width={712}
              height={800}
              alt="home hero"
            />
          </div>
        }
      >
        <p>This is a content limit hero</p>
      </Hero.ContentLimit>
      <Hero.ContentTop title="Content Top" className="mt-2000">
        <img
          className="w-full"
          src="https://placehold.co/712x200"
          alt="Placeholder"
        />
      </Hero.ContentTop>
      <Hero.ContentBottom title="Content Bottom" className="mt-2000">
        <img
          className="w-full"
          src="https://placehold.co/712x200"
          alt="Placeholder"
        />
      </Hero.ContentBottom>

      <Hero.ContentLess
        title="Title goes here"
        description={`Description goes here description goes here
          description goes here description goes here`}
        className="mt-2000"
      >
        <p>This is a content less block</p>
      </Hero.ContentLess>

      <Heading.Hero>Welcome to {title}</Heading.Hero>
      <Heading.H1>Current theme is {theme}</Heading.H1>
      <Features.CardContent
        title="Title goes here"
        description="Description goes here description goes here description goes here description goes here"
        cta={
          <div className="flex w-full justify-center">
            <Button>CTA</Button>
          </div>
        }
      >
        <div className="flex w-full justify-center">Content will go here</div>
      </Features.CardContent>

      <Features.ContentLeft
        className="my-1000 bg-background-primary-container max-lg:px-1200 max-sm:px-800"
        title="Content Left Title"
        description="Description goes here description goes here description goes here description goes here"
        content={
          <div className="flex w-full">
            <Text>Any Content here</Text>
          </div>
        }
        image_content={
          <img
            className="flex w-full flex-1"
            src="https://placehold.co/712x800"
            alt="Placeholder"
          />
        }
      />

      <Features.ContentRight
        className="my-1000 bg-background-primary-container max-lg:px-1200 max-sm:px-800"
        title="Content Left Title"
        description="Description goes here description goes here description goes here description goes here"
        content={
          <div className="flex w-full">
            <Text>Any Content here</Text>
          </div>
        }
        image_content={
          <img
            className="flex w-full flex-1"
            src="https://placehold.co/712x800"
            alt="Placeholder"
          />
        }
      />

      <Button size="lg" onClick={changeTheme}>
        Toggle theme
      </Button>
    </FluidContainer>
  );
}

export default HomeTemplate;

1	import { Hero, Features } from '@deriv-com/blocks';	1✔
2	import { OptimizedImage } from '@deriv-com/components';	1✔
3	import {	1✔
4	Button,	1✔
5	Text,	1✔
6	FluidContainer,	1✔
7	Heading,	1✔
8	useTheme,	1✔
9	} from '@deriv/quill-design';	1✔
10	import { useCallback } from 'react';	1✔
11		1✔
12	export interface HomeTemplateProps {	1✔
13	title: string;	1✔
14	}	1✔
15		1✔
16	export function HomeTemplate({ title }: HomeTemplateProps) {	1✔
17	const { theme, toggleTheme } = useTheme();	1✔
18		1✔
19	const changeTheme = useCallback(() => {	1✔
20	toggleTheme(theme === 'light' ? 'dark' : 'light');	×
21	}, [theme, toggleTheme]);	1✔
22		1✔
23	return (	1✔
24	<FluidContainer>	1✔
25	<Hero.ContentLimitless	1✔
26	title="Title goes here"	1✔
27	description={`Description goes here description goes here	1✔
28	description goes here description goes here`}	1✔
29	content={	1✔
30	<OptimizedImage	1✔
31	imageName={'home/features/hk_home_hero_1.png'}	1✔
32	alt="hero"	1✔
33	width={712}	1✔
34	height={800}	1✔
35	priority	1✔
36	/>	1✔
37	}	1✔
38	className="mb-2000"	1✔
39	>	1✔
40	<p> This is a content limitless hero</p>	1✔
41	</Hero.ContentLimitless>	1✔
42	<Hero.ContentLimit	1✔
43	title="Title goes here"	1✔
44	description={`Description goes here description goes here	1✔
45	description goes here description goes here`}	1✔
46	content={	1✔
47	<div className="flex py-2000 pr-50 lg:py-4000 lg:pr-4800">	1✔
48	<OptimizedImage	1✔
49	imageName="home/hero/hk_homepage_feature.png"	1✔
50	width={712}	1✔
51	height={800}	1✔
52	alt="home hero"	1✔
53	/>	1✔
54	</div>	1✔
55	}	1✔
56	>	1✔
57	<p>This is a content limit hero</p>	1✔
58	</Hero.ContentLimit>	1✔
59	<Hero.ContentTop title="Content Top" className="mt-2000">	1✔
60	<img	1✔
61	className="w-full"	1✔
62	src="https://placehold.co/712x200"	1✔
63	alt="Placeholder"	1✔
64	/>	1✔
65	</Hero.ContentTop>	1✔
66	<Hero.ContentBottom title="Content Bottom" className="mt-2000">	1✔
67	<img	1✔
68	className="w-full"	1✔
69	src="https://placehold.co/712x200"	1✔
70	alt="Placeholder"	1✔
71	/>	1✔
72	</Hero.ContentBottom>	1✔
73		1✔
74	<Hero.ContentLess	1✔
75	title="Title goes here"	1✔
76	description={`Description goes here description goes here	1✔
77	description goes here description goes here`}	1✔
78	className="mt-2000"	1✔
79	>	1✔
80	<p>This is a content less block</p>	1✔
81	</Hero.ContentLess>	1✔
82		1✔
83	<Heading.Hero>Welcome to {title}</Heading.Hero>	1✔
84	<Heading.H1>Current theme is {theme}</Heading.H1>	1✔
85	<Features.CardContent	1✔
86	title="Title goes here"	1✔
87	description="Description goes here description goes here description goes here description goes here"	1✔
88	cta={	1✔
89	<div className="flex w-full justify-center">	1✔
90	<Button>CTA</Button>	1✔
91	</div>	1✔
92	}	1✔
93	>	1✔
94	<div className="flex w-full justify-center">Content will go here</div>	1✔
95	</Features.CardContent>	1✔
96		1✔
97	<Features.ContentLeft	1✔
98	className="my-1000 bg-background-primary-container max-lg:px-1200 max-sm:px-800"	1✔
99	title="Content Left Title"	1✔
100	description="Description goes here description goes here description goes here description goes here"	1✔
101	content={	1✔
102	<div className="flex w-full">	1✔
103	<Text>Any Content here</Text>	1✔
104	</div>	1✔
105	}	1✔
106	image_content={	1✔
107	<img	1✔
108	className="flex w-full flex-1"	1✔
109	src="https://placehold.co/712x800"	1✔
110	alt="Placeholder"	1✔
111	/>	1✔
112	}	1✔
113	/>	1✔
114		1✔
115	<Features.ContentRight	1✔
116	className="my-1000 bg-background-primary-container max-lg:px-1200 max-sm:px-800"	1✔
117	title="Content Left Title"	1✔
118	description="Description goes here description goes here description goes here description goes here"	1✔
119	content={	1✔
120	<div className="flex w-full">	1✔
121	<Text>Any Content here</Text>	1✔
122	</div>	1✔
123	}	1✔
124	image_content={	1✔
125	<img	1✔
126	className="flex w-full flex-1"	1✔
127	src="https://placehold.co/712x800"	1✔
128	alt="Placeholder"	1✔
129	/>	1✔
130	}	1✔
131	/>	1✔
132		1✔
133	<Button size="lg" onClick={changeTheme}>	1✔
134	Toggle theme	1✔
135	</Button>	1✔
136	</FluidContainer>	1✔
137	);	1✔
138	}	1✔
139		1✔
140	export default HomeTemplate;	1✔

deriv-com / deriv-com-v2 / 6293639419

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous