@internetstiftelsen/styleguide 2.23.9 → 2.24.0-beta.0.2

package/README.md

@@ -33,14 +33,6 @@ $namespace: 'mysite-';
 @import '~@internetstiftelsen/styleguide/src/organisms/header/header';
 ```
 
-### SCSS Mixins explained:
-```scss
-@include e(nested-element) {} // Element (.parent-element__nested-element)
-@include m(modifier-name) {} // Modifier (.parent-element--modifier-name)
-	@include b(block-name) {} // Block (.block-name)
-
-```
-
 Peek into the [app.scss](https://github.com/sewebb/iis-styleguide/blob/master/src/app.scss) to see the full set of components.
 
 For javascript it's basically the same thing. In a javascript file:
@@ -51,6 +43,26 @@ import Button from '@internetstiftelsen/styleguide/dist/atoms/button/button';
 
 // Standard ES6 version
 import Button from '@internetstiftelsen/styleguide/src/atoms/button/button';
+
+// Globals and Configuration/Base components are imported by default from the Styleguide Core
+
+// Atoms
+import '@internetstiftelsen/styleguide/src/atoms/button/button';
+import '@internetstiftelsen/styleguide/src/atoms/input/input';
+
+// Molecules
+import '@internetstiftelsen/styleguide/src/molecules/card/card';
+
+// Organisms
+import '~@internetstiftelsen/styleguide/src/organisms/header/header';
+```
+
+### SCSS Mixins explained:
+```scss
+@include e(nested-element) {} // Element (.parent-element__nested-element)
+@include m(modifier-name) {} // Modifier (.parent-element--modifier-name)
+	@include b(block-name) {} // Block (.block-name)
+
 ```
 
 Depending on your browser requirements you may use the src version which is not transpiled to ES5.

package/dist/components.js

@@ -1,13 +1,15 @@
 'use strict';
 
+require('./molecules/form');
+
+require('./atoms/textarea/rich-text');
+
 require('./atoms/password-toggle/password-toggle');
 
 require('./utilities/tab-highlighting/tab-highlighting');
 
 require('./molecules/system-error/system-error');
 
-require('a11y-toggle');
-
 require('./molecules/cookie-disclaimer/cookie-disclaimer');
 
 require('./organisms/accordion/accordion');
@@ -26,12 +28,8 @@ require('./atoms/tooltip/tooltip');
 
 require('./atoms/toggle-high-contrast/toggle-high-contrast');
 
-require('./focusTrap');
-
 require('./atoms/height-limiter/height-limiter');
 
-require('./assets/js/conditional');
-
 require('./atoms/file/file');
 
 require('./atoms/file/filePreview');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.23.9",
+	"version": "2.24.0-beta.0.2",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"
@@ -19,6 +19,7 @@
 		"imagemin": "imagemin --out-dir=public/assets/img src/**/*.{png,jpg,gif}",
 		"build:css": "npm run stylelint && npm run scss && npm run cssmin",
 		"build:js": "npm run eslint && npm run babel && npm run browserify",
+		"build:js:replace:string": "replace \"require('./components');\" \"//require('./components');\" src/ -r --include=\"app.js\"",
 		"build:img": "npm run imagemin",
 		"watch:css": "onchange 'src/**/*.scss' -- npm run build:css",
 		"watch:js": "onchange 'src/**/*.js' -- npm run build:js",
@@ -34,7 +35,7 @@
 		"copy:zip:build": "copyfiles -f src/assets/zip/* build/assets/zip",
 		"copy:fonts:build": "copyfiles -f src/base/fonts/* build/assets/fonts",
 		"copy:build": "npm run copy:images:build && npm run copy:zip:build && npm run copy:fonts:build && npm run copy:videos:build",
-		"build": "npm run build:css && npm run build:js && npm run uglify && npm run build:fractal && npm run copy:build",
+		"build": "npm run build:css && npm run build:js:replace:string && npm run build:js && npm run uglify && npm run package-js && npm run build:fractal && npm run copy:build && npm run create-icons-config",
 		"dev": "concurrently \"npm:start:fractal\" \"npm:watch\" \"npm:copy:local-assets\"",
 		"package-js": "NODE_ENV=production babel src --out-dir dist --ignore src/**/*.config.js,src/app.js",
 		"create-icons-config": "node ./createIconsJson"
@@ -63,6 +64,7 @@
 		"onchange": "^6.1.0",
 		"postcss-class-prefix": "^0.3.0",
 		"postcss-cli": "^8.3.1",
