@nice-digital/nds-core 1.3.2 → 1.3.5-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-core",
-	"version": "1.3.2",
+	"version": "1.3.5-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.0",
+		"@nice-digital/icons": "^3.0.2-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": "db5e29bc9fa8afa7e33c19a8e06a65adafd99bc5"
+	"gitHead": "0ddae81edebd757a52ca6a2838610049a83acebd"
 }

package/scss/colours/_index.scss

@@ -0,0 +1,2 @@
+@forward "nice-brand";
+@forward "semantic";

package/scss/{settings/_settings-colours-nice.scss → colours/_nice-brand.scss}

@@ -6,16 +6,16 @@
 
 /// NICE Black. Part of the primary palette.
 /// @since 0.2.0
-$nds-colour-nice-black: #222;
+$nice-black: #222;
 
 /// NICE White. Part of the primary palette
 /// @since 0.2.0
-$nds-colour-nice-white: #fff;
+$nice-white: #fff;
 
 /// NICE Teal. Part of the primary palette.
 /// First choice of colour for supporting
 /// @since 0.2.0
-$nds-colour-nice-teal: #004650;
+$nice-teal: #004650;
 
 // SECONDARY PALETTE
 
@@ -23,58 +23,58 @@ $nds-colour-nice-teal: #004650;
 /// panel background to highlight a particular section of content,
 /// in which case font colour must be pure white (NICE White) to make text legible.
 /// @since 0.2.0
-$nds-colour-nice-purple: #451551;
+$nice-purple: #451551;
 
 /// Cool Teal. Part of the secondary palette.
 /// @since 0.2.0
-$nds-colour-nice-cool-teal: #00506a;
+$nice-cool-teal: #00506a;
 
 /// Rich Black. Part of the secondary palette.
 /// @since 0.2.0
-$nds-colour-nice-rich-black: #0e0e0e;
+$nice-rich-black: #0e0e0e;
 
 /// Dark Grey. Part of the secondary palette.
 /// @since 0.2.0
-$nds-colour-nice-dark-grey: #393939;
+$nice-dark-grey: #393939;
 
 /// Grey 1. Part of the secondary palette.
 /// @since 0.2.0
-$nds-colour-nice-grey-1: #adadad;
+$nice-grey-1: #adadad;
 
 /// Grey 2. Part of the secondary palette.
 /// @since 0.2.0
-$nds-colour-nice-grey-2: #d6d6d6;
+$nice-grey-2: #d6d6d6;
 
 /// Grey 3. Part of the secondary palette.
 /// @since 0.2.0
-$nds-colour-nice-grey-3: #e9e9e9;
+$nice-grey-3: #e9e9e9;
 
 // TERTIARY PALETTE
 
 /// Blue 1. Part of the tertiary palette.
 /// @since 0.2.0
-$nds-colour-nice-blue-1: #233746;
+$nice-blue-1: #233746;
 
 /// Blue 2. Part of the tertiary palette.
 /// @since 0.2.0
-$nds-colour-nice-blue-2: #314c60;
+$nice-blue-2: #314c60;
 
 /// Blue 3. Part of the tertiary palette.
 /// @since 0.2.0
-$nds-colour-nice-blue-3: #517489;
+$nice-blue-3: #517489;
 
 /// Ice Teal. Part of the tertiary palette.
 /// @since 0.2.0
-$nds-colour-nice-ice-teal: #a2bdc1;
+$nice-ice-teal: #a2bdc1;
 
 /// Teal 1. Part of the tertiary palette.
 /// @since 0.2.0
-$nds-colour-nice-teal-1: #4f7d83;
+$nice-teal-1: #4f7d83;
 
 /// Teal 2. Part of the tertiary palette.
 /// @since 0.2.0
-$nds-colour-nice-teal-2: #18646e;
+$nice-teal-2: #18646e;
 
 /// Teal 3. Part of the tertiary palette.
 /// @since 0.2.0
-$nds-colour-nice-teal-3: #15434a;
+$nice-teal-3: #15434a;

package/scss/{settings/_settings-colours-semantic.scss → colours/_semantic.scss}

@@ -2,15 +2,15 @@
 /// @group colors
 ////
 
-@import 'settings-colours-nice';
+@use 'nice-brand';
 
 /// True black, used for print styles
 /// @since 0.2.0
-$nds-colour-true-black: #000;
+$true-black: #000;
 
 /// True white, used for print styles
 /// @since 0.2.0
-$nds-colour-true-white: #fff;
+$true-white: #fff;
 
 // GLOBAL
 
@@ -20,228 +20,228 @@ $nds-colour-true-white: #fff;
 /// reducing contrast. See https://ux.stackexchange.com/a/73918/92081
 /// for a more detailed explanation.
 /// @since 0.2.0
