@atlaskit/ds-explorations 3.5.2 → 4.0.0

package/scripts/spacing-codegen-template.tsx

@@ -1,66 +0,0 @@
-import format from '@af/formatting/sync';
-import { spacing as tokens } from '@atlaskit/tokens/tokens-raw';
-
-import { capitalize, tokenToStyle } from './utils';
-
-const spacingProperties = {
-  padding: {
-    cssProperty: 'padding',
-  },
-  paddingBlock: {
-    cssProperty: 'paddingBlock',
-  },
-  paddingInline: {
-    cssProperty: 'paddingInline',
-  },
-  gap: {
-    cssProperty: 'gap',
-  },
-  columnGap: {
-    cssProperty: 'columnGap',
-  },
-  rowGap: {
-    cssProperty: 'rowGap',
-  },
-} as const;
-
-const onlySpaceTokens = tokens
-  .filter((token) => token.name.startsWith('space.'))
-  .filter((token) => !token.name.includes('.negative'));
-
-const activeTokens = onlySpaceTokens.map((t) => ({
-  name: t.cleanName,
-  fallback: t.value,
-}));
-
-export const createSpacingStylesFromTemplate = (
-  spacingProperty: keyof typeof spacingProperties,
-) => {
-  if (!spacingProperties[spacingProperty]) {
-    throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
-  }
-
-  const { cssProperty } = spacingProperties[spacingProperty];
-
-  return (format(
-      `
-const ${spacingProperty}Map = {
-  ${activeTokens
-    .sort((a, b) => (a.name < b.name ? -1 : 1))
-    .map((token) => {
-      const propName = token.name;
-      return `'${propName}': ${tokenToStyle(
-        cssProperty,
-        token.name,
-        token.fallback,
-      )}`;
-    })
-    .join(',\n\t')}
-};`,
-      'typescript',
-    ) +
-    `\nexport type ${capitalize(
-      spacingProperty,
-    )} = keyof typeof ${spacingProperty}Map;\n`
-  );
-};

package/scripts/spacing-scale-template.tsx

@@ -1,24 +0,0 @@
-import format from '@af/formatting/sync';
-import { spacing as tokens } from '@atlaskit/tokens/tokens-raw';
-
-const onlySpaceTokens = tokens
-  .filter((token) => token.name.startsWith('space.'))
-  .filter((token) => !token.name.includes('.negative'));
-
-const activeTokens = onlySpaceTokens.map((t) => `'${t.cleanName}'`);
-
-export const createSpacingScaleTemplate = () => {
-  return format(
-    `
-export const spacingScale = [
-  ${activeTokens
-    .sort((a, b) => {
-      const spaceValueA = Number(a.match(/(\d+)/)![0]);
-      const spaceValueB = Number(b.match(/(\d+)/)![0]);
-      return spaceValueA < spaceValueB ? -1 : 1;
-    })
-    .join(',\n\t')}
-] as const;`,
-    'typescript',
-  );
-};

package/scripts/typography-codegen-template.tsx

@@ -1,72 +0,0 @@
-import format from '@af/formatting/sync';
-import { typographyAdg3 as tokens } from '@atlaskit/tokens/tokens-raw';
-
-import { capitalize, tokenToStyle } from './utils';
-
-type Token = {
-  name: string;
-  fallback: string;
-};
-
-const typographyProperties = {
-  fontSize: {
-    cssProperty: 'fontSize',
-    prefix: 'font.',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.size'),
-  },
-  fontWeight: {
-    cssProperty: 'fontWeight',
-    prefix: 'font.weight.',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.weight'),
-  },
-  fontFamily: {
-    cssProperty: 'fontFamily',
-    prefix: 'font.family.',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.family'),
-  },
-  lineHeight: {
-    cssProperty: 'lineHeight',
-    prefix: 'font.',
-    filterFn: <T extends Token>(t: T) => t.name.startsWith('font.lineHeight'),
-  },
-} as const;
-
-const activeTokens: Token[] = tokens.map((t) => ({
-  name: t.name,
-  fallback: t.value,
-}));
-
-export const createTypographyStylesFromTemplate = (
-  typographyProperty: keyof typeof typographyProperties,
-) => {
-  if (!typographyProperties[typographyProperty]) {
-    throw new Error(`[codegen] Unknown option found "${typographyProperty}"`);
-  }
-
-  const { cssProperty, prefix, filterFn } =
-    typographyProperties[typographyProperty];
-
-  return (format(
-      `
-const ${typographyProperty}Map = {
-  ${activeTokens
-    .filter(filterFn)
-    .sort((a, b) => (a.name < b.name ? -1 : 1))
-    .map((token) => {
-      const propName = token.name.replace(prefix, '');
-
-      return `'${propName}': ${tokenToStyle(
-        cssProperty,
-        token.name,
-        token.fallback,
-      )}`;
-    })
-    .join(',\n\t')}
-};`,
-      'typescript',
-    ) +
-    `\nexport type ${capitalize(
-      typographyProperty,
-    )} = keyof typeof ${typographyProperty}Map;\n`
-  );
-};

