@becklyn/next 1.0.1 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@becklyn/next",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "license": "MIT",
     "scripts": {
         "lint": "eslint . --max-warnings 0 && prettier --check \"./**/*.{ts,tsx}\"",
@@ -14,7 +14,7 @@
         "@popperjs/core": "^2.11.8",
         "keen-slider": "^6.8.6",
         "react-popper": "^2.3.0",
-        "sass": "^1.82.0"
+        "sass": "^1.85.1"
     },
     "devDependencies": {
         "@becklyn/eslint": "*",
@@ -32,16 +32,69 @@
         "next": "^14.0.0 || ^15.0.0"
     },
     "files": [
-        "./dist"
+        "./dist",
+        "./scss"
     ],
-    "main": "./dist/cjs/index.js",
-    "module": "./dist/es/index.js",
     "exports": {
-        ".": {
-            "require": "./dist/cjs/index.js",
-            "import": "./dist/es/index.js",
-            "default": "./dist/cjs/index.js"
+        "./contentful/*": {
+            "types": "./dist/cjs/contentful/*.d.ts",
+            "require": "./dist/cjs/contentful/*.js",
+            "import": "./dist/es/contentful/*.js",
+            "default": "./dist/cjs/contentful/*.js"
         },
-        "./package.json": "./package.json"
+        "./format/*": {
+            "types": "./dist/cjs/format/*.d.ts",
+            "require": "./dist/cjs/format/*.js",
+            "import": "./dist/es/format/*.js",
+            "default": "./dist/cjs/format/*.js"
+        },
+        "./lib/*": {
+            "types": "./dist/cjs/lib/*.d.ts",
+            "require": "./dist/cjs/lib/*.js",
+            "import": "./dist/es/lib/*.js",
+            "default": "./dist/cjs/lib/*.js"
+        },
+        "./mock/*": {
+            "types": "./dist/cjs/mock/*.d.ts",
+            "require": "./dist/cjs/mock/*.js",
+            "import": "./dist/es/mock/*.js",
+            "default": "./dist/cjs/mock/*.js"
+        },
+        "./rte/*": {
+            "types": "./dist/cjs/rte/*.d.ts",
+            "require": "./dist/cjs/rte/*.js",
+            "import": "./dist/es/rte/*.js",
+            "default": "./dist/cjs/rte/*.js"
+        },
+        "./structuredData/*": {
+            "types": "./dist/cjs/structuredData/*.d.ts",
+            "require": "./dist/cjs/structuredData/*.js",
+            "import": "./dist/es/structuredData/*.js",
+            "default": "./dist/cjs/structuredData/*.js"
+        },
+        "./tracking/*": {
+            "types": "./dist/cjs/tracking/*.d.ts",
+            "require": "./dist/cjs/tracking/*.js",
+            "import": "./dist/es/tracking/*.js",
+            "default": "./dist/cjs/tracking/*.js"
+        },
+        "./tracking/cookiebot/*": {
+            "types": "./dist/cjs/tracking/cookiebot/*.d.ts",
+            "require": "./dist/cjs/tracking/cookiebot/*.js",
+            "import": "./dist/es/tracking/cookiebot/*.js",
+            "default": "./dist/cjs/tracking/cookiebot/*.js"
+        },
+        "./tracking/gtm/*": {
+            "types": "./dist/cjs/tracking/gtm/*.d.ts",
+            "require": "./dist/cjs/tracking/gtm/*.js",
+            "import": "./dist/es/tracking/gtm/*.js",
+            "default": "./dist/cjs/tracking/gtm/*.js"
+        },
+        "./types/*": {
+            "types": "./dist/cjs/types/*.d.ts",
+            "require": "./dist/cjs/types/*.js",
+            "import": "./dist/es/types/*.js",
+            "default": "./dist/cjs/types/*.js"
+        }
     }
 }

package/scss/animation.scss

