From 47b45fa69424ed5d35900889b4b1cc4d3c20d8d5 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Tue, 28 May 2024 10:26:37 +1000
Subject: [PATCH 01/14] Updated Tag documentation

---
 docs/content/design-system/5.components/tag.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/content/design-system/5.components/tag.md b/docs/content/design-system/5.components/tag.md
index 411d0d9854..6ae26a2b5d 100644
--- a/docs/content/design-system/5.components/tag.md
+++ b/docs/content/design-system/5.components/tag.md
@@ -35,9 +35,10 @@ id: core-containers-tag--neutral
 ---
 
 ## Variants
-Tags have 2 variants:
+Tags have 3 variants:
 - default, for use on neutral backgrounds
-- neutral, for use on white backgrounds.
+- neutral, for use on white backgrounds
+- dark, for use in predictive list.
 
 ### Default
 ::DocsExample

From 668ea59ad6d230a28bca648218c08e51461c6584 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Tue, 28 May 2024 10:37:22 +1000
Subject: [PATCH 02/14] Update detail-list documentation

---
 docs/content/design-system/5.components/detail-list.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/content/design-system/5.components/detail-list.md b/docs/content/design-system/5.components/detail-list.md
index f06f3b89db..cc1ff8604e 100644
--- a/docs/content/design-system/5.components/detail-list.md
+++ b/docs/content/design-system/5.components/detail-list.md
@@ -38,7 +38,14 @@ id: core-containers-description-list--with-link
 - Don't use with complex or long form content.
 
 ---
+## Variants
 
+Detail list has two variants:
+- Default
+- Icon
+
+---
+  
 ## Theming
 
 When a link is present, the detail list uses the link colour for interaction states.

From 2bc1b94fb4178eb0c10ddb417ef487618f0a9127 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Tue, 28 May 2024 10:59:33 +1000
Subject: [PATCH 03/14] Update detail-list documentation

Updated documentation to reflect addition of icon variant.
---
 .../design-system/5.components/detail-list.md | 48 ++++++++++++++-----
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/docs/content/design-system/5.components/detail-list.md b/docs/content/design-system/5.components/detail-list.md
index cc1ff8604e..4f16ffaa23 100644
--- a/docs/content/design-system/5.components/detail-list.md
+++ b/docs/content/design-system/5.components/detail-list.md
@@ -8,15 +8,15 @@ label: Core
 
 ## Usage
 
-Use the detail list to display a list with labels. This surfaces (retrieves and displays) and highlights key information to users.
+Detail list displays a list with labels. This surfaces and highlights key information to users.
 
-Each row of the detail list comprises a:
-- label, a descriptive or informative label for your content, for example, 'Location'
-- content, the piece of information itself, for example, 'East Gippsland'.
+Each row of the Detail list comprises a:
+- a label - a description or information (e.g. Location)
+- content - the detail (e.g. East Gippsland).
 
-The detail list is used to display:
-- metadata, for example, ‘Published date' (which shows as '22 March 2023’)
-- status, for example of a program or grant.
+It's used to display:
+- metadata such as ‘Published date', which displays as day, month, year (e.g. 22 March 2023)
+- the status of a program or grant (e.g. Opening soon, Closed).
 
 Only use the detail list for simple information. For data or complex information, consider using a table.
 
@@ -27,28 +27,50 @@ id: core-containers-description-list--with-link
 ::
 
 ### When and how to use
-- Use single words only for the label.
+- Try to use single words for the label.
 - Include a link if you need to.
-- Keep the summary content and labels clear and concise.
+- Keep the labels and summary content clear and concise.
 - Align all summary content to the longest label.
 
 ### When and how not to use
 - Don't use labels for unrelated summary content.
-- Don't use it to surface information that is not important to users.
-- Don't use with complex or long form content.
+- Don't use to surface information that is not important to users.
+- Don't use with complex or long-form content.
+- Don’t use icons unrelated to the content.
+- Don’t use icons that are not universally understood.
 
 ---
 ## Variants
 
 Detail list has two variants:
 - Default
-- Icon
+- Icon.
+
+### Default
+The default variant displays a label followed by the content. This should be used as a first choice. 
+
+::DocsExample
+---
+id: core-containers-description-list--default-story
+---
+::
+
+### Icon
+The icon variant displays an icon next to content. Use the icon variant for displaying information such as the status of a program or grant. 
+
+It should only be used when meaningful and universally understood icons can be used for all list items.
+
+::DocsExample
+---
+id: core-containers-description-list--icons-only
+---
+::
 
 ---
   
 ## Theming
 
-When a link is present, the detail list uses the link colour for interaction states.
+When a link is present, the Detail list uses the link colour for interaction states.
 
 ::DocsThemeChooser
   ::DocsExample

