feat: remove helptext, add blog article

apps/storefront/app/bloggen/(frontpage)/page.mdx

@@ -9,20 +9,30 @@ export const metadata = {
   description: 'Beskrivelse',
 };
 
+<BlogCard
+  title='HelpText blir fjerna, kva gjer du?'
+  desc='Me fjernar HelpText frå Designsystemet. Kvifor, og kva gjer du om du fortsatt vil bruke den?'
+  date='7. januar 2025'
+  href='/bloggen/2025/helptext-blir-fjerna-kva-gjer-du'
+  image='/img/bloggen/helptext.png'
+  author='Designsystemet'
+  featured={true}
+/>
+
 <BlogCard
   title='Hvor blir det av V1?'
   desc='Vi har fått flere verdifulle tilbakemeldinger fra våre brukere. Les mer om hvorfor vi ønsker å samle React-komponenter og CSS-rammeverk i en sammenhengende pakke.'
-  date='28.august 2024'
+  date='28. august 2024'
   href='/bloggen/2024/v1rc2'
   image='/img/bloggen/v1rc2-front.png'
   author='Designsystemet'
-  featured={true}
+  featured={false}
 />
 
 <BlogCard
   title='Dette kommer i V1! 🎉'
   desc='Vi nærmer oss den første versjonen av Designsystemet uten betamerke! Versjon 1 skal være mer stabil, mer fleksibel og støtte flerdimensjonal tematisering.'
-  date='29.mai 2024'
+  date='29. mai 2024'
   href='/bloggen/2024/v1rc1'
   image='/img/bloggen/v1rc1.png'
   author='Designsystemet'
