@nice-digital/nds-core 1.3.3-alpha.0 → 2.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-core",
-	"version": "1.3.3-alpha.0",
+	"version": "2.0.0-alpha.0",
 	"description": "Core code for the NICE Design System",
 	"author": "Ian Routledge <ian.routledge@nice.org.uk>",
 	"contributors": [
@@ -33,16 +33,16 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/icons": "^3.0.1-alpha.0",
+		"@nice-digital/icons": "^4.0.0-alpha.0",
 		"prop-types": "^15.7.2",
 		"sass-mq": "^6.0.0"
 	},
 	"peerDependencies": {
-		"react": "^16 || ^17",
-		"react-dom": "^16 || ^17"
+		"react": "^16 || ^17 || ^18",
+		"react-dom": "^16 || ^17 || ^18"
 	},
 	"devDependencies": {
 		"@babel/cli": "^7.5.0"
 	},
-	"gitHead": "8624fdff10d45cdd07dec7f2eda7d2f4db68c474"
+	"gitHead": "66fbcb1c0c01b0afc6b51b0f3fe4719be92996b0"
 }

package/scss/colours/_index.scss

@@ -0,0 +1 @@
+@forward 'tokens/alias';

package/scss/colours/tokens/_alias.scss

@@ -0,0 +1,163 @@
+@use 'global';
+
+// Text, links, focus
+$text: global.$nice-black;
+$text-inverse: global.$white;
+$link: global.$custom-blue-1;
+$link-hover: global.$custom-blue-2;
+$link-visited: global.$custom-purple-1;
+$link-active: global.$nice-black;
+$link-focus: global.$custom-blue-1;
+$link-inverse: global.$white;
+$link-inverse-hover: global.$custom-grey-2;
+$link-inverse-visited: global.$white;
+$link-inverse-active: global.$custom-grey-2;
+$link-inverse-focus: global.$white;
+$code-background: global.$custom-grey-4;
+$mark: global.$custom-yellow-highlight;
+$focus: global.$custom-teal;
+$focus-inverse: global.$white;
+$text-print: global.$black;
+
+// Buttons
+$btn-cta: global.$yellow;
+$btn-cta-hover: global.$custom-yellow-shade;
+$btn-cta-text: global.$nice-black;
+$btn-cta-border: global.$white;
+$btn-primary: global.$black-tint-1;
+$btn-primary-hover: global.$nice-black;
+$btn-primary-text: global.$white;
+$btn-secondary: global.$custom-grey-3;
+$btn-secondary-hover: global.$black-tint-1;
+$btn-secondary-text: global.$white;
+$btn-inverse: global.$white;
+$btn-inverse-hover: global.$custom-grey-2;
+$btn-inverse-text: global.$nice-black;
+
+// Borders
+$border: global.$custom-grey-1;
+$border-selected: global.$nice-teal;
+
+// Status
+$error: global.$custom-red-1;
+$error-background: global.$custom-red-1-tint;
+$info: global.$custom-blue-3;
+$info-background: global.$custom-blue-3-tint;
+$caution: global.$custom-orange-1;
+$caution-background: global.$custom-orange-1-tint;
+$success: global.$custom-green-1;
+$success-background: global.$custom-green-1-tint;
+
+// Fills
+$fill-page-background: global.$nice-cream-tint-1;
+
+// Forms
+$form-group-hint: global.$black-tint-1;
+$checkbox: global.$nice-black;
+$checkbox-hint: global.$black-tint-1;
+$radio: global.$nice-black;
+$radio-hint: global.$black-tint-1;
+
+// Components...
+
+// A-Z list
+$a-z-list-heading-background: global.$white;
+
+// Action banner
+$action-banner-default-background: global.$nice-blue;
+$action-banner-default-border: global.$nice-black;
+$action-banner-subtle-background: global.$nice-cream;
+$action-banner-subtle-border: global.$nice-cream;
+
+// Alphabet
+$alphabet-letter-background: global.$white;
+$alphabet-letter-span: global.$black-tint-1;
+
+// Card
+$card-author: global.$black-tint-1;
+$card-metadata: global.$black-tint-1;
+
+// Callout
+$callout-background: global.$white;
+
+// Column list
+$column-list-boxed-background: global.$white;
+
+// Enhanced pagination
+$enhanced-pagination-current-item-background: global.$custom-grey-2;
+$enhanced-pagination-link-hover-background: global.$white;
+
+// Filters
+$filter-panel-background: global.$custom-grey-4;
+$filter-panel-heading-button-background: global.$custom-grey-2;
+$filter-group-heading-background: global.$custom-grey-2;
+$filter-group-heading-button-background: global.$custom-grey-2;
+$filter-group-heading-button-background-hover: global.$custom-grey-1;
+$filter-option-background: global.$white;
+$filter-option-border: global.$custom-grey-2;
+$filter-option-hover: global.$custom-grey-4;
+$filter-option-hover-border: global.$custom-grey-1;
+$filter-option-text-before-background: global.$white;
+$filter-option-text-before-border: global.$black-tint-1;
+$filter-input-controls-border: global.$custom-grey-2;
+
+// Full bleed
+$full-bleed-background: global.$white;
+$full-bleed-light-background: global.$nice-teal;
+$full-bleed-light-text: global.$white;
+
+// Hero
+$hero-background: global.$nice-blue-tint-1;
+$hero-border: global.$nice-blue-tint-2;
+
+// Horizontal nav
+$horizontal-nav-list-border: global.$nice-black;
+$horizontal-nav-current-link-background: global.$custom-grey-4;
+$horizontal-nav-current-link-border: global.$nice-black;
+$horizontal-nav-current-link: global.$nice-black;
+$horizontal-nav-active-link-mobile: global.$white;
+$horizontal-nav-active-link-mobile-background: global.$nice-teal;
+
+// Icons
+$icons: global.$nice-teal;
+
+// Panels
+$panel-default-background: global.$nice-cream;
+$panel-default-border: global.$custom-grey-2;
+$panel-impact-background: global.$nice-blue;
+$panel-impact-border: global.$nice-blue;
+$panel-impact-alt-background-1: global.$nice-blue;
+$panel-impact-alt-background-2: global.$nice-blue-tint-1;
+$panel-primary-background: global.$white;
+$panel-primary-border: global.$nice-teal-tint-2;
+$panel-inverse-background: global.$black-tint-1;
+
+// Quote
+$quote-left-border: global.$nice-teal;
+
+// Stacked nav
+$stacked-nav-background: global.$white;
+$stacked-nav-active-hint: global.$white;
+$stacked-nav-current-link: global.$custom-grey-4;
+$stacked-nav-current-link-background: global.$nice-teal;
+$stacked-nav-current-link-active: global.$white;
+$stacked-nav-link-hover: global.$custom-grey-2;
+
+// Tables
+$table-heading: global.$white;
+$table-row-odd: global.$nice-cream-tint-1;
+$table-row-even: global.$nice-cream-2;
+
+// Tabs
+$tab-btn-selected: global.$custom-grey-4;
+$tab-pane: global.$custom-grey-4;
+$tab-content: global.$custom-grey-4;
+
+// Tags
+$tag-background: global.$black-tint-1;
+$tag-outline: global.$black-tint-1;
+$tag-outline-background: global.$custom-grey-4;
+$tag-remove: global.$nice-teal;
+$tag-remove-hover-after: global.$nice-black;
+$tag-anchor: global.$white;
+$tag-print: global.$black;

