@softheon/armature 10.24.1 → 10.26.2-beta.0

package/README.md

@@ -399,6 +399,12 @@ export class MyClass {
 }
 ```
 
+## Colors with opacity
+
+The theme palettes all offer a rgb value through css variables, the following naming convention is used `--{{palette}}-color-{{partsNumber}}-parts-rgb`. So in order to get an opacity of .2 on the primary color, 500 parts the following css can be used
+
+`rgba(var(--primary-color-500-parts-rgb), .2)`
+
 # Armature Navigation
 
 `<sof-ar-navigation></sof-ar-navigation>` is a mobile-responsive navigation component. It structures the application view content to the right and the navigation to the left.
@@ -421,10 +427,12 @@ export class MyClass {
          2. `route` - the sub-node route
 5. Configure Armature component settings in the TS
    1. `[settings]` - these are the required settings to configure your navigation
-      1. `fontAwesomeMenuIcon`  the Header Menu FontAwesome icon
-      2. `mainMenuText` the main menu text that appears in the mobile SubNav
-      3. `headerHeight` the header height
-      4. `menuButtonSRText` the menu button screen reader text
+      1. `fontAwesomeMenuIcon` the Header toggle navigation icon when navigation is open
+      2. `fontAwesomeMenuIconClosed` the Header toggle navigation icon when navigation is closed
+      3. `mainMenuText` the main menu text that appears in the mobile SubNav
+      4. `headerHeight` the header height
+      5. `menuButtonSRText` the menu button screen reader text
+      6. `allowNavToggle` whether to allow navigation toggle
    2. `[advancedSettings]`- these settings are optional, and only needed for advanced height/offset customizations. These will override `headerHeight` in `[settings]`.
       1. `topGapDesktop` & `topGapMobile`- the navigation top gap
       2. `marginTopDesktop/marginTopMobile`- the navigation margin top
@@ -489,28 +497,30 @@ The navigation data consists of an array of `NavNode`s:
 
 The `[settings]` required input receives a `NavigationSettings` object in order to configure your navigation.
 
-1. `fontAwesomeMenuIcon`  the Header Menu FontAwesome icon string
-2. `mainMenuText` the main menu text that appears in the mobile SubNav
-3. `headerHeight` the header height number
-4. `menuButtonSRText` the menu button screen reader text
-5. `menuStyle` (optional - 'static' | 'stepper' | 'progress') static by default, changes the menu between static, stepper and progress
-6. `hideNavigation` true if hiding the navigation container, defaulted to false
-7. `displayNumbers`true if the navigaiton sections should be numbered, defaulted to true
-8. `progressSectionCompleteIcon` the Progress menu completed section icon string  
-9. `progressSectionFutureIcon` the Progress menu future section icon string
-10. `progressSectionCurrentIcon` the Progress menu current section icon string
-11. `progressMenuCompleteIcon` the Progress menu item complete icon string
-12. `showProgressBar` true if the Progress menu should also display the progress bar, defaulted to true
-13. `sideNavWidthDesktop` the side navigation width for desktop, defaulted to 500
-14. `sideNavWidthMobile` the side navigation width for mobile, defaulted to 500
-15. `progressMenuWidth` the progress menu dropdown width, defaulted to 280
-16. `overrideNavigation` overrides the navigation and enables all routes (to be used for testing) defaulted to false
-17. `maxContentWidthDesktop` the maximum width for the desktop content, defaulted to 100%
-18. `maxContentWidthMobile` the maximum width for the mobile content, defaulted to 100%
-19. `useCustomMobileFooter` true if the navigation is using a custom mobile footer. This hides the language options and signout buttons for mobile nav
-20. `customUserName` the custom user name to be displayed in the mobile side nav
-21. `toggleProgressNavParentIndex` the custom parent node index to be set when menu style is toggled to progress navigation
-22. `toggleProgressNavChildIndex` the custom child node index to be set when menu style is toggled to progress navigation
+1. `fontAwesomeMenuIcon` the Header toggle navigation icon when navigation is open
+2. `fontAwesomeMenuIconClosed` the Header toggle navigation icon when navigation is closed
+3. `mainMenuText` the main menu text that appears in the mobile SubNav
+4. `headerHeight` the header height number
+5. `menuButtonSRText` the menu button screen reader text
+6. `menuStyle` (optional - 'static' | 'stepper' | 'progress') static by default, changes the menu between static, stepper and progress
+7. `hideNavigation` true if hiding the navigation container, defaulted to false
+8. `displayNumbers`true if the navigaiton sections should be numbered, defaulted to true
+9. `progressSectionCompleteIcon` the Progress menu completed section icon string  
+10. `progressSectionFutureIcon` the Progress menu future section icon string
+11. `progressSectionCurrentIcon` the Progress menu current section icon string
+12. `progressMenuCompleteIcon` the Progress menu item complete icon string
+13. `showProgressBar` true if the Progress menu should also display the progress bar, defaulted to true
+14. `sideNavWidthDesktop` the side navigation width for desktop, defaulted to 500
+15. `sideNavWidthMobile` the side navigation width for mobile, defaulted to 500
+16. `progressMenuWidth` the progress menu dropdown width, defaulted to 280
+17. `overrideNavigation` overrides the navigation and enables all routes (to be used for testing) defaulted to false
+18. `maxContentWidthDesktop` the maximum width for the desktop content, defaulted to 100%
+19. `maxContentWidthMobile` the maximum width for the mobile content, defaulted to 100%
+20. `useCustomMobileFooter` true if the navigation is using a custom mobile footer. This hides the language options and signout buttons for mobile nav
+21. `customUserName` the custom user name to be displayed in the mobile side nav
+22. `toggleProgressNavParentIndex` the custom parent node index to be set when menu style is toggled to progress navigation
+23. `toggleProgressNavChildIndex` the custom child node index to be set when menu style is toggled to progress navigation
+24. `allowNavToggle` whether to allow navigation toggle
 
 ### Theme Settings
 
@@ -551,10 +561,12 @@ The `[themeSettings]` - required input receives a `ThemeSettings` object in orde
 
     // the navigation settings
     this.exampleSettings = {
-      fontAwesomeMenuIcon: 'fal fa-bars',
+      fontAwesomeMenuIcon: 'fas fa-angle-double-left',
+      fontAwesomeMenuIconClosed: 'fas fa-angle-double-right',
       mainMenuText: 'MAIN MENU',
       headerHeight: 60,
-      menuButtonSRText: 'Menu Button'
+      menuButtonSRText: 'Menu Button',
+      allowNagToggle: true
     };
 
     // the navigation
@@ -770,7 +782,7 @@ i.e.
    5. `sof-ar-super-header` this is for the header at the very top of the page
 4. Configure Armature component settings in the TS
    1. `[settings]` - these are the required settings to configure your header
-      1. `armatureNavigation` if the header is being paired with the armature navigation. this will auto create the room on mobile for the navigation icon
+      1. `armatureNavigation` if the header is being paired with the armature navigation. this will auto create the room for the navigation icon
       2. `displayLogo` whether or not to display the logo, default false
       3. `logoUrl` the logo url
       4. `logoAltText` the logo alt text
@@ -781,6 +793,7 @@ i.e.
       9. `dropDownAriaText` the drop down menu aria text
       10. `headerDropDownIcon` the header menu drop down icon
       11. `displaySuperHeader` whether or not to show the super header
+      12. `createSpaceForNavToggle` whether to create space for the nav toggle button, regardless of screen size
    2. `[themeSettings]` - this will colorize your header.
       1. `headerColor` the header color - uses a neutral background color based on the current theme (light or dark). can be primary, secondary, or warn
       2. `iconColor` using color string icon color
@@ -822,6 +835,7 @@ These settings will display the header with a logo.
   /** Armature Header - settings */
   public exampleHeaderSettings: HeaderSettings = {
     armatureNavigation: true,
+    createSpaceForNavToggle: true,
     displayLogo: true,
     logoUrl: './assets/logos/logo.svg',
     logoAltText: 'the example portal header logo',

package/assets/styles/arm-theme.scss

@@ -28,6 +28,21 @@
     --primary-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --primary-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
+    --primary-color-50-parts-rgb: 237, 244, 255;
+    --primary-color-100-parts-rgb: 185, 212, 252;
+    --primary-color-200-parts-rgb: 138, 183, 251;
+    --primary-color-300-parts-rgb: 91, 154, 249;
+    --primary-color-400-parts-rgb: 55, 132, 247;
+    --primary-color-500-parts-rgb: 20, 110, 246;
+    --primary-color-600-parts-rgb: 18, 102, 245;
+    --primary-color-700-parts-rgb: 14, 91, 243;
+    --primary-color-800-parts-rgb: 11, 81, 242;
+    --primary-color-900-parts-rgb: 6, 63, 239;
+    --primary-color-A100-parts-rgb: 255, 255, 255;
+    --primary-color-A200-parts-rgb: 228, 233, 255;
+    --primary-color-A400-parts-rgb: 177, 192, 255;
+    --primary-color-A700-parts-rgb: 151, 172, 255;
+
     --accent-color-50-parts: #e0f2f1;
     --accent-color-100-parts: #b2dfdb;
     --accent-color-200-parts: #80cbc4;
@@ -57,6 +72,21 @@
     --accent-color-contrast-A400-parts: #000000;
     --accent-color-contrast-A700-parts: #000000;
 
+    --accent-color-50-parts-rgb: 224, 242, 241;
+    --accent-color-100-parts-rgb: 178, 223, 219;
+    --accent-color-200-parts-rgb: 128, 203, 196;
+    --accent-color-300-parts-rgb: 77, 182, 172;
+    --accent-color-400-parts-rgb: 38, 166, 154;
+    --accent-color-500-parts-rgb: 0, 150, 136;
+    --accent-color-600-parts-rgb: 0, 137, 123;
+    --accent-color-700-parts-rgb: 0, 121, 107;
+    --accent-color-800-parts-rgb: 0, 105, 92;
+    --accent-color-900-parts-rgb: 0, 77, 64;
+    --accent-color-A100-parts-rgb: 167, 255, 235;
+    --accent-color-A200-parts-rgb: 100, 255, 218;
+    --accent-color-A400-parts-rgb: 29, 233, 182;
+    --accent-color-A700-parts-rgb: 0, 191, 165;
+
     --warn-color-50-parts: #fdf3e7;
     --warn-color-100-parts: #fbe1c3;
     --warn-color-200-parts: #f9ce9c;
@@ -86,6 +116,21 @@
     --warn-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --warn-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
+    --warn-color-50-parts-rgb: 253, 243, 231;
+    --warn-color-100-parts-rgb: 251, 225, 195;
+    --warn-color-200-parts-rgb: 249, 206, 156;
+    --warn-color-300-parts-rgb: 246, 186, 116;
+    --warn-color-400-parts-rgb: 244, 171, 86;
+    --warn-color-500-parts-rgb: 242, 156, 56;
+    --warn-color-600-parts-rgb: 240, 148, 50;
+    --warn-color-700-parts-rgb: 238, 138, 43;
+    --warn-color-800-parts-rgb: 236, 128, 36;
+    --warn-color-900-parts-rgb: 232, 110, 23;
+    --warn-color-A100-parts-rgb: 255, 255, 255;
+    --warn-color-A200-parts-rgb: 255, 240, 230;
+    --warn-color-A400-parts-rgb: 255, 208, 179;
+    --warn-color-A700-parts-rgb: 255, 193, 154;
+
     --info-color-50-parts: #e7f3fb;
     --info-color-100-parts: #c2e0f4;
     --info-color-200-parts: #9acced;
@@ -115,6 +160,21 @@
     --info-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --info-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
+    --info-color-50-parts-rgb: 231, 243, 251;
+    --info-color-100-parts-rgb: 194, 224, 244;
+    --info-color-200-parts-rgb: 154, 204, 237;
+    --info-color-300-parts-rgb: 113, 183, 230;
+    --info-color-400-parts-rgb: 82, 167, 224;
+    --info-color-500-parts-rgb: 52, 152, 219;
+    --info-color-600-parts-rgb: 47, 144, 215;
+    --info-color-700-parts-rgb: 39, 133, 210;
+    --info-color-800-parts-rgb: 33, 123, 205;
+    --info-color-900-parts-rgb: 21, 106, 196;
+    --info-color-A100-parts-rgb: 245, 249, 255;
+    --info-color-A200-parts-rgb: 194, 221, 255;
+    --info-color-A400-parts-rgb: 143, 193, 255;
+    --info-color-A700-parts-rgb: 117, 179, 255;
+
     --success-color-50-parts: #edf5eb;
     --success-color-100-parts: #d1e6ce;
     --success-color-200-parts: #b3d6ae;
@@ -144,6 +204,21 @@
     --success-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --success-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
 
+    --success-color-50-parts-rgb: 237, 245, 235;
+    --success-color-100-parts-rgb: 209, 230, 206;
+    --success-color-200-parts-rgb: 179, 214, 174;
+    --success-color-300-parts-rgb: 149, 197, 141;
+    --success-color-400-parts-rgb: 126, 184, 116;
+    --success-color-500-parts-rgb: 103, 172, 92;
+    --success-color-600-parts-rgb: 95, 165, 84;
+    --success-color-700-parts-rgb: 84, 155, 74;
+    --success-color-800-parts-rgb: 74, 146, 65;
+    --success-color-900-parts-rgb: 57, 130, 48;
+    --success-color-A100-parts-rgb: 208, 255, 203;
+    --success-color-A200-parts-rgb: 162, 255, 152;
+    --success-color-A400-parts-rgb: 116, 255, 101;
+    --success-color-A700-parts-rgb: 93, 255, 76;
+
     --error-color-50-parts: #fceae8;
     --error-color-100-parts: #f8c9c5;
     --error-color-200-parts: #f3a69e;
@@ -172,6 +247,21 @@
     --error-color-contrast-A200-parts: rgba(0, 0, 0, 0.87);
     --error-color-contrast-A400-parts: rgba(0, 0, 0, 0.87);
     --error-color-contrast-A700-parts: rgba(0, 0, 0, 0.87);
+
+    --error-color-50-parts-rgb: 252, 234, 232;
+    --error-color-100-parts-rgb: 248, 201, 197;
+    --error-color-200-parts-rgb: 248, 201, 197;
+    --error-color-300-parts-rgb: 238, 130, 119;
+    --error-color-400-parts-rgb: 235, 103, 89;
+    --error-color-500-parts-rgb: 231, 76, 60;
+    --error-color-600-parts-rgb: 228, 69, 54;
+    --error-color-700-parts-rgb: 224, 60, 46;
+    --error-color-800-parts-rgb: 221, 51, 39;
+    --error-color-900-parts-rgb: 215, 36, 26;
+    --error-color-A100-parts-rgb: 255, 255, 255;
+    --error-color-A200-parts-rgb: 255, 217, 215;
+    --error-color-A400-parts-rgb: 255, 168, 164;
+    --error-color-A700-parts-rgb: 255, 143, 139;
 }
 
 $arm-primary: (