@atlaskit/section-message 6.4.0 → 6.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/section-message
 
+## 6.4.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
+## 6.4.1
+
+### Patch Changes
+
+- [`41fae2c6f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/41fae2c6f68) - Upgrade Typescript from `4.5.5` to `4.9.5`
+
 ## 6.4.0
 
 ### Minor Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.4.0",
+	"version": "6.4.2",
 	"sideEffects": false
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.4.0",
+	"version": "6.4.2",
 	"sideEffects": false
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.4.0",
+	"version": "6.4.2",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -3,7 +3,7 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 /**
  * Appearance determines the icon and background color pairing indicating the message type
  */
-export declare type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
+export type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
 export interface SectionMessageProps {
     /**
      * The appearance styling to use for the section message.

package/dist/types-ts4.5/entry-points/section-message-action.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../section-message-action';
+export type { SectionMessageActionProps } from '../types';

package/dist/types-ts4.5/entry-points/section-message.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../section-message';
+export type { SectionMessageProps } from '../types';

package/dist/types-ts4.5/entry-points/types.d.ts

@@ -0,0 +1 @@
+export type { Appearance, SectionMessageProps, SectionMessageActionProps, } from '../types';

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

@@ -0,0 +1,3 @@
+export { default } from './section-message';
+export { default as SectionMessageAction } from './section-message-action';
+export type { Appearance, SectionMessageProps, SectionMessageActionProps, } from './types';

package/dist/types-ts4.5/internal/appearance-icon.d.ts

@@ -0,0 +1,16 @@
+import { ComponentType } from 'react';
+import type { Appearance, SectionMessageProps } from '../types';
+interface AppearanceIconSchema {
+    backgroundColor: string;
+    primaryIconColor: string;
+    Icon: ComponentType<any>;
+}
+export declare const appearanceIconSchema: {
+    [key in Appearance]: AppearanceIconSchema;
+};
+export declare function getAppearanceIconStyles(appearance: Appearance, icon: SectionMessageProps['icon']): {
+    Icon: "symbol" | "object" | "head" | "link" | "source" | "body" | "path" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
+    backgroundColor: string;
+    primaryIconColor: string;
+};
+export {};

package/dist/types-ts4.5/section-message-action.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SectionMessageActionProps } from './types';
+/**
+ * __Section message action__
+ *
+ * A section message action is designed to work with the `action` prop from
+ * `SectionMessage`. It renders either a button or a link depending on whether
+ * an `onClick` or `href` prop is supplied, with a dot separator in between actions.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples#actions)
+ */
+declare const SectionMessageAction: React.NamedExoticComponent<SectionMessageActionProps>;
+export default SectionMessageAction;

package/dist/types-ts4.5/section-message.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { SectionMessageProps } from './types';
+/**
+ * __Section message__
+ *
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples)
+ * - [Code](https://atlassian.design/components/section-message/code)
+ * - [Usage](https://atlassian.design/components/section-message/usage)
+ */
+declare const SectionMessage: React.ForwardRefExoticComponent<SectionMessageProps & React.RefAttributes<HTMLElement>>;
+export default SectionMessage;

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

@@ -0,0 +1,70 @@
+import type { ReactElement } from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+/**
+ * Appearance determines the icon and background color pairing indicating the message type
+ */
+export type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
+export interface SectionMessageProps {
+    /**
+     * The appearance styling to use for the section message.
+     */
+    appearance?: Appearance;
+    /**
+     * The main content of the section message. This accepts a react node, although
+     * we recommend that this should be a paragraph.
+     */
+    children: React.ReactNode;
+    /**
+     * The heading of the section message.
+     */
+    title?: string;
+    /**
+     * Actions for the user to take after reading the section message. Accepts a ReactElement
+     * or an array of one or more SectionMessageAction React elements, which are applied as link buttons.
+     * Middle dots are automatically added between multiple link buttons, so no elements
+     * should be present between multiple actions.
+     *
+     * In general, avoid using more than two actions.
+     */
+    actions?: ReactElement | ReactElement<SectionMessageActionProps>[];
+    /**
+     * An Icon component to be rendered instead of the default icon for the component.
+     * This should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)
+     * to see how to provide this icon.
+     */
+    icon?: React.ElementType;
+    /**
+     * A `testId` prop 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;
+}
+export interface SectionMessageActionProps {
+    /**
+     * The text that needs to be displayed for section message action.
+     */
+    children: React.ReactNode;
+    /**
+     * A custom link component. This prop is designed to allow a custom link
+     * component to be passed to the rendered link button. The
+     * intended use-case is for when a custom router component such as react router
+     * is being used within the application.
+     *
+     * This component will only be used if a href prop is passed.
+     */
+    linkComponent?: React.ComponentType<any>;
+    /**
+     * Click handler which will be attached to the rendered link button. The second argument can be used to
+     * track analytics data. See the tutorial in the analytics-next package for details.
+     */
+    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * The URL that the rendered link button will point to.
+     */
+    href?: string;
+    /**
+     * A `testId` prop 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/section-message",
-  "version": "6.4.0",
+  "version": "6.4.2",
   "description": "A section message is used to alert users to a particular section of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,14 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -36,7 +44,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/primitives": "^0.9.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {
@@ -59,7 +67,7 @@
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.5.5"
+    "typescript": "~4.9.5"
   },
   "techstack": {
     "@atlassian/frontend": {

package/section-message/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/section-message.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/entry-points/section-message.d.ts"
+        "../dist/types-ts4.5/entry-points/section-message.d.ts"
       ]
     }
   }

package/section-message-action/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/section-message-action.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/entry-points/section-message-action.d.ts"
+        "../dist/types-ts4.5/entry-points/section-message-action.d.ts"
       ]
     }
   }

package/types/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/entry-points/types.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/entry-points/types.d.ts"
+        "../dist/types-ts4.5/entry-points/types.d.ts"
       ]
     }
   }