+		"replace": "^1.2.1",
 		"sass": "^1.35.1",
 		"stylelint": "^13.13.1",
 		"uglify-es": "^3.3.9"

package/src/app.js

@@ -1,5 +1,6 @@
-import './molecules/form';
-import './atoms/textarea/rich-text';
+import 'a11y-toggle';
+import './focusTrap';
+import './assets/js/conditional';
 
 require('./atoms/grid-toggle/grid-toggle');
 require('./components');

package/src/atoms/tag/_tag.scss

@@ -6,7 +6,8 @@
 
 	@extend %tag;
 
-	display: inline-block;
+	display: inline-flex;
+	align-items: center;
 	position: relative;
 	z-index: z_index(middleground);
 	margin-right: rhythm(1);
@@ -22,7 +23,42 @@
 		@include color_values($colors, 'border-color', $separator: '-');
 	}
 
+	@include e(text) {
+		color: $color-cyberspace;
+	}
+
 	@include m(light) {
 		@extend %tag-light;
+
+		@include e(text) {
+			color: $color-snow;
+		}
+	}
+
+	> svg {
+		width: $icon-size-small;
+		height: $icon-size-small;
+	}
+
+	@include m(hover-light) {
+		&:hover,
+		&:focus {
+			background-color: currentColor !important;
+
+			[class*=text] {
+				color: $color-snow;
+			}
+		}
+	}
+
+	@include m(hover-dark) {
+		&:hover,
+		&:focus {
+			background-color: currentColor !important;
+
+			[class*=text] {
+				color: $color-cyberspace;
+			}
+		}
 	}
 }

package/src/atoms/tag/tag.config.js

@@ -15,22 +15,60 @@ module.exports = {
 			}
 		},
 		{
-			name: 'Background',
+			name: 'Background variation',
 			context: {
 				text: 'background',
 				href: '#',
 				is_light: false,
-				background_color: 'jade'
+				border: true,
+				border_color: 'ocean',
+				background_color: 'ocean',
+				hover_color: 'light',
+				color: 'ocean'
 			}
 		},
 		{
-			name: 'Combined',
+			name: 'Border variation',
 			context: {
-				text: 'combined',
+				text: 'border',
 				href: '#',
-				is_light: true,
-				background_color: 'ruby'
+				is_light: false,
+				border: true,
+				border_color: 'sandstone',
+				background_color: 'sandstone-light',
+				hover_color: 'light',
+				color: 'sandstone'
+			}
+		},
+		{
+			name: 'With right icon',
+			context: {
+				text: 'with right icon',
+				href: '#',
+				icon: 'pin',
+				icon_align_right: true,
+				is_light: false,
+				border: true,
+				border_color: 'lemon',
+				background_color: 'lemon-light',
+				hover_color: 'dark',
+				color: 'lemon'
+			}
+		},
+		{
+			name: 'With left icon',
+			context: {
+				text: 'with left icon',
+				href: '#',
+				icon: 'pin',
+				icon_align_left: true,
+				is_light: false,
+				border: true,
+				border_color: 'jade',
+				background_color: 'jade-light',
+				hover_color: 'dark',
+				color: 'jade'
 			}
 		}
 	]
-}
+}

package/src/components.js

@@ -1,7 +1,8 @@
+import './molecules/form';
+import './atoms/textarea/rich-text';
 import './atoms/password-toggle/password-toggle';
 import './utilities/tab-highlighting/tab-highlighting';
 import './molecules/system-error/system-error';
-import 'a11y-toggle';
 import './molecules/cookie-disclaimer/cookie-disclaimer';
 import './organisms/accordion/accordion';
 import './organisms/tabs/tabs';
@@ -11,9 +12,7 @@ import './molecules/share/share';
 import './molecules/natural-language-form/natural-language-form';
 import './atoms/tooltip/tooltip';
 import './atoms/toggle-high-contrast/toggle-high-contrast';
-import './focusTrap';
 import './atoms/height-limiter/height-limiter';
-import './assets/js/conditional';
 import './atoms/file/file';
 import './atoms/file/filePreview';
 import './organisms/podcast/podcast';

package/src/configurations/_mixins.scss

@@ -75,6 +75,10 @@
 		border-radius: rem(17.5px);
 		background-color: $color-granit;
 		color: $color-snow;
+
+		[class*=text] {
+			color: $color-snow;
+		}
 	}
 }
 
@@ -86,5 +90,9 @@
 	&:focus {
 		border: 1px solid transparent;
 		background-color: rgba($color-snow, 0.5);
+
+		[class*=text] {
+			color: $color-cyberspace;
+		}
 	}
 }