-$nds-colour-body: #f4f4f4;
+$body: #f4f4f4;
 
 /// Standard, primary body text colour. Off-black, to slightly reduce
 /// contrast in an attempt to make text easier to read for those with
-/// 'visual stress', see also $nds-colour-body.
+/// 'visual stress', see also $body.
 /// @since 0.2.0
-$nds-colour-text: $nds-colour-nice-black;
+$text: nice-brand.$nice-black;
 
 /// Subtle text colour
 /// @since 0.2.0
-$nds-colour-text-subtle: $nds-colour-nice-grey-1;
+$text-subtle: nice-brand.$nice-grey-1;
 
 /// Inverse body text colour for use on dark background
 /// @since 0.2.2
-$nds-colour-text-inverse: $nds-colour-nice-white;
+$text-inverse: nice-brand.$nice-white;
 
 /// Icons colour
 /// @since 0.2.0
-$nds-colour-icons: $nds-colour-nice-teal;
+$icons: nice-brand.$nice-teal;
 
 // LINKS
 
 /// Link text colour
 /// @since 0.2.0
-$nds-colour-link: #005ea5;
+$link: #005ea5;
 
 /// Link hover colour
 /// @since 0.2.0
-$nds-colour-link-hover: #003761;
+$link-hover: #003761;
 
 /// Link visited colour
 /// @since 0.2.0
-$nds-colour-link-visited: #4c2c92;
+$link-visited: #4c2c92;
 
 /// Link active colour
 /// @since 0.2.0
-$nds-colour-link-active: $nds-colour-text;
+$link-active: $text;
 
 /// Link focus text colour
 /// @since 0.2.11
-$nds-colour-link-focus-text: $nds-colour-link;
+$link-focus-text: $link;
 
 // INVERSE LINKS
 
 /// Inverse link text colour
 /// @since 0.2.9
-$nds-colour-link-inverse: $nds-colour-text-inverse;
+$link-inverse: $text-inverse;
 
 /// Inverse link hover text colour
 /// @since 0.2.9
-$nds-colour-link-inverse-hover: $nds-colour-nice-grey-2;
+$link-inverse-hover: nice-brand.$nice-grey-2;
 
 /// Inverse link visited text colour. Same as normal inverse link colour to ensure minimum 4.5:1 colour contrast across various dark backgrounds.
 /// @since 0.2.9
-$nds-colour-link-inverse-visited: $nds-colour-link-inverse;
+$link-inverse-visited: $link-inverse;
 
 /// Inverse link active text colour
 /// @since 0.2.9
-$nds-colour-link-inverse-active: $nds-colour-link-inverse-hover;
+$link-inverse-active: $link-inverse-hover;
 
 /// Inverse link focus text colour
 /// @since 0.2.9
-$nds-colour-link-inverse-focus-text: $nds-colour-link-inverse;
+$link-inverse-focus-text: $link-inverse;
 
 // FOCUS
 
 /// Focus colour
 /// @since 0.2.0
-$nds-colour-focus: #0092a6;
+$focus: #0092a6;
 
 /// Focus colour
 /// @since 0.3.1
-$nds-colour-focus-inverse: $nds-colour-link-inverse;
+$focus-inverse: $link-inverse;
 
 // CTA BUTTONS
 
 /// CTA button background colour
 /// @since 0.2.2
-$nds-colour-btn-cta: $nds-colour-nice-purple;
+$btn-cta: nice-brand.$nice-purple;
 
 /// CTA button hover colour
 /// @since 0.2.2
-$nds-colour-btn-cta-hover: #260b2d;
+$btn-cta-hover: #260b2d;
 
 /// CTA button text colour
 /// @since 0.2.2
-$nds-colour-btn-cta-text: $nds-colour-nice-white;
+$btn-cta-text: nice-brand.$nice-white;
 
 // PRIMARY BUTTONS
 
 /// Primary button background colour
 /// @since 0.2.2
-$nds-colour-btn-primary: $nds-colour-nice-dark-grey;
+$btn-primary: nice-brand.$nice-dark-grey;
 
 /// Primary button hover colour
 /// @since 0.2.2
-$nds-colour-btn-primary-hover: $nds-colour-nice-rich-black;
+$btn-primary-hover: nice-brand.$nice-rich-black;
 
 /// Primary button text colour
 /// @since 0.2.2
-$nds-colour-btn-primary-text: $nds-colour-nice-white;
+$btn-primary-text: nice-brand.$nice-white;
 
 // SECONDARY BUTTONS
 
 /// Secondary button background colour
 /// @since 0.2.2
-$nds-colour-btn-secondary: #666;
+$btn-secondary: #666;
 
 /// Secondary button hover colour
 /// @since 0.2.2
-$nds-colour-btn-secondary-hover: #333;
+$btn-secondary-hover: #333;
 
 /// Primary button text colour
 /// @since 0.2.2