package/scss/colours/tokens/_global.scss

@@ -0,0 +1,47 @@
+// Global tokens - do not reference these directly, use alias tokens instead!
+
+// Primary palette
+$nice-teal: #228096;
+$nice-cream: #f7f4f1;
+$nice-blue: #00436c;
+$white: #fff;
+$black: #000;
+$nice-black: #0e0e0e;
+
+// Secondary palette
+$yellow: #ead054;
+
+// Tertiary palette
+$nice-teal-tint-1: #59a0b0;
+$nice-teal-tint-2: #91c0cb;
+$nice-teal-tint-3: #c8e0e6;
+$nice-blue-tint-1: #407291;
+$nice-blue-tint-2: #80a1b5;
+$nice-blue-tint-3: #bfd0da;
+$nice-cream-1: #ded5ca;
+$nice-cream-2: #e6e0d7;
+$nice-cream-3: #eeeae4;
+$nice-cream-tint-1: #fbfaf8;
+$black-tint-1: #404040;
+$black-tint-2: #808080;
+$black-tint-3: #bfbfbf;
+
+// Custom palette
+$custom-grey-1: #adadad;
+$custom-grey-2: #d6d6d6;
+$custom-grey-3: #666;
+$custom-grey-4: #e9e9e9;
+$custom-blue-1: #005ea5;
+$custom-blue-2: #003761;
+$custom-blue-3: #3479d0;
+$custom-blue-3-tint: #eff4fc;
+$custom-purple-1: #4c2c92;
+$custom-red-1: #b50f23;
+$custom-red-1-tint: #f9eced;
+$custom-orange-1: #dc8a07;
+$custom-orange-1-tint: #fbf7f1;
+$custom-green-1: #68c103;
+$custom-green-1-tint: #f3faeb;
+$custom-yellow-shade: #d6ba32;
+$custom-yellow-highlight: #fff999;
+$custom-teal: #0092a6;