From 1ca55a89b868b88baa1ee1fbb5aff78a868898b2 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Tue, 28 May 2024 11:06:45 +1000
Subject: [PATCH 04/14] Update tag documentation

Updated to include dark variant used in predictive list
---
 docs/content/design-system/5.components/tag.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/content/design-system/5.components/tag.md b/docs/content/design-system/5.components/tag.md
index 6ae26a2b5d..0ce1ce732f 100644
--- a/docs/content/design-system/5.components/tag.md
+++ b/docs/content/design-system/5.components/tag.md
@@ -1,17 +1,17 @@
 ---
 title: Tag
-description: The Tag component adds, and draws attention to, a category name for your content. 
+description: Label and draw attention to content such as a category. 
 layout: page
 label: Core
 
 ---
 
 ## Usage
-Use tags to help categorise content. Tags help users to scan and find content that's relevant to them.
+Tags help categorise content. They help users to scan and find content that's relevant to them.
 
 Content can have more than one category or theme. Using the tag component helps indicate this to the user.
 
-When naming tags, use a noun or adjective. Don't use verbs as a user may confuse the tag with an action.
+When naming tags, use a noun or adjective. Don't use verbs as a user may confuse it with an action.
 
 ::DocsExample
 ---
@@ -38,7 +38,7 @@ id: core-containers-tag--neutral
 Tags have 3 variants:
 - default, for use on neutral backgrounds
 - neutral, for use on white backgrounds
