Doomsday - SectionPress

src/components/SectionPress/SectionPress.stories.js

@@ -0,0 +1,41 @@
+import SectionPress from "./SectionPress"
+
+const Items = [
+    {
+        title:
+            "AdWeek – Beats by Dre Brings in an A-List of Athletes for An Ad You Can’t Take Your Eyes Off Of"
+    },
+    {
+        title: "Vice – The Poetic Work of Filmmaker Savanah Leaf"
+    },
+    {
+        title:
+            "Far & Wide – TIFF 2018: Interview With EXIT Director Claire Edmondson"
+    },
+    {
+        title:
+            "The New York Times – Hiro Murai Doesn’t Want to Get on a Soapbox"
+    },
+    {
+        title:
+            "Little Black Book – The Story Behind Donald Glover and Hiro Murai’s Creative Love Affair"
+    },
+    {
+        title:
+            "The Ringer – The Vimeo Blog: Introducing: music video exec. Mama Doom Danielle Hinde"
+    }
+]
+
+export default {
+    title: "@dchiamp / SectionPress"
+}
+
+export const Default = () => ({
+    components: { SectionPress },
+    data() {
+        return {
+            items: [...Items, ...Items]
+        }
+    },
+    template: `<section-press  :items="items" title="Recent Press" />`
+})

src/components/SectionPress/SectionPress.vue

@@ -0,0 +1,165 @@
+<template lang="html">
+    <section class="section-press">
+        <h2 class="title" v-html="title" />
+
+        <ul class="press">
+            <li v-for="(item, i) in svgItems" class="item">
+                <split-text v-if="item.title" :text="item.title" element="p" />
+                <component
+                    :is="item.svg"
+                    v-else-if="item.svg"
+                    :class="`svg ${kebabClass(item.svg)}`"
+                />
+            </li>
+        </ul>
+    </section>
+</template>
+
+<script>
+import _kebabCase from "lodash/kebabCase"
+
+//  Components
+import SplitText from "@/components/global/SplitText"
+import SvgFireLady from "@/assets/svgs/illustrations/fire-lady.svg"
+import SvgChildishGambino from "@/assets/svgs/illustrations/childish-gambino.svg"
+import SvgRollerGal from "@/assets/svgs/illustrations/roller-gal.svg"
+
+export default {
+    components: {
+        SplitText,
+        SvgChildishGambino,
+        SvgFireLady,
+        SvgRollerGal
+    },
+    props: {
+        title: {
+            type: String,
+            default: "Recent Press"
+        },
+        items: {
+            type: Array,
+            default: () => []
+        }
+    },
+    computed: {
+        svgItems() {
+            // gets middle index
+            const middleIndex = Math.floor(this.items.length / 2)
+            // adds to middle
+            this.items.splice(middleIndex, 0, { svg: "SvgChildishGambino" })
+            // adds to start
+            this.items.unshift({ svg: "SvgFireLady" })
+            // adds to end
+            this.items.push({ svg: "SvgRollerGal" })
+
+            return this.items
+        }
+    },
+    methods: {
+        kebabClass(name) {
+            return _kebabCase(name)
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.section-press {
+    position: relative;
+    color: var(--color-pink);
+    background-color: var(--color-black);
+    padding: 60px 50px;
+    box-sizing: border-box;
+    .title {
+        font-family: var(--font-secondary);
+        font-size: 75px;
+        font-weight: 500;
+        text-transform: uppercase;
+        color: var(--color-black);
+        white-space: nowrap;
+        -webkit-text-stroke: 1.5px var(--color-pink);
+        margin: 0;
+        position: absolute;
+        top: -50px;
+        left: 50%;
+        transform: translate(-50%);
+    }
+
+    .press {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        text-align: center;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+    }
+    .item {
+        font-size: 20px;
+        font-weight: 500;
+        padding: 0;
+        .line {
+            display: block;
+            margin: 10px 0;
+        }
+        .line-1 {
+            font-weight: 500;
+            font-family: var(--font-secondary);
+        }
+        .line-2 {
+            font-weight: 400;
+        }
+    }
+    // Svgs
+    .svg {
+        position: absolute;
+    }
+    .svg-fire-lady {
+        right: -40px;
+        top: 30px;
+    }
+    .svg-roller-gal {
+        bottom: 0;
+        right: 0;
+    }
+    .svg-childish-gambino {
+        top: 50%;
+        left: 40px;
+        transform: translateY(-50%);
+    }
+
+    // Breakpoints
+    @media #{$lt-tablet} {
+        .svg {
+            position: static;
+            transform: none;
+        }
+    }
+
+    @media #{$lt-phone} {
+        padding: 60px 20px;
+        .title {
+            top: -27px;
+            font-size: 30px;
+        }
+
+        .item {
+            p {
+                margin: 10px 0;
+            }
+            .line-1 {
+                font-size: 18px;
+            }
+            .line-2 {
+                font-size: 16px;
+            }
+        }
+        .svg {
+            max-width: 310px;
+            height: auto;
+        }
+    }
+}
+</style>

src/components/global/SplitText.vue

@@ -0,0 +1,51 @@
+<template>
+    <component :is="element">
+        <span
+            v-for="(line, i) in lines"
+            :key="i"
+            :class="['line', `line-${i + 1}`]"
+            v-html="line"
+        />
+    </component>
+</template>
+
+<script>
+export default {
+    props: {
+        text: {
+            type: String,
+            default: ""
+        },
+        separator: {
+            type: String,
+            default: " &#8211; "
+        },
+        element: {
+            type: String,
+            default: "span"
+        },
+        keepSeparator: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        lines() {
+            let output = this.text.split(this.separator)
+
+            // Add separator back into array
+            // This is useful if separating by an opening quote
+            if (this.keepSeparator) {
+                output = output.map((element, index) => {
+                    if (index > 0) {
+                        return this.separator + element
+                    }
+                    return element
+                });
+            }
+
+            return output
+        }
+    }
+}
+</script>