feat: share resources form (resolves #296)

.nvmrc

@@ -0,0 +1 @@
+lts/erbium

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+    "printWidth": 120,
+    "tabWidth": 4,
+    "overrides": [
+        {
+            "files": ["*.md"],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
+}

src/_includes/layouts/about.njk

@@ -24,7 +24,7 @@
           {% for card in whatWeDoSection.cards %}
             <div class="[ card card--small ]">
                 <div class="[ card__content ] [ flow ]">
-                    <h3><a href="{{ card.link }}">{{ card.title }}</a></h3>
+                    <h3><a class="[ card__link ]" href="{{ card.link }}">{{ card.title }}</a></h3>
                 </div>
             </div>
           {% endfor %}

src/_includes/layouts/home.njk

@@ -22,7 +22,7 @@
                 </figure>
                 {% endif %}
                 <div class="[ card__content ] [ flow center ]">
-                    <h3><a href="{{ card.link }}">{{ card.title }}</a></h3>
+                    <h3><a class="[ card__link ]" href="{{ card.link }}">{{ card.title }}</a></h3>
                 </div>
             </div>
           {% endfor %}

src/_includes/layouts/learn.njk

@@ -27,7 +27,7 @@
                   {% image card.image, "", 666, 480 %}
                 </figure>
                 <div class="[ card__content ] [ flow ]">
-                    <h3><a href="{{ card.link }}">{{ card.title }}</a></h3>
+                    <h3><a class="[ card__link ]" href="{{ card.link }}">{{ card.title }}</a></h3>
                     {{ card.content | markdown | safe }}
                 </div>
             </div>
@@ -45,7 +45,7 @@
             <p class="[ sm:center ]"><a class="call-to-action" href="{{ robotActivitiesSection.callToActionLink }}">{{ robotActivitiesSection.callToActionText }}</a></p>
         </div>
         <div class="[ two:three__three ] [ flow ]">
-            <img src="{{ robotActivitiesSection.image }}?nf_resize=fit&w=640&h=360" alt="{{ robotActivitiesSection.imageAlt }}" width="640" height="360" /> 
+            <img src="{{ robotActivitiesSection.image }}?nf_resize=fit&w=640&h=360" alt="{{ robotActivitiesSection.imageAlt }}" width="640" height="360" />
         </div>
     </div>
   </div>

src/_includes/layouts/share.njk

@@ -0,0 +1,49 @@
+{% extends "layouts/base.njk" %}
+
+{% set bodyClass = "page page--share" %}
+
+{% block content %}
+<div class="[ wrapper ] [ flow ]">
+	{{ content | safe }}
+	<form name="share-resources" method="POST" netlify-honeypot="bot-field" data-netlify="true">
+		<div class="hidden">
+			<label>Don’t fill this out if you’re human: <input name="bot-field" /></label>
+		</div>
+		<div class="[ half ]">
+			<label for="fname">Contributor’s first name*</label>
+			<input type="text" id="fname" name="fname" required />
+		</div>
+		<div class="[ half ]">
+			<label for="lname">Contributor’s last name*</label>
+			<input type="text" id="lname" name="lname" required />
+		</div>
+		<div class="[ half ]">
+			<label for="email">Contributor’s email address*</label>
+			<input type="email" id="email" name="email" required />
+		</div>
+		<div class="[ half ]">
+			<label for="website">Organization website</label>
+			<input type="text" id="website" name="website" />
+		</div>
+		<fieldset>
+			<legend>What type of resource are you sharing?</legend>
+			{% for item in ['Lesson plans', 'Unplugged coding activities', 'Robot-based coding activities', 'Educational coding materials', 'Other'] %}
+			<div>
+				<input type="checkbox" id="{{ item | slug }}" name="resource-type" value="{{ item }}" />
+				<label for="{{ item | slug }}">{{ item }}</label>
+			</div>
+			{% endfor %}
+		</fieldset>
+		<div>
+			<label for="description">What is this resource about?</label>
+			<textarea id="description" name="description" aria-describedby="description-hint"></textarea>
+			<div class="[ hint ]" id="description-hint">Please provide a brief description of the resource.</div>
+		</div>
+		<div>
+			<label for="supportive-material">Upload supportive material</label>
+			<input type="file" id="supportive-material" name="supportive-material" multiple />
+		</div>
+		<button class="[ button ]" type="submit">Share Resource</button>
+	</form>
+</div>
+{% endblock %}

src/assets/styles/app.scss

@@ -22,7 +22,8 @@
     'layout/header',
     'layout/article',
     'layout/sidebar',
-    'layout/footer';
+    'layout/footer',
+    'layout/form';
 
 // 5. Components
 @import
@@ -35,6 +36,7 @@
     'components/filters',
     'components/grid-image',
     'components/grid-video',
+    'components/input',
     'components/label',
     'components/overlay',
     'components/navigation',
@@ -50,7 +52,8 @@
     'pages/activities',
     'pages/guides',
     'pages/projects',
-    'pages/resources';
+    'pages/resources',
+    'pages/share';
 
 // 7. Themes
 @import

src/assets/styles/base/_base.scss

@@ -32,5 +32,25 @@ a:not([class]) {
 
     &:visited {
         color: currentColor;
+
+        &:active {
+            color: var(--color-white);
+        }
+    }
+}
+
+.bg--red-75 a:not([class]) {
+    &:hover {
+        color: var(--color-black-25);
+    }
+
+    &:focus {
+        box-shadow: 0 0 0 var(--space-xxs) var(--color-red-35);
+    }
+
+    &:active,
+    &:hover:active {
+        background-color: var(--color-red-35);
+        color: var(--color-white);
     }
 }

src/assets/styles/components/_button.scss

@@ -6,7 +6,7 @@
     align-items: center;
     appearance: none;
     background-color: var(--color-green-45);
-    border: 0;
+    border: solid var(--border-thin) var(--fl-fgColor, transparent);
     border-radius: var(--radius-lg);
     box-shadow: 0 1rem 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-35)));
     color: var(--color-white);
