@mmb-digital/ds-lilly 0.0.1-alpha.368 → 0.0.1-alpha.371

package/dist/ds-lilly.js

@@ -96683,8 +96683,9 @@ var Pills = function (_a) {
 
 
 var Tag = function (_a) {
-    var children = _a.children, iconBackground = _a.iconBackground, iconName = _a.iconName, testId = _a.testId, theme = _a.theme;
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-tag', { 'c-tag--withIcon': !!iconName }, theme), "data-testid": testId },
+    var _b;
+    var background = _a.background, children = _a.children, iconBackground = _a.iconBackground, iconName = _a.iconName, testId = _a.testId, theme = _a.theme;
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('c-tag', (_b = { 'c-tag--withIcon': !!iconName }, _b["c-tag--" + background + "Color"] = background, _b), theme), "data-testid": testId },
         iconName && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { backgroundColor: iconBackground, name: iconName, size: "small" }),
         children));
 };

package/dist/types/src/components/Components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode, RefObject } from 'react';
-import { IconBackgroundType, IconNameType } from '../../../types';
+import { BackgroundColorType, IconNameType } from '../../../types';
 import { ComponentPropsType } from '../../../utils';
 export interface AlertPropsType extends ComponentPropsType {
     /** Element Ref */
@@ -11,7 +11,7 @@ export interface AlertPropsType extends ComponentPropsType {
     /** Icon name. */
     iconName?: IconNameType;
     /** Icon background color. */
-    iconBackgroundColor?: IconBackgroundType;
+    iconBackgroundColor?: BackgroundColorType;
     /** Define if you want bigger paddings. */
     isLarge?: boolean;
     /** Action handler for close button */

package/dist/types/src/components/Components/Avatar/Avatar.d.ts

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { IconNameType } from '../../../types';
+import { BackgroundColorType, IconNameType } from '../../../types';
 import { ComponentPropsType } from '../../../utils';
 export interface AvatarPropsType extends ComponentPropsType {
     /** Avatar size enum type */
     size?: AvatarSizeType;
     /** Color of avatar background - any color from palette-light */
-    background?: string;
+    background?: BackgroundColorType;
     /** Avatar border */
     border?: AvatarBorderType;
     /** Avatar shadow */

package/dist/types/src/components/Components/Card/Card.d.ts

@@ -1,13 +1,13 @@
 import { KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
-import { IconBackgroundType, IconNameType } from '../../../types';
+import { BackgroundColorType, IconNameType } from '../../../types';
 import { ComponentPropsType } from '../../../utils';
 export interface CardPropsType extends ComponentPropsType {
     /** Allow click event propagation */
     allowEventPropagation?: boolean;
     /** Changes background color of card. */
-    backgroundColor?: BackgroundColorType;
+    backgroundColor?: CardBackgroundColorType;
     /** Changes border color of card. */
-    borderColor?: BackgroundColorType;
+    borderColor?: CardBackgroundColorType;
     /** Children to be rendered in the Card container. */
     children?: ReactNode;
     /** Define card header content. */
@@ -15,7 +15,7 @@ export interface CardPropsType extends ComponentPropsType {
     /** Set `true` if you want to use custom element to open/close. If you choose to do it, component is controlled by `isOpen` property. */
     hasCustomTrigger?: boolean;
     /** Define color for circular Icon background. */
-    iconBackgroundColor?: IconBackgroundType;
+    iconBackgroundColor?: BackgroundColorType;
     /** Define Icon name if you want some to be displayed. */
     iconName?: IconNameType;
     /** Define if card have collapsible content. **You must specify collapse header property**. */
@@ -40,7 +40,7 @@ export interface CardPropsType extends ComponentPropsType {
     withoutRole?: boolean;
 }
 export declare type ShadowSizeType = 'small' | 'medium' | 'large' | 'no';
-declare type BackgroundColorType = 'cloud' | 'grey' | 'gold' | 'primaryDark' | 'transparent';
+declare type CardBackgroundColorType = 'cloud' | 'grey' | 'gold' | 'primaryDark' | 'transparent';
 export declare const Card: ({ allowEventPropagation, backgroundColor, borderColor, children, hasCustomTrigger, header: collapseHeader, iconBackgroundColor, iconName, isCollapsible, isIconAlignTop, isInteractive, isOpen, isSelected, onClick, onToggle, shadowSize, size, testId, theme, withoutRole }: CardPropsType) => JSX.Element;
 export {};
 //# sourceMappingURL=Card.d.ts.map

package/dist/types/src/components/Components/Dropdown/_elements_/DropdownItem.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ComponentPropsType, IconBackgroundType, IconNameType } from '../../../../';
+import { BackgroundColorType, ComponentPropsType, IconNameType } from '../../../../';
 export interface DropdownItemPropsType extends ComponentPropsType {
     /** Allow click event propagation */
     allowEventPropagation?: boolean;
@@ -8,7 +8,7 @@ export interface DropdownItemPropsType extends ComponentPropsType {
     /** Children to be rendered in the main container. */
     children: ReactNode;
     /** Color of icon background. */
-    iconBackground?: IconBackgroundType;
+    iconBackground?: BackgroundColorType;
     /** Icon name/type enum type. */
     iconName?: IconNameType;
     /** Set if item is disabled. */

package/dist/types/src/components/Components/Icon/Icon.d.ts

@@ -1,8 +1,8 @@
-import { IconBackgroundType, IconNameType } from '../../../types';
+import { BackgroundColorType, IconNameType } from '../../../types';
 import { ComponentPropsType } from '../../../utils/classBinder';
 export interface IconPropsType extends ComponentPropsType {
     /** Color of icon background */
-    backgroundColor?: IconBackgroundType;
+    backgroundColor?: BackgroundColorType;
     /** Color of icon SVG fill from palette--(light|dark).scss example orangeDark */
     color?: string;
     /** Icon name/type enum type */

package/dist/types/src/components/Components/IconList/IconListItem.d.ts

@@ -1,12 +1,12 @@
 import { ReactElement } from 'react';
-import { IconBackgroundType, IconNameType } from '../../../types';
+import { BackgroundColorType, IconNameType } from '../../../types';
 import { ComponentPropsType } from '../../../utils';
 export declare type SizeType = 'large' | 'small';
 export interface IconListItemPropsType extends ComponentPropsType {
     /** Children to be rendered in the main container. */
     children: ReactElement;
     /** Color of icon background */
-    iconBackgroundColor?: IconBackgroundType;
+    iconBackgroundColor?: BackgroundColorType;
     /** Custom icon name */
     iconName?: IconNameType;
     /** Specific size for icon only */

package/dist/types/src/components/Components/Tag/Tag.d.ts

@@ -1,13 +1,15 @@
 import { ReactNode } from 'react';
-import { IconBackgroundType, IconNameType } from '../../../types';
+import { BackgroundColorType, IconNameType } from '../../../types';
 import { ComponentPropsType } from '../../../utils';
 export interface TagPropsType extends ComponentPropsType {
+    /** Color of tag background - any color from palette-light */
+    background?: BackgroundColorType;
     /** Tag icon name */
     iconName?: IconNameType;
     /** Tag icon background color */
-    iconBackground?: IconBackgroundType;
+    iconBackground?: BackgroundColorType;
     /** Tag content (text) */
     children: ReactNode;
 }
-export declare const Tag: ({ children, iconBackground, iconName, testId, theme }: TagPropsType) => JSX.Element;
+export declare const Tag: ({ background, children, iconBackground, iconName, testId, theme }: TagPropsType) => JSX.Element;
 //# sourceMappingURL=Tag.d.ts.map

package/dist/types/src/components/Form/Select2/Select2.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FormField2PropsType, IconBackgroundType, IconNameType, Theme } from '../../../types';
+import { BackgroundColorType, FormField2PropsType, IconNameType, Theme } from '../../../types';
 export interface Select2PropsType extends FormField2PropsType {
     /** Displays additional information for selected option. (perex, amount) */
     displayDetails?: boolean;
@@ -16,7 +16,7 @@ export interface ItemType {
     /** Optional value for withAmount variant. */
     amount?: ReactNode;
     /** Color of icon background. */
-    iconBackground?: IconBackgroundType;
+    iconBackground?: BackgroundColorType;
     /** Icon name/type enum type. */
     iconName?: IconNameType;
     /** Flag to indicate disabled item. */

package/dist/types/src/components/Form/Select2/_elements_/SelectedOption.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
-import { IconBackgroundType, IconNameType } from '../../../../types';
+import { BackgroundColorType, IconNameType } from '../../../../types';
 export interface SelectedOptionPropsType {
     /** Optional value for withAmount variant. */
     amount?: ReactNode;
     /** Color of icon background. */
-    iconBackground?: IconBackgroundType;
+    iconBackground?: BackgroundColorType;
     /** Icon name/type enum type. */
     iconName?: IconNameType;
     /** Label of list option. */

package/dist/types/src/components/Typography/Title/Title.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
-import { ComponentPropsType, IconBackgroundType, IconNameType } from '../../../';
+import { BackgroundColorType, ComponentPropsType, IconNameType } from '../../../';
 export interface TitlePropsType extends ComponentPropsType {
     /** Children to be rendered in the main container. */
     children?: ReactNode;
     /** Icon name/type enum type */
     iconName?: IconNameType;
     /** Color of icon background */
-    iconBackgroundColor?: IconBackgroundType;
+    iconBackgroundColor?: BackgroundColorType;
     /** Size of title. Used for it's basic purpose = defining page navigation priority. Please follow standard **[rules](https://www.w3.org/WAI/test-evaluate/preliminary/#headings)**. */
     size: TitleSize;
     /** Title visual size. Use this for matching title visual with desired design. */

package/dist/types/src/types/colors.d.ts

@@ -0,0 +1,3 @@
+export declare type ColorType = 'redLightest' | 'redNormal' | 'redDark' | 'redDarker' | 'redHover' | 'redActive' | 'greenLightest' | 'greenNormal' | 'greenDark' | 'greenDarker' | 'greenDarkest' | 'greenHover' | 'greenActive' | 'orangeLightest' | 'orangeNormal' | 'orangeDark' | 'orangeDarker' | 'orangeHover' | 'orangeActive' | 'primaryLightest' | 'primaryLighter' | 'primaryLight' | 'primaryNormal' | 'primaryDark' | 'primaryDarker' | 'primaryDarkest' | 'primaryHover' | 'primaryActive' | 'cloudLightest' | 'cloudLighter' | 'cloudLight' | 'cloudNormal' | 'cloudDark' | 'cloudDarker' | 'cloudHover' | 'cloudActive' | 'secondaryLightest' | 'secondaryLighter' | 'secondaryLight' | 'secondaryNormal' | 'secondaryDark' | 'secondaryDarker' | 'secondaryDarkest' | 'secondaryHover' | 'secondaryActive' | 'greyLightest' | 'greyLighter' | 'greyLight' | 'greyNormal' | 'greyDark' | 'greyDarker' | 'greyDarkest' | 'greyHover' | 'greyActive' | 'goldNormal' | 'goldDark' | 'goldDarker' | 'whiteNormal' | 'blackNormal' | 'categoryYellow' | 'categoryOrange' | 'categoryPink' | 'categoryCherry' | 'categoryViolet' | 'categoryOceanBlue' | 'categorySkyBlue' | 'categoryMidnightBlue' | 'categorySemiBlue' | 'categoryTorquise' | 'categoryMintGreen' | 'categoryForestGreen' | 'categoryOliveGreen' | 'thirdPartyFacebook' | 'thirdPartyTwitter';
+export declare type BackgroundColorType = 'info' | 'warning' | 'error' | 'success' | 'blueRed' | 'blueRedDark' | 'redLightest' | 'redNormal' | 'redDark' | 'redDarker' | 'redHover' | 'redActive' | 'greenLightest' | 'greenNormal' | 'greenDark' | 'greenDarker' | 'greenDarkest' | 'greenHover' | 'greenActive' | 'orangeLightest' | 'orangeNormal' | 'orangeDark' | 'orangeDarker' | 'orangeHover' | 'orangeActive' | 'primaryLightest' | 'primaryLighter' | 'primaryLight' | 'primaryNormal' | 'primaryDark' | 'primaryDarker' | 'primaryDarkest' | 'primaryHover' | 'primaryActive' | 'cloudLightest' | 'cloudLighter' | 'cloudLight' | 'cloudNormal' | 'cloudDark' | 'cloudDarker' | 'cloudHover' | 'cloudActive' | 'secondaryLightest' | 'secondaryLighter' | 'secondaryLight' | 'secondaryNormal' | 'secondaryDark' | 'secondaryDarker' | 'secondaryDarkest' | 'secondaryHover' | 'secondaryActive' | 'greyLightest' | 'greyLighter' | 'greyLight' | 'greyNormal' | 'greyDark' | 'greyDarker' | 'greyDarkest' | 'greyHover' | 'greyActive' | 'goldNormal' | 'goldDark' | 'goldDarker' | 'whiteNormal' | 'blackNormal' | 'categoryYellow' | 'categoryOrange' | 'categoryPink' | 'categoryCherry' | 'categoryViolet' | 'categoryOceanBlue' | 'categorySkyBlue' | 'categoryMidnightBlue' | 'categorySemiBlue' | 'categoryTorquise' | 'categoryMintGreen' | 'categoryForestGreen' | 'categoryOliveGreen' | 'thirdPartyFacebook' | 'thirdPartyTwitter';
+//# sourceMappingURL=colors.d.ts.map

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

@@ -1,4 +1,4 @@
+export * from './colors';
 export * from './common';
 export * from './iconName';
-export * from './iconBackground';
 //# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/ds-lilly",
-  "version": "0.0.1-alpha.368",
+  "version": "0.0.1-alpha.371",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": false,
@@ -12,18 +12,20 @@
     "dist"
   ],
   "scripts": {
-    "build": "yarn && yarn generate:icons && yarn generate:index && webpack --mode production --config webpack.config.js && yarn lint:fix",
+    "build": "yarn && yarn generate && webpack --mode production --config webpack.config.js && yarn lint:fix",
     "check:c": "yarn lint:fix && git add -A",
     "check:p": "yarn test:check",
     "fixme": "node ./scripts/fixme.js",
     "generate:comp": "plop --plopfile ./scripts/plopfile.js && yarn generate:index",
+    "generate:colors": "node ./scripts/processColors",
     "generate:icons": "node ./scripts/processIcons && svgr -d src/components/Components/Icon/_parts_/ dist/svg/",
     "generate:index": "node ./scripts/createIndex",
+    "generate": "yarn generate:colors && yarn generate:icons && yarn generate:index",
     "lint:fix": "yarn tslint --fix && yarn stylelint --fix",
     "lint": "yarn tslint && yarn stylelint",
     "prepare": "husky install",
-    "start:silent": "yarn generate:icons && yarn storybook:ci",
-    "start": "yarn && yarn generate:icons && yarn storybook",
+    "start:silent": "yarn generate && yarn storybook:ci",
+    "start": "yarn && yarn generate && yarn storybook",
     "storybook:build": "build-storybook",
     "storybook:ci": "start-storybook -p 6006 --ci",
     "storybook": "start-storybook -p 6006",

package/dist/types/src/types/iconBackground.d.ts

@@ -1,2 +0,0 @@
-export declare type IconBackgroundType = 'info' | 'warning' | 'error' | 'success' | 'blueRed' | 'blueRedDark' | 'redLightest' | 'redNormal' | 'redDark' | 'redDarker' | 'redHover' | 'redActive' | 'greenLightest' | 'greenNormal' | 'greenDark' | 'greenDarker' | 'greenDarkest' | 'greenHover' | 'greenActive' | 'orangeLightest' | 'orangeNormal' | 'orangeDark' | 'orangeDarker' | 'orangeHover' | 'orangeActive' | 'primaryLightest' | 'primaryLighter' | 'primaryLight' | 'primaryNormal' | 'primaryDark' | 'primaryDarker' | 'primaryDarkest' | 'primaryHover' | 'primaryActive' | 'cloudLightest' | 'cloudLighter' | 'cloudLight' | 'cloudNormal' | 'cloudDark' | 'cloudDarker' | 'cloudHover' | 'cloudActive' | 'secondaryLightest' | 'secondaryLighter' | 'secondaryLight' | 'secondaryNormal' | 'secondaryDark' | 'secondaryDarker' | 'secondaryDarkest' | 'secondaryHover' | 'secondaryActive' | 'greyLightest' | 'greyLighter' | 'greyLight' | 'greyNormal' | 'greyDark' | 'greyDarker' | 'greyDarkest' | 'greyHover' | 'greyActive' | 'goldNormal' | 'goldDark' | 'goldDarker' | 'whiteNormal' | 'blackNormal' | 'categoryYellow' | 'categoryOrange' | 'categoryPink' | 'categoryCherry' | 'categoryViolet' | 'categoryOceanBlue' | 'categorySkyBlue' | 'categoryMidnightBlue' | 'categorySemiBlue' | 'categoryTorquise' | 'categoryMintGreen' | 'categoryForestGreen' | 'categoryOliveGreen' | 'thirdPartyFacebook' | 'thirdPartyTwitter';
-//# sourceMappingURL=iconBackground.d.ts.map