package/scss/{helpers/_helpers-focus.scss → focus/_index.scss}

@@ -1,3 +1,7 @@
+@use '../spacing';
+@use '../colours';
+@use '../utils';
+
 ////
 /// @group helpers
 ////
@@ -6,13 +10,13 @@
 /// @param {Boolean} $rounded whether to use box shadow for border (outline can't be styled to have radius corners)
 /// @output the default focus styles ie background colour and outline
 /// @since 0.1.0
-@mixin nds-default-focus-style($rounded: false) {
+@mixin default-focus-style($rounded: false) {
   @if $rounded {
-    box-shadow: 0 0 0 rem($nds-spacing-x-small) $nds-colour-focus;
-    outline: $nds-spacing-x-small solid transparent;
-    outline-offset: $nds-spacing-x-small;
+    box-shadow: 0 0 0 utils.rem(spacing.$x-small) colours.$focus;
+    outline: spacing.$x-small solid transparent;
+    outline-offset: spacing.$x-small;
   } @else {
-    outline: rem($nds-spacing-x-small) solid $nds-colour-focus;
+    outline: utils.rem(spacing.$x-small) solid colours.$focus;
   }
 }
 
@@ -20,24 +24,24 @@
 /// on an inverse (dark) background
 /// @output the inverse focus styles ie background colour and outline
 /// @since 0.3.1
-@mixin nds-inverse-focus-style {
-  outline: rem($nds-spacing-x-small) solid $nds-colour-focus-inverse;
+@mixin inverse-focus-style {
+  outline: utils.rem(spacing.$x-small) solid colours.$focus-inverse;
 }
 
-@mixin nds-default-button-focus {
+@mixin default-button-focus {
   .btn,
   button {
     &:focus {
-      @include nds-default-focus-style;
+      @include default-focus-style;
     }
   }
 }
 
-@mixin nds-inverse-button-focus {
+@mixin inverse-button-focus {
   .btn,
   button {
     &:focus {
-      @include nds-inverse-focus-style;
+      @include inverse-focus-style;
     }
   }
 }

package/scss/{helpers/_helpers-glyphs.scss → glyphs/_index.scss}

@@ -1,10 +1,12 @@
+@use 'sass:map';
+
 ////
 /// @group helpers
 ////
 
 /// A map of glyph name to code point (character entity reference).
 /// Avoids magic strings like `content: '\201C'` within our SASS.
-/// Usual usage is via the `get-glyph` function, e.g. `nds-get-glyph(greater-than)`.
+/// Usual usage is via the `get-glyph` function, e.g. `get-glyph(greater-than)`.
 /// @see get-glyph
 /// @link https://css-tricks.com/snippets/html/glyphs/
 /// @prop {String} bullet [2022] Bullet (•)
@@ -17,7 +19,7 @@
 /// @prop {String} punc-space [02008] Punctuation space (small, width of a comma)
 /// @prop {String} zero-width-space [0200B] Zero width space
 /// @since 0.1.0
-$nds-glyphs: (
+$glyphs: (
   bullet: '2022',
   copyright: '00a9',
   greater-than: '003e',
@@ -31,29 +33,29 @@ $nds-glyphs: (
 ) !default;
 
 /// Gets a glyph code, or several, (character entity reference) from the
-/// `$nds-glyphs` map, matching the given `$names`. Usually used with the content
+/// `$glyphs` map, matching the given `$names`. Usually used with the content
 /// property for psuedo elements, to avoid use of magic character reference strings.
 /// @param {argList} $names The name(s) of the glyph(s) to get
 /// @returns {string} The character entity reference code(s) as a string, e.g. '\201C' or '\02008\029C9'
-/// @see $nds-glyphs
+/// @see $glyphs
 /// @since 0.1.0
 /// @example Single glyph
 ///   .rule {
-///     content: nds-get-glyph(greater-than);
+///     content: get-glyph(greater-than);
 ///   }
 /// @example Multiple glyphs together
 ///   .rule {
-///     content: nds-get-glyph(punc-space, box-box);
+///     content: get-glyph(punc-space, box-box);
 ///   }
-@function nds-get-glyph($names...) {
+@function get-glyph($names...) {
   $codes: '';
 
   @each $name in $names {
-    @if map-has-key($nds-glyphs, $name) {
-      $code: map-get($nds-glyphs, $name);
+    @if map.has-key($glyphs, $name) {
+      $code: map.get($glyphs, $name);
       $codes: $codes + '\\#{$code}';
     } @else {
-      @error 'Glyph with name #{$name} could not be found in the $nds-glyphs map';
+      @error 'Glyph with name #{$name} could not be found in the $glyphs map';
     }
   }
 

package/scss/layout/_index.scss

@@ -0,0 +1,43 @@
+@use '../spacing';
+@use '../utils';
+
+/// The maximum width of the default container, in pixels
+/// @since 0.5.2
+$container-max-width: 1170;
+
+/// The gutter for the default container
+/// @since 1.0.0
+$container-gutter: spacing.$medium;
+
+/// The maximum content width to ensure good readability
+/// @since 1.7.0
+$readable-width: 66ch;
+
+/// Container placeholder.
+/// @since 1.0.0
+@mixin container {
+  margin: auto;
+  max-width: utils.rem($container-max-width);
+  width: 96%; // IE11 support for calc not consistent https://caniuse.com/calc (See "Known issues")
+  width: calc(100% - #{rem($container-gutter * 2)});
+}
+
+/// Make an element adapt its height to fit floated children, and clear floats in both directions.
+/// @since 0.1.0
+@mixin clearfix {
+  &:before,
+  &:after {
+    content: ' ';
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
+}
+
+/// Placeholder for clearfix
+/// @since 0.1.0
+%clearfix {
+  @include clearfix;
+}

package/scss/media-queries/_index.scss

@@ -0,0 +1,29 @@
+/// Extra small break point
+/// @since 0.2.0
+$xs: 400px !default;
+
+/// 'Small' break point. Roughly portrait tablets.
+/// @since 0.2.0
+$sm: 600px !default;
+
+/// 'Medium' break point. Roughly landscape tablets.
+/// @since 0.2.0
+$md: 900px !default;
+
+/// 'Large' break point. Roughly 'dektops'.
+/// @since 0.2.0
+$lg: 1200px !default;
+
+/// 'Extra large' break point for wide screens
+/// @since 0.2.0
+$xl: 1600px !default;
+
+@forward 'vendor/mq' with (
+  $breakpoints: (
+    xs: $xs,
+    sm: $sm,
+    md: $md,
+    lg: $lg,
+    xl: $xl
+  )
+);