@atlaskit/spotlight 0.10.5 → 0.10.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/spotlight
 
+## 0.10.7
+
+### Patch Changes
+
+- [`5db9e3f21a52f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5db9e3f21a52f) -
+  Internal refactoring
+- Updated dependencies
+
+## 0.10.6
+
+### Patch Changes
+
+- [`9b038ce3c261e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b038ce3c261e) -
+  Create `SpotlightPrimaryLink` and `SpotlightSecondaryLink` components.
+
 ## 0.10.5
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -8,6 +8,7 @@ import MultipleStepsExample from '../../examples/constellation/multiple-steps';
 import MediaExample from '../../examples/constellation/media';
 import ControlsExample from '../../examples/constellation/controls';
 import MotionExample from '../../examples/constellation/motion';
+import ActionLinksExample from '../../examples/action-links';
 
 ## Single step
 
@@ -60,3 +61,12 @@ focusable element on the `SpotlightCard` card to provide an accessible experienc
 create smooth 'enter' or 'exit' transitions.
 
 <Example Component={MotionExample} packageName="@atlaskit/spotlight" />
+
+## Action links
+
+When the primary or secondary control should navigate to a URL instead of performing an action, use
+`SpotlightPrimaryLink` and `SpotlightSecondaryLink`. They mirror the appearance of
+`SpotlightPrimaryAction` and `SpotlightSecondaryAction` but render as links (e.g. "Get started",
+"Learn more").
+
+<Example Component={ActionLinksExample} packageName="@atlaskit/spotlight" />

package/constellation/index/usage.mdx

@@ -51,25 +51,26 @@ A tour is a series of spotlights that point to multiple areas of the UI. <br />
 Tours should be used sparingly. Before designing a tour, assess if you can combine or eliminate
 steps to keep the experience as lightweight as possible, as seen below.
 
-<DoDont
-	type="do"
-	image={{
-		url: tourUseDo,
-		alt: 'Example of a single-step spotlight with content that combines the example content of the multi-step tour next to it.',
-	}}
->
-	Keep things lightweight. Aim for one step with active and concise messaging.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: tourUseDont,
-		alt: 'Example of a multi-step spotlight with content that that can be combined into a single step.',
-	}}
->
-	Avoid tours unless the steps are crucial. Consolidate information first.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: tourUseDo,
+			alt: 'Example of a single-step spotlight with content that combines the example content of the multi-step tour next to it.',
+		}}
+	>
+		Keep things lightweight. Aim for one step with active and concise messaging.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: tourUseDont,
+			alt: 'Example of a multi-step spotlight with content that that can be combined into a single step.',
+		}}
+	>
+		Avoid tours unless the steps are crucial. Consolidate information first.
+	</DoDont>
+</DoDontGrid>
 
 ### Triggered spotlights
 
@@ -98,25 +99,26 @@ also activate UI.
 
 ## Principles of use
 
-<DoDont
-	type="do"
-	image={{
-		url: principlesDo,
-		alt: 'Example of spotlight with content that explains what Rovo is.',
-	}}
->
-	Use spotlights to educate users or introduce them to something new.
-</DoDont>
-
-<DoDont
-	type="dont"
-	image={{
-		url: principlesDont,
-		alt: 'Example of a spotlight with content that promotes purchasing collections to get Rovo.',
-	}}
->
-	Use spotlights for upsells or other transactional messaging.
-</DoDont>
+<DoDontGrid>
+	<DoDont
+		type="do"
+		image={{
+			url: principlesDo,
+			alt: 'Example of spotlight with content that explains what Rovo is.',
+		}}
+	>
+		Use spotlights to educate users or introduce them to something new.
+	</DoDont>
+	<DoDont
+		type="dont"
+		image={{
+			url: principlesDont,
+			alt: 'Example of a spotlight with content that promotes purchasing collections to get Rovo.',
+		}}
+	>
+		Use spotlights for upsells or other transactional messaging.
+	</DoDont>
+</DoDontGrid>
 
 ## Anatomy and specifications
 
@@ -179,7 +181,7 @@ concise as possible, easy to scan, and only communicate essential information.
 
 - 75 characters max
 - Brief and direct
-- Elaborate value

+- Elaborate value

 
 #### Primary CTA
 
@@ -190,7 +192,7 @@ concise as possible, easy to scan, and only communicate essential information.
   - Let them know where they’re going next when navigating to another screen “Go to Jira”
   - Be explicit when activating UI components “Chat with Rovo” opens the Rovo panel
   - Use “Learn more” when navigating to more detailed information
