@atlaskit/ds-explorations 2.1.1 → 2.2.0

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::c5cbba9e889615c5824ee237fd52ad2e>>
+ * @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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -39,7 +39,7 @@
     "./inline": "./src/components/inline.partial.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"

package/scripts/spacing-codegen-template.tsx

@@ -32,7 +32,7 @@ const onlySpaceTokens = tokens.filter((token) =>
 
 const activeTokens = onlySpaceTokens.map((t) => ({
   name: t.name,
-  fallback: t.attributes.pixelValue!,
+  fallback: t.value,
 }));
 
 export const createSpacingStylesFromTemplate = (

package/src/components/__tests__/visual-regression/__image_snapshots__/text-snapshot-test-tsx-text-example-with-font-sizes-should-match-snapshot-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7f58caf93b47b6d2f5061536f06d0a383c012beea2cc7cb350ed92883be1db42
-size 29887
+oid sha256:22fba76783544ea81fce5e329173deefcc0e0c72f48be1ac24b4b981f8b21b04
+size 29399

package/src/components/box.partial.tsx

@@ -250,7 +250,7 @@ const borderWidthMap = {
 
 type BorderRadius = keyof typeof borderRadiusMap;
 const borderRadiusMap = {
-  normal: css({ borderRadius: token('border.radius.100', '3px') }),
+  normal: css({ borderRadius: '3px' }),
   rounded: css({ borderRadius: '50%' }),
   badge: css({ borderRadius: '8px' }),
 };
@@ -357,11 +357,11 @@ export type Height = keyof typeof heightMap;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0ba10ee53636df14b0db65fa1adbc94c>>
+ * @codegen <<SignedSource::fc99bb48c96c557caeb69d2dcaaa9d3f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["padding", "paddingBlock", "paddingInline"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 const paddingMap = {
   'space.0': css({

package/src/components/inline.partial.tsx

@@ -160,11 +160,11 @@ export default Inline;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::75d680a1c3c5679ef743f39217148d11>>
+ * @codegen <<SignedSource::c96c5857a4f0baed6460df50c2a63f98>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["columnGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 const columnGapMap = {
   'space.0': css({

package/src/components/stack.partial.tsx

@@ -116,11 +116,11 @@ export default Stack;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b762b9e20e785c1909a1c59c2791a66e>>
+ * @codegen <<SignedSource::9dc5e6c3922e4561e878c7f33bcec126>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["rowGap"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::86e173b0e020fe5d091fdf4bff023711>>
  */
 const rowGapMap = {
   'space.0': css({