@fremtind/jokul 0.1.1 → 0.2.0

package/src/components/loader/styles/skeleton-loader.scss

@@ -0,0 +1,174 @@
+@charset "UTF-8";
+@use "sass:string";
+@use "../../../core/jkl";
+
+$_sweep-animation-name: jkl-sweep-#{string.unique-id()};
+$_blink-animation-name: jkl-blink-#{string.unique-id()};
+
+@include jkl.light-mode-variables {
+    --jkl-skeleton-element-color: #{jkl.$color-varde};
+    --jkl-skeleton-sweeper-color: #{jkl.$color-snohvit};
+}
+
+@include jkl.dark-mode-variables {
+    --jkl-skeleton-element-color: #{jkl.$color-stein};
+    --jkl-skeleton-sweeper-color: #{jkl.$color-granitt};
+}
+
+.jkl-skeleton-animation {
+    --jkl-skeleton-sweep-duration: 3s;
+
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: jkl.rem(200px);
+        background: linear-gradient(
+            89.17deg,
+            rgb(249 249 249 / 0%) 0.8%,
+            var(--jkl-skeleton-sweeper-color) 50.09%,
+            rgb(249 249 249 / 0%) 96.31%
+        );
+        animation: var(--jkl-skeleton-sweep-duration) ease infinite $_sweep-animation-name;
+    }
+
+    @include jkl.small-device {
+        width: jkl.rem(150px);
+    }
+
+    @include jkl.prefers-reduced-motion {
+        &::after {
+            background: none; // Skjul gradienten som nå ikke beveger seg
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        &::after {
+            // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
+            // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
+            // noe skjer. Animasjonen gjøres på jkl-skeleton-element.
+            animation: none;
+        }
+    }
+
+    &--compact::after {
+        width: jkl.rem(150px);
+    }
+}
+
+.jkl-skeleton-element {
+    border-radius: jkl.rem(2px);
+    background-color: var(--jkl-skeleton-element-color);
+
+    &--circle {
+        border-radius: 50%;
+    }
+
+    @include jkl.forced-colors-mode {
+        border: 1px solid CanvasText;
+        // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
+        // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
+        // noe skjer.
+        animation: 2s ease infinite $_blink-animation-name;
+    }
+}
+
+.jkl-skeleton-input {
+    display: flex;
+    flex-direction: column;
+    gap: jkl.$spacing-s;
+
+    &__checkbox {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        gap: jkl.$spacing-xs;
+    }
+
+    @include jkl.small-device {
+        gap: jkl.$spacing-xs;
+    }
+
+    &--compact::after {
+        gap: jkl.$spacing-xs;
+    }
+}
+
+.jkl-skeleton-table {
+    display: flex;
+    flex-direction: column;
+
+    &__header,
+    &__row {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        border-bottom: solid 1px var(--jkl-skeleton-element-color);
+    }
+
+    &__header {
+        padding: jkl.$spacing-s jkl.$spacing-xs;
+    }
+
+    &__row {
+        padding: jkl.$spacing-m jkl.$spacing-xs;
+    }
+
+    @include jkl.small-device {
+        &__header {
+            padding: jkl.$spacing-xs jkl.$spacing-2xs;
+        }
+
+        &__row {
+            padding: jkl.$spacing-s jkl.$spacing-2xs;
+        }
+    }
+
+    &--compact::after {
+        &__header {
+            padding: jkl.$spacing-xs jkl.$spacing-2xs;
+        }
+
+        &__row {
+            padding: jkl.$spacing-s jkl.$spacing-2xs;
+        }
+    }
+
+    @include jkl.forced-colors-mode {
+        // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
+        // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
+        // noe skjer.
+        animation: 2s ease-in-out infinite $_blink-animation-name;
+    }
+}
+
+@keyframes #{$_sweep-animation-name} {
+    0% {
+        transform: translateX(calc(0vw - 200px));
+    }
+
+    80%,
+    100% {
+        transform: translateX(calc(100vw + calc(200px * 2)));
+    }
+}
+
+@keyframes #{$_blink-animation-name} {
+    0% {
+        opacity: 1;
+    }
+
+    40%,
+    50% {
+        opacity: 0.3;
+    }
+
+    70%,
+    100% {
+        opacity: 1;
+    }
+}

