feat: add form component with tweaked select and button styles

Author: codemacabre

src/scss/components/_index.scss

@@ -6,6 +6,7 @@
 @forward "country-switcher/country-switcher";
 @forward "data-card/data-card";
 @forward "figures/figures";
+@forward "form/form";
 @forward "piped-list/piped-list";
 @forward "icon/icon";
 @forward "jump-menu/jump-menu";

src/scss/components/button/_button.scss

@@ -54,7 +54,7 @@
 
   &--pill {
     color: $color-grey-90;
-    background-color: $color-teal-20;
+    background-color: $color-teal-10;
     border: 1px solid $color-teal-50;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;

src/scss/components/form/_form.scss

@@ -0,0 +1,54 @@
+@use "../../tokens/color" as *;
+@use "../../tokens/font" as *;
+@use "../../base/mixins";
+@use "../../tokens/screens" as *;
+
+.iati-form {
+  color: $color-grey-90;
+
+  min-width: min(31.25rem, calc(100vw - 2rem));
+  @media (min-width: $screen-md) {
+    grid-template-columns: max-content 1fr;
+  }
+
+  &__inner {
+    background-color: $color-teal-20;
+    border: 1px solid $color-teal-50;
+    display: grid;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  &__item {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    align-items: start;
+    gap: 0.2rem;
+    @media (min-width: $screen-md) {
+      gap: 1rem;
+    }
+  }
+
+  &__label {
+    font-weight: 600;
+    grid-column: 1 / -1;
+    @media (min-width: $screen-md) {
+      text-align: start;
+    }
+  }
+
+  &__input {
+    max-width: 100%;
+    border: 1px solid $color-teal-50;
+    background-color: #fff;
+    padding: 0.5em 1em;
+    grid-column: -1 / 1;
+  }
+
+  &__submit {
+    margin: 1rem 0;
+    max-width: 100%;
+    min-width: 6rem;
+  }
+}

src/scss/components/form/form.stories.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import "../select/multi-select.ts";
+
+const meta: Meta = {
+  title: "Components/Form",
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => html`
+    <form class="iati-form">
+      <div class="iati-form__inner">
+        <div class="iati-form__item">
+          <label for="search-input" class="iati-form__label"
+            >Search for items containing:</label
+          >
+          <input id="search-input" type="text" class="iati-form__input" />
+        </div>
+        <div class="iati-form__item">
+          <div class="iati-select">
+            <label for="iati-single-select" class="iati-select__label">
+              Choose your language
+            </label>
+            <div class="iati-select__control-wrapper">
+              <select id="iati-single-select" class="iati-select__control">
+                <option>English</option>
+                <option>French</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div class="iati-form__item">
+          <multi-select
+            .label=${"Choose your language(s)"}
+            .options=${["English", "French"]}
+          ></multi-select>
+        </div>
+      </div>
+      <button class="iati-form__submit iati-button iati-button--submit">
+        Search
+      </button>
+    </form>
+  `,
+};

src/scss/components/select/_select.scss

@@ -2,7 +2,7 @@
 @use "../../tokens/font" as *;
 
 .iati-select {
-  color: currentColor;
+  color: $color-grey-90;
 
   &__label {
     display: block;
@@ -11,7 +11,7 @@
 
   &__control-wrapper {
     position: relative;
-    display: inline-block;
+    width: 100%;
 
     &::after {
       position: absolute;
@@ -27,6 +27,7 @@
   }
 
   &__control {
+    display: inline-block;
     padding: 0.7em 2.1em 0.7em 0.7em;
     font-family: $font-stack-heading;
     line-height: 1.1;

src/scss/components/select/select.stories.ts

@@ -5,6 +5,11 @@ import "./multi-select.ts";
 
 const meta: Meta = {
   title: "Components/Select",
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
   argTypes: {
     label: { control: "text" },
     options: { control: "object" },