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.

Sign up for GitHub

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

Automate component version badges #2656

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+874 −259
Open

Automate component version badges #2656

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e85a5cb
Update component changelog script to handle added/updated tags
alex-ju Jan 20, 2025
082607c
Format front matter to match `js-yaml` and add missing tags
alex-ju Jan 20, 2025
15e50a9
Fix `cleanComponentFrontMatter`
alex-ju Jan 22, 2025
a10e7cf
Only clean badges if the new version is not a patch
alex-ju Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions website/docs/components/accordion/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,31 @@
---
title: Accordion
description: An accordion is a vertically stacked list of container-like toggles that reveal or hide associated sections of content.
description: >-
An accordion is a vertically stacked list of container-like toggles that
reveal or hide associated sections of content.
caption: A list of toggles that reveal or hide associated content.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67221-87751&t=gWdKy44MzTP4cTRo-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/accordion
related: ['components/reveal','components/flyout','components/modal','components/tabs']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67221-87751&t=gWdKy44MzTP4cTRo-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/accordion
related:
- components/reveal
- components/flyout
- components/modal
- components/tabs
previewImage: assets/illustrations/components/accordion.jpg
navigation:
hidden: false
keywords: ['toggle', 'disclosure', 'details', 'reveal', 'list', 'summary', 'expand', 'collapse']
keywords:
- toggle
- disclosure
- details
- reveal
- list
- summary
- expand
- collapse
---

<section data-tab="Guidelines">
Expand Down
19 changes: 15 additions & 4 deletions website/docs/components/alert/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,23 @@ title: Alert
description: Displays a brief message without interrupting a user’s task.
caption: Displays a brief message without interrupting a user’s task.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67382-70353&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/alert
related: ['components/modal', 'components/toast']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67382-70353&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/alert
related:
- components/modal
- components/toast
previewImage: assets/illustrations/components/alert.jpg
navigation:
keywords: ['alert', 'toast', 'notification', 'banner', 'message']
keywords:
- alert
- toast
- notification
- banner
- message
status:
updated: 4.15.0
---

<section data-tab="Guidelines">
Expand Down
26 changes: 20 additions & 6 deletions website/docs/components/app-footer/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,28 @@
---
title: App Footer
description: A footer that appears on every screen to display supplementary information and links.
description: >-
A footer that appears on every screen to display supplementary information and
links.
caption: Displays supplementary information and links for the application.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67351-171799&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-footer
related: ['layouts/app-frame', 'components/side-nav']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67351-171799&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-footer
related:
- layouts/app-frame
- components/side-nav
previewImage: assets/illustrations/components/app-footer.jpg
navigation:
keywords: ['footer', 'copyright', 'support', 'terms', 'privacy', 'security', 'accessibility', 'system status']
keywords:
- footer
- copyright
- support
- terms
- privacy
- security
- accessibility
- system status
---

<section data-tab="Guidelines">
Expand All @@ -28,4 +42,4 @@ navigation:

<section data-tab="Accessibility">
@include "partials/accessibility/accessibility.md"
</section>
</section>
22 changes: 17 additions & 5 deletions website/docs/components/app-header/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
---
title: App Header
description: A header navigation that provides access to global elements and application utilities.
description: >-
A header navigation that provides access to global elements and application
utilities.
caption: Used as a global and utility navigation within an application.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67337-16625&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-header
related: ['components/side-nav', 'components/app-footer', 'layouts/app-frame']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67337-16625&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-header
related:
- components/side-nav
- components/app-footer
- layouts/app-frame
previewImage: assets/illustrations/components/app-header.jpg
navigation:
hidden: true
keywords: ['navigation', 'header', 'navbar', 'menubar', 'topbar']
keywords:
- navigation
- header
- navbar
- menubar
- topbar
---

<section data-tab="Guidelines">
Expand Down
22 changes: 17 additions & 5 deletions website/docs/components/app-side-nav/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
---
title: App Side Nav
description: Used as a contextual navigation for subpages within an application.
caption: A side navigation menu that provides access to subpages within a product or application.
caption: >-
A side navigation menu that provides access to subpages within a product or
application.
links:
figma:
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-side-nav
related: ['components/side-nav', 'components/breadcrumb','components/tabs','layouts/app-frame','components/app-header']
figma: null
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/app-side-nav
related:
- components/side-nav
- components/breadcrumb
- components/tabs
- layouts/app-frame
- components/app-header
previewImage: assets/illustrations/components/app-side-nav.jpg
navigation:
hidden: true
keywords: ['navigation', 'side navigation', 'sidenav', 'sidebar']
keywords:
- navigation
- side navigation
- sidenav
- sidebar
---

<section data-tab="Guidelines">
Expand Down
11 changes: 8 additions & 3 deletions website/docs/components/application-state/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,16 @@ title: Application State
description: An informational element that displays the current state of the application.
caption: An informational element that displays the current state of the application.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67278-131631&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/application-state
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67278-131631&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/application-state
previewImage: assets/illustrations/components/application-state.jpg
navigation:
keywords: ['empty state', 'error state', 'message']
keywords:
- empty state
- error state
- message
---

<section data-tab="Guidelines">
Expand Down
20 changes: 15 additions & 5 deletions website/docs/components/badge-count/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
---
title: Badge Count
description: A numeric label used to display things like version number or collection enumerations.
description: >-
A numeric label used to display things like version number or collection
enumerations.
caption: A non-interactive numeric label.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67246-60779&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/badge-count
related: ['components/badge', 'components/tag']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67246-60779&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/badge-count
related:
- components/badge
- components/tag
previewImage: assets/illustrations/components/badge-count.jpg
navigation:
keywords: ['chip', 'pill', 'version number', 'counter']
keywords:
- chip
- pill
- version number
- counter
---

