@internetstiftelsen/styleguide 2.25.3 → 2.25.5-beta.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.25.3",
+	"version": "2.25.5-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/base/_normalize.scss

@@ -12,6 +12,7 @@ html {
 	color: $color-cyberspace;
 	font-family: sans-serif;
 	font-size: percentage(math.div($size-base, 16px));
+	font-variant-ligatures: no-common-ligatures;
 	-ms-overflow-style: scrollbar;
 	-webkit-text-size-adjust: 100%;
 	-ms-text-size-adjust: 100%;

package/src/organisms/hero/_hero.scss

@@ -322,6 +322,53 @@
 		}
 	}
 
+	@include m(no-break) {
+		@include e(image) {
+			aspect-ratio: 1 / 1;
+			object-position: 100% 25%;
+
+			@include bp-up(sm-xs) {
+				aspect-ratio: 4 / 3;
+			}
+
+			@include bp-up(sm) {
+				aspect-ratio: 16 / 9;
+			}
+
+			@include bp-up(md) {
+				object-position: 50% 25%;
+			}
+		}
+
+		@include e(caption) {
+			position: absolute;
+			z-index: z_index(middlegroundImportant);
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			padding: rhythm(1);
+			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba($color-black, 0) 35%, rgba($color-black, 1) 100%);
+			text-shadow: $text-shadow;
+
+			@include bp-up(sm) {
+				padding: rhythm(2);
+			}
+
+			@include bp-up(md) {
+				padding: rhythm(4);
+			}
+		}
+
+		@include e(text) {
+			color: $color-snow;
+		}
+
+		@include e(link) {
+			color: $color-snow;
+		}
+	}
+
 	// Hero without darkened caption
 	@include m(clean) {
 		@include e(caption) {

package/src/organisms/hero/hero.config.js

@@ -11,6 +11,7 @@ module.exports = {
 		hero_image: '/assets/images/hero.jpg',
 		has_link: true,
 		has_pre_heading: false,
+		has_text: true,
 	},
 	variants: [
 		{
@@ -127,6 +128,17 @@ module.exports = {
 				has_buttons: false,
 			}
 		},
+		{
+			name: 'No breakpoint',
+			context: {
+				no_image_class: 'o-hero--no-break',
+				limited_width: false,
+				has_button: true,
+				has_tags: false,
+				has_link: false,
+				has_text: false,
+			}
+		},
 		{
 			name: 'Dynamic headline',
 			status: 'wip',