-  - For tours: start with “Next” and conclude the flow with “Done”

+  - For tours: start with “Next” and conclude the flow with “Done”

 
 #### Secondary CTA
 

package/dist/cjs/index.js

@@ -81,12 +81,24 @@ Object.defineProperty(exports, "SpotlightPrimaryAction", {
     return _primaryAction.SpotlightPrimaryAction;
   }
 });
+Object.defineProperty(exports, "SpotlightPrimaryLink", {
+  enumerable: true,
+  get: function get() {
+    return _primaryLink.SpotlightPrimaryLink;
+  }
+});
 Object.defineProperty(exports, "SpotlightSecondaryAction", {
   enumerable: true,
   get: function get() {
     return _secondaryAction.SpotlightSecondaryAction;
   }
 });
+Object.defineProperty(exports, "SpotlightSecondaryLink", {
+  enumerable: true,
+  get: function get() {
+    return _secondaryLink.SpotlightSecondaryLink;
+  }
+});
 Object.defineProperty(exports, "SpotlightShowMoreControl", {
   enumerable: true,
   get: function get() {
@@ -119,7 +131,9 @@ var _footer = require("./ui/footer");
 var _actions = require("./ui/actions");
 var _stepCount = require("./ui/step-count");
 var _primaryAction = require("./ui/primary-action");
+var _primaryLink = require("./ui/primary-link");
 var _secondaryAction = require("./ui/secondary-action");
+var _secondaryLink = require("./ui/secondary-link");
 var _controls = require("./ui/controls");
 var _dismissControl = require("./ui/dismiss-control");
 var _showMoreControl = require("./ui/show-more-control");

package/dist/cjs/ui/popover-content/index.js

@@ -155,9 +155,7 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(props) {
       role: "dialog",
       "data-testid": testId,
       "aria-labelledby": heading.id,
-      ref: (0, _mergeRefs.default)([ref, localRef])
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
+      ref: (0, _mergeRefs.default)([ref, localRef]),
       style: style,
       className: (0, _runtime.ax)([styles.root])
     }, children);

package/dist/cjs/ui/primary-link/index.compiled.css

@@ -0,0 +1,21 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1dqonqa1{border-style:solid}
+._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._vchhusvi{box-sizing:border-box}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
+._c2waglyw:active{text-decoration-line:none}

package/dist/cjs/ui/primary-link/index.js

@@ -0,0 +1,48 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotlightPrimaryLink = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_2rko12b0 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1dqonqa1 _189ee4h9 _1h6d8yml _18zr12x7 _vchhusvi _1e0c1txw _4cvr1h6o _syaz15cr _bfhk1aqn _9oik1r31 _1bnxglyw _jf4cnqa1 _irr31ibz _1nrm1r31 _c2waglyw _1iohnqa1 _1di6of27"
+};
+/**
+ * __Spotlight primary link__
+ *
+ * `SpotlightPrimaryLink` is a link-styled primary control that mirrors the appearance of `SpotlightPrimaryAction`.
+ * Use it when the primary control should navigate to a URL instead of performing an action (e.g. "Get started", "View guide").
+ *
+ */
+var SpotlightPrimaryLink = exports.SpotlightPrimaryLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
+    children = _ref.children,
+    testId = _ref.testId,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel;
+  return /*#__PURE__*/React.createElement(_compiled.Anchor, {
+    "aria-label": ariaLabel,
+    ref: ref,
+    testId: testId,
+    xcss: styles.root,
+    href: href,
+    target: target,
+    rel: rel,
+    onClick: onClick ? function (e, _analyticsEvent) {
+      return onClick(e);
+    } : undefined,
+    componentName: "SpotlightPrimaryLink"
+  }, /*#__PURE__*/React.createElement(_compiled.Text, {
+    as: "span"
+  }, children));
+});

package/dist/cjs/ui/secondary-link/index.compiled.css

@@ -0,0 +1,19 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._vchhusvi{box-sizing:border-box}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
+._c2waglyw:active{text-decoration-line:none}

package/dist/cjs/ui/secondary-link/index.js

