@atlaskit/ds-explorations 0.0.3 → 0.1.2

package/src/components/inline.partial.tsx

@@ -0,0 +1,120 @@
+/** @jsx jsx */
+import { Children, forwardRef, Fragment, ReactNode } from 'react';
+
+import { css, jsx } from '@emotion/react';
+
+import { GlobalSpacingToken, SPACING_SCALE } from '../constants';
+
+import Text from './text.partial';
+import { BasePrimitiveProps } from './types';
+
+interface InlineProps 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;
+  /**
+   * Renders a divider between children.
+   * If a string is provided it will automatically be wrapped in a `<Text>` component.
+   */
+  divider?: ReactNode;
+  /**
+   * Elements to be rendered inside the Inline.
+   */
+  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: 'row',
+});
+
+/**
+ * __Inline__
+ *
+ * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
+ * Renders a `div` by default.
+ *
+ */
+const Inline = forwardRef<HTMLDivElement, InlineProps>(
+  ({ gap, alignItems, justifyContent, divider, children, testId }, ref) => {
+    const dividerComponent =
+      typeof divider === 'string' ? <Text>{divider}</Text> : divider;
+
+    return (
+      <div
+        css={[
+          baseStyles,
+          gap && gapMap[gap],
+          alignItems && flexAlignItemsMap[alignItems],
+          justifyContent && flexJustifyContentMap[justifyContent],
+        ]}
+        data-testid={testId}
+        ref={ref}
+      >
+        {Children.map(children, (child, index) => {
+          return (
+            <Fragment>
+              {divider && index > 0 ? dividerComponent : null}
+              {child}
+            </Fragment>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+Inline.displayName = 'Inline';
+
+export default Inline;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @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-150': css({ gap: SPACING_SCALE['sp-150'] }),
+  '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/interaction-surface.partial.tsx

@@ -0,0 +1,237 @@
+/** @jsx jsx */
+import { Fragment, ReactNode, useContext } from 'react';
+
+import { css, jsx } from '@emotion/react';
+
+import { token } from '@atlaskit/tokens';
+
+import { SurfaceContext } from './surface-provider';
+import { BasePrimitiveProps } from './types';
+
+const baseStyles = css({
+  position: 'absolute',
+  borderRadius: 'inherit',
+  cursor: 'pointer',
+  inset: 0,
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '~ *': {
+    position: 'relative',
+    pointerEvents: 'none',
+  },
+});
+
+interface InteractionSurfaceProps extends BasePrimitiveProps {
+  children?: ReactNode;
+  appearance?: InteractionBackgroundColor;
+}
+
+/**
+ *
+ * @example
+ * ```js
+ * // a minimal icon button
+ * <Box as="button">
+ *   <InteractionSurface />
+ *   <WarningIcon label="icon button" />
+ * </Box>
+ * ```
+ */
+const InteractionSurface = ({
+  appearance,
+  children,
+  testId,
+}: InteractionSurfaceProps) => {
+  const defaultSurface = useContext(SurfaceContext);
+  let surface = (appearance || defaultSurface) as InteractionBackgroundColor;
+
+  // This case will occur if the Box has not set a bg color and the ancestor surface
+  // is an elevation. An alternative would be to throw an error here as it may be better
+  // to ensure correct predictable behaviour based on user specification.
+  if (!(surface in backgroundActiveColorMap)) {
+    surface = 'neutral';
+  }
+  return (
+    <Fragment>
+      <span
+        data-testid={testId}
+        css={[
+          baseStyles,
+          surface && backgroundHoverColorMap[surface],
+          surface && backgroundActiveColorMap[surface],
+        ]}
+      />
+      {children}
+    </Fragment>
+  );
+};
+
+export default InteractionSurface;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::45000716488a9f41306a232c1f4c9f8d>>
+ * @codegenId interactions
+ * @codegenCommand yarn codegen-styles
+ * @codegenParams ["background"]
+ */
+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;
+
+/**
+ * @codegenEnd
+ */

package/src/components/stack.partial.tsx

@@ -0,0 +1,104 @@
+/** @jsx jsx */
+import { forwardRef, ReactNode } from 'react';
+
+import { css, jsx } from '@emotion/react';
+
+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>
+    );
+  },
+);
+
+Stack.displayName = 'Stack';
+
+export default Stack;
+
+/**
+ * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
+ * @codegen <<SignedSource::36d00b5586593733c7f84e9a10ddb7fd>>
+ * @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-150': css({ gap: SPACING_SCALE['sp-150'] }),
+  '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/surface-provider.tsx

@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react';
+
+import type { BackgroundColor } from './box.partial';
+
+/**
+ * __Surface context__
+ *
+ * A surface context provides context information on the current background (if set).
+ */
+export const SurfaceContext = createContext<BackgroundColor>(
+  'elevation.surface',
+);
+
+/**
+ * __useSurface__
+ *
+ * Return the current surface. If no parent sets a surface color it falls back to the default surface.
+ *
+ * @see SurfaceContext
+ */
+export const useSurface = () => {
+  return useContext(SurfaceContext);
+};
+
+SurfaceContext.displayName = 'SurfaceProvider';