@@ -0,0 +1,18 @@
+@mixin transition($properties, $duration: 0.15s, $easing: ease-in-out, $will-change: true) {
+    @if $will-change {
+        will-change: join($properties, (), "comma");
+    }
+
+    @if (1 == length($properties)) {
+        transition: #{$duration} #{$easing} #{$properties};
+    } @else {
+        transition: #{$duration} #{$easing};
+        transition-property: join($properties, (), "comma");
+    }
+}
+
+@mixin reduced {
+    @media (prefers-reduced-motion) {
+        @content;
+    }
+}

package/scss/breakpoints.scss

@@ -0,0 +1,23 @@
+@mixin tablet {
+    @media (min-width: 744px) {
+        @content;
+    }
+}
+
+@mixin large-tablet {
+    @media (min-width: 1024px) {
+        @content;
+    }
+}
+
+@mixin desktop {
+    @media (min-width: 1440px) {
+        @content;
+    }
+}
+
+@mixin large-desktop {
+    @media (min-width: 1920px) {
+        @content;
+    }
+}

package/scss/fill.scss

@@ -0,0 +1,15 @@
+@mixin fillParent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+@mixin fillWindow {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}

package/scss/interaction.scss

@@ -0,0 +1,55 @@
+@mixin hover {
+    @media (hover: hover) {
+        &:hover {
+            @content;
+        }
+    }
+}
+
+@mixin focus {
+    &:focus {
+        @content;
+    }
+}
+
+@mixin focus-visible {
+    &:focus-visible {
+        @content;
+    }
+}
+
+@mixin hover-focus {
+    @include hover {
+        @content;
+    }
+    @include focus {
+        @content;
+    }
+}
+
+@mixin focus-within {
+    &:focus-within {
+        @content;
+    }
+}
+
+@mixin hover-focus-visible {
+    @include hover {
+        @content;
+    }
+    @include focus-visible {
+        @content;
+    }
+}
+
+@mixin active {
+    &:active {
+        @content;
+    }
+}
+
+@mixin disabled {
+    &:disabled {
+        @content;
+    }
+}

package/scss/mixins.scss

@@ -0,0 +1,6 @@
+@forward "./animation.scss";
+@forward "./breakpoints.scss";
+@forward "./interaction.scss";
+@forward "./sizing.scss";
+@forward "./fill.scss";
+@forward "./support.scss";

package/scss/reset.scss