package/build/cjs/components/navigation/Link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/navigation/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { AnchorHTMLAttributes, FC } from \"react\";\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n    external?: boolean;\n}\n\nexport const Link: FC<LinkProps> = ({ external = false, className = \"\", children, ...rest }) => (\n    <a\n        className={clsx(\"jkl-link\", className, {\n            \"jkl-link--external\": external,\n        })}\n        {...rest}\n    >\n        {children}\n    </a>\n);\n"],"names":["external","className","children","rest","jsx","clsx"],"mappings":"0KAOmC,EAAGA,SAAAA,GAAW,EAAOC,UAAAA,EAAY,GAAIC,SAAAA,KAAaC,KACjFC,EAAAA,IAAC,IAAA,CACGH,UAAWI,EAAAA,KAAK,WAAYJ,EAAW,CACnC,qBAAsBD,OAEtBG,EAEHD,SAAAA"}

package/build/cjs/components/navigation/NavLink.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavLink.js","sources":["../../../../src/components/navigation/NavLink.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { AnchorHTMLAttributes, FC } from \"react\";\n\nexport interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n    active?: boolean;\n    back?: boolean;\n}\n\nexport const NavLink: FC<NavLinkProps> = ({ active = false, back = false, className, children, ...rest }) => (\n    <a\n        className={clsx(\n            \"jkl-nav-link\",\n            {\n                \"jkl-nav-link--active\": active,\n                \"jkl-nav-link--back\": back,\n            },\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </a>\n);\n"],"names":["active","back","className","children","rest","jsx","clsx"],"mappings":"6KAQyC,EAAGA,OAAAA,GAAS,EAAOC,KAAAA,GAAO,EAAOC,UAAAA,EAAWC,SAAAA,KAAaC,KAC9FC,EAAAA,IAAC,IAAA,CACGH,UAAWI,EAAAA,KACP,eACA,CACI,uBAAwBN,EACxB,qBAAsBC,GAE1BC,MAEAE,EAEHD,SAAAA"}

package/build/es/components/navigation/Link.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/navigation/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { AnchorHTMLAttributes, FC } from \"react\";\n\nexport interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n    external?: boolean;\n}\n\nexport const Link: FC<LinkProps> = ({ external = false, className = \"\", children, ...rest }) => (\n    <a\n        className={clsx(\"jkl-link\", className, {\n            \"jkl-link--external\": external,\n        })}\n        {...rest}\n    >\n        {children}\n    </a>\n);\n"],"names":["Link","external","className","children","rest","jsx","clsx"],"mappings":"sFAOa,MAAAA,EAAsB,EAAGC,SAAAA,GAAW,EAAOC,UAAAA,EAAY,GAAIC,SAAAA,KAAaC,KACjFC,EAAC,IAAA,CACGH,UAAWI,EAAK,WAAYJ,EAAW,CACnC,qBAAsBD,OAEtBG,EAEHD,SAAAA"}

package/build/es/components/navigation/NavLink.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NavLink.js","sources":["../../../../src/components/navigation/NavLink.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { AnchorHTMLAttributes, FC } from \"react\";\n\nexport interface NavLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n    active?: boolean;\n    back?: boolean;\n}\n\nexport const NavLink: FC<NavLinkProps> = ({ active = false, back = false, className, children, ...rest }) => (\n    <a\n        className={clsx(\n            \"jkl-nav-link\",\n            {\n                \"jkl-nav-link--active\": active,\n                \"jkl-nav-link--back\": back,\n            },\n            className,\n        )}\n        {...rest}\n    >\n        {children}\n    </a>\n);\n"],"names":["NavLink","active","back","className","children","rest","jsx","clsx"],"mappings":"iFAQa,MAAAA,EAA4B,EAAGC,OAAAA,GAAS,EAAOC,KAAAA,GAAO,EAAOC,UAAAA,EAAWC,SAAAA,KAAaC,KAC9FC,EAAC,IAAA,CACGH,UAAWI,EACP,eACA,CACI,uBAAwBN,EACxB,qBAAsBC,GAE1BC,MAEAE,EAEHD,SAAAA"}