Merge branch 'docs/getting-started-for-designers' of https://github.c…

…om/digdir/designsystemet into docs/getting-started-for-designers
digdir · Jun 6, 2024 · b24fe43 · b24fe43
2 parents 1f5ece5 + 5dcad4b
commit b24fe43
Show file tree

Hide file tree

Showing 49 changed files with 1,468 additions and 349 deletions.
diff --git a/.github/workflows/storybook-deploy-vercel.yml b/.github/workflows/storybook-deploy-vercel.yml
@@ -1,12 +1,24 @@
-name: Deploy Storybook Production
+name: Deploy Storybook
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
   VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID_STORYBOOK }}
+
 on:
   workflow_dispatch:
+    inputs:
+      environment:
+        type: choice
+        description: Deploy to environment
+        options:
+          - production
+          - next
   push:
     branches:
-      - main
+      - next
+    paths:
+      - 'packages/**'
+      - 'apps/storybook/**'
+      - 'assets/**'
 jobs:
   deploy:
     name: Build & deploy to Vercel
@@ -30,12 +42,22 @@ jobs:
       - name: Install Vercel CLI
         run: yarn add vercel@latest
 
+      - name: Set default environment value if push event is triggered
+        id: defaultenvironment
+        run: |
+          ENVIRONMENT=${{ github.event.inputs.environment }}
+          echo "value=${ENVIRONMENT:-"next"}" >> "$GITHUB_OUTPUT"
+
       - name: Pull Vercel Environment Information
-        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel pull --yes --environment=${{(steps.defaultenvironment.outputs.value == 'next' && 'preview') || 'production'}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - name: Build Project Artifacts
-        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+        run: vercel build ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }}
 
       - id: deploy
         name: Deploy Project Artifacts to Vercel
-        run: echo "url=$(vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
+        run: echo "url=$(vercel deploy --prebuilt ${{(steps.defaultenvironment.outputs.value == 'production' && '--prod') || ''}} --token=${{ secrets.VERCEL_TOKEN }})" >> $GITHUB_OUTPUT
+
+      - name: Set Vercel alias
+        run: vercel alias --token=${{ secrets.VERCEL_TOKEN }} --scope=${{ secrets.VERCEL_TEAM }} set ${{ steps.deploy.outputs.url }} next.storybook.designsystemet.no
+        if: steps.defaultenvironment.outputs.value == 'next'
diff --git a/.github/workflows/storybook-deploy.yml b/.github/workflows/storybook-deploy.yml
diff --git a/.github/workflows/storybook-preview.yml b/.github/workflows/storybook-preview.yml
@@ -1,4 +1,4 @@
-name: Deploy Storybook Preview
+name: Deploy Storybook PR Preview
 env:
   VERCEL_TEAM: ${{ secrets.VERCEL_TEAM }}
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}

diff --git a/README.md b/README.md
@@ -23,14 +23,18 @@ Our goal is to create consistent and user-friendly experiences in digital soluti
 
 ## 🔗 Links
 
