@atlaskit/spotlight 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/spotlight
 
+## 0.0.3
+
+### Patch Changes
+
+- [#193958](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/193958)
+  [`6fb7706c6ce32`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fb7706c6ce32) -
+  Create Header and Headline components.
+- Updated dependencies
+
 ## 0.0.2
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -9,4 +9,18 @@ Object.defineProperty(exports, "Spotlight", {
     return _spotlight.Spotlight;
   }
 });
-var _spotlight = require("./ui/spotlight");
+Object.defineProperty(exports, "SpotlightHeader", {
+  enumerable: true,
+  get: function get() {
+    return _header.SpotlightHeader;
+  }
+});
+Object.defineProperty(exports, "SpotlightHeadline", {
+  enumerable: true,
+  get: function get() {
+    return _headline.SpotlightHeadline;
+  }
+});
+var _spotlight = require("./ui/spotlight");
+var _header = require("./ui/header");
+var _headline = require("./ui/headline");

package/dist/cjs/ui/header/index.compiled.css

@@ -0,0 +1,4 @@
+._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
+._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

package/dist/cjs/ui/header/index.js

@@ -0,0 +1,35 @@
+/* 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.SpotlightHeader = 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: "_bozgpxbi _y4tiutpp _1q51utpp _85i5utpp"
+};
+/**
+ * __SpotlightHeader__
+ *
+ * `SpotlightHeader` should be placed at the top of a `Spotlight`, and is
+ * intended to show the `SpotlightHeadline` component, as well as `SpotLightControls`.
+ *
+ */
+var SpotlightHeader = exports.SpotlightHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+    ref: ref,
+    testId: testId,
+    xcss: styles.root,
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "space.100"
+  }, children);
+});

package/dist/cjs/ui/headline/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpotlightHeadline = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+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); }
+/**
+ * __SpotlightHeadline__
+ *
+ * `SpotlightHeadline` is required in a `Spotlight`. The content should be brief and direct to quickly hook the user on the intent.
+ *
+ */
+var SpotlightHeadline = exports.SpotlightHeadline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement(_heading.default, {
+    ref: ref,
+    testId: testId,
+    size: "xsmall"
+  }, children);
+});

package/dist/cjs/ui/spotlight/index.compiled.css

@@ -0,0 +1,3 @@
+
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._1bsbaq3k{width:295px}
+._kqswh2mm{position:relative}

package/dist/cjs/ui/spotlight/index.js

@@ -1,25 +1,33 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Spotlight = void 0;
-var _react = _interopRequireDefault(require("react"));
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
+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: "_2rkopd34 _kqswh2mm _1bsbaq3k"
+};
 /**
  * __Spotlight__
  *
- * A spotlight {description}.
+ * The base UI card that wraps composable spotlight components.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-var Spotlight = exports.Spotlight = function Spotlight(_ref) {
-  var testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testid": testId
-  }, "TODO");
-};
+var Spotlight = exports.Spotlight = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    ref: ref,
+    xcss: styles.root,
+    backgroundColor: "color.background.neutral.bold",
+    testId: testId
+  }, children);
+});

package/dist/es2019/index.js

@@ -1 +1,3 @@
-export { Spotlight } from './ui/spotlight';
+export { Spotlight } from './ui/spotlight';
+export { SpotlightHeader } from './ui/header';
+export { SpotlightHeadline } from './ui/headline';

package/dist/es2019/ui/header/index.compiled.css

@@ -0,0 +1,4 @@
+._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
+._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

package/dist/es2019/ui/header/index.js

@@ -0,0 +1,28 @@
+/* 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 } from "@atlaskit/primitives/compiled";
+const styles = {
+  root: "_bozgpxbi _y4tiutpp _1q51utpp _85i5utpp"
+};
+/**
+ * __SpotlightHeader__
+ *
+ * `SpotlightHeader` should be placed at the top of a `Spotlight`, and is
+ * intended to show the `SpotlightHeadline` component, as well as `SpotLightControls`.
+ *
+ */
+export const SpotlightHeader = /*#__PURE__*/forwardRef(({
+  children,
+  testId
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    testId: testId,
+    xcss: styles.root,
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "space.100"
+  }, children);
+});