<section data-tab="Guidelines">
Expand Down
20 changes: 14 additions & 6 deletions website/docs/components/badge/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,22 @@
---
title: Badge
description: Concise, non-interactive labels that represent metadata.
caption: Concise, non-interactive labels that represent metadata.
description: 'Concise, non-interactive labels that represent metadata.'
Copy link
Contributor

Choose a reason for hiding this comment

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

Question: why do these caption and description have quotes? it seems like most of the others dont.

Copy link
Contributor

Choose a reason for hiding this comment

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

Looking at the deployed site (https://hds-website-git-alex-ju-automate-component-ver-2d7be8-hashicorp.vercel.app/components/badge) seems like it doesn't randomly add the quotes to the page so I guess its fine

Copy link
Member Author

@alex-ju alex-ju Jan 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

According to the schema used by js-yaml strings over a certain length are moved to a block (hence the >- notation) and the short ones get wrapped in single quotes to avoid parse errors.

Copy link
Contributor

Choose a reason for hiding this comment

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

Ok! I just noticed that there were places where the file was updated, but caption/description stayed the same (didn't add the quotes) so I thought it was interesting that it only got added 3 times.

ex: Accordion didnt have quotes added around the caption
Screenshot 2025-01-22 at 10 10 58 AM

caption: 'Concise, non-interactive labels that represent metadata.'
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67237-59854&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/badge
related: ['components/badge-count','components/tag']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67237-59854&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/badge
related:
- components/badge-count
- components/tag
previewImage: assets/illustrations/components/badge.jpg
navigation:
keywords: ['chip', 'pill', 'tag', 'label']
keywords:
- chip
- pill
- tag
- label
---

<section data-tab="Guidelines">
Expand Down
19 changes: 14 additions & 5 deletions website/docs/components/breadcrumb/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,23 @@
---
title: Breadcrumb
description: A Breadcrumb is a type of secondary navigation that reveals the user’s location in an application.
description: >-
A Breadcrumb is a type of secondary navigation that reveals the user’s
location in an application.
caption: A secondary navigation that shows the user’s current location.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67385-83191&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/breadcrumb
related: ['components/side-nav', 'components/tabs']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67385-83191&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/breadcrumb
related:
- components/side-nav
- components/tabs
previewImage: assets/illustrations/components/breadcrumb.jpg
navigation:
keywords: ['navigation', 'crumb', 'path']
keywords:
- navigation
- crumb
- path
---

<section data-tab="Guidelines">
Expand Down
15 changes: 12 additions & 3 deletions website/docs/components/button-set/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,20 @@ title: Button Set
description: Provides consistent layout and spacing for a set of buttons.
caption: A set of buttons.
links:
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button-set
related: ['components/button','patterns/button-organization','components/segmented-group']
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button-set
related:
- components/button
- patterns/button-organization
- components/segmented-group
previewImage: assets/illustrations/components/button-set.jpg
navigation:
keywords: ['button group', 'button', 'button spacing', 'button alignment', 'button layout']
keywords:
- button group
- button
- button spacing
- button alignment
- button layout
---

<section data-tab="Guidelines">
Expand Down
20 changes: 15 additions & 5 deletions website/docs/components/button/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
---
title: Button
description: An interactive element that initiates an action or event, such as a form submission.
description: >-
An interactive element that initiates an action or event, such as a form
submission.
caption: An interactive element that initiates an action.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-95918&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button
related: ['components/button-set','patterns/button-organization','components/link/inline','components/link/standalone']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67397-95918&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/button
related:
- components/button-set
- patterns/button-organization
- components/link/inline
- components/link/standalone
previewImage: assets/illustrations/components/button.jpg
navigation:
keywords: ['action', 'link']
keywords:
- action
- link
---

<section data-tab="Guidelines">
Expand Down
15 changes: 10 additions & 5 deletions website/docs/components/card/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
---
title: Card
description: A block container that provides styling for elevation, border, and background.
caption: A block container that provides styling for elevation, border, and background.
description: 'A block container that provides styling for elevation, border, and background.'
Copy link
Contributor

Choose a reason for hiding this comment

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

Same question about the quotes here.

caption: 'A block container that provides styling for elevation, border, and background.'
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67251-87362&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/card
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67251-87362&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/card
previewImage: assets/illustrations/components/card.jpg
navigation:
keywords: ['tile', 'container', 'box']
keywords:
- tile
- container
- box
---

<section data-tab="Guidelines">
Expand Down
27 changes: 20 additions & 7 deletions website/docs/components/code-block/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
---
title: Code Block
description: A container for displaying formatted chunks of code with syntax highlighting and related features.
description: >-
A container for displaying formatted chunks of code with syntax highlighting
and related features.
caption: A container for formatting chunks of code with syntax highlighting.
links:
figma: https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67166-37020&t=w8xQlWxzH7bwXLe2-1
github: https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/code-block
related: ['components/copy/snippet', 'components/copy/button']
figma: >-
https://www.figma.com/design/iweq3r2Pi8xiJfD9e6lOhF/HDS-Components-v2.0?node-id=67166-37020&t=w8xQlWxzH7bwXLe2-1
github: >-
https://github.com/hashicorp/design-system/tree/main/packages/components/src/components/hds/code-block
related:
- components/copy/snippet
- components/copy/button
previewImage: assets/illustrations/components/code-block.jpg
navigation:
keywords: ['code', 'snippet', 'copy', 'text', 'editor', 'language', 'example', 'syntax', 'highlight']
status:
updated: 4.13.0
keywords:
- code
- snippet
- copy
- text
- editor
- language
- example
- syntax
- highlight
---

<section data-tab="Guidelines">
Expand Down
Loading
Loading