@atlaskit/ds-explorations 2.1.0 → 2.1.2

package/dist/types-ts4.5/components/text.partial.d.ts

@@ -0,0 +1,156 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+import type { BasePrimitiveProps } from './types';
+declare const asAllowlist: readonly [
+    "span",
+    "div",
+    "p",
+    "strong"
+];
+type AsElement = (typeof asAllowlist)[number];
+export interface TextProps extends BasePrimitiveProps {
+    /**
+     * HTML tag to be rendered. Defaults to `span`.
+     */
+    as?: AsElement;
+    /**
+     * Elements rendered within the Text element
+     */
+    children: ReactNode;
+    /**
+     * Text color
+     */
+    color?: TextColor;
+    /**
+     * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+     */
+    id?: string;
+    /**
+     * Font size https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
+     */
+    fontSize?: FontSize;
+    /**
+     * Font weight https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
+     */
+    fontWeight?: FontWeight;
+    /**
+     * Line height https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
+     */
+    lineHeight?: LineHeight;
+    /**
+     * Truncates text with an ellipsis when text overflows its parent container
+     * (i.e. `width` has been set on parent that is shorter than text length).
+     */
+    shouldTruncate?: boolean;
+    /**
+     * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+     */
+    textAlign?: TextAlign;
+    /**
+     * Text transform https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
+     */
+    textTransform?: TextTransform;
+    /**
+     * Vertical align https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
+     */
+    verticalAlign?: VerticalAlign;
+}
+type TextAlign = keyof typeof textAlignMap;
+declare const textAlignMap: {
+    center: import("@emotion/react").SerializedStyles;
+    end: import("@emotion/react").SerializedStyles;
+    start: import("@emotion/react").SerializedStyles;
+};
+type TextTransform = keyof typeof textTransformMap;
+declare const textTransformMap: {
+    none: import("@emotion/react").SerializedStyles;
+    lowercase: import("@emotion/react").SerializedStyles;
+    uppercase: import("@emotion/react").SerializedStyles;
+};
+type VerticalAlign = keyof typeof verticalAlignMap;
+declare const verticalAlignMap: {
+    top: import("@emotion/react").SerializedStyles;
+    middle: import("@emotion/react").SerializedStyles;
+    bottom: import("@emotion/react").SerializedStyles;
+};
+/**
+ * __Text__
+ *
+ * Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
+ * This includes considerations for text attributes such as color, font size, font weight, and line height.
+ * It renders a `span` by default.
+ *
+ * @internal
+ */
+declare const Text: FC<TextProps>;
+export default Text;
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::9f746e797b8b5262d58b40dfecb39e6d>>
+ * @codegenId typography
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography.tsx <<SignedSource::e6bf70c53b8eecdb84ae4c79966537e3>>
+ */
+declare const fontSizeMap: {
+    'size.050': import("@emotion/react").SerializedStyles;
+    'size.075': import("@emotion/react").SerializedStyles;
+    'size.100': import("@emotion/react").SerializedStyles;
+    'size.200': import("@emotion/react").SerializedStyles;
+    'size.300': import("@emotion/react").SerializedStyles;
+    'size.400': import("@emotion/react").SerializedStyles;
+    'size.500': import("@emotion/react").SerializedStyles;
+    'size.600': import("@emotion/react").SerializedStyles;
+};
+export type FontSize = keyof typeof fontSizeMap;
+declare const fontWeightMap: {
+    bold: import("@emotion/react").SerializedStyles;
+    medium: import("@emotion/react").SerializedStyles;
+    regular: import("@emotion/react").SerializedStyles;
+    semibold: import("@emotion/react").SerializedStyles;
+};
+export type FontWeight = keyof typeof fontWeightMap;
+declare const fontFamilyMap: {
+    monospace: import("@emotion/react").SerializedStyles;
+    sans: import("@emotion/react").SerializedStyles;
+};
+export type FontFamily = keyof typeof fontFamilyMap;
+declare const lineHeightMap: {
+    'lineHeight.100': import("@emotion/react").SerializedStyles;
+    'lineHeight.200': import("@emotion/react").SerializedStyles;
+    'lineHeight.300': import("@emotion/react").SerializedStyles;
+    'lineHeight.400': import("@emotion/react").SerializedStyles;
+    'lineHeight.500': import("@emotion/react").SerializedStyles;
+    'lineHeight.600': import("@emotion/react").SerializedStyles;
+};
+export type LineHeight = keyof typeof lineHeightMap;
+/**
+ * @codegenEnd
+ */
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::3780858df77f5fe0c6e0f39a4c989741>>
+ * @codegenId colors
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["text"]
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
+ */
+declare const textColorMap: {
+    readonly 'color.text': import("@emotion/react").SerializedStyles;
+    readonly disabled: import("@emotion/react").SerializedStyles;
+    readonly inverse: import("@emotion/react").SerializedStyles;
+    readonly selected: import("@emotion/react").SerializedStyles;
+    readonly brand: import("@emotion/react").SerializedStyles;
+    readonly danger: import("@emotion/react").SerializedStyles;
+    readonly warning: import("@emotion/react").SerializedStyles;
+    readonly 'warning.inverse': import("@emotion/react").SerializedStyles;
+    readonly success: import("@emotion/react").SerializedStyles;
+    readonly discovery: import("@emotion/react").SerializedStyles;
+    readonly information: import("@emotion/react").SerializedStyles;
+    readonly subtlest: import("@emotion/react").SerializedStyles;
+    readonly subtle: import("@emotion/react").SerializedStyles;
+};
+export type TextColor = keyof typeof textColorMap;
+/**
+ * @codegenEnd
+ */

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