@@ -0,0 +1,257 @@
+// This is adapted from normalize.css but specialized for the specific needs of Becklyn Studios
+// http://necolas.github.io/normalize.css/
+
+// ---------------------------------------------------------------------------------------------------------
+// Document
+// ---------------------------------------------------------------------------------------------------------
+
+html {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+*,
+::before,
+::after {
+    box-sizing: inherit;
+}
+
+body {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Grouping content
+// ---------------------------------------------------------------------------------------------------------
+
+main {
+    display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-style: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Text level semantics
+// ---------------------------------------------------------------------------------------------------------
+
+b,
+strong {
+    font-weight: 700;
+}
+
+a {
+    background-color: transparent;
+    color: inherit;
+    text-decoration: none;
+}
+
+code,
+kbd {
+    font-size: 1em;
+    font-family: monospace, monospace;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub,
+sup {
+    position: relative;
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Embedded content
+// ---------------------------------------------------------------------------------------------------------
+
+audio,
+video {
+    display: block;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+img {
+    border-style: none;
+    max-width: 100%;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Forms
+// ---------------------------------------------------------------------------------------------------------
+
+// Don't forget to style the focus state as well!
+button {
+    border: 0;
+    border-radius: 0;
+    color: inherit;
+    -webkit-font-smoothing: inherit;
+    appearance: button;
+    -webkit-appearance: button;
+    cursor: pointer;
+    outline: 0;
+    background: none transparent;
+    letter-spacing: inherit;
+}
+
+button,
+input {
+    overflow: visible;
+}
+
+button,
+input,
+textarea {
+    font: inherit;
+    text-align: inherit;
+}
+
+input:disabled,
+textarea:disabled {
+    color: inherit;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+progress {
+    vertical-align: baseline;
+}
+
+textarea {
+    overflow: auto;
+}
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box;
+    padding: 0;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+[type="search"] {
+    appearance: button;
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+:focus {
+    outline: 0;
+}
+
+::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+::-webkit-file-upload-button {
+    appearance: button;
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Tables
+// ---------------------------------------------------------------------------------------------------------
+
+table {
+    border-collapse: collapse;
+}
+
+th {
+    font-weight: inherit;
+    text-align: left;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Interactive
+// ---------------------------------------------------------------------------------------------------------
+
+details,
+menu {
+    display: block;
+}
+
+summary {
+    display: list-item;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Scripting
+// ---------------------------------------------------------------------------------------------------------
+
+template {
+    display: none;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Hidden
+// ---------------------------------------------------------------------------------------------------------
+
+[hidden] {
+    display: none;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// SVG
+// ---------------------------------------------------------------------------------------------------------
+
+svg {
+    display: inline-block;
+    // By default IE11 renders SVGs with overflow enabled, which can caused weird rendering issues
+    overflow: hidden;
+}
+
+// ---------------------------------------------------------------------------------------------------------
+// Lists
+// ---------------------------------------------------------------------------------------------------------
+
+// Disable list styling on lists by default, as the styling should be set
+// explicitly in the \`.content\` class (already done in the \`content()\` mixin.
+ul,
+ol {
+    list-style: none;
+}

package/scss/sizing.scss

@@ -0,0 +1,14 @@
+@mixin square($size) {
+    width: $size;
+    height: $size;
+}
+
+@mixin aspect-ratio($value) {
+    @if type-of($value) != "number" {
+        @error "The value parameter must be of type 'number'.";
+    }
+
+    padding-bottom: #{100 * $value}#{"%"};
+    width: 100%;
+    height: 0;
+}

package/scss/support.scss

@@ -0,0 +1,7 @@
+@mixin support($property, $value, $fallback) {
+    #{$property}: $fallback;
+
+    @supports (#{$property}: $value) {
+        #{$property}: $value;
+    }
+}

package/scss/text.scss

@@ -0,0 +1,72 @@
+@use "sass:map";
+@use "sass:list";
+
+$text-variants: "headline" !default;
+
+$font-sizes: (
+    "headline": 52px,
+) !default;
+
+$font-weights: (
+    "headline": 700,
+) !default;
+
+// line height is calculated by dividing the line height rem by the font size rem
+$line-height: (
+    "headline": 1.11,
+) !default;
+
+$letter-spacings: (
+    "headline": -1.04px,
+) !default;
+
+$font-families: (
+    "headline": var(--font-family-name),
+) !default;
+
+$default-font-family: var(--font-family-name) !default;
+
+@mixin text($variant) {
+    @if list.index($text-variants, $variant) == null {
+        @error "Invalid text variant #{$variant}";
+    }
+
+    font-weight: map.get($font-weights, $variant);
+    font-size: map.get($font-sizes, $variant);
+    line-height: map.get($line-height, $variant);
+    letter-spacing: map.get($letter-spacings, $variant);
+
+    @if map.get($font-families, $variant) != $default-font-family {
+        font-family: map.get($font-families, $variant);
+    }
+}
+
+@mixin text-overflow-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@mixin vertical-line-clamp($lines, $line-height) {
+    @if type-of($lines) != "number" {
+        @error "The lines parameter must be of type 'number'.";
+    }
+
+    @if type-of($line-height) != "number" {
+        @error "The line-height parameter must be of type 'number'.";
+    }
+
+    height: #{$lines * $line-height}em;
+    overflow: hidden;
+    line-height: $line-height;
+
+    @supports (display: -webkit-box) {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: $lines;
+        line-clamp: $lines;
+        // Unset properties, which are used to introduce more hacky way of implementing the same feature for IE
+        height: inherit;
+        line-height: inherit;
+    }
+}