header component (#4)

Author: MathyouMB

src/components/ButtonInverse/ButtonInverse.stories.svelte

@@ -0,0 +1,24 @@
+<script>
+    import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+    import ButtonInverse from './ButtonInverse.svelte'
+</script>
+
+<Meta
+    title="Example/ButtonInverse"
+    component={ButtonInverse}
+    argTypes={{
+        label: { control: 'text' },
+        onClick: { action: 'onClick' }
+    }}
+/>
+
+<Template let:args>
+    <ButtonInverse {...args} on:click={args.onClick}/>
+</Template>
+
+<Story
+    name="About"
+    args={{
+        label: 'About'
+    }}
+/>

src/components/ButtonInverse/ButtonInverse.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte'
+
+    export let label: string
+
+    const dispatch = createEventDispatcher()
+
+    const onClick = (event) => {
+      dispatch('click', event)
+    }
+</script>
+
+<button 
+    on:click={onClick}>
+    {label}
+</button>
+
+<style>
+    button{
+        color: #4285f4ff;
+        border-color: #4285f4ff;
+        border-width: 0.1rem;
+        border-radius: 0.5rem;
+        background-color: white;
+        font-family: 'Nunito', sans-serif;
+        font-weight: bold;
+        font-size: 1.05rem;
+        padding: 0.7rem 2.25rem;
+        min-width: 8rem;
+        max-height: 3rem;
+        transition: all 0.15s;
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
+        cursor:pointer;
+    }
+
+    button:hover{
+        background-color: rgb(216, 228, 250);
+        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+    }
+    
+    button:focus {
+        outline:0;
+    }
+</style>

src/components/ButtonInverse/__tests__/ButtonInverse.test.ts

@@ -0,0 +1,8 @@
+import { render } from '@testing-library/svelte'
+import ButtonInverse from '../ButtonInverse.svelte'
+
+test('ButtonInverse succesfully renders', () => {
+  const results = render(ButtonInverse, { props: { label: 'Test' } })
+
+  expect(() => results.getByText('Test')).not.toThrow()
+})

src/components/ButtonInverse/index.ts

@@ -0,0 +1 @@
+export { default as ButtonInverse } from './ButtonInverse.svelte'

src/components/Header/Header.stories.svelte

@@ -0,0 +1,16 @@
+<script>
+    import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+    import Header from './Header.svelte'
+</script>
+
+
+<Meta
+    title="Example/Header"
+    component={Header}
+/>
+
+<Template>
+    <Header/>
+</Template>
+
+<Story name="Base"/>

src/components/Header/Header.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { HeaderAnimation, HeaderInformation } from '../../components'
+</script>
+
+<div class="header-wrap">
+    <div class="left"><HeaderInformation/></div>
+    <div class="right"><HeaderAnimation/></div>
+</div>
+
+<style>
+    .header-wrap {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        width: 80%;
+    }
+
+    .left {
+        flex: 0 0 40%;
+    }
+
+    .right {
+        flex: 0 0 30%;
+    }
+
+    @media only screen and (max-width: 760px) {
+        .header-wrap {
+            width: 95%;
+            flex-direction: column;
+            height: 60vh;
+        }
+    }
+</style>

src/components/Header/index.ts

@@ -0,0 +1 @@
+export { default as Header } from './Header.svelte'

src/components/HeaderAnimation/HeaderAnimation.svelte

@@ -2,13 +2,26 @@
     import { LottiePlayer } from '@lottiefiles/svelte-lottie-player'
 </script>
 
-<LottiePlayer
-  src="https://assets5.lottiefiles.com/packages/lf20_sbeqlcjm.json"
-  autoplay="{true}"
-  loop="{true}"
-  controls="{false}"
-  renderer="svg"
-  background="transparent"
-  height="{700}"
-  width="{700}"
-/>
+<div class="lottie">
+    <LottiePlayer
+        src="https://assets5.lottiefiles.com/packages/lf20_sbeqlcjm.json"
+        autoplay="{true}"
+        loop="{true}"
+        controls="{false}"
+        renderer="svg"
+        background="transparent"
+        height="{700}"
+        width="{700}"
+    />
+</div>
+
+<style>
+    .lottie {
+        /* https://themetry.com/css-image-cropping/ */
+        max-width: 480px;
+        text-indent: -120px;
+        max-height: 480px;
+        margin-top: -180px;
+        overflow: hidden;
+    }
+</style>

src/components/HeaderInformation/HeaderInformation.stories.svelte

@@ -0,0 +1,16 @@
+<script>
+    import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+    import HeaderInformation from './HeaderInformation.svelte'
+</script>
+
+
+<Meta
+    title="Example/HeaderInformation"
+    component={HeaderInformation}
+/>
+
+<Template>
+    <HeaderInformation/>
+</Template>
+
+<Story name="Base"/>

src/components/HeaderInformation/HeaderInformation.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import { Button, ButtonInverse } from '../../components'
+</script>
+
+<div class="header-information">
+    <div class="title-top">Carleton Computer Science Society</div>
+    <div class="title-main">Code Challenge</div>
+    <div class="title-bottom">
+        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface.
+    </div>
+    <div class="header-buttons">
+        <Button label="Questions"/>
+        <span class="button-spacing">
+            <ButtonInverse label="About"/>
+        </span>
+    </div>
+</div>
+
+<style>
+    .header-information {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .title-main {
+        font-size: 4rem;
+        font-weight: bold;
+        font-family: 'Nunito', sans-serif;
+        margin: 0;
+        width: fit-content;
+    }
+
+    .title-top {
+        font-size: 1.9rem;
+        font-family: 'Nunito', sans-serif;
+        margin: 0;
+        margin-bottom: 0.75rem;
+        width: fit-content;
+    }
+
+    .title-bottom {
+        font-size: 1.3rem;
+        font-family: 'Nunito', sans-serif;
+        margin-top: 1.2rem;
+    }
+
+    .header-buttons {
+        margin-top: 2.3rem;
+        display: flex;
+        width: fit-content;
+    }
+
+    .button-spacing {
+       margin-left: 1rem; 
+    }
+</style>