@atlaskit/spotlight 0.0.11 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/spotlight
 
+## 0.0.13
+
+### Patch Changes
+
+- [`15963c2a4fb01`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/15963c2a4fb01) -
+  Create StepCount component.
+
+## 0.0.12
+
+### Patch Changes
+
+- [`7121a32fb1613`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7121a32fb1613) -
+  Create ShowMoreControl component.
+
 ## 0.0.11
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -87,6 +87,18 @@ Object.defineProperty(exports, "SpotlightSecondaryAction", {
     return _secondaryAction.SpotlightSecondaryAction;
   }
 });
+Object.defineProperty(exports, "SpotlightShowMoreControl", {
+  enumerable: true,
+  get: function get() {
+    return _showMoreControl.SpotlightShowMoreControl;
+  }
+});
+Object.defineProperty(exports, "SpotlightStepCount", {
+  enumerable: true,
+  get: function get() {
+    return _stepCount.SpotlightStepCount;
+  }
+});
 Object.defineProperty(exports, "TourContext", {
   enumerable: true,
   get: function get() {
@@ -105,10 +117,12 @@ var _header = require("./ui/header");
 var _headline = require("./ui/headline");
 var _footer = require("./ui/footer");
 var _actions = require("./ui/actions");
+var _stepCount = require("./ui/step-count");
 var _primaryAction = require("./ui/primary-action");
 var _secondaryAction = require("./ui/secondary-action");
 var _controls = require("./ui/controls");
 var _dismissControl = require("./ui/dismiss-control");
+var _showMoreControl = require("./ui/show-more-control");
 var _media = require("./ui/media");
 var _popoverProvider = require("./ui/popover-provider");
 var _popoverContent = require("./ui/popover-content");

package/dist/cjs/ui/show-more-control/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotlightShowMoreControl = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _new = require("@atlaskit/button/new");
+var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+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); }
+/**
+ * __SpotlightShowMoreControl__
+ *
+ * SpotlightShowMoreControl allows the user to close the `Spotlight`.
+ *
+ */
+var SpotlightShowMoreControl = exports.SpotlightShowMoreControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "default",
+    icon: _showMoreHorizontal.default,
+    label: "Close",
+    onClick: onClick,
+    ref: ref,
+    spacing: "compact",
+    testId: testId
+  });
+});

package/dist/cjs/ui/step-count/index.compiled.css

@@ -0,0 +1 @@
+._1ul91ris{min-width:max-content}

package/dist/cjs/ui/step-count/index.js

@@ -0,0 +1,32 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotlightStepCount = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireWildcard(require("react"));
+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: "_1ul91ris"
+};
+/**
+ * __Spotlight StepCount__
+ *
+ * `SpotlightStepCount` groups `SpotlightAction` components.
+ *
+ */
+var SpotlightStepCount = exports.SpotlightStepCount = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    xcss: styles.root
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    ref: ref,
+    testId: testId
+  }, children));
+});

package/dist/es2019/index.js

@@ -4,10 +4,12 @@ export { SpotlightHeader } from './ui/header';
 export { SpotlightHeadline } from './ui/headline';
 export { SpotlightFooter } from './ui/footer';
 export { SpotlightActions } from './ui/actions';
+export { SpotlightStepCount } from './ui/step-count';
 export { SpotlightPrimaryAction } from './ui/primary-action';
 export { SpotlightSecondaryAction } from './ui/secondary-action';
 export { SpotlightControls } from './ui/controls';
 export { SpotlightDismissControl } from './ui/dismiss-control';
+export { SpotlightShowMoreControl } from './ui/show-more-control';
 export { SpotlightMedia } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';

package/dist/es2019/ui/show-more-control/index.js

@@ -0,0 +1,23 @@
+import React, { forwardRef } from 'react';
+import { IconButton } from '@atlaskit/button/new';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+/**
+ * __SpotlightShowMoreControl__
+ *
+ * SpotlightShowMoreControl allows the user to close the `Spotlight`.
+ *
+ */
+export const SpotlightShowMoreControl = /*#__PURE__*/forwardRef(({
+  onClick,
+  testId
+}, ref) => {
+  return /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "default",
+    icon: ShowMoreHorizontalIcon,
+    label: "Close",
+    onClick: onClick,
+    ref: ref,
+    spacing: "compact",
+    testId: testId
+  });
+});

package/dist/es2019/ui/step-count/index.compiled.css

@@ -0,0 +1 @@
+._1ul91ris{min-width:max-content}

package/dist/es2019/ui/step-count/index.js

@@ -0,0 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
+import { Flex, Text } from '@atlaskit/primitives/compiled';
+const styles = {
+  root: "_1ul91ris"
+};
+/**
+ * __Spotlight StepCount__
+ *
+ * `SpotlightStepCount` groups `SpotlightAction` components.
+ *
+ */
+export const SpotlightStepCount = /*#__PURE__*/forwardRef(({
+  children,
+  testId
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.root
+  }, /*#__PURE__*/React.createElement(Text, {
+    ref: ref,
+    testId: testId
+  }, children));
+});

package/dist/esm/index.js

@@ -4,10 +4,12 @@ export { SpotlightHeader } from './ui/header';
 export { SpotlightHeadline } from './ui/headline';
 export { SpotlightFooter } from './ui/footer';
 export { SpotlightActions } from './ui/actions';
