WIP: divider, list and more (#409)

* divider and popover links and list stories fixes

* last fixes in list

* text with high lights

* add nick to contributors, and fix colors page

* fix controls

* fix

src/components/AttentionBox/AttentionBox.jsx

@@ -7,6 +7,7 @@ import AlertIcon from "../Icon/Icons/components/Alert";
 import { baseClassName, closeClassName, compactClassName, ATTENTION_BOX_TYPES } from "./AttentionBoxConstants";
 import "./AttentionBox.scss";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
+import { ICON_TYPES } from "../Icon/IconConstants";
 
 const AttentionBox = ({
  className,
@@ -84,7 +85,7 @@ const AttentionBox = ({
 };
 
 AttentionBox.types = ATTENTION_BOX_TYPES;
-
+AttentionBox.iconTypes = ICON_TYPES;
 AttentionBox.propTypes = {
  className: PropTypes.string,
  /** we support 4 types of attention boxes */

src/components/AttentionBox/__stories__/attentionBox.stories.mdx

@@ -1,22 +1,28 @@
 import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
 import { useCallback } from "react";
 import AttentionBox from "../AttentionBox";
-import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
 import { ATTENTION_BOX_TYPES } from "../AttentionBoxConstants";
 import { MultipleStoryElementsWrapper, Link } from "../../../storybook/components";
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
 import { Info, Invite, ThumbsUp } from "../../Icon/Icons";
-import Button from "../../Button/Button.jsx";
 import Icon from "../../Icon/Icon";
 import Search from "../../Search/Search";
 import Avatar from "../../Avatar/Avatar";
 import { TOOLTIP, ALERT_BANNER, TOAST } from "../../../storybook/components/related-components/component-description-map";
 import person from "./assets/person.png";
 import "./attentionBox.stories.scss";
 
+export const argsTypes = createStoryMetaSettings({
+ component: AttentionBox,
+ enumPropNamesArray: ["type", "iconType"],
+ iconPropNamesArray: ["icon"]
+});
+
 <Meta
  title="Feedback/AttentionBox"
- component={ AttentionBox }
+ component={AttentionBox}
+ argTypes={argsTypes}
 />
 
 <!--- Component template -->
@@ -55,7 +61,7 @@ Attention box lets users know important information within content areas, as clo
  "Their height is based on the content length, which should not exceed two lines of text.",
 ]}/>
 
-<Tip title="Check yourself">If the information about a component isn’t critical for the user, use a <Link href="/?path=/docs/dialogs-and-pop-ups-tooltip--overview" size={Link.sizes.SMALL} withoutSpacing>Tooltip</Link> instead.</Tip>
+<Tip title="Check yourself">If the information about a component isn’t critical for the user, use a <Link href="/?path=/docs/popover-tooltip--overview" size={Link.sizes.SMALL} withoutSpacing>Tooltip</Link> instead.</Tip>
 
 ## Variants
 ### States

src/components/Avatar/Avatar.jsx

@@ -107,12 +107,15 @@ const Avatar = ({
 Avatar.types = AVATAR_TYPES;
 Avatar.sizes = AVATAR_SIZES;
 Avatar.colors = elementColorsNames;
+Avatar.backgroundColors = elementColorsNames;
 
 Avatar.propTypes = {
  src: PropTypes.string,
+ text: PropTypes.string,
+ icon: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  type: PropTypes.oneOf([Avatar.types.TEXT, Avatar.types.ICON, Avatar.types.IMG]),
  className: PropTypes.string,
- backgroundColor: PropTypes.oneOf(Object.keys(Avatar.colors)),
+ backgroundColor: PropTypes.oneOf(Object.values(Avatar.colors)),
  role: PropTypes.string,
  ariaLabel: PropTypes.string,
  size: PropTypes.oneOf([Avatar.sizes.LARGE, Avatar.sizes.MEDIUM, Avatar.sizes.SMALL]),
@@ -129,6 +132,8 @@ Avatar.propTypes = {
 Avatar.defaultProps = {
  src: undefined,
  className: "",
+ icon: undefined,
+ text: undefined,
  type: AVATAR_TYPES.TEXT,
  backgroundColor: elementColorsNames.CHILI_BLUE,
  role: undefined,

src/components/Avatar/__stories__/avatar.stories.mdx

@@ -10,6 +10,7 @@ import "./avatar.stories.scss";
 export const argTypes = createStoryMetaSettings({
  component: Avatar,
  enumPropNamesArray: ["type", "size"],
+ iconPropNamesArray: ["icon"]
 });
 
 <Meta 
@@ -38,7 +39,8 @@ export const avatarTemplate = createComponentTemplate(Avatar);
 Avatar is a graphical representation of a person through a profile picture, image, icon, or set of initials.
 
 <Canvas>
- <Story name="Overview" args={{size: Avatar.sizes.Large, src: person1, type: Avatar.types.IMG }}>>
+ <Story name="Overview"
+ args={{size: Avatar.sizes.LARGE, src: person1, type: Avatar.types.IMG, backgroundColor: Avatar.backgroundColors.DONE_GREEN}}>>
  {avatarTemplate.bind({})}
  </Story>
 </Canvas> 

src/components/BreadcrumbsBar/BreadcrumbItem/__stories__/breadcrumbItem.stories.mdx

@@ -1,14 +1,22 @@
 import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
-import { createComponentTemplate } from "../../../../storybook/functions/create-component-story";
+import {
+ createComponentTemplate,
+ createStoryMetaSettings
+} from "../../../../storybook/functions/create-component-story";
 import BreadcrumbsBar from "../../BreadcrumbsBar";
 import BreadcrumbItem from "../BreadcrumbItem";
 import { Workspace } from "../../../Icon/Icons";
-import { TAB, BREADCRUBMS } from "../../../../storybook/components/related-components/component-description-map";
 import "./breadcrumbItem.stories.scss";
 
+export const argTypes = createStoryMetaSettings({
+ component: BreadcrumbItem,
+ iconPropNamesArray: ["icon"]
+})
+
 <Meta
  title="Navigation/BreadcrumbsBar/BreadcrumbItem"
  component={ BreadcrumbItem }
+ argTypes={ argTypes }
 />
 
 <!--- Component template -->
@@ -17,7 +25,8 @@ export const breadcrumbItemTemplate = createComponentTemplate(BreadcrumbItem)
 
 <!--- Component documentation -->
 
-# BreadcrumbItem [Overview](#overview)
+# BreadcrumbItem
+- [Overview](#overview)
 - [Props](#props)
 - [Variants](#variants)
 - [Feedback](#feedback)

src/components/BreadcrumbsBar/__stories__/breadcrumbsBar.stories.mdx

@@ -3,17 +3,22 @@ import BreadcrumbsBar from "../BreadcrumbsBar";
 import BreadcrumbItem from "../BreadcrumbItem/BreadcrumbItem.jsx"
 import Avatar from "../../Avatar/Avatar.jsx"
 import DialogContentContainer from "../../DialogContentContainer/DialogContentContainer";
-import Icon from "../../Icon/Icon"
-import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
 import { Workspace, Folder, Board, Group } from "../../Icon/Icons";
 import person3 from "./assets/person3.png";
 import { Link } from "../../../storybook/components";
-import { BUTTON_GROUP, WIZARD, TAB } from "../../../storybook/components/related-components/component-description-map";
+import { BUTTON_GROUP, WIZARD, TABS } from "../../../storybook/components/related-components/component-description-map";
+import { createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
 import "./breadcrumbsBar.stories.scss";
 
+export const argTypes = createStoryMetaSettings({
+ component: BreadcrumbsBar,
+ enumPropNamesArray: ["type"]
+});
+
 <Meta
  title="Navigation/BreadcrumbsBar/BreadcrumbsBar"
  component={ BreadcrumbsBar }
+ argTypes={ argTypes }
 />
 
 <!--- Component template -->
@@ -164,4 +169,4 @@ Use when breadcrumbs are clickable and are used for information and navigation
 </Canvas>
 
 ## Related components
-<RelatedComponents componentsNames={[BUTTON_GROUP,WIZARD,TAB]} />
+<RelatedComponents componentsNames={[BUTTON_GROUP, WIZARD, TABS]} />

src/components/ButtonGroup/__stories__/ButtonGroup.stories.mdx

@@ -2,7 +2,7 @@ import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
 import ButtonGroup from "../ButtonGroup";
 import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
 import { Mobile } from "../../Icon/Icons";
-import { BUTTON, TAB, BREADCRUBMS } from "../../../storybook/components/related-components/component-description-map";
+import { BUTTON, TABS, BREADCRUBMS } from "../../../storybook/components/related-components/component-description-map";
 import { Link } from "../../../storybook/components";
 import Desktop from "./assets/Desktop.js"
 import "./buttonGroup.stories.scss";
@@ -299,4 +299,4 @@ Use button group as toggle for change the view between two states. For on and of
 </Canvas>
 
 ## Related components
-<RelatedComponents componentsNames={[TAB, BUTTON, BREADCRUBMS]}/>
+<RelatedComponents componentsNames={[TABS, BUTTON, BREADCRUBMS]}/>

src/components/Chips/__stories__/chips.stories.mdx

@@ -12,6 +12,7 @@ import "./chips.stories.scss";
 
 export const argTypes = createStoryMetaSettings({
  component: Chips,
+ enumPropNamesArray: ["color"],
  iconPropNamesArray: ["rightIcon", "leftIcon"]
 });
 

src/components/ColorPicker/ColorPicker.jsx

@@ -66,9 +66,13 @@ const ColorPicker = forwardRef(
  }
 );
 
+// Backward compatibility for enum naming
 ColorPicker.COLOR_STYLES = COLOR_STYLES;
 ColorPicker.sizes = SIZES;
 
+ColorPicker.colorStyles = COLOR_STYLES;
+ColorPicker.colorSizes = SIZES;
+
 ColorPicker.propTypes = {
  className: PropTypes.string,
  onSave: PropTypes.func,

src/components/ColorPicker/__stories__/ColorPicker.stories.mdx

@@ -1,10 +1,15 @@
 import ColorPicker from "../ColorPicker";
 import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
-import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
 import TextColorIndicator from "../../Icon/Icons/components/TextColorIndicator";
 import Check from "../../Icon/Icons/components/Check";
 
-<Meta title="Pickers/ColorPicker" component={ColorPicker} />
+export const argTypes = createStoryMetaSettings({
+ component: ColorPicker,
+ enumPropNamesArray: ["colorStyle", "colorSize"]
+});
+
+<Meta title="Pickers/ColorPicker" component={ColorPicker} argTypes={argTypes}/>
 
 <!--- Component template -->
 

src/components/Counter/__stories__/counter.stories.mdx

@@ -1,17 +1,23 @@
 import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
 import { useCallback, useEffect, useState } from "react";
 import Counter from "../Counter";
-import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
 import { TOOLTIP, LABEL, CHIP } from "../../../storybook/components/related-components/component-description-map";
 import Avatar from "../../Avatar/Avatar.jsx"
 import { Notifications, AddUpdate, Update } from "../../Icon/Icons"
 import Icon from "../../Icon/Icon.jsx"
 import { Link } from "../../../storybook/components";
 import "./counter.stories.scss";
 
+export const argTypes = createStoryMetaSettings({
+ component: Counter,
+ enumPropNamesArray: ["size", "color", "kind", ]
+});
+
 <Meta
  title="Feedback/Counter"
  component={ Counter }
+ argTypes={ argTypes }
 />
 
 <!--- Component template -->
@@ -46,7 +52,7 @@ Counters show the count of some adjacent data.
 ## Usage
 <UsageGuidelines guidelines={[
  "Counters are usually placed after the label of the item they're quantifying, such as the number of notifications. They should only be used to represent a number.",
- <div className="monday-storybook-counter_usage-link-line">The element the counter refers to should include <Link href="/?path=/docs/dialogs-and-pop-ups-tooltip--overview" withoutSpacing>Tooltip,</Link> where necessary, to enhance user understanding. For example, a badge is used in conjunction with an icon.</div>,
+ <div className="monday-storybook-counter_usage-link-line">The element the counter refers to should include <Link href="/?path=/docs/popover-tooltip--overview" withoutSpacing>Tooltip,</Link> where necessary, to enhance user understanding. For example, a badge is used in conjunction with an icon.</div>,
 ]}/>
 
 <Tip title="Check yourself">Need to indicate information that is not numeric? Use the <Link href="/?path=/docs/data-display-label--overview" size={Link.sizes.SMALL} withoutSpacing>Label</Link> component instead.</Tip>

src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.mdx

@@ -1,9 +1,18 @@
 import DialogContentContainer from "../DialogContentContainer";
 import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
-import { createComponentTemplate } from "../../../storybook/functions/create-component-story";
+import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
 import DialogContentContainerExample from "./DialogContentContainerExample";
 
-<Meta title="Popover/DialogContentContainer" component={DialogContentContainer} />
+export const argTypes = createStoryMetaSettings({
+ component: DialogContentContainer,
+ enumPropNamesArray: ["type", "size"]
+});
+
+<Meta
+ title="Popover/DialogContentContainer"
+ component={DialogContentContainer}
+ argTypes={ argTypes }
+/>
 
 <!--- Component template -->
 

src/components/Divider/Divider.jsx

@@ -3,21 +3,28 @@ import PropTypes from "prop-types";
 import cx from "classnames";
 import { DIRECTIONS } from "./DividerConstants";
 import "./Divider.scss";
+import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 
-const Divider = ({ classname, direction }) => {
- return <div className={cx("monday-style-divider", classname, `monday-style-divider--${direction}`)} />;
+const Divider = ({
+ // Backward compatibility for props naming
+ classname,
+ className,
+ direction
+}) => {
+ const overrideClassName = backwardCompatibilityForProperties([className, classname]);
+ return <div className={cx("monday-style-divider", overrideClassName, `monday-style-divider--${direction}`)} />;
 };
 
 Divider.directions = DIRECTIONS;
 
-Divider.defaultProps = {
- classname: "",
- direction: DIRECTIONS.HORIZONTAL
-};
-
 Divider.propTypes = {
- classname: PropTypes.string,
+ className: PropTypes.string,
  direction: PropTypes.oneOf([Divider.directions.HORIZONTAL, Divider.directions.VERTICAL])
 };
 
+Divider.defaultProps = {
+ className: undefined,
+ direction: DIRECTIONS.HORIZONTAL
+};
+
 export default Divider;

src/components/Divider/__stories__/Divider.stories.mdx

@@ -0,0 +1,59 @@
+import Divider from "../Divider";
+import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
+import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
+import { CHIP, ICONS, LABEL } from "../../../storybook/components/related-components/component-description-map";
+import classes from "./Divider.stories.module.scss";
+
+export const argTypes = createStoryMetaSettings({
+ component: Divider,
+ enumPropNamesArray: ["direction"]
+});
+
+<Meta
+ title="Data display/Divider"
+ component={ Divider }
+ argTypes={argTypes}
+/>
+
+<!--- Component template -->
+
+export const dividerTemplate = createComponentTemplate(Divider);
+
+<!--- Component documentation -->
+
+# Divider
+- [Overview](#overview)
+- [Props](#props)
+- [Variants](#variants)
+- [Feedback](#feedback)
+
+## Overview
+Divider create separation between two UI elements
+<Canvas>
+ <Story name="Overview">
+ { dividerTemplate.bind({}) }
+ </Story>
+</Canvas>
+
+## Props
+<ArgsTable of={ Divider } />
+
+## Variants
+### Directions
+<Canvas>
+ <Story name="Directions">
+ <div style={{display: "flex", flexDirection: "column"}}>
+ <div className={classes["divider-description-container"]}>
+ <span className={classes["divider-description-text"]}>Horizontal</span>
+ <Divider direction={Divider.directions.HORIZONTAL}/>
+ </div>
+ <div className={classes["divider-description-container"]}>
+ <span className={classes["divider-description-text"]}>Vertical</span>
+ <Divider direction={Divider.directions.VERTICAL}/>
+ </div>
+ </div>
+ </Story>
+</Canvas>
+
+## Related components
+<RelatedComponents componentsNames={[LABEL, ICONS, CHIP]} />

src/components/Divider/__stories__/Divider.stories.module.scss

@@ -0,0 +1,14 @@
+@import "../../../styles/themes.scss";
+
+.divider-description {
+ &-container {
+ display: flex;
+ width: 200px;
+ height: 200px;
+ }
+
+ &-text {
+ margin-right: var(--spacing-large);
+ align-self: center;
+ }
+}