@@ -0,0 +1,48 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotlightSecondaryLink = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_2rko12b0 _4bfu1r31 _1hmsglyw _ajmmnqa1 _18zr12x7 _1rjcv77o _vchhusvi _1e0c1txw _4cvr1h6o _syaz15cr _bfhk1aqn _9oik1r31 _1bnxglyw _jf4cnqa1 _irr31ibz _1nrm1r31 _c2waglyw _1iohnqa1 _1di6of27"
+};
+/**
+ * __Spotlight secondary link__
+ *
+ * `SpotlightSecondaryLink` is a link-styled secondary control that mirrors the appearance of `SpotlightSecondaryAction`.
+ * Use it when the secondary control should navigate to a URL instead of performing an action (e.g. "Learn more", "View docs").
+ *
+ */
+var SpotlightSecondaryLink = exports.SpotlightSecondaryLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
+    children = _ref.children,
+    testId = _ref.testId,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel;
+  return /*#__PURE__*/React.createElement(_compiled.Anchor, {
+    "aria-label": ariaLabel,
+    ref: ref,
+    testId: testId,
+    xcss: styles.root,
+    href: href,
+    target: target,
+    rel: rel,
+    onClick: onClick ? function (e, _analyticsEvent) {
+      return onClick(e);
+    } : undefined,
+    componentName: "SpotlightSecondaryLink"
+  }, /*#__PURE__*/React.createElement(_compiled.Text, {
+    as: "span"
+  }, children));
+});

package/dist/es2019/index.js

@@ -6,7 +6,9 @@ export { SpotlightFooter } from './ui/footer';
 export { SpotlightActions } from './ui/actions';
 export { SpotlightStepCount } from './ui/step-count';
 export { SpotlightPrimaryAction } from './ui/primary-action';
+export { SpotlightPrimaryLink } from './ui/primary-link';
 export { SpotlightSecondaryAction } from './ui/secondary-action';
+export { SpotlightSecondaryLink } from './ui/secondary-link';
 export { SpotlightControls } from './ui/controls';
 export { SpotlightDismissControl } from './ui/dismiss-control';
 export { SpotlightShowMoreControl } from './ui/show-more-control';

package/dist/es2019/ui/popover-content/index.js

@@ -141,9 +141,7 @@ export const PopoverContent = props => {
       role: "dialog",
       "data-testid": testId,
       "aria-labelledby": heading.id,
-      ref: mergeRefs([ref, localRef])
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
+      ref: mergeRefs([ref, localRef]),
       style: style,
       className: ax([styles.root])
     }, children);

package/dist/es2019/ui/primary-link/index.compiled.css

@@ -0,0 +1,21 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1dqonqa1{border-style:solid}
+._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._vchhusvi{box-sizing:border-box}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
+._c2waglyw:active{text-decoration-line:none}

package/dist/es2019/ui/primary-link/index.js

@@ -0,0 +1,37 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { Anchor, Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  root: "_2rko12b0 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1dqonqa1 _189ee4h9 _1h6d8yml _18zr12x7 _vchhusvi _1e0c1txw _4cvr1h6o _syaz15cr _bfhk1aqn _9oik1r31 _1bnxglyw _jf4cnqa1 _irr31ibz _1nrm1r31 _c2waglyw _1iohnqa1 _1di6of27"
+};
+/**
+ * __Spotlight primary link__
+ *
+ * `SpotlightPrimaryLink` is a link-styled primary control that mirrors the appearance of `SpotlightPrimaryAction`.
+ * Use it when the primary control should navigate to a URL instead of performing an action (e.g. "Get started", "View guide").
+ *
+ */
+export const SpotlightPrimaryLink = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
+  onClick,
+  children,
+  testId,
+  href,
+  target,
+  rel
+}, ref) => /*#__PURE__*/React.createElement(Anchor, {
+  "aria-label": ariaLabel,
+  ref: ref,
+  testId: testId,
+  xcss: styles.root,
+  href: href,
+  target: target,
+  rel: rel,
+  onClick: onClick ? (e, _analyticsEvent) => onClick(e) : undefined,
+  componentName: "SpotlightPrimaryLink"
+}, /*#__PURE__*/React.createElement(Text, {
+  as: "span"
+}, children)));

package/dist/es2019/ui/secondary-link/index.compiled.css

@@ -0,0 +1,19 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._vchhusvi{box-sizing:border-box}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
+._c2waglyw:active{text-decoration-line:none}

package/dist/es2019/ui/secondary-link/index.js