@@ -33,11 +33,13 @@
     }
 
     &:focus {
-        box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25))) inset, 0 1rem 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
+        border-color: var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
+        box-shadow: 0 1rem 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
         outline: none;
     }
 
     &:active {
+        border-color: var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
         box-shadow: 0 calc(12 / 16 * 1rem) 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
         margin-block: calc(36 / 16 * 1rem) calc(12 / 16 * 1rem);
     }
@@ -56,7 +58,7 @@
     }
 
     &:focus {
-        box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25))) inset, 0 calc(12 / 16 * 1rem) 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
+        box-shadow: 0 calc(12 / 16 * 1rem) 0 0 var(--fl-linkColor, var(--fl-fgColor, var(--color-green-25)));
         outline: none;
     }
 

src/assets/styles/components/_input.scss

@@ -0,0 +1,80 @@
+
+input[type="text"],
+input[type="email"],
+textarea {
+    background-color: var(--color-white);
+    border: solid var(--border-thin) var(--fl-fgColor, var(--color-green-95));
+    border-radius: var(--radius-md);
+    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
+    padding: var(--space-sm);
+    width: 100%;
+
+    &:focus {
+        box-shadow: inset 0 0 0 calc(2 / 16 * 1rem) var(--fl-linkColor, var(--fl-fgColor, var(--color-green-35))), inset 0 4px 4px rgba(0, 0, 0, 0.25);
+        outline: none;
+    }
+}
+
+/* purgecss start ignore */
+
+[class*=fl-theme]:not(.fl-theme-prefsEditor-default) {
+    input[type="text"]:focus,
+    input[type="email"]:focus,
+    textarea:focus {
+        border-bottom-color: var(--fl-linkColor, var(--fl-fgColor, transparent)) !important;
+        border-left-color: var(--fl-linkColor, var(--fl-fgColor, transparent)) !important;
+        border-right-color: var(--fl-linkColor, var(--fl-fgColor, transparent)) !important;
+        border-top-color: var(--fl-linkColor, var(--fl-fgColor, transparent)) !important;
+    }
+}
+
+/* purgecss end ignore */
+
+input[type="text"],
+input[type="email"] {
+    height: calc(87 / 16 * 1rem);
+}
+
+textarea {
+    height: calc(142 / 16 * 1rem);
+    resize: vertical;
+}
+
+input[type="checkbox"] {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
+input[type="checkbox"] + label::before {
+    align-items: center;
+    background-color: var(--fl-bgColor, var(--color-white));
+    border: solid var(--border-hairline) var(--fl-fgColor, var(--color-green-45));
+    border-radius: var(--radius-xs);
+    content: "\00a0";
+    display: inline-flex;
+    height: calc(26 / 16 * 1rem);
+    justify-content: center;
+    margin-inline-end: var(--space-sm);
+    width: calc(26 / 16 * 1rem);
+}
+
+input[type="checkbox"]:focus + label::before {
+    border-color: var(--fl-linkColor, var(--color-green-35));
+    box-shadow: inset 0 0 0 calc(2 / 16 * 1rem) var(--fl-linkColor, var(--fl-fgColor, var(--color-green-35)));
+    color: var(--fl-linkColor, var(--fl-fgColor, currentColor));
+}
+
+input[type="checkbox"]:active + label::before {
+    background-color: var(--fl-linkColor, var(--fl-fgColor, var(--color-green-35)));
+    color: var(--fl-bgColor, var(--color-white));
+    content: "\2713";
+}
+
+input[type="checkbox"]:checked + label::before {
+    content: "\2713";
+}

src/assets/styles/components/_label.scss

@@ -9,3 +9,8 @@
 .label > * {
     font-weight: normal;
 }
+
+label svg {
+    height: 1em;
+    width: auto;
+}

src/assets/styles/components/_radio-group.scss

@@ -3,7 +3,7 @@
 // -----------------------------------------------------------------------------
 
 .radio-group > * + * {
-    margin-left: 0.5rem;
+    margin-inline-start: 0.5rem;
 }
 
 .radio-group .button[aria-checked="true"] {

src/assets/styles/layout/_form.scss

@@ -0,0 +1,59 @@
+form {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    > * + * {
+        margin-block-start: var(--space-lg);
+    }
+
+    > div {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        @media (min-width: 960px) {
+            &.half {
+                width: calc(50% - var(--space-md));
+            }
+        }
+
+        &.hidden {
+            display: none;
+        }
+    }
+
+    > div label,
+    legend {
+        font-size: var(--step-1);
+        font-weight: 500;
+    }
+
+    > div label + input,
+    > div label + textarea {
+        margin-block-start: var(--space-sm);
+    }
+
+    .hint {
+        margin-block-start: var(--space-sm);
+    }
+
+    fieldset {
+        border: 0;
+        padding: 0;
+        width: 100%;
+
+        legend {
+            margin-block-end: var(--space-sm);
+        }
+
+        div + div {
+            margin-block-start: var(--space-md);
+        }
+    }
+
+    [type="submit"] {
+        margin: var(--space-xl) auto 0;
+    }
+}

src/assets/styles/pages/_share.scss

@@ -0,0 +1,42 @@
+.page--share {
+    main {
+        background-color: var(--color-green-95);
+    }
+
+    form {
+        border-top: solid var(--border-hairline) var(--color-black-05);
+    }
+
+    @media (min-width: 960px) {
+        main {
+            background-color: var(--color-white);
+        }
+
+        .header {
+            background-color: var(--color-white);
+
+            .wrapper {
+                background-color: var(--color-green-95);
+                border-top-left-radius: var(--radius-md);
+                border-top-right-radius: var(--radius-md);
+                box-shadow: 0 var(--space-xs) var(--space-xs) rgba(0, 0, 0, 0.25);
+                margin: var(--space-xl) auto 0;
+            }
+        }
+
+        .content {
+            .wrapper {
+                background-color: var(--color-green-95);
+                border-bottom-left-radius: var(--radius-md);
+                border-bottom-right-radius: var(--radius-md);
+                box-shadow: 0 var(--space-xs) var(--space-xs) rgba(0, 0, 0, 0.25);
+                margin-block-end: var(--space-xl);
+                padding-block-start: 0;
+            }
+
+            form {
+                margin-block-start: var(--space-lg);
+            }
+        }
+    }
+}