@atlaskit/ds-explorations 0.0.2 → 0.1.1

package/src/components/stack.partial.tsx

@@ -0,0 +1,101 @@
+/** @jsx jsx */
+import { forwardRef, ReactNode } from 'react';
+
+import { css, jsx } from '@emotion/core';
+
+import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
+
+import { BasePrimitiveProps } from './types';
+
+interface StackProps extends BasePrimitiveProps {
+  /**
+   * Used to align children along the cross axis.
+   */
+  alignItems?: FlexAlignItems;
+  /**
+   * Used to align children along the main axis.
+   */
+  justifyContent?: FlexJustifyContent;
+  /**
+   * Token representing gap between children.
+   */
+  gap: GlobalSpacingToken;
+  /**
+   * Elements to be rendered inside the Stack.
+   */
+  children: ReactNode;
+}
+
+type FlexAlignItems = keyof typeof flexAlignItemsMap;
+const flexAlignItemsMap = {
+  center: css({ alignItems: 'center' }),
+  baseline: css({ alignItems: 'baseline' }),
+  flexStart: css({ alignItems: 'flex-start' }),
+  flexEnd: css({ alignItems: 'flex-end' }),
+};
+
+type FlexJustifyContent = keyof typeof flexJustifyContentMap;
+const flexJustifyContentMap = {
+  center: css({ justifyContent: 'center' }),
+  flexStart: css({ justifyContent: 'flex-start' }),
+  flexEnd: css({ justifyContent: 'flex-end' }),
+};
+
+const baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  flexDirection: 'column',
+});
+
+/**
+ * __Stack__
+ *
+ * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+const Stack = forwardRef<HTMLDivElement, StackProps>(
+  ({ gap, alignItems, justifyContent, children, testId }, ref) => {
+    return (
+      <div
+        css={[
+          baseStyles,
+          gap && gapMap[gap],
+          alignItems && flexAlignItemsMap[alignItems],
+          justifyContent && flexJustifyContentMap[justifyContent],
+        ]}
+        data-testid={testId}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export default Stack;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::ac3192fbc453a94ab5e720d0273556ef>>
+ * @codegenId spacing
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["gap"]
+ */
+const gapMap = {
+  'sp-0': css({ gap: SPACING_SCALE['sp-0'] }),
+  'sp-25': css({ gap: SPACING_SCALE['sp-25'] }),
+  'sp-50': css({ gap: SPACING_SCALE['sp-50'] }),
+  'sp-75': css({ gap: SPACING_SCALE['sp-75'] }),
+  'sp-100': css({ gap: SPACING_SCALE['sp-100'] }),
+  'sp-200': css({ gap: SPACING_SCALE['sp-200'] }),
+  'sp-300': css({ gap: SPACING_SCALE['sp-300'] }),
+  'sp-400': css({ gap: SPACING_SCALE['sp-400'] }),
+  'sp-500': css({ gap: SPACING_SCALE['sp-500'] }),
+  'sp-600': css({ gap: SPACING_SCALE['sp-600'] }),
+  'sp-800': css({ gap: SPACING_SCALE['sp-800'] }),
+};
+
+/**
+ * @codegenEnd
+ */

package/src/components/text.partial.tsx

@@ -1,33 +1,91 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
+import { CSSProperties, FC, ReactNode } from 'react';
 
 import { css, jsx } from '@emotion/core';
 
 import { token } from '@atlaskit/tokens';
 
