[Site refactor] Documentation update (#439)

primer · Oct 4, 2023 · c6ff540 · c6ff540
1 parent 6a7dc95
commit c6ff540
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 223 deletions.
diff --git a/apps/docs/content/components/CTABanner/index.mdx b/apps/docs/content/components/CTABanner/index.mdx
@@ -8,7 +8,7 @@ export default ComponentLayout
 
 ## Anatomy
 
-![An image showing the CTA banner anatomy with a heading, a description and a button group.](https://github.com/primer/brand/assets/912236/779c909d-21eb-42b8-b3dd-963e0113102c)
+![An image showing the CTA banner anatomy with a heading, a description and a button group.](https://github.com/primer/brand/assets/912236/702162e2-3db6-4d5a-be1e-3554ef80a8b6)
 
 - Heading: The main title of the CTA banner. It should be short and concise.
 - Description: Short text that extends the information provided by the heading.
@@ -26,7 +26,7 @@ The actions used in a CTA banner are normally the same as the ones used on the [
 <DoDontContainer>
   <Do>
     <img
-      src="https://github.com/primer/brand/assets/912236/952c6855-139b-42c1-a5df-ae3574c02f3c"
+      src="https://github.com/primer/brand/assets/912236/3a48d2ce-1680-43f9-ba70-525efc8508ca"
       alt=""
     />
     <Caption>
@@ -36,7 +36,7 @@ The actions used in a CTA banner are normally the same as the ones used on the [
   </Do>
   <Dont>
     <img
-      src="https://github.com/primer/brand/assets/912236/389a4458-a558-4f8f-9656-d1aa51c82b3e"
+      src="https://github.com/primer/brand/assets/912236/ea732a02-3084-4d52-988f-126c0d3f9c1e"
       alt=""
     />
     <Caption>
@@ -61,7 +61,7 @@ The CTA banner uses a solid background color by default. This is the recommended
 <DoDontContainer>
   <Do>
     <img
-      src="https://github.com/primer/brand/assets/912236/1a142793-0293-4fdd-8eca-a99c8325e340"
+      src="https://github.com/primer/brand/assets/912236/ad92b40a-8c60-4e5d-913f-acfb60ee0413"
       alt=""
     />
     <Caption>
@@ -70,7 +70,7 @@ The CTA banner uses a solid background color by default. This is the recommended
   </Do>
   <Dont>
     <img
-      src="https://github.com/primer/brand/assets/912236/4d49b984-7baa-4f9e-a1f6-d4214640a4f7"
+      src="https://github.com/primer/brand/assets/912236/1b6ddfb5-43ae-46cc-8bc9-220a6b9d5d52"
       alt=""
     />
     <Caption>
@@ -85,7 +85,7 @@ Avoid using noisy or textured images that will make the content hard to read. Ma
 <DoDontContainer>
   <Do>
     <img
-      src="https://github.com/primer/brand/assets/912236/758ba20a-15c8-43b7-ae80-4be3d97f5d10"
+      src="https://github.com/primer/brand/assets/912236/db46a0b4-5bf9-4024-8788-6227762510a9"
       alt=""
     />
     <Caption>
@@ -95,7 +95,7 @@ Avoid using noisy or textured images that will make the content hard to read. Ma
   </Do>
   <Dont>
     <img
-      src="https://github.com/primer/brand/assets/912236/85b6cce9-db22-4359-ba1e-db91a3761a6b"
+      src="https://github.com/primer/brand/assets/912236/dfc50baa-9b2a-4dc5-8412-20548cf2e7ed"
       alt=""
     />
     <Caption>
@@ -111,7 +111,7 @@ The CTA banner has a shadow around the component to give it a sense of depth and
 <DoDontContainer>
   <Do>
     <img
-      src="https://github.com/primer/brand/assets/912236/22ccf3b3-7bed-4997-9b28-4d0d298386ac"
+      src="https://github.com/primer/brand/assets/912236/798a3355-252c-4745-8692-267c9a16d45f"
       alt=""
     />
     <Caption>
@@ -122,7 +122,7 @@ The CTA banner has a shadow around the component to give it a sense of depth and
   </Do>
   <Dont>
     <img
-      src="https://github.com/primer/brand/assets/912236/a87c2851-41f4-41c5-810a-47b6270b1173"
+      src="https://github.com/primer/brand/assets/912236/336f8e27-44e9-48a5-b308-a9686aa03484"
       alt=""
     />
     <Caption>
@@ -140,7 +140,7 @@ The CTA banner can render a border around the component giving further separatio
 <DoDontContainer>
   <Do>
     <img
-      src="https://github.com/primer/brand/assets/912236/a50c6341-6794-4e94-84bb-5351aad58151"
+      src="https://github.com/primer/brand/assets/912236/583528ad-e3ab-4bf1-a34a-e0f9bf17d0a1"
       alt=""
     />
     <Caption>
@@ -149,7 +149,7 @@ The CTA banner can render a border around the component giving further separatio
   </Do>
   <Dont>
     <img
-      src="https://github.com/primer/brand/assets/912236/16d47d54-6d42-495b-975e-286cf3c73660"
+      src="https://github.com/primer/brand/assets/912236/845ee118-3575-4db8-b7ea-1ac248678005"
       alt=""
     />
     <Caption>

diff --git a/apps/docs/content/components/CTAForm/index.mdx b/apps/docs/content/components/CTAForm/index.mdx
@@ -10,9 +10,9 @@ export default ComponentLayout
 
 ![An image displaying a the CTA form anatomy, with a label on top of an input form, followed by a CTA button and optional checkbox underneath the input.](https://github.com/primer/brand/assets/131988618/2c86dd18-f3b0-41e3-a0d3-cca004ea37b1)
 
-- Label: Short text that describes the required input form. 
+- Label: Short text that describes the required input form.
 - Text input: Single-line text field
-- Action: Call-to-action button that corresponds after completing the input form. 
+- Action: Call-to-action button that corresponds after completing the input form.
 - Checkbox: An optional checkbox to request additional behavior.
 
 ## Usage
@@ -25,34 +25,40 @@ By adopting the same guidelines as the respective [text input](/components/TextI
 
 We recommend the CTA form over the [CTA banner](/components/CTABanner) when the main action for a user to take is to submit a form (e.g subscribe to a newsletter) vs taking actions (sign in or bring the user to a pricing page).
 
-<DoDontContainer>
+<DoDontContainer stacked>
   <Do>
-<img src="https://github.com/primer/brand/assets/131988618/561b62c9-c328-4c7e-98e5-18e5a5d7ad42" />
-    <Caption>Place the CTA form near the end of the page to conclude the user journey and encourage users to take action.</Caption>
+    <img src="https://github.com/primer/brand/assets/131988618/561b62c9-c328-4c7e-98e5-18e5a5d7ad42" />
+    <Caption>
+      Place the CTA form near the end of the page to conclude the user journey
+      and encourage users to take action.
+    </Caption>
   </Do>
   <Dont>
-    <img src="https://github.com/primer/brand/assets/131988618/0cb06dc0-b885-4b4d-a997-cd42da72f798" />
+    <img src="https://github.com/primer/brand/assets/912236/00c775f9-7a6e-4a2f-b40a-09f72c0498f1" />
     <Caption>
-      Don't place the CTA Form early on in the user journey. Use the Hero instead for early on.
+      Don't place the CTA Form early on in the user journey. Use the Hero
+      instead for early on.
     </Caption>
   </Dont>
 </DoDontContainer>
 
 ### Setting Context
 
-Keep the CTA Form simple and intuitive to minimize friction and encourage user engagement. Ensure there is enough context surrounding the component. Utilize the label as a description of the form input. 
+Keep the CTA Form simple and intuitive to minimize friction and encourage user engagement. Ensure there is enough context surrounding the component. Utilize the label as a description of the form input.
 
-<DoDontContainer>
+<DoDontContainer stacked>
   <Do>
     <img src="https://github.com/primer/brand/assets/131988618/15cc3be6-89cb-4b63-ab03-9236693f66c3" />
     <Caption>
-      Include context in areas surrounding the CTA Form to encourage user engagement. 
+      Include context in areas surrounding the CTA Form to encourage user
+      engagement.
     </Caption>
   </Do>
   <Dont>
-    <img src="https://github.com/primer/brand/assets/131988618/2333fa03-4bd3-488d-ae41-81e3511259ca" />
+    <img src="https://github.com/primer/brand/assets/912236/e1e342d8-36fb-4237-ba96-a216fbfd6922" />
     <Caption>
-        Don't use the CTA Form without context. The label should be used to describe the input, not to provide context.
+      Don't use the CTA Form without context. The label should be used to
+      describe the input, not to provide context.
     </Caption>
   </Dont>
 </DoDontContainer>
@@ -61,11 +67,12 @@ Keep the CTA Form simple and intuitive to minimize friction and encourage user e
 
 When implementing CTA form, it's important to consider the length of the input field in order to maintain consistency and enhance user familiarity with the interface. Keeping the string length (width) of the component relative to the expected input is a recommended practice. Pair the component with additional information or context instead of spanning in wide viewports.
 
-<DoDontContainer>
+<DoDontContainer stacked>
   <Do>
     <img src="https://github.com/primer/brand/assets/131988618/0bd93f12-ef38-4fc3-9dd5-ce685aa7d2bd" />
     <Caption>
-      Keep the string length (width) of the component relative to the expected input. 
+      Keep the string length (width) of the component relative to the expected
+      input.
     </Caption>
   </Do>
   <Dont>
@@ -78,28 +85,27 @@ When implementing CTA form, it's important to consider the length of the input f
 
 ### Checkbox
 
-Use the checkbox property in the CTA form to prompt additional user behavior or seek acknowledgment– examples include to gather consent, confirm agreement to terms, or request optional actions. 
+Use the checkbox property in the CTA form to prompt additional user behavior or seek acknowledgment– examples include to gather consent, confirm agreement to terms, or request optional actions.
 
 It is crucial to provide a clear description of the checkbox's purpose and hyperlink to relevant resources. When using the checkbox, completion of the checkbox must be a requirement (not optional) to proceed with the CTA.
 
 <DoDontContainer>
   <Do>
     <img src="https://github.com/primer/brand/assets/131988618/f960b448-99e1-4703-a4a7-ea1441f6c72a" />
     <Caption>
-        Use short and concise text for the checkbox and inline links to relevant resources.
+      Use short and concise text for the checkbox and inline links to relevant
+      resources.
     </Caption>
   </Do>
   <Dont>
     <img src="https://github.com/primer/brand/assets/131988618/52e87926-c18c-4748-851e-41fd1e86f5d8" />
-    <Caption>
-        Don't use lengthy text or unstlyed links.
-    </Caption>
+    <Caption>Don't use lengthy text or unstlyed links.</Caption>
   </Dont>
 </DoDontContainer>
 
 ## Related components
 
 - [Button](/components/Button): To display a button that preforms an action.
 - [Text input](/components/TextInput): To create an input form for single-line text field.
-- [Checkbox](/components/Checkbox): To select options or acknowledge information. 
+- [Checkbox](/components/Checkbox): To select options or acknowledge information.
 - [CTA Banner](/components/CTABanner): To draw attention to or create urgency around a user action.
diff --git a/apps/docs/content/components/FAQ/index.mdx b/apps/docs/content/components/FAQ/index.mdx
@@ -8,11 +8,11 @@ export default ComponentLayout
 
 ## Anatomy
 
-![The FAQ component has a heading, optional subheading, and a list of questions that are interactive to expand and display answers](https://github.com/primer/brand/assets/912236/b2fa1bb7-938c-42ed-a549-fdc9f2759184)
+![The FAQ component has a heading, optional subheading, and a list of questions that are interactive to expand and display answers](https://github.com/primer/brand/assets/912236/cfc22774-7348-4e2b-9887-2157e1a17e16)
 
 - Heading: The main title of the FAQ.
 - Subheading: An optional short description that extends the information provided by the heading and helps group the items in the list.
-- Question: The question being answered. 
+- Question: The question being answered.
 - Answer: The answer to the question.
 
 ## Usage
@@ -26,7 +26,7 @@ For answers that need to provide a list of tasks, we recommend using an [ordered
 <DoDontContainer stacked>
   <Do>
     <img
-      src="https://github.com/primer/brand/assets/912236/824ebdee-4cc0-425f-8521-2c4e7b06491f"
+      src="https://github.com/primer/brand/assets/912236/5566161b-439b-4e13-b41c-188723b0bae6"
       alt=""
     />
     <Caption>
@@ -36,7 +36,7 @@ For answers that need to provide a list of tasks, we recommend using an [ordered
   </Do>
   <Dont>
     <img
-      src="https://github.com/primer/brand/assets/912236/37ca02ce-7eef-47bf-aac0-f24453dff5be"
+      src="https://github.com/primer/brand/assets/912236/a42230be-ee4b-4905-885b-dab98f4889c9"
       alt=""
     />
     <Caption>
@@ -46,24 +46,26 @@ For answers that need to provide a list of tasks, we recommend using an [ordered
   </Dont>
 </DoDontContainer>
 
-When using long lists of questions and answers, consider using subheadings to group the items into categories and make it easier for the user to scan the list.
+## FAQ group
+
+When using long lists of questions and answers, consider using the FAQ group to organize items into content-related categories to make it easier for the user to scan the list.
 
 <DoDontContainer stacked>
   <Do>
     <img
-      src="https://github.com/primer/brand/assets/912236/e38b0b06-24cd-4d45-8939-1ad31bb62e58"
+      src="https://github.com/primer/brand/assets/912236/a659524d-4574-4880-8f00-c6846438492e"
       alt=""
     />
-    <Caption>Use the subheading to group the questions and answers.</Caption>
+    <Caption>Use the FAQ group for related questions and answers.</Caption>
   </Do>
   <Dont>
     <img
-      src="https://github.com/primer/brand/assets/912236/b47441b5-98c3-4f24-b987-e550ddfbae31"
+      src="https://github.com/primer/brand/assets/912236/315a9a4e-95de-4dc5-9129-ff31108d5dfd"
       alt=""
     />
     <Caption>
-      Don't use long lists of questions and answers. We recommend using
-      subheadings to group them and to help the user scan the list.
+      Don't use long lists of questions and answers. We recommend using FAQ
+      groups to group them and to help the user scan the list.
     </Caption>
   </Dont>
 </DoDontContainer>