@atlaskit/ds-explorations 0.0.3 → 0.1.0

package/dist/es2019/components/text.partial.js

@@ -1,100 +1,146 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-// These values are pulled from @atlaskit/theme
-const fontSize = 14;
-const fontSizeExtraSmall = 11;
-const fontSizeSmall = 12;
 const fontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;
 const fontSizeMap = {
-  extraSmall: css({
-    fontSize: fontSizeExtraSmall
+  '11': css({
+    fontSize: '11px'
   }),
-  small: css({
-    fontSize: fontSizeSmall
+  '12': css({
+    fontSize: '12px'
   }),
-  normal: css({
-    fontSize
+  '14': css({
+    fontSize: '14px'
   })
 };
+// NOTE: can't use numbers as keys or Constellation won't build. Weird one.
 const fontWeightMap = {
-  400: css({
+  '400': css({
     fontWeight: 400
   }),
-  500: css({
+  '500': css({
     fontWeight: 500
   })
 };
+const lineHeightMap = {
+  '12px': css({
+    lineHeight: '12px'
+  }),
+  '16px': css({
+    lineHeight: '16px'
+  }),
+  '20px': css({
+    lineHeight: '20px'
+  }),
+  '24px': css({
+    lineHeight: '24px'
+  }),
+  '28px': css({
+    lineHeight: '28px'
+  }),
+  '32px': css({
+    lineHeight: '32px'
+  }),
+  '40px': css({
+    lineHeight: '40px'
+  })
+};
+const textAlignMap = {
+  center: css({
+    textAlign: 'center'
+  }),
+  end: css({
+    textAlign: 'end'
+  }),
+  start: css({
+    textAlign: 'start'
+  })
+};
 const baseStyles = css({
   fontFamily
 });
 /**
  * __Text__
  *
- * A text {description}.
+ * 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
  */
 
-function Text({
+const Text = ({
   as: Component = 'span',
   children,
-  color,
+  color: colorTuple,
   fontSize,
-  fontWeight
-}) {
+  fontWeight,
+  lineHeight,
+  textAlign,
+  href,
+  testId,
+  UNSAFE_style
+}) => {
+  const [color, fallback] = colorTuple || [];
   return jsx(Component, {
-    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight]]
+    style: { ...UNSAFE_style,
+      ...(fallback && {
+        '--ds-co-fb': fallback
+      })
+    },
+    css: [baseStyles, color && textColorMap[color], fontSize && fontSizeMap[fontSize], fontWeight && fontWeightMap[fontWeight], lineHeight && lineHeightMap[lineHeight], textAlign && textAlignMap[textAlign]],
+    href: href,
+    "data-testid": testId
   }, children);
-}
+};
 
 export default Text;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::85816aeddf2947ff7678c0c551db336c>>
+ * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
  */
 
 const textColorMap = {
-  default: css({
-    color: "var(--ds-text, #172B4D)"
+  'color.text': css({
+    color: "var(--ds-text, var(--ds-co-fb))"
   }),
   subtle: css({
-    color: "var(--ds-text-subtle, #44546F)"
+    color: "var(--ds-text-subtle, var(--ds-co-fb))"
   }),
   subtlest: css({
-    color: "var(--ds-text-subtlest, #626F86)"
+    color: "var(--ds-text-subtlest, var(--ds-co-fb))"
   }),
   disabled: css({
-    color: "var(--ds-text-disabled, #091E424F)"
+    color: "var(--ds-text-disabled, var(--ds-co-fb))"
   }),
   inverse: css({
-    color: "var(--ds-text-inverse, #FFFFFF)"
+    color: "var(--ds-text-inverse, var(--ds-co-fb))"
   }),
   brand: css({
-    color: "var(--ds-text-brand, #0C66E4)"
+    color: "var(--ds-text-brand, var(--ds-co-fb))"
   }),
   selected: css({
-    color: "var(--ds-text-selected, #0C66E4)"
+    color: "var(--ds-text-selected, var(--ds-co-fb))"
   }),
   danger: css({
-    color: "var(--ds-text-danger, #AE2A19)"
+    color: "var(--ds-text-danger, var(--ds-co-fb))"
   }),
   warning: css({
-    color: "var(--ds-text-warning, #974F0C)"
+    color: "var(--ds-text-warning, var(--ds-co-fb))"
   }),
   'warning.inverse': css({
-    color: "var(--ds-text-warning-inverse, #172B4D)"
+    color: "var(--ds-text-warning-inverse, var(--ds-co-fb))"
   }),
   success: css({
-    color: "var(--ds-text-success, #216E4E)"
+    color: "var(--ds-text-success, var(--ds-co-fb))"
   }),
   discovery: css({
-    color: "var(--ds-text-discovery, #5E4DB2)"
+    color: "var(--ds-text-discovery, var(--ds-co-fb))"
   }),
   information: css({
-    color: "var(--ds-text-information, #0055CC)"
+    color: "var(--ds-text-information, var(--ds-co-fb))"
   })
 };
 /**

package/dist/es2019/components/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/constants.js

@@ -1,4 +1,5 @@
 export const SPACING_SCALE = {
+  'sp-0': 0,
   'sp-25': 2,
   'sp-50': 4,
   'sp-75': 6,
@@ -6,6 +7,7 @@ export const SPACING_SCALE = {
   'sp-200': 16,
   'sp-300': 24,
   'sp-400': 32,
+  'sp-500': 40,
   'sp-600': 48,
   'sp-800': 64
 };

package/dist/es2019/index.js

@@ -1 +1,4 @@
-export default {};
+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';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "0.0.3",
+	"version": "0.1.0",
 	"sideEffects": false
 }