@atlaskit/ds-explorations 0.0.2 → 0.1.1

package/examples/01-box.tsx

@@ -1,7 +1,131 @@
 import React from 'react';
 
-import Box from '../src/components/box.partial';
+import Heading from '@atlaskit/heading';
 
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_Inline as Inline,
+  UNSAFE_Stack as Stack,
+  UNSAFE_Text as Text,
+} from '../src';
+import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
+
+/**
+ * Box permutations
+ */
 export default () => {
-  return <Box>Box</Box>;
+  return (
+    <Stack gap="sp-400" alignItems="flexStart">
+      <Stack gap="sp-200" testId="box-with-background-and-paddingBlock">
+        <Heading level="h600">paddingBlock</Heading>
+        <Inline gap="sp-200" alignItems="center">
+          {Object.keys(SPACING_SCALE).map((space) => (
+            <Box
+              key={space}
+              backgroundColor={['discovery.bold', 'purple']}
+              paddingBlock={space as GlobalSpacingToken}
+            >
+              <Box
+                backgroundColor={['elevation.surface', 'white']}
+                justifyContent="center"
+              >
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack gap="sp-200" testId="box-with-background-and-paddingInline">
+        <Heading level="h600">paddingInline</Heading>
+        <Stack gap="sp-200" alignItems="center">
+          {Object.keys(SPACING_SCALE).map((space) => (
+            <Box
+              key={space}
+              backgroundColor={['discovery.bold', 'purple']}
+              paddingInline={space as GlobalSpacingToken}
+            >
+              <Box
+                backgroundColor={['elevation.surface', 'white']}
+                justifyContent="center"
+              >
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Stack>
+      </Stack>
+
+      <Stack gap="sp-200" testId="box-with-background-and-padding">
+        <Heading level="h600">padding</Heading>
+        <Inline gap="sp-200" alignItems="center">
+          {Object.keys(SPACING_SCALE).map((space) => (
+            <Box
+              key={space}
+              backgroundColor={['discovery.bold', 'purple']}
+              padding={space as GlobalSpacingToken}
+            >
+              <Box
+                backgroundColor={['elevation.surface', 'white']}
+                justifyContent="center"
+              >
+                <Text>{space}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack gap="sp-200" testId="box-with-backgroundColor">
+        <Heading level="h600">backgroundColor</Heading>
+        <Inline gap="sp-200" alignItems="center">
+          {([
+            'discovery.bold',
+            'success.bold',
+            'warning.bold',
+            'danger.bold',
+            'information.bold',
+            'brand.bold',
+          ] as const).map((bgColor) => (
+            <Box
+              key={bgColor}
+              backgroundColor={[bgColor, 'purple']}
+              padding={'sp-400'}
+            >
+              <Box justifyContent="center">
+                <Text color={['inverse', 'white']}>{bgColor}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+
+      <Stack gap="sp-200" testId="box-with-borderColor">
+        <Heading level="h600">borderColor</Heading>
+        <Inline gap="sp-200" alignItems="center">
+          {([
+            'discovery',
+            'success',
+            'warning',
+            'danger',
+            'information',
+            'brand',
+          ] as const).map((borderColor) => (
+            <Box
+              key={borderColor}
+              backgroundColor={['neutral', 'grey']}
+              borderColor={[borderColor, 'purple']}
+              borderStyle="solid"
+              borderWidth="2px"
+              padding={'sp-400'}
+            >
+              <Box justifyContent="center">
+                <Text color={['color.text', 'black']}>{borderColor}</Text>
+              </Box>
+            </Box>
+          ))}
+        </Inline>
+      </Stack>
+    </Stack>
+  );
 };

package/examples/02-text.tsx

@@ -1,7 +1,60 @@
 import React from 'react';
 
-import Text from '../src/components/text.partial';
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_Inline as Inline,
+  UNSAFE_Stack as Stack,
+  UNSAFE_Text as Text,
+} from '../src';
 
 export default () => {
-  return <Text>Text</Text>;
+  return (
+    <Stack gap="sp-200">
+      <Text as="h1">Font size</Text>
+      <Inline gap="sp-200" testId="font-sizes">
+        {(['11', '12', '14'] as const).map((fontSize) => (
+          <Text fontSize={fontSize}>fontSize {fontSize}</Text>
+        ))}
+      </Inline>
+
+      <Text as="h1">Font weight</Text>
+      <Inline gap="sp-200" testId="font-weights">
+        {(['400', '500'] as const).map((fontWeight) => (
+          <Text fontWeight={fontWeight}>fontWeight {fontWeight}</Text>
+        ))}
+      </Inline>
+
+      <Text as="h1">Line height</Text>
+      <Inline gap="sp-200" testId="line-heights" alignItems="center">
+        {([
+          '12px',
+          '16px',
+          '20px',
+          '24px',
+          '28px',
+          '32px',
+          '40px',
+        ] as const).map((lineHeight) => (
+          <Box display="inlineFlex" backgroundColor={['neutral', 'lightgrey']}>
+            <Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
+          </Box>
+        ))}
+      </Inline>
+
+      <Text as="h1">Testing</Text>
+      <Inline gap="sp-200" testId="testing">
+        <Text>Basic</Text>
+        <Text as="h1">Heading 1</Text>
+        <Text as="a">Link</Text>
+        <Text
+          color={['brand', 'blue']}
+          fontSize="14"
+          lineHeight="16px"
+          fontWeight="500"
+        >
+          Text with various props
+        </Text>
+      </Inline>
+    </Stack>
+  );
 };

package/examples/03-stack.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+
+import Heading from '@atlaskit/heading';
+
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_Inline as Inline,
+  UNSAFE_Stack as Stack,
+} from '../src';
+import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
+
+const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
+const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
+
+/**
+ * Stack permutations
+ */
+export default () => {
+  return (
+    <Stack gap="sp-300">
+      <Stack gap="sp-300" testId="stack-spacing">
+        <Heading level="h700">Spacing</Heading>
+        <Inline gap="sp-400">
+          {Object.keys(SPACING_SCALE).map((space) => (
+            <Stack gap="sp-300">
+              <Heading level="h500">{space}</Heading>
+
+              <Box backgroundColor={['neutral', 'grey']}>
+                <Stack gap={space as GlobalSpacingToken} alignItems="center">
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+      </Stack>
+      <Stack gap="sp-300" testId="stack-alignment">
+        <Heading level="h700">Alignment</Heading>
+        <Heading level="h600">alignItems</Heading>
+        <Inline gap="sp-400">
+          {flexAlignItems.map((alignItemsValue) => (
+            <Stack gap="sp-300">
+              <Heading level="h500">{alignItemsValue}</Heading>
+
+              <Box backgroundColor={['neutral', 'grey']} display="block">
+                <Stack gap="sp-200" alignItems={alignItemsValue as any}>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+
+        <Heading level="h600">justifyContent</Heading>
+        <Inline gap="sp-400">
+          {flexJustifyContent.map((justifyContentValue) => (
+            <Stack gap="sp-300">
+              <Heading level="h500">{justifyContentValue}</Heading>
+
+              <Box
+                backgroundColor={['neutral', 'grey']}
+                UNSAFE_style={{ height: '200px' }}
+              >
+                <Stack gap="sp-200" justifyContent={justifyContentValue as any}>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+      </Stack>
+    </Stack>
+  );
+};

package/examples/04-inline.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+
+import Heading from '@atlaskit/heading';
+
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_Inline as Inline,
+  UNSAFE_Stack as Stack,
+} from '../src';
+import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
+
+const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
+const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
+
+/**
+ * Inline permutations
+ */
+export default () => {
+  return (
+    <Stack gap="sp-300">
+      <Stack gap="sp-300" testId="inline-spacing">
+        <Heading level="h700">Spacing</Heading>
+        <Stack gap="sp-400">
+          {Object.keys(SPACING_SCALE).map((space) => (
+            <Inline gap="sp-300">
+              <Box width="sp-800">
+                <Heading level="h500">{space}</Heading>
+              </Box>
+
+              <Box backgroundColor={['neutral', 'grey']}>
+                <Inline gap={space as GlobalSpacingToken} alignItems="center">
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                </Inline>
+              </Box>
+            </Inline>
+          ))}
+        </Stack>
+      </Stack>
+      <Stack gap="sp-300" testId="inline-alignment">
+        <Heading level="h700">Alignment</Heading>
+        <Heading level="h600">alignItems</Heading>
+        <Inline gap="sp-400">
+          {flexAlignItems.map((alignItemsValue) => (
+            <Stack gap="sp-300">
+              <Heading level="h500">{alignItemsValue}</Heading>
+
+              <Box
+                backgroundColor={['neutral', 'grey']}
+                UNSAFE_style={{ height: '100px' }}
+              >
+                <Inline gap="sp-200" alignItems={alignItemsValue as any}>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                </Inline>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+
+        <Heading level="h600">justifyContent</Heading>
+        <Inline gap="sp-400">
+          {flexJustifyContent.map((justifyContentValue) => (
+            <Stack gap="sp-300">
+              <Heading level="h500">{justifyContentValue}</Heading>
+
+              <Box
+                display="block"
+                backgroundColor={['neutral', 'grey']}
+                UNSAFE_style={{ width: '140px' }}
+              >
+                <Inline
+                  gap="sp-200"
+                  justifyContent={justifyContentValue as any}
+                >
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                  <Box
+                    padding="sp-100"
+                    backgroundColor={['success.bold', 'green']}
+                  >
+                    {' '}
+                  </Box>
+                </Inline>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+      </Stack>
+    </Stack>
+  );
+};

package/examples/{03-badge.tsx → 05-badge.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 
 import Badge from '@atlaskit/badge';
 
-import Box from '../src/components/box.partial';
+import { UNSAFE_Box as Box } from '../src';
 import Text from '../src/components/text.partial';
 
 export default () => {
@@ -11,12 +11,12 @@ export default () => {
       <Badge>{8}</Badge>
       <Box
         borderRadius="badge"
-        backgroundColor="neutral"
+        backgroundColor={['neutral', 'white']}
         display="inlineFlex"
         paddingInline="sp-75"
-        style={{ lineHeight: '16px' }}
+        UNSAFE_style={{ lineHeight: '16px' }}
       >
-        <Text fontSize="small">8</Text>
+        <Text fontSize="12">8</Text>
       </Box>
     </>
   );

package/examples/{04-section-message.tsx → 06-section-message.tsx}

@@ -11,9 +11,9 @@ import SectionMessage, {
 } from '@atlaskit/section-message';
 import { token } from '@atlaskit/tokens';
 
-import Box from '../src/components/box.partial';
-import Inline from '../src/components/inline';
-import Stack from '../src/components/stack';
+import { UNSAFE_Box as Box } from '../src';
+import Inline from '../src/components/inline.partial';
+import Stack from '../src/components/stack.partial';
 import Text from '../src/components/text.partial';
 
 export default () => {
@@ -22,7 +22,7 @@ export default () => {
       <Box
         paddingBlock="sp-200"
         paddingInline="sp-200"
-        backgroundColor="information"
+        backgroundColor={['information', 'purple']}
       >
         <Inline gap="sp-200">
           <InfoIcon
@@ -40,7 +40,7 @@ export default () => {
               to assure my dear sister of my welfare and increasing confidence
               in the success of my undertaking.
             </Text>
-            <Inline separator="·" gap="sp-100">
+            <Inline divider="·" gap="sp-100">
               <Button
                 appearance="link"
                 spacing="none"

package/examples/{05-comment.tsx → 07-comment.tsx}

@@ -3,13 +3,13 @@ import { jsx } from '@emotion/core';
 
 import Lozenge from '@atlaskit/lozenge';
 
-import Box from '../src/components/box.partial';
-import Inline from '../src/components/inline';
-import Stack from '../src/components/stack';
+import { UNSAFE_Box as Box } from '../src';
+import Inline from '../src/components/inline.partial';
+import Stack from '../src/components/stack.partial';
 import Text from '../src/components/text.partial';
 
 const Author = ({ children }: any) => {
-  return <Text fontWeight={500}>{children}</Text>;
+  return <Text fontWeight="500">{children}</Text>;
 };
 
 const Date = ({ children }: any) => {
@@ -17,11 +17,13 @@ const Date = ({ children }: any) => {
 };
 
 const EditIndicator = ({ hasBeenEdited }: any) => {
-  return hasBeenEdited ? <Text color="subtlest">Edited</Text> : null;
+  return hasBeenEdited ? (
+    <Text color={['subtlest', '#555']}>Edited</Text>
+  ) : null;
 };
 
 const CommentAction = ({ children }: any) => {
-  return <Text fontWeight={500}>{children}</Text>;
+  return <Text fontWeight="500">{children}</Text>;
 };
 
 export default () => {
@@ -29,7 +31,7 @@ export default () => {
     <Box>
       <Stack gap="sp-50">
         <Inline gap="sp-100" alignItems="center">
-          <Author>Anthony Roberts</Author>
+          <Author>Jane Citizen</Author>
           <Lozenge>Author</Lozenge>
           <Date>Jun 15, 2022</Date>
           <EditIndicator hasBeenEdited />
@@ -41,7 +43,7 @@ export default () => {
           aliquip ex ea commodo consequat.
         </Text>
         <Box color="subtle">
-          <Inline gap="sp-100" separator="·">
+          <Inline gap="sp-100" divider="·">
             <CommentAction>Reply</CommentAction>
             <CommentAction>Edit</CommentAction>
             <CommentAction>Like</CommentAction>

package/examples/08-lozenge.tsx

@@ -0,0 +1,29 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+
+import Lozenge from '@atlaskit/lozenge';
+
+import {
+  UNSAFE_Box as Box,
+  UNSAFE_Inline as Inline,
+  UNSAFE_Text as Text,
+} from '../src';
+
+export default () => {
+  return (
+    <Inline gap="sp-200">
+      <Lozenge>Default</Lozenge>
+      <Box
+        backgroundColor={['neutral', 'grey']}
+        borderRadius="normal"
+        as="span"
+        paddingInline="sp-50"
+      >
+        {/* textTransform: uppercase, font-weight: 700 */}
+        <Text fontSize="11" color={['color.text', 'grey']}>
+          Default
+        </Text>
+      </Box>
+    </Inline>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "0.0.2",
+  "version": "0.1.1",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -53,7 +53,7 @@
     "prettier": "^2.1.1",
     "react-dom": "^16.8.0",
     "ts-node": "^10.0.0",
-    "typescript": "4.2.4",
+    "typescript": "4.3.5",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {