docs: highlight component as "new" (#1162)

Author: alexanbj

apps/docs/app/routes/_docs.tsx

@@ -14,7 +14,7 @@ import { defineQuery } from 'groq';
 
 const COMPONENTS_NAVIGATION_QUERY = defineQuery(
   // make sure the slug is always a string so we don't have add fallback value in code just to make TypeScript happy
-  `*[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)`,
+  `*[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, ''), highlightAsNew} | order(name asc)`,
 );
 
 // This is the shared layout for all the Grunnmuren docs pages that are "public", ie not the Sanity studio

apps/docs/app/routes/_docs/komponenter/$slug.tsx

@@ -1,14 +1,16 @@
 import { sanityFetch } from '@/lib/sanity';
 import { AnchorHeading } from '@/ui/anchor-heading';
-import { Content } from '@/ui/content';
 import { PropsTable } from '@/ui/props-table';
 import { ResourceLink, ResourceLinks } from '@/ui/resource-links';
+import { SanityContent } from '@/ui/sanity-content';
+import { Child } from '@obosbbl/grunnmuren-icons-react';
+import { Alertbox, Content } from '@obosbbl/grunnmuren-react';
 import { createFileRoute, notFound } from '@tanstack/react-router';
 import type * as props from 'docgen';
 import { defineQuery } from 'groq';
 
 const COMPONENT_QUERY = defineQuery(
-  `*[_type == "component" && slug.current == $slug][0]{ "content": content[] {..., _type == "image-with-caption" => {...,asset->}}, "name": coalesce(name, ''), propsComponents, resourceLinks }`,
+  `*[_type == "component" && slug.current == $slug][0]{ "content": content[] {..., _type == "image-with-caption" => {...,asset->}}, "name": coalesce(name, ''), propsComponents, resourceLinks, highlightAsNew }`,
 );
 
 export const Route = createFileRoute('/_docs/komponenter/$slug')({
@@ -46,7 +48,24 @@ function Page() {
         {ghLink && <ResourceLink type="github" href={ghLink} />}
       </ResourceLinks>
 
-      <Content className="mb-12" content={data.content ?? []} />
+      {data.highlightAsNew && (
+        // biome-ignore lint/a11y/useValidAriaRole: <explanation>
+        <Alertbox
+          variant="success"
+          className="mb-12 w-fit"
+          icon={Child}
+          role="none"
+        >
+          <Content>
+            Denne komponenten er ny eller har nylig fått større endringer. Ta
+            den i bruk og kom gjerne med innspill til oss på{' '}
+            <a href="https://obos.slack.com/archives/C03FR05FJ9F">Slack</a>{' '}
+            hvordan du synes den fungerer.
+          </Content>
+        </Alertbox>
+      )}
+
+      <SanityContent className="mb-12" content={data.content ?? []} />
 
       {data.propsComponents?.length && (
         <AnchorHeading className="heading-m" level={2} id="props">

apps/docs/app/routes/_docs/komponenter/index.tsx

@@ -1,11 +1,11 @@
 import { sanityFetch } from '@/lib/sanity';
-import { Card, CardLink, Heading } from '@obosbbl/grunnmuren-react';
+import { Badge, Card, CardLink, Heading } from '@obosbbl/grunnmuren-react';
 import { createFileRoute } from '@tanstack/react-router';
 import { defineQuery } from 'groq';
 
 const COMPONENTS_INDEX_QUERY = defineQuery(
   // make sure the slug is always a string so we don't have add fallback value in code just to make TypeScript happy
-  `*[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)`,
+  `*[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, ''), highlightAsNew} | order(name asc)`,
 );
 
 export const Route = createFileRoute('/_docs/komponenter/')({
@@ -33,6 +33,12 @@ function Page() {
               <CardLink href={`/komponenter/${component.slug}`}>
                 {component.name}
               </CardLink>
+              {/* TODO: Figure out better way to highlight this */}
+              {component.highlightAsNew && (
+                <Badge className="ml-4" color="mint" size="small">
+                  Ny
+                </Badge>
+              )}
             </Heading>
           </Card>
         ))}

apps/docs/app/ui/main-nav.tsx

@@ -1,21 +1,27 @@
 import { ChevronDown } from '@obosbbl/grunnmuren-icons-react';
-import { Heading } from '@obosbbl/grunnmuren-react';
+import { Badge, Heading } from '@obosbbl/grunnmuren-react';
 import { getRouteApi } from '@tanstack/react-router';
 import { Link } from '@tanstack/react-router';
 import { Button, Disclosure, DisclosurePanel } from 'react-aria-components';
 
 type SubNavItemProps = {
   to: string;
   title: string;
+  highlightAsNew?: boolean | null;
 };
 
-const SubNavItem = ({ to, title }: SubNavItemProps) => (
+const SubNavItem = ({ to, title, highlightAsNew }: SubNavItemProps) => (
   <li>
     <Link
       to={to}
-      className="description inline-flex items-center gap-2 rounded-md px-3 py-2 focus-visible:outline-focus focus-visible:outline-focus-inset data-[status=active]:font-bold data-[status=active]:no-underline"
+      className="description flex items-center justify-between gap-2 rounded-md px-3 py-2 focus-visible:outline-focus focus-visible:outline-focus-inset data-[status=active]:font-bold data-[status=active]:no-underline"
     >
       {title}
+      {highlightAsNew && (
+        <Badge className="no-underline" color="mint" size="small">
+          Ny
+        </Badge>
+      )}
     </Link>
   </li>
 );
@@ -71,6 +77,7 @@ export const MainNav = () => {
   const componentsNavLinks = data.map((component) => ({
     to: `/komponenter/${component.slug}`,
     title: component.name as string,
+    highlightAsNew: component.highlightAsNew,
   }));
 
   return (

apps/docs/app/ui/content.tsx renamed to apps/docs/app/ui/sanity-content.tsx

@@ -7,14 +7,14 @@ import { ComponentPreview } from './component-preview';
 import { ImageWithCaption } from './image-with-caption';
 import { Table, TableBody, TableCell, TableHead, TableRow } from './table';
 
-export type ContentProps = Pick<
+export type SanityContentProps = Pick<
   NonNullable<COMPONENT_QUERYResult>,
   'content'
 > & {
   className?: string;
 };
 
-export function Content({ content, className }: ContentProps) {
+export function SanityContent({ content, className }: ContentProps) {
   return (
     <div className={cx('prose', className)}>
       <PortableText

apps/docs/sanity.types.ts

@@ -194,6 +194,7 @@ export type Component = {
   slug?: Slug;
   content?: Content;
   propsComponents?: Array<string>;
+  highlightAsNew?: boolean;
   resourceLinks?: Array<{
     linkType?: 'figma' | 'github';
     url?: string;
@@ -253,16 +254,17 @@ export type AllSanitySchemaTypes =
 export declare const internalGroqTypeReferenceTo: unique symbol;
 // Source: ./app/routes/_docs.tsx
 // Variable: COMPONENTS_NAVIGATION_QUERY
-// Query: *[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)
+// Query: *[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, ''), highlightAsNew} | order(name asc)
 export type COMPONENTS_NAVIGATION_QUERYResult = Array<{
   _id: string;
   name: string | null;
   slug: string | '';
+  highlightAsNew: boolean | null;
 }>;
 
 // Source: ./app/routes/_docs/komponenter/$slug.tsx
 // Variable: COMPONENT_QUERY
-// Query: *[_type == "component" && slug.current == $slug][0]{ "content": content[] {..., _type == "image-with-caption" => {...,asset->}}, "name": coalesce(name, ''), propsComponents, resourceLinks }
+// Query: *[_type == "component" && slug.current == $slug][0]{ "content": content[] {..., _type == "image-with-caption" => {...,asset->}}, "name": coalesce(name, ''), propsComponents, resourceLinks, highlightAsNew }
 export type COMPONENT_QUERYResult = {
   content: Array<
     | {
@@ -343,24 +345,26 @@ export type COMPONENT_QUERYResult = {
     _type: 'resourceLink';
     _key: string;
   }> | null;
+  highlightAsNew: boolean | null;
 } | null;
 
 // Source: ./app/routes/_docs/komponenter/index.tsx
 // Variable: COMPONENTS_INDEX_QUERY
-// Query: *[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)
+// Query: *[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, ''), highlightAsNew} | order(name asc)
 export type COMPONENTS_INDEX_QUERYResult = Array<{
   _id: string;
   name: string | null;
   slug: string | '';
+  highlightAsNew: boolean | null;
 }>;
 
 // Query TypeMap
 import '@sanity/client';
 declare module '@sanity/client' {
   interface SanityQueries {
-    "*[_type == \"component\"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)":
+    "*[_type == \"component\"]{ _id, name, 'slug': coalesce(slug.current, ''), highlightAsNew} | order(name asc)":
       | COMPONENTS_NAVIGATION_QUERYResult
       | COMPONENTS_INDEX_QUERYResult;
-    '*[_type == "component" && slug.current == $slug][0]{ "content": content[] {..., _type == "image-with-caption" => {...,asset->}}, "name": coalesce(name, \'\'), propsComponents, resourceLinks }': COMPONENT_QUERYResult;
+    '*[_type == "component" && slug.current == $slug][0]{ "content": content[] {..., _type == "image-with-caption" => {...,asset->}}, "name": coalesce(name, \'\'), propsComponents, resourceLinks, highlightAsNew }': COMPONENT_QUERYResult;
   }
 }

apps/docs/schema.json

@@ -1104,6 +1104,13 @@
         },
         "optional": true
       },
+      "highlightAsNew": {
+        "type": "objectAttribute",
+        "value": {
+          "type": "boolean"
+        },
+        "optional": true
+      },
       "resourceLinks": {
         "type": "objectAttribute",
         "value": {

apps/docs/studio/documents/component.ts

@@ -35,6 +35,11 @@ export default defineType({
         }),
       ],
     }),
+    defineField({
+      name: 'highlightAsNew',
+      type: 'boolean',
+      title: 'Highlight as a new component',
+    }),
     defineField({
       name: 'resourceLinks',
       title: 'Resource links',