@amboss/design-system 0.27.2 → 1.0.0-canary-4

package/build/src/components/Box/Box.d.ts

@@ -23,8 +23,8 @@ declare type BoxProps = {
     alignText?: TextAlignment | MQ<TextAlignment>;
     "data-e2e-test-id"?: string;
 };
-export declare function Box({ children, space, vSpace, rSpace, lSpace, tSpace, bSpace, alignText, "data-e2e-test-id": dataE2eTestId, }: BoxProps): React.ReactElement;
-export declare namespace Box {
-    var defaultProps: Partial<BoxProps>;
-}
+export declare const Box: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & BoxProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/build/src/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { DropdownMenuProps } from "../DropdownMenu/DropdownMenu";
-export declare class CardProps {
+export declare type CardProps = {
     /** specify title displayed in Header */
     title?: string;
     /** @deprecated Subtitle is now deprecated */
@@ -12,5 +12,5 @@ export declare class CardProps {
     squareCorners?: boolean;
     children?: React.ReactNode;
     "data-e2e-test-id"?: string;
-}
+};
 export declare function Card({ title, subtitle, button, dropdown, children, overflow, squareCorners, "data-e2e-test-id": dataE2eTestId, }: CardProps): React.ReactElement;

package/build/src/components/Column/Columns.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { MQ, HorizontalAlignment, SpaceSizes, VerticalAlignment } from "../../types";
-export declare class ColumnsProps {
+import { MQ, HorizontalAlignment, SpaceSizes, VerticalAlignment, ColumnSizes, Order } from "../../types";
+export declare type ColumnsProps = {
     children: React.ReactNode[] | React.ReactNode;
     /** represents the size of both horizontal and vertical gap between children, can be a single string or an array of 3 strings
      * specify [small screen gap size, medium screen gap size, large screen gap size] to apply different gap sizes for different screen sizes
@@ -18,8 +18,23 @@ export declare class ColumnsProps {
      */
     vAlignItems?: VerticalAlignment | MQ<VerticalAlignment>;
     "data-e2e-test-id"?: string;
-}
-export declare function Columns({ children, gap, alwaysFillSpace, alignItems, vAlignItems, "data-e2e-test-id": dataE2eTestId, }: ColumnsProps): React.ReactElement;
-export declare namespace Columns {
-    var defaultProps: Partial<ColumnsProps>;
-}
+};
+export declare type ColumnProps = {
+    children: React.ReactNode[] | React.ReactNode;
+    /** represents the size of the column, can be a single number or an array of 3 numbers with a value ranging from 1 to 12
+     * specify [small screen column size, medium screen column size, large screen column size] to apply different values for different screen sizes
+     */
+    size?: ColumnSizes | MQ<ColumnSizes>;
+    /** specify the visual positioning of the column. [small screen column order, medium screen column order, large screen column order] to apply different order for different screen sizes
+     */
+    order?: Order | MQ<Order>;
+    "data-e2e-test-id"?: string;
+};
+export declare const Column: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & Partial<ColumnProps>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Columns: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & Partial<ColumnsProps>, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/src/components/Container/Container.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-export declare type ContainerProps = {
+declare type ContainerProps = {
     /** 0 - base, 1 - Card, 2 - Tooltips, 3 - Dropdowns, 4 - Modals */
     elevation: 0 | 1 | 2 | 3 | 4;
     children?: React.ReactNode;
     "data-e2e-test-id"?: string;
 };
 export declare function Container({ children, elevation, "data-e2e-test-id": dataE2eTestId, }: ContainerProps): React.ReactElement;
+export {};

package/build/src/components/DropdownMenu/DropdownMenu.d.ts

@@ -21,6 +21,9 @@ export declare type DropdownMenuProps = {
     onMenuClose?: (e: React.MouseEvent) => void;
     "data-e2e-test-id"?: string;
 };
+export declare type MenuPositionProps = {
+    verticalPosition: "up" | "down";
+};
 export declare function DropdownMenu({ menuItems, iconName, size, disabled, onMenuOpen, onMenuClose, "data-e2e-test-id": dataE2eTestId, }: DropdownMenuProps): React.ReactElement;
 export declare namespace DropdownMenu {
     var defaultProps: Partial<DropdownMenuProps>;

package/build/src/components/Form/Input/Input.d.ts

@@ -19,7 +19,6 @@ export declare type InputProps = {
     onClick?: (e: React.FormEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;
-    isTransparent?: boolean;
     areaLabel?: string;
     tabIndex?: number;
     autoComplete?: string;
@@ -45,7 +44,6 @@ export declare const InputRaw: React.ForwardRefExoticComponent<{
     onClick?: (e: React.FormEvent<HTMLInputElement>) => void;
     onBlur?: (e: React.FormEvent<HTMLInputElement>) => void;
     onFocus?: (e: React.FormEvent<HTMLInputElement>) => void;
-    isTransparent?: boolean;
     areaLabel?: string;
     tabIndex?: number;
     autoComplete?: string;
@@ -53,4 +51,4 @@ export declare const InputRaw: React.ForwardRefExoticComponent<{
         isTransparent?: boolean;
     };
 } & FormFieldProps & React.RefAttributes<HTMLInputElement>>;
-export declare function Input({ name, value, placeholder, hasError, onChange, onClick, onBlur, onFocus, type, icon, tabIndex, areaLabel, autoComplete, ...rest }: InputProps): React.ReactElement;
+export declare function Input({ name, value, placeholder, hasError, onChange, onClick, onBlur, onFocus, type, icon, tabIndex, areaLabel, autoComplete, privateProps, ...rest }: InputProps): React.ReactElement;

package/build/src/components/Link/Link.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import { LinkVariations, TextSize } from "../../types";
+declare type FontWeight = "normal" | "bold" | "inherit";
 declare type AnchorProps = {
     as?: "a";
     href: string;
@@ -14,17 +15,17 @@ declare type LinkProps = Record<string, unknown> & {
     children: string;
     as?: "a" | React.ComponentType;
     size?: TextSize;
-    weight?: "normal" | "bold" | "inherit";
+    weight?: FontWeight;
     variant?: LinkVariations;
     "data-e2e-test-id"?: string;
 } & AnchorProps;
-export declare function Link({ children, as, size, weight, variant, target, rel, href, "data-e2e-test-id": dataE2eTestId, ...rest }: LinkProps): React.ReactElement;
+export declare function Link({ children, size, weight, variant, target, rel, href, "data-e2e-test-id": dataE2eTestId, ...rest }: LinkProps): React.ReactElement;
 export declare namespace Link {
     var defaultProps: Partial<Record<string, unknown> & {
         children: string;
         as?: "a" | React.ComponentClass<{}, any> | React.FunctionComponent<{}>;
-        size?: "s" | "xs" | "m";
-        weight?: "normal" | "bold" | "inherit";
+        size?: "xs" | "s" | "m";
+        weight?: "inherit" | "normal" | "bold";
         variant?: "primary" | "secondary" | "tertiary";
         "data-e2e-test-id"?: string;
     } & {
@@ -36,8 +37,8 @@ export declare namespace Link {
     }> | Partial<Record<string, unknown> & {
         children: string;
         as?: "a" | React.ComponentClass<{}, any> | React.FunctionComponent<{}>;
-        size?: "s" | "xs" | "m";
-        weight?: "normal" | "bold" | "inherit";
+        size?: "xs" | "s" | "m";
+        weight?: "inherit" | "normal" | "bold";
         variant?: "primary" | "secondary" | "tertiary";
         "data-e2e-test-id"?: string;
     } & {

package/build/src/components/PictogramButton/PictogramButton.d.ts

@@ -7,7 +7,7 @@ export declare type PictogramButtonProps = Pick<ButtonProps, "variant" | "type"
     /** If true, the button has square corners. */
     squareCorners?: boolean;
 };
-export declare function PictogramButton({ onClick, onFocus, onBlur, type, variant, disabled, as, squareCorners, icon, "data-e2e-test-id": dataE2eTestId, ...rest }: PictogramButtonProps): React.ReactElement;
+export declare function PictogramButton({ onClick, onFocus, onBlur, type, disabled, as, icon, "data-e2e-test-id": dataE2eTestId, ...rest }: PictogramButtonProps): React.ReactElement;
 export declare namespace PictogramButton {
     var defaultProps: Partial<PictogramButtonProps>;
 }

package/build/src/components/Typography/Header/Header.d.ts

@@ -1,13 +1,33 @@
 import React from "react";
-declare type HeaderComponent = (props: {
+import { Theme } from "@emotion/react";
+declare type HeaderProps = {
+    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     children: React.ReactNode;
     "data-e2e-test-id"?: string;
     id?: string;
-}) => React.ReactElement;
-export declare const H1: HeaderComponent;
-export declare const H2: HeaderComponent;
-export declare const H3: HeaderComponent;
-export declare const H4: HeaderComponent;
-export declare const H5: HeaderComponent;
-export declare const H6: HeaderComponent;
+};
+export declare const H1: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType<any>;
+} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H2: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType<any>;
+} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H3: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType<any>;
+} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H4: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType<any>;
+} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H5: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType<any>;
+} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+export declare const H6: import("@emotion/styled").StyledComponent<{
+    theme?: Theme;
+    as?: React.ElementType<any>;
+} & HeaderProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
 export {};

package/build/src/components/Typography/Text/Text.d.ts

@@ -11,7 +11,7 @@ export declare type TextProps = {
     hyphens?: Hyphens | MQ<Hyphens>;
     "data-e2e-test-id"?: string;
 };
-export declare function Text({ size, weight, transform, children, as, variant, align, hyphens, "data-e2e-test-id": dataE2eTestId, }: TextProps): React.ReactElement;
-export declare namespace Text {
-    var defaultProps: Partial<TextProps>;
-}
+export declare const Text: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & TextProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;

package/build/src/index.d.ts

@@ -1,3 +1,5 @@
+export declare const dark: import("../build-tokens/visualConfig").VisualConfig, light: import("../build-tokens/visualConfig").VisualConfig;
+export { ThemeProvider } from "@emotion/react";
 export { Card } from "./components/Card/Card";
 export { CardBox } from "./components/Card/CardBox";
 export { Box } from "./components/Box/Box";
@@ -11,8 +13,7 @@ export { Link } from "./components/Link/Link";
 export { Icon } from "./components/Icon/Icon";
 export { Button } from "./components/Button/Button";
 export { Divider } from "./components/Divider/Divider";
-export { Columns } from "./components/Column/Columns";
-export { Column } from "./components/Column/Column";
+export { Column, Columns } from "./components/Column/Columns";
 export { Tabs } from "./components/Tabs/Tabs";
 export { Badge } from "./components/Badge/Badge";
 export { SearchResult } from "./components/SearchResult/SearchResult";

package/build/src/shared/mediaQueries.d.ts

@@ -1,2 +1,12 @@
 import { MQ } from "../types";
+declare type MqProp<T> = [
+    T | MQ<T>,
+    Record<T extends string ? T : never, string | number>
+];
+declare type EmotionCssPropertyName = string;
+declare type EmotionCssValue = string | number;
+declare type EmotionCssDescription = Record<EmotionCssPropertyName, EmotionCssValue>;
+declare type MqFunc = (rules: Record<string, MqProp<any>>) => Record<string, EmotionCssValue | EmotionCssDescription>;
+export declare const mq: MqFunc;
 export declare function getMediaQueryClasses<T>(s: T | MQ<T> | undefined, styles: Record<string, string>, prefix?: string): string[];
+export {};

package/build/src/shared/useAutoPosition.d.ts

@@ -1,4 +1,3 @@
 import { RefObject } from "react";
-declare type Position = "down" | "up";
+export declare type Position = "down" | "up";
 export declare const useAutoPosition: (anchorRef: RefObject<any>, contentRef: RefObject<any>, isActive: boolean) => Position;
-export {};

package/build/src/types/index.d.ts

@@ -13,7 +13,7 @@ export declare const ColumsSizesRuntype: Union<[Literal<1>, Literal<2>, Literal<
 export declare type ColumnSizes = Static<typeof ColumsSizesRuntype>;
 export declare const OrderRuntype: Union<[Literal<"first">, Literal<"last">, Literal<"unset">]>;
 export declare type Order = Static<typeof OrderRuntype>;
-declare const BaseVariationsRuntype: Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>;
+export declare const BaseVariationsRuntype: Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>;
 export declare type BaseVariations = Static<typeof BaseVariationsRuntype>;
 declare const TextVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"info">, Literal<"error">, Literal<"warning">]>;
 export declare type TextVariations = Static<typeof TextVariationsRuntype>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "0.27.2",
+  "version": "1.0.0-canary-4",
   "description": "the design system for AMBOSS products",
   "author": "Bagrat Gobedashvili",
   "license": "ISC",
@@ -37,22 +37,21 @@
     "npm": ">7.0.0"
   },
   "scripts": {
-    "prebuild": "rm -rf build && npm run tokens & npm run type-styles",
-    "build": "webpack && npm run postbuild",
-    "postbuild": "mkdir -p ./build/build-tokens/assets && cp -R ./build-tokens/assets ./build/build-tokens/",
-    "prestart": "npm run type-styles:watch & npm run tokens:watch &",
-    "start": "npm run storybook",
+    "prebuild": "rm -rf build && npm run tokens",
+    "build": "webpack",
+    "postbuild": "tsc --emitDeclarationOnly && mkdir -p ./build/build-tokens/assets && cp -R ./build-tokens/assets ./build/build-tokens/",
+    "prestart": "npm run tokens",
+    "start": "npm run tokens:watch & npm run storybook",
     "static": "http-server storybook-static/ -p 6006",
     "storybook": "start-storybook -s ./static -p 6006",
     "build-storybook": "npm run prebuild && build-storybook -s ./static",
-    "type-styles": "tsm src --banner '// Autogenerated.\n const styles: { [className: string]: string }; export default styles;\n'",
-    "type-styles:watch": "tsm src --banner '// Autogenerated.\n const styles: { [className: string]: string }; export default styles;\n' --watch",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "TZ=Europe/Berlin jest --coverage",
     "test:ci": "npm run test:coverage -- --ci --maxWorkers=2 --reporters=jest-junit",
-    "tokens": "node style-dictionary.build.js",
-    "tokens:watch": "npm run tokens && chokidar  \"tokens/**/*.json\" -c \"npm run tokens\"",
+    "tokens": "node style-dictionary/style-dictionary.build.js",
+    "tokens:watch": "chokidar  \"tokens/**/*.json\" -c \"npm run tokens\"",
+    "tokens:prettier": "prettier --write \"build-tokens/*.(t|j)s*\"",
     "chromatic": "npx chromatic --project-token ${CHROMATIC_TOKEN} --exit-zero-on-changes",
     "chromatic:ci": "npx chromatic --project-token ${CHROMATIC_TOKEN}  --skip 'dependabot/**' --exit-zero-on-changes",
     "chromatic:master": "npx chromatic --project-token ${CHROMATIC_TOKEN} --auto-accept-changes",
@@ -70,11 +69,13 @@
     "design-system",
     "ui-library",
     "components",
-    "scss",
+    "emotion.js",
     "typescript"
   ],
   "dependencies": {
-    "classnames": "^2.2.6",
+    "@emotion/is-prop-valid": "^1.1.1",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-keyed-flatten-children": "^1.3.0",
@@ -85,11 +86,15 @@
     "@auto-it/pr-body-labels": "^10.13.2",
     "@auto-it/released": "^10.13.2",
     "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@emotion/babel-plugin": "^11.3.0",
     "@geometricpanda/storybook-addon-badges": "0.2.1",
-    "@storybook/addons": "^6.2.9",
     "@storybook/addon-a11y": "^6.2.9",
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/addon-links": "^6.2.9",
+    "@storybook/addons": "^6.2.9",
     "@storybook/react": "^6.2.9",
     "@storybook/theming": "^6.2.9",
     "@testing-library/jest-dom": "^5.11.5",
@@ -106,7 +111,6 @@
     "babel-loader": "^8.1.0",
     "chokidar-cli": "^2.1.0",
     "chromatic": "^5.7.1",
-    "css-loader": "^5.0.1",
     "eslint": "^7.11.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^7.1.0",
@@ -126,15 +130,10 @@
     "jest-junit": "^12.0.0",
     "prettier": "^2.2.1",
     "react-is": "^17.0.1",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
     "slackify-markdown": "^4.1.0",
-    "storybook-addon-multi-theme": "^0.0.7",
+    "storybook-addon-multi-theme": "^0.0.8",
     "style-dictionary": "^3.0.1",
-    "style-loader": "^2.0.0",
     "ts-jest": "^26.4.3",
-    "ts-loader": "^8.0.18",
-    "typed-scss-modules": "^4.1.0",
     "typescript": "^4.1.2",
     "webpack": "^4.43.0",
     "webpack-cli": "^4.5.0"