package/src/components/__tests__/unit/text.test.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-
-import { queryByAttribute, render, screen } from '@testing-library/react';
-
-import { UNSAFE_Text as Text } from '../../../index';
-
-describe('Text component', () => {
-  it('should render given text', () => {
-    render(<Text>Text</Text>);
-    expect(screen.getByText('Text')).toBeInTheDocument();
-  });
-
-  it('should not render redundant DOM nodes', () => {
-    render(
-      <Text testId="test">
-        <Text>Text</Text>
-      </Text>,
-    );
-    expect(screen.getByTestId('test')).toMatchInlineSnapshot(`
-      .emotion-0 {
-        box-sizing: border-box;
-        margin: var(--ds-space-0, 0px);
-        padding: var(--ds-space-0, 0px);
-        font-family: var(--ds-font-family-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif);
-      }
-
-      <span
-        class="emotion-0"
-        data-testid="test"
-      >
-        Text
-      </span>
-    `);
-  });
-
-  it('should render with given test id', () => {
-    render(<Text testId="test">Text</Text>);
-    expect(screen.getByTestId('test')).toBeInTheDocument();
-  });
-
-  it('should render with id attribute', () => {
-    const id = 'some-id';
-    const { container } = render(<Text id={id}>Text</Text>);
-    const queryById = queryByAttribute.bind(null, 'id');
-    const component = queryById(container, id);
-    expect(component).toBeDefined();
-  });
-
-  describe('"as" prop behaviour', () => {
-    it('renders without errors when a valid "as" value is given', () => {
-      render(<Text as="div">Text</Text>);
-      expect(screen.getByText('Text')).toBeInTheDocument();
-    });
-
-    it('throws when an invalid "as" value is given', () => {
-      // @ts-ignore purposefully providing an invalid value to test invariant behaviour
-      expect(() => render(<Text as="address">Text</Text>)).toThrow(
-        new Error(
-          'Invariant failed: @atlaskit/ds-explorations: Text received an invalid "as" value of "address"',
-        ),
-      );
-    });
-  });
-});

package/src/components/__tests__/vr-tests/text-snapshot-test.vr.tsx

@@ -1,6 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { snapshot } from '@af/visual-regression';
-
-import Text from '../../../../examples/02-text';
-
-snapshot(Text);

package/src/components/text.partial.tsx

