add links support to stories (#334)

* add links support to stories * undo not needed changes
mondaycom · Nov 16, 2021 · 77c8b8f · 77c8b8f
1 parent 889b4a2
commit 77c8b8f
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 10 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -11,7 +11,8 @@ import {
   UsageGuidelines,
   RelatedComponents,
   DocFooter,
-  MultipleStoryElementsWrapper
+  MultipleStoryElementsWrapper,
+  Link
 } from "../src/storybook/components";
 
 addParameters({
@@ -32,7 +33,8 @@ addParameters({
       Tip,
       ComponentRules,
       UsageGuidelines,
-      RelatedComponents
+      RelatedComponents,
+      Link
     }
   },
   viewMode: "docs",

diff --git a/src/storybook/components/component-rule/component-rule.jsx b/src/storybook/components/component-rule/component-rule.jsx
@@ -26,7 +26,7 @@ export const ComponentRule = ({ component, description, isRecommended }) => {
 
 ComponentRule.propTypes = {
   component: PropTypes.element,
-  description: PropTypes.string,
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   isRecommended: PropTypes.bool
 };
 

diff --git a/src/storybook/components/component-rules/component-rules.jsx b/src/storybook/components/component-rules/component-rules.jsx
@@ -38,11 +38,11 @@ ComponentRules.propTypes = {
     PropTypes.shape({
       positive: PropTypes.shape({
         component: PropTypes.element,
-        description: PropTypes.string
+        description: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
       }),
       negative: PropTypes.shape({
         component: PropTypes.element,
-        description: PropTypes.string
+        description: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
       })
     })
   )

diff --git a/src/storybook/components/index.jsx b/src/storybook/components/index.jsx
@@ -8,6 +8,7 @@ import { RelatedComponents } from "./related-components/related-components";
 import { AnchorListItem } from "./anchor-list-item/anchor-list-item";
 import { DocFooter } from "./doc-footer/doc-footer";
 import { MultipleStoryElementsWrapper } from "./multiple-story-elements-wrapper/multiple-story-elements-wrapper";
+import { Link } from "./link/link";
 
 export {
   SectionName,
@@ -19,5 +20,6 @@ export {
   RelatedComponents,
   AnchorListItem,
   DocFooter,
-  MultipleStoryElementsWrapper
+  MultipleStoryElementsWrapper,
+  Link
 };
diff --git a/src/storybook/components/link/link.jsx b/src/storybook/components/link/link.jsx
@@ -0,0 +1,36 @@
+import cx from "classnames";
+import PropTypes from "prop-types";
+import CoreLink from "../../../components/Link/Link";
+import "./link.scss";
+import { BEMClass } from "../../../helpers/bem-helper";
+
+const BASE_CLASS = "monday-storybook-link";
+const bemHelper = BEMClass(BASE_CLASS);
+
+export const Link = ({ children, href, size }) => (
+  <CoreLink
+    text={children}
+    href={href}
+    componentClassName={cx(BASE_CLASS, {
+      [bemHelper({ state: "small" })]: size === Link.sizes.SMALL,
+      [bemHelper({ state: "medium" })]: size === Link.sizes.MEDIUM
+    })}
+  />
+);
+
+Link.sizes = {
+  SMALL: "small",
+  MEDIUM: "medium"
+};
+
+Link.defaultProps = {
+  children: undefined,
+  href: undefined,
+  size: Link.sizes.SMALL
+};
+
+Link.propTypes = {
+  children: PropTypes.string,
+  href: PropTypes.string,
+  size: PropTypes.oneOf([Link.sizes.SMALL, Link.sizes.MEDIUM])
+};
diff --git a/src/storybook/components/link/link.scss b/src/storybook/components/link/link.scss
@@ -0,0 +1,11 @@
+@import "../styles/typography.scss";
+
+.monday-storybook-link {
+  display: inline-flex;
+  &--small {
+    @include paragraph-text-without-color;
+  }
+  &--medium {
+    @include content-text-without-color;
+  }
+}
diff --git a/src/storybook/components/styles/typography.scss b/src/storybook/components/styles/typography.scss
@@ -19,15 +19,23 @@ $text-line-height: 24px;
   @include theme-prop(color, primary-text-color);
 }
 
-@mixin content-text {
-  @include basic-text;
+@mixin content-text-without-color {
   font-size: $text-font-size;
   line-height: $text-line-height;
 }
 
-@mixin paragraph-text {
+@mixin content-text {
+  @include content-text-without-color;
   @include basic-text;
+}
+
+@mixin paragraph-text-without-color {
   font-size: $small-text-font-size;
   font-weight: 300;
   line-height: $text-line-height;
+}
+
+@mixin paragraph-text {
+  @include basic-text;
+  @include paragraph-text-without-color;
 }
diff --git a/src/storybook/components/usage-guidelines/usage-guidelines.jsx b/src/storybook/components/usage-guidelines/usage-guidelines.jsx
@@ -22,7 +22,7 @@ export const UsageGuidelines = ({ guidelines }) => {
 };
 
 UsageGuidelines.propTypes = {
-  guidelines: PropTypes.arrayOf(PropTypes.string)
+  guidelines: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.element]))
 };
 
 UsageGuidelines.defaultProps = {