-[Storybook](https://storybook.designsystemet.no/) - For developing and testing our React components.
+[Storybook](https://storybook.designsystemet.no/) - Preview for React components.
 
 [Storefront](https://designsystemet.no/) - General documentation about the design system.
 
+[Theme](https://theme.designsystemet.no/) - Theme builder.
+
 ---
 
 ## 📦 Packages
 
+[`@digdir/designsystemet`](https://www.npmjs.com/package/@digdir/designsystemet) - CLI for Designsystemet.
+
 [`@digdir/designsystemet-theme`](https://www.npmjs.com/package/@digdir/designsystemet-theme) - Themes for Designsystemet.
 
 [`@digdir/designsystemet-css`](https://www.npmjs.com/package/@digdir/designsystemet-css) - Styling for components.

diff --git a/apps/storefront/components/Blog/Contributors/Contributors.module.css b/apps/storefront/components/Blog/Contributors/Contributors.module.css
@@ -55,7 +55,7 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--ds-color-brand1-6);
+  background-color: var(--ds-color-brand1-7);
   margin: auto 0;
   break-after: avoid;
 }
diff --git a/apps/storefront/components/Footer/Footer.tsx b/apps/storefront/components/Footer/Footer.tsx
@@ -2,10 +2,9 @@ import type { ReactNode } from 'react';
 import Image from 'next/image';
 import { EnvelopeClosedIcon } from '@navikt/aksel-icons';
 import NextLink from 'next/link';
-import { Heading, Paragraph } from '@digdir/designsystemet-react';
+import { Heading, Paragraph, Link } from '@digdir/designsystemet-react';
 
 import { Container } from '../Container/Container';
-import { Link } from '../Link/Link';
 
 import classes from './Footer.module.css';
 
@@ -28,7 +27,12 @@ const rightLinks = [
   {
     text: 'designsystem@digdir.no',
     url: 'mailto:designsystem@digdir.no',
-    prefix: <EnvelopeClosedIcon aria-hidden='true' />,
+    prefix: (
+      <EnvelopeClosedIcon
+        aria-hidden='true'
+        fontSize='1.5em'
+      />
+    ),
   },
   {
     text: 'Bli invitert til slack',
@@ -85,9 +89,10 @@ const LinkList = (links: LinkListItemProps[]) => {
       {links.map((item, index) => (
         <li key={index}>
           <Link
-            prefix={item.prefix}
             href={item.url}
+            color='neutral'
           >
+            {item.prefix}
             {item.text}
           </Link>
         </li>

diff --git a/apps/storefront/components/ImageBanner/ImageBanner.module.css b/apps/storefront/components/ImageBanner/ImageBanner.module.css
@@ -76,20 +76,6 @@
   color: inherit;
 }
 
-.button {
-  height: 48px;
-  padding: 0 var(--ds-spacing-4);
-  border: 1px solid #c0c0c0;
-  display: flex;
-  align-items: center;
-  background-color: white;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: 0.1s all;
-  color: var(--ds-color-neutral-text-default) !important;
-  text-decoration: none;
-}
-
 .buttons {
   color: inherit;
   display: flex;
@@ -104,38 +90,17 @@
   }
 }
 
-.button:hover {
-  background-color: #dbedff;
-}
-
-.button svg {
-  margin-right: var(--ds-spacing-2);
-  color: #1e2b3c;
-}
-
-.button img {
-  height: 20px;
-  margin-right: var(--ds-spacing-2);
-  border-radius: 50%;
-}
-
 .link {
-  text-underline-offset: 6px;
-  color: var(--ds-color-neutral-text-default);
   display: flex;
   align-items: center;
   margin-top: var(--ds-spacing-5);
   font-size: 18px;
   font-weight: 500;
-}
-
-.link:hover {
-  text-decoration-thickness: 2px;
+  width: fit-content;
 }
 
 .link svg {
   margin-right: var(--ds-spacing-2);
-  color: var(--ds-color-neutral-text-default);
 }
 
 .fallbackImg {

diff --git a/apps/storefront/components/ImageBanner/ImageBanner.tsx b/apps/storefront/components/ImageBanner/ImageBanner.tsx
@@ -2,6 +2,8 @@
 import type React from 'react';
 import { useEffect, useState, createElement } from 'react';
 import cn from 'clsx';
+import { Link, Button } from '@digdir/designsystemet-react';
+import NextLink from 'next/link';
 
 import { Container } from '../Container/Container';
 
@@ -107,25 +109,33 @@ const ImageBanner = ({
           {description && <p className={classes.desc}>{description}</p>}
           {content && content}
           {link && (
-            <a
-              href={link.href}
+            <Link
               className={classes.link}
+              color='neutral'
+              asChild
             >
-              {link.prefix} {link.text}
-            </a>
+              <NextLink href={link.href}>
+                {link.prefix} {link.text}
+              </NextLink>
+            </Link>
           )}
 
           {buttons && (
             <div className={classes.buttons}>
               {buttons.map((item, index) => (
-                <a
-                  href={item.href}
-                  className={classes.button}
+                <Button
                   key={index}
+                  asChild
+                  variant='secondary'
                 >
-                  {item.prefix}
-                  {item.text}
-                </a>
+                  <a
+                    href={item.href}
+                    className={classes.button}
+                  >
+                    {item.prefix}
+                    {item.text}
+                  </a>
+                </Button>
               ))}
             </div>
           )}

diff --git a/apps/storefront/components/NavigationCard/NavigationCard.module.css b/apps/storefront/components/NavigationCard/NavigationCard.module.css
@@ -38,15 +38,18 @@
 }
 
 .red {
-  background-color: var(--ds-color-brand1-3);
+  background-color: var(--ds-color-brand1-5);
+  color: var(--ds-color-brand1-text-default);
 }
 
 .blue {
-  background-color: var(--ds-color-brand3-3);
+  background-color: var(--ds-color-brand3-4);
+  color: var(--ds-color-brand3-text-default);
 }
 
 .yellow {
-  background-color: var(--ds-color-brand2-3);
+  background-color: var(--ds-color-brand2-4);
+  color: var(--ds-color-brand2-text-default);
 }
 
 .grey {

diff --git a/apps/storefront/components/SubPages/Banner/Banner.module.css b/apps/storefront/components/SubPages/Banner/Banner.module.css
@@ -39,15 +39,15 @@
 }
 
 .red {
-  background-color: var(--ds-color-brand1-6);
+  background-color: var(--ds-color-brand1-7);
 }
 
 .yellow {
   background-color: var(--ds-color-brand2-6);
 }
 
 .blue {
-  background-color: var(--ds-color-brand3-6);
+  background-color: var(--ds-color-brand3-7);
 }
 
 .logo {

diff --git a/apps/storefront/layouts/BlogArticleLayout/BlogArticleLayout.module.css b/apps/storefront/layouts/BlogArticleLayout/BlogArticleLayout.module.css
@@ -38,7 +38,7 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--ds-color-brand1-6);
+  background-color: var(--ds-color-brand1-7);
   margin: auto 0;
 }
 
@@ -87,7 +87,8 @@
 .wantToWrite {
   margin-top: var(--ds-spacing-12);
   border-radius: var(--ds-border-radius-2xl);
-  background: var(--ds-color-brand1-2);
+  background: var(--ds-color-brand1-surface-default);
+  color: var(--ds-color-brand1-text-default);
   padding: var(--ds-spacing-8);
   display: flex;
   flex-wrap: wrap;

diff --git a/apps/storefront/layouts/FrontpageLayout/FrontpageLayout.module.css b/apps/storefront/layouts/FrontpageLayout/FrontpageLayout.module.css
@@ -130,11 +130,13 @@
   }
 }
 
-@media (max-width: 1199.98px) {
+@media (max-width: 1700px) {
   .cluster {
     display: none;
   }
+}
 
+@media (max-width: 1199.98px) {
   .header {
     height: auto;
   }

diff --git a/apps/storefront/layouts/PageLayout/PageLayout.module.css b/apps/storefront/layouts/PageLayout/PageLayout.module.css
@@ -4,7 +4,7 @@
 }
 
 .header {
-  background-color: var(--ds-color-brand3-3);
+  background-color: var(--ds-color-brand3-surface-default);
   padding-top: var(--ds-spacing-7);
 }
 
@@ -14,6 +14,12 @@
   padding-bottom: var(--ds-spacing-18);
 }
 
+.headerContent h1,
+.headerContent h2,
+.headerContent p {
+  color: var(--ds-color-brand3-text-default);
+}
+
 .title {
   margin-bottom: 0;
   text-align: center;

diff --git a/apps/storefront/layouts/PageLayout/PageLayout.tsx b/apps/storefront/layouts/PageLayout/PageLayout.tsx
@@ -29,6 +29,7 @@ const PageLayout = ({ content, data }: PageLayoutProps) => {
             <Link
               asChild
               className={classes.backBtn}
+              color='neutral'
             >
               <NextLink
                 href={'/' + data.backUrl}