Merge pull request #1062 from Financial-Times/ui-foundations-base-styles

merge n-ui-foundations into dotcom-ui-base-styles

Author: apaleslimghost

packages/dotcom-ui-base-styles/sass/_mixins.scss

@@ -0,0 +1,15 @@
+// Primitives
+@import 'grid/main';
+@import 'typography/main';
+@import 'util/main';
+@import '@financial-times/o-icons/main';
+@import '@financial-times/o-colors/main';
+@import '@financial-times/o-normalise/main';
+@import '@financial-times/o-visual-effects/main';
+
+@mixin nUiFoundations {
+	@include oNormalise;
+	@include nUiGrid;
+	@include nUiTypography;
+	@include nUiUtil;
+}

packages/dotcom-ui-base-styles/sass/grid/_mixins.scss

@@ -0,0 +1,31 @@
+@mixin _nUiGridOffsetRules($layout, $mode, $columns) {
+	@if $mode == offset {
+		@include oGridOffset($columns);
+	} @else if $mode == pull {
+		@include oGridPull($columns);
+	} @else if $mode == push {
+		@include oGridPush($columns);
+	}
+}
+
+/// Grid column offset
+/// @param {Null|String} $layout-name - S to XL or null
+/// @param {Number} $columns - 1 to 12
+/// @param {String} $mode - offset, push or pull
+@mixin nUiGridOffset($layout-name: null, $columns: 1, $mode: offset) {
+	$selector: $mode + $columns;
+
+	@if $layout-name {
+		$selector: $layout-name + $selector;
+	}
+
+	[data-o-grid-colspan~="#{$selector}"] {
+		@if $layout-name {
+			@include oGridRespondTo($layout-name) {
+				@include _nUiGridOffsetRules($layout-name, $mode, $columns);
+			}
+		} @else {
+			@include _nUiGridOffsetRules($layout-name, $mode, $columns);
+		}
+	}
+}

packages/dotcom-ui-base-styles/sass/grid/main.scss

@@ -0,0 +1,18 @@
+@import '@financial-times/o-grid/main';
+@import 'mixins';
+
+@mixin nUiGrid {
+	@include oGrid($opts: (
+		'bleed': true,
+		'snappy': true,
+		'shuffle-selectors': false,
+		'friendly-selectors': false,
+		'surface': ('current-layout'),
+		'rows': ('compact')
+	));
+
+	// We have disabled "friendly selectors" but output this one as it's useful
+	[data-o-grid-colspan~="center"] {
+		@include oGridCenter();
+	}
+}

packages/dotcom-ui-base-styles/sass/main.scss

@@ -0,0 +1,16 @@
+/*
+
+This includes all the basic Origami styles and mixins you can
+expect to be available when a page uses n-ui
+
+*/
+
+@import 'mixins';
+
+$n-ui-foundations-is-silent: false !default; // 'silent' means don't apply styles
+$n-ui-foundations-applied: false !default;
+
+@if $n-ui-foundations-applied == false and $n-ui-foundations-is-silent == false {
+	$n-ui-foundations-applied: true;
+	@include nUiFoundations;
+}

packages/dotcom-ui-base-styles/sass/typography/main.scss

@@ -0,0 +1,20 @@
+@import '@financial-times/o-fonts/main';
+@import '@financial-times/o-typography/main';
+
+@mixin nUiTypography {
+	@include oFonts($opts: (
+		'financier-display': (
+			('weight': 'regular', 'style': 'normal'),
+			('weight': 'bold', 'style': 'normal'),
+			('weight': 'medium', 'style': 'normal'),
+		),
+		'metric': (
+			('weight': 'regular', 'style': 'normal'),
+			('weight': 'semibold', 'style': 'normal'),
+		)
+	));
+
+	a {
+		@include oTypographyLink();
+	}
+}

packages/dotcom-ui-base-styles/sass/util/README.md

@@ -0,0 +1,39 @@
+# n-ui-foundations utilities
+
+Utility HTML classes for FT.com.
+
+## Usage
+
+### Sass
+
+This module is bundled by default and cannot be configured.
+
+### HTML
+
+#### Layout
+
+#### Display
+
+##### `.n-ui-hide`
+
+Hide an element.
+
+##### `.n-ui-hide@screen`
+
+Hide an element for screens.
+
+##### `.n-ui-hide@print`
+
+Hide an element for print.
+
+##### `.n-ui-hide-enhanced`
+
+Hide an element in the enhanced experience.
+
+##### `.n-ui-hide-core`
+
+Hide an element in the core experience.
+
+#### o-normalise
+
+All of [o-normalise’s helpers](https://github.com/Financial-Times/o-normalise/blob/v1.4.2/main.scss#L12) are included in the output of nUiUtil.

packages/dotcom-ui-base-styles/sass/util/_mixins.scss

@@ -0,0 +1,31 @@
+////
+/// @group n-ui-foundations mixins
+////
+
+/// Basis of n-ui z-indexes
+/// @type Number
+$n-ui-z-index-basis: 100;
+
+/// Ordered list of z-indexes use cases
+/// @type List
+$n-ui-z-index-order: (
+	'welcome',
+	'meganav',
+	'sticky-header',
+	'drawer',
+	'typeahead',
+	'overlay',
+	'notification'
+);
+
+@mixin nUiZIndexFor($use-case) {
+	// scss-lint:disable ImportantRule
+	$index: index($n-ui-z-index-order, $use-case);
+
+	@if $index {
+		z-index: $n-ui-z-index-basis + $index !important;
+	} @else {
+		@warn 'z-index for use case "#{$use-case}" not found.';
+	}
+	// scss-lint:enable ImportantRule
+}

packages/dotcom-ui-base-styles/sass/util/main.scss

@@ -0,0 +1,40 @@
+@import '@financial-times/o-normalise/main';
+@import 'mixins';
+
+//BREAKING CHANGE: .n-ui-clearfix -> .o-normalise-clearfix
+//BREAKING CHANGE: .n-ui-visually-hidden -> .o-normalise-visually-hidden
+//BREAKING CHANGE: Any remaining instances of n-util- -> n-ui-
+
+@mixin nUiUtil {
+
+	//
+	// Display
+	//
+	.n-ui-hide {
+		display: none;
+	}
+
+	@media screen {
+		/* stylelint-disable */
+		.n-ui-hide\@screen {
+		/* stylelint-enable */
+			display: none;
+		}
+
+	}
+
+	@media print {
+		/* stylelint-disable */
+		.n-ui-hide\@print {
+		/* stylelint-enable */
+			display: none;
+		}
+	}
+
+	.no-js .n-ui-hide-no-js,
+	.js .n-ui-hide-js,
+	.core .n-ui-hide-core,
+	.enhanced .n-ui-hide-enhanced {
+		display: none;
+	}
+}