package/dist/es2019/ui/headline/index.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+import Heading from '@atlaskit/heading';
+/**
+ * __SpotlightHeadline__
+ *
+ * `SpotlightHeadline` is required in a `Spotlight`. The content should be brief and direct to quickly hook the user on the intent.
+ *
+ */
+export const SpotlightHeadline = /*#__PURE__*/forwardRef(({
+  children,
+  testId
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Heading, {
+    ref: ref,
+    testId: testId,
+    size: "xsmall"
+  }, children);
+});

package/dist/es2019/ui/spotlight/index.compiled.css

@@ -0,0 +1,3 @@
+
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._1bsbaq3k{width:295px}
+._kqswh2mm{position:relative}

package/dist/es2019/ui/spotlight/index.js

@@ -1,19 +1,26 @@
-import React from 'react';
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  root: "_2rkopd34 _kqswh2mm _1bsbaq3k"
+};
 /**
  * __Spotlight__
  *
- * A spotlight {description}.
+ * The base UI card that wraps composable spotlight components.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-export const Spotlight = ({
+export const Spotlight = /*#__PURE__*/forwardRef(({
+  children,
   testId
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId
-  }, "TODO");
-};
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    xcss: styles.root,
+    backgroundColor: "color.background.neutral.bold",
+    testId: testId
+  }, children);
+});

package/dist/esm/index.js

@@ -1 +1,3 @@
-export { Spotlight } from './ui/spotlight';
+export { Spotlight } from './ui/spotlight';
+export { SpotlightHeader } from './ui/header';
+export { SpotlightHeadline } from './ui/headline';

package/dist/esm/ui/header/index.compiled.css

@@ -0,0 +1,4 @@
+._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
+._85i5utpp{padding-block-end:var(--ds-space-150,9pt)}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}

package/dist/esm/ui/header/index.js

@@ -0,0 +1,27 @@
+/* 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 } from "@atlaskit/primitives/compiled";
+var styles = {
+  root: "_bozgpxbi _y4tiutpp _1q51utpp _85i5utpp"
+};
+/**
+ * __SpotlightHeader__
+ *
+ * `SpotlightHeader` should be placed at the top of a `Spotlight`, and is
+ * intended to show the `SpotlightHeadline` component, as well as `SpotLightControls`.
+ *
+ */
+export var SpotlightHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Flex, {
+    ref: ref,
+    testId: testId,
+    xcss: styles.root,
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "space.100"
+  }, children);
+});

package/dist/esm/ui/headline/index.js

@@ -0,0 +1,17 @@
+import React, { forwardRef } from 'react';
+import Heading from '@atlaskit/heading';
+/**
+ * __SpotlightHeadline__
+ *
+ * `SpotlightHeadline` is required in a `Spotlight`. The content should be brief and direct to quickly hook the user on the intent.
+ *
+ */
+export var SpotlightHeadline = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Heading, {
+    ref: ref,
+    testId: testId,
+    size: "xsmall"
+  }, children);
+});

package/dist/esm/ui/spotlight/index.compiled.css

@@ -0,0 +1,3 @@
+
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}._1bsbaq3k{width:295px}
+._kqswh2mm{position:relative}

package/dist/esm/ui/spotlight/index.js

