Heading and spacing description (#408)

* wip heading component

* heading story

* wip

* wip

* heading component

* create description for the spacing

* spacing description and fix controls

* spacing description and fix controls

* spacing description and fix controls

src/components/EditableHeading/EditableHeading.jsx

@@ -174,6 +174,9 @@ const EditableHeading = props => {
   );
 };
 
+EditableHeading.types = TYPES;
+EditableHeading.sizes = SIZES;
+
 EditableHeading.propTypes = {
   /**
    * Class name to be added to the header wrapper
@@ -186,8 +189,15 @@ EditableHeading.propTypes = {
   /**
    * Header type
    */
-  type: PropTypes.oneOf(Object.keys(TYPES)),
-  size: PropTypes.oneOf(Object.values(SIZES)),
+  type: PropTypes.oneOf([
+    EditableHeading.types.h1,
+    EditableHeading.types.h2,
+    EditableHeading.types.h3,
+    EditableHeading.types.h4,
+    EditableHeading.types.h5,
+    EditableHeading.types.h6
+  ]),
+  size: PropTypes.oneOf([EditableHeading.sizes.SMALL, EditableHeading.sizes.MEDIUM, EditableHeading.sizes.LARGE]),
   displayPlaceholderInTextMode: PropTypes.bool,
   suggestEditOnHover: PropTypes.bool,
   autoSize: PropTypes.bool,

src/components/EditableHeading/__stories__/EditableHeading.stories.mdx

@@ -1,10 +1,16 @@
 import EditableHeading from "../EditableHeading";
 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";
+
+export const argTypes = createStoryMetaSettings({
+  component: EditableHeading,
+  enumPropNamesArray: ["size", "type"],
+})
 
 <Meta
   title="Inputs/EditableHeading"
   component={ EditableHeading }
+  argTypes={argTypes}
 />
 
 <!--- Component template -->

src/components/Heading/Heading.jsx

@@ -55,17 +55,27 @@ const Heading = ({
   return Element;
 };
 
+Heading.types = TYPES;
+Heading.sizes = SIZES;
+
 Heading.propTypes = {
   className: PropTypes.string,
-  type: PropTypes.oneOf(Object.keys(TYPES)),
+  type: PropTypes.oneOf([
+    Heading.types.h1,
+    Heading.types.h2,
+    Heading.types.h3,
+    Heading.types.h4,
+    Heading.types.h5,
+    Heading.types.h6
+  ]),
   ariaLabel: PropTypes.string,
   value: PropTypes.string,
   id: PropTypes.string,
   ellipsis: PropTypes.bool,
   ellipsisMaxLines: PropTypes.number,
   suggestEditOnHover: PropTypes.bool,
   nonEllipsisTooltip: PropTypes.string,
-  size: PropTypes.oneOf(Object.values(SIZES))
+  size: PropTypes.oneOf([Heading.sizes.SMALL, Heading.sizes.MEDIUM, Heading.sizes.LARGE])
 };
 Heading.defaultProps = {
   className: "",

src/components/Heading/__stories__/Heading.stories.mdx

@@ -0,0 +1,159 @@
+import Heading from "../Heading";
+import { ArgsTable, Story, Canvas, Meta } from "@storybook/addon-docs";
+import { createComponentTemplate, createStoryMetaSettings } from "../../../storybook/functions/create-component-story";
+import { Link, RelatedComponents } from "../../../storybook/components";
+import Divider from "../../Divider/Divider";
+import Search from "../../Search/Search";
+import Checkbox from "../../Checkbox/Checkbox";
+import Button from "../../Button/Button";
+import { Custom } from "../../Icon/Icons";
+import { emptyStateExample } from "./assets";
+import classes from "./Heading.stories.module.scss";
+import { RelatedComponent } from "../../../storybook/components/related-component/related-component";
+import {
+  EDITABLE_HEADING,
+  SEARCH,
+  TEXT_FIELD
+} from "../../../storybook/components/related-components/component-description-map";
+
+export const argsTypes = createStoryMetaSettings({
+  component: Heading,
+  enumPropNamesArray: ["type", "size"]
+})
+
+<Meta
+  title="Text/Heading"
+  component={ Heading }
+  argTypes={ argsTypes }
+/>
+
+<!--- Component template -->
+
+export const headingTemplate = createComponentTemplate(Heading);
+
+<!--- Component documentation -->
+
+# Heading
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+- [Variants](#variants)
+- [Do’s and don’ts](#dos-and-donts)
+- [Use cases and examples](#use-cases-and-examples)
+- [Related components](#related-components)
+- [Feedback](#feedback)
+
+## Overview
+Heading components are used to title any page sections or sub-sections in top-level page sections.
+
+<Canvas>
+  <Story name="Overview"
+         args={{ value: "Hello world" }}>
+    { headingTemplate.bind({}) }
+  </Story>
+</Canvas>
+
+## Props
+<ArgsTable of={ Heading } />
+
+## Usage
+<UsageGuidelines guidelines={[
+  "Never include more than one H1 title per web page",
+  "Heading always should be linked to content (by design and by implementation by passing the heading id to the content's aria-labelledBy attribute)",
+]}/>
+
+<Tip title="Not what you were looking for?">Please check out our <Link href="/?path=/docs/inputs-editableheading--overview" withoutSpacing>EditableHeading</Link> component if you would like to allow users to edit the title text..</Tip>
+
+## Variants
+### Story title 1
+<Canvas>
+  <Story name="Types">
+    <div style={{display: "flex", flexDirection: "column" }}>
+    <Heading type={Heading.types.h1} value="Hello H1" />
+    <Heading type={Heading.types.h1} value="Hello H1 medium" size="medium" />
+    <Heading type={Heading.types.h2} value="Hello H2" />
+    <Heading type={Heading.types.h2} value="Hello H2 small" size="small" />
+    <Heading type={Heading.types.h3} value="Hello H3" />
+    <Heading type={Heading.types.h4} value="Suggest Edit H4" suggestEditOnHover />
+    <Heading type={Heading.types.h5} value="H5 with tooltip" nonEllipsisTooltip="Click to edit" />
+    </div>
+  </Story>
+</Canvas>
+
+### Overflow
+Our heading components support overflow state.
+When the heading text is too long and the component includes an ellipsis flag, we will cut the end of the heading and display instead of it "...".
+<Canvas>
+  <Story name="Overflow">
+    <div style={{display: "flex", flexDirection: "column", width: "70%"}}>
+      <Heading
+        type={Heading.types.h2}
+        value="Heading without overflow heading without overflow heading without overflow"
+        ellipsis={false}
+        nonEllipsisTooltip="Non ellipsis tooltip"
+      />
+      <Heading
+        type={Heading.types.h2}
+        value="Heading with overflow heading with overflow heading with overflow heading with overflow heading with overflow"
+        ellipsis
+        nonEllipsisTooltip="Non ellipsis tooltip (this tooltip is not shown since overflow)"
+      />
+      <div>
+        <Heading
+          type={Heading.types.h2}
+          value="Heading with overflow when text is longer then 2 lines heading with overflow when text is longer then 2 lines heading with overflow when text is longer then 2 lines"
+          ellipsisMaxLines={2}
+          nonEllipsisTooltip="Non ellipsis tooltip (this tooltip is not shown since overflow)"
+        />
+      </div>
+    </div>
+  </Story>
+</Canvas>
+
+## Do’s and Don’ts
+<ComponentRules
+  rules={[
+    {
+      positive: {
+        component:<Heading value="Hello world"/>,
+        description:"Always capitalize the first letter of the first word in the heading."
+      },
+      negative: {
+        component:<Heading value="Hello World"/>,
+        description:"Please avoid capitalizing the first letter of each word in the heading."
+      }
+    }
+  ]}
+/>
+
+
+## Use cases and examples
+
+### Not editable header of a page
+<Canvas>
+  <Story name="Not editable header of a page">
+    <div style={{width: "100%"}}>
+      <Heading type={Heading.types.h1} value="My Work"/>
+      <Divider/>
+      <div className={classes["page-header_commands"]} style={{display: "flex", alignItems: "center"}} >
+        <Search wrapperClassName={classes["page-header_search"]} placeholder="Search"/>
+        <Checkbox label="Hide done items" checked />
+        <Button leftIcon={Custom} kind={Button.kinds.TERTIARY}>Customize</Button>
+      </div>
+    </div>
+  </Story>
+</Canvas>
+
+### Empty state title
+<Canvas>
+  <Story name="Empty state title">
+    <div className={classes["empty-state-container"]}>
+      <img style={{width: "290px"}} src={emptyStateExample} alt="" />
+      <Heading type={Heading.types.h2} value="No updates yet for this item"/>
+      <span style={{width: "50%", textAlign: "center"}}>Be the first one to update about progress, mention someone or upload files to share with your team members</span>
+    </div>
+  </Story>
+</Canvas>
+
+## Related components
+<RelatedComponents componentsNames={[EDITABLE_HEADING, TEXT_FIELD, SEARCH]}/>

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

@@ -0,0 +1,20 @@
+@import "../../../styles/themes.scss";
+
+.empty-state-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: var(--spacing-large);
+}
+
+.page-header_commands {
+  margin-top: var(--spacing-large);
+  & > * {
+    margin-left: var(--spacing-small);
+  }
+}
+.page-header_search {
+  width: 146px;
+}

src/components/Heading/__stories__/assets/index.js

@@ -0,0 +1,3 @@
+import emptyStateExample from "./emptyStateExample.svg";
+
+export { emptyStateExample };

src/storybook/components/coming-soon/coming-soon.jsx

@@ -5,11 +5,6 @@ import classes from "./coming-soon.module.scss";
 export const ComingSoon = () => (
   <div className={classes["coming-soon-container"]}>
     <img className={classes["coming-soon-image"]} src={comingSoon} alt="" />
-    <Heading
-      type={Heading.types.h2}
-      ellipsis={false}
-      className={classes["coming-soon-title"]}
-      value="We are working hard to build this page, it will be avilabile soon!"
-    />
+    <Heading type={Heading.types.h3} ellipsis={false} className={classes["coming-soon-title"]} value="Coming soon..." />
   </div>
 );

src/storybook/components/related-components/component-description-map.js

@@ -28,8 +28,10 @@ import { SpinnerDescription } from "./descriptions/spinner-description";
 import { SkeletonDescription } from "./descriptions/skeleton-description";
 import { TypographyDescription } from "./descriptions/typography-description/typography-description";
 import { ProgressBarDescription } from "./descriptions/progress-bar-description";
+import { EditableHeadingDescription } from "./descriptions/editable-heading-description";
 import { ShadowDescription } from "./descriptions/shadow-description/shadow-description";
 import { HeadingDescription } from "./descriptions/heading-description";
+import { SpacingDescription } from "./descriptions/spacing-description/spacing-description";
 
 export const SPLIT_BUTTON = "split-button";
 export const BUTTON_GROUP = "button-group";
@@ -60,11 +62,13 @@ export const SPINNER = "spinner";
 export const SKELETON = "skeleton";
 export const PROGRESS_BAR = "progress-bar";
 export const HEADING = "heading";
+export const EDITABLE_HEADING = "editable_heading";
 
 // General description names (not related to specific components)
 export const COLORS = "colors";
 export const TYPOGRAPHY = "typography";
 export const SHADOW = "shadow";
+export const SPACING = "spacing";
 
 export const descriptionTypesMap = new Map();
 
@@ -96,9 +100,11 @@ descriptionTypesMap.set(STEPPER, <StepperDescription />);
 descriptionTypesMap.set(SPINNER, <SpinnerDescription />);
 descriptionTypesMap.set(SKELETON, <SkeletonDescription />);
 descriptionTypesMap.set(PROGRESS_BAR, <ProgressBarDescription />);
+descriptionTypesMap.set(EDITABLE_HEADING, <EditableHeadingDescription />);
 descriptionTypesMap.set(HEADING, <HeadingDescription />);
 
 // General description (not related to specific components)
 descriptionTypesMap.set(COLORS, <ColorsDescription />);
 descriptionTypesMap.set(TYPOGRAPHY, <TypographyDescription />);
 descriptionTypesMap.set(SHADOW, <ShadowDescription />);
+descriptionTypesMap.set(SPACING, <SpacingDescription />);

src/storybook/components/related-components/descriptions/editable-heading-description.jsx

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+import { RelatedComponent } from "../../related-component/related-component";
+import EditableHeading from "../../../../components/EditableHeading/EditableHeading";
+
+export const EditableHeadingDescription = () => {
+  const component = useMemo(() => {
+    return (
+      <div>
+        <EditableHeading value="Hello world" type={EditableHeading.types.h3} />
+      </div>
+    );
+  }, []);
+  return (
+    <RelatedComponent
+      component={component}
+      title="Editable heading"
+      description="An extension of Heading component, it allows built in editing capabilities."
+    />
+  );
+};

src/storybook/components/related-components/descriptions/spacing-description/spacing-description.jsx

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { RelatedComponent } from "../../../related-component/related-component";
+import classes from "./spacing-description.module.scss";
+
+export const SpacingDescription = () => {
+  const component = useMemo(
+    () => (
+      <div className={classes["spacing-description-visual-element"]}>
+        <div className={classes["small-spacing-visual-element"]} />
+        <div className={classes["medium-spacing-visual-element"]} />
+        <div className={classes["large-spacing-visual-element"]} />
+      </div>
+    ),
+    []
+  );
+  return (
+    <RelatedComponent
+      component={component}
+      title="Spacing"
+      description="Spacing creates relationships and hierarchy withing the visual controls."
+    />
+  );
+};