Skip to content

Commit 883a88d

Browse files
tikagantikagan
committed
feat: subfooter form setup
1 parent 5e351ec commit 883a88d

File tree

3 files changed

+179
-13
lines changed

3 files changed

+179
-13
lines changed

‎components/subfooter-card.vue

+9-11
Original file line numberDiff line numberDiff line change
@@ -55,19 +55,13 @@
5555
v-html="description">
5656
</div>
5757

58-
<div v-if="fullwidth && cta" class="cta">
59-
<!-- =================== EMAIL SIGN UP FORM ================== -->
60-
<!-- <ButtonCta
61-
:to="cta.to"
62-
:tag="cta.tag"
63-
:target="cta.target"
64-
theme="secondary">
65-
{{ cta.text }}
66-
</ButtonCta> -->
67-
</div>
58+
<SubfooterForm
59+
v-if="fullwidth && form"
60+
:form="form" />
6861

6962
<div
70-
v-if="fullwidth"
63+
v-if="
64+
fullwidth"
7165
class="subheading"
7266
v-html="subheading">
7367
</div>
@@ -120,6 +114,10 @@ const code = computed(() => {
120114
return props.block.code
121115
})
122116
117+
const form = computed(() => {
118+
return props.block.subfooter_form
119+
})
120+
123121
const cardStyles = computed(() => {
124122
if (props.block.borderGradientAngle) {
125123
return { '--border-gradient-angle': props.block.borderGradientAngle }

‎components/subfooter-form.vue

+164
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<template>
2+
<div class="subfooter-form">
3+
<div class="inner-content form-field-container">
4+
5+
<div class="detail-wrapper">
6+
<svg
7+
width="400"
8+
:viewBox="`0 0 400 ${detailHeight}`"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
class="detail">
12+
<path
13+
:d="path"
14+
stroke="#FFC582"
15+
stroke-width="2"
16+
shape-rendering="crispEdges"
17+
class="stroke-path" />
18+
</svg>
19+
</div>
20+
21+
<div class="field-email">
22+
<input
23+
class="email"
24+
:placeholder="placeholder"
25+
type="email"
26+
required="true" />
27+
28+
<!-- @input="updateInputValue($event.target.value, 'organization')" /> -->
29+
</div>
30+
</div>
31+
32+
<ButtonCta
33+
:class="['submit-button', { submitted: formSubmitted }]"
34+
theme="secondary">
35+
<!-- @clicked="submitForm"> -->
36+
<span class="button-label"> {{ buttonText }} </span>
37+
</ButtonCta>
38+
39+
</div>
40+
</template>
41+
42+
<script setup>
43+
// ======================================================================= Props
44+
const props = defineProps({
45+
form: {
46+
type: Object,
47+
required: false,
48+
default: () => ({})
49+
},
50+
variant: { // 'large', 'small' or none
51+
type: String,
52+
required: false,
53+
default: ''
54+
}
55+
})
56+
57+
// ==================================================================== Computed
58+
const path = computed(() => {
59+
if (props.variant === 'large') {
60+
return 'M 536 53.6 H 2.7391 C 1.871 53.6 1.232 52.7872 1.34 51.9436 L 9.5042 18.7416 C 12.06 8.04 21.44 1.34 32.16 1.34 H 536'
61+
}
62+
if (props.variant === 'small') {
63+
return 'M 322 32 H 2.25 C 1 32 1 30.75 1 30.75 L 6 11 C 7 5 13 1 19 1 H 322'
64+
}
65+
return 'M 400 40 H 2.0441 C 1.3963 40 0.9194 39.3934 1 38.7639 L 7.0927 13.9863 C 9 6 16 1 24 1 H 400'
66+
})
67+
68+
const placeholder = computed(() => { return props.form.placeholder })
69+
70+
const buttonText = computed(() => { return props.form.submit_button_text })
71+
72+
</script>
73+
74+
<style lang="scss" scoped>
75+
// ///////////////////////////////////////////////////////////////////// General
76+
.subfooter-form {
77+
display: flex;
78+
justify-content: space-between;
79+
white-space: nowrap;
80+
&:not(.disabled) {
81+
&:hover {
82+
.stroke-path {
83+
stroke: $chardonnay;
84+
}
85+
.form-field-container {
86+
&::before {
87+
border-top-color: $chardonnay;
88+
border-right-color: $chardonnay;
89+
border-bottom-color: $chardonnay;
90+
}
91+
}
92+
}
93+
&:focus-visible {
94+
@include focusBoxShadow;
95+
}
96+
}
97+
}
98+
99+
// ////////////////////////////////////////////////////////////// Detail Wrapper
100+
.detail-wrapper {
101+
position: absolute;
102+
top: 0;
103+
left: toRem(-25);
104+
width: calc(100% + toRem(25) - toRem(2));
105+
height: 100%;
106+
overflow: hidden;
107+
&.large {
108+
left: toRem(-31);
109+
width: calc(100% + toRem(31) - toRem(2));
110+
}
111+
}
112+
113+
.detail {
114+
height: 100%;
115+
.fill-path {
116+
opacity: 0.2;
117+
fill: #070707;
118+
@include transitionDefault;
119+
}
120+
}
121+
122+
// ////////////////////////////////////////////////////////////////// Form field
123+
.form-field-container {
124+
position: relative;
125+
display: block;
126+
height: toRem(41);
127+
width: fit-content;
128+
filter: drop-shadow(0px 2px 14px rgba(255, 197, 130, 0.32));
129+
.stroke-path {
130+
stroke: $sageGreen;
131+
}
132+
&:before {
133+
content: '';
134+
position: absolute;
135+
left: toRem(28);
136+
top: 0;
137+
width: calc(100% - 25px);
138+
height: 100%;
139+
box-sizing: border-box;
140+
border-top: solid 2px $sageGreen;
141+
border-bottom: solid 2px $sageGreen;
142+
border-right: solid 2px $sageGreen;
143+
border-top-right-radius: toRem(5);
144+
border-bottom-right-radius: toRem(5);
145+
@include transitionDefault;
146+
}
147+
}
148+
149+
.field-email {
150+
position: relative;
151+
display: flex;
152+
align-items: center;
153+
@include formFieldText;
154+
&::placeholder {
155+
@include formFieldPlaceholder;
156+
}
157+
}
158+
.email {
159+
padding: toRem(10) toRem(17) toRem(10) toRem(3);
160+
}
161+
162+
// /////////////////////////////////////////////////////////////// Submit Button
163+
164+
</style>

‎content/core/index.json

+6-2
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@
174174
"text": "View all 30+ compatible storage services",
175175
"tag": "a",
176176
"to": "https://data-programs.gitbook.io/singularity/installation/install-from-source",
177-
"theme": "secondary"
177+
"theme": "secondary"
178178
}
179179
]
180180
}
@@ -507,7 +507,11 @@
507507
"borderGradientAngle": "45deg",
508508
"title": "<img src='/images/topography-graphic-with-border.svg' />Keep up<br>with Singularity",
509509
"subheading": "Your feedback can shape our next big release. <br>Join us on <a href='https://github.com/data-preservation-programs/singularity' target='_blank'>Github</a> and <a href='https://filecoinproject.slack.com/archives/C05JABREATH' target='_blank'>Slack</a>",
510-
"description": "<span class='weight-500'>Sign up to keep up.</span> We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox."
510+
"description": "<span class='weight-500'>Sign up to keep up.</span> We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox.",
511+
"subfooter_form": {
512+
"placeholder": "Enter your email",
513+
"submit_button_text": "Keep up"
514+
}
511515
}
512516
}
513517
]

0 commit comments

Comments
 (0)