@carbon-labs/react-ui-shell 0.32.0 → 0.34.0

package/es/components/TrialCountdown.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface TrialCountdownProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Provide the number of days remaining
+     */
+    count: number;
+    /**
+     * Provide label text displayed next to the count. Defaults to "Trial days left"
+     */
+    text?: string;
+    /**
+     * Provide a warning style (red border). defaults to `false`
+     */
+    warning?: boolean;
+}
+export declare const TrialCountdown: React.FC<TrialCountdownProps>;

package/es/components/TrialCountdown.js

@@ -0,0 +1,49 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import cx from '../_virtual/index.js';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { usePrefix } from '../internal/usePrefix.js';
+
+const TrialCountdown = _ref => {
+  let {
+    className,
+    count,
+    text = 'Trial days left',
+    warning = false
+  } = _ref;
+  const prefix = usePrefix();
+  const classNames = cx(`${prefix}--trial-countdown`, className, {
+    [`${prefix}--trial-countdown--warning`]: warning
+  });
+  return /*#__PURE__*/React.createElement("p", {
+    className: classNames
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--trial-countdown__count`
+  }, count), ' ', text);
+};
+TrialCountdown.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+  /**
+   * Provide the number of days remaining
+   */
+  count: PropTypes.number.isRequired,
+  /**
+   * Provide label text displayed next to the count. Defaults to "Trial days left"
+   */
+  text: PropTypes.string,
+  /**
+   * Provide a warning style (red border). defaults to `false`
+   */
+  warning: PropTypes.bool
+};
+
+export { TrialCountdown };

package/es/index.d.ts

@@ -17,3 +17,4 @@ export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopover
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
 export { HeaderDivider } from './components/HeaderDivider';
+export { TrialCountdown } from './components/TrialCountdown';

package/es/index.js

@@ -16,3 +16,4 @@ export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopover
 export { HeaderPanel } from './components/HeaderPanel.js';
 export { SharkFinIcon } from './components/SharkFinIcon.js';
 export { HeaderDivider } from './components/HeaderDivider.js';
+export { TrialCountdown } from './components/TrialCountdown.js';

package/lib/components/TrialCountdown.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface TrialCountdownProps {
+    /**
+     * Provide an optional class to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Provide the number of days remaining
+     */
+    count: number;
+    /**
+     * Provide label text displayed next to the count. Defaults to "Trial days left"
+     */
+    text?: string;
+    /**
+     * Provide a warning style (red border). defaults to `false`
+     */
+    warning?: boolean;
+}
+export declare const TrialCountdown: React.FC<TrialCountdownProps>;

package/lib/components/TrialCountdown.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+var index = require('../_virtual/index.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../internal/usePrefix.js');
+
+const TrialCountdown = _ref => {
+  let {
+    className,
+    count,
+    text = 'Trial days left',
+    warning = false
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = index.default(`${prefix}--trial-countdown`, className, {
+    [`${prefix}--trial-countdown--warning`]: warning
+  });
+  return /*#__PURE__*/React.createElement("p", {
+    className: classNames
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${prefix}--trial-countdown__count`
+  }, count), ' ', text);
+};
+TrialCountdown.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node
+   */
+  className: PropTypes.string,
+  /**
+   * Provide the number of days remaining
+   */
+  count: PropTypes.number.isRequired,
+  /**
+   * Provide label text displayed next to the count. Defaults to "Trial days left"
+   */
+  text: PropTypes.string,
+  /**
+   * Provide a warning style (red border). defaults to `false`
+   */
+  warning: PropTypes.bool
+};
+
+exports.TrialCountdown = TrialCountdown;

package/lib/index.d.ts

@@ -17,3 +17,4 @@ export { HeaderPopover, HeaderPopoverActions, HeaderPopoverButton, HeaderPopover
 export { HeaderPanel } from './components/HeaderPanel';
 export { SharkFinIcon } from './components/SharkFinIcon';
 export { HeaderDivider } from './components/HeaderDivider';
+export { TrialCountdown } from './components/TrialCountdown';

package/lib/index.js

@@ -18,6 +18,7 @@ var HeaderPopover = require('./components/HeaderPopover.js');
 var HeaderPanel = require('./components/HeaderPanel.js');
 var SharkFinIcon = require('./components/SharkFinIcon.js');
 var HeaderDivider = require('./components/HeaderDivider.js');
+var TrialCountdown = require('./components/TrialCountdown.js');
 
 
 
@@ -36,3 +37,4 @@ exports.HeaderPopoverContent = HeaderPopover.HeaderPopoverContent;
 exports.HeaderPanel = HeaderPanel.HeaderPanel;
 exports.SharkFinIcon = SharkFinIcon.SharkFinIcon;
 exports.HeaderDivider = HeaderDivider.HeaderDivider;
+exports.TrialCountdown = TrialCountdown.TrialCountdown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-ui-shell",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -33,5 +33,5 @@
   "dependencies": {
     "@ibm/telemetry-js": "^1.9.1"
   },
-  "gitHead": "2f1edb636184fd92ddc86b76998392ae52df2017"
+  "gitHead": "291236b22a3fc3e65bdcf38a27b4b4f05f036df1"
 }

