@atlaskit/ds-explorations 0.1.4 → 1.0.0

package/examples/01-box.tsx

@@ -8,27 +8,24 @@ import {
   UNSAFE_Stack as Stack,
   UNSAFE_Text as Text,
 } from '../src';
-import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
+import { spacingScale } from '../src/internal/spacing-scale';
 
 /**
  * Box permutations
  */
 export default () => {
   return (
-    <Stack gap="sp-400" alignItems="flexStart">
-      <Stack gap="sp-200" testId="box-with-background-and-paddingBlock">
+    <Stack gap="scale.400" alignItems="flexStart">
+      <Stack gap="scale.200" testId="box-with-background-and-paddingBlock">
         <Heading level="h600">paddingBlock</Heading>
-        <Inline gap="sp-200" alignItems="center">
-          {Object.keys(SPACING_SCALE).map((space) => (
+        <Inline gap="scale.200" alignItems="center">
+          {spacingScale.map((space) => (
             <Box
               key={space}
-              backgroundColor={['discovery.bold', 'purple']}
-              paddingBlock={space as GlobalSpacingToken}
+              backgroundColor="discovery.bold"
+              paddingBlock={space}
             >
-              <Box
-                backgroundColor={['elevation.surface', 'white']}
-                justifyContent="center"
-              >
+              <Box backgroundColor="elevation.surface" justifyContent="center">
                 <Text>{space}</Text>
               </Box>
             </Box>
@@ -36,19 +33,16 @@ export default () => {
         </Inline>
       </Stack>
 
-      <Stack gap="sp-200" testId="box-with-background-and-paddingInline">
+      <Stack gap="scale.200" testId="box-with-background-and-paddingInline">
         <Heading level="h600">paddingInline</Heading>
-        <Stack gap="sp-200" alignItems="center">
-          {Object.keys(SPACING_SCALE).map((space) => (
+        <Stack gap="scale.200" alignItems="center">
+          {spacingScale.map((space) => (
             <Box
               key={space}
-              backgroundColor={['discovery.bold', 'purple']}
-              paddingInline={space as GlobalSpacingToken}
+              backgroundColor="discovery.bold"
+              paddingInline={space}
             >
-              <Box
-                backgroundColor={['elevation.surface', 'white']}
-                justifyContent="center"
-              >
+              <Box backgroundColor="elevation.surface" justifyContent="center">
                 <Text>{space}</Text>
               </Box>
             </Box>
@@ -56,19 +50,12 @@ export default () => {
         </Stack>
       </Stack>
 
-      <Stack gap="sp-200" testId="box-with-background-and-padding">
+      <Stack gap="scale.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"
-              >
+        <Inline gap="scale.200" alignItems="center">
+          {spacingScale.map((space) => (
+            <Box key={space} backgroundColor="discovery.bold" padding={space}>
+              <Box backgroundColor="elevation.surface" justifyContent="center">
                 <Text>{space}</Text>
               </Box>
             </Box>
@@ -76,9 +63,9 @@ export default () => {
         </Inline>
       </Stack>
 
-      <Stack gap="sp-200" testId="box-with-backgroundColor">
+      <Stack gap="scale.200" testId="box-with-backgroundColor">
         <Heading level="h600">backgroundColor</Heading>
-        <Inline gap="sp-200" alignItems="center">
+        <Inline gap="scale.200" alignItems="center">
           {([
             'discovery.bold',
             'success.bold',
@@ -87,22 +74,18 @@ export default () => {
             'information.bold',
             'brand.bold',
           ] as const).map((bgColor) => (
-            <Box
-              key={bgColor}
-              backgroundColor={[bgColor, 'purple']}
-              padding={'sp-400'}
-            >
+            <Box key={bgColor} backgroundColor={bgColor} padding="scale.400">
               <Box justifyContent="center">
-                <Text color={['inverse', 'white']}>{bgColor}</Text>
+                <Text>{bgColor}</Text>
               </Box>
             </Box>
           ))}
         </Inline>
       </Stack>
 
-      <Stack gap="sp-200" testId="box-with-borderColor">
+      <Stack gap="scale.200" testId="box-with-borderColor">
         <Heading level="h600">borderColor</Heading>
-        <Inline gap="sp-200" alignItems="center">
+        <Inline gap="scale.200" alignItems="center">
           {([
             'discovery',
             'success',
@@ -113,14 +96,14 @@ export default () => {
           ] as const).map((borderColor) => (
             <Box
               key={borderColor}
-              backgroundColor={['neutral', 'grey']}
-              borderColor={[borderColor, 'purple']}
+              backgroundColor="neutral"
+              borderColor={borderColor}
               borderStyle="solid"
               borderWidth="2px"
-              padding={'sp-400'}
+              padding="scale.400"
             >
               <Box justifyContent="center">
-                <Text color={['color.text', 'black']}>{borderColor}</Text>
+                <Text color="color.text">{borderColor}</Text>
               </Box>
             </Box>
           ))}

package/examples/02-text-advanced.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+import Box from '../src/components/box.partial';
+import Inline from '../src/components/inline.partial';
+import Text from '../src/components/text.partial';
+
+export default () => {
+  return (
+    <Inline gap="scale.100">
+      <Box
+        paddingBlock="scale.400"
+        paddingInline="scale.400"
+        alignItems="center"
+        backgroundColor="information"
+      >
+        <Text>
+          <Text>Text that deletes its redundant wrapping</Text>
+        </Text>
+      </Box>
+      <Box
+        paddingBlock="scale.400"
+        paddingInline="scale.400"
+        alignItems="center"
+        backgroundColor="information"
+      >
+        <Text fontWeight="600">Text on information</Text>
+      </Box>
+      <Box
+        paddingBlock="scale.400"
+        paddingInline="scale.400"
+        alignItems="center"
+        backgroundColor="brand.bold"
+      >
+        <Text fontWeight="600">Text on brand bold</Text>
+      </Box>
+    </Inline>
+  );
+};

package/examples/02-text.tsx

@@ -11,69 +11,79 @@ import {
 
 export default () => {
   return (
-    <Stack gap="sp-200">
-      <Heading as="h2" level="h100">
-        Font size
+    <Stack gap="scale.300">
+      <Heading level="h400" as="h3">
+        Text examples
       </Heading>
-      <Inline gap="sp-200" testId="font-sizes">
-        {(['11px', '12px', '14px'] as const).map((fontSize) => (
-          <Text key={fontSize} fontSize={fontSize}>
-            fontSize {fontSize}
-          </Text>
-        ))}
-      </Inline>
-
-      <Heading as="h2" level="h100">
-        Font weight
-      </Heading>
-      <Inline gap="sp-200" testId="font-weights">
-        {(['400', '500'] as const).map((fontWeight) => (
-          <Text key={fontWeight} fontWeight={fontWeight}>
-            fontWeight {fontWeight}
-          </Text>
-        ))}
-      </Inline>
-
-      <Heading as="h2" level="h100">
-        Line height
-      </Heading>
-      <Inline gap="sp-200" testId="line-heights" alignItems="center">
-        {([
-          '12px',
-          '16px',
-          '20px',
-          '24px',
-          '28px',
-          '32px',
-          '40px',
-        ] as const).map((lineHeight) => (
-          <Box
-            key={lineHeight}
-            display="inlineFlex"
-            backgroundColor={['neutral', 'lightgrey']}
-          >
-            <Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
-          </Box>
-        ))}
-      </Inline>
-
-      <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
-          color={['brand', 'blue']}
-          fontSize="14px"
-          lineHeight="16px"
-          fontWeight="500"
-        >
-          Text with various props
-        </Text>
-        <Box UNSAFE_style={{ width: '200px' }}>
-          <Text shouldTruncate>Long truncated text that is cut off.</Text>
+      <Stack gap="scale.200">
+        <Box display="block">
+          <Heading level="h300">Font size</Heading>
+          <Inline gap="scale.200" testId="font-sizes">
+            {(['11px', '12px', '14px'] as const).map((fontSize) => (
+              <Text key={fontSize} fontSize={fontSize}>
+                fontSize {fontSize}
+              </Text>
+            ))}
+          </Inline>
+        </Box>
+        <Box display="block">
+          <Heading level="h300" as="h4">
+            Font weight
+          </Heading>
+          <Inline gap="scale.200" testId="font-weights">
+            {(['400', '500'] as const).map((fontWeight) => (
+              <Text key={fontWeight} fontWeight={fontWeight}>
+                fontWeight {fontWeight}
+              </Text>
+            ))}
+          </Inline>
+        </Box>
+        <Box display="block">
+          <Heading level="h300" as="h4">
+            Line height
+          </Heading>
+          <Inline gap="scale.200" testId="line-heights" alignItems="center">
+            {([
+              '12px',
+              '16px',
+              '20px',
+              '24px',
+              '28px',
+              '32px',
+              '40px',
+            ] as const).map((lineHeight) => (
+              <Box
+                key={lineHeight}
+                display="inlineFlex"
+                backgroundColor="neutral"
+              >
+                <Text lineHeight={lineHeight}>lineHeight {lineHeight}</Text>
+              </Box>
+            ))}
+          </Inline>
+        </Box>
+        <Box display="block">
+          <Heading level="h300" as="h4">
+            Testing
+          </Heading>
+          <Stack gap="scale.050" testId="testing">
+            <Text as="p">Paragraph</Text>
+            <Text as="div">A div</Text>
+            <Text>
+              <Text>This text tag will have its dom element stripped</Text>
+            </Text>
+            <Text
+              color="brand"
+              fontSize="14px"
+              lineHeight="16px"
+              fontWeight="500"
+            >
+              Text with various props
+            </Text>
+            <Box UNSAFE_style={{ width: '200px' }}>
+              <Text shouldTruncate>Long truncated text that is cut off.</Text>
+            </Box>
+          </Stack>
         </Box>
       </Stack>
     </Stack>

package/examples/03-stack.tsx

@@ -7,78 +7,49 @@ import {
   UNSAFE_Inline as Inline,
   UNSAFE_Stack as Stack,
 } from '../src';
-import { GlobalSpacingToken, SPACING_SCALE } from '../src/constants';
+import { spacingScale } from '../src/internal/spacing-scale';
 
 const flexAlignItems = ['center', 'baseline', 'flexStart', 'flexEnd'];
 const flexJustifyContent = ['center', 'flexStart', 'flexEnd'];
+const flexWrap = ['wrap'];
 
 /**
  * Stack permutations
  */
 export default () => {
   return (
-    <Stack gap="sp-300">
-      <Stack gap="sp-300" testId="stack-spacing">
+    <Stack gap="scale.300">
+      <Stack gap="scale.300" testId="stack-spacing">
         <Heading level="h700">Spacing</Heading>
-        <Inline gap="sp-400">
-          {Object.keys(SPACING_SCALE).map((space) => (
-            <Stack gap="sp-300">
+        <Inline gap="scale.400">
+          {spacingScale.map((space) => (
+            <Stack key={space} gap="scale.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>
+              <Box backgroundColor="neutral">
+                <Stack gap={space} alignItems="center">
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
                 </Stack>
               </Box>
             </Stack>
           ))}
         </Inline>
       </Stack>
-      <Stack gap="sp-300" testId="stack-alignment">
+      <Stack gap="scale.300" testId="stack-alignment">
         <Heading level="h700">Alignment</Heading>
         <Heading level="h600">alignItems</Heading>
-        <Inline gap="sp-400">
+        <Inline gap="scale.400">
           {flexAlignItems.map((alignItemsValue) => (
-            <Stack gap="sp-300">
+            <Stack key={alignItemsValue} gap="scale.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>
+              <Box backgroundColor="neutral" display="block">
+                <Stack gap="scale.200" alignItems={alignItemsValue as any}>
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
                 </Stack>
               </Box>
             </Stack>
@@ -86,34 +57,37 @@ export default () => {
         </Inline>
 
         <Heading level="h600">justifyContent</Heading>
-        <Inline gap="sp-400">
+        <Inline gap="scale.400">
           {flexJustifyContent.map((justifyContentValue) => (
-            <Stack gap="sp-300">
+            <Stack key={justifyContentValue} gap="scale.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>
+              <Box backgroundColor="neutral" UNSAFE_style={{ height: '200px' }}>
+                <Stack
+                  gap="scale.200"
+                  justifyContent={justifyContentValue as any}
+                >
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                </Stack>
+              </Box>
+            </Stack>
+          ))}
+        </Inline>
+
+        <Heading level="h700">Overflow</Heading>
+        <Heading level="h600">flexWrap</Heading>
+        <Inline gap="scale.400">
+          {flexWrap.map((flexWrapValue) => (
+            <Stack key={flexWrapValue} gap="scale.300">
+              <Heading level="h500">{flexWrapValue}</Heading>
+
+              <Box backgroundColor="neutral" UNSAFE_style={{ height: '50px' }}>
+                <Stack gap="scale.200" flexWrap={flexWrapValue as any}>
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
+                  <Box padding="scale.100" backgroundColor="success.bold" />
                 </Stack>
               </Box>
             </Stack>