Merge pull request #231 from GovAlta/alpha

Production Release - September 10/2024

src/components/support-info/SupportInfo.tsx

@@ -1,21 +1,22 @@
 import { GoACallout } from "@abgov/react-components";
 import "./SupportInfo.css";
 
-export const SupportInfo = (props:{hidden?: boolean}) => {
-  if(props.hidden){
+export const SupportInfo = (props: { hidden?: boolean }) => {
+  if (props.hidden) {
     return null;
   }
   return (
     <div className="support-info">
       <GoACallout
         type="information"
-        heading="Need help? Join us in Drop in hours"
+        heading="Need help building a government service?"
       >
+        Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes
+        to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
+        <br></br>
         <a href="https://outlook.office365.com/book/[email protected]/" target="_blank">
-          Book time with us in drop in hours
+          Book time in drop in hours
         </a>{" "}
-        Get feedback on usage of the design system, propose new ideas or components or changes 
-        to existing components, ask any questions, and give feedback to the design system.
       </GoACallout>
     </div>
   );

src/routes/components/Components.tsx

@@ -2,7 +2,6 @@ import { GoABlock, GoADropdown, GoADropdownItem, GoASideMenu } from "@abgov/reac
 import { useEffect, useState } from "react";
 import { Link, Outlet } from "react-router-dom";
 import { LanguageContext } from "@components/sandbox";
-import { getCssVarValue } from "../../utils/styling";
 import { SupportInfo } from "@components/support-info/SupportInfo.tsx";
 
 export function Components() {
@@ -30,7 +29,6 @@ export function Components() {
             </GoADropdown>
           </GoABlock>
 
-
           <GoASideMenu>
             <Link to="">All</Link>
             <Link to="accordion">Accordion</Link>
@@ -76,29 +74,8 @@ export function Components() {
 
         <main className="main">
           <Outlet />
-
           <SupportInfo />
-
-          <div style={{ marginTop: getCssVarValue("--goa-space-2xl") }}>
-            <h2>Help improve this component</h2>
-            <p>To help make sure that this page is useful, relevant, and up to date, you can:</p>
-
-            <ul style={{ marginLeft: "1.875rem" }}>
-              <li>
-                <a
-                  href="https://github.com/GovAlta/ui-components/issues/new/choose"
-                  target="_blank">
-                  Propose a change or report a bug on Github
-                </a>
-                <span> - Read more about </span>
-                <a href="/support/contribute" target="_blank">
-                  our contribution process
-                </a>
-              </li>
-            </ul>
-          </div>
         </main>
-
       </section>
     </LanguageContext.Provider>
   );

src/routes/components/Icons.tsx

@@ -43,7 +43,7 @@ export default function IconsPage() {
       type: "number",
       name: "opacity",
       value: 1,
-    },    
+    },
     {
       label: "Fill Color",
       type: "string",
@@ -61,7 +61,7 @@ export default function IconsPage() {
       type: "string",
       name: "title",
       value: "",
-    },    
+    },
     {
       label: "ARIA Label",
       type: "string",
@@ -142,12 +142,12 @@ export default function IconsPage() {
       type: "string",
       lang: "angular",
       description: "Sets the data-testid attribute. Used with ByTestId queries in tests.",
-    },    
+    },
   ];
 
   function onSandboxChange(iconsBindings: ComponentBinding[], props: Record<string, unknown>) {
     setIconsBindings(iconsBindings);
-    setIconsProps(props as { type: GoAIconType;[key: string]: unknown });
+    setIconsProps(props as { type: GoAIconType; [key: string]: unknown });
   }
 
   return (
@@ -165,11 +165,12 @@ export default function IconsPage() {
       />
 
       <ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
-
         <GoATabs>
           <GoATab heading="Code examples">
             {/*Icons Sandbox*/}
-            <h2 id="component" style={{display: "none"}}>Component</h2>
+            <h2 id="component" style={{ display: "none" }}>
+              Component
+            </h2>
             <Sandbox properties={iconsBindings} onChange={onSandboxChange}>
               <GoAIcon {...iconsProps} />
             </Sandbox>
@@ -178,10 +179,12 @@ export default function IconsPage() {
             <ComponentProperties properties={componentProperties} />
 
             {/*Icons example*/}
-            <h2 id="component-examples" className="hidden" aria-hidden="true">Examples</h2>
+            <h2 id="component-examples" className="hidden" aria-hidden="true">
+              Examples
+            </h2>
 
             <h3 id="component-example-alert-messaging">Alert and messaging</h3>
-            <GoAGrid minChildWidth="230px" gap="l">
+            <GoAGrid minChildWidth="230px" gap="l" mt="m">
               <IconSnippet type={"information-circle"} />
               <IconSnippet type={"warning"} />
               <IconSnippet type={"add-circle"} />
@@ -193,15 +196,15 @@ export default function IconsPage() {
             </GoAGrid>
 
             <h3 id="component-example-basic">Basic</h3>
-            <GoAGrid minChildWidth="230px" gap="l">
+            <GoAGrid minChildWidth="230px" gap="l" mt="m">
               <IconSnippet type={"close"} />
               <IconSnippet type={"checkmark"} />
               <IconSnippet type={"add"} />
               <IconSnippet type={"remove"} />
             </GoAGrid>
 
             <h3 id="component-example-direction">Direction</h3>
-            <GoAGrid minChildWidth={"230px"} gap={"l"}>
+            <GoAGrid minChildWidth={"230px"} gap={"l"} mt="m">
               <IconSnippet type={"chevron-down"} />
               <IconSnippet type={"chevron-up"} />
               <IconSnippet type={"chevron-back"} />
@@ -217,7 +220,7 @@ export default function IconsPage() {
             </GoAGrid>
 
             <h3 id="component-example-interaction">Interactions</h3>
-            <GoAGrid minChildWidth={"230px"} gap={"l"}>
+            <GoAGrid minChildWidth={"230px"} gap={"l"} mt="m">
               <IconSnippet type={"menu"} />
               <IconSnippet type={"reload"} />
               <IconSnippet type={"search"} />
@@ -239,7 +242,7 @@ export default function IconsPage() {
             </GoAGrid>
 
             <h3 id="component-example-accounts">Accounts</h3>
-            <GoAGrid minChildWidth={"230px"} gap={"l"}>
+            <GoAGrid minChildWidth={"230px"} gap={"l"} mt="m">
               <IconSnippet type={"person-circle"} />
               <IconSnippet type={"settings"} />
               <IconSnippet type={"mail"} />

src/routes/home.css

@@ -1,4 +1 @@
-.home__using-design-system,
-.home__using-design-system > p {
-  font: var(--goa-typography-body-l);
-}
+

src/routes/home.tsx

@@ -6,6 +6,7 @@ import {
   GoAHeroBanner,
   GoAHeroBannerActions,
   GoAPageBlock,
+  GoASpacer,
 } from "@abgov/react-components";
 import "./home.css";
 import { MAX_CONTENT_WIDTH } from "@routes/root";
@@ -17,11 +18,11 @@ const HomePage = () => {
   return (
     <>
       <GoAHeroBanner
-        heading="Design your service using reusable patterns, components, tokens, and content guidelines."
+        heading="Design your government service using reusable patterns, components, design tokens, and content guidelines."
         maxContentWidth={MAX_CONTENT_WIDTH}
       >
-        Use these resources to build your service. Learn from the research and experience of other 
-        service teams and avoid repeating work that’s already been done.
+        Resources for Government of Alberta product teams to build better services. Learn from the research and experience of other 
+        product teams and avoid repeating work that’s already been done.
         <GoAHeroBannerActions>
           <GoAButtonGroup alignment="start">
             <GoAButton onClick={() => {
@@ -69,24 +70,25 @@ const HomePage = () => {
         </GoAGrid>
 
         <GoADivider mb="2xl"></GoADivider>
-        <h2>Using the design system in your service</h2>
-        <div className="home__using-design-system">
+        <h2>How to use the design system in your service</h2>
+        <div className="max-width-72ch">
           <ol>
-            <li>Start with the design system and validate your design through user testing.</li>
+            <li>Start by using the design system resources and validate your product through user testing.</li>
             <li>
-              If usability issues arise or a problem cannot be resolved within the system, then
-              consider a custom solution or extending a component.
+            If a component or pattern doesn’t exist in production or doesn’t meet the needs of your users,
+            {' '}<Link to="/support">contact the design system team</Link>. We’ll discuss the issue to understand it better and decide on the next steps together.
             </li>
           </ol>
           <p>
             <strong>Remember:</strong> Avoid custom solutions without a genuine user need. Leverage the existing resources from the design system first to prevent
-            unnecessary rework and iterate on your service faster.
+            unnecessary work and iterate on your service faster.
           </p>
           <Link to="/get-started">
             Learn more about starting with the design system
           </Link>
           <SupportInfo />
         </div>
+        <GoASpacer vSpacing="xl"></GoASpacer>
       </GoAPageBlock>
     </>
   );

src/routes/root.tsx

@@ -40,7 +40,7 @@ export default function Root() {
       <GoAOneColumnLayout>
         <section className="header" slot="header">
           <GoAMicrositeHeader
-            type={"alpha"}
+            type={"live"}
             feedbackUrl="https://forms.microsoft.com/r/8Zp7zSJS6W"
             maxContentWidth={MAX_CONTENT_WIDTH}
           />

src/routes/support/Contribute.tsx

@@ -6,8 +6,8 @@ export default function ContributePage() {
     <ComponentContent>
       <h1>Contribute</h1>
       <h3 className="introduction">
-        Your contributions make an impact</h3>
-       <p>The design system is a shared resource for internal product teams to use and contribute to.
+        Contributions from product teams help improve the system.</h3>
+       <p>The design system is a shared resource for Government of Alberta product teams to use and contribute to.
         We encourage everyone, regardless of their role, to enhance the quality of the design
         system.</p>
 

src/routes/support/DropInHours.tsx

@@ -14,12 +14,11 @@ export default function DropInHoursPage() {
         <p>Every Tuesday and Friday from 1:00pm - 3:00pm MST</p>
         <h2>Purpose</h2>
         <p>
-          For designers and developers seeking feedback on their usage of design system, content, styles, and anything else. This is also a great time to propose new components or changes to existing components, ask any questions, and give feedback to the design system.
+          For designers and developers on Government of Alberta product teams seeking feedback on their usage of design system, content, styles, and anything else. This is also a great time to propose new components or changes to existing components, ask any questions, and give feedback to the design system.
         </p>
         <h2>Audience</h2>
         <p>
-          Primarily designers, though developers and any other members of product teams are welcome
-          as well.
+          Drop in hours are for intended for designers and developers from all Government of Alberta product teams.
         </p>
 
       </div>

src/routes/support/SupportOverview.tsx

@@ -1,4 +1,9 @@
-import {GoABlock} from "@abgov/react-components";
+import {
+  GoABlock, 
+  GoASpacer,
+  GoADivider,
+  GoABadge,
+} from "@abgov/react-components";
 import { Link } from "react-router-dom";
 import { ComponentContent } from "@components/component-content/ComponentContent.tsx";
 
@@ -7,13 +12,14 @@ export default function SupportOverviewPage() {
     <ComponentContent>
       <h1>Support</h1>
       <h3>
-        Get support from the design system team using the component library, design and usage guidelines, design system best practices, and accessibility.
+        Get support building government services. The design system team can help Government of Alberta product teams use the components, patterns, documentation, and more.
       </h3>
 
       <div className="max-width-72ch">
         <h2>
           Drop in hours
         </h2>
+        <GoABadge type="information" content="For Government of Alberta product teams"></GoABadge>
         <h3>(every Tuesday and Friday 1:00 - 3:00pm MST)</h3>
         <p>
           For designers and developers to get feedback on their usage of the design system, propose new components or changes to existing components, ask any questions, and give feedback to the design system.
@@ -23,49 +29,39 @@ export default function SupportOverviewPage() {
           <a
             href="https://outlook.office365.com/owa/calendar/[email protected]/bookings/"
             target="_blank">
-            Book a time
+            Book a time (GoA email required)
           </a>
         </GoABlock>
         <h2>Submit an issue</h2>
         <h3>Report a bug</h3>
+        <GoABadge type="information" content="For Government of Alberta product teams" mb="m"></GoABadge>
         <p>
           If an issue or inconsistency is encountered within the design system, please use GitHub to
           report a bug. Doing so notifies the design system team of a problem requiring immediate
           attention and resolution. Ensure that the bug report is fully filled out; this ensures
           that the team has all the necessary information to investigate, prioritize, and fix the
-          issue effectively. <br />
+          issue effectively.<br />
           <a href="https://github.com/GovAlta/ui-components/issues/new/choose" target="_blank">
-            Report a bug
+            Report a bug on Github
           </a>
         </p>
-
+        <GoASpacer vSpacing="2xs"></GoASpacer>
         <h3>Request a feature</h3>
+        <GoABadge type="information" content="For Government of Alberta product teams" mb="m"></GoABadge>
         <p>
           Use GitHub to submit well-defined requests for new features. Submitting a feature request
           implies that the contribution process has been followed, providing the design system team
           with actionable items to evaluate and prioritize.
-          <GoABlock gap="m">
-            <Link to="/support/contribute">Learn more about about the contribution process</Link>
+          <GoABlock gap="l">
             <a href="https://github.com/GovAlta/ui-components/issues/new/choose" target="_blank">
-              Request a feature
+              Request a feature on Github
             </a>
+            <Link to="/support/contribute">View our contribution process</Link>
           </GoABlock>
         </p>
-
-        <h3>Take part in a Discussion on Github</h3>
-        <p>
-          “Discussions” are a place for sharing research, idea exploration, or open-ended
-          conversations. You should start a discussion when the topic you're bringing up is more
-          about sharing information, having a conversation, or asking a question. <br />
-          <GoABlock mb="3xl">
-            <a
-              href="https://github.com/GovAlta/ui-components/discussions"
-              target="_blank">
-              Start a discussion
-            </a>
-          </GoABlock>
-        </p>
-
+
+        <GoADivider mt="2xl" mb="2xl"></GoADivider>        
+
         <h2>Design system team</h2>
         <div className="ds-team-title">Product Owner</div>
         <div className="ds-team">

src/routes/support/support.css

@@ -5,8 +5,8 @@
 
 .ds-team-title {
   font: var(--goa-typography-heading-m);
-  margin-bottom: var(--goa-space-2xs);
-  margin-top: 1rem;
+  margin-bottom: var(--goa-space-xs);
+  margin-top: var(--goa-space-xl);
 }
 
 .share-ideas {