Web-components: Create usa-identifier web component
#21
+5,736
−2,963
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,3 +7,8 @@ | |
| .toc-list-item { | ||
| font-size: 1rem !important; | ||
| } | ||
|
|
||
| .sbdocs-content ul li, | ||
| .sbdocs p { | ||
| font-size: 1rem !important; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -45,6 +45,7 @@ | |
| "@storybook/addon-a11y": "^8.2.7", | ||
| "@storybook/addon-essentials": "^8.2.7", | ||
| "@storybook/addon-links": "^8.2.7", | ||
| "@storybook/addon-mdx-gfm": "^8.1.11", | ||
|
There was a problem hiding this comment. Note Added this dependency to enable markdown tables in the readme.mdx file 1. If we move forward without the docs tables, we can remove this dependency. Footnotes |
||
| "@storybook/blocks": "^8.2.7", | ||
| "@storybook/manager-api": "^8.2.7", | ||
| "@storybook/test": "^8.2.7", | ||
|
|
||
|
There was a problem hiding this comment. Note I manually added content to the tables on this page to demonstrate ideas for possible content in the storybook docs. In the future, we should explore ways to automatically generate this content from the JSDocs in index.js. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import { | ||
| Meta, | ||
| Story, | ||
| Canvas, | ||
| Stories, | ||
| Controls, | ||
| Primary, | ||
| Source, | ||
| } from "@storybook/blocks"; | ||
| import * as IdentifierStories from "./identifier.stories"; | ||
|
|
||
| # Identifier | ||
|
|
||
| The identifier communicates a site's parent agency and displays agency links required by federal laws and policies. | ||
|
|
||
| **Related links:** | ||
|
|
||
| - [Using the identifier component](https://designsystem.digital.gov/components/identifier/) (designsystem.digital.gov) | ||
| - [Identifier accessibility tests](https://designsystem.digital.gov/components/identifier/accessibility-tests) (designsystem.digital.gov) | ||
|
|
||
| ## Element name | ||
|
|
||
| `<usa-identifier>` | ||
|
|
||
| ## Implementation example | ||
|
|
||
| <Canvas of={IdentifierStories.Default} /> | ||
|
|
||
| ## Importing identifier | ||
|
|
||
| - [`@import ...`] (TK) | ||
|
|
||
| Learn more about [installing and using USWDS web components] (Link TK). | ||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Element | Type | Description | | ||
| | :------------------ | :----------------- | :-------- | :--------------------------------------------------------------------------------------- | | ||
| | `label` | `<usa-identifier>` | `string` | Set a custom aria label for the identifier component. Default value: "Agency identifier" | | ||
| | `lang` | `<usa-identifier>` | `string` | Set the language for the default component text. Expected values: "en", "es" | | ||
| | `taxpayer` | `<usa-identifier>` | `boolean` | Include the "Produced and published at taxpayer expense" text | | ||
| | `textAbout` | `<usa-identifier>` | `string` | Custom translation text for the "Accessibility statement" link | | ||
| | `textAccessibility` | `<usa-identifier>` | `string` | Custom translation text for the "About" link | | ||
| | `textFOIA` | `<usa-identifier>` | `string` | Custom translation text for the "FOIA Requests" link | | ||
| | `textNoFEAR` | `<usa-identifier>` | `string` | Custom translation text for the "No FEAR Act data" link | | ||
| | `textOIG` | `<usa-identifier>` | `string` | Custom translation text for the "Office of the Inspector General" link | | ||
| | `textPerformance` | `<usa-identifier>` | `string` | Custom translation text for the "Performance reports" link | | ||
| | `textPrivacy` | `<usa-identifier>` | `string` | Custom translation text for the "Privacy policy" link | | ||
| | `urlAbout` | `<usa-identifier>` | `string` | The url for the parent agency's "About" page | | ||
| | `urlAccessibility` | `<usa-identifier>` | `string` | The url for the parent agency's "Accesibility statement" page | | ||
| | `urlFOIA` | `<usa-identifier>` | `string` | The url for the parent agency's "FOIA requests" page | | ||
| | `urlNoFEAR` | `<usa-identifier>` | `string` | The url for the parent agency's No FEAR Act data" page | | ||
| | `urlOIG` | `<usa-identifier>` | `string` | The url for the parent agency's "Office of the inspector general" page | | ||
| | `urlPerformance` | `<usa-identifier>` | `string` | The url for the parent agency's "Performance reports" page | | ||
| | `urlPrivacy` | `<usa-identifier>` | `string` | The url for the parent agency's "Privacy policy" page | | ||
|
|
||
| Learn more about [using properties on custom elements] (Link TK) | ||
|
|
||
| ## CSS parts | ||
|
|
||
| | CSS Part | Description | | ||
| | :---------------- | :------------------------------------------------------------------------------- | | ||
| | `disclaimer` | The `<p>` element that wraps the "An official website of the..." disclaimer text | | ||
| | `disclaimer-link` | The `<a>` element inside the disclaimer text | | ||
| | `domain` | The `<p>` element that wraps your site's domain name | | ||
| | `logo-image` | The agency logo `<img>` element | | ||
| | `logo-wrapper` | The `<div>` element that wraps all logos | | ||
| | `logo` | The `<a>` elements that wrap each logo | | ||
| | `required-link` | The `<a>` elements in the required links list | | ||
| | `usagov` | The `<p>` element that wraps the USA.gov text | | ||
| | `usagov-link` | The `<a>` element inside the usagov text | | ||
|
|
||
| Learn more about [adding custom styles with CSS Parts] (Link TK). | ||
|
|
||
| ## CSS variables | ||
|
|
||
| | CSS variable | Default value | Description | | ||
| | :-------------------------------------------- | :------------------------------------- | :---------------------------------------------------------------------------------------------- | | ||
| | `--usa-theme-identifier-background-color` | `--usa-system-color-ink` | Background color of the identifier | | ||
| | `--usa-theme-identifier-font-family` | `--usa-theme-font-body` | Font family of the identifier | | ||
| | `--usa-theme-identifier-max-width` | `--usa-theme-grid-container-max-width` | Maximum width of the content within the identifier. Use the same max-width as your site footer. | | ||
| | `--usa-theme-identifier-text-color` | `--usa-system-color-white` | Text color used in the disclaimer and USA.gov statement | | ||
| | `--usa-theme-identifier-secondary-text-color` | `--usa-system-color-gray-cool-10` | Link color used in the disclaimer and USA.gov statement | | ||
| | `--usa-theme-identifier-link-list-color` | `--usa-system-color-gray-cool-30` | Link color used required link list | | ||
|
|
||
| Learn more about [customizing component styles with CSS custom properties] (TK). | ||
|
|
||
| ## Slots | ||
|
|
||
| | Name | Element | Expected content | Attributes | | ||
| | :---------------------------- | :------- | :---------------------------------------------------------------------------------------------- | :---------------------------------------------------------------- | | ||
| | `agency-intro` (optional) | `<span>` | Custom text: "An official website of the" | `href`: url for your parent agency's home page | | ||
| | `agency-primary` | `<a>` | Text: Parent agency full name | `href`: url for your parent agency's home page | | ||
| | `agency-secondary` (optional) | `<a>` | Text: Secondary parent agency full name | `href`: url for your secondary parent agency's home page | | ||
| | `agency-taxpayer` (optional) | `<span>` | Custom text: "Produced and published at taxpayer expense." | `href`: url for your secondary parent agency's home page | | ||
| | `domain` | `<p>` | Text: Your site's domain name | -- | | ||
| | `logo` | `<a>` | Image: An `<a>` element wrapping the the parent agency logo `<img>` element | `href`: url for your parent agency's home page. | | ||
| | `usagov` (optional) | `<a>` | Custom text: "Looking for U.S. government information and services?" <br/> `<a>`: Visit USA.gov | `href`: url for the relevant translation of the usa.gov home page | | ||
|
|
||
| ## All variants | ||
|
|
||
| <Stories /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| { | ||
| "en": { | ||
| "masthead": { | ||
| "intro": "An official website of the", | ||
| "conjunction": "and" | ||
| }, | ||
| "taxpayer": "Produced and published at taxpayer expense.", | ||
| "required_links": { | ||
| "about": "About", | ||
| "accessibility": "Accessibility statement", | ||
| "foia": "FOIA requests", | ||
| "no_fear": "No FEAR Act data", | ||
| "oig": "Office of the Inspector General", | ||
| "performance": "Performance reports", | ||
| "privacy": "Privacy policy" | ||
| }, | ||
| "usagov": { | ||
| "description": "Looking for U.S. government information and services?", | ||
| "link_label": "Visit USA.gov", | ||
| "link_url": "https://www.usa.gov/" | ||
| }, | ||
| "aria_label": "Agency identifier" | ||
| }, | ||
| "es": { | ||
| "masthead": { | ||
| "intro": "Un sitio web oficial de", | ||
| "conjunction": "y" | ||
| }, | ||
| "taxpayer": "Producdo y publicado con dinero de los contribuyentes de impuestos.", | ||
| "required_links": { | ||
| "about": "Acerca de", | ||
| "accessibility": "Declaración de accesibilidad", | ||
| "foia": "Solicitud a través de FOIA", | ||
| "no_fear": "Datos de la ley No FEAR", | ||
| "oig": "Oficina del Inspector General", | ||
| "performance": "Informes de desempeño", | ||
| "privacy": "Política de privacidad" | ||
| }, | ||
| "usagov": { | ||
| "description": "¿Necesita información y servicios del Gobierno?", | ||
| "link_label": "Visite USA.gov en Español", | ||
| "link_url": "https://www.usa.gov/espanol/" | ||
| }, | ||
| "aria_label": "Identificador de la agencia" | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note
Added this code to enable markdown tables in the readme.mdx file 1. If we move forward without the docs tables, we can remove this.
Footnotes
https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly ↩