Merge pull request #104 from alphagov/Add-Figma-partial-to-templates

Add Figma partial to templates
alphagov · Nov 4, 2024 · afaa1e7 · afaa1e7
2 parents d1f93a2 + 8326663
commit afaa1e7
Show file tree

Hide file tree

Showing 12 changed files with 52 additions and 0 deletions.
diff --git a/_includes/layouts/component-documentation.njk b/_includes/layouts/component-documentation.njk
@@ -7,6 +7,7 @@
 
     <div class="govuk-grid-column-three-quarters-from-desktop">
       {% include 'partials/header.njk' %}
+      {% include 'partials/figma.njk' %}
       {% include 'partials/when-to-use.njk' %}
       {% include 'partials/when-not-to-use.njk' %}
       {% include 'partials/how-it-works-with-variations.njk' %}

diff --git a/_includes/layouts/pattern-documentation.njk b/_includes/layouts/pattern-documentation.njk
@@ -7,6 +7,7 @@
 
     <div class="govuk-grid-column-three-quarters-from-desktop">
       {% include 'partials/header.njk' %}
+      {% include 'partials/figma.njk' %}
       {% include 'partials/when-to-use.njk' %}
       {% include 'partials/when-not-to-use.njk' %}
       {% include 'partials/how-it-works-with-variations.njk' %}

diff --git a/docs/components/*component-documentation-template.md b/docs/components/*component-documentation-template.md
@@ -21,6 +21,11 @@ title: #Delete this comment before entering the name of the component.
 # This briefly describes what the component is. It is required to display the description on the page, and in the <head> meta description.
 description: #Delete this comment before entering the description of the component.
 
+# Embedding the figma file of the component
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this component.
+
 # When to use this component
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/components/attachment.md b/docs/components/attachment.md
@@ -21,6 +21,11 @@ title: Attachment
 # This briefly describes what the component is. It is required to display the description on the page, and in the <head> meta description.
 description: The attachment component allows users to download documents and presents information about a document. It also allows users to request an accessible format.
 
+# Embedding the figma file of the component
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this component.
+
 # When to use this component
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/components/breadcrumbs.md b/docs/components/breadcrumbs.md
@@ -21,6 +21,11 @@ title: Breadcrumbs
 # This briefly describes what the component is. It is required to display the description on the page, and in the <head> meta description.
 description: The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels by making visible the page hierarchy.
 
+# Embedding the figma file of the component
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this component.
+
 # When to use this component
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/components/content-list.md b/docs/components/content-list.md
@@ -21,6 +21,11 @@ title: Contents list
 # This briefly describes what the component is. It is required to display the description on the page, and in the <head> meta description.
 description: The contents list provides a list of links when content is long and needs to be broken up to help users navigate it.
 
+# Embedding the figma file of the component
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this component.
+
 # When to use this component
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/components/feedback.md b/docs/components/feedback.md
@@ -21,6 +21,11 @@ title: Feedback
 # This briefly describes what the component is. It is required to display the description on the page, and in the <head> meta description.
 description: The feedback component invites user feedback on the current page they are on.
 
+# Embedding the figma file of the component
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this component.
+
 # When to use this component
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/components/global-banner.md b/docs/components/global-banner.md
@@ -21,6 +21,11 @@ title: Global banner
 # This briefly describes what the component is. It is required to display the description on the page, and in the <head> meta description.
 description: Used to communicate important information on throughout GOV.UK.
 
+# Embedding the figma file of the component
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this component.
+
 # When to use this component
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/components/print-link.md b/docs/components/print-link.md
@@ -21,6 +21,11 @@ title: Print link
 # This briefly describes what the component is. It is required to display the description on the page, and in the <head> meta description.
 description: A link with a print icon to help users print the current page.
 
+# Embedding the figma file of the component
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this component.
+
 # When to use this component
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/components/single-page-notification-button.md b/docs/components/single-page-notification-button.md
@@ -21,6 +21,11 @@ title: Single page notification button
 # This briefly describes what the component is. It is required to display the description on the page, and in the <head> meta description.
 description: A button that subscribes the user to email notifications to a page
 
+# Embedding the figma file of the component
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this component.
+
 # When to use this component
 # Briefly describe the situation(s) when to use this component.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/patterns/*pattern-documentation-template.md b/docs/patterns/*pattern-documentation-template.md
@@ -21,6 +21,11 @@ title: #Delete this comment before entering the name of the pattern.
 # This briefly describes what the pattern is. It is required to display the description on the page, and in the <head> meta description.
 description: #Delete this comment before entering the description of the pattern.
 
+# Embedding the figma file of the pattern
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this pattern.
+
 # When to use this pattern
 # Briefly describe the situation(s) when to use this pattern.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).

diff --git a/docs/patterns/search-filter.md b/docs/patterns/search-filter.md
@@ -21,6 +21,11 @@ title: Search filter
 # This briefly describes what the pattern is. It is required to display the description on the page, and in the <head> meta description.
 description: Search filters are used to help refine search results.
 
+# Embedding the figma file of the pattern
+# This will display a Figma embed on the page.
+# To add a Figma embed, copy only the URL within the embed snippet.
+figmaLink: #Delete this comment before entering the Figma embed URL of the Figma representaiton of this pattern.
+
 # When to use this pattern
 # Briefly describe the situation(s) when to use this pattern.
 # You MUST wrap this in single quotation marks (ie. ' '), since markdown can be used to enter this information. To create a heading, use three hashes (ie. ###).