-$nds-colour-btn-secondary-text: $nds-colour-nice-white;
+$btn-secondary-text: nice-brand.$nice-white;
 
 // LIGHT BUTTONS
 
 /// Inverse (light) button background colour
 /// @since 0.2.2
-$nds-colour-btn-inverse: $nds-colour-nice-white;
+$btn-inverse: nice-brand.$nice-white;
 
 /// Inverse (light) button hover colour
 /// @since 0.2.2
-$nds-colour-btn-inverse-hover: $nds-colour-nice-grey-3;
+$btn-inverse-hover: nice-brand.$nice-grey-3;
 
 /// Inverse (light) button text colour
 /// @since 0.2.2
-$nds-colour-btn-inverse-text: $nds-colour-nice-rich-black;
+$btn-inverse-text: nice-brand.$nice-rich-black;
 
 // BACKGROUNDS/BORDERS
 
 /// Borders, separators, rules, keylines etc.
 /// @since 0.2.0
-$nds-colour-border: $nds-colour-nice-grey-1;
+$border: nice-brand.$nice-grey-1;
 
 /// Focused Borders, separators, rules, keylines etc.
 /// @since 0.4.2
-$nds-colour-border-focus: $nds-colour-nice-blue-3;
+$border-focus: nice-brand.$nice-blue-3;
 
 // NOTIFICATIONS/BANNERS
 
 /// Agile lifecycle phase banner
 /// @since 0.2.2
-$nds-colour-agile-phase: #009ae9;
+$agile-phase: #009ae9;
 
 /// Discovery agile lifecycle phase
 /// @since 0.2.0
-/// @deprecated Use $nds-colour-agile-phase instead
-$nds-colour-discovery: #b8008e;
+/// @deprecated Use $agile-phase instead
+$discovery: #b8008e;
 
 /// Alpha badges and banners
 /// @since 0.2.0
-/// @deprecated Use $nds-colour-agile-phase instead
-$nds-colour-alpha: #d5367f;
+/// @deprecated Use $agile-phase instead
+$alpha: #d5367f;
 
 /// Beta badges and banners
 /// @since 0.2.0
-/// @deprecated Use $nds-colour-agile-phase instead
-$nds-colour-beta: #bd5826;
+/// @deprecated Use $agile-phase instead
+$beta: #bd5826;
 
 /// Live badges and banners
 /// @since 0.2.0
-/// @deprecated Use $nds-colour-agile-phase instead
-$nds-colour-live: #578137;
+/// @deprecated Use $agile-phase instead
+$live: #578137;
 
 /// Error text and border colour
 /// @since 1.7.0
-$nds-colour-error: #b50f23;
+$error: #b50f23;
 
 /// Error background colour
 /// @since 1.7.0
-$nds-colour-error-background: #f9eced;
+$error-background: #f9eced;
 
 /// Caution text and border colour
 /// @since 1.7.0
-$nds-colour-caution: #dc8a07;
+$caution: #dc8a07;
 
 /// Caution background colour
 /// @since 1.7.0
-$nds-colour-caution-background: #fbf7f1;
+$caution-background: #fbf7f1;
 
 /// Info text and border colour
 /// @since 1.7.0
-$nds-colour-info: #3479d0;
+$info: #3479d0;
 
 /// Info background colour
 /// @since 1.7.0
-$nds-colour-info-background: #eff4fc;
+$info-background: #eff4fc;
 
 /// Success text and border colour
 /// @since 1.7.0
-$nds-colour-success: #68c103;
+$success: #68c103;
 
 /// Success background colour
 /// @since 1.7.0
-$nds-colour-success-background: #f3faeb;
+$success-background: #f3faeb;
 
 /// <mark> tag highlighter colour
 /// @since 1.2.4
-$nds-colour-mark: #fff999;
+$mark: #fff999;
 
 // GUIDANCE TYPES
 
 /// New guidance colour
 /// @since 0.3.0
-$nds-colour-guidance-new: $nds-colour-nice-purple;
+$guidance-new: nice-brand.$nice-purple;
 
 /// Updated guidance colour
 /// @since 0.3.0
-$nds-colour-guidance-updated: $nds-colour-nice-blue-3;
+$guidance-updated: nice-brand.$nice-blue-3;
 
 /// In consultation guidance colour
 /// @since 0.3.0
-$nds-colour-guidance-consultation: #557021;
+$guidance-consultation: #557021;
 
 // HERO
 
 /// Background colour for the hero component
 /// @since 0.5.2
-$nds-colour-hero-background: $nds-colour-nice-teal-2;
+$hero-background: nice-brand.$nice-teal-2;
 
 /// Colour for the border in the hero component
 /// @since 0.5.2
-$nds-colour-hero-border: $nds-colour-nice-teal-3;
+$hero-border: nice-brand.$nice-teal-3;

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}

@@ -4,7 +4,7 @@
 
 /// 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 +17,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 +31,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
+%nds-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
+  )
+);