package/scss/styles/_header.scss

@@ -4,10 +4,10 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-@use '@carbon/styles/scss/theme' as *;
 
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
+@use '@carbon/react/scss/utilities/convert' as convert;
 @use '@carbon/styles/scss/utilities/custom-property' as custom-property;
 
 $prefix: 'cds' !default;
@@ -21,26 +21,21 @@ $prefix: 'cds' !default;
 }
 
 .#{$prefix}--header__action:focus {
-  border-width: 2px;
+  box-shadow: inset 0 0 0 1px $focus, inset 0 0 0 2px $background;
 }
 
-//----------------------------------------------------------------------------
-// Menu button inside Header
-//----------------------------------------------------------------------------
-
-.#{$prefix}--header
-  .#{$prefix}--menu-button__trigger.#{$prefix}--btn--ghost:not([disabled]) {
-  color: $text-secondary;
+.#{$prefix}--header-action__button {
+  block-size: convert.rem(48px);
 }
 
 .#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not([disabled]) svg {
   fill: $icon-secondary;
 }
 
+.#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not([disabled]):hover
+  svg,
 .#{$prefix}--header-action.#{$prefix}--popover--open
-  .#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not(
-    [disabled]
-  ):hover
+  .#{$prefix}--header-action__button.#{$prefix}--btn--ghost:not([disabled])
   svg {
   fill: $icon-primary;
 }
@@ -68,3 +63,19 @@ $prefix: 'cds' !default;
   );
   @include custom-property.declaration('link-focus-text-color', $focus);
 }
+
+//----------------------------------------------------------------------------
+// Menu button inside Header
+//----------------------------------------------------------------------------
+
+.#{$prefix}--header
+  .#{$prefix}--menu-button__trigger.#{$prefix}--btn--ghost:not([disabled]) {
+  color: $text-secondary;
+}
+
+.#{$prefix}--header
+  .#{$prefix}--menu-button__trigger.#{$prefix}--btn--ghost:not(
+    [disabled]
+  ):hover {
+  color: $text-primary;
+}

package/scss/styles/_trial-countdown.scss

@@ -0,0 +1,59 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+$prefix: 'cds' !default;
+
+:root {
+  // these should be set up as component tokens if/when moved to @carbon/styles
+  --trial-countdown-start: #{$blue-60};
+  --trial-countdown-end: #{$purple-50};
+}
+
+.cds--g100,
+.cds--g90,
+[data-carbon-theme='g100'],
+[data-carbon-theme='g90'] {
+  --trial-countdown-start: #{$blue-50};
+  --trial-countdown-end: #{$purple-40};
+}
+
+$trial-countdown-gradient: linear-gradient(135deg, $background, $background),
+  linear-gradient(
+    135deg,
+    var(--trial-countdown-start),
+    var(--trial-countdown-end)
+  );
+
+.#{$prefix}--trial-countdown {
+  @include type-style('label-01');
+
+  color: $text-primary;
+}
+
+.#{$prefix}--trial-countdown__count {
+  @include type-style('label-02');
+
+  display: inline-block;
+  border: 1px solid rgba(0, 0, 0, 0);
+  border-radius: 0.125rem;
+  background-clip: padding-box, border-box;
+  background-image: $trial-countdown-gradient;
+  background-origin: padding-box, border-box;
+  font-weight: 600;
+  min-inline-size: 1rem;
+  text-align: center;
+}
+
+.#{$prefix}--trial-countdown--warning .#{$prefix}--trial-countdown__count {
+  border: 1px solid $support-error;
+  background-image: none;
+}

package/scss/ui-shell.scss

@@ -10,3 +10,4 @@
 @use 'styles/content';
 @use 'styles/shark-fin-icon.scss';
 @use 'styles/header-divider.scss';
+@use 'styles/trial-countdown.scss';