-interface TextProps {
+import { BasePrimitiveProps } from './types';
+
+interface TextProps extends BasePrimitiveProps {
+  /**
+   * HTML tag to be rendered. Defaults to `span`.
+   */
+  as?:
+    | 'span'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'label'
+    | 'a'
+    | 'ul'
+    | 'ol'
+    | 'p';
+  /**
+   * Elements rendered within the Text element
+   */
   children: ReactNode;
-  color?: TextColor;
-  as?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  fontSize?: keyof typeof fontSizeMap;
-  fontWeight?: keyof typeof fontWeightMap;
+  /**
+   * Text color
+   */
+  color?: [TextColor, 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;
+  /**
+   * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
+   */
+  textAlign?: TextAlign;
+  /**
+   * For use with `a` link tags.
+   */
+  href?: string;
 }
 
-// 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`;
 
+type FontSize = keyof typeof fontSizeMap;
 const fontSizeMap = {
-  extraSmall: css({ fontSize: fontSizeExtraSmall }),
-  small: css({ fontSize: fontSizeSmall }),
-  normal: css({ fontSize }),
+  '11': css({ fontSize: '11px' }),
+  '12': css({ fontSize: '12px' }),
+  '14': css({ fontSize: '14px' }),
 };
 
+type FontWeight = keyof typeof fontWeightMap;
+// NOTE: can't use numbers as keys or Constellation won't build. Weird one.
 const fontWeightMap = {
-  400: css({ fontWeight: 400 }),
-  500: css({ fontWeight: 500 }),
+  '400': css({ fontWeight: 400 }),
+  '500': css({ fontWeight: 500 }),
+};
+
+type LineHeight = keyof typeof lineHeightMap;
+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' }),
+};
+
+type TextAlign = keyof typeof textAlignMap;
+const textAlignMap = {
+  center: css({ textAlign: 'center' }),
+  end: css({ textAlign: 'end' }),
+  start: css({ textAlign: 'start' }),
 };
 
 const baseStyles = css({
@@ -37,79 +95,95 @@ const baseStyles = css({
 /**
  * __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: FC<TextProps> = ({
   as: Component = 'span',
   children,
-  color,
+  color: colorTuple,
   fontSize,
   fontWeight,
-}: TextProps) {
+  lineHeight,
+  textAlign,
+  href,
+  testId,
+  UNSAFE_style,
+}: TextProps) => {
+  const [color, fallback] = colorTuple || [];
   return (
     <Component
+      style={{
+        ...UNSAFE_style,
+        ...(fallback && ({ '--ds-co-fb': fallback } as CSSProperties)),
+      }}
       css={[
         baseStyles,
         color && textColorMap[color],
         fontSize && fontSizeMap[fontSize],
         fontWeight && fontWeightMap[fontWeight],
+        lineHeight && lineHeightMap[lineHeight],
+        textAlign && textAlignMap[textAlign],
       ]}
+      href={href}
+      data-testid={testId}
     >
       {children}
     </Component>
   );
-}
+};
 
 export default Text;
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::588616346f4a4bd0abb93bf324335944>>
+ * @codegen <<SignedSource::85a0a0bc073c7af8fd63101d6c88d59e>>
  * @codegenId colors
  * @codegenCommand yarn codegen-styles
  * @codegenParams ["text"]
  */
 const textColorMap = {
-  default: css({
-    color: token('color.text', '#172B4D'),
+  'color.text': css({
+    color: token('color.text', 'var(--ds-co-fb)'),
   }),
   subtle: css({
-    color: token('color.text.subtle', '#44546F'),
+    color: token('color.text.subtle', 'var(--ds-co-fb)'),
   }),
   subtlest: css({
-    color: token('color.text.subtlest', '#626F86'),
+    color: token('color.text.subtlest', 'var(--ds-co-fb)'),
   }),
   disabled: css({
-    color: token('color.text.disabled', '#8993A5'),
+    color: token('color.text.disabled', 'var(--ds-co-fb)'),
   }),
   inverse: css({
-    color: token('color.text.inverse', '#FFFFFF'),
+    color: token('color.text.inverse', 'var(--ds-co-fb)'),
   }),
   brand: css({
-    color: token('color.text.brand', '#0C66E4'),
+    color: token('color.text.brand', 'var(--ds-co-fb)'),
   }),
   selected: css({
-    color: token('color.text.selected', '#0C66E4'),
+    color: token('color.text.selected', 'var(--ds-co-fb)'),
   }),
   danger: css({
-    color: token('color.text.danger', '#AE2A19'),
+    color: token('color.text.danger', 'var(--ds-co-fb)'),
   }),
   warning: css({
-    color: token('color.text.warning', '#974F0C'),
+    color: token('color.text.warning', 'var(--ds-co-fb)'),
   }),
   'warning.inverse': css({
-    color: token('color.text.warning.inverse', '#172B4D'),
+    color: token('color.text.warning.inverse', 'var(--ds-co-fb)'),
   }),
   success: css({
-    color: token('color.text.success', '#216E4E'),
+    color: token('color.text.success', 'var(--ds-co-fb)'),
   }),
   discovery: css({
-    color: token('color.text.discovery', '#5E4DB2'),
+    color: token('color.text.discovery', 'var(--ds-co-fb)'),
   }),
   information: css({
-    color: token('color.text.information', '#0055CC'),
+    color: token('color.text.information', 'var(--ds-co-fb)'),
   }),
 };
 

package/src/components/types.tsx

@@ -0,0 +1,15 @@
+import { 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/src/constants.tsx

@@ -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/src/index.tsx

@@ -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/cjs/components/inline.js

@@ -1,45 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _core = require("@emotion/core");
-
-var _box = _interopRequireDefault(require("./box.partial"));
-
-/** @jsx jsx */
-
-/**
- * __Inline__
- *
- * A Inline {description}.
- *
- * @internal
- */
-function Inline(_ref) {
-  var as = _ref.as,
-      gap = _ref.gap,
-      separator = _ref.separator,
-      children = _ref.children,
-      alignItems = _ref.alignItems;
-
-  var childCount = _react.Children.count(children);
-
-  return (0, _core.jsx)(_box.default, {
-    as: as,
-    flexDirection: "row",
-    alignItems: alignItems,
-    gap: gap
-  }, _react.Children.map(children, function (child, index) {
-    return (0, _core.jsx)(_react.Fragment, null, child, separator && index !== childCount - 1 && (0, _core.jsx)(_react.Fragment, null, separator));
-  }));
-}
-
-var _default = Inline;
-exports.default = _default;

package/dist/cjs/components/stack.js

@@ -1,33 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _core = require("@emotion/core");
-
-var _box = _interopRequireDefault(require("./box.partial"));
-
-/** @jsx jsx */
-
-/**
- * __Stack__
- *
- * A Stack {description}.
- *
- * @internal
- */
-function Stack(_ref) {
-  var gap = _ref.gap,
-      children = _ref.children;
-  return (0, _core.jsx)(_box.default, {
-    flexDirection: "column",
-    gap: gap
-  }, children);
-}
-
-var _default = Stack;
-exports.default = _default;

package/dist/es2019/components/inline.js

@@ -1,31 +0,0 @@
-/** @jsx jsx */
-import { Children, Fragment } from 'react';
-import { jsx } from '@emotion/core';
-import Box from './box.partial';
-
-/**
- * __Inline__
- *
- * A Inline {description}.
- *
- * @internal
- */
-function Inline({
-  as,
-  gap,
-  separator,
-  children,
-  alignItems
-}) {
-  const childCount = Children.count(children);
-  return jsx(Box, {
-    as: as,
-    flexDirection: "row",
-    alignItems: alignItems,
-    gap: gap
-  }, Children.map(children, (child, index) => {
-    return jsx(Fragment, null, child, separator && index !== childCount - 1 && jsx(Fragment, null, separator));
-  }));
-}
-
-export default Inline;

package/dist/es2019/components/stack.js

@@ -1,22 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import Box from './box.partial';
-
-/**
- * __Stack__
- *
- * A Stack {description}.
- *
- * @internal
- */
-function Stack({
-  gap,
-  children
-}) {
-  return jsx(Box, {
-    flexDirection: "column",
-    gap: gap
-  }, children);
-}
-
-export default Stack;

package/dist/esm/components/inline.js

@@ -1,30 +0,0 @@
-/** @jsx jsx */
-import { Children, Fragment } from 'react';
-import { jsx } from '@emotion/core';
-import Box from './box.partial';
-
-/**
- * __Inline__
- *
- * A Inline {description}.
- *
- * @internal
- */
-function Inline(_ref) {
-  var as = _ref.as,
-      gap = _ref.gap,
-      separator = _ref.separator,
-      children = _ref.children,
-      alignItems = _ref.alignItems;
-  var childCount = Children.count(children);
-  return jsx(Box, {
-    as: as,
-    flexDirection: "row",
-    alignItems: alignItems,
-    gap: gap
-  }, Children.map(children, function (child, index) {
-    return jsx(Fragment, null, child, separator && index !== childCount - 1 && jsx(Fragment, null, separator));
-  }));
-}
-
-export default Inline;

package/dist/esm/components/stack.js

@@ -1,21 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import Box from './box.partial';
-
-/**
- * __Stack__
- *
- * A Stack {description}.
- *
- * @internal
- */
-function Stack(_ref) {
-  var gap = _ref.gap,
-      children = _ref.children;
-  return jsx(Box, {
-    flexDirection: "column",
-    gap: gap
-  }, children);
-}
-
-export default Stack;

package/dist/types/components/inline.d.ts

@@ -1,19 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { GlobalSpacingToken } from '../constants';
-import { BoxProps } from './box.partial';
-interface InlineProps {
-    as?: 'ul' | 'ol';
-    gap?: GlobalSpacingToken;
-    separator?: string;
-    children: ReactNode;
-}
-/**
- * __Inline__
- *
- * A Inline {description}.
- *
- * @internal
- */
-declare function Inline({ as, gap, separator, children, alignItems, }: InlineProps & Partial<Pick<BoxProps, 'alignItems' | 'justifyContent'>>): JSX.Element;
-export default Inline;

package/dist/types/components/stack.d.ts

@@ -1,16 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { GlobalSpacingToken } from '../constants';
-interface StackProps {
-    gap: GlobalSpacingToken;
-    children: ReactNode;
-}
-/**
- * __Stack__
- *
- * A Stack {description}.
- *
- * @internal
- */
-declare function Stack({ gap, children }: StackProps): JSX.Element;
-export default Stack;

package/src/components/inline.tsx

@@ -1,49 +0,0 @@
-/** @jsx jsx */
-import { Children, Fragment, ReactNode } from 'react';
-
-import { jsx } from '@emotion/core';
-
-import { GlobalSpacingToken } from '../constants';
-
-import Box, { BoxProps } from './box.partial';
-
-interface InlineProps {
-  as?: 'ul' | 'ol';
-  gap?: GlobalSpacingToken;
-  separator?: string;
-  children: ReactNode;
-}
-
-/**
- * __Inline__
- *
- * A Inline {description}.
- *
- * @internal
- */
-function Inline({
-  as,
-  gap,
-  separator,
-  children,
-  alignItems,
-}: InlineProps & Partial<Pick<BoxProps, 'alignItems' | 'justifyContent'>>) {
-  const childCount = Children.count(children);
-
-  return (
-    <Box as={as} flexDirection="row" alignItems={alignItems} gap={gap}>
-      {Children.map(children, (child, index) => {
-        return (
-          <Fragment>
-            {child}
-            {separator && index !== childCount - 1 && (
-              <Fragment>{separator}</Fragment>
-            )}
-          </Fragment>
-        );
-      })}
-    </Box>
-  );
-}
-
-export default Inline;

package/src/components/stack.tsx

@@ -1,30 +0,0 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-
-import { jsx } from '@emotion/core';
-
-import { GlobalSpacingToken } from '../constants';
-
-import Box from './box.partial';
-
-interface StackProps {
-  gap: GlobalSpacingToken;
-  children: ReactNode;
-}
-
-/**
- * __Stack__
- *
- * A Stack {description}.
- *
- * @internal
- */
-function Stack({ gap, children }: StackProps) {
-  return (
-    <Box flexDirection="column" gap={gap}>
-      {children}
-    </Box>
-  );
-}
-
-export default Stack;