@@ -32,7 +42,7 @@ export const metadata = {
 <BlogCard
   title='Temabygger som bacheloroppgave'
   desc='Hvordan kan vi gjøre det enklere å ta i bruk Designsystemet? Det har blitt utforsket i en bacheloroppgave!'
-  date='7.mai 2024'
+  date='7. mai 2024'
   href='/bloggen/2024/bachelor-temavelger'
   image='/img/bloggen/temavelger-front.png'
   author='Designsystemet'
@@ -42,7 +52,7 @@ export const metadata = {
 <BlogCard
   title='Dynamiske font-størrelser og hvorfor vi gikk bort fra det'
   desc='Det er mulig å bruke dynamiske font-størrelser uten breakpoints, men det medfører noen ulemper. '
-  date='26.april 2024'
+  date='26. april 2024'
   href='/bloggen/2024/fluid-typography'
   image='/img/bloggen/fluid-front.png'
   author='Designsystemet'

apps/storefront/app/bloggen/2025/helptext-blir-fjerna-kva-gjer-du/page.mdx

@@ -0,0 +1,155 @@
+import { PostLayout, Contributors } from '../../_components';
+import { CodeSnippet } from '@repo/components';
+
+export default ({ children }) => (
+  <PostLayout
+    content={children}
+    heading='HelpText blir fjerna, kva gjer du?'
+    ingress='Me fjernar HelpText frå Designsystemet. Kvifor, og kva gjer du om du fortsatt vil bruke den?'
+    date='7. januar 2025'
+    author='Designsystemet'
+    imageSrc='/img/bloggen/helptext.png'
+    imageAlt='Illustrasjon av ein hjelpetekst i popover.'
+    imageCaption='HelpText er i dag ein popover knytt til ein knapp.'
+  />
+);
+
+export const metadata = {
+  title: 'HelpText blir fjerna, kva gjer du?',
+  description:
+    'Me fjernar HelpText frå Designsystemet. Kvifor, og kva gjer du om du fortsatt vil bruke den?',
+  openGraph: {
+    images: '/img/bloggen/helptext.png',
+  },
+};
+
+I `next`-versjonen av Designsystemet skal me fjerne `HelpText`, dette betyr at den ikkje blir med ut versjon 1.
+Kvifor gjer me dette? Og kva gjer du dersom du fortsatt bruker den?
+
+Nederst i artikkelen finn du kode for å implementere denne komponenten sjølv.
+
+## Kvifor fjernar me `HelpText`?
+
+Det har vore ein utfordrande komponent å anbefale konsekvent, og fleire faktorar tilseier at den ikkje passar i Designsystemet:
+
+- **Enkel å implementere sjølv:** `HelpText` er i praksis ein popover knytt til ein knapp, noko som lett kan lagast med ein kort css-snutt og eksisterande komponentar.
+- **Uklart bruksområde:** Me har ikkje klare anbefalingar for når og korleis hjelpetekst bør visast, og komponenten kan dermed lett bli brukt feil.
+- **Uvanleg i designsystem**: Få designsystem inkluderer ein dedikert `HelpText`-komponent, nettopp fordi hjelpetekst varierer stort i form og kontekst.
+- **Avgrensar fleksibilitet:** Å tilby `HelpText` som ein standard popover skaper forventingar om at hjelpetekst alltid skal visast på denne måten. Det finst fleire løysingar som er betre eigna i ulike situasjonar.
+
+## Kva gjer du dersom du fortsatt bruker den?
+
+Dersom du har brukt `HelpText`, finn du nederst i artikkelen ein kode-snutt som viser korleis du kan implementere funksjonaliteten sjølv.
+Denne løysinga gjer deg fridom til å tilpasse hjelpetekst etter dine behov.
+
+## Vidare arbeid
+
+Me jobbar med å avklare når og korleis hjelpetekst bør integrerast i grensesnitt, og ser fram til å kunne tilby meir presise anbefalingar i framtida.
+Det vil etter kvar kome eit mønster for ulike typar hjelpetekst.
+
+## Kode
+
+### CSS
+
+<CodeSnippet language="css">
+{`
+.ds-helptext {
+  --dsc-helptext-icon-size: 65%;
+  --dsc-helptext-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 8 14'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M4 11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM4 0c2.2 0 4 1.66 4 3.7 0 .98-.42 1.9-1.17 2.6l-.6.54-.29.29c-.48.46-.87.93-.94 1.41V9.5H3v-.81c0-1.26.84-2.22 1.68-3L5.42 5C5.8 4.65 6 4.2 6 3.7 6 2.66 5.1 1.83 4 1.83c-1.06 0-1.92.75-2 1.7v.15H0C0 1.66 1.8 0 4 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
+  --dsc-helptext-size: var(--ds-size-7);
+
+  border-radius: var(--ds-border-radius-full);
+  border: max(1px, calc(var(--ds-size-1) / 2)) solid; /* Allow border-width to grow with font-size */
+  box-sizing: border-box;
+  height: var(--dsc-helptext-size);
+  min-height: 0;
+  min-width: 0;
+  padding: 0;
+  position: relative;
+  width: var(--dsc-helptext-size);
+
+  @media (forced-colors: active) {
+    color: ButtonText;
+  }
+
+  &::before {
+    content: '';
+    border-radius: inherit;
+    background: currentcolor;
+    mask-composite: exclude;
+    mask-image: var(--dsc-helptext-icon-url);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: var(--dsc-helptext-icon-size) var(--dsc-helptext-icon-size), cover;
+    scale: 1.1; /* Hide tiny half pixel rendeing bug */
+    width: 100%;
+    height: 100%;
+
+    @media (forced-colors: active) {
+      background: ButtonText;
+    }
+  }
+
+  &:has(+ :popover-open)::before {
+    mask-image: var(--dsc-helptext-icon-url), linear-gradient(currentcolor, currentcolor); /* Cut icon out of currentcolor surface */
+  }
+
+  @media print {
+    display: none;
+  }
+}
+`}
+</CodeSnippet>
+
+### Markup
+
+<CodeSnippet language="tsx">
+{`
+export type HelpTextProps = MergeRight<
+  DefaultProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
+  {
+    /**
+     * Required descriptive label for screen readers.
+     **/
+    'aria-label': string;
+    /**
+     * Placement of the Popover.
+     * @default 'right'
+     */
+    placement?: Placement;
+  }
+>;
+
+export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
+  function HelpText(
+    { placement = 'right', className, children, ...rest },
+    ref,
+  ) {
+    return (
+      <Popover.TriggerContext>
+        <Popover.Trigger
+          className={cl('ds-helptext', className)}
+          ref={ref}
+          variant='tertiary'
+          data-color='info'
+          {...rest}
+        />
+        <Popover placement={placement} data-color='info'>
+          {children}
+        </Popover>
+      </Popover.TriggerContext>
+    );
+  },
+);
+`}
+</CodeSnippet>
+
+<Contributors
+  authors={[
+    'Tobias Barsnes',
+    'Marianne Røsvik',
+    'Michael Marszalek',
+    'Lasse Straum',
+    'Øyvind Thune',
+  ]}
+/>

apps/storefront/app/komponenter/component-list.ts

@@ -69,11 +69,6 @@ export const data = [
     image: 'Fieldset.svg',
     url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-fieldset--docs',
   },
-  {
-    title: 'Help Text',
-    image: 'HelpText.svg',
-    url: 'https://storybook.designsystemet.no/?path=/docs/komponenter-helptext--docs',
-  },
   {
     title: 'Link',
     image: 'Link.svg',

packages/css/src/index.css

@@ -17,7 +17,6 @@
 @import url('./details.css') layer(ds.components);
 @import url('./search.css') layer(ds.components);
 @import url('./textfield.css') layer(ds.components);
-@import url('./helptext.css') layer(ds.components);
 @import url('./modal.css') layer(ds.components);
 @import url('./list.css') layer(ds.components);
 @import url('./card.css') layer(ds.components);