misc things, and more alerts

digdir · Jun 24, 2024 · de10623 · de10623
1 parent f52234b
commit de10623
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 4 deletions.
diff --git a/apps/theme/components/Previews/Components/Components.module.css b/apps/theme/components/Previews/Components/Components.module.css
@@ -58,6 +58,22 @@
 
 .alert {
   grid-column: span 6;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-2);
+}
+
+.loaders {
+  grid-column: span 3;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-2);
+}
+
+.loadersRest {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-spacing-2);
 }
 
 .dropdown {

diff --git a/apps/theme/components/Previews/Components/Components.tsx b/apps/theme/components/Previews/Components/Components.tsx
@@ -26,6 +26,8 @@ import {
   Alert,
   DropdownMenu,
   HelpText,
+  Skeleton,
+  Spinner,
 } from '@digdir/designsystemet-react';
 
 import classes from './Components.module.css';
@@ -517,10 +519,18 @@ export const Components = () => {
         </Accordion.Root>
       </div>
       <div className={cl(classes.card, classes.alert)}>
-        <Alert>
-          Designsystemet er en samling av retningslinjer, prinsipper og
-          ressurser som skal gjøre det enklere å lage gode digitale tjenester
-          for innbyggerne.
+        <Alert severity='info'>
+          Dette er informasjon som du bør lese for å forstå hva som skjer
+        </Alert>
+        <Alert severity='warning'>
+          Dette er en advarsel om at noe kan gå galt hvis du ikke følger med
+        </Alert>
+        <Alert severity='danger'>
+          Dette er en melding om at noe har gått galt og du bør gjøre noe med
+          det
+        </Alert>
+        <Alert severity='success'>
+          Dette er en melding om at noe har gått bra og du kan fortsette
         </Alert>
       </div>
       <div className={cl(classes.card, classes.dropdown)}>
@@ -537,6 +547,31 @@ export const Components = () => {
           </HelpText>
         </DropdownMenu.Root>
       </div>
+      <div className={cl(classes.card, classes.loaders)}>
+        <div className={classes.loadersRest}>
+          <Skeleton.Circle
+            width='70px'
+            height='70px'
+          />
+          <Skeleton.Rectangle
+            height='70px'
+            width='100px'
+          />
+        </div>
+        <Skeleton.Text width='100%' />
+        <Skeleton.Text width='100%' />
+        <div>
+          <Spinner
+            title='laster innhold'
+            size='md'
+          />
+          <Spinner
+            title='laster innhold'
+            size='md'
+            color='accent'
+          />
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
@@ -141,6 +141,7 @@ export const ThemeToolbar = ({
             brand1Color={brandOneTheme.color}
             brand2Color={brandTwoTheme.color}
             brand3Color={brandThreeTheme.color}
+            borderRadius={borderRadius}
           />
         </div>
       </div>

diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx
@@ -25,6 +25,7 @@ type TokenModalProps = {
   brand1Color: CssColor;
   brand2Color: CssColor;
   brand3Color: CssColor;
+  borderRadius: string;
 };
 
 export const TokenModal = ({
@@ -33,6 +34,7 @@ export const TokenModal = ({
   brand1Color,
   brand2Color,
   brand3Color,
+  borderRadius,
 }: TokenModalProps) => {
   const modalRef = useRef<HTMLDialogElement>(null);
   const [JSONTheme, setJSONTheme] = useState('');
@@ -133,6 +135,8 @@ export const TokenModal = ({
       CSS = '[data-ds-theme="contrast"] {';
     }
 
+    CSS += `--ds-border-radius-base: ${borderRadius};`;
+
     for (const key in obj.theme) {
       for (const color in obj.theme[key as ColorType]) {
         CSS += `--ds-color-${key}-${color}: ${obj.theme[key as ColorType][color].value};`;

diff --git a/packages/css/skeleton.css b/packages/css/skeleton.css
@@ -12,6 +12,7 @@
   .ds-skeleton--circle {
     width: 1.3em;
     border-radius: var(--ds-border-radius-full);
+    aspect-ratio: 1 / 1;
   }
 
   .ds-skeleton--rectangle {