@@ -0,0 +1,37 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { Anchor, Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  root: "_2rko12b0 _4bfu1r31 _1hmsglyw _ajmmnqa1 _18zr12x7 _1rjcv77o _vchhusvi _1e0c1txw _4cvr1h6o _syaz15cr _bfhk1aqn _9oik1r31 _1bnxglyw _jf4cnqa1 _irr31ibz _1nrm1r31 _c2waglyw _1iohnqa1 _1di6of27"
+};
+/**
+ * __Spotlight secondary link__
+ *
+ * `SpotlightSecondaryLink` is a link-styled secondary control that mirrors the appearance of `SpotlightSecondaryAction`.
+ * Use it when the secondary control should navigate to a URL instead of performing an action (e.g. "Learn more", "View docs").
+ *
+ */
+export const SpotlightSecondaryLink = /*#__PURE__*/forwardRef(({
+  'aria-label': ariaLabel,
+  onClick,
+  children,
+  testId,
+  href,
+  target,
+  rel
+}, ref) => /*#__PURE__*/React.createElement(Anchor, {
+  "aria-label": ariaLabel,
+  ref: ref,
+  testId: testId,
+  xcss: styles.root,
+  href: href,
+  target: target,
+  rel: rel,
+  onClick: onClick ? (e, _analyticsEvent) => onClick(e) : undefined,
+  componentName: "SpotlightSecondaryLink"
+}, /*#__PURE__*/React.createElement(Text, {
+  as: "span"
+}, children)));

package/dist/esm/index.js

@@ -6,7 +6,9 @@ export { SpotlightFooter } from './ui/footer';
 export { SpotlightActions } from './ui/actions';
 export { SpotlightStepCount } from './ui/step-count';
 export { SpotlightPrimaryAction } from './ui/primary-action';
+export { SpotlightPrimaryLink } from './ui/primary-link';
 export { SpotlightSecondaryAction } from './ui/secondary-action';
+export { SpotlightSecondaryLink } from './ui/secondary-link';
 export { SpotlightControls } from './ui/controls';
 export { SpotlightDismissControl } from './ui/dismiss-control';
 export { SpotlightShowMoreControl } from './ui/show-more-control';

package/dist/esm/ui/popover-content/index.js

@@ -146,9 +146,7 @@ export var PopoverContent = function PopoverContent(props) {
       role: "dialog",
       "data-testid": testId,
       "aria-labelledby": heading.id,
-      ref: mergeRefs([ref, localRef])
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      ,
+      ref: mergeRefs([ref, localRef]),
       style: style,
       className: ax([styles.root])
     }, children);

package/dist/esm/ui/primary-link/index.compiled.css

@@ -0,0 +1,21 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
+._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1dqonqa1{border-style:solid}
+._1h6d8yml{border-color:var(--ds-border-accent-gray,#7d818a)}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._vchhusvi{box-sizing:border-box}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
+._c2waglyw:active{text-decoration-line:none}

package/dist/esm/ui/primary-link/index.js

@@ -0,0 +1,40 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { Anchor, Text } from '@atlaskit/primitives/compiled';
+var styles = {
+  root: "_2rko12b0 _4bfu1r31 _1hmsglyw _ajmmnqa1 _1dqonqa1 _189ee4h9 _1h6d8yml _18zr12x7 _vchhusvi _1e0c1txw _4cvr1h6o _syaz15cr _bfhk1aqn _9oik1r31 _1bnxglyw _jf4cnqa1 _irr31ibz _1nrm1r31 _c2waglyw _1iohnqa1 _1di6of27"
+};
+/**
+ * __Spotlight primary link__
+ *
+ * `SpotlightPrimaryLink` is a link-styled primary control that mirrors the appearance of `SpotlightPrimaryAction`.
+ * Use it when the primary control should navigate to a URL instead of performing an action (e.g. "Get started", "View guide").
+ *
+ */
+export var SpotlightPrimaryLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
+    children = _ref.children,
+    testId = _ref.testId,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel;
+  return /*#__PURE__*/React.createElement(Anchor, {
+    "aria-label": ariaLabel,
+    ref: ref,
+    testId: testId,
+    xcss: styles.root,
+    href: href,
+    target: target,
+    rel: rel,
+    onClick: onClick ? function (e, _analyticsEvent) {
+      return onClick(e);
+    } : undefined,
+    componentName: "SpotlightPrimaryLink"
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span"
+  }, children));
+});

package/dist/esm/ui/secondary-link/index.compiled.css