@@ -0,0 +1,13 @@
+import type { CSSProperties } from 'react';
+export interface BasePrimitiveProps {
+    /**
+     * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Inline styles to be applied to the primitive.
+     * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
+     * Effectively equivalent to the standard `style` prop but marked with a special name so we can rationalise its usage IN THE FUTURE.
+     */
+    UNSAFE_style?: CSSProperties;
+}

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

@@ -0,0 +1,12 @@
+export declare const LAYERS: {
+    readonly card: 100;
+    readonly navigation: 200;
+    readonly dialog: 300;
+    readonly layer: 400;
+    readonly blanket: 500;
+    readonly modal: 510;
+    readonly flag: 600;
+    readonly spotlight: 700;
+    readonly tooltip: 800;
+};
+export type Layer = keyof typeof LAYERS;

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

@@ -0,0 +1,9 @@
+export { default as UNSAFE_Box } from './components/box.partial';
+export { default as UNSAFE_Text } from './components/text.partial';
+export { default as UNSAFE_Inline } from './components/inline.partial';
+export { default as UNSAFE_Stack } from './components/stack.partial';
+export { default as UNSAFE_InteractionSurface } from './components/interaction-surface.partial';
+export type { BoxProps as UNSAFE_BoxProps } from './components/box.partial';
+export type { TextProps as UNSAFE_TextProps } from './components/text.partial';
+export type { InlineProps as UNSAFE_InlineProps } from './components/inline.partial';
+export type { StackProps as UNSAFE_StackProps } from './components/stack.partial';

package/dist/types-ts4.5/internal/color-map.d.ts

@@ -0,0 +1,36 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * The color map is used to map a background color token to a matching text color that will meet contrast.
+ *
+ * @codegen <<SignedSource::d168519874a16bbb92cfbfd4747a39b4>>
+ * @codegenCommand yarn codegen-styles
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::10aa7e87eca39e4d6594a764e78e0698>>
+ */
+declare const _default: {
+    readonly 'neutral.bold': "inverse";
+    readonly 'neutral.bold.hovered': "inverse";
+    readonly 'neutral.bold.pressed': "inverse";
+    readonly 'selected.bold': "inverse";
+    readonly 'selected.bold.hovered': "inverse";
+    readonly 'selected.bold.pressed': "inverse";
+    readonly 'brand.bold': "inverse";
+    readonly 'brand.bold.hovered': "inverse";
+    readonly 'brand.bold.pressed': "inverse";
+    readonly 'danger.bold': "inverse";
+    readonly 'danger.bold.hovered': "inverse";
+    readonly 'danger.bold.pressed': "inverse";
+    readonly 'warning.bold': "warning.inverse";
+    readonly 'warning.bold.hovered': "warning.inverse";
+    readonly 'warning.bold.pressed': "warning.inverse";
+    readonly 'success.bold': "inverse";
+    readonly 'success.bold.hovered': "inverse";
+    readonly 'success.bold.pressed': "inverse";
+    readonly 'discovery.bold': "inverse";
+    readonly 'discovery.bold.hovered': "inverse";
+    readonly 'discovery.bold.pressed': "inverse";
+    readonly 'information.bold': "inverse";
+    readonly 'information.bold.hovered': "inverse";
+    readonly 'information.bold.pressed': "inverse";
+};
+export default _default;

package/dist/types-ts4.5/internal/role-to-element.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+/**
+ * Adapted straight from react-mui, with a small change.
+ * @see https://www.unpkg.com/browse/react-gui@0.2.1/src/modules/getAccessibilityElementWithSideEffect.js
+ */
+declare const roleToElementType: {
+    readonly article: "article";
+    readonly banner: "header";
+    readonly blockquote: "blockquote";
+    readonly button: "button";
+    readonly code: "code";
+    readonly complementary: "aside";
+    readonly contentinfo: "footer";
+    readonly deletion: "del";
+    readonly emphasis: "em";
+    readonly figure: "figure";
+    readonly insertion: "ins";
+    readonly form: "form";
+    readonly link: "a";
+    readonly list: "ul";
+    readonly listitem: "li";
+    readonly main: "main";
+    readonly navigation: "nav";
+    readonly region: "section";
+    readonly strong: "strong";
+    readonly presentation: "div";
+    readonly group: "fieldset";
+};
+type RoleMap = typeof roleToElementType;
+export type Role = keyof RoleMap;
+export type SupportedElements = RoleMap[Role] & keyof JSX.IntrinsicElements;
+export default roleToElementType;

package/dist/types-ts4.5/internal/spacing-scale.d.ts

@@ -0,0 +1,24 @@
+/**
+ * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ *
+ * Internal codegen of the spacing scale values. Only used for internal examples.
+ *
+ * @codegen <<SignedSource::885d6c601dfa9fccaf33a7bd461ef59d>>
+ * @codegenCommand yarn codegen-styles
+ */
+export declare const spacingScale: readonly [
+    "space.0",
+    "space.025",
+    "space.050",
+    "space.075",
+    "space.100",
+    "space.150",
+    "space.200",
+    "space.250",
+    "space.300",
+    "space.400",
+    "space.500",
+    "space.600",
+    "space.800",
+    "space.1000"
+];

package/inline/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -22,9 +22,10 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
       ]
     }
   },
@@ -38,7 +39,7 @@
     "./inline": "./src/components/inline.partial.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.3.0",
+    "@atlaskit/tokens": "^1.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"
@@ -69,7 +70,7 @@
     "prettier": "^2.8.0",
     "react-dom": "^16.8.0",
     "ts-node": "^10.9.1",
-    "typescript": "4.5.5",
+    "typescript": "~4.9.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {

package/stack/package.json

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

package/text/package.json

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