@atlaskit/ds-explorations 0.1.1 → 0.1.2

package/dist/types/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";
+};
+declare type RoleMap = typeof roleToElementType;
+export declare type Role = keyof RoleMap;
+export declare type SupportedElements = RoleMap[Role] & keyof JSX.IntrinsicElements;
+export default roleToElementType;

package/examples/02-text.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 
+import Heading from '@atlaskit/heading';
+
 import {
   UNSAFE_Box as Box,
   UNSAFE_Inline as Inline,
@@ -10,21 +12,31 @@ import {
 export default () => {
   return (
     <Stack gap="sp-200">
-      <Text as="h1">Font size</Text>
+      <Heading as="h2" level="h100">
+        Font size
+      </Heading>
       <Inline gap="sp-200" testId="font-sizes">
-        {(['11', '12', '14'] as const).map((fontSize) => (
-          <Text fontSize={fontSize}>fontSize {fontSize}</Text>
+        {(['11px', '12px', '14px'] as const).map((fontSize) => (
+          <Text key={fontSize} fontSize={fontSize}>
+            fontSize {fontSize}
+          </Text>
         ))}
       </Inline>
 
-      <Text as="h1">Font weight</Text>
+      <Heading as="h2" level="h100">
+        Font weight
+      </Heading>
       <Inline gap="sp-200" testId="font-weights">
         {(['400', '500'] as const).map((fontWeight) => (
-          <Text fontWeight={fontWeight}>fontWeight {fontWeight}</Text>
+          <Text key={fontWeight} fontWeight={fontWeight}>
+            fontWeight {fontWeight}
+          </Text>
         ))}
       </Inline>
 
-      <Text as="h1">Line height</Text>
+      <Heading as="h2" level="h100">
+        Line height
+      </Heading>
       <Inline gap="sp-200" testId="line-heights" alignItems="center">
         {([
           '12px',
@@ -35,26 +47,35 @@ export default () => {
           '32px',
           '40px',
         ] as const).map((lineHeight) => (
-          <Box display="inlineFlex" backgroundColor={['neutral', 'lightgrey']}>
+          <Box
+            key={lineHeight}
+            display="inlineFlex"
+            backgroundColor={['neutral', 'lightgrey']}
+          >
             <Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
           </Box>
         ))}
       </Inline>
 
-      <Text as="h1">Testing</Text>
-      <Inline gap="sp-200" testId="testing">
+      <Heading as="h2" level="h100">
+        Testing
+      </Heading>
+      <Stack gap="sp-200" testId="testing">
+        <Text as="p">Paragraph</Text>
+        <Text as="div">A div</Text>
         <Text>Basic</Text>
-        <Text as="h1">Heading 1</Text>
-        <Text as="a">Link</Text>
         <Text
           color={['brand', 'blue']}
-          fontSize="14"
+          fontSize="14px"
           lineHeight="16px"
           fontWeight="500"
         >
           Text with various props
         </Text>
-      </Inline>
+        <Box UNSAFE_style={{ width: '200px' }}>
+          <Text shouldTruncate>Long truncated text that is cut off.</Text>
+        </Box>
+      </Stack>
     </Stack>
   );
 };

package/examples/05-badge.tsx

@@ -16,7 +16,7 @@ export default () => {
         paddingInline="sp-75"
         UNSAFE_style={{ lineHeight: '16px' }}
       >
-        <Text fontSize="12">8</Text>
+        <Text fontSize="12px">8</Text>
       </Box>
     </>
   );

package/examples/06-section-message.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @atlaskit/design-system/no-unsafe-design-token-usage */
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 import Button from '@atlaskit/button';
 import __noop from '@atlaskit/ds-lib/noop';

package/examples/07-comment.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 import Lozenge from '@atlaskit/lozenge';
 

package/examples/08-lozenge.tsx

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
 import Lozenge from '@atlaskit/lozenge';
 
@@ -20,7 +20,7 @@ export default () => {
         paddingInline="sp-50"
       >
         {/* textTransform: uppercase, font-weight: 700 */}
-        <Text fontSize="11" color={['color.text', 'grey']}>
+        <Text fontSize="11px" color={['color.text', 'grey']}>
           Default
         </Text>
       </Box>

package/examples/99-interactions.tsx

@@ -0,0 +1,175 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+
+import Button from '@atlaskit/button';
+import { Code } from '@atlaskit/code';
+import FocusRing from '@atlaskit/focus-ring';
+import Heading from '@atlaskit/heading';
+import WarningIcon from '@atlaskit/icon/glyph/warning';
+import Textfield from '@atlaskit/textfield';
+import { token } from '@atlaskit/tokens';
+
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_Inline as Inline,
+  UNSAFE_InteractionSurface as InteractionSurface,
+  UNSAFE_Stack as Stack,
+  UNSAFE_Text as Text,
+} from '../src';
+
+const fieldsetStyles = css({
+  flex: '1 1 100%',
+  ':hover': {
+    backgroundColor: token('color.background.input.hovered', '#bbb'),
+  },
+  ':invalid': {
+    borderColor: token('color.border.danger', 'red'),
+  },
+  ':focus, :focus-within': {
+    backgroundColor: token('color.background.input'),
+    borderColor: token('color.border.focused', 'blue'),
+  },
+});
+
+export default () => {
+  return (
+    <Box width="sp-800" padding="sp-100" testId="all">
+      <Stack gap="sp-200">
+        <Heading level="h400">Current ADS Buttons</Heading>
+        <Inline gap="sp-200">
+          <Button appearance="primary">brand.bold</Button>
+          <Button appearance="default">neutral</Button>
+          <Button appearance="warning">warning.bold</Button>
+        </Inline>
+        <Heading level="h400">
+          Buttons with <Code>InteractionSurface</Code>
+        </Heading>
+        <Inline gap="sp-200" testId="buttons">
+          {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
+            <FocusRing key={app}>
+              <Box
+                as="button"
+                onClick={() => console.log('hello')}
+                borderRadius="normal"
+                position="relative"
+                paddingInline="sp-150"
+                backgroundColor={[app, '']}
+              >
+                <InteractionSurface />
+                <Text
+                  textAlign="center"
+                  fontSize="14px"
+                  lineHeight="32px"
+                  fontWeight="500"
+                >
+                  {app}
+                </Text>
+              </Box>
+            </FocusRing>
+          ))}
+        </Inline>
+        <Heading level="h400">
+          Icon Buttons with <Code>InteractionSurface</Code>
+        </Heading>
+        <Inline gap="sp-200" testId="icon-buttons">
+          <FocusRing>
+            <Box
+              as="button"
+              backgroundColor={['brand.bold', 'pink']}
+              onClick={() => console.log('hello')}
+              borderRadius="normal"
+              position="relative"
+              padding="sp-50"
+            >
+              <InteractionSurface />
+              <WarningIcon
+                label="icon button"
+                primaryColor={token('color.icon.inverse')}
+                secondaryColor={token('color.background.brand.bold')}
+              />
+            </Box>
+          </FocusRing>
+          <FocusRing>
+            <Box
+              as="button"
+              backgroundColor={['neutral', 'pink']}
+              onClick={() => console.log('hello')}
+              borderRadius="normal"
+              position="relative"
+              padding="sp-50"
+            >
+              <InteractionSurface />
+
+              <WarningIcon label="icon button" />
+            </Box>
+          </FocusRing>
+          <FocusRing>
+            <Box
+              as="button"
+              backgroundColor={['warning.bold', 'pink']}
+              onClick={() => console.log('hello')}
+              borderRadius="normal"
+              position="relative"
+              padding="sp-50"
+            >
+              <InteractionSurface />
+              <WarningIcon
+                label="icon button"
+                primaryColor={token('color.icon.warning.inverse')}
+                secondaryColor={token('color.background.warning.bold')}
+              />
+            </Box>
+          </FocusRing>
+        </Inline>
+        <Heading level="h400">
+          Progress Indicator with <Code>InteractionSurface</Code>
+        </Heading>
+        <Inline gap="sp-200" testId="progress-indicators">
+          {(['brand.bold', 'neutral', 'warning.bold'] as const).map((app) => (
+            <FocusRing>
+              <Box
+                key={app}
+                as="button"
+                backgroundColor={[app, 'pink']}
+                onClick={() => console.log('hello')}
+                borderRadius="rounded"
+                position="relative"
+                padding="sp-50"
+              >
+                <InteractionSurface />
+              </Box>
+            </FocusRing>
+          ))}
+        </Inline>
+        <Heading level="h400">Textfield / input spikes</Heading>
+        <Inline gap="sp-200">
+          <Textfield />
+          <Box
+            as="fieldset"
+            borderRadius="normal"
+            borderStyle="solid"
+            borderWidth="2px"
+            padding="sp-100"
+            tabIndex={-1}
+            borderColor={['color.border', '#ddd']}
+            backgroundColor={['input', '#eee']}
+            css={fieldsetStyles}
+          >
+            <input
+              id="textfield"
+              pattern="[\d+]"
+              style={{
+                padding: 0,
+                border: 'none',
+                fontSize: 14,
+                background: 'transparent',
+                appearance: 'none',
+                outline: 'none',
+              }}
+            />
+          </Box>
+        </Inline>
+      </Stack>
+    </Box>
+  );
+};

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
     "team": "Design System Team",
     "inPublicMirror": false,
-    "releaseModel": "continuous"
+    "releaseModel": "scheduled"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,8 @@
   "dependencies": {
     "@atlaskit/tokens": "^0.10.3",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1",
+    "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -38,13 +39,16 @@
     "@af/codegen": "*",
     "@atlaskit/badge": "*",
     "@atlaskit/button": "*",
+    "@atlaskit/code": "*",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "*",
+    "@atlaskit/focus-ring": "*",
     "@atlaskit/heading": "*",
     "@atlaskit/icon": "*",
     "@atlaskit/lozenge": "*",
     "@atlaskit/section-message": "*",
     "@atlaskit/ssr": "*",
+    "@atlaskit/textfield": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -70,7 +74,6 @@
       ],
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }
   },

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -94,7 +94,7 @@ exports[`@atlaskit/design-system-explorations bg styles are generated correctly
   }),
 };
 
-type BackgroundColor = keyof typeof backgroundColorMap;
+export type BackgroundColor = keyof typeof backgroundColorMap;
 "
 `;
 
@@ -141,7 +141,168 @@ exports[`@atlaskit/design-system-explorations border styles are generated correc
   }),
 };
 
-type BorderColor = keyof typeof borderColorMap;
+export type BorderColor = keyof typeof borderColorMap;
+"
+`;
+
+exports[`@atlaskit/design-system-explorations border styles are generated correctly 2`] = `
+"const backgroundActiveColorMap = {
+  'inverse.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.inverse.subtle.pressed'),
+    },
+  }),
+  input: css({
+    ':active': { backgroundColor: token('color.background.input.pressed') },
+  }),
+  neutral: css({
+    ':active': { backgroundColor: token('color.background.neutral.pressed') },
+  }),
+  'neutral.subtle': css({
+    ':active': {
+      backgroundColor: token('color.background.neutral.subtle.pressed'),
+    },
+  }),
+  'neutral.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.neutral.bold.pressed'),
+    },
+  }),
+  'brand.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.brand.bold.pressed'),
+    },
+  }),
+  selected: css({
+    ':active': { backgroundColor: token('color.background.selected.pressed') },
+  }),
+  'selected.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.selected.bold.pressed'),
+    },
+  }),
+  danger: css({
+    ':active': { backgroundColor: token('color.background.danger.pressed') },
+  }),
+  'danger.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.danger.bold.pressed'),
+    },
+  }),
+  warning: css({
+    ':active': { backgroundColor: token('color.background.warning.pressed') },
+  }),
+  'warning.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.warning.bold.pressed'),
+    },
+  }),
+  success: css({
+    ':active': { backgroundColor: token('color.background.success.pressed') },
+  }),
+  'success.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.success.bold.pressed'),
+    },
+  }),
+  discovery: css({
+    ':active': { backgroundColor: token('color.background.discovery.pressed') },
+  }),
+  'discovery.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.discovery.bold.pressed'),
+    },
+  }),
+  information: css({
+    ':active': {
+      backgroundColor: token('color.background.information.pressed'),
+    },
+  }),
+  'information.bold': css({
+    ':active': {
+      backgroundColor: token('color.background.information.bold.pressed'),
+    },
+  }),
+};
+
+const backgroundHoverColorMap = {
+  'inverse.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.inverse.subtle.hovered'),
+    },
+  }),
+  input: css({
+    ':hover': { backgroundColor: token('color.background.input.hovered') },
+  }),
+  neutral: css({
+    ':hover': { backgroundColor: token('color.background.neutral.hovered') },
+  }),
+  'neutral.subtle': css({
+    ':hover': {
+      backgroundColor: token('color.background.neutral.subtle.hovered'),
+    },
+  }),
+  'neutral.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.neutral.bold.hovered'),
+    },
+  }),
+  'brand.bold': css({
+    ':hover': { backgroundColor: token('color.background.brand.bold.hovered') },
+  }),
+  selected: css({
+    ':hover': { backgroundColor: token('color.background.selected.hovered') },
+  }),
+  'selected.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.selected.bold.hovered'),
+    },
+  }),
+  danger: css({
+    ':hover': { backgroundColor: token('color.background.danger.hovered') },
+  }),
+  'danger.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.danger.bold.hovered'),
+    },
+  }),
+  warning: css({
+    ':hover': { backgroundColor: token('color.background.warning.hovered') },
+  }),
+  'warning.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.warning.bold.hovered'),
+    },
+  }),
+  success: css({
+    ':hover': { backgroundColor: token('color.background.success.hovered') },
+  }),
+  'success.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.success.bold.hovered'),
+    },
+  }),
+  discovery: css({
+    ':hover': { backgroundColor: token('color.background.discovery.hovered') },
+  }),
+  'discovery.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.discovery.bold.hovered'),
+    },
+  }),
+  information: css({
+    ':hover': {
+      backgroundColor: token('color.background.information.hovered'),
+    },
+  }),
+  'information.bold': css({
+    ':hover': {
+      backgroundColor: token('color.background.information.bold.hovered'),
+    },
+  }),
+};
+
+type InteractionBackgroundColor = keyof typeof backgroundHoverColorMap;
 "
 `;
 
@@ -188,6 +349,6 @@ exports[`@atlaskit/design-system-explorations text styles are generated correctl
   }),
 };
 
-type TextColor = keyof typeof textColorMap;
+export type TextColor = keyof typeof textColorMap;
 "
 `;

package/scripts/__tests__/codegen.test.tsx

@@ -1,4 +1,5 @@
 import { createColorStylesFromTemplate } from '../color-codegen-template';
+import { createInteractionStylesFromTemplate } from '../interaction-codegen';
 describe('@atlaskit/design-system-explorations', () => {
   test('text styles are generated correctly', () => {
     expect(createColorStylesFromTemplate('text')).toMatchSnapshot();
@@ -12,6 +13,10 @@ describe('@atlaskit/design-system-explorations', () => {
     expect(createColorStylesFromTemplate('border')).toMatchSnapshot();
   });
 
+  test('border styles are generated correctly', () => {
+    expect(createInteractionStylesFromTemplate('background')).toMatchSnapshot();
+  });
+
   test('incorrect config throws', () => {
     expect(() =>
       createColorStylesFromTemplate('fizzbuzz' as any),

package/scripts/codegen-styles.tsx

@@ -1,13 +1,23 @@
 /* eslint-disable no-console */
+import { writeFile } from 'fs/promises';
 import { join } from 'path';
 
-import { writeFile } from 'fs-extra';
-
-import { createPartialSignedArtifact } from '@af/codegen';
+import { createPartialSignedArtifact, createSignedArtifact } from '@af/codegen';
 
 import { createColorStylesFromTemplate } from './color-codegen-template';
+import { createColorMapTemplate } from './color-map-template';
+import { createInteractionStylesFromTemplate } from './interaction-codegen';
 import { createSpacingStylesFromTemplate } from './spacing-codegen-template';
 
+writeFile(
+  join(__dirname, '../', 'src', 'internal', 'color-map.tsx'),
+  createSignedArtifact(
+    createColorMapTemplate(),
+    'yarn codegen-styles',
+    'Some artifact',
+  ),
+).then(() => console.log('color-map.tsx written!'));
+
 // generate colors
 Promise.all(
   [{ target: 'text.partial.tsx' }, { target: 'box.partial.tsx' }].map(
@@ -25,23 +35,45 @@ Promise.all(
       );
     },
   ),
-).then(() => {
-  // generate spacing values
-  [
-    { target: 'box.partial.tsx' },
-    { target: 'stack.partial.tsx' },
-    { target: 'inline.partial.tsx' },
-  ].forEach(({ target }) => {
-    const targetPath = join(__dirname, '../', 'src', 'components', target);
+)
+  .then(() => {
+    // generate spacing values
+    return Promise.all(
+      [
+        { target: 'box.partial.tsx' },
+        { target: 'stack.partial.tsx' },
+        { target: 'inline.partial.tsx' },
+      ].map(({ target }) => {
+        const targetPath = join(__dirname, '../', 'src', 'components', target);
+
+        const source = createPartialSignedArtifact(
+          (options) => options.map(createSpacingStylesFromTemplate).join('\n'),
+          'yarn codegen-styles',
+          { id: 'spacing', absoluteFilePath: targetPath },
+        );
+
+        return writeFile(targetPath, source).then(() =>
+          console.log(`${targetPath} written!`),
+        );
+      }),
+    );
+  })
+  .then(() => {
+    const targetPath = join(
+      __dirname,
+      '../',
+      'src',
+      'components',
+      'interaction-surface.partial.tsx',
+    );
 
     const source = createPartialSignedArtifact(
-      (options) => options.map(createSpacingStylesFromTemplate).join('\n'),
+      (options) => options.map(createInteractionStylesFromTemplate).join('\n'),
       'yarn codegen-styles',
-      { id: 'spacing', absoluteFilePath: targetPath },
+      { id: 'interactions', absoluteFilePath: targetPath },
     );
 
     return writeFile(targetPath, source).then(() =>
       console.log(`${targetPath} written!`),
     );
   });
-});