@@ -1,375 +0,0 @@
-/** @jsx jsx */
-import { createContext, type FC, Fragment, type ReactNode, useContext } from 'react';
-
-import { css, jsx } from '@emotion/react';
-import invariant from 'tiny-invariant';
-
-import { token } from '@atlaskit/tokens';
-
-import surfaceColorMap from '../internal/color-map';
-
-import { useSurface } from './surface-provider';
-import type { BasePrimitiveProps } from './types';
-
-const asAllowlist = ['span', 'div', 'p', 'strong'] as const;
-type AsElement = (typeof asAllowlist)[number];
-export interface TextProps extends BasePrimitiveProps {
-  /**
-   * HTML tag to be rendered. Defaults to `span`.
-   */
-  as?: AsElement;
-  /**
-   * Elements rendered within the Text element
-   */
-  children: ReactNode;
-  /**
-   * Text color
-   */
-  color?: TextColor;
-  /**
-   * The HTML id attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-   */
-  id?: 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;
-  /**
-   * Truncates text with an ellipsis when text overflows its parent container
-   * (i.e. `width` has been set on parent that is shorter than text length).
-   */
-  shouldTruncate?: boolean;
-  /**
-   * Text align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
-   */
-  textAlign?: TextAlign;
-  /**
-   * Text transform https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
-   */
-  textTransform?: TextTransform;
-  /**
-   * Vertical align https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
-   */
-  verticalAlign?: VerticalAlign;
-}
-
-type TextAlign = keyof typeof textAlignMap;
-const textAlignMap = {
-  center: css({ textAlign: 'center' }),
-  end: css({ textAlign: 'end' }),
-  start: css({ textAlign: 'start' }),
-};
-
-type TextTransform = keyof typeof textTransformMap;
-const textTransformMap = {
-  none: css({ textTransform: 'none' }),
-  lowercase: css({ textTransform: 'lowercase' }),
-  uppercase: css({ textTransform: 'uppercase' }),
-};
-
-type VerticalAlign = keyof typeof verticalAlignMap;
-const verticalAlignMap = {
-  top: css({ verticalAlign: 'top' }),
-  middle: css({ verticalAlign: 'middle' }),
-  bottom: css({ verticalAlign: 'bottom' }),
-};
-
-const baseStyles = css({
-  boxSizing: 'border-box',
-  margin: token('space.0', '0px'),
-  padding: token('space.0', '0px'),
-});
-
-const truncateStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-});
-
-/**
- * Custom hook designed to abstract the parsing of the color props and make it clearer in the future how color is reconciled between themes and tokens.
- */
-const useColor = (colorProp: TextColor): NonNullable<TextColor> => {
-  const surface = useSurface();
-  const inverseTextColor =
-    surfaceColorMap[surface as keyof typeof surfaceColorMap];
-
-  /**
-   * Where the color of the surface is inverted we override the user choice
-   * as there is no valid choice that is not covered by the override.
-   */
-  const color = inverseTextColor ?? colorProp;
-
-  return color;
-};
-
-const HasTextAncestorContext = createContext(false);
-const useHasTextAncestor = () => useContext(HasTextAncestorContext);
-
-/**
- * __Text__
- *
- * 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
- */
-const Text: FC<TextProps> = ({ children, ...props }) => {
-  const {
-    as: Component = 'span',
-    color: colorProp,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    shouldTruncate = false,
-    textAlign,
-    textTransform,
-    verticalAlign,
-    testId,
-    UNSAFE_style,
-    id,
-  } = props;
-  invariant(
-    asAllowlist.includes(Component),
-    `@atlaskit/ds-explorations: Text received an invalid "as" value of "${Component}"`,
-  );
-  const color = useColor(colorProp!);
-  const isWrapped = useHasTextAncestor();
-
-  /**
-   * If the text is already wrapped and applies no props we can just
-   * render the children directly as a fragment.
-   */
-  if (isWrapped && Object.keys(props).length === 0) {
-    return <Fragment>{children}</Fragment>;
-  }
-
-  const component = (
-    <Component
-      style={UNSAFE_style}
-      css={[
-        baseStyles,
-        fontFamilyMap.sans,
-        color && textColorMap[color],
-        fontSize && fontSizeMap[fontSize],
-        fontWeight && fontWeightMap[fontWeight],
-        lineHeight && lineHeightMap[lineHeight],
-        shouldTruncate && truncateStyles,
-        textAlign && textAlignMap[textAlign],
-        textTransform && textTransformMap[textTransform],
-        verticalAlign && verticalAlignMap[verticalAlign],
-      ]}
-      data-testid={testId}
-      id={id}
-    >
-      {children}
-    </Component>
-  );
-
-  return isWrapped ? (
-    // no need to re-apply context if the text is already wrapped
-    component
-  ) : (
-    <HasTextAncestorContext.Provider value={true}>
-      {component}
-    </HasTextAncestorContext.Provider>
-  );
-};
-
-export default Text;
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::c5a6cec604462dc4b48aaf1160b83e59>>
- * @codegenId typography
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["fontSize", "fontWeight", "fontFamily", "lineHeight"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-typography-adg3.tsx <<SignedSource::bf3349cf2247aa44fbac47c953fc03b5>>
- */
-const fontSizeMap = {
-    'size.050': css({
-        fontSize: token('font.size.050', '11px'),
-    }),
-    'size.075': css({
-        fontSize: token('font.size.075', '12px'),
-    }),
-    'size.100': css({
-        fontSize: token('font.size.100', '14px'),
-    }),
-    'size.200': css({
-        fontSize: token('font.size.200', '16px'),
-    }),
-    'size.300': css({
-        fontSize: token('font.size.300', '20px'),
-    }),
-    'size.400': css({
-        fontSize: token('font.size.400', '24px'),
-    }),
-    'size.500': css({
-        fontSize: token('font.size.500', '29px'),
-    }),
-    'size.600': css({
-        fontSize: token('font.size.600', '35px'),
-    }),
-};
-
-export type FontSize = keyof typeof fontSizeMap;
-
-const fontWeightMap = {
-    bold: css({
-        fontWeight: token('font.weight.bold', '700'),
-    }),
-    medium: css({
-        fontWeight: token('font.weight.medium', '500'),
-    }),
-    regular: css({
-        fontWeight: token('font.weight.regular', '400'),
-    }),
-    semibold: css({
-        fontWeight: token('font.weight.semibold', '600'),
-    }),
-};
-
-export type FontWeight = keyof typeof fontWeightMap;
-
-const fontFamilyMap = {
-    body: css({
-        fontFamily: token(
-            'font.family.body',
-            'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
-        ),
-    }),
-    'brand.body': css({
-        fontFamily: token(
-            'font.family.brand.body',
-            '"Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
-        ),
-    }),
-    'brand.heading': css({
-        fontFamily: token(
-            'font.family.brand.heading',
-            '"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
-        ),
-    }),
-    code: css({
-        fontFamily: token(
-            'font.family.code',
-            'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
-        ),
-    }),
-    heading: css({
-        fontFamily: token(
-            'font.family.heading',
-            'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif',
-        ),
-    }),
-    monospace: css({
-        fontFamily: token(
-            'font.family.monospace',
-            'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace',
-        ),
-    }),
-    sans: css({
-        fontFamily: token(
-            'font.family.sans',
-            '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
-        ),
-    }),
-};
-
-export type FontFamily = keyof typeof fontFamilyMap;
-
-const lineHeightMap = {
-    'lineHeight.1': css({
-        lineHeight: token('font.lineHeight.1', '1'),
-    }),
-    'lineHeight.100': css({
-        lineHeight: token('font.lineHeight.100', '16px'),
-    }),
-    'lineHeight.200': css({
-        lineHeight: token('font.lineHeight.200', '20px'),
-    }),
-    'lineHeight.300': css({
-        lineHeight: token('font.lineHeight.300', '24px'),
-    }),
-    'lineHeight.400': css({
-        lineHeight: token('font.lineHeight.400', '28px'),
-    }),
-    'lineHeight.500': css({
-        lineHeight: token('font.lineHeight.500', '32px'),
-    }),
-    'lineHeight.600': css({
-        lineHeight: token('font.lineHeight.600', '40px'),
-    }),
-};
-
-export type LineHeight = keyof typeof lineHeightMap;
-
-/**
- * @codegenEnd
- */
-
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::db9171c09481d187d83bb01192c16c41>>
- * @codegenId colors
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["text"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f27d1519d51cc4a85383a00907847774>>
- */
-const textColorMap = {
-    'color.text': css({
-        color: token('color.text', '#172B4D'),
-    }),
-    disabled: css({
-        color: token('color.text.disabled', '#A5ADBA'),
-    }),
-    inverse: css({
-        color: token('color.text.inverse', '#FFFFFF'),
-    }),
-    selected: css({
-        color: token('color.text.selected', '#0052CC'),
-    }),
-    brand: css({
-        color: token('color.text.brand', '#0065FF'),
-    }),
-    danger: css({
-        color: token('color.text.danger', '#DE350B'),
-    }),
-    warning: css({
-        color: token('color.text.warning', '#974F0C'),
-    }),
-    'warning.inverse': css({
-        color: token('color.text.warning.inverse', '#172B4D'),
-    }),
-    success: css({
-        color: token('color.text.success', '#006644'),
-    }),
-    discovery: css({
-        color: token('color.text.discovery', '#403294'),
-    }),
-    information: css({
-        color: token('color.text.information', '#0052CC'),
-    }),
-    subtlest: css({
-        color: token('color.text.subtlest', '#7A869A'),
-    }),
-    subtle: css({
-        color: token('color.text.subtle', '#42526E'),
-    }),
-} as const;
-
-export type TextColor = keyof typeof textColorMap;
-
-/**
- * @codegenEnd
- */

package/src/internal/spacing-scale.tsx

@@ -1,24 +0,0 @@
-/**
- * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- *
- * Internal codegen of the spacing scale values. Only used for internal examples.
- *
- * @codegen <<SignedSource::33634cd9767c59b9aaaf64fc6f44f852>>
- * @codegenCommand yarn codegen-styles
- */
-export const spacingScale = [
-    'space.0',
-    'space.025',
-    'space.050',
-    'space.075',
-    'space.100',
-    'space.150',
-    'space.200',
-    'space.250',
-    'space.300',
-    'space.400',
-    'space.500',
-    'space.600',
-    'space.800',
-    'space.1000',
-] as const;

package/text/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "@atlaskit/ds-explorations/text",
-  "main": "../dist/cjs/components/text.partial.js",
-  "module": "../dist/esm/components/text.partial.js",
-  "module:es2019": "../dist/es2019/components/text.partial.js",
-  "sideEffects": false,
-  "types": "../dist/types/components/text.partial.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.4": {
-      "*": [
-        "../dist/types-ts4.5/components/text.partial.d.ts"
-      ]
-    }
-  }
-}