@sb1/ffe-skeleton 100.6.1

package/README.md

@@ -0,0 +1,39 @@
+# @sb1/ffe-skeleton
+
+## Install
+
+```bash
+npm install --save @sb1/ffe-skeleton
+```
+
+## Usage
+
+Full documentation on skeleton usage is available at https://design.sparebank1.no/komponenter/skeleton/.
+
+```less
+@import 'path/to/node_modules/@sb1/ffe-skeleton/less/skeleton';
+```
+
+### Importing compiled CSS
+
+If your project does not use Less, you can import the compiled styling:
+
+```css
+@import '~@sb1/ffe-skeleton/css/skeleton.css';
+```
+
+See also `@sb1/ffe-skeleton-react`.
+
+## Development
+
+To start a local development server, run the following from the designsystem root folder:
+
+```bash
+npm install
+npm run build
+npm start
+```
+
+A local instance of `component-overview` with live reloading will run at http://localhost:1234/.
+
+Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.

package/less/skeleton.less

@@ -0,0 +1,42 @@
+.ffe-skeleton {
+    background: var(--ffe-color-surface-neutral-default);
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+    }
+}
+
+@keyframes pulse {
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.ffe-skeleton__box {
+    --ffe-skeleton-box-width: 100%;
+    --ffe-skeleton-box-height: 1em;
+    border-radius: var(--ffe-g-border-radius);
+    height: var(--ffe-skeleton-box-height);
+    width: var(--ffe-skeleton-box-width);
+}
+
+.ffe-skeleton__circle {
+    --ffe-skeleton-circle-size: 24px;
+    border-radius: 50%;
+    width: var(--ffe-skeleton-circle-size);
+    height: var(--ffe-skeleton-circle-size);
+
+    &--sm {
+        --ffe-skeleton-circle-size: 20px;
+    }
+    &--md {
+        --ffe-skeleton-circle-size: 24px;
+    }
+    &--lg {
+        --ffe-skeleton-circle-size: 32px;
+    }
+    &--xl {
+        --ffe-skeleton-circle-size: 40px;
+    }
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+    "name": "@sb1/ffe-skeleton",
+    "description": "Skeleton loading in ffe",
+    "version": "100.6.1",
+    "license": "MIT",
+    "author": "SpareBank1",
+    "files": [
+        "less",
+        "css"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@github.com:SpareBank1/designsystem.git"
+    },
+    "scripts": {
+        "lint": "echo `Linting handled at root level with oxlint`",
+        "lint:style": "ffe-buildtool stylelint less/*.less",
+        "lint:style:fix": "ffe-buildtool stylelint --fix less/*.less",
+        "test": "npm run lint",
+        "build": "lessc less/skeleton.less css/skeleton.css --autoprefix"
+    },
+    "dependencies": {
+        "@sb1/ffe-core": "^100.6.1"
+    },
+    "devDependencies": {
+        "@sb1/ffe-buildtool": "^100.6.1"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}