-- dark, for use in predictive list.
+- Dark, for use in the [predictive list] (https://www.ripple.sdp.vic.gov.au/design-system/components/search-bar#predictive-keyword-list).
 
 ### Default
 ::DocsExample
@@ -48,7 +48,6 @@ id: core-containers-tag--default-story
 ::
 
 ### Neutral
-Use the reverse variant when the chip appears on the primary colour.
 
 ::DocsExample
 ---
@@ -56,3 +55,4 @@ id: core-containers-tag--neutral
 ---
 ::
 
+

From 74abcb8d30f4f6619c4b3c1b4da2eb1d00279f96 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Tue, 28 May 2024 11:57:51 +1000
Subject: [PATCH 05/14] Update results-listing documentation

Updated to include file variant.
Waiting on correct storybook examples
---
 .../5.components/results-listing.md           | 64 ++++++++++++-------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/docs/content/design-system/5.components/results-listing.md b/docs/content/design-system/5.components/results-listing.md
index 0f8577cd9b..363584419f 100644
--- a/docs/content/design-system/5.components/results-listing.md
+++ b/docs/content/design-system/5.components/results-listing.md
@@ -1,6 +1,6 @@
 ---
 title: Results listing
-description: The Results listing component shows a list of search result items, with each item displaying key information relevant to that search.
+description: Display a list of results to users displaying key information related to the search.
 layout: page
 label: Core
 
@@ -8,18 +8,18 @@ label: Core
 
 ## Usage
 
-Use a results listing to display content results, like search results or news items. It surfaces (retrieves and shows) important information to the user.
+Use a results listing to display content results, like search listing results or news items. It surfaces important information to the user.
 
-A results listing shows multiple results items, each with their own:
-- title, telling the user the name of the result
-- summary, summing up the result’s content for the user
-- URL, telling the user the website address for the result
-- featured content, visually highlighting key content from the result
-- topic/category, putting the result into its context within a broader page or site
-- date, showing a result’s published (simple variant) or updated (default variant) date
-- keyword term bold styling, showing the search term(s) in bold in the result displayed.
+This component includes:
+- Title, to identify the page or result title
+- Summary, to sum up the content for the user
+- URL, which tells the user where the content is
+- Featured content, which gives key items visual prominence
+- Topic or category, which is a way to give a user greater context over the item
+- Date, which can display a published or updated date. Only use if it will improve the user experience and is relevant to the content
+- Keyword term bold styling, which gives visual prominence to the search keyword term
 
-When displaying the results listing, consider a user's needs. Only display what will help them to make an informed decision.
+When displaying the results listing, consider a user's needs. Only display what will help them to make an informed choice.
 
 ::DocsExample
 ---
@@ -28,24 +28,26 @@ id: core-navigation-result-listing--default-story
 ::
 
 ### When and how to use
-- Put the search term in bold.
-- Test results so they are correct and relevant to the search term.
-- Keep descriptions under 150 words. 
+- Bold the search term.
+- Test results. They must always be accurate and relevant.
+- Keep descriptions short - no more than 150 words.
 - Display up to 10 results.
 
 ### When and how not to use
 - Don't display the result title only.
-- Don’t make only the title interactive, ensure the entire result is interactive.
-- Don't use both updated date and published date, choose one only.
+- The title shouldn't be the only interactive element. Ensure the entire item is interactive.
+- Don't use both updated date and published date. Choose one, depending on user need..
 - Don't display more than 10 results.
+- Only use the file variant for file or document results
 
 ---
 
 ## Variants
 
-A result listing's 2 main variants are:
+A result listing's 3 main variants are:
 - default
-- simple.
+- simple
+- file.
 
 ### Default
 
@@ -54,22 +56,24 @@ The default results listing has the option of surfacing key information when req
 Key information can include:
 
 - audience
-- status
-- grants metadata such as grant value.
+- status (of a grant or program)
+- grant metadata (such as $ value)
+- job listing metadata, such as closing date or salary information.
 
-The default variant users the updated date by default.
+The default variant users the 'updated date' by default.
 
 ::DocsExample
 ---
-id: core-navigation-result-listing--with-details
+id: core-navigation-result-listing--with-details&args=number:1;updated:22+Dec+2023
 ---
 ::
 
+
 ### Simple
 
 The simple variant displays the page title with accompanying metadata.
 
-It uses the published date by default, which is automatically pulled in from the metadata.
+It uses the published date by default, which is pulled from the metadata.
 
 We recommend using this variant when displaying simple results, like news items.
 
@@ -79,6 +83,20 @@ id: core-navigation-result-listing--with-meta
 ---
 ::
 
+### File
+
+The file variant displays the file item title with accompanying metadata such as file type and size. 
+
+It uses the published date by default, which it pulls in from the metadata.
+
+An optional description and tags can be used when required. 
+
+::DocsExample
+---
+id: 
+---
+::
+
 ---
 
 ## Theming

From 0b766fc4f925ee7f365a2483b6770d392f75dfef Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Tue, 28 May 2024 12:41:42 +1000
Subject: [PATCH 06/14] Update search-bar documentation

---
 .../design-system/5.components/search-bar.md  | 51 ++++++++++---------
 1 file changed, 26 insertions(+), 25 deletions(-)

diff --git a/docs/content/design-system/5.components/search-bar.md b/docs/content/design-system/5.components/search-bar.md
index 7cb28d8922..b219ed7a6e 100644
--- a/docs/content/design-system/5.components/search-bar.md
+++ b/docs/content/design-system/5.components/search-bar.md
@@ -1,6 +1,6 @@
 ---
 title: Search bar
-description: The Search bar shows a text input field with a search button to let users enter keywords and search content on the website.
+description: Allow users to enter keywords and search content on the website.
 layout: page
 label: Core
 
@@ -8,19 +8,18 @@ label: Core
 
 ## Usage
 
-Use the search bar to help users find what they are looking for.
+Search is useful for sites with a lot of pages. 
 
-Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation.
-
-Users will use keywords in the search bar, often using different words or phrases. Search is especially helpful for users when navigating site that have many pages. 
+Users often rely on search to find the information they need. You can use it as an alternative to on-page navigation. 
 
 The search bar includes:
 
 - text - placeholder and input text
 - search button label
 - search button icon
+- clear button icon
 - optional predictive list - present suggested keywords to the user
-- optional refine search link - expand to present advanced filters to the user.
+- optional refine search link - expands to display filters to the user.
 
 ::DocsExample
 ---
@@ -42,36 +41,39 @@ Smaller devices show a responsive variant with:
 - only a search icon
 - no button label. 
 
-This gives the user more space to write search text. Users know that a magnifying glass represents a search function. 
+Users know that a magnifying glass indicates a search function. Because of this, on small screens we don't pair it with the word 'search' due to space limitations. However, it is retained in the code for screen readers.
 
-The word ‘Search’ must appear in the alt text for screen readers.
+The search button must submit an action, which reduces the time it takes to use the search bar. A user can enter their own search word or select a suggestion if that option is available. The search submits once a user selects the ‘Search’ button or or hits their 'enter' or 'return' key.
 
-The button type should be a submit button. This lets a user conduct a search:
-- using the enter/return key
-- using fewer keystrokes
-- by choosing a suggestion (if applicable)
-- that afterwards, still displays the search keyword. 
+The search keyword remains in the search bar when the search results load.
 
 ####  Predictive keyword list
 
-Useful suggestions let users find what they need with less effort. They also reduce spelling errors and typing.
+Making suggestions can improve the user experience. This can lead to less spelling errors and less effort for the user to reach their result.
+
+Useful suggestions can help guide users to their destination.
+
+Keyword suggestions should be in a compact and organised list.
 
-Use a short, ordered list of no more than 10 keyword suggestions.
+Provide suggestions after the user enters the third character. This reduces user effort. But don’t overwhelm users with a lot of suggestions. Keep the amount of suggestions under 10.
 
-They should appear after only a few keystrokes.
+Allow for keyboard navigation through the suggestions:
+- The user should be able to scroll through the items.
+- Once the user goes past the last item, they should return to the top (and vice versa for upward keyboard scrolling).
+- The Esc key should allow users to exit the list.
 
-Let the user scroll through keyword suggestions using keyboard navigation, with the Esc key to exit. 
+#### Clear button
+The clear search button contains the clear symbol icon 'X'. This allows users to clear the input text from the search bar. 
 
-Scrolling ‘down’ past the last suggestion should loop the user back to the first one. Scrolling ‘up’ before the first suggestion should loop the user to the last (bottom) one.
 
 ### When and how to use
 
-- Use the search bar to let users search your site (site search).
-- Use default search field on white page background.
-- Use reverse search field on grey background.
-- Use menu variant in the mega menu only.
+- Use the search bar for site search.
+- Use the default search bar on a white page background
+- Use the reverse search bar on a grey background
+- Use the menu variant in the mega menu only
 - Use only default and reverse variants with predictive list suggestions.
-- Even if it's hidden from view, always use a form label for screen readers.
+- Even if a label is hidden, retain it in code for screen readers.
 - Keep placeholder text concise and descriptive.
 
 ### When and how not to use
@@ -79,8 +81,7 @@ Scrolling ‘down’ past the last suggestion should loop the user back to the f
 - Don't use default or reverse variants in the mega menu.
 - Don't use filters or refine search with the menu variant.
 - Don't use multiline search inputs.
-- Revised search shouldn't be by default.
-- Don't use with the refine search link if no filters are available.
+- Don't display the refine search link if no filters are available.
 
 ---
 

From fc0ccc07cf6c1a8072b5f71f0e957b2b8115f38b Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Tue, 28 May 2024 12:54:53 +1000
Subject: [PATCH 07/14] Update header documentation

Updated to reflect new image + CTA variant.
Waiting on storybook link for visual example
---
 .../design-system/5.components/header.md      | 63 +++++++++++--------
 1 file changed, 37 insertions(+), 26 deletions(-)

diff --git a/docs/content/design-system/5.components/header.md b/docs/content/design-system/5.components/header.md
index 4673c3a791..f5fa78d442 100644
--- a/docs/content/design-system/5.components/header.md
+++ b/docs/content/design-system/5.components/header.md
@@ -1,20 +1,21 @@
 ---
 title: Header
-description: The Header component introduces the purpose and content of a page.
+description: The Header introduces the purpose and content of a page.
 layout: page
 label: Core
 
 ---
 
 ## Usage
+The header informs the user what is on the page. The header must be used at the top of a page above the body content. 
 
-Use headers to inform the user of what is on the page. The header must be placed at the top of a page above the main body content and styled as an H1-level heading. 
-
-Headers include optional content such as introduction text, journey links, a call to action and an introduction banner.
-
-Headers should feature a primary message and/or call to action. They can be accompanied by supporting content such as images or corner graphics.
-
-The header can also support a campaign logo if required. This will display above the page title.
+It contains the page title styled as Heading 1 (H1). Optional content includes:
+- introduction text
+- journey links
+- a call to action button, text and journey link
+- image or corner graphics
+- supporting campaign logo
+- introduction banner.
 
 ::DocsExample
 ---
@@ -23,15 +24,15 @@ id: core-containers-header--default-journey-links
 ::
 
 ### When and how to use
-- Keep the header simple and concise.
-- Use clear calls to action that align with the message or task.
+- Keep the header simple. Trying to use all the available features (such as call to action and journey links) overwhelms and confuses users.
+- Use clear calls-to-action that align with the page’s message or task.
 - Only use images that add value to the content and support the message.
 - Include with featured links and buttons to help users perform key tasks.
 - Include an optional campaign logo.
 
 ### When and how not to use
 - Don’t use a mix of reverse and default page title and introduction text styling.
-- Don’t include the same links in the main and introduction banners.
+- Don’t include the same links in the main banner and introduction banner.
 - Don’t use with more than 6 journey links.
 - Don’t overload with content.
 
@@ -45,13 +46,11 @@ The header has 3 variants:
 - reverse
 - image.
 
-The default and reverse variants can be used with journey links or a call to action. These guide users to perform tasks or navigate to related information.
+The default and reverse variants can be used with journey links or a call to action. This guides users to perform tasks or navigate to important information. They can display corner graphics to allow for brand recognition and visual prominence. They can also display a supporting campaign logo, if required.
 
-They can display corner images to enhance brand recognition and visual prominence. They can also display a supporting campaign logo if required.
+The image variant can display a full-width or half-width background image.
 
-The image variant displays a full background image with reverse blocked text. It only supports a page title and introduction text. 
-
-All variants can be used with the introduction banner.
+The introduction banner can be used with all variants.
 
 ### Default
 
@@ -69,7 +68,7 @@ id: core-containers-header--default-call-to-action
 
 ### Reverse
 
-The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and its information.
+The reverse variant uses reversed blocked type for the title and introduction text. This adds visual prominence to the banner and information.
 
 ::DocsExample
 ---
@@ -85,9 +84,13 @@ id: core-containers-header--reverse-call-to-action
 
 ### Image
 
-An image can be added as a full background image. The title and introduction copy will always display as the reversed blocked type.
+An image can be added as a full or half-width background image. 
+
+The full-width background image supports a title and introduction copy. It will always display as reversed-blocked type.
+
+The half-width background image supports a title, introduction copy and an optional call to action. 
 
-Images should not be stretched or too low in resolution. They should also not be complex or include text.
+Images should not be stretched or have too low resolution. They should not be complex or include text.
 
 ::DocsExample
 ---
@@ -95,12 +98,18 @@ id: core-containers-header--image-reverse
 ---
 ::
 
+::DocsExample
+---
+id: 
+---
+::
+
 ### Introduction banner
 
 The introduction banner:
-- can be used to add content and journey links under the page title and introduction section in the main header banner
-- has an optional icon and journey links
-- should contain content relating to the content in the main header.
+- can be used to add a content and call-to-action under the header banner
+- has optional journey links or buttons
+- has an optional icon that sits above the heading (H2).
 
 ::DocsExample
 ---
@@ -112,9 +121,9 @@ id: core-containers-header--intro-with-links
 
 ## Interaction with other components
 
-When using a featured campaign banner with an image, the image can overlap the header, depending on the amount of content. By default, this will hide the header's bottom corner shape.
+When using a featured campaign banner with an image, the image can overlap the header depending on the amount of content. By default, this hides the header's bottom corner graphic.
 
-The bottom corner shape won't hide if an introduction banner is between the header and campaign banner.
+If an Introduction banner is used, the featured campaign banner will display below that, so the bottom corner graphic will display.
 
 ::DocsImageExample
 ---
@@ -134,7 +143,9 @@ Headers can be themed in 2 ways:
 
 It will also adopt theming from the button component when displaying the call to action.
 
-If you choose neutral button for your site, the header will display buttons in the neutral theme.
+If you choose a neutral button style for your site, the header will display neutral-themed buttons.
+
+### Site theme
 
 ::DocsThemeChooser
   ::DocsExample
@@ -156,7 +167,7 @@ If you choose neutral button for your site, the header will display buttons in t
 
 ### Neutral theme
 
-Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse blocked type. Neutral headers have predefined neutral colour values that must be used and cannot be edited or customised.
+Implemented at a site level, headers can have a neutral theme option. This option is only applicable to the reverse-blocked type. Neutral headers have predefined neutral colour values that must be used; they cannot be edited or customised.
 
 ::DocsExample
 ---

From 628d5055829ed08c4bee3dc543878648ff447ca7 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Tue, 28 May 2024 15:21:46 +1000
Subject: [PATCH 08/14] Update 1.getting-started documentation

Updated Figma file access and usage guidance
---
 .../design-system/2.design/1.getting-started.md        | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/docs/content/design-system/2.design/1.getting-started.md b/docs/content/design-system/2.design/1.getting-started.md
index 42685fb477..feac624c39 100644
--- a/docs/content/design-system/2.design/1.getting-started.md
+++ b/docs/content/design-system/2.design/1.getting-started.md
@@ -52,12 +52,10 @@ Only use the Figma file in conjunction with the Ripple 2.0 guidance about the co
 
     You will receive access to the Ripple Design System Figma file.
 
-4. **Add Ripple to your Figma account**
+4. **Access the Ripple file from your account**
 
-    Add the Ripple 2.0 Design System Figma file to your Figma account.
+    View the the Ripple 2.0 Design System Figma file from your Figma account.
 
-5. **Set up Asset Library**
+5. **Within the Figma file read through the “Getting Started” guidance page**
 
-    In your Figma account, go to the Getting Started page.
-
-    Follow these instructions to set up the Asset Library.
+    Follow the instructions to set up and use the Ripple Design System in your own design files.

From 1db822d034526d2c12c7ead7ed40c5542f7beabb Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Thu, 27 Jun 2024 11:49:55 +1000
Subject: [PATCH 09/14] Create header-status markdown file

New file created for Header Status as it is a new component being added to the system.
---
 .../design-system/5.components/header-status  | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 docs/content/design-system/5.components/header-status

diff --git a/docs/content/design-system/5.components/header-status b/docs/content/design-system/5.components/header-status
new file mode 100644
index 0000000000..cc74bf0db1
--- /dev/null
+++ b/docs/content/design-system/5.components/header-status
@@ -0,0 +1,54 @@
+---
+title: Header Status
+description: The Header status shows the user key information or the status relating to the content on the page.  
+layout: page
+label: Core
+
+---
+
+## Usage
+The Header status draws attention to key information or data relevant to the page. 
+
+The header status can display content like:
+- the progress toward completion of a set of actions (such as recommendations from a royal commission or inquiry) 
+- the status or closing date of a job listing or grant application 
+
+The status bar updates dynamically based on its data set. The status bar completeness value can go left-to-right or right-to-left depending on data requirements. 
+
+The Header status must be used at the top of a page within the header section.
+
+::DocsExample
+---
+id: core-containers-
+---
+::
+
+### When and how to use
+- Use to indicate the status of a project or timeline.
+- Use with a relevant page title, such as a job title.
+- Can be used with the optional second support label and content when relevant.
+- Use concise content and labels.
+
+### When and how not to use
+- Do not use on pages that don't have content related to the status data.
+- Do not use to indicate a step of a linear process such as a form.
+- Do not use with an [introduction banner](/design-system/components/header#introduction-banner).
+- Do not use in conjunction with a [Header](/design-system/components/header/).
+
+---
+
+## Theming
+
+Header status uses colour to add prominence to the status. It also adopts theming from the [button](/design-system/components/button/) component.
+
+If you choose the neutral button for your site, the header site search will display buttons in the neutral theme.
+
+::DocsThemeChooser
+  ::DocsExample
+  ---
+  id: core-containers-
+  ---
+  ::
+::
+
+To create your own theme see [theming guidance for designers](https://www.vic.gov.au) or [theming guidance for developers](https://www.vic.gov.au).

From 2744a1fc6904acdca9975b665e2b5bf6f62d8260 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Thu, 27 Jun 2024 11:54:14 +1000
Subject: [PATCH 10/14] Create header-status.md

Added .md to file name for correct file type
---
 .../5.components/{header-status => header-status.md}              | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename docs/content/design-system/5.components/{header-status => header-status.md} (100%)

diff --git a/docs/content/design-system/5.components/header-status b/docs/content/design-system/5.components/header-status.md
similarity index 100%
rename from docs/content/design-system/5.components/header-status
rename to docs/content/design-system/5.components/header-status.md

From 982bcc8558329f88027efaa7e15e9828a3a458f1 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Thu, 27 Jun 2024 12:02:45 +1000
Subject: [PATCH 11/14] Create quantity-input.md

Creation of quantity input documentation page.
---
 .../5.components/quantity-input.md            | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 docs/content/design-system/5.components/quantity-input.md

diff --git a/docs/content/design-system/5.components/quantity-input.md b/docs/content/design-system/5.components/quantity-input.md
new file mode 100644
index 0000000000..5c6993a253
--- /dev/null
+++ b/docs/content/design-system/5.components/quantity-input.md
@@ -0,0 +1,116 @@
+---
+title: Quantity input
+description: Allows users to input a number and increase or decrease the value with the increase and decrease controls.
+layout: page
+label: Core
+
+---
+
+## Usage
+Quantity input allows users to enter a numerical value via the keyboard or incrementally increase or decrease a value using plus and minus buttons.
+
+The Quantity input is normally used in forms. 
+
+The Quantity input is similar to the Input field, but is only used with numerical values. 
+
+::DocsExample
+---
+id: forms-
+---
+::
+
+### How this component works
+You must use a form label with a quantity input.
+
+You can use an quantity input with:
+
+- requirement label
+- hint text.
+
+#### Hint text
+
+Hint text can be used to tell the user what or how to successfully complete an input field. For example, hint text can include:
+
+- an overall description of the Quantity input
+- specific increase or decrease values 
+- minimum or maximum allowed quantities.
+- Only use hint text when it’s needed. Don’t repeat the label. Don’t use it to keep the layout consistent with other fields in the form.
+
+
+### When and how to use
+- Always use a label for input fields.
+- Use hint text to specify helpful information, such as minimum and maximum number values (e.g. ‘Minimum of # and maximum of #’).
+
+### When and how not to use
+- Never use an quantity input without a label.
+- Don’t disable copy and paste.
+- Don’t set a minimum or maximum input limit without explicitly saying this in the hint text.
+- Don’t write ambiguous error messages; explain how the user can resolve the error.
+
+---
+
+## Variants
+The Quantity input has 2 variants:
+- default, used on white backgrounds
+- reverse, used on neutral backgrounds.
+
+### Default
+
+::DocsExample
+---
+id: forms-
+---
+::
+
+### Reverse
+
+::DocsExample
+---
+id: forms-
+---
+::
+
+### Error
+All form inputs share error state styling.
+
+Always provide clear error messages for all potential errors so users will understand why their input or selection was not valid.
+
+When creating an error message for a quantity input, use the wording below.
+
+**Error: quantity exceeds limit**
+- Error message: ‘\[Quantity\] must be \[number\] or less'.
+- Example: 'Quantity must be 50 or less'.
+
+**Error: quantity is too low**
+- Error message: ‘\[Quantityt\] must be \[number\] or more'.
+- Example: 'Quantity must be 3 or less'.
+
+**Error: quantity not within range**
+- Error message: ‘\[Quantity\] must be between \[number\] and \[number\]'.
+- Example: 'Quantity must be between 4 and 20'.
+
+---
+
+## Theming
+Quantity input uses colour for:
+- interactive states
+- icons.
+
+A Quantity input in an active state adopts the same colour as the site’s focus state colour so the user’s experience of the Quantity input is consistent as it transitions from a focus to an active state.
+
+::DocsThemeChooser
+  ::DocsExample
+  ---
+  id: forms-
+  ---
+  ::
+::
+
+To create your own theme see [theming guidance for designers](/design-system/design/theming-guidance-for-designers) or [theming guidance for developers](/design-system/develop/theming).
+
+---
+
+## Rationale
+The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.
+
+This occurs across all form and input elements, for a consistent experience.

From 2f71b17bcec28c273c66d5cc73d0cbea49a0e763 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Thu, 27 Jun 2024 14:40:55 +1000
Subject: [PATCH 12/14] Create step-indicator.md

Added Step Indicator documentation to component list
---
 .../5.components/step-indicator.md            | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 docs/content/design-system/5.components/step-indicator.md

diff --git a/docs/content/design-system/5.components/step-indicator.md b/docs/content/design-system/5.components/step-indicator.md
new file mode 100644
index 0000000000..05eed829e1
--- /dev/null
+++ b/docs/content/design-system/5.components/step-indicator.md
@@ -0,0 +1,72 @@
+---
+title: Step Indicator
+description: The Step indicator provides visual feedback to show the user where they are in a process or task, guiding them through a stepped process.
+layout: page
+label: Core
+
+---
+
+## Usage
+The Step indicator shows the user where they are in a process or task.
+
+As sub-tasks are completed, the percentage of completeness progresses to 100%. 
+
+Individual steps are shown as:
+
+- incomplete - the task is available for the user to do
+- current - the task has been started
+- complete - the task has been completed.
+
+::DocsExample
+---
+id: 
+---
+::
+
+### How this component works
+
+#### Linear progression
+Steps in a multistep process progress from left to right. 
+
+If used for a task-based process, the user should be allowed to go back to the previous step to review or update their data submission.
+
+Labels for each step of the Step indicator should clearly explain what the user can do at each step. 
+
+#### Current step
+The current step keeps the user informed of where they are in the process or task. This helps give them a sense of control, knowing where they have been and what they still need to do.
+
+#### Validation
+Validation should be used to confirm that a previous step has been completed. If the user has not completed a task and cannot proceed to the next step, use a Form Alert to tell them why, and what they need to do. 
+
+#### Steps
+Steps use colour to display their status. The current step and completed steps, display using the site link colour. Any uncompleted steps use a neutral grey. The current step label displays in bold to add emphasis for the user.
+
+### When and how to use
+- Use to support a multi-step process or task.
+- Use with clear, concise step labels, including step numbers.
+- Use for a process with between 3 and 6 steps.
+
+### When and how not to use
+- Don’t use with long or complex labels.
+- Don’t use without the current step number and label.
+- Don’t use if content is not in sequential order. Consider bullets instead.
+- Don’t use with unrelated content.
+- Don’t use for a process with less than 3 or more than 6 steps. If more than 6 steps, consider simplifying the process or breaking it up into multiple tasks. 
+
+---
+
+## Theming
+Step indicator uses colour to:
+
+- show progress
+- highlight interactive states.
+
+::DocsThemeChooser
+  ::DocsExample
+  ---
+  id: 
+  ---
+  ::
+::
+
+To create your own theme see [theming guidance for designers](/design-system/design/theming-guidance-for-designers) or [theming guidance for developers](/design-system/develop/theming).

From 3e50b972fba0bc0490f39d8c7371b4cc151a34a2 Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Thu, 27 Jun 2024 14:44:53 +1000
Subject: [PATCH 13/14] Create status-indicator.md

Creation of status indicator markdown file for component list
---
 .../5.components/status-indicator.md          | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 docs/content/design-system/5.components/status-indicator.md

diff --git a/docs/content/design-system/5.components/status-indicator.md b/docs/content/design-system/5.components/status-indicator.md
new file mode 100644
index 0000000000..e72cddfbf1
--- /dev/null
+++ b/docs/content/design-system/5.components/status-indicator.md
@@ -0,0 +1,82 @@
+---
+title: Status Indicator
+description: Display the status of content or data set.  
+layout: page
+label: Core
+
+---
+
+## Usage
+The Status indicator shows a user the current status of an ongoing process. 
+
+It can be used for displaying information such as:
+
+- the completion status of a set of recommendations or project milestones to be implemented
+- the status or closing date of a job application or grant application.
+
+The Status indicator will update dynamically based on its dataset. The Status indicator can show progression from right to left or left to right, depending on data requirements.
+
+::DocsExample
+---
+id: 
+---
+::
+
+
+### When and how to use
+- Use with concise content and labels.
+- Use the complex variant for datasets with multiple statuses.
+
+### When and how not to use
+- Don’t use with long or complex labels.
+- Do not use to indicate the steps of a linear process such as a form.
+
+
+---
+
+## Variants
+The status indicator has two main variants:
+
+- default
+- complex.
+
+### Default
+The default variant should be used for simple datasets such as:
+
+- application status with the closing date or days remaining
+- recommendations or project milestones when there are only 2 statuse, such as complete or incomplete.
+
+::DocsExample
+---
+id: 
+---
+::
+
+### Complex
+The default variant should be used for complex datasets such as:
+
+- recommendations or project milestones when there are multiple categories, such as complete, incomplete, in progress and on hold.
+
+::DocsExample
+---
+id: 
+---
+::
+
+---
+
+## Theming
+The Status indicator uses colour to: 
+
+- add prominence to the status/es
+- display different dataset categories.
+
+::DocsThemeChooser
+  ::DocsExample
+  ---
+  id: 
+  ---
+  ::
+::
+
+To create your own theme see [theming guidance for designers](/design-system/design/theming-guidance-for-designers) or [theming guidance for developers](/design-system/develop/theming).

From 7a9558e8c95bbe69a43569f43ce654cdcb2d0c8c Mon Sep 17 00:00:00 2001
From: mel-coombs <melissa.coombs@dpc.vic.gov.au>
Date: Thu, 27 Jun 2024 14:48:32 +1000
Subject: [PATCH 14/14] Create results-bar.md

Creation of results bar documentation for component list
---
 .../design-system/5.components/results-bar.md | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)
 create mode 100644 docs/content/design-system/5.components/results-bar.md

diff --git a/docs/content/design-system/5.components/results-bar.md b/docs/content/design-system/5.components/results-bar.md
new file mode 100644
index 0000000000..7d9045dfdc
--- /dev/null
+++ b/docs/content/design-system/5.components/results-bar.md
@@ -0,0 +1,64 @@
+---
+title: Results bar
+description: Results bar displays the number of results in a list and allows a user to sort by their preferred option.
+layout: page
+label: Core
+
+---
+
+## Usage
+Use the Results bar to:
+
+- indicate the total number of results and how many per page are currently displayed 
+- allow the user to sort the results by their preferred option.
+
+The Results bar is made up of:
+
+- a results counter 
+- a sort options dropdown.
+
+The results counter value will update the when a search term or filter is changed or applied. 
+
+The sort dropdown allows the user to sort the results in the way that is most relevant to them. Sort options should be relevant to the content the user is searching. 
+
+::DocsExample
+---
+id: 
+---
+::
+
+
+### When and how to use
+- Use on a site search page.
+- Use to communicate the number of results displaying of the total number of results.
+
+### When and how not to use
+- Don’t use with sort options that are not relevant to the content.
+- Don’t use with content or components other than results listing.
+
+---
+
+## Theming
+Results bar uses colour for:
+
+- interactive states
+- icons.
+
+The sort dropdown in an active state will adopt the same colour as the website’s focus state colour. This means a user’s experience of a the dropdown remains consistent while it transitions from the focus to an active state.
+
+::DocsThemeChooser
+  ::DocsExample
+  ---
+  id: 
+  ---
+  ::
+::
+
+To create your own theme see [theming guidance for designers](/design-system/design/theming-guidance-for-designers) or [theming guidance for developers](/design-system/develop/theming).
+
+---
+
+## Rationale
+The active and focus states both use the site’s focus state colour. This creates a seamless user experience. If we used a different colour, keyboard users would have colour changes between focusing on and interacting with an input field. This could be jarring or confusing to users.
+
+This occurs across all form and input elements, for a consistent experience.