@@ -1,18 +1,25 @@
-import React from 'react';
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/* index.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { forwardRef } from 'react';
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  root: "_2rkopd34 _kqswh2mm _1bsbaq3k"
+};
 /**
  * __Spotlight__
  *
- * A spotlight {description}.
+ * The base UI card that wraps composable spotlight components.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-export var Spotlight = function Spotlight(_ref) {
-  var testId = _ref.testId;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": testId
-  }, "TODO");
-};
+export var Spotlight = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    xcss: styles.root,
+    backgroundColor: "color.background.neutral.bold",
+    testId: testId
+  }, children);
+});

package/dist/types/index.d.ts

@@ -1 +1,3 @@
-export { Spotlight } from './ui/spotlight';
+export { Spotlight, type SpotlightProps } from './ui/spotlight';
+export { SpotlightHeader, type SpotlightHeaderProps } from './ui/header';
+export { SpotlightHeadline } from './ui/headline';

package/dist/types/ui/header/index.d.ts

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from "react";
+export interface SpotlightHeaderProps {
+    /**
+     * 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 `SpotlightHeader`.
+     */
+    children?: ReactNode;
+}
+/**
+ * __SpotlightHeader__
+ *
+ * `SpotlightHeader` should be placed at the top of a `Spotlight`, and is
+ * intended to show the `SpotlightHeadline` component, as well as `SpotLightControls`.
+ *
+ */
+export declare const SpotlightHeader: React.ForwardRefExoticComponent<SpotlightHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/headline/index.d.ts

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+export interface SpotlightHeadlineProps {
+    /**
+     * 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;
+    /**
+     * A brief and direct title to quickly hook the user on the intent.
+     */
+    children?: ReactNode;
+}
+/**
+ * __SpotlightHeadline__
+ *
+ * `SpotlightHeadline` is required in a `Spotlight`. The content should be brief and direct to quickly hook the user on the intent.
+ *
+ */
+export declare const SpotlightHeadline: React.ForwardRefExoticComponent<SpotlightHeadlineProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/types/ui/spotlight/index.d.ts

@@ -1,15 +1,24 @@
-import React from 'react';
-interface SpotlightProps {
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export interface SpotlightProps {
+    /**
+     * 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 spotlight.
+     */
+    children?: ReactNode;
 }
 /**
  * __Spotlight__
  *
- * A spotlight {description}.
+ * The base UI card that wraps composable spotlight components.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-export declare const Spotlight: ({ testId }: SpotlightProps) => React.JSX.Element;
-export {};
+export declare const Spotlight: import("react").ForwardRefExoticComponent<SpotlightProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1 +1,3 @@
-export { Spotlight } from './ui/spotlight';
+export { Spotlight, type SpotlightProps } from './ui/spotlight';
+export { SpotlightHeader, type SpotlightHeaderProps } from './ui/header';
+export { SpotlightHeadline } from './ui/headline';

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

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from "react";
+export interface SpotlightHeaderProps {
+    /**
+     * 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 `SpotlightHeader`.
+     */
+    children?: ReactNode;
+}
+/**
+ * __SpotlightHeader__
+ *
+ * `SpotlightHeader` should be placed at the top of a `Spotlight`, and is
+ * intended to show the `SpotlightHeadline` component, as well as `SpotLightControls`.
+ *
+ */
+export declare const SpotlightHeader: React.ForwardRefExoticComponent<SpotlightHeaderProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+export interface SpotlightHeadlineProps {
+    /**
+     * 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;
+    /**
+     * A brief and direct title to quickly hook the user on the intent.
+     */
+    children?: ReactNode;
+}
+/**
+ * __SpotlightHeadline__
+ *
+ * `SpotlightHeadline` is required in a `Spotlight`. The content should be brief and direct to quickly hook the user on the intent.
+ *
+ */
+export declare const SpotlightHeadline: React.ForwardRefExoticComponent<SpotlightHeadlineProps & React.RefAttributes<HTMLHeadingElement>>;

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

@@ -1,15 +1,24 @@
-import React from 'react';
-interface SpotlightProps {
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+export interface SpotlightProps {
+    /**
+     * 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 spotlight.
+     */
+    children?: ReactNode;
 }
 /**
  * __Spotlight__
  *
- * A spotlight {description}.
+ * The base UI card that wraps composable spotlight components.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-export declare const Spotlight: ({ testId }: SpotlightProps) => React.JSX.Element;
-export {};
+export declare const Spotlight: import("react").ForwardRefExoticComponent<SpotlightProps & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"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",
@@ -30,7 +30,8 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/heading": "^5.2.0",
+		"@atlaskit/primitives": "^14.11.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"