Skip to content

Commit d26b3ac

Browse files
authored
header component (#4)
1 parent f8b5e84 commit d26b3ac

File tree

13 files changed

+233
-20
lines changed

13 files changed

+233
-20
lines changed
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script>
2+
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
3+
import ButtonInverse from './ButtonInverse.svelte'
4+
</script>
5+
6+
<Meta
7+
title="Example/ButtonInverse"
8+
component={ButtonInverse}
9+
argTypes={{
10+
label: { control: 'text' },
11+
onClick: { action: 'onClick' }
12+
}}
13+
/>
14+
15+
<Template let:args>
16+
<ButtonInverse {...args} on:click={args.onClick}/>
17+
</Template>
18+
19+
<Story
20+
name="About"
21+
args={{
22+
label: 'About'
23+
}}
24+
/>
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<script lang="ts">
2+
import { createEventDispatcher } from 'svelte'
3+
4+
export let label: string
5+
6+
const dispatch = createEventDispatcher()
7+
8+
const onClick = (event) => {
9+
dispatch('click', event)
10+
}
11+
</script>
12+
13+
<button
14+
on:click={onClick}>
15+
{label}
16+
</button>
17+
18+
<style>
19+
button{
20+
color: #4285f4ff;
21+
border-color: #4285f4ff;
22+
border-width: 0.1rem;
23+
border-radius: 0.5rem;
24+
background-color: white;
25+
font-family: 'Nunito', sans-serif;
26+
font-weight: bold;
27+
font-size: 1.05rem;
28+
padding: 0.7rem 2.25rem;
29+
min-width: 8rem;
30+
max-height: 3rem;
31+
transition: all 0.15s;
32+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
33+
cursor:pointer;
34+
}
35+
36+
button:hover{
37+
background-color: rgb(216, 228, 250);
38+
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
39+
}
40+
41+
button:focus {
42+
outline:0;
43+
}
44+
</style>
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { render } from '@testing-library/svelte'
2+
import ButtonInverse from '../ButtonInverse.svelte'
3+
4+
test('ButtonInverse succesfully renders', () => {
5+
const results = render(ButtonInverse, { props: { label: 'Test' } })
6+
7+
expect(() => results.getByText('Test')).not.toThrow()
8+
})

src/components/ButtonInverse/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as ButtonInverse } from './ButtonInverse.svelte'
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
3+
import Header from './Header.svelte'
4+
</script>
5+
6+
7+
<Meta
8+
title="Example/Header"
9+
component={Header}
10+
/>
11+
12+
<Template>
13+
<Header/>
14+
</Template>
15+
16+
<Story name="Base"/>

src/components/Header/Header.svelte

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts">
2+
import { HeaderAnimation, HeaderInformation } from '../../components'
3+
</script>
4+
5+
<div class="header-wrap">
6+
<div class="left"><HeaderInformation/></div>
7+
<div class="right"><HeaderAnimation/></div>
8+
</div>
9+
10+
<style>
11+
.header-wrap {
12+
display: flex;
13+
justify-content: space-evenly;
14+
align-items: center;
15+
width: 80%;
16+
}
17+
18+
.left {
19+
flex: 0 0 40%;
20+
}
21+
22+
.right {
23+
flex: 0 0 30%;
24+
}
25+
26+
@media only screen and (max-width: 760px) {
27+
.header-wrap {
28+
width: 95%;
29+
flex-direction: column;
30+
height: 60vh;
31+
}
32+
}
33+
</style>

src/components/Header/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as Header } from './Header.svelte'

src/components/HeaderAnimation/HeaderAnimation.svelte

Lines changed: 23 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,26 @@
22
import { LottiePlayer } from '@lottiefiles/svelte-lottie-player'
33
</script>
44

5-
<LottiePlayer
6-
src="https://assets5.lottiefiles.com/packages/lf20_sbeqlcjm.json"
7-
autoplay="{true}"
8-
loop="{true}"
9-
controls="{false}"
10-
renderer="svg"
11-
background="transparent"
12-
height="{700}"
13-
width="{700}"
14-
/>
5+
<div class="lottie">
6+
<LottiePlayer
7+
src="https://assets5.lottiefiles.com/packages/lf20_sbeqlcjm.json"
8+
autoplay="{true}"
9+
loop="{true}"
10+
controls="{false}"
11+
renderer="svg"
12+
background="transparent"
13+
height="{700}"
14+
width="{700}"
15+
/>
16+
</div>
17+
18+
<style>
19+
.lottie {
20+
/* https://themetry.com/css-image-cropping/ */
21+
max-width: 480px;
22+
text-indent: -120px;
23+
max-height: 480px;
24+
margin-top: -180px;
25+
overflow: hidden;
26+
}
27+
</style>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
3+
import HeaderInformation from './HeaderInformation.svelte'
4+
</script>
5+
6+
7+
<Meta
8+
title="Example/HeaderInformation"
9+
component={HeaderInformation}
10+
/>
11+
12+
<Template>
13+
<HeaderInformation/>
14+
</Template>
15+
16+
<Story name="Base"/>
Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script lang="ts">
2+
import { Button, ButtonInverse } from '../../components'
3+
</script>
4+
5+
<div class="header-information">
6+
<div class="title-top">Carleton Computer Science Society</div>
7+
<div class="title-main">Code Challenge</div>
8+
<div class="title-bottom">
9+
In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface.
10+
</div>
11+
<div class="header-buttons">
12+
<Button label="Questions"/>
13+
<span class="button-spacing">
14+
<ButtonInverse label="About"/>
15+
</span>
16+
</div>
17+
</div>
18+
19+
<style>
20+
.header-information {
21+
display: flex;
22+
flex-direction: column;
23+
}
24+
25+
.title-main {
26+
font-size: 4rem;
27+
font-weight: bold;
28+
font-family: 'Nunito', sans-serif;
29+
margin: 0;
30+
width: fit-content;
31+
}
32+
33+
.title-top {
34+
font-size: 1.9rem;
35+
font-family: 'Nunito', sans-serif;
36+
margin: 0;
37+
margin-bottom: 0.75rem;
38+
width: fit-content;
39+
}
40+
41+
.title-bottom {
42+
font-size: 1.3rem;
43+
font-family: 'Nunito', sans-serif;
44+
margin-top: 1.2rem;
45+
}
46+
47+
.header-buttons {
48+
margin-top: 2.3rem;
49+
display: flex;
50+
width: fit-content;
51+
}
52+
53+
.button-spacing {
54+
margin-left: 1rem;
55+
}
56+
</style>

0 commit comments

Comments
 (0)