+export { SpotlightStepCount } from './ui/step-count';
 export { SpotlightPrimaryAction } from './ui/primary-action';
 export { SpotlightSecondaryAction } from './ui/secondary-action';
 export { SpotlightControls } from './ui/controls';
 export { SpotlightDismissControl } from './ui/dismiss-control';
+export { SpotlightShowMoreControl } from './ui/show-more-control';
 export { SpotlightMedia } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';

package/dist/esm/ui/show-more-control/index.js

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react';
+import { IconButton } from '@atlaskit/button/new';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
+/**
+ * __SpotlightShowMoreControl__
+ *
+ * SpotlightShowMoreControl allows the user to close the `Spotlight`.
+ *
+ */
+export var SpotlightShowMoreControl = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onClick = _ref.onClick,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "default",
+    icon: ShowMoreHorizontalIcon,
+    label: "Close",
+    onClick: onClick,
+    ref: ref,
+    spacing: "compact",
+    testId: testId
+  });
+});

package/dist/esm/ui/step-count/index.compiled.css

@@ -0,0 +1 @@
+._1ul91ris{min-width:max-content}

package/dist/esm/ui/step-count/index.js

@@ -0,0 +1,24 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
+import { Flex, Text } from '@atlaskit/primitives/compiled';
+var styles = {
+  root: "_1ul91ris"
+};
+/**
+ * __Spotlight StepCount__
+ *
+ * `SpotlightStepCount` groups `SpotlightAction` components.
+ *
+ */
+export var SpotlightStepCount = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Flex, {
+    xcss: styles.root
+  }, /*#__PURE__*/React.createElement(Text, {
+    ref: ref,
+    testId: testId
+  }, children));
+});

package/dist/types/index.d.ts

@@ -4,10 +4,12 @@ export { SpotlightHeader, type SpotlightHeaderProps } from './ui/header';
 export { SpotlightHeadline, type SpotlightHeadlineProps } from './ui/headline';
 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 { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
 export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
 export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
+export { SpotlightShowMoreControl, type SpotlightShowMoreControlProps, } from './ui/show-more-control';
 export { SpotlightMedia, type SpotlightMediaProps } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';

package/dist/types/ui/show-more-control/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type IconButtonProps } from '@atlaskit/button/new';
+export interface SpotlightShowMoreControlProps {
+    /**
+     * 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;
+    /**
+     * The action to take when the button is clicked.
+     */
+    onClick?: IconButtonProps['onClick'];
+}
+/**
+ * __SpotlightShowMoreControl__
+ *
+ * SpotlightShowMoreControl allows the user to close the `Spotlight`.
+ *
+ */
+export declare const SpotlightShowMoreControl: React.ForwardRefExoticComponent<SpotlightShowMoreControlProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/ui/step-count/index.d.ts

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+export interface SpotlightStepCountProps {
+    /**
+     * 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;
+    /**
+     * Elements to be rendered inside the `SpotlightStepCount`.
+     */
+    children?: ReactNode;
+}
+/**
+ * __Spotlight StepCount__
+ *
+ * `SpotlightStepCount` groups `SpotlightAction` components.
+ *
+ */
+export declare const SpotlightStepCount: React.ForwardRefExoticComponent<SpotlightStepCountProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -4,10 +4,12 @@ export { SpotlightHeader, type SpotlightHeaderProps } from './ui/header';
 export { SpotlightHeadline, type SpotlightHeadlineProps } from './ui/headline';
 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 { SpotlightSecondaryAction, type SpotlightSecondaryActionProps, } from './ui/secondary-action';
 export { SpotlightControls, type SpotlightControlsProps } from './ui/controls';
 export { SpotlightDismissControl, type SpotlightDismissControlProps } from './ui/dismiss-control';
+export { SpotlightShowMoreControl, type SpotlightShowMoreControlProps, } from './ui/show-more-control';
 export { SpotlightMedia, type SpotlightMediaProps } from './ui/media';
 export { PopoverProvider } from './ui/popover-provider';
 export { PopoverContent } from './ui/popover-content';

package/dist/types-ts4.5/ui/show-more-control/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { type IconButtonProps } from '@atlaskit/button/new';
+export interface SpotlightShowMoreControlProps {
+    /**
+     * 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;
+    /**
+     * The action to take when the button is clicked.
+     */
+    onClick?: IconButtonProps['onClick'];
+}
+/**
+ * __SpotlightShowMoreControl__
+ *
+ * SpotlightShowMoreControl allows the user to close the `Spotlight`.
+ *
+ */
+export declare const SpotlightShowMoreControl: React.ForwardRefExoticComponent<SpotlightShowMoreControlProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/ui/step-count/index.d.ts

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+export interface SpotlightStepCountProps {
+    /**
+     * 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;
+    /**
+     * Elements to be rendered inside the `SpotlightStepCount`.
+     */
+    children?: ReactNode;
+}
+/**
+ * __Spotlight StepCount__
+ *
+ * `SpotlightStepCount` groups `SpotlightAction` components.
+ *
+ */
+export declare const SpotlightStepCount: React.ForwardRefExoticComponent<SpotlightStepCountProps & React.RefAttributes<HTMLSpanElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.0.11",
+	"version": "0.0.13",
 	"description": "A spotlight introduces users to various points of interest across Atlassian through focused messages or multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.11.0",
+		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/primitives": "^14.11.0",
@@ -46,6 +46,7 @@
 	"devDependencies": {
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
+		"@atlaskit/dropdown-menu": "^16.3.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",