@@ -0,0 +1,19 @@
+
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._18zr12x7{padding-inline:var(--ds-space-075,6px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
+._syaz15cr{color:var(--ds-text-inverse,#fff)}
+._vchhusvi{box-sizing:border-box}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik1r31:hover{text-decoration-color:currentColor}
+._irr31ibz:hover{background-color:var(--ds-background-neutral-bold-hovered,#3b3d42)}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di6of27:active{background-color:var(--ds-background-neutral-bold-pressed,#505258)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm1r31:active{text-decoration-color:currentColor}
+._c2waglyw:active{text-decoration-line:none}

package/dist/esm/ui/secondary-link/index.js

@@ -0,0 +1,40 @@
+/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { Anchor, Text } from '@atlaskit/primitives/compiled';
+var styles = {
+  root: "_2rko12b0 _4bfu1r31 _1hmsglyw _ajmmnqa1 _18zr12x7 _1rjcv77o _vchhusvi _1e0c1txw _4cvr1h6o _syaz15cr _bfhk1aqn _9oik1r31 _1bnxglyw _jf4cnqa1 _irr31ibz _1nrm1r31 _c2waglyw _1iohnqa1 _1di6of27"
+};
+/**
+ * __Spotlight secondary link__
+ *
+ * `SpotlightSecondaryLink` is a link-styled secondary control that mirrors the appearance of `SpotlightSecondaryAction`.
+ * Use it when the secondary control should navigate to a URL instead of performing an action (e.g. "Learn more", "View docs").
+ *
+ */
+export var SpotlightSecondaryLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var ariaLabel = _ref['aria-label'],
+    onClick = _ref.onClick,
+    children = _ref.children,
+    testId = _ref.testId,
+    href = _ref.href,
+    target = _ref.target,
+    rel = _ref.rel;
+  return /*#__PURE__*/React.createElement(Anchor, {
+    "aria-label": ariaLabel,
+    ref: ref,
+    testId: testId,
+    xcss: styles.root,
+    href: href,
+    target: target,
+    rel: rel,
+    onClick: onClick ? function (e, _analyticsEvent) {
+      return onClick(e);
+    } : undefined,
+    componentName: "SpotlightSecondaryLink"
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "span"
+  }, children));
+});

package/dist/types/index.d.ts

@@ -6,7 +6,9 @@ export { SpotlightFooter, type SpotlightFooterProps } from './ui/footer';
 export { SpotlightActions, type SpotlightActionsProps } from './ui/actions';
 export { SpotlightStepCount, type SpotlightStepCountProps } from './ui/step-count';
 export { SpotlightPrimaryAction, type SpotlightPrimaryActionProps } from './ui/primary-action';
+export { SpotlightPrimaryLink, type SpotlightPrimaryLinkProps } from './ui/primary-link';
 export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
+export { SpotlightSecondaryLink, type SpotlightSecondaryLinkProps } from './ui/secondary-link';
 export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
 export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
 export { SpotlightShowMoreControl, type SpotlightShowMoreControlProps, } from './ui/show-more-control';

package/dist/types/ui/primary-link/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export interface SpotlightPrimaryLinkProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Text to be rendered inside the link.
+     */
+    children: ReactNode;
+    /**
+     * The destination URL. Accepts a URL string, or a router config object when using AppProvider's router link.
+     */
+    href: string;
+    /**
+     * Target attribute for the link (e.g. `_blank`).
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * Rel attribute for the link (e.g. `noopener noreferrer` for `target="_blank"`).
+     */
+    rel?: string;
+    /**
+     * Handler called when the link is clicked. The second argument provides an Atlaskit UI analytics event when using Anchor.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide enough context.
+     */
+    'aria-label'?: string;
+}
+/**
+ * __Spotlight primary link__
+ *
+ * `SpotlightPrimaryLink` is a link-styled primary control that mirrors the appearance of `SpotlightPrimaryAction`.
+ * Use it when the primary control should navigate to a URL instead of performing an action (e.g. "Get started", "View guide").
+ *
+ */
+export declare const SpotlightPrimaryLink: React.ForwardRefExoticComponent<React.PropsWithoutRef<SpotlightPrimaryLinkProps> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types/ui/secondary-link/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export interface SpotlightSecondaryLinkProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Text to be rendered inside the link.
+     */
+    children: ReactNode;
+    /**
+     * The destination URL. Accepts a URL string, or a router config object when using AppProvider's router link.
+     */
+    href: string;
+    /**
+     * Target attribute for the link (e.g. `_blank`).
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * Rel attribute for the link (e.g. `noopener noreferrer` for `target="_blank"`).
+     */
+    rel?: string;
+    /**
+     * Handler called when the link is clicked. The second argument provides an Atlaskit UI analytics event when using Anchor.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide enough context.
+     */
+    'aria-label'?: string;
+}
+/**
+ * __Spotlight secondary link__
+ *
+ * `SpotlightSecondaryLink` is a link-styled secondary control that mirrors the appearance of `SpotlightSecondaryAction`.
+ * Use it when the secondary control should navigate to a URL instead of performing an action (e.g. "Learn more", "View docs").
+ *
+ */
+export declare const SpotlightSecondaryLink: React.ForwardRefExoticComponent<React.PropsWithoutRef<SpotlightSecondaryLinkProps> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types-ts4.5/index.d.ts

@@ -6,7 +6,9 @@ export { SpotlightFooter, type SpotlightFooterProps } from './ui/footer';
 export { SpotlightActions, type SpotlightActionsProps } from './ui/actions';
 export { SpotlightStepCount, type SpotlightStepCountProps } from './ui/step-count';
 export { SpotlightPrimaryAction, type SpotlightPrimaryActionProps } from './ui/primary-action';
+export { SpotlightPrimaryLink, type SpotlightPrimaryLinkProps } from './ui/primary-link';
 export { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
+export { SpotlightSecondaryLink, type SpotlightSecondaryLinkProps } from './ui/secondary-link';
 export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
 export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
 export { SpotlightShowMoreControl, type SpotlightShowMoreControlProps, } from './ui/show-more-control';

package/dist/types-ts4.5/ui/primary-link/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export interface SpotlightPrimaryLinkProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Text to be rendered inside the link.
+     */
+    children: ReactNode;
+    /**
+     * The destination URL. Accepts a URL string, or a router config object when using AppProvider's router link.
+     */
+    href: string;
+    /**
+     * Target attribute for the link (e.g. `_blank`).
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * Rel attribute for the link (e.g. `noopener noreferrer` for `target="_blank"`).
+     */
+    rel?: string;
+    /**
+     * Handler called when the link is clicked. The second argument provides an Atlaskit UI analytics event when using Anchor.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide enough context.
+     */
+    'aria-label'?: string;
+}
+/**
+ * __Spotlight primary link__
+ *
+ * `SpotlightPrimaryLink` is a link-styled primary control that mirrors the appearance of `SpotlightPrimaryAction`.
+ * Use it when the primary control should navigate to a URL instead of performing an action (e.g. "Get started", "View guide").
+ *
+ */
+export declare const SpotlightPrimaryLink: React.ForwardRefExoticComponent<React.PropsWithoutRef<SpotlightPrimaryLinkProps> & React.RefAttributes<HTMLAnchorElement>>;

package/dist/types-ts4.5/ui/secondary-link/index.d.ts

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export interface SpotlightSecondaryLinkProps {
+    /**
+     * A `testId` prop is provided for specified elements, which is a unique
+     * string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests
+     */
+    testId?: string;
+    /**
+     * Text to be rendered inside the link.
+     */
+    children: ReactNode;
+    /**
+     * The destination URL. Accepts a URL string, or a router config object when using AppProvider's router link.
+     */
+    href: string;
+    /**
+     * Target attribute for the link (e.g. `_blank`).
+     */
+    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * Rel attribute for the link (e.g. `noopener noreferrer` for `target="_blank"`).
+     */
+    rel?: string;
+    /**
+     * Handler called when the link is clicked. The second argument provides an Atlaskit UI analytics event when using Anchor.
+     */
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * An accessible label to read out in the event that the displayed text does not provide enough context.
+     */
+    'aria-label'?: string;
+}
+/**
+ * __Spotlight secondary link__
+ *
+ * `SpotlightSecondaryLink` is a link-styled secondary control that mirrors the appearance of `SpotlightSecondaryAction`.
+ * Use it when the secondary control should navigate to a URL instead of performing an action (e.g. "Learn more", "View docs").
+ *
+ */
+export declare const SpotlightSecondaryLink: React.ForwardRefExoticComponent<React.PropsWithoutRef<SpotlightSecondaryLinkProps> & React.RefAttributes<HTMLAnchorElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.10.5",
+	"version": "0.10.7",
 	"description": "A spotlight introduces users to points of interest, from focused messages to multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",