Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web-Components - Alpha 1: Text input #76

Open
wants to merge 9 commits into
base: develop
Choose a base branch
from
Open
41 changes: 41 additions & 0 deletions src/components/usa-text-input/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { LitElement, css, html } from "lit";
import styles from "./usa-text-input.css.js";

/**
* @summary The usa-text-input component.
*
* @slot - This element has a slot
*
* @cssprop --theme-input-line-height - Sets the line-height of input element
* @cssprop --theme-input-max-width - Sets the max width of the input element
* @cssprop --theme-input-state-border-width - Sets the border width of error and success states.
*
* @tagname usa-text-input
*/
export class UsaTextInput extends LitElement {
static styles = [styles];

connectedCallback() {
super.connectedCallback();
this.label = this.querySelector("label");
this.input = this.querySelector("input");
}

constructor() {
super();
}

render() {
if (this.label) {
this.label.classList.add("usa-label");
}

if (this.input) {
this.input.classList.add("usa-input");
}

return html` ${this.label} ${this.input} `;
}
}

window.customElements.define("usa-text-input", UsaTextInput);
16 changes: 16 additions & 0 deletions src/components/usa-text-input/text-input.stories.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import "./index";

import { html } from "lit";

export default {
title: "Components/Text input",
component: "usa-text-input",
render: () => html`
<usa-text-input>
<label for="input-type-text">Text input label</label>
<input id="input-type-text" name="input-type-text" />
</usa-text-input>
`,
};

export const Default = {};
64 changes: 64 additions & 0 deletions src/components/usa-text-input/usa-text-input.css.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import { css } from "lit";
import "../uswds-core/system-vars.css";
import "../uswds-core/theme-vars.css";

export default css`
:host {
--theme-input-line-height: 1.3;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note

The line height variable is currently hard-coded because I do not yet see how we will be handling normalization with our CSS vars.

--theme-input-max-width: 30rem;
--theme-input-state-border-width: var(--usa-system-unit-05);

.usa-input {
box-sizing: border-box;
background: var(--usa-theme-page-background-color);
border-width: 1px;
border-color: var(--usa-system-color-gray-cool-60);
border-style: solid;
border-radius: 0;
color: var(--usa-theme-text-color);
display: block;
height: 2.5rem;
margin-top: 0.5rem;
max-width: var(--usa-system-unit-mobile-lg);
padding: 0.5rem;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family:
Source Sans Pro Web,
Helvetica Neue,
Helvetica,
Roboto,
Arial,
sans-serif;
font-size: 1.06rem;
line-height: var(--theme-input-line-height);
}

input:not([disabled]):focus,
textarea:not([disabled]):focus {
outline-width: var(--usa-theme-focus-width);
outline-color: var(--usa-theme-focus-color);
outline-style: var(--usa-theme-focus-style);
outline-offset: var(--usa-theme-focus-offset);
}

.usa-label {
color: var(--usa-theme-text-color);
font-family:
Source Sans Pro Web,
Helvetica Neue,
Helvetica,
Roboto,
Arial,
sans-serif;
font-size: 1.06rem;
line-height: var(--theme-input-line-height);
display: block;
font-weight: 400;
margin-top: var(--usa-system-unit-3);
max-width: var(--usa-system-unit-mobile-lg);
}
}
`;
Empty file.
26 changes: 26 additions & 0 deletions src/components/uswds-core/system-vars.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
:root {
--usa-system-color-white: #fff;
--usa-system-color-gray-5: #f0f0f0;
--usa-system-color-gray-10: #e6e6e6;
--usa-system-color-gray-30: #adadad;
--usa-system-color-gray-cool-10: #dfe1e2;
--usa-system-color-gray-cool-30: #a9aeb1;
--usa-system-color-gray-cool-60: #565c65;
--usa-system-color-blue-50: #2378c3;
--usa-system-color-blue-40v: #2491ff;

--usa-system-color-ink: #1b1b1b;
/* Spacing */
--usa-system-unit-05: .25rem;
--usa-system-unit-1: .5rem;
--usa-system-unit-105: .75rem;
--usa-system-unit-2: 1rem;
--usa-system-unit-205: 1.25rem;
--usa-system-unit-3: 1.5rem;
--usa-system-unit-4: 2rem;
--usa-system-unit-5: 2.5rem;
--usa-system-unit-6: 3rem;
--usa-system-unit-7: 3.5rem;
--usa-system-unit-mobile-lg: 30rem;
--usa-system-unit-desktop: 64rem;
}
18 changes: 18 additions & 0 deletions src/components/uswds-core/theme-vars.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
:root {
/* Theme colors */
--usa-theme-color-base-lightest: var(--usa-system-color-gray-5);
/* Applied colors */
--usa-theme-page-background-color: var(--usa-system-color-white);
--usa-theme-text-color: var(--usa-system-color-ink);
/* Font weight */
--usa-theme-text-light: 100;
--usa-theme-text-bold: 700;
/* Font family */
--usa-theme-font-body: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
--usa-theme-grid-container-max-width: var(--usa-system-unit-desktop);
/* Focus styles */
--usa-theme-focus-color: var(--usa-system-color-blue-40v);
--usa-theme-focus-offset: 0;
--usa-theme-focus-style: solid;
--usa-theme-focus-width: var(--usa-system-unit-05);
}
46 changes: 42 additions & 4 deletions storybook/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,48 @@
src: url("@uswds/uswds/fonts/public-sans/PublicSans-BoldItalic.woff2")
format("woff2");
}
@font-face{
font-family:"Source Sans Pro Web";
font-style:normal;
font-weight:300;
font-display:fallback;
src:url(@uswds/uswds/fonts/source-sans-pro/sourcesanspro-light-webfont.woff2) format("woff2");
}
@font-face{
font-family:"Source Sans Pro Web";
font-style:normal;
font-weight:400;
font-display:fallback;
src:url(@uswds/uswds/fonts/source-sans-pro/sourcesanspro-regular-webfont.woff2) format("woff2");
}
@font-face{
font-family:"Source Sans Pro Web";
font-style:normal;
font-weight:700;
font-display:fallback;
src:url(@uswds/uswds/fonts/source-sans-pro/sourcesanspro-bold-webfont.woff2) format("woff2");
}
@font-face{
font-family:"Source Sans Pro Web";
font-style:italic;
font-weight:300;
font-display:fallback;
src:url(@uswds/uswds/fonts/source-sans-pro/sourcesanspro-lightitalic-webfont.woff2) format("woff2");
}
@font-face{
font-family:"Source Sans Pro Web";
font-style:italic;
font-weight:400;
font-display:fallback;
src:url(@uswds/uswds/fonts/source-sans-pro/sourcesanspro-italic-webfont.woff2) format("woff2");
}
@font-face{
font-family:"Source Sans Pro Web";
font-style:italic;
font-weight:700;
font-display:fallback;
src:url(@uswds/uswds/fonts/source-sans-pro/sourcesanspro-bolditalic-webfont.woff2) format("woff2");
}

:root {
font-family:
Expand All @@ -58,10 +100,6 @@
line-height: 1.5;
font-weight: 400;

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;

Comment on lines -61 to -64
Copy link
Contributor Author

@amyleadem amyleadem Oct 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note

I removed this because the component wasn't visible in the preview with this color scheme. It might need to be restored based on project needs, it just wasn't clear to me why we have this.

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
Expand Down