feat: Add compact variant to GSB (#1402)

* feat(gsb): change slim to compact, add stories

* chore: changeset

Author: micahjones13

.changeset/nervous-beers-buy.md

@@ -0,0 +1,11 @@
+---
+"@astrouxds/angular": minor
+"@astrouxds/astro-web-components": minor
+"angular-workspace": minor
+"astro-angular": minor
+"astro-react": minor
+"astro-vue": minor
+"@astrouxds/react": minor
+---
+
+Add compact prop to global status bar

packages/web-components/src/components.d.ts

@@ -307,6 +307,10 @@ export namespace Components {
           * Sets the version of the application to be displayed in the app-meta element
          */
         "appVersion"?: string;
+        /**
+          * Reduces the height of the global status bar
+         */
+        "compact": boolean;
         /**
           * Declares whether the menu-icon will be shown in the left-side slot
          */
@@ -35884,6 +35888,10 @@ declare namespace LocalJSX {
           * Sets the version of the application to be displayed in the app-meta element
          */
         "appVersion"?: string;
+        /**
+          * Reduces the height of the global status bar
+         */
+        "compact"?: boolean;
         /**
           * Declares whether the menu-icon will be shown in the left-side slot
          */

packages/web-components/src/components/rux-global-status-bar/readme.md

@@ -118,6 +118,7 @@ There is one unnamed slot in the Global Status Bar. This slot is intended for an
 | `appState`      | `app-state`       | Declares what text will render and whether the app-state component will be shown in the app-meta slot | `string \| undefined`                               | `''`        |
 | `appStateColor` | `app-state-color` | Declares the color of the the app-state component background                                          | `"tag1" \| "tag2" \| "tag3" \| "tag4" \| undefined` | `'tag1'`    |
 | `appVersion`    | `app-version`     | Sets the version of the application to be displayed in the app-meta element                           | `string \| undefined`                               | `undefined` |
+| `compact`       | `compact`         | Reduces the height of the global status bar                                                           | `boolean`                                           | `false`     |
 | `includeIcon`   | `include-icon`    | Declares whether the menu-icon will be shown in the left-side slot                                    | `boolean`                                           | `false`     |
 | `menuIcon`      | `menu-icon`       | Sets the icon to be displayed in the default rux-icon component                                       | `string`                                            | `'apps'`    |
 | `username`      | `username`        | Declares what text will render and whether the username component will be shown in the app-meta slot  | `string \| undefined`                               | `''`        |

packages/web-components/src/components/rux-global-status-bar/rux-global-status-bar.scss

@@ -71,6 +71,21 @@
 :host([hidden]) {
     display: none;
 }
+:host([compact]) {
+    min-height: var(--spacing-14);
+    height: var(--spacing-14);
+    --font-heading-1-bold-font-size: 1.5rem;
+    --font-heading-1-font-size: 1.5rem;
+    --font-heading-6-font-size: 1rem;
+
+    ::slotted(rux-clock) {
+        --font-monospace-1-font-size: 1.5rem;
+    }
+}
+
+:host::part(app-meta) {
+    --spacing-10: auto;
+}
 
 header {
     display: flex;

packages/web-components/src/components/rux-global-status-bar/rux-global-status-bar.tsx

@@ -1,4 +1,5 @@
-import { Prop, Component, Host, h } from '@stencil/core'
+import { Component, Host, Prop, h } from '@stencil/core'
+
 import { AppMeta } from './appMeta/appMeta'
 
 /**
@@ -75,6 +76,11 @@ export class RuxGlobalStatusBar {
     @Prop({ attribute: 'menu-icon', reflect: true })
     menuIcon: string = 'apps'
 
+    /**
+     * Reduces the height of the global status bar
+     */
+    @Prop({ attribute: 'compact', reflect: true }) compact: boolean = false
+
     render() {
         return (
             <Host>

packages/web-components/src/stories/global-status-bar.mdx

@@ -31,6 +31,13 @@ The Global Status Bar is a full-width view across the top of an application —
 
 <Canvas of={GlobalStatusBarStories.WithTabs} />
 
+## Compact
+
+The Compact version of Global Status Bar provides a smaller GSB when screen space is scarce. It is important to keep this in mind when
+slotting content into a Compact GSB. For example, hide the labels on any `<rux-clock>` slotted inside a Compact GSB.
+
+<Canvas of={GlobalStatusBarStories.Compact} />
+
 ### Other Variants
 
 <Canvas of={GlobalStatusBarStories.WithOtherVariants} />

packages/web-components/src/stories/global-status-bar.stories.js

@@ -84,6 +84,43 @@ const GlobalStatusBarWithTabs = (args) => {
     `
 }
 
+const GlobalStatusBarCompact = (args) => {
+    return html`
+        <div style="display: flex; justify-content: center;">
+            <rux-global-status-bar
+                include-icon="${args.includeIcon}"
+                app-state="${args.appState}"
+                app-state-color="${args.appStateColor}"
+                username="${args.username}"
+                app-domain="${args.appDomain}"
+                app-name="${args.appName}"
+                app-version="${args.appVersion}"
+                menu-icon="${args.menuIcon}"
+                compact="${args.compact}"
+            >
+                <rux-clock hide-labels></rux-clock>
+                <div slot="right-side" style="display: flex; gap: 0.5rem;">
+                    <rux-icon
+                        icon="satellite-transmit"
+                        style="color: var(--color-status-normal)"
+                        size="32px"
+                    ></rux-icon>
+                    <rux-icon
+                        icon="satellite-receive"
+                        style="color: var(--color-status-caution)"
+                        size="32px"
+                    ></rux-icon>
+                    <rux-icon
+                        icon="satellite-off"
+                        style="color: var(--color-status-critical)"
+                        size="32px"
+                    ></rux-icon>
+                </div>
+            </rux-global-status-bar>
+        </div>
+    `
+}
+
 const OtherVariants = () => {
     return html`
         <style>
@@ -249,6 +286,21 @@ export const WithTabs = {
     name: 'With Tabs',
 }
 
+export const Compact = {
+    render: GlobalStatusBarCompact.bind(),
+
+    args: {
+        appDomain: 'Astro',
+        appName: 'Dashboard',
+        appVersion: '4.0 Alpha',
+        menuIcon: 'apps',
+        includeIcon: true,
+        compact: true,
+    },
+
+    name: 'Compact',
+}
+
 export const WithOtherVariants = {
     render: OtherVariants.bind(),
     name: 'Other Variants',